메뉴 건너뛰기

XE Guidebook

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

앞 시간에서 잠깐 언급한 바와 같이 XE에서 웹페이지의 제작은 한마디로 레이아웃과 콘텐츠 모듈의 조합으로 이루어진다고 할 수 있다. 콘텐츠 모듈 들은 곧 레이아웃의 콘텐츠 영역에 출력되기 때문에 결국 웹페이지는 레이아웃의 전체 구조와 콘텐츠가 조화롭게 구성되고 레이아웃에 의하여 멋지게 장식될 때 비로소 하나의 웹페이지는 완성판으로 탄생되어지는 것이다.
 
따라서 페이지 모듈 자체를 콘텐츠로 멋지게 제작하는 것 뿐만 아니라 이를 장식해 주는 레이아웃의 편집 수정 작업도 그만큼 더욱 중요해진다. 이를 위하여 XE의 레이아웃 개발자들은 레이아웃에 많은 옵션항목을 제공함으로써 보다 편리하게 사용자들이 커스터마이징할 수 있도록 하고 있으나, 이마저도 성에 차지 않는 사용자들을 위하여 XE에서는 직접 레이아웃을 편집 수정할 수 있는 레이아웃 편집 툴까지 제공하고 있다.
 
이번 강의 시간에는 먼저 XE에서 제공한 기본 레이아웃을 가지고, 레이아웃 자체의 옵션들을 적당하게 설정함으로써 페이지 모듈과 어울리게 레이아웃을 꾸미는 실습을 하도록 하고, 각자가 선택한 레이아웃의 옵션 설정 방법은 해당 레이아웃의 매뉴얼을 참조하여 사용법을 스스로 익히도록 하자. 그리고 위젯코드를 생성하여 레이아웃 구조 안에 집어 넣음으로써 레이아웃을 직접 편집 수정하는 방법에 대해서도 간단히 배워 보도록 하자.
 
그런데 레이아웃의 편집 기능을 이용하여 레이아웃을 수정하는 것은 웹프로그래밍 지식이 어느 정도 뒷받침되어야 하므로, 실전에서는 반드시 HTML과 CSS 공부를 마치신 분들에 한하여 이 기능을 사용하기를 권장한다. 그리고 자기 스스로 레이아웃까지 만들어 보고 싶으신 분들은 "XE로 나만의 레이아웃만들기" 특별강좌에 참여하게 되면 어떠한 레이아웃도 내 맘대로 만들 수 있는 능력을 충분히 갖출 수 있으리라 장담한다.
 
 
레이아웃 옵션 설정을 통한 페이지 꾸미기
 
XE로 웹페이지를 만들 때 페이지 모듈은 자기가 직접 만든 콘텐츠로 하나하나 채워서 만들어야 하지만, XE에서 제공한 기본 레이아웃이나 3rd Party가 개발하여 배포한 레이아웃들은 사용자가 레이아웃을 편리하게 사용할 수 있도록 많은 옵션 설정 기능을 제공하고 있다. 따라서 사용자들은 맘에 드는 레이아웃을 XE자료실에서 다운로드하여 설치하고, 옵션만 적당하게 설정하게 되면 아주 멋진 웹사이트를 완성할 수 있게 되는 것이다.
 
추가 설치한 레이아웃의 컨셉이 자기가 만들고 싶어하는 사이트의 운영 목적과 얼마나 잘 부합되고, 제공된 옵션 설정 기능이 얼마나 많으냐에 따라 웹사이트의 구축은 좀더 쉬워지고 좀더 원하는 대로 사이트를 만들 수 있지만, 남이 만들어 놓은 레이아웃을 그냥 가져와 옵션 설정 기능만으로는 완벽하게 자기가 원하는 대로 사이트를 만드는 데는 한계가 따른다는 것을 분명히 알고서, 먼저 XE에서 제공한 기본 레이아웃을 가지고 옵션 설정하는 방법에 대해서 간단히 살펴보도록 하자.
 
아래 그림에서 보는 바와 같이 www.xeguidebook.com 사이트의 초기화면 페이지는 XE에서 제공한 기본 레이아웃(default)을 그대로 사용하였기 때문에, 레이아웃의 이미지 부분이 사이트의 내용과는 당연히 맞지 않게 된다. 다음과 같은 절차를 거쳐 레이아웃의 옵션 설정을 바꾸어 줌으로써 사이트의 콘텐츠 구성 내용과 어울리게 페이지 수정작업을 하도록 하자.
 
☞ 레이아웃 설정하기와 바꾸기 참조 

0-10-1-1 레이아웃 설정하기.jpg

- XE Admin에서 "[고급] > [설치된 레이아웃]"을 클릭한 다음, default 레이아웃의 복사 버튼을 누른다.

0-10-1-2 default 레이아웃.jpg

- 레이아웃 복사 창에서 새 제목(XE for yourself)을 입력하고 "저장" 버튼을 누른다.

0-10-1-3 default 레이아웃 복사.jpg

- 사이트의 초기화면에서 "설정" 버튼을 클릭하여 "페이지 관리" 화면을 연다.
  모듈정보 탭의 레이아웃 선택 박스에서 "XE for yourself"을 선택한 후 "저장"한다.

0-10-1-4 초기화면 레이아웃 변경.jpg

- XE Admin "설치된 레이아웃" 화면에서 "XE for yourself"의 "설정"을 클릭한다.

0-10-1-5 레이아웃 옵션 설정.jpg

- 설치된 레이아웃 설정화면이 열리면 다음과 같이 옵션 설정을 하고 "저장" 버튼을 클릭한다.
ㆍ헤더 스트립트 입력 : 헤더부분 최상단에 출력되며 HTML 코드로 작성해도 된다.
  → HTML 태그를 이용하여 움직이는 글자를 헤더 최상단에 출력되도록 하였다.
  ( 헤더 스크립트 ) 
     <div style="text-align:center">
     <marquee  width="960" behavior="alternate" scrollAmount="5" >
     <span style="color:#ff6600">XE Guidebook</span> 방문을 환영합니다!!!
     </marquee>
     </div>
ㆍ사이트 로고 이미지 등록 : 이미지 로고를 등록하면 "사이트 로고 문자"가 대체되어 출력된다.
  → 이미지 로고를 만들어 등록한다.
ㆍ비주얼 이미지와 텍스트 사용 : 비주얼 이미지와 텍스트를 등록하면 레이아웃의 이미지 영역이 변경된다.
  → 비주얼 이미지 3장을 준비하여 등록한다.
  → 각각의 비주얼 텍스트는 HTML을 이용하여 다음과 같이 꾸며 보았다. 
  ( 비주얼 텍스트 1 )
     <span style="font-size:30px;">XE 초보자를 위한 최강의 지침서</span></br></br>
     <marquee width="600" behavior="alternate" scrollAmount="7" >
     <span style="color:#ff6600;">XE 사용자 매뉴얼</span>
     </marquee> 
  ( 비주얼 텍스트 2 ) 
     <span style="color:#0066ff; font-size:32px;">XE로 나만의 레이아웃 만들기</span></br>
     <marquee direction="up" height="250" behavior="alternate" scrollAmount="7" >
     <span style="color:#d102e9;">XE - 4Uself</span>
     </marquee> 
  ( 비주얼 텍스트 3 )
     </br>
     <span style="color:#f906da;">웹 프로그래밍의 기초</span></br></br>
     <marquee width="900" scrollAmount="9" >
     <span style="color:#666; font-size:32px;">HTML5, CSS3, JavaScript, JQuery, Php</span>
     </marquee>
 
  → 각각의 이미지를 클릭시 이동할 링크 주소를 입력한다. 
ㆍ사이트 풋터 문자 : 사이트 왼쪽 하단에 출력될 텍스트를 입력한다.  
  → HTML을 이용하여 풋터 문자를 다음과 같이 꾸며 보았다.
     <span style="color:#ff6600; font-size:18px; font-weight:bold; ">XE Guidebook</span>

0-10-1-6 레이아웃 상세 설정하기.jpg

- 사이트의 초기화면을 열면 다음 그림과 같이 레이아웃이 바뀌어 졌음을 볼 수 있을 것이다.

0-10-1-7 초기화면 레이아웃 설정 완료.jpg

※ 각각의 비주얼 이미지와 텍스트는 next bar를 클릭하여 볼 수 있으며,
   텍스트의 입력은 HTML과 CSS를 이용하여 꾸몄기 때문에, 따로이 공부하고 난 후에 수정하면 된다.
 
이제 앞에서 배운 것과 똑같은 요령으로 "XE 사용자 매뉴얼" 페이지의 레이아웃도 적당하게 수정해 보도록 하자
 
 
- XE Admin에서 "[고급] > [설치된 레이아웃]"을 열고, "XE 사용자 매뉴얼 layout"의 "설정" 버튼을 클릭한다.
 
앞에서 배운 바와 같이 초기화면 레이아웃 바꾸기와 옵션 설정하는 방법과 동일한 요령으로, 이제 나머지 페이지들에 대해서도 필요한 레이아웃을 복사 생성하여 옵션 설정을 적절히 하게 되면 사이트 만들기 작업은 끝이 난다.
사이트에서 "XE 사용자 매뉴얼" 화면을 열면 아래 그림과 같이 보일 것이다.

0-10-1-8 레이아웃 서브형 설정 하기.jpg

- 설치된 "XE 사용자 매뉴얼 layout" 설정 화면에서 아래와 같이 옵션을 설정하고 "저장"한다.
ㆍ사이트 로고 이미지 등록
ㆍ레이아웃 유형 : Sub Page(2Column=GNB+LNB+Content)  선택
ㆍ비주얼 이미지와 텍스트 사용 : 비주얼 이미지1과 텍스트1을 등록.
  ☞ 비주얼 텍스트1 : <span style="color:#999;">XE 최고의 사용자가 되는 지름길로 안내하겠습니다.</span>
ㆍ사이트 풋터 문자 : 사이트 왼쪽 하단에 출력될 텍스트를 입력.  

0-10-1-9 레이아웃 서브형 설정 완료.jpg

● 레이아웃 편집을 통한 페이지 꾸미기
 
XE에서는 사용자가 사용하는 레이아웃의 각종 옵션을 설정함으로써 페이지 꾸미기를 할 수 있을 뿐만 아니라, 레이아웃 편집창에서 직접 HTML 소스를 편집 수정함으로써 레이아웃의 구조와 표현을 자유롭게 변경시켜 가며, 페이지 꾸미기를 맘대로 할 수 있도록 하고 있다.
 
이는 HTML과 CSS 지식이 충분하고, 웹프로그래밍에 대한 기초지식이 있어야 함은 물론이다. 때문에 이번 강의는 지난 시간에 배운 위젯 사용하는 법을 활용하여 레이아웃 편집이 어떻게 이루어 지는지를 실례를 통하여 간단히 알아 보는 시간이 될 것이며, HTML은 가벼운 마음으로 접하여 최대한 페이지 꾸미기에 활용해 보도록 하자.
 
 
▶ 레이아웃에 방문자 카운터 위젯 달기
 
앞 시간에 초기화면 페이지 꾸미기를 실습하면서, "기본 카운터 위젯"을 이용하여 페이지 내에 웹카운터를 추가하는 방법을 공부하였다. 이번에는 "기본 카운터 위젯"의 코드를 생성하여 레이아웃 구조 내에 웹카운터를 삽입시키는 방법을 알아보기로 하자.

- XE Admin 메뉴에서 "[고급] > [설치된 레이아웃]"을 클릭한다.
- [커뮤니티] 메뉴 들의 레이아웃으로 사용하고 있는 레이아웃 이름 "XE 공식 사이트 레이아웃"을 클릭한다.

0-10-2-1 XE 공식레이아웃.jpg

 
- 생성된 레이아웃 "커뮤니티"의 "편집" 버튼을 클릭한다.

0-10-2-2 XE 공식레이아웃 편집.jpg

- HTML 편집창에서 기본 카운터 위젯을 삽입할 부분에, 클래스 이름이 community_counter라는 DIV 엘리먼트를 만든다.

0-10-2-3 XE 공식레이아웃 HTML 편집.jpg

- HTML 편집창 하단에 있는 "기본 카운터 위젯"을 클릭한다.
- 설치된 위젯 "기본 카운터 위젯" 코드생성 창에서 "기본카운터 스킨"을 선택한 후 "코드생성" 버튼을 클릭한다.

0-10-2-4 기본카운터위젯 코드생성.jpg

- 생성된 "기본 카운터 위젯"의 코드를 복사한(Ctrl+C) 후,
  레이아웃 HTML 편집창의 앞에서 만든 DIV 엘리먼트 안에 복사한 코드를 붙여넣기(Ctrl+V) 한다.

0-10-2-5 위젯코드 붙여넣기.jpg

- "미리보기" 버튼을 클릭하여 기본 카운터 위젯이 제대로 생성되었는지를 확인한다.

0-10-2-6 기본 카운터 위젯 미리보기.jpg

- 카운터의 위치가 사이드바에 너무 붙어 있으므로, CSS 창에서 아래와 같이 작성하여 여백의 속성값을 조정한다.

0-10-2-7 기본 카운터 CSS 작성.jpg

- 다시 "미리보기"를 하여 원하는 위치에 위젯이 제대로 생성 되었으면 "저장"한다. 

0-10-2-8 기본 카운터 위젯 생성 완료.jpg

※ 만약 기본 카운터 위젯이 동작하지 않을 경우에는 애드온 설정을 확인해 보도록 한다. 애드온 설정에서 "기본 카운터 애드온"이 체크되어 있지 않으면 기본 카운터 위젯이 작동하지 않으며, 체크 표시 후에 "저장"한 다음, "캐시파일 재생성"을 눌러 준다.

0-10-2-9 기본 카운터 애드온 설정.jpg

▶ 언어선택 위젯 생성과 다국어 사용하기
 
언어선택 위젯은 웹사이트를 복수의 언어로 운영하고자 할 때 유용하게 사용할 수 있는 위젯으로, "언어 선택" 토글 버튼을 클릭하여 사용할 언어를 선택하면, 사이트의 주요 모듈과 위젯, 메뉴 등의 언어를 선택한 언어로 바꾸어 표시해 주는 기능을 한다.
 
그러나 언어선택 위젯은 게시판 모듈이나 페이지 모듈에 직접 작성된 내용에 대해서는 선택한 언어로 변경시켜 주는 것은 아니다. XE 코어, 모듈, 위젯, 애드온 등의 프로그램은 내부에 언어팩을 사용하고 있기 때문에, 언어선택 기능은 주로 "사이트 메뉴 편집"에서 사용되어 진다고 보면 좋을 것이다. 
 
 
【 언어선택 위젯 레이아웃에 삽입하기 】
 
- XE Admin 관리자 메뉴에서 "[고급] > [설치된 레이아웃]"을 클릭한다.
- 설치된 레이아웃에서 "기본 레이아웃"을 클릭한 다음,
  초기화면의 레이아웃으로 사용하고 있는 "XE for yourself"의 "편집" 버튼을 클릭한다.  

0-10-3-1 언어선택 위젯 기본 레이아웃에 넣기.jpg

- HTML 편집창에서 언어선택 위젯을 넣을 위치에, 클래스 이름이 "language-select"라는 DIV 엘리먼트를 만든다.

0-10-3-2 레이아웃 편집창.jpg

- HTML 편집창 하단에 있는 "언어선택" 위젯을 클릭하여 "언어선택 코드생성" 창이 열리면,
  스킨 : 언어 출력(default), 컬러셋 : 하얀색(기본)을 선택한 후 "코드생성" 버튼을 클릭한다.

0-10-3-3 언어선택 위젯 코드생성.jpg


- 생성된 "언어선택"의 위젯 코드를 복사한(Ctrl+C) 후,
  레이아웃 HTML 편집창에서 만들어 놓은 DIV 엘리먼트 안에 복사한 코드를 붙여넣기(Ctrl+V) 한다.

- "미리보기" 버튼을 클릭하여 언어선택 위젯이 제대로 생성되었는지를 확인하고,
  위젯을 적당한 위치에 오도록 CSS 창에서 스타일 설정을 하여 위치조정을 한다.

0-10-3-4 CSS 설정.jpg

- 위젯이 원하는 위치에 제대로 생성 되었으면 "저장" 버튼을 클릭하여 저장한다. 

- 웹사이트의 초기화면으로 돌아와 보면 통합검색 창 바로 아래에 "언어선택" 위젯이 설치되어 있다.

0-10-3-5 언어선택 위젯 생성 완료.jpg

- 언어선택 버튼을 클릭하여 언어를 "English"로 선택하면, 아래 그림과 같이 버튼의 이름이 영어로 바뀌어진다. 

0-10-3-6 언어선택 위젯 영어 선택.jpg

【 메뉴를 영어로 나타내기 】
 
언어선택 위젯을 이용하면 XE에서는 메뉴의 이름에 대해서 다국어 언어지원이 된다. 영어뿐만 아니라 다른 외국어도 사용하고 싶다면 앞에서 배운 바와 같이 XE Admin "[설정] > [일반]"에서 "기본" 항목의 "지원언어"를 원하는 언어로 다중 선택하면 된다.

0-10-3-7 지원언어 선택.jpg

- XE Admin "[사이트 제작/편집] > [사이트 메뉴 편집]"을 연다.
- 메뉴를 선택한 후, 메뉴수정을 클릭하고 메뉴수정 창에서 메뉴이름에 있는 "다국어텍스트설정" 버튼을 클릭한다.   

0-10-3-8 메뉴수정 언어 설정.jpg

- 한국어와 영어 언어 세트를 입력하고 "저장 후 사용" 버튼을 클릭한다.

0-10-3-9 다국어 언어세트 저장.jpg

- 동일한 요령으로 각각의 메뉴에 해당하는 다국어 언어 세트를 완성한다.

0-10-3-10 다국어 언어세트 검색.jpg

- 모든 메뉴 이름에 다국어 텍스트를 설정하고 "확인" 버튼을 클릭한다.
  다국어 텍스트 설정이 제대로 되면 국가 표시 아이콘과 다국어 텍스트 해제 버튼이 표시된다.

0-10-3-11 다국어 텍스트 설정.jpg

- 웹사이트의 초기화면으로 돌아와, 언어선택 버튼을 눌러 English를 선택하면 메인 메뉴가 영어로 표시된다.

0-10-3-12 다국어 사용하기.jpg

이상으로 2회에 걸쳐 진행한 페이지 꾸미기 강의를 모두 마치겠습니다. 위젯의 활용과 레이아웃 바꾸기 및 상세 설정을 통하여 웹사이트가 비로소 모습을 갖추고 어느 정도 볼만하게 되었습니다. 그런데 레이아웃 옵션 설정 시와 레이아웃 편집 창을 이용하여 레이아웃을 제대로 수정하기 위해서는 HTML과 CSS 지식을 많이 필요로 한다는 것을 알았을 것입니다.
 
본 사이트에서 마련한 HTML 강좌와 CSS 강좌를 이용하여 최소한의 웹프로그래밍 지식을 갖춘 다음에 레이아웃 편집 기능은 사용하는 것이 좋으며, 향후에도 보다 적극적으로 사이트를 개진하고, 유지 보수도 직접 해 가면서 사이트를 운영하고자 한다면 기본 웹프로그래밍 지식의 습득은 필수적이 되며, 포토샵으로 이미지를 좀 다룰 수 있는 기초 능력도 필요하게 됩니다.
 
나만의 레이아웃을 직접 만들어 보고 싶거나 웹프로그래밍에 대해 관심이 많으신 분들은 HTML과 CSS 강좌를 마스터한 후, JavaScript와 JQuery에 대해서도 상당한 공부를 해야 할 것입니다. 이어서 레이아웃을 직접 만들어 보는 실습 중심의 특별 강좌 "XE 나만의 레이아웃 만들기"에 참여하게 되면, 마침내 "XE 혼자 힘으로 내 사이트 만들기" 꿈을 완벽하게 실현하는 기쁨과 보람을 얻게 될 것입니다.
그럼 다음 시간에 또 뵙겠습니다.