Rev. 2.73

느닷없이 필(?)받아서 시작한 '태터툴즈 하이브리드 프로젝트'의 작업내역을 공개합니다. 중간 중간 코어 라이브러리의 일부분을 소개하기도 했지만 이번기회에 큰 그림으로 정리해 볼까 합니다. 약 5개월 간 짬짬히 이루어진 본 작업의 주요 목적은 백엔드와 프론트엔드의 철저한 분리, 보다 편리한 관리환경 구축, 효과적인 시각표현 그리고 웹표준 준수 등입니다.

태터툴즈 1.0으로 넘어가지 않고 커스터마이즈하여 사용해 오던 태터툴즈 클래식을 발전시켜 보기로 나름 결심했습니다. 가장먼저 웹표준을 준수하기 위해 대대적인 공사를 시행했습니다. php와 html, css 등에 포함된 비표준 코드를 모조리 수정하여 W3C XHTML 1.1 유효성검사를 통과하는 데에는 3달이라는 시간이 필요했습니다. 그동안 잘못입력 했던 데이터들과 300개가 넘던 자체 비표준 코드들을 죽어라 수정하고 다시 검사하는 과정을 수백, 수천번 거처야 했습니다. 그래도 찌꺼기가 남아있네요...

호스팅 환경이 좋아짐에 따라 PHP 5.1.x에서 돌아 가도록 태터툴즈 클래식의 코어를 수정하고 Ajax 연동을 위한 아키텍처를 추가했으며, 여기저기 들어있는 스타일 코드와 자바스크립트 코드를 최대한 분리했고, Prototype기반 Scriptaculus 프레임웍을 사용하여 굳이 php가 아니어도 자바스크립트로 구현가능한 부분을 별도로 작업 했습니다. 물론, 접근성을 신경쓴다고는 했지만, Ajax가 연동되는 부분은 어쩔수가 없더군요. 자세한 내용은 아래에 별도로 작성했습니다.

기능별 자바스크립트 함수
transMsg // alert를 override하는 투명 메시지 => SoundManager
Trace // 디버깅 목적으로 만든 함수(범용, 분석기능 내장)
Hilite // 검색엔진을 통한 레퍼러의 검색 키워드 하이라이트
SoundManager // 플래시 무비를 사용한 음향효과(범용)
imgEffect // 마우스 이벤트 이미지 효과(IE의 경우 흑백 필터) => Tooltip
Progress // 진행상황 프로그레스(전체 이미지 로딩) => SoundManager
InitPart // 모드별 초기화, 목록 아이템 인기도 하이라이트
Delicious // 딜리셔스에 추가하기 아이콘 생성 => Tooltip
Refresh // Ajax 부분 새로 고침 아이콘 생성 => 팝에디터 => Tooltip Reflector => Linkthumb
Metatag // 각 태그의 메타사이트 연결 아이콘 생성 => Tooltip
Linkthumb // 내용중에 외부 URL을 썸네일로 보여줌 => Tooltip => SoundManager
Roll // 마우스 이벤트 다이나믹 컨텐츠
Favicon // 댓글의 방문객 이름앞에 패비콘 생성
Reflector // 이미지의 반투명 역상효과(원본사이즈인 경우에만 해당)
Effect.AjaxPop // Ajax, iFrame, innerHTML 모드 범용 윈도우 => Resizable
openPhoto // 이미지 뷰어 => Effect.AjaxPop
floatPhoto // 갤러리 뷰어 => Effect.AjaxPop
ajaxKeywordViewer // Ajax 키워드 뷰어 => Effect.AjaxPop
openWindow // 일반 윈도우(범용) => Effect.AjaxPop
setTab // 툴팁 및 음향효과 토글 옵션 설정(쿠키 적용)
Resizable // 엘리먼트를 리사이즈 함
CMotion // 우측상단 썸네일 이미지 슬라이더 => SoundManager
Tooltip // 마우스 오버 이벤트 툴팁(범용) => SoundManager
Google // 구글광고 스크립트 일체화
Onclick // 댓글 및 트랙백 목록 슬라이드 토글 => SoundManager
onclick_submit // Ajax form submit & update
Count // Ajax 카운터(총, 어제, 오늘, 포스트뷰, 리플수, 트랙백수를 실시간 새로 고침)
Calendar // 빠른 달력 이동을 위한 Ajax 퀵 켈린더
MultiAlbum // Json 슬라이드 멀티앨범 => SoundManager

후~ 많기도 하군요. 이제 최적화 작업을 거칠 예정입니다. 초창기에 생산한 코드들은 눈뜨고 못 봐 주겠더군요(돌아가는게 신기함;) 뭐, 아직도 모자라는 실력지만, 늘 삽질하는 재미로 놀고 있습니다. 최근에 작업한 부분은 Ajax를 이용하여 부분적으로 새로 고침이 가능하도록 한 기능인데요. 팝에디터와 연동하여 미리보기를 누르고 0.2~3초만에 결과가 바로 적용되는 것이 의외로 유용하네요. 자바스크립트의 처리량이 많아짐에 따라 페이지 전체 로딩이 더디게 되었습니다. 자바스크립트를 끄면 페이지 로딩에 걸리는 시간은 1-2초인데 반해 켜게 되면 5-6초정도가 걸리게 됩니다. 이제 슬슬 모든 고유주소를 Ajax로 전환 해야 할 시기입니다. 필요한 부분만을 로드하여 속도확보를 꾀하는 것이지요. 음훼훼훼; 참, 삑~ 뾱~ 하는 소리가 거슬리는 분이 계실까봐 메인메뉴 우측에 소리를 끄는 기능을 추가했습니다. 많이 애용해 주세요 ^^;

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar