메뉴 건너뛰기

XE Guidebook

사이트 만들기
2014.08.03 19:17

5-08 페이지 모듈 생성하기와 사용하기

조회 수 2343 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

 

사이트맵을 만들면서 메뉴를 추가할 때 메뉴타입에 "문서페이지", "위젯페이지", "외부페이지", "게시판", "바로가기"가 있음을 알고 있다. 이는 XE로 웹사이트를 만들기 위해서는 사이트맵의 메뉴 각각이 최종적으로는 콘텐츠 모듈과 연결되어야 있어야 한다는 것을 의미한다.
 
XE에서는 대표적인 콘텐츠 모듈인 "게시판"과 "페이지 모듈(문서페이지, 위젯페이지, 외부페이지)"을 기본적으로 제공하고 있으며, XE 공식자료실에는 이외에도 쇼핑몰 관련 모듈, 지식인 XE, XE Guestbook(방명록) 등 수많은 콘텐츠 모듈들을 배포하고 있는데, 이들 모듈들을 서버에 설치하고 각각 메뉴에 연결함으로써 원하는 목적의 웹사이트를 구축할 수가 있다.
 
지난 시간에 배운 게시판 모듈에 이어 이번 시간에는 사이트 만드는데 있어 없어서는 안될 가장 기본적인 콘텐츠 모듈인 "페이지 모듈"에 대해 자세히 알아 보도록 하자.  
 
 
● 페이지 모듈의 의의
 
XE의 등장 배경에서 알 수 있듯이 XE의 전신인 "제로보드"는 전자게시판 프로그램에 불과하였다. 이후 XE는 발전하여 HTML이나 CSS등의 웹프로그래밍 언어를 모르더라도 누구나 쉽게 원하는 홈페이지를 만들 수 있는 CMS(Content Management System) 웹 빌더로 거듭 태어나게 되었는데, 그럼에도 불구하고 XE는 역시 게시판형 웹사이트 만들기에 가장 큰 강점을 가지고 있는 특화된 웹 제작도구라는 편협된 인식이 여전히 자리잡고 있는 것도 사실이라 하겠다.
 
이제 "XE 혼자 힘으로 사이트만들기" 강좌에 참여한 여러분들께서는 더 이상 XE가 "게시판"을 만드는 프로그램 정도로 생각하거나 게시판형 웹사이트를 손쉽게 만들 수 있는 웹 제작도구로만 치부하는 불상사는 없었으면 좋겠다. XE는 단지 콘텐츠 모듈중의 하나인 "게시판"을 비롯하여, 웹 개발자가 생각할 수 있는 모든 종류의 모듈들을 망라하여 XE 사용자가 아주 편리하게 사용할 수 있도록 광대역 플랫폼을 제공하는 CMS 소프트웨어인 것이다.
 
일반적으로 웹사이트를 만든다는 것은 페이지에서 시작하여 페이지로 끝이 난다고 할 수 있다. 웹사이트는 결국 "웹 페이지" 하나 하나가 모여서 전체 사이트를 이루는 것으로 각각의 웹 페이지는 "콘텐츠"로 채워지게 되는데, 이 "콘텐츠"가 XE에서는 게시판 모듈의 콘텐츠가 될 수도 있고, 페이지 모듈의 콘텐츠가 될 수도 있는 것이다. 물론 쇼핑몰 같은 사이트에서는 상품관리 모듈의 콘텐츠(상품)가 이에 해당한다고 할 수 있을 것이다.
 
즉 다시 말해서 XE는 웹페이지에 채워지는 "콘텐츠"를 특징적으로 유형화시켜 그 특성에 맞게끔 콘텐츠를 효과적으로 생성하고 편리하게 잘 관리해 줄 수 있는 프로그램인 "게시판", "페이지" 등의 수도 없이 많은 콘텐츠 모듈들을 만들었는데, 이 모듈들을 각각의 웹페이지에 연결시켜 줌으로써 전체 사이트를 만들 수 있도록 한 것이다.
 
이처럼 XE가 뛰어난 확장성을 가진 모듈형 구조의 범용적인 웹 제작도구로 발전하면서 페이지모듈은 게시판 모듈과 함께 XE에서는 없어서는 안될 필수적인 기본 모듈로 자리잡았는데, 그 역할과 기능 및 사용자의 활용도 면에서는 오히려 게시판보다 더욱 중요한 입지를 차지하고 있다고 할 수 있을 것이다.
 
웹사이트의 구축 목적과 콘텐츠의 전체적인 구성을 한 눈에 알아 보게 하고, 사이트의 특징적인 분위기를 방문자에게 강하게 인식시켜 줌으로써 사이트 운영의 성공으로 가는 희망 지표와도 같은 최초 접속화면(시작모듈)은 대개 페이지 모듈로 만들어 졌으며, 사이트 중간중간에 중요한 콘텐츠 들을 일목요연하게 정리하여 보여 주고, 특히 강조하고 싶은 콘텐츠의 설명이나 이벤트 등을 진행하는 페이지는 거의 페이지 모듈로 만들어졌기 때문에 그만큼 페이지 모듈의 중요성은 높아졌다고 할 수 있다.
 
앞 시간에 배운 XE 게시판 모듈은 외형만 만드는 것만 놓고 본다면, 마치 판화와 같이 그림을 찍어 내듯 순식간에 웹페이지를 만들어서 누구나 쉽게 웹사이트를 완성할 수 있다. 그러나 "페이지 모듈"로 만들어지는 웹페이지는 "텅 빈 백지 위에 그림 그리기"와도 같아 사용자의 독창적인 창의성과 재치있는 아이디어가 요구되며, 디자인 감각과 예술적 영감을 빛나게 발휘해야 하는 고감도의 창작영역에 속하는 작업이라 할 수 있다.
 
하지만 그림 그리기에 천부적인 재능을 가지고 있는 예술가라 해서 사이트 만들기를 잘할 거라는 장담은 할 수 없을 것 같다. XE 페이지 모듈을 이용한 웹페이지 만들기는 단순히 백지 위에 독창적인 그림 그리기가 아니라, 방문자의 관심을 집중시킬 수 있는 설득력있는 킬러 콘텐츠를 발굴해 내는 논리적 사고력, 발굴한 콘텐츠를 가지고 화면에 재치있고 호소력 있게 조판하는 구성 능력, 그리고 방문자의 시선을 순식간에 사로 잡아 버릴 수 있는 마케팅적 디자인 감각이 복합적으로 작용하여 만들어지는 작업 영역이기 때문일 것이다.
 
따라서 XE 페이지 모듈(특히 위젯페이지 모듈)을 이용하여 웹페이지 만들기는 창의적인 아이디어와 미적 디자인 감각이 아주 빛을 발하는 예술가적 영역의 작업이긴 하지만, 오히려 독창적인 예술가보다는 일반인들, 특히 체계적으로 정리하기를 좋아하고, 반복적인 배치와 나열 작업을 통한 시행착오를 거치면서 축적된 경험적 지식을 논리적으로 끄집어내어 재구성하는 능력이 뛰어난 사람들이 훨씬 더 웹페이지를 잘 만들 수 있는 것이다.
 
이처럼 XE 페이지 모듈은 전문 웹 프로그램 지식이 없는 일반인들이 페이지 모듈의 "도구" 사용법만 조금 배우고 연습을 하면, 누구나 쉽게 원하는 웹페이지를 만들 수 있도록 하고 있는데, "위젯" 프로그램과 "위젯 스킨" 그리고 "위지윅에디터"가 그 핵심적인 도구 역할을 한다. 또한 페이지 모듈은 사용자 편의를 위하여 아래와 같이 3가지 유형의 형태로 구분하여 제공하고 있으므로 특징을 잘 알고 사용하여야 할 것이다.
 
 
● 페이지 모듈의 유형별 생성 / 설정하기 
 
페이지를 생성하려면 사이트 맵 만들기에서 배운 바와 같이 "[사이트 제작/편집] > [사이트 메뉴 편집]"에서 메뉴추가를 클릭하고 생성할 메뉴 타입으로 "문서페이지"나 "위젯페이지" 혹은 "외부페이지"를 선택한다. 메뉴 이름을 입력하고 "확인" 버튼을 누르면 메뉴의 추가와 함께 메뉴에 연결된 해당 페이지가 동시에 생성된다.
 
페이지가 처음 생성되면 XE에서 제공하는 사이트 기본 레이아웃이 연결되어져, 레이아웃의 콘텐츠 영역에 페이지가 출력되고, 콘텐츠의 작성과 수정, 조회 및 삭제 등의 작업을 할 수 있다. 레이아웃의 변경은 게시판에서 레이아웃 바꾸는 방법과 동일하게 하면 된다.
 
페이지 모듈을 제대로 사용하기 위해서는 "페이지 관리"에서 페이지 모듈 사용에 필요한 옵션 설정을 하여야 하며, 페이지를 작성하는데 필요한 필수 도구인 위지윅 에디터, 위젯, 위젯스킨 등의 상세 내용과 사용하는 방법을 잘 익혀 두어야 한다.
 
▶ 문서 페이지의 생성과 설정 및 사용하기
 
한 번 작성하면 거의 갱신할 필요가 없이 계속 사용하는 정적인 웹페이지를 만들 때 사용되는 페이지 모듈이다. XE에서 제공하는 위지윅 에디터를 이용하여 "글, 이미지, 멀티미디어" 등의 콘텐츠를 문서 페이지에 직접 작성하고 수정할 수 있다. 
 
【 문서 페이지의 생성 】
 
→ XE Admin 관리자 메뉴에서 "[사이트 제작/편집] > [사이트 메뉴 편집]" 메뉴를 클릭한다.
→ "사이트 메뉴 편집" 창에서 XE Guidebook 사이트맵에 있는 "커뮤니티" 메뉴를 클릭한다.
→ "커뮤니티" 창에서 "메뉴 추가"를 클릭한다.
→ "메뉴 추가" 창에서 "문서페이지"를 선택한다.
→ 문서페이지 창에서 "메뉴 이름"과 "메뉴 ID"를 입력하고 "확인" 버튼을 누른다. 

0-8-1-1 문서페이지 생성하기.jpg

 

【 문서 페이지의 작성 】
 
문서페이지에 콘텐츠를 작성하려면 문서페이지 메뉴를 열고 우측 하단의 "페이지 수정" 버튼을 누른다.
문서 제목 입력란에 제목을 입력하고, 위지윅 에디터를 이용하여 페이지를 작성한다.
 
0-8-1-2 문서페이지 작성.jpg

 

문서페이지를 작성 후 "등록" 버튼을 누르면 페이지가 완성된다. 
 
0-8-1-3 문서페이지 작성 완료.jpg

 

【 문서 페이지의 설정 】
 
문서페이지를 제대로 사용하려면 페이지 모듈이 가지고 있는 기능을 최대한 활용하여야 한다. 게시판 관리에서 배운 바와 같이 페이지 모듈도 XE에서 기본적으로 제공하는 기능들에 대하여 필요한 사용자 옵션 설정을 함으로써, 사이트의 운영과 콘텐츠의 관리를 효율적으로 할 수 있다.
 
"문서 페이지 관리"는 아래 그림과 같이 "모듈 정보", "추가 설정", "권한 관리", "스킨 관리", "모바일 스킨 관리" 탭으로 나뉘어 각각의 항목 설정을 할 수 있도록 되어 있으며, 그 기능이나 용도는 "게시판 관리"와 비슷하므로 이번 강좌에서 구체적인 설명은 하지 않을 것이다. "페이지 관리"에 있는 모든 기능들에 대하여 하나하나 설정 테스트를 해 보면서 페이지 모듈에 어떤 작용을 하고 어떤 영향을 미치는지를 파악하고 익히는 것은 숙제,,,

 

0-8-1-4 문서페이지 설정하기.jpg

 

▶ 위젯 페이지의 생성과 설정 및 사용하기
 
웹사이트의 "초기 화면"과 같이 수시로 갱신할 필요가 있는 콘텐츠를 담고자 할 때 사용되는 동적인 페이지 모듈이다. XE에서 제공하는 "콘텐츠 위젯" 등의 위젯 프로그램을 이용하여 최근글, 댓글 또는 이미지 등의 목록과 같은 동적인 내용을 위젯페이지에 출력하고 위젯 스킨으로 꾸밀 수 있다.
 
【 위젯 페이지의 생성 】
 
위젯페이지 만들기는 "문서페이지" 만드는 방법과 동일하며, 메뉴 추가시 "위젯페이지" 메뉴 타입을 선택하면 된다.
사이트맵을 만들 때 "XE for yourself!" 메뉴는 "위젯페이지" 타입으로 만들어진 페이지이다.

 

0-8-2-1 위젯페이지 생성하기.jpg

 

【 위젯 페이지의 작성 】
 
위젯페이지에 콘텐츠를 작성하려면 위젯페이지 메뉴를 열고 우측 하단의 "페이지 수정" 버튼을 누른다.
 
"시작모듈 바꾸기"에서 "내용 직접 추가" 버튼을 늘러 아래 그림과 같은 내용을 간단히 만들어 본 적이 있을 것이다. "위젯페이지"에서 "내용 직접 추가" 버튼이란 문서 페이지를 만들 때 사용한 "위지윅 에디터"와 같은 것으로 에디터의 편집창에서 콘텐츠를 작성하면 된다.

 

0-8-2-2 위젯페이지-내용 직접 추가.jpg

 

무엇보다 "위젯 페이지"는 XE에서 제공하는 "위젯"을 이용하여 동적으로 페이지를 만들 수 있는 장점이 있기 때문에 사이트의 얼굴이라 할 수 있는 초기화면을 꾸밀 때 특히 많이 사용되며, 다양한 기능의 위젯과 위젯 스킨의 개발, 배포로 위젯페이지의 활용도는 점점 많아지고 중요성은 높아지고 있다.
 
위젯페이지에 게시판의 최신글을 불러오게 하는 "콘텐츠 위젯"을 생성하는 방법을 간단히 알아 보자.
 
선택 박스에서 "콘텐츠 위젯"을 선택한 후, 추가 버튼을 누른다.

 

0-8-2-3 위젯페이지-콘텐츠 위젯.jpg

 

"위젯 코드생성" 창이 열리면, 코드 생성에 필요한 요구 사항 및 설정 사항들을 모두 입력하고 "코드생성" 버튼을 누르면 위젯페이지 안에 해당 위젯이 생성된다.

 

0-8-2-4 위젯페이지-위젯 코드 생성.jpg

 

생성된 위젯은 크기를 적당히 조절하여 원하는 위치에 배치할 수 있으며, 위젯 스타일을 이용하여 위젯의 외관을 장식하고 꾸밀 수 있다. 원하는 대로 콘텐츠 위젯의 작업이 완료 되었으면 "저장" 버튼을 누른다.

 

0-8-2-5 위젯페이지에 생성된 콘텐츠 위젯.jpg

 

콘텐츠 위젯을 이용하여 "XE 사용자 매뉴얼"이라는 게시판에 게시된 최근 글을 불러오는 방법을 간단히 살펴 보았다. 현재 게시판에 글이 1건 밖에 없어 위젯에는 1개의 목록만 출력되었지만, 게시판에 계속 새로운 글이 등록되면 이 위젯에는 "새로고침"을 하는 순간 최근 글(기본 5개 설정)이 바로바로 출력이 되는 동적 위젯페이지가 만들어진 것이다.
 
☞ 위젯의 구체적인 사용법과 실습은 다음 "위젯페이지 꾸미기" 시간에 자세하게 이루어지므로
   이번 시간은 예습 삼아 코드생성 작업과 위젯 아이콘 사용을 마구마구 해 보시면 됩니다. 

 

0-8-2-6 콘텐츠 위젯 생성 완료.jpg

 

▶ 외부 페이지의 생성과 설정 및 사용하기
 
외부페이지란 XE의 모듈을 이용하지 않고 사용자가 XE 코어 외부에서 별도로 작성한 HTML이나 PHP 등의 파일을, XE에서 사용할 수 있도록 하는 페이지 모듈이다. 외부페이지에는 3rd party 개발자가 작성한 프로그램 소스가 들어가 있을 수 있으며 순수 html로만 만들어진 경우도 있다.
 
XE는 온전한 HTML 문서의 body 안에 독립적으로 생성된 페이지, 게시판 등의 모듈 등을 불러와 사용할 수 있는 프로그램으로서 Core가 항상 완성된 HTML 문서를 제공하여 화면에 출력하기 때문에, 레이아웃의 콘텐츠 영역에 출력되는 내용은 body 엘리먼트 안에서 문서 내용을 구조화할 수 있는 태그만 사용하여 콘텐츠를 작성하면 된다.
 
다시 말해서 완성된 HTML 문서 형태는 HTML 문서가 반드시 가지고 있어야 할 문서형식선언(DOCTYPE)이나 html, head, body와 같은 기본 구조를 표현하기 위한 엘리먼트 들을 모두 포함하여 작성하여야 하지만, XE에서는 Core가 이들 요소들을 기본적으로 제공하기 때문에 <body>와 </body> 태그 사이에 들어가는 내용에는 <!DOCTYPE>, <html>, <head>, <body> 태그가 전혀 필요치 않으며, 오로지 내용을 구조화 할 수 있는 <div>, <h1>, <p> 등등의 태그만 사용하여 작성하게 된다는 것이다.
 
곧 외부페이지 모듈은 프로그래밍 기술적으로 include와 같은 성격을 가지고 있어, XE 코어의 외부에서 HTML 문서나 PHP 파일을 별도로 먼저 만들고 서버에 업로드한 다음, 페이지 내부의 body 안으로 불러와 포함시키게 되면 그 내용은 <body>와 </body> 태그 사이에 출력되어 진다.
 
※ 메뉴추가 시 "바로가기" 타입을 지정하여 URL링크를 걸어주는 개념과는 다르다.
 
 
- 먼저 외부 파일을 하나 만들고 서버에 업로드한다.
 
ㆍ주석 줄을 제외하고 아래 2줄의 내용으로 된 outpage_test.html 문서를 만들고 UTF-8 인코딩 형식으로 저장한다.
 
<!-- // 외부 HTML 문서를 만들 때는 <!DOCTYPE>, <html>, <head>, <body> 태그를 사용하지 않습니다. -->
<!-- // 문서의 인코딩 형식은 반드시 UTF-8 로 저장해야 합니다. -->
 
<h1>외부 페이지 만들기 예제</h1>
<p>외부 페이지는 XE 코어 외부에서 만들어진 HTML이나 PHP 파일을 XE에서 사용할 수 있게 해준다.</p>

 

0-8-3-1 외부파일 만들기.jpg

 

XE 코어는 UTF-8 서버에 설치하고 운영하는 프로그램이기 때문에 코어 내부에 include 시키고자 하는 문서의 인코딩 형식은 반드시 UTF-8로 저장해야 한다. 만약 ANSI 형식으로 저장하게 되면 텍스트가 깨져 보이게 된다.
 
ㆍ서버 계정의 root 디렉터리(xe 폴더가 있는 같은 디렉터리) 안에 page 폴더를 만들고 외부 파일을 업로드한다.
  ( root 디렉터리의 이름은 서버에 따라서 html, public_html 또는 www 등으로 사용된다.) 

 

0-8-3-2 외부파일 업로드.jpg

 

- XE Admin 관리자페이지에서 :외부페이지"가 연결된 메뉴를 추가한다.
 
  → "[사이트 제작/편집] > [사이트 메뉴 편집]" 메뉴를 클릭한다.
  → "사이트 메뉴 편집" 창에서 XE Guidebook 사이트맵에 있는 "커뮤니티" 메뉴를 클릭한다.
  → "커뮤니티" 창에서 "메뉴 추가"를 클릭한다.
  → "메뉴 추가" 창에서 "외부페이지"를 선택한다.
  → 문서페이지 창에서 "메뉴 이름"과 "메뉴 ID"를 입력하고 "확인" 버튼을 누른다.

 

0-8-3-3 외부페이지 메뉴 생성하기.jpg

 

- 사이트에서 "커뮤니티 > 외부페이지 테스트" 메뉴를 클릭하여 위에서 만든 페이지를 연 다음,
  레이아웃 페이지 영역의 우측 상단에 있는 "설정" 버튼을 클릭한다.
 
- "외부 문서 위치" 입력란에 서버에 업로드한 "외부 파일"의 경로를 입력하고 "저장" 버튼을 클릭한다.
 
XE Core가 /public_html/ 루트 디렉터리에 설치되어 있기 때문에, 현재 디렉터리는 /public_html/이고 바로 하위에 외부파일(outpage_test.html) 파일이 들어 있는 page 디렉터리가 있으므로 외부 문서의 상대 경로는 ( ./page/outpage_test.html ) 가 된다.
 
※ 만약 루트 디렉터리 하위의 /xe/ 폴더 안에 XE Core가 설치되어 있다면 현재 디렉터리는 /xe/가 되고, page 디렉터리로 이동하기 위해서는 루트로 나온 후 다시 page 디렉터리로 이동해야 한다. 따라서 현재 디렉터리에서 한단계 상위의 루트 디렉터리로 이동(../)한 후, 바로 하위에 있는 page 디렉터리에서 outpage_test.html 문서를 찾는 경로( ../page/outpage_test.html )를 입력해 주어야 한다. 

 

0-8-3-4 외부페이지 설정-외부문서 지정.jpg

 

- 사이트에서 "외부페이지 테스트" 메뉴를 클릭하여 화면에 아래와 같은 내용이 출력되면 외부 문서 파일의 경로가 올바르게 입력되어 작업이 성공적으로 된 것이다.

 

0-8-3-5 외부페이지 모듈 사용하기 완료.jpg

 

- 외부 페이지 설정하기
 
외부페이지를 제대로 사용하려면 모듈의 사용자 설정을 하여야 한다. 사이트의 화면에서 "설정" 버튼을 누르고 "페이지 관리" 화면이 열리면, 문서 페이지나 위젯 페이지의 설정하기와 동일한 방법으로 "모듈 정보", 추가 설정", 권한 관리" 탭에 있는 각각의 옵션 항목에 대하여 사용자의 필요에 따라 적절한 설정을 하면 된다.