인쇄용 word문서 다운 받기 : Zero_XE_Manual-1.doc
출처 : http://www.zeroboard.com/?mid=manual&pageid=684681
출처 : http://www.zeroboard.com/?mid=manual&pageid=729589
스킨 시스템의 이해
zbXE를 이용해서 홈페이지를 만들 때 디자인을 마음데로 바꿀 수 있도록 해주는 것이 바로 스킨(Skin) 입니다.
이 단원에서는 "스킨을 만든다."는 것은 제로보드 시스템에서 "어느 부분을 작업하는 것인가?" 를 이해하고 그 처리과정을 살펴보고자 합니다.
위 그림은 하나의 웹페이지가 완성되기 까지 zbXE시스템이 스킨을 가져와서 어떻게 처리하고 최종적으로 브라우져로 뿌려지는지에 관한 개념을 그림으로 간략하게 설명하고 있습니다.
zbXE는 크게 Skin부분 과 Program부분으로 나누어 볼 수 있습니다.
사전적 의미 :
- Skin = "피부, 살갗, 표피, 가죽"
Skin부분은 사전적 의미처럼 피부와 같이 겉으로 드러나 보이는 '모양'을 결정하는 부분입니다. 기본적인 피부는 XHTML로 이루어지고 CSS와 Image로 화장을 하고 옷을 입으며, JS(JavaScript)와 같은 장신구도 달 수 있습니다. 그리고 XML로 이름표를 답니다.
Program부분은 '심장'이나 위장, 간, 신장 등과 같이 내부적인 '기능'을 가지고 있는 부분이며 PHP 언어로 만들어져 있습니다. zbXE의 '심장'은 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와 연동시키고 레이아웃스킨, 모듈스킨, 위젯스킨 등을 조합해서 하나의 웹페이지를 만들어 냅니다.
zbXE의 프로그램이 계산해서 완성된 페이지 및 요소들(위젯 등)은 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를 통해서 작동합니다.
zbXE에서 Skin이 어디에 들어있는지 알아보겠습니다.
스킨 시스템을 이해하시는데 도움이 되셨기를 바랍니다.
출처 : http://www.zeroboard.com/?mid=manual&pageid=392287
제로보드 XE의 스킨은 4와 다르게 PHP로 다시 변환되는 특수한 템플릿 언어를 사용합니다. 따라서 스킨을 제작하면서 자신이 원하는 내용을 넣기 위해 본 내용을 숙지해야 합니다.
변수
변수는 PHP와 동일하게 사용되며, Zeroboard XE 내부에서 사용되는 여러가지 변수를 그대로 이용할 수 있습니다. 단, 출력시에는 {...}문을 사용합니다.
- {$document_srl}
위의 문장은 $document_srl이라는 변수를 출력하도록 만듭니다. 아울러 여러가지 출력함수를 매칭시켜 화면출력을 시킬 수도 있습니다.
- {$oDocument->getTitleText()}
그러나 {...}안에 출력될 수 없는 문장등을 기재하면 안됩니다.
각 스킨별로 어떤 변수를 쓸수 있는지에 대해서 미리 이해하는 것이 필요하기 때문에 배포본에 함께 동봉된 다른 스킨들이 어떤 변수를 쓰고 있는지 숙지하시기 바랍니다.
제어문
스킨에 간단한 제어문을 사용할 수 있습니다.
조건문
- <!--@if(조건식)-->
- <!--@elseif(조건식)-->
- <!--@else-->
위의 문장등을 이용하여 조건에 맞추어 스킨 출력을 제어합니다. 조건문에 의한 실행 블록(block)을 정의하기 위하여 반드시
- <!--@end-->
위와 같이 end문을 반드시 기입해야 합니다. 예를 들어 newest_document 위젯의 스킨에서 다음과 같은 조건문 처리가 가능합니다.
- <!--@if(count($widget_info->document_list) > 0)-->
- .... 문서정보 출력...
- <!--@else-->
- 최근 문서가 없습니다.
- <!--@end-->
조건식(Condition Expression)안의 내용은 PHP로 곧바로 해석되기 때문에 PHP에서 가능한 여러가지 연산자를 쓸 수 있습니다.
- <!--@if($logged_info && $logged_info->is_admin)-->
위의 조건문은 스킨에서 현재 유저가 로긴을 했는지, 그리고 관리자인지 검사하는 것을 보입니다.
반복문
배열등을 처리하기 위하여 foreach문장을 사용할 수 있습니다. 반복문 역시 end로 해당 블록을 반드시 명시해야 합니다.
- <!--@foreach($widget_info->document_list as $oDocument)-->
- <!--@end-->
foreach의 조건식 역시 PHP의 foreach에 사용되는 것과 동일하게 해석되므로, Key와 Value를 분리하기 위해 다음과 같이 쓸 수도 있습니다.
- <!--@foreach($widget_info->document_list as $key => $oDocument)-->
- <!--@end-->
간단한 PHP문 사용
템플릿 파일에서 {@...}문을 이용하면 간단한 PHP문장을 해석하도록 해줍니다. 예를 들어,
- {@$is_logged=Context::get('is_logged')}
위와 같이 사용할 수 있습니다.(예문은 현재 로그인했는지 확인하는 XE 기본 문항을 스킨에 쓸수 있도록 해준 것입니다.
그러나 {@...}을 사용할때 안에 들어가는 것은 한문장으로 해석가능한 완전한 PHP문이어야 합니다. 예를 들어,
- {@$test = 364; $test=$test*$test}
위와 같이 PHP상에선 별 문제없어보이는 식이지만 이미 하나의 문장이 아니기 때문에 에러를 일으킵니다.(사이트가 보이지 않는 등의 치명적인 문제를 일으키기도 합니다.)
※ 내부적으로 {@...}안의 문장은 PHP의 eval() 함수를 이용하여 파싱됩니다.
파일의 분할
공통적으로 사용되는 템플릿 파일들을 나누어 관리할 수 있습니다.
- <!--#include('파일경로')-->
- <!--#include("파일경로")-->
주의: 위의 include문은 php의 include와 다르게 작동됩니다. 어디까지나 분할된 템플릿 파일을 include한다는 사실에 유의하십시오. 일반 PHP 파일은 include 해도 PHP로 해석되지 않습니다.
CSS/자바스크립트와의 연결
CSS나 자바스크립트를 사용하기 위하여 다음과 같이 <!--%import(경로)-->문법을 이용합니다.
- <!--%import("js/blog.js")-->
위의 예제는 js/blog.js파일을 현재의 스킨과 연결시키기 위해 사용된 문장입니다. 한편으로 이 문장은
- {@Context::addJsFile("js/blog.js")}
과 동일한 실행결과를 가집니다.
- <!--%import("css/common.css")-->
위의 예제는 css/common.css파일을 현재의 스킨과 연결시키기 위해 사용된 문장입니다. 한편으로 이 문장은
- {@Context::addCSSFile("css/common.css")}
과 동일한 실행결과를 가집니다.
주의: 이렇게 import된 JS파일은 선언된 위치와 상관없이 HTML의 <HEAD>안에 자동으로 삽입됩니다.
링크
'아야 어디가'님의 '레이아웃을 처음부터 만들고 싶은...' 강좌 시리즈
출처 : http://www.zeroboard.com/?mid=manual&pageid=392293
zbXE에서는 사이트의 메뉴와 디자인을 레이아웃 기능을 통해서 쉽게 적용할 수 있습니다.
레이아웃은 메뉴 모듈과 위젯등을 이용해서 홈페이지, 블로그등 다양한 형태로 사이트를 운영할 수 있게 합니다.
zbXE의 레이아웃과 제로보드4의 헤더/푸터
제로보드4에서 사이트의 디자인을 위해 사용되던 헤더/푸터 파일의 사용은 일괄적인 관리를 할 수 없고 그 내용에 따라 잘못된 결과물을 출력할 수 있던 방법이였습니다.
html 규격에 어긋나는 등의 좋지 않은 결과가 생겨나기도 하였구요.
반면에 zbXE의 레이아웃은 게시판의 스킨처럼 손쉽게 적용할 수 있고 제로보드4의 헤더/푸터 기능에 비해서 더 강력하고 쉽게 제작할 수 있습니다.
또한 공유(배포)하기에 더욱더 편리한 형태를 가지게 되었습니다.
- zb4 레이아웃
-
제로보드XE 레이아웃
↓ layout.html- (헤더 내용)...
{$content}
(푸터 내용)...
- (헤더 내용)...
이와같이 헤더와 푸터 파일을 각각 만들필요없이 layout.html 파일 하나로 간단히 레이아웃을 제작할 수 있습니다.
레이아웃 만들기
- 먼저 원하는데로 body부분의 레이아웃을 작성합니다.
body 외의 html태그나 head는 XE가 알아서 처리합니다. 따라서 <body></body>태그 사이에 들어갈 부분만 작업하면 됩니다.
또한 이때 컨텐츠, 통합검색, 로그인위젯, 메뉴, 언어선택 등이 차지할 공간을 미리 알맞게 비워두고 제작합니다.
-
css와 js파일 삽입방법
레이아웃 파일 가장 처음부분에 아래와 같은 방법으로 삽입합니다.
- <!--%import("(폴더)/(파일명).js")-->
<!--%import("(폴더)/(파일명).css")-->
보시는 것처럼 js파일과 css파일 삽입방법은 같습니다.
컬러셋을 여러개로 제작하실 경우엔 조건문을 사용하여 각 컬러셋마다 다른 파일을 삽입하실 수 있습니다.- <!--@if($layout_info->colorset == "white")-->
<!--%import("css/white.css")-->
<!--@elseif($layout_info->colorset == "black")-->
<!--%import("css/black.css")-->
<!--@else-->
<!--%import("css/default.css")-->
<!--@end-->
위와 같이 조건문을 사용하여 여러 컬러셋에 대해 서로다른 css파일을 삽입할 수 있습니다.
컬러셋은 info.xml에서 extra_vars로 사용자로부터 입력받을수 있게 하시고
조건문에 관한 자세한 설명은 스킨 문법을 참고하세요. - <!--%import("(폴더)/(파일명).js")-->
- 이제 컨텐츠, 로그인위젯, 메뉴, 언어선택 등을 넣어봅시다.
이 메뉴얼에선 제로보드XE 공식사이트 스킨(xe_official)에 쓰인 것들만 설명합니다. -
- 컨텐츠 부분
게시판, 페이지 등이 나타날 부분으로, 꼭 넣어주셔야 합니다.
간단히 {$content} 를 넣으면 됩니다. -
언어선택 부분
언어 선택 버튼이 나타날 부분입니다.- <ul>
<!--@foreach($lang_supported as $key => $val)-->
<!--@if($key!= $lang_type)-->
<li><a href="#" onclick="doChangeLangType('{$key}');return false;">{$val}</a></li>
<!--@end-->
<!--@end-->
</ul>
기본적으로 위와같이 넣으시면 됩니다.
꼭 ul,li태그를 사용하실 필요는 없으며 css를 이용하여 다듬으셔도 무방합니다. (언어선택을 원치않으실 경우엔 아예 넣지 않으셔도 됩니다.) - <ul>
-
1차 메뉴 부분
1차 메뉴가 나타날 부분으로, 꼭 넣어주셔야 합니다.
먼저 info.xml에서 extra_vars에서 메뉴를 받아야합니다.
그후에 레이아웃의 원하는 부분에 아래와 같은 코드를 넣어주시면 됩니다.- <ul>
<!--@foreach($main_menu->list as $key => $val)-->
<!--@if($val['text'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->>
<a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a>
</li>
<!--@end-->
<!--@end-->
</ul>
언어선택 부분과 마찬가지로 꼭 ul,li태그를 사용하실 필요는 없으며 css를 이용하여 다듬으셔도 무방합니다.
- <ul>
-
통합검색 부분
통합검색 폼과 검색버튼이 나타날 부분입니다.- <form action="{getUrl()}" method="post" id="isSearch">
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input name="search_target" type="radio" value="title" id="search_target" class="searchOrder" checked="checked" title="search option" />
<label for="search_target" class="checked" id="search_target_label" onclick="showHide('selectOrder'); return false">{$lang->title}</label>
<ul id="selectOrder">
<li>
<input type="radio" name="search_target" value="title" id="search_target1" />
<label for="search_target1" onclick="chkIsKind(1, '{$lang->title}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->title}</label>
</li>
<li>
<input type="radio" name="search_target" value="content" id="search_target2" />
<label for="search_target2" onclick="chkIsKind(2, '{$lang->content}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->content}</label>
</li>
<li>
<input type="radio" name="search_target" value="title_content" id="search_target3" />
<label for="search_target3" onclick="chkIsKind(3, '{$lang->title}+{$lang->content}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->title}+{$lang->content}</label>
</li>
<li>
<input type="radio" name="search_target" value="comment" id="search_target4" />
<label for="search_target4" onclick="chkIsKind(4, '{$lang->comment}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->comment}</label>
</li>
<li>
<input type="radio" name="search_target" value="tag" id="search_target5" />
<label for="search_target5" onclick="chkIsKind(5, '{$lang->tag}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->tag}</label>
</li>
</ul>
<input name="is_keyword" type="text" class="inputText" title="keyword" />
<input type="image" src="./images/{$layout_info->colorset}/buttonSearch.gif" alt="{$lang->cmd_search}" class="submit" />
</form>
마찬가지로 알맞게 스타일을 수정하셔도 무방합니다.
- <form action="{getUrl()}" method="post" id="isSearch">
-
로그인위젯
배포가 목적이라면 로그인 위젯공간은 비워두시거나 기본 로그인스킨을 사용하시기 바랍니다. 이유는 만약 다른 사용자가 가지고있지 않은 로그인스킨 위젯 코드를 추가한다면 다른 사용자에게 혼란이 빚어질 것이기 때문입니다.
제로보드XE 기본 로그인위젯 스킨(xe_official) 코드 (제로보드XE에 기본으로 포함되어 있습니다.)- <img src="./images/blank.gif" class="zbxe_widget_output" widget="login_info" skin="xe_official" colorset="{$layout_info->colorset}" />
-
이외에도 여러 extra_vars를 활용해 사용자정의로 설정할수있는 여러부분을 만드실 수 있습니다.
이로써 레이아웃 틀의 제작이 끝났습니다.
- 컨텐츠 부분
-
레이아웃 설명달기 (info.xml)
- <?xml version="1.0" encoding="utf-8"?>
<layout version="0.1">
<title xml:lang="ko">레이아웃 이름</title>
<author email_address="제작자 email" link="제작자 홈페이지 주소" date="작성일">
<name xml:lang="ko">제작자 이름</name>
<description xml:lang="ko">
레이아웃에 대한 간단한 설명
</description>
</author>
</layout>
위와 같은 형식으로 간단히 작성하시면 됩니다.
레이아웃을 누가 만들었고 어떤 목적으로 만들었는지에 대한 내용을 info.xml 이라는 파일에 적어서 저장합니다.
info.xml 파일로 레이아웃의 저작자가 누구인지 알릴 수 있고 차후에 자신이 볼때도 내역을 다시 확인할 수 있습니다.
더불어 확장변수/메뉴연결 등을 지정할 수 있습니다.
info.xml은 conf폴더 내에 넣어두시면 됩니다. - <?xml version="1.0" encoding="utf-8"?>
파일 정리
레이아웃 이름으로 된 폴더를 만드신 후,
위와 같이 layout.html, conf폴더와 이미지, js, css파일들을 넣으시면 됩니다.
링크
'아야 어디가'님의 '레이아웃을 처음부터 만들고 싶은...' 강좌 시리즈
출처 : http://www.zeroboard.com/?mid=manual&pageid=905090
홈페이지 형태의 레이아웃을 제작하는 예제를 통해 레이아웃 제작 하는 방법을 소개합니다.
레이아웃등을 포함한 모든 스킨은 다음과 같은 순서로 제작됩니다.
스킨 제작을 위한 필수 사항
- 디자인
zbXE의 스킨들은 로그인 유무에 따라서 모양이나 기능이 변할 수 있습니다.
이에 맞춰서 디자인을 해주어야 합니다. - 퍼블리싱
퍼블리싱이란 이미지로 되어 있는 디자인을 HTML과 CSS 혹은 Javascript로 만드는 것을 이야기합니다.
이 과정에는 적절한 크기와 형태로 이미지를 나누어야 하고 HTML/CSS를 이용하여 이를 다시 합치는 작업이 있습니다. - 스킨 제작
퍼블리싱이 끝난 결과물은 브라우저에서 잘 보여지지만 내용이 없는 껍데기일 뿐입니다.
여기에 zbXE에서 작성된 컨텐츠와 연동될 수 있도록 생명력을 부여해야 합니다.
이때는 02. zbXE 템플릿 스크립트 문법을 이용합니다.
1. 디자인 - 스킨 제작을 위한 구성 설계
레이아웃은 홈페이지 혹은 블로그등의 사이트 껍데기라고 간단히 이야기할 수 있습니다.
즉 내용이 출력되는 부분을 제외한 나머지를 담당하고 있는 것입니다.
여기에 메뉴(menu) 모듈에서 생성한 메뉴를 연동하게 되면 하나의 훌륭한 사이트 레이아웃이 되어 멋지게 동작할 수 있습니다.
레이아웃에는 다음과 같은 구성 요소 및 고민 사항이 필요합니다.
- 메뉴와의 연동
레이아웃에 연동되는 메뉴를 몇개를 할 것인지와 각 메뉴마다 몇단계까지 지원할 것인지를 정해야 합니다.
Javascript로 구성될 경우에 한해서 무한 단계까지 가능하겠지만 보통의 UI(usre interface)들은 2~3단계로 구성되어 있습니다. - 기본으로 탑재될 위젯
레이아웃에 위젯들을 기본설치 할 수 있습니다.
이 위젯들은 위젯 관리 페이지에서 생성된 코드를 삽입함으로서 편하게 추가가 가능합니다.
보통 홈페이지형 레이아웃에는 로그인정보만을 기본으로 탑재하고 블로그형 레이아웃은 최신글/댓글등의 블로그툴에서 자주 사용되는 위젯들을 기본 탑재하게 됩니다.
위 사항을 고려하여 먼저 디자인을 합니다.
디자인시에 마우스 오버시 혹은 선택되었을때의 효과도 미리 고려하는 것이 좋습니다.
2. 퍼블리싱 - 최대한 가볍고 여러가지 환경에서 변함 없이..
최근에는 웹표준을 준수하는 것에 대한 요구가 높아지고 있습니다.
웹표준을 준수하는 방법이나 지침서들은 많이 있으니 여유가 있을때 공부하시는 것을 추천드립니다.
다만 웹표준이란 결국 다양한 환경에서, 그리고 출력되는 컨텐츠가 단순히 이쁘게 하기만을 위한 것이 아니라 의미를 가지도록 하기 위한 방법이므로 웹표준이 최우선이지는 않습니다.
하지만 웹표준을 준수하여 퍼블리싱을 할 경우 차후 유지보수시에 매우 편하기도 하니 가능한 준수하는 것이 좋습니다.
웹표준과 별도로 다양한 브라우저에서 잘 보이게 하기 위한 크로스 브라우징은 늘 고민거리이지만 가능한 지키는 것이 좋습니다.
크로스 브라우징은 정성을 들여야 하는 것이니만큼 충분한 시간적 여유를 두고 진행하시는 것이 좋습니다.
레이아웃의 퍼블리싱은 대부분 간단하지만 메뉴의 선택에 따른 동적 변화를 준다든지 컨텐츠의 양에 따라 레이아웃이 깨어지지 않도록 하는 부분등은 유의를 하여 테스트를 하여야 합니다.
3. 스킨제작 - 생명을 부여하자
zbXE의 스킨으로 생명력을 부여하기 위해서는 02. zbXE 템플릿 스크립트 문법을 이용합니다.
다행히 레이아웃에는 많은 문법이 사용되지 않고 대부분 기존에 제작된 레이아웃들의 문법을 가져오는 것으로 쉽게 적용할 수 있습니다.
그리고 레이아웃에서 동적으로 변화를 주고 싶은 부분을 변수화 하여 직접 입력받아 사용하도록 할 수 있습니다.
위의 3단계로 실제 레이아웃을 만들어 보는 예제를 소개하도록 하겠습니다.
01. 디자인 으로 넘어가봅시다.
출처 : http://www.zeroboard.com/?mid=manual&pageid=905214
레이아웃 제작을 위한 디자인은 funny4u님께서 해주신 것으로 하겠습니다.
( 참고 : http://www.zeroboard.com/16573853 )
일단 위와 같은 디자인 요소로 되어 있습니다.
간단히 하기 위해서 메뉴는 1개만 있고 3단계까지 가능하도록 합니다.
통합 검색 폼과 로그인 정보 위젯 1개를 기본 탑재하도록 합니다.
제일 상단 메뉴의 경우 마우스 오버시/ 선택시 배경 이미지가 살짝 달라지도록 하면 될 것 같습니다.
위와 같이 디자인을 하였으면 02. 퍼블리싱으로 넘어갑니다.
출처 : http://www.zeroboard.com/?mid=manual&pageid=905300
- 01. 디자인에서 만든 디자인을 퍼블리싱하기 위해서 각각의 동작을 구현하기 위해서 여러부분으로 잘라야 합니다.
여러가지 방법이 있겠지만 아래와 같이 자르도록 하겠습니다.
이미지 자르기
위와 같이 목적을 가지고 자르도록 합니다.
자를때는 아래에서 소개하는 파일 포맷을 잘 이해하여 정교하게 하는 것이 좋습니다.
이미지 파일은 gif, jpg, png등이 일반적으로 사용됩니다.
각각 목적과 효과가 다릅니다.
- gif
상대적으로 작은 용량으로 저장할 수 있고 투명/ 애니메이션 효과가 가능하지만 큰 이미지에는 사용을 자제하는 것이 좋음
그리고 gif파일은 color index를 포함하므로 가능한 색상 수가 적을 수록 파일 크기가 작아짐 - jpg
이미지를 압축 저장하기 때문에 큰 파일 저장할때 유리하고 직접 압축질을 선택할 수 있어서 상황에 따라 파일 크기 조절 가능
다만 압축 저장이 되어 원본이 훼손 될 수 있으니 연결되는 분위를 자를 경우 색상의 변화가 생길 수 있음 - png
gif처럼 투명 효과도 제공하고 특히 alpha값, 즉 투명도를 반영할 수 있어서 매우 편하고 강력히 사용할 수 있지만 IE6에서 제대로 지원이 되지 않는다는 단점이 있음.
단 zbXE에서는 iePngFix등과 같은 className을 부여할 경우 정상적으로 투명/알파채널의 값이 반영이 됨
HTML 문서 작성 준비
먼저 잘 잘라진 이미지를 이용하여 형태를 구성하여야 합니다.
HTML 문서는 여러가지 DocType(document type)을 가지고 그에 따라 조금씩은 다른 모습을 보여줍니다.
zbXE에서는 XHTML 1.0 Transitional 을 이용하고 있습니다.
먼저 손쉽게 작업하기 위해서 layout_sample.zip 파일을 다운로드 받으세요.
이 파일에는 레이아웃을 생성하기 위한 가장 기본적인 파일들이 있습니다.
각 파일들의 구성 요소는 다음과 같습니다.
- conf/info.xml : 레이아웃 제작자 정보 및 컬러셋/ 확장변수등을 입력받기 위한 설정 파일입니다.
- css/layout.css : utf8로 저장되어 있고 utf8을 사용한다고 명시된 css 파일입니다.
- images/ : 이미지가 저장될 위치의 빈 폴더입니다. (다른 이름이어도 됩니다)
- layout.html : 가장 기본적인 코드가 포함된 html 파일입니다.
layout_sample.zip 파일을 다운로드 받아서 압축을 풀어 적당한 곳에 놓으세요.
그리고 layout.html 파일을 더블클릭하거나 브라우저에 끌어다 놓으면 아래와 같은 내용만 출력됩니다.
이제 퍼블리싱을 위한 기본 준비는 끝났고 실제 예제 이미지를 html 코드로 만들어 봅시다.
HTML 퍼블리싱
HTML문서는 특별한 경우(dhtml등)이 아니면 위에서부터 아래로 읽으면서 표시를 합니다.
여러가지 제작 방법이 있겠지만 여기서는 전체 그림을 대상으로 분할을 하고 진행하겠습니다.
위와 같이 영역을 분할하는 것은 대부분 구성 요소의 배치를 보면 자연스럽게 되지만 이 레이아웃 디자인에서 좌우 그림자 배경때문에 조금 중첩이 되는 구조로 잘려집니다.
위와 같이 분할 하여 퍼블리싱한 결과는 다음 파일을 받으시면 됩니다.
파일을 다운 받으시고 압축을 풀고 layout.html 파일을 더블클릭하시거나 브라우저로 끌어 놓으면 결과가 보입니다.
일단 다음과 같은 유의점들이 있으니 참고하여 분석하시기 바랍니다.
- 가능한 가로/세로 길이가 정해진 것이 작업하기 편합니다.
그렇지 않은 경우는 보다 세밀한 작업이 필요합니다.
- div는 한줄을 다 차지하는 속성을 가지지만 style의 float:left 나 float:right로 한 줄에 여러개가 나오게 할 수 있습니다.
단 이 경우 각 div의 높이를 잘 지정해 주어야 원하는 배치가 가능합니다.
그리고 FF/Safari/Opera에서는 div 속성에 overflow:hidden 을 추가해줌으로서 그 div의 높이가 정확히 파악이 되지만 IE계열에서는 float를 사용한 div들 제일 끝에 <div style="clear:both"></div>를 삽입해주어야 합니다.
div의 배치를 할때 border:1px solid red; 와 같이 외곽선을 그리는 방법으로 배치방법을 확인할 수 있습니다.
- 메뉴링크의 경우 가능한 ul/ li 태그로 꾸미는 것이 차후 여러모로 도움이 됩니다.
이 때 ul에 margin:0; padding:0; list-style:none; 을 지정함으로서 div와 똑같은 모양으로 만들 수 있습니다.
div로 레이아웃을 꾸미는 것은 다음 style들을 알면 어렵지 않게 할 수 있습니다.
- float
div의 좌우위치를 정합니다. left와 right값이 있습니다. - clear
float로 인한 값을 무효화 시킵니다. left/ right/ both 가 있습니다. - width
가로 길이를 지정합니다. 100px 과 같이 꼭 단위(px, pt, em등)을 지정해야 합니다. - height
세로 길이를 지정합니다. 100px 과 같이 꼭 단위(px, pt, em등)을 지정해야 합니다. - overflow:hidden
정해진 크기를 벗어나면 튀어나온 부분을 숨기게 하거나 float로 된 div의 세로 높이를 정확히 파악하게 합니다. - margin
div의 외부 여백을 조절합니다.
margin:상px 우px 하px 좌px; 로 사용됩니다.
margin:0 auto; 로 하면 가운데 정렬을 합니다. - padding
div의 내부 여백을 조절합니다.
padding:상px 우px 하px 좌px; 로 되며 IE계열에서는 width에 좌/우가 포함이 되어버리는 버그가 있습니다.
퍼플리싱까지 끝났다면 이제 03. 스킨 적용을 통해서 실제 zbXE의 레이아웃으로 동작할 수 있도록 합시다.
출처 : http://www.zeroboard.com/?mid=manual&pageid=907006
퍼블리싱된 html/ css/ images등에 zbXE만의 코드를 추가함으로서 생명력 있는 스킨으로 만들 수 있습니다.
먼저 02. 퍼블리싱 에서 작성된 결과물에 컬러셋을 추가하여 실제 컬러셋까지 적용할 수 있는 스킨을 만들어 보도록 하겠습니다.
이미 있던 orange에 blue, gray, green, purple 4가지를 더 추가하였습니다.
컬러셋의 효율적인 적용을 위해서 디렉토리 구조를 다음과 같이 하였습니다.
-
images
- blue : 파란색 이미지들
- gray : 회색 이미지들
- green : 녹색 이미지들
- orange : 오렌지색 이미지들
- purple : 자주색 이미지들
-
css
- layout_blue.css
- layout_gray.css
- layout_green.css
- layout_orange.css
- layout_purple.css
위에서처럼 이미지와 css파일을 컬러셋의 명칭에 맞게 사용할 수 있도록 분할을 하였습니다.
위와 같이 컬러셋이 적용된 파일은 layout_sample_colorset.zip 을 다운받으시면 확인하실 수 있습니다.
이제 layout.html을 수정하기 위해서 다음의 절차로 변경을 합니다.
- conf/info.xml 파일을 만들기
- body내의 내용만 추출하기
- css파일이나 javascript파일을 연동하기 위한 지시자 추가
- 컬러셋등을 포함한 확장 변수 적용하기
위의 4단계를 거쳐서 스킨을 만들어 보도록 하겠습니다.
conf/info.xml 파일을 만들기
conf/info.xml 파일은 스킨 제작자의 정보와 각종 변수등을 손쉽게 적용할 수 있게 해주는 설정파일입니다.
xml형식으로 되어 있지만 어렵지 않은 구조입니다.
위의 형식을 지키면서 내용을 추가하면 됩니다.
XML은 <key>value</key> 의 형식으로 구성이 되어 있으며 value에는 < , > , &값이 들어가면 안되는 것만 지켜주시면 문제가 없습니다.
그리고 특이한 형식으로 <key xml:lang="ko">value</key> 와 같이 xml:lang="ko" 가 들어가 있는 것이 있습니다.
이는 다국어 지원을 위한 것으로 ko를 en(영어),zh-CN(중국어),es(스페인어),jp(일본어),ru(러시아어)등 바꾸어가면서 추가하면 다른 언어를 지원할 수 있게 됩니다.
먼저 [1] 에 대해서 알아보겠습니다.
- <title xml:lang="ko">레이아웃 sample</title>
<author email_address="제작자 메일 주소" link="http://제작자 홈페이지/블로그 주소" date="작성일자(년.월.일)">
<name xml:lang="ko">작성자이름</name>
<description xml:lang="ko">
레이아웃에 대한 설명
</description>
</author>
title에는 레이아웃의 이름이, author의 각각 한글로 되어 있는 부분에는 해당하는 정보를 넣어주시면 됩니다.
함께 작업한 분들이 있는 경우 팀의 이름 또는 description에 상세 내용을 적으면 됩니다.
[2]는 컬러셋 및 확장 변수를 받을 수 있는 곳입니다.
- <extra_vars>
<var name="변수명" type="종류">
<title xml:lang="ko">표시되는 이름</title>
<description xml:lang="ko">설명</description>
<options>
<title xml:lang="ko">표시되는 항목 명</title>
<value>항목 값</value>
</options>
</var>
</extra_vars>
위와 같은 형식으로 됩니다.
- 변수명
레이아웃에서 사용할 이름입니다. 영문으로 적어주세요. -
종류
변수를 입력받을 수 있는 종류를 선언할 수 있습니다.
다음과 같은 종류를 지원합니다.- text : 한줄 문자열
- textarea : 여러줄 문자열
- image : 이미지파일
- select : 여러개의 값중 1개 선택
- 항목
type="select"로 되어 있을 경우 항목을 지정할 수 있습니다.
<options>...</options>를 여러개 나열하면 목록에 나타나도록 되어 있습니다.
[3]은 레이아웃과 연동되는 메뉴를 정할 수 있습니다.
메뉴는 1개 이상을 선택할 수 있습니다.
- <menus>
<menu name="main_menu" default="true">
<title xml:lang="ko">상단 메뉴</title>
<maxdepth>3</maxdepth>
</menu>
</menus>
아.. 이 아래 내용 다 사라졌습니다...
아예 등록이 안되었네요.
일단 최종 스킨 적용된 파일 첨부하도록 하겠습니다.
출처 : http://www.zeroboard.com/?mid=manual&pageid=392290
위젯의 스킨 제작은 레이아웃인이나 다른 모듈의 스킨 제작과 크게 다르지 않습니다. 아울러 모든 스킨들중 가장 간단하기 때문에 스킨의 제작난이도가 낮아 제로보드XE 스킨제작에 대한 기초를 배우실 수 있습니다.
다만 위젯의 스킨 제작은 각 위젯이 제공하는 변수가 각각 다르기 때문에 제작하시려는 스킨에 대응되는 위젯의 내용을 잘 이해하실 필요가 있습니다.
출처 : http://www.zeroboard.com/?mid=manual&pageid=467575
게시판 스킨은 ZBXE 설치 디렉토리 아래의 modules/board/skins아래에 위치합니다. 디렉토리명은 스킨 제작자가 마음대로 정의할 수 있습니다. 반드시 정의되어야 하는 게시판 스킨 파일은 다음과 같습니다.
- list.html : 가장 중요한 파일입니다. 게시판(또는 게시물)이 출력될 때의 형태를 정의합니다.
- input_password.html : 암호를 입력해야 할 때 출력되는 파일입니다.(게시물이나 댓글)
- write_form.html : 게시물을 작성할 때 참조되는 파일입니다.
- delete_form.html : 게시물을 삭제할 때 참조됩니다.
- comment_form.html : 댓글을 수정하거나 댓글의 답글을 달때 출력되는 파일입니다.
- delete_trackback_form.html : 트랙백을 삭제할 때 출력되는 파일입니다.
- message.html : 게시판과 관련된 메시지(에러 메시지와 같은)를 출력할 때 참조되는 파일입니다.
- skin.xml : 스킨 정보를 담고 있는 파일. 아울러 제공할 옵션을 이곳에 명시합니다.
xe_official이나 cozy_simple처럼 XE와 배포되는 스킨의 디렉토리를 보시면 훨씬 많은 파일이 있습니다만 대부분 list.html에 모두 기재하기 어렵기 때문에 기능에 따라 분할된 파일들입니다. (list.html 파일을 보시면 <!--#include()-->문으로 각 파일들을 참조하는 것을 확인하실 수 있습니다.)
게시판 스킨을 만들때 중요한 변수
- $oDocument : 현재 보여질 게시물이 있다면 해당 게시물의 내용을 담고 있는 인스턴스. (documentItem 클래스)
- $document_list : 현재 보여질 게시물 목록
- $module_info : 게시판 정보를 담고 있는 인스턴스. skin.xml에서 제공했던 변수를 사용할 수 있습니다. 예를 들어 skin.xml에 display_author라는 이름의 변수를 제공했다면, $module_info->display_author로 접근이 가능합니다.
제로보드XE는 스킨에 전달하는 대부분의 변수를 클래스의 인스턴스로 전달하기 때문에 중요한 변수들이 제공하는 메소드/프로퍼티들을 숙지해야 할 필요가 있습니다. 이에 대한 자세한 내용은 http://doc.zeroboard.com의 문서를 참조하시기 바랍니다.
출처 : http://www.zeroboard.com/?mid=manual&pageid=392064
개발자 Manual
아래와 같은 내용으로 매뉴얼이 구성되어 있으며 모자란 부분은 계속 추가되어 나갈 예정입니다.
참고 페이지
개발과 관련된 페이지를 소개합니다.
- 이슈트래킹 TRAC : 마일스톤/ 이슈를 관리하고 기본 문서들이 존재합니다.
http://trac.zeroboard.com - 자동문서 페이지 : 제로보드XE의 trunk를 이용하여 매일 자동으로 문서들을 생성합니다.
http://doc.zeroboard.com : HTML 버전으로 된 개발문서입니다.
http://doc.zeroboard.com/zeroboard_xe.pdf : PDF 버전으로 된 개발문서입니다. -
관련 사이트
http://www.zeroboard.com/dev_main : ZBXE 개발자 포럼 사이트입니다.
http://www.zeroboard.com : 제로보드 공식사이트입니다.
출처 : http://www.zeroboard.com/?mid=manual&pageid=392294
제로보드XE 기본 구조
제로보드XE의 ROOT에는 아래와 같이 하나의 파일과 8개의 디렉토리(1개는 설치후 자동생성)가 있습니다.
모든 입출력은 index.php를 통해서 이루어집니다.
files 디렉토리는 설치시 생성되며 업로드되는 파일이나 내부적인 캐시파일, DB및 환경 설정 파일들이 저장됩니다.
디렉토리 구조
index.php : 제로보드XE index file
classes/ : 기본 클래스 라이브러리들
common/ : 공통 TPL(템플릿), CSS, JS, Images들
config/ : 기본 설정 및 함수들
modules/ : 모듈들
addons/ : 애드온들
layouts/ : 레이아웃들
widgets/ : 위젯들
files/ : 설치후 생성되는 디렉토리, 첨부파일 및 캐싱 파일들
기본 동작 절차
- index.php : 환경 설정 및 기본 library load, Context 초기화, ModuleHandler를 이용한 모듈 찾기 & 출력
- Context 초기화 (./classes/context/Context.class.php)
- DB및 환경 정보파일인 ./files/config/db.config.php load
- 언어타입 설정 : 쿠키정보로 언어를 결정. 쿠키정보가 없다면 HTTP_ACCEPT_LANGUAGE로 언어 결정 및 쿠키 세팅
- 기본 언어파일 로드 : ./common/lang/*.lang.php 중 언어타입에 맞는 파일을 load
- HTML(GET/POST/FILES) & XML등의 request type지정 및 변수를 set()
- 인증 관련 데이터를 세팅 (is_logged, logged_info)
- rewrite 모듈 사용 상태 체크 및 절대 경로를 구함
- 모듈핸들러 실행 (./classes/module/ModuleHandler.class.php)
- module, act, mid, document_srl에 대한 변수를 찾음 (이 4가지 변수중 하나는 필수. 아무것도 없으면 기본 mid찾음)
- 1번의 변수를 바탕으로 요청된 모듈을 찾아서 module config등의 초기화 실행
- 2번에서 찾아진 $oModule로 권한 및 모듈정보를 설정하고 모듈 실행
- 모듈의 실행 (./classes/module/ModuleObject.class.php의 상속)
- 3-3에서 찾아진 모듈을 바탕으로 호출된 act(Action)에 해당하는 변수를 찾음.
- act는 ./modules/모듈명/conf/module.xml 에 <actions>..</actions>에 정의되어 있음.
- 4.2에 정의된 action이 아닌 경우 action_forward 테이블에서 act값을 바탕으로 module을 찾음. (action forwarding)
- act변수는 (disp|proc)ModuleName(Admin)Act 로 네이밍 됨.
- 모든 action은 type, admin_index, standalone의 값을 가짐
- type : view, controller, model
- admin_index : true|false, 해당 모듈의 관리자 페이지의 index임을 지정
- standalone : true|false, mid없이 단독 실행 가능한지에 대한 설정
- act값에 의해 type이 정해졌으면 아래와 같은 규칙으로 class파일을 찾음
- 서비스 클래스 : ./modules/모듈명/모듈명.{type}.class.php
- 관리자 클래스 : ./modules/모듈명/모듈명.Admin.{type}.class.php
- 관리자 클래스는 act값에 Admin이 포함되어 있을시 사용되며 php파일의 load를 줄이기 위해서 분리
- ModuleHandler::displayContent($oModule)로 모듈에서 실행된 결과를 출력
- Display Class(./classes/display/DisplayHandler.class.php)는 $oModule, 즉 실행이 완료된 모듈객체를 받음
- 출력방식(HTML/XMLRPC)에 따라서 결과를 html 혹은 simple xml로 출력할지를 결정.
추가정보
- 필수 변수 4가지 : 아래 4가지 변수중 하나는 꼭 호출이 되어야 한다.
- document_srl(문서번호) : 제로보드XE의 모든 문서(document)는 고유한 값(sequence)를 가지고 있으며 이 값으로 문서모듈(document module)을 통해 요청된 문서의 모듈(module)의 값을 구한다.
- mid : 모듈(module)로 생성된 개체의 고유한 이름이며 이를 바탕으로 어떤 모듈을 호출하려는지 찾아낸다.
- act : 모듈(module)의 action 명세서의 등록된 값을 의미하며 view/model/controller에 해당하는 동작을 파악하고 유효한 요청인지에 대해서 검사를 하고 해당 요청을 실행하기 위한 준비를 할 수 있다.
- module : mid(모듈의 개체)가 아닌 모듈 자체를 호출할 수 있다.
- 아무런 변수가 없을 경우 mid중 기본으로 설정된 것을 강제로 호출하게 된다.
- Context의 set/get
- Context는 가장 기본적인 DB및 환경설정부터 템플릿엔진으로의 변수 전달등 ZBXE내에서 모든 정보를 관리하고 있다.
- GET/POST등의 변수는 자동으로 Context::set(key, value)를 통해서 내부 관리를 하게 되고 모듈등에서 setting되는 변수들 역시 동일한 관리가 됨
- php코드에서 Context::set('a', 1234)을 하게 되면 템플릿에서는 {$a} 로 사용 가능
- module, mid, act
- ZBXE에서는 module + act으로 모든 동작이 이루어짐. ("누구(module)"에게 "무엇(act)"을 해라는 의미)
- mid는 module의 instance(객체)로서의 의미를 가짐.
- 특정 module(or mid)에 존재하는 않는 act를 호출하게 되면 action_forward라는 DB 테이블에서 act에 해당하는 module을 찾아서 실행함. 이로 얻게 되는 장점은 특정 module(or mid)의 정보나 레이아웃을 그대로 유지한채 다른 모듈의 display를 연동할 수 있음.
- module의 클래스 파일은 모듈.class.php 1개와 모듈.{Admin|none}.{view|model|controller}.class 6개, 총 7개까지 구성이 되며 불필요한 부분은 생략 가능.
- module의 클래스 파일을 나눈 이유는 목적에 구분하여 trace를 쉽게 하고 인터프리터 언어인 php의 특성상 하나의 파일에 너무 긴 코드가 있음으로 인하여 불필요한 load발생을 줄이기 위함.
- module은 mid를 생성하여 사용할 수 있는 부분과 standalone으로 자체적으로 동작할 수 있는 2가지 동작 모델이 있음. standalone의 경우 통합 환경이나 관리 기능등에서 사용됨.
출처 : http://www.zeroboard.com/?mid=manual&pageid=392319
./classes
제로보드XE 내의 모듈/애드온/플러그인등의 각 개별 요소들이 공통적으로 사용하는 라이브러리들의 모읍니다.
기본 배포 버전은 아래와 같은 클래스를 가지고 있습니다.
참조 : 도표로된 클래스 분류 체계
./classes/context
Request Argument에 대한 정리 및 언어팩/DB 정보등을 관리합니다. 제로보드XE내에서 거의 모든 변수가 Context class를 통해서 관리됩니다.
./classes/context/Context.class.php
./classes/db
DB Handling을 위한 class 파일들이 위치함
./classes/db/DB.class.php : 모든 DB handling class의 상위 class. 공통 인터페이스를 가지고 있으며 설정된 DB에 해당하는 객체 생성
./classes/db/DBCubrid.class.php : cubrid를 지원하는 class 파일. ORDBMS인 Cubrid를 관계형DB 스타일로 이용하는 실험적 단계임.
./classes/db/DBMysql.class.php : MySQL을 MyIsam방식으로 사용할 수 있도록 하는 class 파일 (transaction 미지원)
./classes/db/DBMysql_innodb.class.php : MySQL을 innoDB로 사용할 수 있도록 하는 class 파일 (transaction 지원)
./classes/db/DBPostgresql.class.php : Postgresql을 지원하는 class 파일
./classes/db/DBSqlite2.class.php : sqlite2를 지원하는 class 파일
./classes/db/DBSqlite3_pdo.class.php : php의 PDO를 이용하여 sqlite3를 지원하는 class 파일 (추천)
./classes/display
모듈객체를 받아서 Response Method에 따라(HTML, XMLRPC) 결과 document를 생성하고 출력을 담당하는 클래스
./classes/editor
제로보드XE의 에디터컴포넌트의 상위 클래스. 에디터 컴포넌트 개별 객체에 대해 설정값을 세팅하는 기능만 있음
./classes/file
파일과 디렉토리를 생성/삭제하는 function을 모아 놓은 class 파일
./classes/handler
접미사로 Handler인 class의 상위 class.
./classes/httprequest
다른 서버에 HTTP Request를 전송하고 result를 받아오는 클래스
./classes/httprequest/XEHttpRequest.class.php
./classes/mail
이메일 전송을 담당하는 클래스
./classes/mail/Mail.class.php
./classes/module
요청된 module을 찾아서 객체 생성/ 실행을 하는데 관련된 class file들이 있음
- ModuleHandler : request arguments를 이용하여 필요한 module을 찾아 객체 생성후 실행을 하고 return
- ModuleObject : 모든 module의 상위 객체. 모듈 기본 정보 및 레이아웃/템플릿의 관리 및 실행에 관련
./classes/module/ModuleObject.class.php
./classes/object
제로보드XE의 가장 상위 class file.
에러코드와 메세지, 추가변수에 대한 set/get/add를 담당.
제로보드내에서 에러코드와 에러메세지를 return시 object class를 생성하여 사용
./classes/optimizer
JS/CSS파일등을 특정한 규칙에 맞게 하나의 파일로 만들어서 client에서 가져갈 수 있도록 성능향상을 지원하는 클래스
./classes/opimizer/Optimizer.class.php
./classes/page
페이지 네비게이션을 담당하는 class files. 전체갯수/페이지수/목록수등을 인자로 받고 PageHandler::getNextPage()를 이용하여 페이징 표시 가능
.classes/template
제로보드XE의 템플릿 엔진. 템플릿 파일의 컴파일 및 캐싱, 실행을 담당
./classes/widget
제로보드XE의 widget의 상위 class files. 특정 widget의 객체를 return하고 실행을 담당
./classes/xml
Xml의 파싱 및 제로보드XE내의 xml query, xml js filter의 parser등이 있음
./classes/xml/XmlJsFilter.class.php : xml js filter의 컴파일 및 실행, 캐싱
./classes/xml/XmlQueryParser.class.php : xml query의 컴파일 및 실행, 캐싱
출처 : http://www.zeroboard.com/?mid=manual&pageid=392324
./common
제로보드XE에서 필수로 사용되는 자원들이 있습니다.
./common/css/default.css
가장 기본적인 style 및 제로보드XE 고유의 style이 정의되어 있습니다.
./common/js
기본 javascript file들이 있습니다.
./common/js/tree_menu.js : 메뉴 관리 모듈에서 사용하는 tree 구조를 그려주는 js code
./common/js/x.js : Cross-Browser.com에서 배포하는 크로스브라우징을 위한 js code 라이브러리 (GNU GPL)
./common/js/xml_handler.js : 제로보드XE의 ajax 라이브러리 js code
./common/js/xml_js_filter.js : 제로보드XE에서 form의 submit시에 입력항목 체크 및 xml_handler를 이용한 서버와의 통신을 관리하는 js code
./common/js/iePngFix.htc : Internet Explorer에서 투명 PNG이미지를 표현하기 위함
./common/lang
기본 언어팩이 등록되어 있습니다. 기본 언어팩의 제일 앞 글자에 따라서 지원 가능한 언어팩이 설정이 됩니다.
./common/lang/en.lang.php : 영어
./common/lang/jp.lang.php : 일본어
./common/lang/zh-CN.lang.php : 중국어
./common/lang/es.lang.php : 스페인어
./common/lang/ru.lang : 러시아어
./common/lang/fr.lang : 프랑스어
./common/tpl
출력을 위한 기본 레이아웃 및 회원가입등에 이용하는 calendar파일들이 있습니다.
./common/tpl/common_layout.html : 기본 레이아웃, html의 header등을 지정하는 가장 기본적인 레이아웃 파일입니다.
./common/tpl/default_layout.html : 출력물을 작성하고 plugin, edit component등의 설정을 위해 거쳐가는 파일입니다.
./common/tpl/popup_layout.html : 팝업창(툴바,스크롤바 등이 없는 윈도우)을 내용의 크기에 맞게 윈도우 크기를 맞춰주는 레이아웃 파일입니다.
./common/tpl/refresh.html : 페이지 refresh를 위한 template 파일입니다.
./common/tpl/css/ : calendar.css, popup.css 가 존재합니다.
./common/tpl/images/ : 달력, 이미지 원본보기, 트리메뉴 그리기 위한 이미지 파일들과 flv확장자의 동영상 플레이어가 있습니다.
출처 : http://www.zeroboard.com/?mid=manual&pageid=392326
./config
기본 설정 및 자주 사용되는 함수 모음 파일이 있습니다.
./config/config.inc.php
디버그 설정 및 내부 php파일의 악의적인 호출을 막기 위한 상수 선언. 기본 class 파일들의 require, 세션시작을 선언합니다.
./config/func.inc.php
자주 사용되는 혹은 편의를 위한 함수 모음집입니다.
출처 : http://www.zeroboard.com/?mid=manual&pageid=392327
./modules
제로보드XE의 모든 동작은 모듈을 통해서 이루어집니다. 모듈은 아래와 같은 구성요소를 갖추어야 정상적으로 동작이 됩니다.
queries, schames, view/controller/model중 일부등은 모듈의 성격에 따라서 없을 수도 있습니다.
./modules/모듈이름/conf/info.xml : 모듈의 제목/설명, 제작자의 정보
./modules/모듈이름/conf/module.xml : 모듈의 권한정보 및 action명세서
./modules/모듈이름/lang/*.lang.php : 모듈의 기본 언어팩
./modules/모듈이름/queries/*.xml : 모듈에서 사용하는 xml query 파일들
./modules/모듈이름/schemas/*.xml : 모듈에서 사용하는 DB 테이블의 schema xml 파일들
./modules/모듈이름/skins/ : 모듈의 스킨 파일들
./modules/모듈이름/모듈이름.class.php : 모듈 MVC파일의 상위 클래스 및 설치/update/제거등의 method 존재
./modules/모듈이름/모듈이름.view.php : 컨텐츠의 출력을 담당하는 view class
./modules/모듈이름/모듈이름.controller.php : 데이터의 controll을 담당하는 controller class
./modules/모듈이름/모듈이름.model.php : 모듈의 데이터 model class
./modules/모듈이름/모듈이름.admin.view.php : 모듈 관리페이지의 출력을 담당하는 view class
./modules/모듈이름/모듈이름.admin.controller.php : 모듈 관리페이지의 데이터 controll을 담당하는 controller class
./modules/모듈이름/모듈이름.admin.model.php : 모듈 관리페이지의 데이터 model class
출처 : http://www.zeroboard.com/?mid=manual&pageid=392328
./addons
제로보드XE의 애드온은 사용자의 요청 - 결과물 출력 사이에 아래와 같은 4군데서의 프로세스를 가로채서 입출력 결과를 변경하거나 동작은 중지 시킬 수 있습니다.
애드온은 단순이 enable/disable 설정만 가능하며 추가 설정이 필요한 경우 모듈과 연동하여 사용할 수 있습니다. (spamfilter애드온 참고)
애드온 동작 시점
모듈 객체 생성 이전 : before_module_init
모듈의 실행 이전 : before_module_proc
모듈의 동작 이후 : after_module_proc
결과 출력 이전 : before_display_content
애드온의 구성
애드온은 아래와 같은 구성요소를 갖추어야 정상적으로 동작이 됩니다.
./addons/애드온이름/conf/info.xml : 애드온의 제목, 설명과 제작자 정보
./addons/애드온이름/애드온이름.addon.php : 애드온 실행 class file
출처 : http://www.zeroboard.com/?mid=manual&pageid=392329
./layouts
제로보드XE에서 레이아웃은 컨텐츠(모듈)를 감싸는 껍데기를 의미합니다.
레이아웃은 단독으로 사용될수도 있고 레이아웃 제작자가 정한 메뉴(menu)와 연동하여 사용이 가능합니다.
레이아웃 템플릿 파일에는 플러그인/ 에디터컴포넌트의 코드를 직접 이용하여 꾸밀 수 있습니다.
레이아웃은 다음의 구성요소를 만족하여야 정상적으로 동작이 가능합니다.
./layouts/레이아웃이름/conf/info.xml : 레이아웃의 제작자, 설명, 추가변수, 연동 메뉴의 개수와 이름이 정의되어 있습니다.
./layouts/레이아웃이름/layout.html : 레이아웃의 템플릿파일입니다.
./layouts/레이아웃이름/... : 레이아웃의 이미지파일, CSS파일, JS파일등은 자유롭게 구성이 가능합니다.
출처 : http://www.zeroboard.com/?mid=manual&pageid=392330
./widgets
위젯은 화면에 표시되는 작은 프로그램입니다.
최근게시물이나 회원정보(로그인 폼)등 모듈과 연동된 위젯도 있고 외부 Open API와 통신하는 위젯도 있습니다.
위젯은 아래와 같은 공통 구조를 꼭 준수하여야 정상적으로 실행이 가능합니다.
./widget/위젯이름/위젯이름.class.php : 위젯의 클래스 파일 (데이터 가공 및 템플릿 파일의 지정)
./widget/위젯이름/conf/info.xml : 위젯의 제목, 설명, 제작자, 추가변수에 대한 설정 파일
./widget/위젯이름/skins/스킨이름 : 위젯의 스킨들이 존재
./widget/위젯이름/skins/스킨이름/skin.xml : 스킨의 이름, 설명, 제작자, 컬러셋의 정보에 대한 설정 파일
./widget/위젯이름/skins/스킨이름/... : 템플릿파일이나 이미지, CSS파일들이 존재
템플릿파일, 이미지, CSS파일등은 스킨디렉토리 내에서 자유롭게 구성이 가능합니다
출처 : http://www.zeroboard.com/?mid=manual&pageid=392333
./files
제로보드XE 설치후 nobody권한으로 생성되는 디렉토리입니다. 첨부파일, 캐싱파일들이 존재합니다.
./files/attach/binaries/... : gif|jpg|png|swf|mpeg외의 첨부파일들이 저장됩니다.
(악의적 공격을 방지하기 위해 fpassthru()로 직접 내용을 뿌려주는 대상)
./files/attach/images/... : 브라우저에서 바로 접근할 수 있는 이미지/동영상등의 파일들이 저장됩니다.
./files/cache/activated_addons.cache.php : enable시킨 애드온들을 실행하기 위한 php code
./files/cache/... : 각 모듈에서 캐시파일을 저장 (모듈별로 저장 가능)
./files/config/db.config.php : DB설정 파일
./files/member_extra_info/attach/image_mark/ : 회원 이름 앞 마크 이미지 저장
./files/member_extra_info/attach/image_name/ : 회원 이미지이름 저장
./files/member_extra_info/attach/signature/ : 회원 서명 저장