적용버전 : XE Ver 1.5 or higher 모듈과 페이지, 레이아웃과 스킨의 역할 이해하고 페이지 모듈 만들기

모듈과 페이지 이해하기

프로그램 모듈과 콘텐츠 모듈

XE 코어는 추가 설치하여 기능을 확장할 수 있는 프로그램 단위를 "모듈"이라고 말합니다. 즉 게시판 모듈을 설치하였기 때문에 게시판을 생성하고 사용할 수 있는 것입니다. 또한 모듈은 "독자적 기능을 가진 교환 가능한 구성 요소"이기 때문에 새로운 기능을 포함한 모듈로 교체하여 사용할 수도 있습니다.

image

그런데 게시판 모듈에서 새로운 게시판을 생성할 때도 "모듈 이름", "모듈 분류"라는 항목을 볼 수 있었습니다. 우선 "모듈 분류"는 차치하고서라도 "왜 게시판 모듈에서 생성하는 낱개의 게시판에 대해서도 모듈이라고 표현할까?"

게시판 모듈에서 생성되는 게시판의 이름을 모듈이라고 표현한 의미는 프로그램 모듈(게시판)의 자식 모듈이고, 이렇게 생성된 게시판은 콘텐츠(content) 영역에 독립적으로 교환 가능한 내용변수의 값이 되기 때문입니다.

image

게시판 생성 후 레이아웃과 연결하지 않았다면 게시판의 독자적인 기능만 사용하게 됨으로 게시판만 출력됩니다. 하지만 레이아웃과 연결시켜 주면 레이아웃 안에 있는 내용변수가 프로그램 모듈이 생성한 자식 모듈, 즉 콘텐츠 영역에 출력할 내용의 값으로 콘텐츠 모듈을 찾게 되고, 만약 존재한다면 변수로서 내용을 가져와 출력하게 됩니다. 이러한 일을 담당하는 레이아웃의 내용변수 이름은 $content입니다. 콘텐츠 영역을 제외한 헤더, 사이드바, 푸터의 모든 영역은 레이아웃이 표현하는 것입니다.

따라서 게시판 모듈, 즉 큰 단위의 프로그램 모듈이 생성한 자식 모듈, 다시말해서 콘텐츠 모듈도 부모 모듈과 같이 내용으로써 독립적인 역할을 수행하기 때문에 작은 의미의 "모듈"이라는 개념을 공유할 수 있는 것입니다.

이러한 모듈의 개념을 더 확장한다면 페이지도 빼놓을 수 없는 콘텐츠 모듈입니다.


문서 페이지, 위젯 페이지, 외부 페이지의 이해

특정한 프로그램 모듈은 그 기능과 역할을 생성되는 자식 모듈에게 그대로 복사하여 전달합니다. 따라서 게시판을 만들기 위한 프로그램은 게시판을 생성하겠지요. 반면에 페이지 모듈은 빈 페이지를 전달합니다. 대신 페이지를 생성하는 단계에서 어떠한 용도로 사용할 것인지 묻게 됩니다.

image

우선 레이아웃은 제외(A)하세요. 레이아웃은 요청에 대한 응답으로 모듈 또는 페이지가 입고 나가는 겉옷(B)과 같기 때문입니다.

Q : "만약 여러분에게 빈 페이지가 주어진다면 어떤 그림을 그리고 싶은가요?"
이 물음에 대한 대답으로 XE 코어는 다음의 3가지 유형을 미리 준비한 것입니다.

  • 나는 에디터를 활용하여 콘텐츠 영역에서 직접 내용을 작성하고 싶습니다. [문서 페이지]
  • 나는 작은 프로그램(위젯)을 이용해 최근글 또는 댓글, 이미지 등의 목록을 만들어 예쁘게 꾸미고 싶습니다. [위젯 페이지]
  • 나는 다른 곳(외부 폴더)에 있는 문서나 또는 프로그램을 현재 페이지에 포함시켜 활용하고 싶습니다. [외부 페이지]

image

페이지를 생성하는 과정에서 이러한 유형은 페이지 타입의 선택 옵션으로 위젯형, 문서형, 외부 페이지형으로 구분합니다. 페이지 모듈에서 생성된 페이지도 독립적인 내용변수의 값(B)이 될 수 있기 때문에 모듈이라는 개념으로 이해할 수 있습니다. 따라서 페이지도 작은 의미의 모듈이라는 이름을 붙여주고 호출하는 것입니다.

위에서 레이아웃을 겉옷이라고 표현하였습니다. 왜냐하면 다음 과정에서 메뉴를 만들고 생성된 모듈과 연결하게 되는데 메뉴가 호출하는 대상은 프로그램 모듈도, 레이아웃도 아닌 생성된 콘텐츠 모듈 또는 페이지이기 때문입니다. 따라서 생성된 모듈이나 페이지 모듈은 요청에 따라 응답할 때 미리 설정된 레이아웃을 입고 나가게 되는데, 레이아웃은 자신을 가장 잘 돋보이도록 돕는 역할을 하게 됩니다.

겉옷이 있다면 속옷도 있겠지요? 그것은 모듈 스킨(skin)이 하는 일입니다. 스킨은 부모 모듈의 동작에 대한 결과값을 자식 모듈에게 전달할 때 다양한 방법으로 꾸며주는 일을 하게 됩니다. 즉 자식 모듈의 스타일링(styling)이라 말할 수 있으며 자식 모듈에게 한정되고 모듈 스스로를 꾸미는 일이라 말할 수 있습니다. 따라서 레이아웃과 스킨의 설정(겉옷과 속옷)은 모듈의 생성 단계에서 자신이 선택하는 옵션값으로 존재하는 것입니다.

이부분을 좀더 쉽게 설명하면 프로그램 모듈은 스킨(skin) 폴더에 자식 모듈이 입고 나갈 옷들을 종류별로 미리 준비해 두었습니다. 하지만 자식 모듈은 늘 사춘기여서 "네가 어떤 옷을 입고 나가면 좋겠다."는 말은 할 수 없습니다. 자식 모듈은 친구(메뉴)가 부를 때 자신의 스타일(레이아웃과 스킨)은 본인 스스로가 결정한다는 의미입니다. 따라서 레이아웃과 스킨은 디자인적 요소에 속합니다.

image

또한 이렇게 생성된 모듈과 페이지 등이 너무 많아져서 모듈을 구분하기가 어려워질 수 있습니다. 이러한 경우 [설치된 모듈] > [모듈 분류]에서 미리 분류명을 등록해 두고, 모듈 생성 단계에서 [모듈 분류]를 활용하면 연관된 모듈을 관리하는데 도움이 되는 유용한 기능입니다. 부모 모듈의 입장에서 생성된 자식 모듈이 주로 어떤 일에 연관된 모듈인지 꼬리표를 달아두는 기능입니다.


문서 페이지 만들기

관리자 메뉴에서 [확장기능] > [설치된 모듈] > [페이지] 모듈을 클릭하고 페이지 관리에 들어갑니다. 페이지 관리에서 문서형, 위젯형, 외부 페이지형식의 페이지 모듈을 모두 생성할 수 있습니다.

image

페이지를 만들기 위해 [페이지 생성]을 클릭합니다.


image

페이지 타입은 문서 페이지, 모듈 이름과 브라우저 제목은 자유롭게 입력하고 레이아웃은 공식 레이아웃을 선택한 후 하단에 있는 [저장] 버튼을 클릭합니다.


image

브라우저 제목을 클릭하면 생성된 페이지를 확인합니다.


image

빈 페이지에서 내용 작성을 위해 [페이지 수정]을 클릭합니다.


image

입력 에디터에서 위와 같이 작성하고 [등록] 버튼을 클릭합니다.


image

그림과 같이 에디터를 이용하여 첨부파일 등과 함께 직접 문서를 작성하고 꾸밀 수 있습니다.


위젯 페이지 만들기

같은 방법으로 페이지 관리에서 [페이지 생성]을 클릭하고 다음과 같이 따라해 보세요.

  • image▲ 페이지 타입은 위젯 페이지, 모듈 이름과 브라우저 제목은 자유롭게 입력하고
    레이아웃은 공식 레이아웃을 선택한 후 하단에 있는 [저장] 버튼을 클릭합니다.
  • image▲ [페이지 수정]을 클릭합니다.
  • image▲ [내용 직접 추가] 버튼을 클릭합니다.
  • image▲ 문서 페이지와 같은 방법으로 에디터에서 위와 같이 작성하고 [저장] 버튼을 클릭합니다.
  • image▲ 여기까지는 문서 페이지와 동일합니다. 위젯 페이지도 에디터를 이용해 내용을 직접 작성하고 꾸밀 수 있습니다.
  • image▲ 이번에는 위젯으로 내용을 꾸미기 위해 [페이지 수정] 버튼을 클릭합니다.
  • image▲ 게시물의 최근글, 최근댓글, 최근 이미지 등을 가져오는 Content 위젯을 추가하기 위해 Content 위젯을 선택하고
    [추가] 버튼을 클릭합니다. 추가되는 내용은 앞서 직접 내용을 추가했던 박스 아래에 위치하게 되는데 영역 박스의 위치는
    추후 마우스 드레그로 얼마든지 이동이 가능합니다. 여기서는 위젯 페이지의 작성방법만 확인해 봅니다.
  • image▲ 위젯 프로그램도 스킨을 활용합니다. 따라서 위젯이 가지고 있는 스킨 중 하나를 먼저 선택하여야 합니다.
    별도의 콘텐츠 위젯을 추가한 경우 스킨은 다양하게 제공될 수 있습니다.
  • image▲ 스킨 선택 상자 우측에 있는 [선택] 버튼을 반드시 클릭합니다.
    선택한 스킨을 사용하기로 결정하였다고 코어에게 알려주는 것이고 위젯의 설정에 따라 그림과 같이 별도의 옵션 등이
    추가로 제시될 수 있습니다. 여기서는 흰색 바탕용을 그대로 사용해 보죠.
  • image▲ 추출 대상은 "어느 모듈에서 어떤 내용을 가져올 것인가?"를 선택하는 옵션입니다.
    우선 댓글이 아닌 "게시물을 가져오고 싶다."고 선택한 후 대상 모듈을 확인하기 위해 [사이트 찾기]를 클릭합니다.
  • image▲ XE 코어가 설치된 경로를 클릭하면 우선 운영중인 프로그램 모듈의 목록을 제시합니다.
  • image▲ 게시판 모듈을 선택하면 게시판 모듈(부모 모듈)이 생성한 게시판(자식 모듈)의 목록을 보여 줍니다.
    여러개의 게시판을 운영한다면 다수의 게시판을 추가하거나 이동하여 추출을 원하는 대상을 가져올 수 있게 됩니다.
  • image▲ 위젯은 작은 프로그램 단위이기 때문에 [코드 생성]으로 약속된 변수와 설정 내용을 소스코드로
    페이지의 내용에 추가하게 됩니다. 기타 옵션을 선택한 후 [코드 생성] 버튼을 클릭합니다.
  • image▲ 위젯 페이지에서 추가하거나 변경된 내용을 저장하기 위해 최종적으로 [저장] 버튼을 클릭합니다.
  • image▲ 위젯 페이지는 빈상자 위젯(div), 프로그램 위젯, 크기 조정, 위치 조정, 색상(color) 등을 조합하여
    페이지 단위의 다양한 구성이 가능합니다.

외부 페이지 만들기

외부 페이지는 XE 코어 외부에 위치한 HTML 또는 PHP 파일을 XE에서 사용할 수 있도록 합니다. 외부 페이지는 include(부분,요소 등을 포함하다,넣다,끼우다)와 동일한 성격을 가지고 있고 코어는 언제든지 완성된 HTML 문서를 제공하여 화면에 출력하기 때문에 body 엘리먼트 안에서 사용하는 태그만 활용하여 문서의 구조를 작성합니다.

완성된 HTML 문서란 HTML 문서가 반드시 가지고 있어야 할 문서형식선언(DOCTYPE)이나 html, head, body와 같은 기본 구조를 표현하기 위한 엘리먼트를 말합니다. 위와 같은 구조 형식은 XE 코어를 설치하는 것만으로도 코어가 모두 기본적으로 제공하기 때문입니다.

만약 콘텐츠 모듈이 레이아웃을 선택하지 않았다면 내용은 모두 body 엘리먼트 사이에서 출력되는 것을 의미하고 이것은 게시판 모듈도 마찬가지입니다. 다시말해서 XE 코어의 모든 내용은 완성된 HTML 문서 안의 <body>와 </body> 태그 사이에 표현되는 프로그램입니다. 따라서 외부페이지를 include 한다는 것은 XE 코어와는 별개의 HTML 문서를 body 안으로 불러와 포함시킨다는 뜻이고 바로 이러한 기능이 제로보드4와 XE의 가장 큰 차이점입니다.

제로보드4에서는 레이아웃을 만들때 내용을 포함하는 테이블(TABLE)의 <TD> 윗부분과 </TD> 아랫부분을 나누어 저장한 후 모든 HTML,PHP의 내용 문서마다 나누어진 header.php 와 footer.php 파일을 풀칠해(include) 붙여줘야만 온전한 한 개의 HTML 문서가 완성 되었습니다. XE 코어는 정반대로 온전한 HTML 문서의 body 안에 독립적으로 생성된 페이지, 모듈 등을 불러와 사용할 수 있는 것입니다. 이러한 이유로 <body>와 </body> 태그 사이에 들어오는 모든 내용에는 <!DOCTYPE>, <html>, <head, <body> 태그가 전혀 필요하지 않습니다. 오로지 내용을 구조화 할 수 있는 태그만 사용됩니다. <div>, <h1>, <p> 등등...

따라서 우선 XE 코어 외부에 별도의 문서 또는 PHP 파일을 만들어 업로드한 후 페이지 내부로 불러올 때 대상 파일의 위치는 자유롭게 설정이 가능합니다. 또한 XE 코어는 UTF-8 서버에 설치하고 운영하는 프로그램으로 코어 내부에 포함시키고자 하는 문서의 인코딩 형식은 반드시 UTF-8로 저장해야 합니다. 만약 ANSI 형식으로 저장한 경우 텍스트가 깨져보이게 됩니다.

아래 주석을 제외한 2줄의 내용을 에디트플러스를 이용하여 새로운 test.html 문서로 만들고 UTF-8 인코딩 형식으로 저장한 후, 서버 계정의 루트(root) 디렉터리(xe 폴더가 있는 같은 디렉터리)에 page 디렉터리를 추가한 후 업로드 하세요. 호스팅 계정의 환경에 따라 최상위 루트(root) 디렉터리의 이름은 html이나 public_html 또는 www 로 사용될 수 있습니다. (※ XE 코어를 루트에 설치한 경우 루트 디렉터리 안에 page 폴더를 만드세요.)

<!-- // 외부 HTML 문서는 <!DOCTYPE>, <html>, <head>, <body> 태그를 사용하지 않습니다. -->
<!-- // 인코딩 형식은 반드시 UTF-8 로 저장합니다. -->

<h1>외부 페이지 만들기 예제</h1>
<p>외부 페이지는 XE 코어 외부에 위치한 HTML 또는 PHP 파일을 XE에서 사용할 수 있도록 합니다.</p>

외부 파일 업로드 경로 : root/page/test.html

image

  • 테스트 문서가 필요한 경우 다른 이름으로 대상 저장하세요. : test.html

외부 파일을 업로드하였으면 페이지 관리에서 [페이지 생성]을 클릭하고 다음과 같이 따라해 보세요.

image

페이지 타입은 외부 페이지, 모듈 이름과 브라우저 제목은 자유롭게 입력하고 레이아웃은 공식 레이아웃을 선택한 후 하단에 있는 [저장] 버튼을 클릭합니다.


image

[외부 문서 위치] 입력란에 외부 파일의 올바른 경로를 입력합니다. 아래 힌트가 보이죠. 마지막 디렉터리가 현재 위치를 알려줍니다. 코어가 /xe/ 디렉터리에 설치되었기 때문에 현재 디렉터리는 /xe/입니다. page 디렉터리로 이동하기 위해서는 루트로 나온 후 다시 page 디렉터리로 이동해야 합니다. 따라서 현재 디렉터리에서 한단계 상위로 이동(../)한 후 page 디렉터리에서 test.html 문서를 찾는 경로를 입력해야 합니다.

만약 XE 코어가 최상위 루트(root)에 설치되었다면 page 디렉터리는 현재(./) 디렉터리에서 곧바로 하위 page 디렉터리로 이동한 후 test.html 문서를 찾아야 합니다. 따라서 외부 문서의 경로는 ./page/test.html 입니다.


image

외부 페이지를 확인해 보았을 때 위와 같은 내용이 출력된다면 외부 파일의 경로가 올바르게 입력된 것입니다. 만일 올바른 경로가 아닌 경우, 또는 그 위치에 외부 파일이 없는 경우 코어는 아무런 내용도 표시하지 않습니다. 파일이 없다거나 올바른 경로가 아니어도 코어는 절대로 고장나거나 화를 내지 않습니다. 몇번이라도 좋으니 다시 시도해 보세요.

다음 과정에서는 지금까지 생성한 게시판 모듈과 페이지 모듈을 메뉴에 연결시키는 방법에 대해 알아봅니다.