1. 이번 글에서는 레이아웃 영역에 설치된 위젯을 추가하는 방법에 대해 살펴보겠다. XpressEngine에서 생성한 페이지는 아래 그림에서와 같이 페이지 영역과 레이아웃 영역으로 구분할 수 있다. 페이지 영역에 위젯을 추가하는 방법은 페이지 수정 버튼을 이용 몇번의 마우스 조작만으로도 위젯을 추가할 수 있지만 레이아웃 영역에 위젯을 추가하려면 페이지 영역에 위젯을 추가하는 것 보다 복잡한 과정을 거치며 또한 html, javascript, css 등에 대한 약간의 지식이 필요하다. 그러면 아래 그림에서와 같이 기본레이아웃의 분홍색으로 된 부분에, 앞 글에서 설치한 "플래시시계(DroArc)" 위젯을 추가해 보겠다.



2. 관리자 화면의 레이아웃 관리 화면에서 "기본레이아웃" 설정 아이콘을 클릭한다.
 


3. "기본레이아웃" 설정 화면의 "레이아웃 편집" 탭을 클릭한 후 "HTML" 코드 아래 부분에 보이는 "플래시 디지털 시계"를 클릭한다.



4. 플래시 디지털 시계 설정창이 뜨면 위젯, 스킨, 컬러셋을 설정한 다음 화면 하단의 "코드생성" 버튼을 클릭한다. 그러면 그림에서 파란색으로 된 부분처럼 코드가 생성되는데 이 코드를 복사한 후 창을 닫는다.



5. 이제 HTML 코드부분의 적당한 위치(아래 그림 참조)에 복사한 코드를 붙여 넣고 저장버튼을 클릭한다. 여기서는 플래시 시계를 좌측 컬럼의 중앙에 오도록 하기 위해 복사한 코드 앞, 뒤로 <center>, </center> 태그를 적용했다. 레이아웃에 따라서는 코드 생성 후 "레이아웃 편집"이 아닌 "레이아웃 설정" 화면에서 코드를 추가해야하는 경우도 있다.



6. 팝업 창에서 "확인" 버튼을 클릭한다.



7. 위 과정이 올바르게 진행됐으면 1번 화면에서 새로고침을 하면 아래와 같이 플래시 시계가 출력된다.

1. XpressEngine를 설치하면 기본적으로 그림과 같이 네 개의 위젯을 제공한다. 그러나 이 네 개의 위젯으로만 페이지를 꾸미기 위해서는 다소 부족한 면이 없지 않다. 그래서 XpressEngine에서는 다른 사용자에 의해 만들어진 추가 위젯을 사용할 수 있도록 배포하고있다. 여기서는 추가 위젯을 설치하는 법에 대해 알아보겠다.

2. 추가위젯을 설치하려면 http://www.xpressengine.com/download 에 접속한다. 여기서는 플래시시계 위젯을 설치해 보겠다. 이를 위해 화면 좌측메뉴 하단의 검색창에 "시계"라 입력하고 "엔터"키를 누른다.



3. 검색 결과에서 "드로아크 플래시 시계..."를 다운받기위해 클릭한다.



4. 해당 위젯을 다운로드하고 적당한 폴더에 압축을 푼다.



5. FileZilla와 같은 FTP Client 프로그램을 이용 위 4에서 풀린 위젯 폴더를 서버 XpressEngine가 설치된 폴더 내의 widgets 폴더에 올린다. 여기서는 "conf", "skins" 폴더를 포함하고 있는 "DroArc_clock" 폴더를 ".../public_html/xe/widgets" 폴더에 올리면 된다.



6. 업로드가 완료된 후 1번 화면에서 새로고침을 한 후 위젯 목록을 보면 그림과 같이 "플래시 디지털 시계"가 나타난다. 이제 "추가" 버튼을 이용 위젯을 추가하면 된다.

1. 앞에서 기본으로 제공되는 레이아웃을 페이지 및 게시판에 적용하는 방법에 대해 살펴보았다. 그러나 XpressEngine 공식 사이트에는 제 3자에 의해 만들어진 많은 레이아웃이 있다. 여기서는 이러한 레이아웃을 적용하는 방법에 대해 살펴보자. 우선 "http://www.xpressengine.com"에 접속한다음 "Download" 항목을 클릭한다.



2. 다운로드 화면에서 레이아웃을 다운받기 위해 우측의 "레이아웃 스킨"을 클릭한다.



3. 적당한 레이아웃을 선택하여 다운로드 한다. 여기서는 "KINDGUY Layout Skin 1.1 - TYPE2"를 선택했다. 다운로드에 성공했으면 적당한 폴더에 압축을 푼다.



4. 압축을 풀었으면 "conf", "css", "filter", "images"를 포함하고 있는 "layout_skin(kindguy1.1_type2_xe1.4.1.1)"폴더를 서버 XpressEngine가 설치된 폴더 내의 layouts(.../public_html/xe/layouts) 폴더에 올린다.



5. 레이아웃 폴더를 서버에 올렸으면 관리자화면에서 "레이아웃 관리" 화면으로 이동한다음 "생성" 버튼을 클릭한다. 이제부터는 앞 글 "레이아웃 적용"에서 다룬것과 동일한 단계를 거치므로 기억을 잘 더듬어 보자.



6. 화면이 바뀌면 레이아웃 이름을 "Layout Skin(Kindguy1.1 - Type2)..."으로 선택하고 적당한 제목을 입력한다. 여기서는 제목에 "카인드가이레이아웃"을 입력했다. 



7. 레이아웃에 적용할 메뉴(앞에서 만들었음)를 선택한 후 "저장" 버튼을 클릭한다.



8. 페이지 관리 화면에서 "메인페이지" 설정 아이콘을 클릭한다.



9. 설정 화면에서 레이아웃을 "카인드가이레이아웃"으로 선택한 후 "저장" 버튼을 클릭한다.



10. 페이지 목록에서 "메인페이지"를 클릭 레이아웃의 변화를 확인한다.



11. 아래 화면은 "카인드가이" 레이아웃을 적용한 "메인페이지" 화면이다.



12. 이제 생성된 게시판에 "카인드가이" 레이아웃을 적용해 보자. 앞 글과는 달리 여기서는 한번에 모든 게시판에 "카인드가이" 레이아웃이 일괄 적용되도록 해 보겠다. 먼저 게시판 목록에서 각 게시판 좌측의 체크박스에 모두 체크한 다음 "설정" 버튼을 클릭한다.



13. 새로운 팝업창이 뜨면 레이아웃 항목이 "카인드가이" 레이아웃이 되도록 선택한 후 "등록" 버튼을 클릭한다.



14. 이제 브라우저 제목 중 아무 게사판이나 선택해 보면 "카인드가이" 레이아웃이 적용돼 있음을 볼 수 있다.



15. 아래 화면은 "카인드가이" 레이아웃이 적용된 게시판 화면을 보여준다.

1. 우리는 앞에서 게시판과 페이지를 생성했다. 그러나 앞에서 생성한 아무런 꾸밈이 없는 게시판과 페이지로, 이를 사이트를 적용 운영하기는 다소 무리가 있다. 여기서는 페이지와 게시판 주변에 레이아웃을 적용, 배너 및 로그인 창 삽입 등을 통해 주변부를 꾸미고 메뉴와 같은 기능을 추가하는 방법에 대해 살펴보겠다. 우선 관리자 화면에의 "사이트 설정"에서 "레이아웃"을 클릭한다음 "생성"버튼을 클릭한다.



2. 레이아웃 이름의 콤보박스를 클릭하면 기본으로 제공되는 레이아웃이 보이는데 이 중 "XE 공식 사이트 레이아웃(xe_official)"을 선택한다. 그리고 제목에 "기본레이아웃"이라 입력한다. 참고로 제목은 임의의 이름을 줄 수 있다. 제목을 입력했으면 "다음" 버튼을 클릭한다.



3. 팝업창이 뜨면 "확인" 버튼을 클릭한다.



4. 레이아웃 설정화면이 나오면 각 항목을 적당히 선택한다. 여기서는 상단메뉴와 하단메뉴를 "메인메뉴"로 선택했다. "메인메뉴"는 앞 글(메뉴만들기)에서 만든 메뉴이다. 이는 레이아웃의 상단과 하단에 "메인메뉴"를 출력하도록 설정한 것이다.



5. 팝업창이 뜨면 "확인" 버튼을 클릭한다.



6. 이제 페이지 관리 화면으로 이동한 후 "메인페이지" 설정아이콘을 클릭한다.



7. 페이지 설정화면의 레이아웃 항목의 콤보박스를 클릭하면 위에서 생성한 "기본레이아웃 (xe_official)"이 보이는데 이를 선택한 다음 "저장" 버튼을 글릭한다.



8. 팜업창이 뜨면 "확인" 버튼을 클릭한다.




9. 이제 페이지 관리화면의 페이지 목록에서 "메인페이지"를 클릭하면 페이지가 아래와 같이 변한것을 알 수 있다. 여기서 상단의 메뉴와 하단의 메뉴가 표시되고 있음을 볼 수 있다.



10. 이제 위에서 만든 기본 레이아웃을 "공지사항" 게시판에 적용해보자. 이를 위해 게시판 목록으로 이동한 후 "공지사항" 게시판의 설정 아이콘을 클릭한다.



11. "공지사항" 게시판 설정 화면에서 레이아웃 항목을 "기본레이아웃 (xe_official)"으로 한 후 "등록" 버튼을 클릭한다.



12. 팝업창에 응답한 후 게시판 목록으로 이동 브라우저 제목 "공지사항"을 클릭한다.



13. 그러면 "공지사항" 게시판도 "메인페이지"와 동일한 레이아웃이 적용됐음을 볼 수 있다. 만약 "공지사항"이 아닌 다른 게시판을 클릭해보면 "공지사항"과는 다른 화면을 보게된다. 이는 다른 게시판에는 레이아웃이 적용되지 않았기 때문이다. 다른 게시판에도 "공지사항"과 동일한 레이아웃을 적용하려면 각 게시판의 설정 아이콘을 통해 레이아웃을 적용하면 된다.

1. XpressEngine은 페이지 생성기능을 지원한다. 페이지란 게시판에 올라온 최신 글들의 제목을 표시하거나, 달력, 시계 등을 표시하는 화면을 말하는데, XpressEngine에서는 위젯이라 불리는 화면 구성요소를 쉬운 방법으로 배치하거나 꾸밀 수 있도록 지원한다. 페이지는 관리자 화면에서 "서비스 관리"의 "페이지" 메뉴를 통해 만들 수 있다. 페이지를 만들기 위해 페이지 관리 화면에서 "생성" 버튼을 클릭한다.