적용버전 : XpressEngine 공통 레이아웃 정보 파일 만들기

레이아웃의 정보 파일 info.xml

정보 파일 문서 위치 : /xe/layouts/xeschool_layout/conf/info.xml

정보 파일은 레이아웃 스킨의 제작 정보와 설정을 위한 옵션을 포함하고 있습니다. 디렉터리와 파일명은 변경할 수 없습니다.


새로운 레이아웃 디렉터리 만들기

앞으로 같이 만들어 볼 레이아웃의 디렉터리 이름은 xeschool_layout이라고 하겠습니다. 네이밍은 여러분의 자유입니다. 마음껏 네이밍 예술활동을 펼치시면 됩니다. xe 관리용 폴더에 layouts 디렉터리를 만드시고(내컴퓨터의 xe 추가파일 등을 관리하는 xe와 똑같은 트리구조의 관리용 디렉터리입니다.) 그 안에 xeschool_layout 폴더를 새로 만듭니다. 이 폴더와 그안의 하위 내용들이 서버의 xe/layouts/ 디렉터리에 업로드 되는 것입니다.

image

아무것도 들어있지 않은 xeschool_layout 디렉터리만 /xe/layouts/ 디렉터리 안에 업로드 해 보았습니다. XE가 눈치를 챘네요. 하지만 XE가 곤란에 빠졌습니다. 레이아웃이 있는 것 같은데 어떤 레이아웃인지 알 수가 없답니다. 위에 공식 레이아웃과 아래 스쿨 레이아웃처럼 버전/제작자 등과 같은 정보가 출력되지 않고 있습니다. 정보가 부족하니 맨 우측 생성 버튼도 만들어지지 않네요.

info.xml 문서가 바로 이곳에 레이아웃 기본정보를 제공하고 생성 버튼이 만들어졌을때 레이아웃의 여러가지 설정을 담당할 내용들을 담은 아주 중요한 문서입니다.


info.xml 문서 만들기

xeschool_layout 폴더 안에 conf 폴더를 새로 만듭니다. 그리고 그 안에 info.xml 문서를 만들어 줄겁니다. 그런데 info.xml 문서를 꼭 새로 만들어야만 하는가? 아니오! 가장 좋은 예제문서가 이미 공식 레이아웃에 있지요. xe_official/conf/info.xml 이 문서를 복사해 오시면 너무나 편리합니다. 디렉터리의 이름에서도 알 수 있듯이 conf 은 config(설정)의 단축형이고, info.xml 은 information 의 줄임말입니다. 즉, conf 디렉터리의 이름과 info.xml 문서의 이름은 그대로 사용해야 합니다. 이름이 바뀌면 XE는 정보를 읽어오지 못합니다.

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.2">
...
레이아웃의 정보와 설정 내용
...
</layout>

xml 문서도 HTML 문서와 동일하게 둥우리 구조입니다. 시작 태그<layout>가 있으면 반드시 닫는 태그</layout>로 끝나야 합니다. 시작 태그 바로 윗줄에 "이 문서는 xml 문서이고 문자형식은 UTF-8이다!" 라고 문서정의하는 방법도 똑같네요. 어렵지 않죠?


레이아웃의 기본정보 수정하기 : info.xml 수정

레이아웃 이름

<title xml:lang="ko">XE Official</title>
<title xml:lang="jp">XE Official</title>
<title xml:lang="en">XE Official</title>
<title xml:lang="ge">XE Official</title>
<title xml:lang="ru">XE Official</title>
<title xml:lang="es">XE Official</title>
<title xml:lang="zh-CN">XE Official</title>
<title xml:lang="zh-TW">XE Official</title>
<title xml:lang="vi">XE Official</title>
<title xml:lang="tr">XE Official</title>

레이아웃의 이름을 만들어 주는 <title> 태그 부분입니다. XE가 다국어에 아주 능통합니다. 그래서 여러나라 언어로 레이아웃의 이름을 지어 주고 있네요...^^ xml 문서내의 태그는 HTML 태그처럼 약속되고 고정된 태그가 절대 아닙니다. 순전히 사용자가 만들어 쓰는 태그입니다. 즉 <title>이란 태그를 만들고 그 안에 쓴 내용은 XE가 레이아웃의 이름으로 사용하기 위해 만든 우리끼리의 약속된 단어인 것이죠. HTML 문서 <head> 에 들어있는 <title> 태그와는 전혀 다른 것입니다. 다른 태그들도 모두 마찬가지로 XE와 새로 만든 약속된 단어일 뿐입니다. 그래서 좀 있다가 우리끼리의 새로운 단어도 만들어 넣을 것입니다. 아주 유용한 약속이 될 꺼예요. 맨 윗 줄에 한국어 내용을 다음과 같이 수정합니다.

  • <title xml:lang="ko">XE 스쿨 레이아웃 만들기</title>
  • <title xml:lang="en">XE School Make Layout</title>

※ 자! XE가 알 수 있도록 title 태그를 써줄께, 이건 XE와 미리 약속된 단어이니까, 만약 XE가 한글 제목을 원하면 xml:lang="ko" 이 부분을 보내주면 되겠지! 만약 영어로 된 제목을 원하면 xml:lang="en" 쉬운 거니까 틀리지 말고!

나머지 언어는 어떻게 할까요? 필요한 분만 사용하시고 나머지는 싹 지워도 좋~습니다. 저도 한글 부분만 남겨두고 싹~ 지우렵니다. XE에서 언어설정은 Setting(설정)에 가면 있고 웹사이트에서 사용할 언어를 옵션으로 선택해서 사용할 수 있는데(XE가 XE다운 자랑거리입니다.) 꼭 필요하지 않는 언어옵션은 꺼야지만 XE가 느려지지 않습니다. 지금은 배우는 과정임으로 한글만 사용하기로 하지요. 그래서 영어 제목도 지우고 갑니다. 참고하세요.


부연 설명

 <description xml:lang="ko">
     2007년 XE 공식 사이트 레이아웃. 2011년 코드 리펙토링.
     제작 : NHN
 </description>

description(~이 어떠한지에 대한 서술,기술,묘사,표현)도 XE와 약속된 단어입니다. 레이아웃에 대한 제목만으로는 부족한 이야기를 좀 더 부연해서 설명하고 싶은 것을 적어놓는 태그로 사용됩니다. 한글 부분을 아래와 같이 바꿔주고 나머지는 싹~ 지워도 좋습니다...^^

 <description xml:lang="ko">
     2011년 XE 스쿨 레이아웃 만들기 학습자료
     제작 : XE 스쿨과 학생들의 공동 작품
 </description>

버전

<version>1.0</version>

레이아웃의 제작 버전 정보를 제공합니다. 이 부분은 숫자로 인식하기 때문에 다른 언어설정이 필요 없겠지요. 한국사람이나 아프리카 사람이나 한개는 숫자 1입니다...^^


제작일자

<date>2011-05-26</date>

제작일자 역시 숫자로 정보를 제공하기 때문에 마음껏 고치시면 됩니다.


제작자 웹사이트 주소

<link>http://xeschool.com/</link>

레이아웃 제작자의 웹사이트 링크 주소를 수정해 줍니다. 웹사이트 링크주소도 언어변경이 필요하지 않기 때문에 한줄뿐입니다.


제작자 개인정보

<author email_address="xeschool@xeschool.com" link="http://xeschool.com/">
	<name xml:lang="ko">XE 스쿨</name>
</author>

제작자의 개인정보까지 추가적으로 입력할 수 있습니다. 한글부분만 남겨두고 싹~ 지웠답니다.


지금까지 작업한 내용들이 잘 출력 되는지 확인해 볼까요? XE 제어판에서 레이아웃 다운로드 항목을 열어보면 지금까지 작업한 내용이 아래 그림처럼 출력이 되고 있습니다.

image

XE가 레이아웃 디렉터리의 conf/info.xml 문서를 읽고 필요한 정보를 가져왔네요. 이제 우측에 생성 버튼도 나타났습니다. 정말 잘 됬군요...^^ 메뉴의 갯수는 다음 수정 과정에서 확인하도록 합니다.


레이아웃의 옵션 설정 수정하기 : info.xml 수정

레이아웃 추가 옵션 <extra_vars>

<extra_vars>
...
레이아웃에서 사용할 옵션의 내용
...
</extra_vars>

레이아웃 생성 버튼을 클릭하면 만나게 될 옵션 설정의 내용을 만들어 주는 <extra_vars> 태그입니다. 이것도 XE와 긴밀하게 약속된 단어이기 때문에 모든 추가 옵션의 설정 단어들은 이 <extra_vars>...</extra_vars> 사이에 넣어야 합니다. 추가 변수(extra_vars) 사이에 들어가는 항목들은 모두 변수(var)라고 정의하고 변수의 이름(name), 변수의 형식(type)으로 설정하여 사용합니다.

<var name="colorset" type="select">
...
변수의 내용
...
<var>

추가 옵션의 태그도 둥우리 구조<layout>...</layout>의 둥우리 구조 <extra_vars>...</extra_vars>, 그리고 또 그 안에 둥우리 구조 <vars>...</vars> 로 들어간다는 것을 잊지마세요.


컬러셋 선택 옵션

┌<var name="colorset" type="select">
│※ 레이아웃에서 컬러선택하는 옵션에 사용할 변수이름은 colorset 이고 이 변수의 사용방법은 선택항목(select)을 보여줘!
│	<title xml:lang="ko">컬러셋</title>
│	※ 옵션 항목 제목에 컬러셋 이라고 말하면 내가 알 수 있겠지!
│	<description xml:lang="ko">원하시는 컬러셋을 선택해주세요.</description>
│	※ 너도 하고 싶은 말(부연 설명)이 있으면 해!
│
│	※ 선택할 수 있는 옵션은 3개야! 기본/검은색/하얀색 잘 보고 선택해! 
│	┌<options value="default">
│	│※ 기본을 선택하면 변수 colorset의 값은 default로 정한다!
│	│	<title xml:lang="ko">기본</title>
│	└</options>
│	┌<options value="black">
│	│※ 검은색을 선택하면 변수 colorset의 값은 black이다!
│	│	<title xml:lang="ko">검은색</title>
│	└</options>
│	┌<options value="white">
│	│※ 하얀색! 뭘 더 물어봐? 당연히 변수 colorset="white"
│	│	<title xml:lang="ko">하얀색</title>
│	└</options>
└</var>

다른 언어 옵션을 지우고 나면 위와 같이 남습니다. 레이아웃에서 컬러셋을 이용하는 방법을 공부하기 위해 위와 같이 남겨둡니다. 배포용으로 제작하는 레이아웃은 사용자의 취향에 맞게 색상값의 선택 옵션을 충분히 만들기도 하지만, 범용이 아닌 나만의 레이아웃인 경우에는 컬러셋을 사용하지 않는 경우도 있습니다. 만약 필요없다면 colorset 변수 둥우리 구조를 모두 지워버리면 됩니다. 여기서는 공부를 위해 남겨 두고 레이아웃에서 활용 할 수 있도록 하겠습니다.


로고이미지 추가 옵션

┌<var name="logo_image" type="image">
│※ 로고의 변수이름은 logo_image, 이 변수는 image 첨부파일로 등록하는 방법이다!※ 변수 logo_image="" , 입력 받아야 하니까 value는 "" 아직 없지(NULL)  아래도 마찬가지!
│	<title xml:lang="ko">로고 이미지</title>
│	<description xml:lang="ko">레이아웃의 상단에 표시될 로고 이미지를 입력하세요.</description>
└</var>

┌<var name="logo_image_alt" type="text">
│※ 혹시 로고 이미지가 없으면 logo_image_alt 변수에 text 간단한 글을 받아 보자!  logo_image_alt=""
│	<title xml:lang="ko">로고 이미지 alt</title>
│	<description xml:lang="ko">로고 이미지의 alt 텍스트. 로고 이미지를 표시하지 않는 경우 대체 텍스트를 표시합니다.</description>
└</var>

홈 페이지 URL 추가 옵션

<var name="index_url" type="text">
※ 홈페이지 URL을 사용할 경우가 있으면 변수 index_urltext로 간단한 글을 입력 받자 쓸데가 있겠지!
	<title xml:lang="ko">홈 페이지 URL</title>
	<description xml:lang="ko">로고를 클릭시에 이동할 홈 페이지 URL을 입력해 주세요.</description>
</var>

배경이미지 추가 옵션

<var name="background_image" type="image">
※ 배경이미지로 사용할 경우가 있으면 변수 background_imageimage 첨부파일로 그림을 받아 두자!
	<title xml:lang="ko">배경 이미지</title>
	<description xml:lang="ko">배경 이미지를 사용하시려면 등록해주세요.</description>
</var>

★ 공부를 위한 XE스쿨 추가 옵션 ★

메인페이지와 서브페이지를 나눌 수 있는 변수 만들고 추가하기

┌<var name="layout_view_type" type="select">
│※ 레이아웃의 보기 형태를 변수(layout_view_type)로 만들고 선택항목을 이용해 선택하자!
│	<title xml:lang="ko">레이아웃 형태</title>
│	<description xml:lang="ko">원하시는 레이아웃의 보기 형태를 선택해주세요.</description>
│※ 선택할 수 있는 옵션은 2개 메인과 서브 레이아웃의 보기 형태 중에 하나를 선택하자. 
│	┌<options value="main">
│	│※ 메인 레이아웃 형태로 사용하기를 선택하면 layout_view_type="main"
│	│	<title xml:lang="ko">메인 레이아웃 형태로 사용</title>
│	└</options>
│	┌<options value="sub">
│	│※ 서브 레이아웃 형태로 사용하기를 선택하면 layout_view_type="sub"
│	│	<title xml:lang="ko">서브 레이아웃 형태로 사용</title>
│	└</options>
└</var>

위와 같이 메인 페이지와 서브 페이지를 나눌 수 있는 변수를 만드는 이유는 웹사이트의 첫 메인 페이지는 사이드 바 영역이 필요없는 경우가 많기 때문입니다. 서브 페이지에 들어 와서야 비로서 좌측 메뉴와 배너를 위한 사이드 바 영역이 필요하고 컨텐츠 영역과 구분하여 사용하게 됨으로 메인 페이지와 서브 페이지의 영역을 구분하여 디자인하면 매우 편리합니다.

image


레이아웃에서 사용할 메뉴 옵션

메뉴의 갯수

┌<menus>
│┌<menu name="main_menu" maxdepth="2" default="true">
││※ 상단메뉴의 변수이름은 main_menu 로 2단 메뉴를 기본으로 사용한다!
││	<title xml:lang="ko">상단 메뉴</title>
│└</menu>
│┌<menu name="bottom_menu" maxdepth="1">
││※ 하단메뉴가 필요하면 변수이름은 bottom_menu 로 1단 정도면 충분할 것 같다.(필요하면 추가한다.)
││	<title xml:lang="ko">하단 메뉴 </title>
│└ </menu>
└</menus>

xe.1.4.5.7 버전에서는 하단 메뉴가 없어졌습니다. 필요하면 위와 같이 추가하여 사용할 수 있습니다.
아직 layout.html 문서를 만들지 않았기 때문에 지금까지 작업한 info.xml 문서를 서버에 올려보고, 올바른 정보와 옵션 설정이 출력 되는지만 확인하시면 좋겠습니다. 다음 과정에서는 빈 layout.html 문서를 만들어 업로드 해보고 옵션을 확인해 보도록 합니다.