02. 스킨 시스템의 이해
스킨 시스템의 이해
XE를 이용해서 홈페이지를 만들 때 디자인을 마음데로 바꿀 수 있도록 해주는 것이 바로 스킨(Skin) 입니다.
이 단원에서는 "스킨을 만든다."는 것은 제로보드 시스템에서 "어느 부분을 작업하는 것인가?" 를 이해하고 그 처리과정을 살펴보고자 합니다.
위 그림은 하나의 웹페이지가 완성되기 까지 XE시스템이 스킨을 가져와서 어떻게 처리하고 최종적으로 브라우저로 뿌려지는지에 관한 개념을 그림으로 간략하게 설명하고 있습니다.
XE는 크게 Skin부분 과 Program부분으로 나누어 볼 수 있습니다.
사전적 의미 :
- Skin = "피부, 살갗, 표피, 가죽"
Skin부분은 사전적 의미처럼 피부와 같이 겉으로 드러나 보이는 '모양'을 결정하는 부분입니다. 기본적인 피부는 XHTML로 이루어지고 CSS와 Image로 화장을 하고 옷을 입으며, JS(JavaScript)와 같은 장신구도 달 수 있습니다. 그리고 XML로 이름표를 답니다.
Program부분은 '심장'이나 위장, 간, 신장 등과 같이 내부적인 '기능'을 가지고 있는 부분이며 PHP 언어로 만들어져 있습니다.
XE의 '심장'은 Core(코어)입니다. Core는 Skin을 읽어내고, 각 모듈(Mudule) 및 에드온(Addon), 위젯(Widet)의 기능을 통해 얻은 결과를 조합하고 최적화(Optimize) 해서 브라우저로 보내주는 기능 등을 포함하고 있습니다.
그리고 Skin과 Program을 연결해주는 것이 바로 Template Script 입니다.
그림에 관한 추가설명 :
Skin은 기본적으로 XHTML 문법으로 만들어지며 디자인을 위해서 Image 파일과 CSS를 이용합니다.
JavaScript를 이용해서 페이지를 동적으로 만들기도 합니다. 예를들어, "ZBXE 공식 레이아웃"에서 JS가 하는 역할은 메뉴의 특정부분을 보였다 안보였다 할 수 있도록 해주는 기능을 가집니다. 이런 기능은 필요에따라 마음대로 추가할 수 있습니다.
XML은 해당 스킨에 관한 정보를 (필요에 따라 여러가지 언어로) 기록하고 확장변수를 설정하는 등의 역할을 합니다. 여기에서 '스킨에 관한 정보'란 스킨의 이름, 스킨의 버전(Version), 스킨을 디자인한 디자이너의 이름, 코딩한 프로그래머의 이름을 기록하거나 간략한 사용법 등을 기록하는 것을 말합니다. 확장변수는 해당 스킨을 관리하는 관리자모드에서 사용할 수 있는 옵션을 만들고, 그 값에 따라 스킨을 다르게 보이게 만들 수 있도록 해줍니다. 예를들어, 같은 디자인인데 전체적인 색상을 흰색, 검은색, 붉은색 등으로 바꿀 수 있는 옵션을 가질 수 있도록 하는 것이 확장변수이며 이 확장변수는 XHTML안에서 Template Script(템플릿 스크립트)를 이용해서 활용되고 zbXE의 Core에 포함된 Template Handler 가 그 문법을 해석해서 기능하도록 해줍니다.
이런 여러가지 요소로 이루어진 스킨을 zbXE 프로그램이 읽어들여 DB와 연동시키고 레이아웃스킨, 모듈스킨, 위젯스킨 등을 조합해서 하나의 웹페이지를 만들어 냅니다.
XE의 프로그램이 계산해서 완성된 페이지 및 요소들(위젯 등)은 files/cache 폴더에 별도로 저장해 두었다가 (설정에 따라) 다시 계산할 필요가 없는 부분을 요청받으면, 이런 일련의 계산과정을 다시 하지 않고 저장된 내용을 꺼내서 보여주어 효율성을 높여줍니다.
스킨을 이루는 각각의 요소들에 관한 자세한 설명은 다른 단원들을 통해서 설명될 것입니다.
* 특히, "Template Script"에 관해서는 스킨문법(템플릿 스크립트 문법) 단원을 참조하십시오.
좀 더 자세하게 들여다 보겠습니다.
그림과 같이 모듈 및 위젯 별로 각각의 Skin이 여러개 존재합니다.
레이아웃과 메뉴구성, 내용 및 위젯의 위치를 결정하는 레이아웃 스킨 + 내용을 표시하는 모듈 스킨(주로 게시판) + 부가적인 내용을 표시하는 위젯 스킨(예,최근게시물)이 zbXE 프로그램에 의해 조합 되었을 때 비로소 하나의 완성된 웹페이지가 됩니다.
즉, 각각의 Skin은 하나의 완성된 웹페이지일 수 없습니다.
Skin은 HTML문법으로 작성되지만 정작 기본 구조인<html></html> 태그도 가지고 있지 않습니다. Skin은 단지 <body></body> 태그 안에 들어갈 내용의 디자인만 가지고있습니다. zbXE가 이 스킨과 정보를 조합한 내용을 최종적으로 <html><head></head><body>내용</body></html> 태그를 만들어 줌으로서 완성된 웹페이지가 된다는 점에 유의하십시오.
위 그림에서 보시면 각각의 스킨에 포함되어있는 CSS 파일과 JS 파일은 import 라는 Template Script 명령어를 통해서 최종적으로 완성될 페이지의 <head></head> 안에 모이게 됩니다.
정리 :
아시다시피 Skin을 구성하는 언어인 XHTML, CSS, JavaScript, XML은 zbXE와는 별도로 독립적으로 존재하는 언어입니다. 그런데 이런 별도의 언어들과 zbXE 프로그램과의 연결고리가 바로 스킨 시스템이며, 스킨 시스템은 Template Script를 통해서 작동합니다.
XE에서 Skin이 어디에 들어있는지 알아보겠습니다.
