다음 블로그의 '꾸미기 기능' 소스를 읽다.

다음 블로그의 '꾸미기' 기능이 업데이트 되었다는 이야기를 듣고 써봤는데 상당히 빠르더군요. 총 소스 분량만 2만 줄이 넘어가던데 어떻게하면 이렇게 빠르게 짤 수 있을까 너무 궁금해서 소스를 들여다 봤습니다.

꾸미기 기능의 속성을 설정하거나 설정된 값에 따라 스킨 속성을 변경해줍니다.

오랜만에 소스코드 읽기를 했는데 즐거운 글을 읽는 듯하더군요. 소스코드를 읽고 기분이 좋아지더군요~ ^^

 꾸미기의 기능들
꾸미기 기능은 크게 두가지 기능으로 나뉘어져 있습니다.

• 하나는 쉬운 꾸미기, 구성 꾸미기, 직접 꾸미기등의 꾸미기 속성을 선택하고 선택한 값에 따라서 스킨의 속성을 설정해주는 부분입니다.
  
• 두번째는 꾸미기 기능의 하위 속성으로 메뉴를 드래그&드롭으로 배치하거나 접거나 닫을 수 있는 기능입니다.

메뉴를 드래그&드롭으로 배치하거나 닫거나 삭제할 수 있습니다.

 꾸미기의 특징들
꾸미기의 특징 중 하나는 방대한 css의 속성들을 정의하고 이들을 array list 형태로 정의하고 있다는 것입니다.
csslist.js 파일의 내부를 보면

• getBGList()
  
• getCommonSetList()
  
• getFontList()
  
• getFrameList()
  
• getMoveSetList()
  
• getNavList()
  
• getPhotoSetList()
  
• getSideList()
  
• getTitleList()

메소드를 정의하고 인자로 받아오는 속성 값에 따라 적절한 css 속성을 리턴해 주고 있습니다.
해당하는 코드의 길이는 무려 11,202줄이나 되더군요.(공백 포함입니다.)

스킨의 속성들을 정의하고 이들에 대해서 어떠한 속성을 유지하고 어떠한 값을 들고갈지에 대한 분석이 없었다면 못할것 같은 작업이라 생각됩니다.. -_-;; (다음 블로그 개발자 분이 너무 부럽네요.)

 꾸미기의 로딩과정
꾸미기 기능의 로딩과정은 블로그 꾸미기 페이지에 인라인으로 정의되어 있는 자바스크립트 코드에서 시작됩니다.

핵심이 되는 기능은 Designer.initDesigner()에서 시작됩니다. 재미있는 것은 window의 onload 이벤트에 붙여서 로딩하는게 아닌 파일 로딩 시점에서 초기화가 시작된다는 점입니다. - css와 js가 적절히 분리되었다는 의미가 될 수도 있지 않을까요? 아닐 수도......-_-;;

Designer에는 다섯 개의 Manager 클래스들이 초기화 됩니다.

• ControlManager - 스킨, 레이아웃 등 꾸미기에 사용되는 세부 속성들을 설정하는 Manager입니다.  사용자의 선택을 분류별로 보여주고 선택을 받는 경우 이들의 값을 얻어서 다른 Manager들을 사용해서 속성을 설정해주는 역할을 합니다.
  
• LayoutManager - 레이아웃의 크기나 스타일 설정을 처리합니다.
  
• StylesManager - CSS 스타일 설정과 관련된 모든 기능을 가지고 있습니다.
  
• DragManager - Drag &Drop을 처리합니다.
  
• PickerManager - ControlManager의 직접 꾸미기에서 폰트나 컬러를 선택하게 해주는 세부 컴포넌트들을 정의하고 있습니다.

ControlManager와 PickerManager는 내부적으로 Composite 패턴을 사용하고 있는것 같습니다.

예를 들면, ControlManager에 속해있는 Control.SetControl과 관련해서 살펴보면

• Component - Control
  
• Composite - Control.SetControl
  
• Leaf - CommonSetControl, PhotoSetControl, MovieSetControl, UsetSetControl

과 같은 형태로 ControlManager에서 Control.SetContol 그리고 하위 클래스로 위임되는거죠.

결론?
아직 소스코드 전체를 다 읽지 못했고 js파일만 읽어서 무슨 분석이냐고도 할 수 있겠습니다만.. 일단 글을 끝내기 위해서 결론 항목을 만들어보았습니다. 적절히 분산된 클래스들과 잘 나누어진 스타일 데이타가 훌륭하게 조합된 소스가 아니었나 싶습니다.

(prototype.js를 제외하곤 전부 만드신 것 같은데 어느정도 인원이 개발기간이 얼마나 걸렸을까 매우 궁금해지네요. ^^;;;)


출처: 다음 블로그, Composite Pattern in Wikipedia

P.S.1  글을 쓰면서도 남의 소스코드를 분석해서 글을 써도 될까 고민을 많이 했습니다. 혹시 저작권 문제가 된다면 글을 바로 삭제하도록 하겠습니다.. (__)

P.S.2  틀린부분 당연히 있을 수 있습니다. -_-b