01. 스킨의 개요

스킨의 개요^#

XE는 내부적으로 Model-Controller-View(보통 MCV 아키텍쳐라고 부릅니다)로 나뉘어진 구조를 가지고 있습니다. 이중 View에 해당되는 부분을 '템플릿(Template)'으로 구현하고 있으며, 이중에 유저가 자유롭게 변경하여 쓰길 원하는 많은 부분을 '스킨(Skin)'으로 구현할 수 있도록 해두었습니다.

간단히 말해 XE를 구성하는 많은 부분을 유저 입맛에 따라 마음대로 바꿀 수 있도록 해줍니다.

멋진 스킨을 작성하기 위해 알아두면 좋은 것들

 

• XHTML: XE는 XHTML 표준을 지향합니다. 표준을 지킬지 안지킬지 선택은 스킨 작성자에게 달려 있지만 표준 웹사이트가 지니는 여러가지 장점을 다른 유저에게 누릴 수 있도록 해주기 위해서는 웹표준에 대한 이해를 필요로 합니다. XE는 XHTML 1.0 Transitional에 맞추어 제작되었습니다.

 

• CSS: XHTML표준을 지향하고 있기 때문에 과거에 사용되던 '보여지기 위한 HTML 속성들'은 더이상 유효하지 않습니다. (예: <font color="#ffcc66">와 같은 HTML속성) 따라서 외형에 대한 기술을 가급적 CSS로 하시기를 권장합니다. (필수는 아닙니다. 웹브라우저는 XHTML 문서내에 비표준 태그 또는 속성이 있는 경우에도 페이지를 보여주기 위하여 비표준모드(Quark모드라고 부릅니다)로 웹페이지를 렌더링합니다.)

 

• 기초적인 PHP 문법: 스킨은 별도의 템플릿 언어를 사용하고 있지만 결국엔 PHP로 재해석되는 것이므로 다채로운 스킨을 제작하기 위해서는 PHP에 대해 알고 계실 필요가 있습니다.

 

• 자바스크립트: XE는 AJAX 기술을 비롯하여 수많은 부분에서 자바스크립트를 사용하고 있습니다. 사실 스킨을 작성하기 위해 이미 있는 스크립트를 복사하여 쓰는 것도 좋은 방법이지만 자신이 원하는 스킨을 완벽하게 만들기 위해선 자바스크립트에 대한 지식도 익히시는게 좋습니다.

그럼 위의 모든 것을 알아야 XE 스킨을 만들수 있다는건가요? 저는 예전 제로보드 4 스킨이 만들기 더 쉬웠던 것 같아요.

 

그렇지 않습니다. 스킨 문법(템플릿 언어 문법)을 익히는 것만으로도 게시판 스킨은 쉽게 만들 수 있습니다. 다만 위의 것들을 알아두면 더 멋진 스킨들을 제작하기 용이해진다는 것입니다. 일단 배포본에 들어있는 스킨들을 분석해보시면서 하나씩 따라 만드시다보면 저희가 말씀드리지 않아도 '위의 것들을 알고 싶다'는 생각이 드실겁니다.

 

그때 공부하셔도 늦지는 않습니다. 다만 시작하시기 전에 이 매뉴얼의 2. 스킨 제작 Manual정도는 꼭 한번 읽어보고 시작하시기 바랍니다.

스킨의 종류^#

일반적으로 유저가 작성하게 되는 스킨에는 아래와 같은 것들이 존재합니다.

• 모듈스킨: 0.2.8 기준으로 공식배포되는 기본 모듈중 스킨을 지원하는 모듈은 아래와 같습니다.

• 게시판(Board): 게시판의 외형.
• 블로그(Blog): 블로그 모듈 외형. 블로그 스킨의 경우 특이하게 자체적인 레이아웃(Layout)을 내장합니다.
• 오류 표시(Message): 권한 소유자 외 접근할 수 없는 페이지 접근시 보여지는 오류 메시지의 스킨을 변경하실 수 있습니다.
• 통합 검색(Integration_search): 현재 기본 스킨 외 별다른 스킨은 없습니다.
• 설문 조사(Poll): 현재 기본 스킨 외 별다른 스킨은 없으며, 1개 이상의 컬러셋을 가지는 구조 입니다.
• 방명록(Guestbook): 방명록의 외형을 변경할 수 있습니다. 
• 스프링노트(Springnote): 스프링 노트 연동 기본 스킨 외 별다른 스킨은 없습니다.
• 포인트 시스템(Point): 포인트 시스템의 레벨 아이콘의 스킨을 지정할 수 있습니다.
• 라이브팟(Lifepod): 라이브팟 연동 기본 스킨 외 별다른 스킨은 없습니다. 
• 회원(Member): 회원 기본 스킨 외 별다른 스킨은 없으며, 1개 이상의 컬러셋을 가지는 구조 입니다. 

• 위젯: 모든 위젯은 한개 이상의 스킨을 가지는 구조입니다. (물론 XE에 기본적으로 포함된 위젯이 아니더라도 마찬가지입니다.)
• 에디터: 게시판 관리>추가설정에서 위지윅에디터의 스킨을 변경하실 수 있습니다.
• 레이아웃: 사이트의 외형. 기존 제로보드 4에서 header/footer로 넣던 내용을 레이아웃으로 작성합니다.