1. XE는 모듈이라 불리우는 추가 가능한 프로그램들을 조합하여 사이트를 확장할 수 있다. 여기서는 XE 핵심 모듈 중 하나인 게시판 모듈을 추가해 보겠다. 모듈을 추가하기 위해서는 XE 공식 사이트에 접속하여 모듈 메뉴를 클릭 설치를 원하는 모듈을 다운로드해야 한다.

2. 모듈목록 화면에서 게시판 모듈을 클릭한다. 글 작성 당시 버전은 1.4.4 이다.

3. 게시판 모듈 화면에서 다운로드 항목을 클릭 해당 모듈을 적당한 폴더에 다운로드하고 압축을 푼다.
 

4. FileZilla 등을 이용하여 로컬 컴퓨터의 "1.4.4" 폴더를 서버의 XE가 설치된 폴더 아래의 "modules" 폴더 안에 업로드한다.
 

5. "1.4.4" 폴더의 업로드가 완료됐으면 오른쪽 클릭을 통해 이름을 "board"로 변경한다. 변경 이유는 모듈을 패키징 할 때 배포자의 실수로 보이며, 변경하지 않고 "1.4.4"로 그냥 사용할 경우 정상 동작을 하지 않는다.
 

6. 아래는 이름을 변경한 후의 화면이다.

7. 위 모든 과정이 끝났으면 XE가 설치된 서버에 접속한 후 XE 관리자로 로그인한다.

8. 관리자로 로그인 한 후 "관리" 메뉴를 클릭 관리자 화면으로 접속한다.

9. 관리자 화면에서 "확장기능" 메뉴의 "설치된 모듈" 항목을 클릭한다.

10. 게시판 모듈이 올바른 경로에 업로드 됐다면 "설치된 모듈" 화면에 그림과 같이 게시판 항목이 나타난다. 게시판 모듈의 업데이트가 가능한 경우 업데이트를 진행한다.

11. 업데이트가 완료되면 다음과 같은 화면이 나오는데 "확인" 버튼을 클릭한다.

12. 이제 게시판 모듈의 업데이트가 완료되었다.

13. 이제 설치된 게시판 모듈을 이용해 게시판을 생성해 보자. 이를 위해 "사이트" 메뉴의 "사이트맵" 항목을 클릭한다.

14. "사이트맵" 화면에서 "메뉴추가"를 클릭한다. 사이트 맵 화면이란 XE로 사이트를 구축할 때 메뉴를 만들고 해당 메뉴를 클릭했을 때 표시할 게시판 또는 페이지 등을 설정해 주는 화면이다.

15. 이 글은 게시판 생성과 관련된 연습을 위한 글이므로  "메뉴추가" 화면에서 "메뉴 이름", "모듈 또는 URL", "모듈 선택", "모듈 아이디 생성" 항목에 각각 "게시판연습", "모듈 생성", "게시판", "test"를 입력 또는 선택한 후 "저장" 버튼을 클릭한다.

16. "저장" 버튼을 클릭하면 "사이트맵"에 "게시판연습" 항목이 생기는데 이 부분을 클릭하면 생성된 게시판을 확인할 수 있다.

17. 다음은 게시판 화면으로 주소창에 보면 쿼리스트링 부분이 "?mid=test" 형식으로 나타나는데 여기서 "test"는 15번 설명에서 입력한 "모듈 아이디 생성" 항목의 "test" 이다. 또한 창제목의 "게시판연습"은 "메뉴 이름" 항목에서 입력한 값이다. 만약 또 다른 게시판을 생성 운영하고 싶다면 14번 설명으로 돌아가 "메뉴 추가"를 클릭한 후 15번 설명에서 "메뉴 이름"과 "모듈 아이디 생성" 항목을 새로운 값으로 입력하면 원하는 만큼의 게시판을 생성 운영할 수 있다.

1. XpressEngine을 다운로드하기 위해 공식 사이트(http://www.xpressengine.com)에 접속한 후 "XE Core 1.5.1" 이미지를 클릭한다. (글 작성당시의 최신 버전은 1.5.1.13 이다.)



2. XE Core "다룬로드" 이미지를 클릭한 후 적당한 곳에 다운로드 파일을 저장하고 "알집" 등을 이용 압축을 푼다.



3. 이제 압축이 풀린 "xe" 폴더를 웹서버에 올리기 위해 "FileZilla" 등과 같은 FTP Client 프로그램을 실행한 후 서버에 접속한다.



4. 로컬컴퓨터(화면의 좌측)의 "xe" 폴더를 서버(화면의 우측)의 웹디렉터리(public_html)에 업로드한다.



5. 업로드가 끝나면 DB 및 사이트 설정을 위해 브라우저로 업로드한 XE 사이트로 접속한다. 그러면 아래와 같은 화면이 나타나는데 여기서 "LGPL v2" 항목에 체크한 후 "라이센스에 동의합니다"를 클릭한다.



6. 설치조건 확인 화면에서 "퍼미션" 항목이 "불가능"이라고 출력되면 서버의 "xe" 폴더에 웹서버가 쓰기권한이 없기 때문이다. 이런 경우 "FileZilla" 등을 통해 "xe" 폴더의 권한을 777로 변경해야 한다. 만약 아래와 같은 화면이 아니고 모두 가능인 경우에는  9번 설명으로 넘어간다.
 


7. "FileZilla" 등을 이용 서버의 "xe" 폴더 권한을 "777"로 변경하기 위해 "xe" 폴더에서 오른쪽 클릭을 통해 "파일 권한" 항목을 선택한다.



8. 파일속성 바꾸기 창에서 숫자값을 "777"로 변경하여 모든 권한을 부여한다.



9. 위 과정을 거쳐 아래 화면과 같이 모든 항목이 "가능" 상태로 표시되면 이제 XpressEngine 설치의 기본 조건이 충족된 것이다. 이제 "설치를 진행합니다."를 클릭한다.



10. 사용할 데이터베이스를 선택한다. 여기서는 mysql을 선택하였다.
 


11. 자신에게 주어진 MySQL 계정 정보를 올바르게 입력한 후 "다음"을 클릭한다.
 


12. "환경설정" 화면에서 "짧은 주소 사용"을 원치 않으면 체크를 해제한 후 "다음"을 클릭한다.



13. XpressEngine 운영을 위한 관리자 정보를 입력한 후 "완료"를 클릭한다.



14. 다음과 같은 화면이 나오면 XpressEngine이 올바르게 설치된 것이다. 이제 13 항목에서 입력한 관리자 정보로 로그인 한 후 테마 또는 모듈프로그램 등을 설치하여 XE를 이용한 사이트를 꾸미고 운영해 보자. 

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. 아래 화면은 "카인드가이" 레이아웃이 적용된 게시판 화면을 보여준다.