XE 모듈 가운데 현재까지 가장 많은 사랑을 받고 있는 것이 바로 게시판 모듈이 아닐까 생각 됩니다. 제로보드라고 불리던 시절부터 아주 오랜 시간 전통을 유지해 오고 있으니까요. 그리고 게시판 스킨은 가장 다루기 까다로운 스킨으로 꼽을 수 있지만 그럼에도 불구하고 많은 분들께서 열정적으로 스킨 제작에 참여하고 있습니다. 2007년 8월 부터 2009년 8월 현재까지 2년간 XE에서 사용할 수 있도록 제작된 게시판 스킨의 수는 약 60여개로써 한 달 평균 2.5개씩 매 달마다 새로운 스킨이 모듈스킨 자료실에 등록되고 있습니다. 새로운 스킨을 제작하기 전에 여러분이 상상하던 디자인의 스킨이 자료실에 있는지 먼저 검색해 보실 것을 권해 드립니다. 일단 한번 다녀 오세요. 하지만 검색에 실패하신 분들. 나만의 독창적인 디자인을 게시판에 적용하지 않으면 직성이 풀리지 않는 분들은 계속 저와 함께 하시면 됩니다. 고고씽!

XE 의 게시판 스킨은 조금 많이 복잡합니다. 게시판은 정적인 하나의 페이지가 아니라 '목록형 보기, 웹진형 보기, 갤러리형 보기, 읽기, 쓰기, 댓글 창, 확장변수 ...' 등등 가변적인 요소들과 선택 사항들이 많아서 게시판 스킨을 여러 번 제작해본 경험이 있는 사람이라도 꼼꼼하게 테스트 하지 않으면 무엇인가 놓치는 일이 흔히 발생하게 됩니다. 따라서 아무리 의욕이 앞선다 하더라도 빈 화면으로부터 시작하는 것을 권장하지 않습니다. 먼저 할 일은 최근에 제작된 스킨을 내려 받아 사본을 만드는 일 입니다. 게시판 스킨 만들기 메뉴얼 작성을 위해 미리 준비된 스킨을 이용해 보세요.  xe_naradesign.zip 내려받기. 이 스킨은 2009년 8월 현재 XE 공식 웹 사이트에서 사용 중인 게시판 스킨을 조금 개선한 것으로써 물론 바로 적용해서 사용하셔도 문제가 없습니다. 내려받은 스킨의 압축을 풀고 아래 경로에 저장한 다음 사본을 만듭니다.

/XE 설치 폴더/modules/board/skins/

아래 파일들의 이름은 약속된 이름 입니다. 스킨 폴더 밖에서 파일 이름을 참조하는 것들로써 변경할 수 없습니다.

지금부터 xe_naradesign 스킨을 여러분의 선호에 알맞게 xe_myskin 으로 한번 바꿔 보도록 하겠습니다. ^^ 가장 먼저 할 일은 skin.xml 파일을 찾아서 스킨 제작자 정보를 수정 하는일 입니다. 아래 코드에 여러분의 이름을 넣고 새 스킨 이름과 설명을 작성해 보세요.

<?xml version="1.0" encoding="UTF-8"?>
<skin version="0.2">
    <title xml:lang="ko">XE Naradesign Board Skin</title>
    <description xml:lang="ko">XE Naradesign Board Skin 입니다.</description>
    <version>1.0</version>
    <date>2009-12-24</date>
    <author email_address="dece24앳gmail.com" link="http://naradesign.net/">
        <name xml:lang="ko">Jeong, Chan Myeong</name>
    </author>
    <license>GPL v2 or later</license>
    <colorset>
        <color name="white" src="screenshot/white.gif">
            <title xml:lang="ko">흰색(기본)</title>
        </color>
        <color name="black" src="screenshot/black.gif">
            <title xml:lang="ko">검은색</title>
        </color>
    </colorset>
    <extra_vars>
        <var name="default_style" type="select">
            <title xml:lang="ko">목록 형태</title>
            <options value="list">
                <title xml:lang="ko">목록형</title>
            </options>
            <options value="webzine">
                <title xml:lang="ko">웹진형</title>
            </options>
            <options value="gallery">
                <title xml:lang="ko">갤러리형</title>
            </options>
        </var>
        <var name="display_setup_button" type="select">
            <title xml:lang="ko">설정 표시</title>
            <options value="Y">
                <title xml:lang="ko">표시</title>
            </options>
            <options value="N">
                <title xml:lang="ko">표시 안함</title>
            </options>
            <description xml:lang="ko">관리자용 게시판 설정, 목록보기, 웹진보기, 갤러리보기 링크 표시 여부</description>
        </var>
        <var name="title" type="text">
            <title xml:lang="ko">게시판 제목</title>
            <description xml:lang="ko">작성하면 화면에 표시 됨</description>
        </var>
        <var name="sub_title" type="text">
            <title xml:lang="ko">게시판 부제목</title>
            <description xml:lang="ko">작성하면 화면에 표시 됨</description>
        </var>
        <var name="comment" type="textarea">
            <title xml:lang="ko">게시판 상세 설명</title>
            <description xml:lang="ko">작성하면 화면에 표시 됨</description>
        </var>
        <var name="subject_cut_size" type="text">
            <title xml:lang="ko">제목 글자 수</title>
            <description xml:lang="ko">기본 설정은 자르지 않으며 목록형과 웹진형 목록이 표시 될 때 적용 됨(기본 설정을 권장)</description>
        </var>
        <var name="content_cut_size" type="text">
            <title xml:lang="ko">내용 글자 수</title>
            <description xml:lang="ko">기본 설정 240으로 웹진형 목록이 표시 될 때 적용 됨</description>
        </var>
        <var name="display_ip_address" type="select">
            <title xml:lang="ko">아이피 주소 표시</title>
            <options value="Y">
                <title xml:lang="ko">표시</title>
            </options>
            <options value="N">
                <title xml:lang="ko">표시 안함</title>
            </options>
        </var>
        <var name="display_sign" type="select">
            <title xml:lang="ko">서명 표시</title>
            <options value="Y">
                <title xml:lang="ko">표시</title>
            </options>
            <options value="N">
                <title xml:lang="ko">표시 안함</title>
            </options>
        </var>
        <var name="duration_new" type="text" default="24">
            <title xml:lang="ko">새 글 표시 시간</title>
            <description xml:lang="ko">기본 24시간</description>
        </var>
        <var name="thumbnail_type" type="select">
            <title xml:lang="ko">썸네일 비율</title>
            <options value="crop">
                <title xml:lang="ko">사용자 정의(3:2 또는 4:3 비율 권장)</title>
            </options>
            <options value="ratio">
                <title xml:lang="ko">원본과 동일 비율 유지(사용자 정의 비율 무시)</title>
            </options>
        </var>
        <var name="thumbnail_width" type="text" default="120">
            <title xml:lang="ko">썸네일 가로 크기</title>
            <description xml:lang="ko">기본 120px</description>
        </var>
        <var name="thumbnail_height" type="text" default="80">
            <title xml:lang="ko">썸네일 세로 크기</title>
            <description xml:lang="ko">기본 80px</description>
        </var>
    </extra_vars>
</skin>

skin.xml 파일을 입맛에 맞게 수정한 다음 제대로 작성이 되었는지는 'XE 관리자 > 제어판 > 서비스 관리 > 게시판 > 스킨 관리' 페이지에서 확인할 수 있습니다. 결과 화면은 아래와 같습니다. skin.xml 파일에서 지우는 옵션은 관리자 화면에도 표시가 되지 않습니다. 따라서 만약 어떤 기능을 수정하거나 제거하기를 원하면 skin.xml 파일에서 수정하거나 지우되 해당 기능은 스킨 폴더 안에 포함된 HTML 문서에서도 함께 편집 되어야 합니다. 예를 들면 '웹진형, 갤러리형' 목록 보기에 필요한 옵션 '썸네일 가로 크기, 썸네일 세로 크기'는 skin.xml 파일에서 기본 크기를 수정해도 실제로는 반영이 되지 않으므로 header.html 파일을 열어서 아래와 같이 수정해 주어야 합니다.

<!--@if(!$module_info->thumbnail_width)-->{@ $module_info->thumbnail_width = 120; }<!--@end-->
<!--@if(!$module_info->thumbnail_height)-->{@ $module_info->thumbnail_height = 80; }<!--@end-->

'XE 관리자 > 제어판 > 서비스 관리 > 게시판 > 스킨 관리' 페이지에서 skin.xml 파일의 변경 내역을 확인할 수 있습니다.

CSS 폴더가 꼭 필요한 것은 아니지만 게시판 스킨에는 여러개의 HTML 문서들이 함께 있기 때문에 별도의 폴더에 정리하는 것이 좋습니다. CSS 파일의 개수와 용량은 최소화 하는 것이 좋은데 다음과 같이 3개의 파일로 나누는 것이 가장 이상적인 구조 입니다.

board.css 파일에는 background-color, background-image, color, border-color 에 해당하는 속성들을 선언하지 않고 이렇게 색과 관련된 속성들은 모두 white.css 또는 black.css 파일로 나누어 담습니다. 이렇게 분리하는 이유는 게시판 스킨의 색을 선택했을 때 필요한 최소한의 CSS만 선택적으로 불러오도록 하기 위함 입니다.

게시판 스킨에 꼭 필요한 CSS 파일을 부르거나 또는 XE 코어 모듈이 부르는 레거시 파일(default.css, button.css)을 로드하지 못하도록 할 수 있습니다.

CSS 파일을 게시판에 불러 오려면 header.html 파일에 다음과 같이 선언 합니다.

<!--%import("css/example.css")-->

특정 CSS 파일을 게시판에서 불러오지 않으려면 header.html 파일에 다음과 같이 선언 합니다.

<!--%unload("css/example.css")-->

이 렇게 두 가지 대조색을 기본적으로 제공하는 이유는 가장 보편적으로 널리 선호되기 때문입니다. 글 위주의 콘텐츠라면 흰색 배경에 검정색 글씨가 편하고 사진등 멀티미디어 위주의 콘텐츠라면 검정색 배경에 흰색 글씨가 잘 어울릴 것입니다. 스킨의 기본 색을 어떤 색으로 처리할 것인지 결정할 수 있습니다.

기본 색을 흰색으로 설정하려면 header.html 파일에 다음과 같이 선언 합니다.

<!--@if(!$module_info->colorset)-->
    {@$module_info->colorset = "white"}
<!--@end-->

기본 색을 검정색으로 설정하려면 header.html 파일에 다음과 같이 선언 합니다.

<!--@if(!$module_info->colorset)-->
    {@$module_info->colorset = "black"}
<!--@end-->

스 킨을 편집하기 위해서는 여러 개의 HTML 파일 목록에 접근하고 필요한 파일을 열어서 편집해야 하는데요. 어떤 파일이 어떤 역할을 담당하고 있는지 미리 알고 접근하면 보다 빠르겠죠? 인클루드 '되는' 파일인지 '하는' 파일인지에 따라서 편의상 '블럭'과 '페이지'로 목록을 나누어 제공 합니다.

'목록' 화면은 관리자의 기본값 설정 또는 사용자의 선택에 따라 '일반 목록, 웹진 목록, 갤리리 목록' 이렇게 세 가지 형태의 보기를 갖습니다. 아래 이미지는 위로부터 '일반 목록, 웹진 목록, 갤리리 목록' 순 입니다.

list.html 페이지는 사용자의 선택에 따라 전통적인 목록형(list_normal.html), 웹진형(list_webzine.html), 갤러리형(list_gallery.html) 블 럭을 상황에 알맞게 표시 합니다. 만약 여러분이 게시판에 별도의 레이아웃 스킨을 적용하지 않았다면 다음과 같은 구조의 HTML 코드가 화면에 표시될 것입니다. 괄호 안쪽의 파일 이름은 여러분이 해당 블럭의 디자인을 바꾸려고 할 때 편집해야 할 파일 이름 입니다.

문서의 본문(view_document.html)과 다양한 유형의 목록들(list_normal.html, list_webzine.html, list_gallery.html)을 인클루드 하고 있기 때문에 가장 복잡한 화면 입니다.

게시물 본문을 작성(write_form.html)하고자 할 때 만나는 페이지 입니다.

읽기 화면에는 본문 글에 대한 댓글 쓰기 폼 .boardEditor (view_document.html)이 존재하지만 댓글의 댓글 쓰기 폼은 별도의 페이지 .boardEditor (comment_form.html) 에서 진행 됩니다.

글을 수정하거나 삭제하고자 할 때 권한이 있는 사용자 본인임을 확인하기 위하여 비밀번호를 요청하는 페이지(input_password_form.html) 입니다. 비회원이 비회원의 글을 수정하거나 삭제하려고 할 때 이 페이지를 만날 수 있습니다.

권한이 있는 사용자가 댓글이 아닌 본문의 글을 삭제하고자 할 때 삭제 여부를 최종 확인하는 페이지(delete_form.html) 입니다.

권한이 있는 사용자가 댓글을 삭제하고자 할 때 삭제 여부를 최종 확인하는 페이지(delete_comment_form.html) 입니다.

권한이 있는 사용자가 엮인글을 삭제하고자 할 때 삭제 여부를 최종 확인하는 페이지(delete_trackback_form.html) 입니다.

권한이 없는 페이지에 접근했을 때 권한이 없음을 알리고 로그인 하거나 뒤로 가기 경로를 안내하는 페이지(message.html) 입니다.

태그 목록을 보여주는 페이지(tag_list.html) 입니다.

비밀 글에 접근 했을 때 만나는 화면 입니다.

비밀 댓글에 접근 했을 때 만나는 화면 입니다.

확장 변수를 작성 할 때 만나는 화면 입니다. 확장 변수 양식은 관리자가 원하는 값을 입력받기 위해 생성하면 표시 됩니다.

사용자가 확장 변수를 작성 했을 때 만나는 화면 입니다.