메뉴 건너뛰기

XE Guidebook

사이트 만들기
2014.08.03 19:57

5-09 페이지 꾸미기 - 위젯 사용하기

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

 

방문자가 사이트에 접속했을 때 제일 먼저 접하게 되는 시작 모듈인 홈페이지 화면은, 웹사이트 운영의 성공과 실패를 가름 짓는 가장 중요한 페이지라고 해도 과언이 아닐 것이다.
 
따라서 초기화면 만들기는 방문자로 하여금 사이트의 전체적인 콘텐츠 구성을 한눈에 알 수 있도록 최근 글, 최근 댓글, 이미지 등의 목록을 동적으로 보기 좋게 배치함과 동시에, 중요한 콘텐츠나 강조하고 싶은 내용에 대해서는 아주 편리하게 다시 찾아 볼 수 있도록 페이지를 만들어야 하는데, XE에서는 이에 대응하기 위하여 "위젯페이지" 모듈이라는 강력한 도구를 제공하고 있다. 
 
물론 한 페이지 내의 콘텐츠 구성은 전체적인 레이아웃과의 조화도 당연히 고려하여, 사이트의 운영 목적에 잘 어울리고 가장 효과적으로 콘텐츠를 표현해 줄 수 있는 자기만의 레이아웃 만들기와 병행하는 것이 좋겠지만, 일단 이번 시간에는 주어진(설치된) 레이아웃 하에서 위젯페이지를 이용하여 초기화면을 꾸미는 방법에 대하여 자세히 알아보기로 하자.
 
 
● 위젯 페이지와 위젯의 개념 
 
앞 시간에 페이지 모듈을 다루면서 위젯페이지의 생성과 사용하는 법에 대하여 간략히 알아 본 바와 같이, 대개 시작 초기화면을 만들 때 많이 쓰여지는 "위젯 페이지"는 HTML 태그를 잘 모르고 웹지식이 없더라도 XE에서 제공하는 위지윅 에디터와 각종 위젯들만 잘 사용하게 되면 멋진 페이지를 꾸밀 수 있게 하는 모듈이라 할 수 있다. 
 
이번 시간에는 "위젯 페이지"를 만드는데 사용되는 필수 도구인 위젯에 대해 좀더 자세히 알아 보고, 주요 기본 위젯들을 사용하여 페이지를 꾸며 보는 실습 시간을 가지도록 할 것이다. 위젯은 한 번만 사용해보면 어떠한 위젯이라 하더라도 사용법이 같기 때문에 그 다음에는 별 애로사항 없이 아무 위젯이나 쉽게 사용할 수 있을 것이다.
 
XE 공식자료실에 배포되어 있는 수많은 위젯 들의 기능과 사용 용도를 정확히 알고 적절히 사용하기 위해서는, 하나하나 설치하여 사용 테스트를 해 보면서 무수한 시행착오와 실전적인 연습을 통해서 스스로 익히는 수 밖에 없다. 톡톡 튀는 아이디어와 재치를 마음껏 발휘하여 개성있는 페이지 구성과 꾸미기에 최대한 활용하도록 하자.
 
아울러 페이지 만들기는 창작과 예술적 감각이 가장 빛을 발하는 작업 영역이며, 원하는 페이지의 완성도는 전적으로 사용자의 디자인적인 감각과 창의력에 달려 있다고 할 수 있다. 잘 만들어진 남의 웹사이트를 보고 어떻게 하면 나도 만들 수 있을까 하는 구현 방법에 대한 끊임없는 연구와 따라서 만들어 보기가 독창성과 응용력을 길러 주는데 많은 도움을 줄 것이다.
 
아무튼 이 강의에서는 중요한 위젯의 기본적인 사용 방법과 위젯페이지 꾸미는 방법만 설명하고, 수 없이 많은 위젯들의 사용 용도와 기능, 위젯의 세부적인 옵션의 설정 및 사용법, 자기만의 개성이 살아 있는 멋진 위젯 페이지 만들기와 꾸미기는 각자의 창의적인 호기심과 응용력 및 부단한 노력의 몫으로 남겨 둔다.
 
 
▶ 위젯(widget)의 의의
 
사전적 의미로 작은 부품이나 소형장치를 뜻하는 위젯이란, PC에서 웹브라우저를 대신하여 개인적으로 자주 사용되는 작은 프로그램을 띄워 주는 역할을 하는 소프트웨어를 말하며, 일반적으로 달력, 메신저, 날씨 등의 위젯이 많이 사용 되고 있다.
 
XE Core에서 위젯이란 데이터를 입출력하고 실행하는 모듈 프로그램이 아닌, 사용자의 요청에 응답하여 DB에 저장된 내용을 조회하여 정리하고 목록을 만들어 화면에 출력하는 작은 프로그램 단위를 말한다. 즉 새로운 글이나 내용을 등록(Insert)하고 수정(Update)하는 일이 아니라, 이미 DB에 저장되어 있는 게시물의 제목이나, 이미지, 글의 내용 등을 사용자가 원하는 모양과 테마로 정리하여 보여 주는 일을 하는 소형의 프로그램이다.
 
대표적인 XE의 위젯에는 게시판에 게시된 글의 제목이나 내용, 댓글, 이미지, 첨부파일 등을 사용자의 요청에 따라 원하는 갯수와 크기 만큼, 순서를 정리하여 보여 주는 "콘텐츠 위젯"이 있으며, 사이트에 접속하는 방문자의 현황을 보여주는 기본 카운터 위젯 등이 있다.
 
 
▶ 설치된 위젯과 위젯의 추가 설치 
 
XE Admin 관리자 메뉴의 "[고급] > [설치된 위젯]" 메뉴에서는 XE Core 설치와 함께 기본적으로 제공되는 기본 위젯과 사용자의 필요로 추가 설치한 위젯들의 목록을 관리해 주며, 각 위젯의 코드생성 작업을 할 수 있다.
 
 
【 XE 제공 기본 위젯 】
 
- 콘텐츠(Content) 위젯
- 기본 카운터 위젯
- 언어 선택 위젯
- 로그인 정보 출력 위젯
- 모바일 콘텐츠 위젯
 
【 위젯 추가 설치 】
 
기본 위젯 외에 필요로 하는 위젯은 XE 공식자료실에서 다운로드한 위젯 파일을 서버의 해당 디렉터리에 업로드하거나, "쉬운설치" 기능을 이용하여 추가로 설치, 사용하면 된다.
 
 
● 콘텐츠 위젯을 이용한 페이지 꾸미기
 
위젯페이지 꾸미기 실습을 하려면 먼저 그동안 생각하고 원하는 웹사이트의 페이지 기획서를 준비해 놓아야 한다. 앞서 배운 바 있는 사이트 기획서인 "스토리보드"와 함께, 초기 화면 페이지 구성을 어떻게 만들 것인지 하는 좀 구체적이고도 사이트 목적에 맞는 컨셉으로 이루어진 페이지 기획안이 필요한 것이다. 스토리 보드를 만들면서 동시에 초기화면 페이지 기획서도 함께 만드는 것이 좋을 것이며, 페이지 모듈을 사용한 페이지는 모두 개략적이나마 페이지 기획안을 가지고 있어야 사이트 만들기가 용이할 것이다.
 
그리고 기획하여 만들어 놓은 게시판에는 그 동안 준비해 놓은 콘텐츠가 있다면 게시물을 등록하는 작업이 선행되어야 한다. 만약 게시판의 콘텐츠가 방문자가 작성한 게시물로 채워지는 커뮤니티용 웹페이지라면 테스트용으로 게시물을 수 십개 작성하여 등록시켜 놓고 페이지 꾸미기 실습을 하도록 하자.
 
 
▶ 콘텐츠 위젯 코드생성과 아이콘 사용하기
 
지난 시간 위젯 페이지를 배우면서 간단히 콘텐츠 위젯을 생성하여 사용해 보았다.

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

 

XE Core에서 최근 게시물을 가져오는 기능을 담당하는 Content 위젯은 여러 가지 옵션의 조합으로 다양한 목록을 구성할 수 있으며, 초기화면 페이지 꾸미기에 필요한 최근 글 뿐 아니라 최근 댓글, 최근 이미지의 목록을 만들어 동적으로 구성할 수 있다. 주로 초기화면 페이지에서 많이 사용되지만, 사이트 내 필요한 위치에 다양한 방법으로 활용하여 방문자에게 콘텐츠 접근성을 편리하게 제공하는 역할을 하는 아주 유용한 위젯이다. 

0-9-1 위젯페이지에 생성된 콘텐츠 위젯.jpg

  

【 위젯 설정 아이콘 】 

생성된 위젯 위에 마우스를 올리면 나타나는 위젯 아이콘은 다음과 같은 작업을 할 수 있다.

0-9-3-1 위젯 아이콘-설정.jpg  설정 : 위젯 코드생성 시 옵션을 수정할 때 사용한다.

0-9-3-2 위젯 아이콘-위젯크기.jpg  위젯 크기 : 위젯의 정렬방식, 크기, 테두리와 배경색상, 배경 이미지의 속성을 설정할 때 사용한다.

0-9-3-3 위젯 아이콘-위젯스타일.jpg  위젯 스타일 : 위젯 목록의 제목을 꾸밀 때 사용한다.

0-9-3-4 위젯 아이콘-복사.jpg  복사 : 위젯을 복사할 때 사용한다(설정된 옵션 포함됨)

0-9-3-5 위젯 아이콘-삭제.jpg  삭제 : 위젯을 삭제할 때 사용한다.

     

【 위젯 코드생성 하기 】

콘텐츠 위젯의 최근 게시물 가져오기는 동시다발적으로 수도 없이 게시되고 쌓여지는 콘텐츠를 최근에 생성된 시간 순서로 제공함으로써, 최신의 정보를 방문자들에게 가장 빠르게 제공하고 공유시키는 인터넷의 특성을 가장 잘 살려 주는 역할을 한다. 특히 수 많은 방문자가 접속하여 서로의 정보를 나누는 게시판형 커뮤니티 사이트에서 없어서는 안될 아주 유용한 콘텐츠 제공 기능이라 할 수 있다.
 
지난 시간에 한번 사용해 본 적이 있는 콘텐츠 위젯에 대해 이번 시간에는 주요한 기능과 옵션 설정 방법을 하나하나 구체적으로 공부하면서, 위젯코드 생성하는 방법과 초기화면 꾸미기 진도를 좀 더 깊이 나가 보도록 하자.
 
[커뮤니티] 메뉴 하위에 있는 "자유게시판", "Web / IT 상식", "Web / IT Q&A" 게시판에 게시된 글들을 대상으로, 초기화면 페이지에 "콘텐츠 위젯"을 사용하여 최근 게시글과 댓글을 가져 오는 위젯을 생성하여 배치하는 실습을 할 것이다.
 
- 초기화면 페이지에서 "페이지 수정" 버튼을 클릭한다.
- 새로운 콘텐츠 위젯을 하나 만들기 위해 선택 상자에서 "콘텐츠 위젯"을 선택하고 추가 버튼을 클릭한다.

0-9-4-1 위젯 페이지 열기.jpg

- Content 위젯 코드생성 대화상자가 열리면, 다음과 같은 요령으로 필요한 옵션을 설정한다.

0-9-4-2 위젯 코드생성 대화상자.jpg

→ 스킨 : Content 위젯 기본스킨(default)를 선택하고 "선택" 버튼을 클릭한다.
→ 스킨을 선택하면 컬러셋 선택 박스가 보이고 원하는 컬러셋을 선택한다.

0-9-4-3 위젯 스킨과 컬러셋 설정.jpg

ㆍ추출 대상
 
→ 추출 대상 : "게시물"을 선택한다.

0-9-4-4 추출 대상 설정.jpg

→ 대상 페이지 : 최근 게시글을 불러 올 대상 페이지를 선택하기 위해 "추가" 버튼을 클릭한다.

0-9-4-5 대상 페이지 선택.jpg

→ 대상 메뉴 선택 화면에서 최근 게시물을 가져올 대상 메뉴로 "자유게시판"을 선택하고 "확인" 버튼을 클릭한다. 

0-9-4-6 대상 메뉴 선택.jpg

→ 이어 "추가" 버튼을 클릭하여 대상 메뉴 선택 화면에서 "Web / IT 상식"을 선택하여 추가하고
   동일한 요령으로 "Web / IT Q&A" 게시판도 대상페이지에 추가한다.

0-9-4-7 대상 페이지 선택 완료.jpg

→ 내용형태 선택 : 위젯에 출력될 내용을 선택한다.

0-9-4-8 내용 형태 선택.jpg

→ 탭형태 : 2개 이상의 게시판에서 게시물을 가져올 경우, 게시판 이름을 탭으로 구성할 수 있다.
   ☞ 탭형태로 최근 게시물 가져오기 참조

→ HTML 출력 방식 : 위젯 내용을 TABLE(표)태그와 UL(목록형) 태그를 선택하여 출력하게 할 수 있다.
→ 목록수 : 출력될 목록의 수를 10으로 지정한다. 미지정시 기본 5개가 출력된다.
→ 가로 이미지 수 : 이미지를 출력시 가로로 출력될 수를 지정하면 된다,
→ 페이지 수 :  페이지 수가 2이상일 경우 이전/다음 버튼이 나타난다.
→ 제목 글자수 : 출력되는 제목의 글자 수를 지정한다. 미지정시 제목 전체가 출력된다.
→ 내용 글자수 : 출력되는 내용의 글자수를 지정한다.
→ 닉네임 글자수 : 닉네임의 글자수를 지정한다.
→ 링크 : 출력되는 목록의 링크 화면을 보여 주는 방식을 선택한다.

0-9-4-9 추출대상 나머지 항목 설정.jpg

ㆍ목록 상세 설정
 
→ 표시항목 및 순서 : 위젯에 출력될 항목과 순서를 설정한다.
→ 게시판 이름 표시 : 최근 게시글을 가져 올 게시판 이름을 출력할 수 있다.
→ 댓글수 :  해당 게시글에 달린 댓글 수의 출력 여부를 선택한다.
→ 엮인글수 표시 :  해당 게시글과 엮인글 수의 출력 여부를 선택한다.
→ 분류 표시 : 게시판 분류 기능을 사용시 분류명의 출력 여부를 선택한다.
→ 아이콘 표시 : 첨부파일, 업데이트, new 표시 아이콘의 출력여부를 선택한다.
→ new 표시 시간 (hours) : 새로 등록된 게시물에 대하여 new 표시가 보여질 시간을 지정한다(기본 12시간).

0-9-5-1 목록 상세 설정.jpg

ㆍ정렬 설정
 
→ 정렬 대상 : 게시글이 등록된 순서 또는 변경된 순서로 정렬하여 출력할 수 있다.
→ 정렬 방법 : 정렬 대상을 내림차순 또는 오름차순으로 정렬하여 출력할 수 있다.

0-9-6-1 정렬 설정.jpg

ㆍ썸네일 설정
 
→ 썸네일 생성 방법 : 썸네일 출력시 생성 방법을 선택할 수 있다.
→ 이미지 가로 크기 : 출력될 썸네일 이미지의 가로크기를 정할 수 있다(기본 100px).
→ 이미지 세로 크기 : 출력될 썸네일 이미지의 세로크기를 정할 수 있다(기본 75px).

0-9-7-1 썸네일 설정.jpg

ㆍRSS 설정
 
피드(RSS/ATOM) 주소를 등록하려면 5개까지 등록 할 수 있다.
   ☞ RSS 피드 게시물 가져오기 참조
 
- 필요한 옵션을 적절하게 설정한 후, "코드생성" 버튼을 클릭하면 최근 게시글 가져오기 위젯이 생성된다.

0-9-9-1 최근 게시글 위젯 생성 완료.jpg

위와 동일한 방법으로 "콘텐츠 위젯"을 이용하여 최근 댓글 가져오기 위젯을 생성하여 보자. 아래와 같이 옵션을 설정하고 "코드생성" 버튼을 클릭한다.
→ 추출 대상 : "댓글"을 선택한다.
→ 대상페이지 : "자유게시판", "Web / IT 상식", "Web / IT Q&A" 선택한다.
→ 게시판 이름 :  "출력하지 않음" 선택한다.

- 위젯 페이지 수정 화면에서 우측 하단에 있는 "저장" 버튼을 클릭하여 저장한다.

0-9-9-2 최근 댓글 위젯 생성 완료.jpg

【 위젯 수정하기 】
 
이미 생성되어 있는 위젯의 옵션 사항을 변경하여 위젯을 수정하고자 할 경우에는, 위젯 "설정" 아이콘을 클릭하여 위젯을 수정할 수 있다.
 
이전 시간에 생성해 놓은 "XE 사용자 매뉴얼" 게시판에서 최근 게시물을 가져오는 콘텐츠 위젯을 수정 변경해 보기로 하자. 커뮤니티 메뉴 하위에 새로 "공지사항" 메뉴를 하나 만들고, 이 게시판에 게시되는 최근 게시글(공지사항)을 가져오는 콘텐츠 위젯으로 변경하고 싶기 때문에, 먼저 "공지사항" 메뉴를 만든 다음, 테스트 게시글을 등록해 놓아야 할 것이다.  

0-9-10-1 공지사항 게시판 생성.jpg

- "페이지 수정" 수정 화면을 열고 "XE 사용자 매뉴얼" 제목의 위젯 아이콘 중에서 "설정" 아이콘을 클릭한다.

0-9-10-2 위젯 설정 아이콘.jpg

- 대상 페이지 항목에서 "추가" 버튼 클릭 → 대상 메뉴 선택 화면에서 "공지사항"을 선택하고 "확인" 버튼을 클릭한다.

0-9-10-3 대상 메뉴 선택.jpg

- "공지사항" 메뉴가 대상 페이지에 추가되었으면 "XE 사용자 매뉴얼"은 "삭제"한다.

0-9-10-4 대상 메뉴 추가.jpg

- 다른 옵션 사항을 적절하게 수정한 후 "코드생성" 버튼을 클릭한다.
→ 페이지 수 : "3"
→ 표시항목 및 순서 : 글쓴이 "삭제"
→ 게시판 이름 :  "출력하지 않음" 선택한다.

0-9-10-5 위젯 수정 완료.jpg

【 위젯의 제목 달기와 스타일 설정 】
 
생성된 위젯의 제목을 만들고 위젯의 외관을 꾸며 주는 일은 "위젯 스타일" 아이콘을 이용하여 할 수 있다. 기존에 붙여 놓은 위젯의 제목을 변경하고, 새로 생성된 위젯에는 적당한 제목을 달아 주자.
 
- "위젯 스타일" 아이콘을 클릭한다.

0-9-11-1 위젯 스타일 아이콘.jpg

- 위젯 제목을 "XE 사용자 매뉴얼"에서 "공지사항"으로 바꾸어 준다.
   더보기 URL은 공지사항 모듈 주소로 지정한 다음, "설정"버튼을 클릭한다.

0-9-11-2 위젯 스타일 옵션 설정.jpg

- 동일한 방법으로 자유게시판의 최근 게시글 가져오기 위젯과 댓글 가져오기 위젯의 제목을 달아 준다.

0-9-11-3 위젯 스타일 제목 완료.jpg

- 위젯의 외관을 꾸밀 수 있는 다양한 종류의 위젯 스타일이 XE 공식자료실에 많이 배포 되어 있으므로,
  각자 마음에 드는 "위젯 스타일"을 추가 설치한 후, 위젯을 개성있게 꾸미도록 하자.

0-9-11-4 위젯 스타일 추가 설치.jpg

【 위젯의 크기 조정과 위치 지정 】
 
위젯은 div 태그로 표현되기 때문에 위젯의 크기나 위치를 설정하는 것은 곧 div 엘리먼트의 속성을 설정하는 것과 같다. "위젯 크기" 아이콘이 속성값을 설정하는 기능을 담당하고 있으며 위젯의 크기와 위치 등을 원하는 대로 바꾸고 배치할 수 있다.
 
- 최근 게시글 위젯에서 "위젯 크기" 아이콘을 클릭한다.

0-9-12-1 위젯 크기 아이콘.jpg

- 위젯 크기 속성값 입력창이 열리면

0-9-12-2 위젯 크기 속성값 입력창.jpg

- 아래와 같이 속성값을 입력하고 "저장"한다.
 
  위젯 크기 가로(W) : 470, 외부여백 상단(T) : 10, 오른쪽(R) : 20 설정

※ 앞에서 생성된 3개의 콘텐츠 위젯은 가로 크기가 100%이므로 가로 방향으로 꽉찬 목록을 만들어 준다. 즉 XE 기본 레이아웃에서 콘텐츠 영역의 총 가로 길이는 960 픽셀이므로 가로 크기를 960px로 지정하는 효과와 동일하게 되며, 세로 크기는 기본값이 없기 때문에 내용에 맞추어 크기가 자동으로 변하게 된다.
 
- 같은 방법으로 최근 댓글 위젯의 "위젯 크기" 아이콘을 클릭하고 아래와 같이 속성값을 입력한 후 "저장"한다.
 
  위젯 크기 가로(W) : 470, 외부여백 상단(T) : 10
 
- 최근 게시글 위젯과 최근 댓글 위젯의 크기 설정을 마쳤으면, "저장" 버튼을 클릭하여 설정 사항을 저장한다.

0-9-12-3 위젯 크기 설정 저장.jpg

※ 위젯의 코너 모퉁이를 마우스로 드래그하여 위젯의 크기를 조정할 수도 있다. 이 경우 드래그 위치에 따라 자동으로 div 엘리먼트의 가로와 세로 크기값은 픽셀값으로 고정이 된다. 위젯의 overflow 속성은 hidden으로 기본 설정되어 있기 때문에 세로 방향으로 늘어난 내용의 출력은 숨김 처리되며, 세로 크기를 고정시키게 되면 출력 내용의 양에 관계없이 항상 세로 크기를 유지할 수 있게 된다.
 
 
▶ 탭형태로 최근 게시물 가져오기
 
하나의 게시판에서 최근 게시물을 가져올 때는 게시판을 구분할 필요가 없지만, 여러 개의 게시판에서 게시글을 가져 올 때는 게시글이 실린 게시판의 이름을 출력시키거나 게시판 별로 분류하여 최근 게시물을 가져와 보여 주는 것이 방문자에게 아주 편리할 것이다.
 
탭 형태로 최근 게시물 가져오기는 콘텐츠 위젯을 생성할 때, 옵션 설정 하나만으로 간단히 만들 수 있으며, 다수의 게시판을 사용하는 게시판형 커뮤니티 사이트에서 유용하게 사용할 수 있다.
 
아래 예제는 앞서 만든 최근 게시글 위젯과 최근 댓글 위젯에서 다음과 같이 옵션을 바꾸어 설정하면 된다.
 
→ 탭형태 : 상단 탭형
→ 목록수 : 5

0-9-13 탭형태로 최근 게시물 가져오기.jpg

▶ 최근 이미지 가져오기
 
사진이나 이미지가 첨부되어 있는 게시물의 경우, 콘텐츠 위젯을 이용하여 썸네일 이미지를 최근 게시물로 가져오기하여 초기화면에서 보여 줄 수가 있다. 특히 포토갤러리나 이미지를 많이 사용한 사이트에서 초기화면을 멋지게 장식함으로써 방문자를 시각적으로 유인하는 효과가 있어 사이트 운영에 아주 유용하게 쓰여질 수 있는 기능이다.
 
아래 예제는 실습을 위하여 임의로 포토 갤러리 게시판을 하나 만들고 사진 게시물을 등록한 다음, "콘텐츠 위젯"으로 최근 이미지를 가져오는 과정을 설명한 것으로 각자는 나만의 사이트를 만들 때 이 기능을 잘 익혀 두었다가 필요시 잘 활용한다면 웹 페이지를 보다 멋지게 꾸밀 수 있을 것이다.
( XE Guidebook.com에서는 필자가 미국 좋다는 곳을 돌아 다니면서 기념으로 찍었던 사진들을 가지고 갤러리를 간단히 꾸며 보았습니다. 사이트 만들기 공부하다가 머리가 띵하고 눈이 피로할 때 한 번씩 들러 여기저기 마구마구 눌러서 스트레스도 풀고, 골치 아픈 것 좀 날려 버리시라고..ㅎㅎㅎ... 작품성에 대한 평가는 정중히 사절하겠습니다.)
 
- Photo Gallery 게시판을 만들고, 이미지를 첨부한 후 본문에 이미지가 삽입된 게시물을 10건 이상 등록한다.
- 초기화면 페이지수정 화면에서 "Content 위젯"을 "추가"한다.
- 위젯 코드생성 화면에서 아래와 같이 옵션을 설정하고 "코드생성" 버튼을 클릭한다.
→ 추출대상 : "게시물"
→ 대상 페이지 : "Photo Gallery"
→ 내용형태 : "갤러리"
→ 표시항목 및 순서 : "섬네일", "제목"
→ 게시판 이름 표시 : "출력"

 

▶ RSS 피드 게시물 가져오기
 
RSS(Really Simple Syndication)란 뉴스나 블로그 사이트에서 많이 사용하는 콘텐츠 제공 방법의 하나로, 사용자가 사이트에 방문하지 않아도 최신의 콘텐츠를 모아 RSS 문서 형식으로 전달하는 서비스이다. 즉, 사이트의 웹콘텐츠 제공자가 RSS 문서를 제공하게 되면 Content 위젯을 이용하려 최근 게시물의 목록를 만들어 출력할 수 있다.
 
RSS 피드를 제공하는 웹사이트에서는 아래 그림과 같이 RSS 아이콘과 URL 주소가 표시되며, Content 위젯을 활용하여 RSS 피드 게시물을 자신의 웹사이트에서 목록으로 만들어 출력하고자 하려면, RSS 피드 주소가 미리 준비되어 있어야 한다.
 
- RSS 피드 공개하기
 
→ RSS 피드 공개를 하고자 하는 게시판 모듈에서 "설정" 버튼을 클릭하여 "게시판관리" 페이지를 연다.
→ 게시판관리 페이지에서 "추가설정" 탭을 클릭한다.
→ "피드(Feed) 공개" 항목의 선택박스에서 "요약 공개" 혹은 "전문 공개"를 선택하고 "저장"한다.
 
- RSS 피드 가져오기
 
→ 초기화면 페이지에서 "페이지수정" 버튼을 클릭하고, "Content 위젯"을 "추가"한다. 
→ "Content 위젯 코드생성" 대화상자에서 다음과 같이 옵션을 설정하고 "코드생성" 버튼을 클릭한다
ㆍ추출대상 : "피드(RSS/ATOM)" 선택
ㆍRSS 설정 : 위에서 "피드 공개"를 하고자 하는 "게시판의 URL 주소"를 입력
 
 
- RSS 피드 게시물 가져오기 콘텐츠위젯이 제대로 생성되었으면 "저장"버튼을 눌러 생성된 위젯을 저장한다.
 
 
이상에서 살펴 본 바와 같이 Content 위젯은 세부적인 옵션 설정에 따라 다양한 스타일의 최근 게시물 목록을 만들 수 있으며, 공식자료실에서 여러 가지 위젯 스킨과 스타일을 다운로드 받아 추가 설치하게 되면 보다 멋진 웹사이트를 만들 수 있을 것이다. 하나하나 위젯 스킨과 스타일을 적용해보면서 마음에 드는 사이트를 완성시켜 가는 과정은 전적으로 창작활동의 영역이므로 끊임없는 노력에 노력을 하시길... 
 

● "내용 직접 추가" 기능을 이용한 페이지 꾸미기

위젯페이지 모듈은 위젯을 이용한 페이지 꾸미기만 할 수 있는 것이 아니라, XE에서 제공하는 위지윅에디터를 이용하여 콘텐츠를 만들고, 페이지를 맘대로 꾸밀 수가 있다. "내용 직접 추가" 버튼을 클릭하면 위지윅에디터 편집창이 열리고 위지윅에디터에는 HTML 편집기가 있어 사실상 HTML 지식만 있다면 상상하고 생각할 수 있는 그 어떤 콘텐츠의 제작도 가능하다고 말할 수 있다.
 
본 강의는 HTML 지식이 없는 사람들을 대상으로 한 XE로 나만의 사이트 만들기 강좌이므로 HTML 편집기는 사용하지 않고, 위지윅에디터의 기본 컴포넌트와 확장 컴포넌트만 가지고 페이지 꾸미기 실습을 할 것이다. HTML 편집기를 이용한 콘텐츠의 제작이나 수정 작업은 HTML 지식만 습득하면 언제든지 활용 가능하므로 각자의 능력과 노력의 몫으로 남겨 둔다.
 
▶ 효율적인 콘텐츠의 배치와 구성을 위한 상자 위젯 추가하기
 
페이지 수정화면에서 상자 위젯을 적절히 이용하면 콘텐츠의 구성과 배치를 아주 편리하게 할 수 있다. 페이지 기획안에 따라 "상자 위젯 추가" 버튼을 눌러 빈 "상자 위젯"을 추가하여 지면 분할을 하고, "내용 직접 추가" 버튼으로 생성한 위젯이나, 기존에 만들어 놓은 콘텐츠 위젯을 빈 상자 안으로 이동시켜 배치하면 전체 콘텐츠의 구성을 쉽게 조판할 수 있다.
 
- 앞에서 위젯으로 작업해 놓은 초기화면 페이지에서 "페이지 수정"버튼을 클릭한다.  

0-9-14-1 위젯페이지 꾸미기.jpg

- "페이지 수정" 화면에서 "상자 위젯 추가" 버튼을 클릭하여 빈 상자 위젯을 추가하고,
   아래 그림과 같이 적당한 크기로 조정하여 "공지사항" 위젯 바로 위로 이동시킨다. 
   ( 크기는 드래그 조절바로 조정하고, 이동은 마우스로 드래그 & 드롭하면 된다.)

0-9-14-2 상자 위젯.jpg

- "내용 직접 추가" 버튼을 클릭하여 콘텐츠 1이 들어갈 영역(위젯)을 만들어 상자 위젯 안으로 이동시킨다.  
  동일한 방법으로 콘텐츠 2, 3,, 가 들어갈 영역(위젯)을 만들고 상자 위젯 안으로 이동시켜 배치한다.
  "공지사항"을 가져오는 콘텐츠 위젯의 크기를 조정하여 아래 그림과 같이 전체적으로 위젯의 위치를 재구성한다.
  ( 당초 작성해 놓은 페이지 기획안에 따라 위젯들을 대략적으로 구성하고 배치하면 될 것이며,
    작업도중에 더 좋은 아이디어가 떠 올랐을 경우에는, 페이지 기획안을 수정해가며 작업하면 될 것이다. )

0-9-14-3 내용 직접 추가.jpg

지금부터 페이지 꾸미기는 자기가 미리 만들어 놓은 페이지 기획안을 가지고 실습에 임해야 할 것이다. 이 곳에서의 예제는 실제로 운영되는 본 사이트를 만들면서 그 과정을 설명한 것이며, 강의 내용도 주요한 기능들의 사용법에 대하여 주로 초점을 맞추어 진도가 나가기 때문에, 자기가 만들고자 하는 웹페이지의 기획안을 가지고 완전 실전과 같은 실습시간을 가지는 게 좋을 것이다.
 
 
▶ "위지윅에디터"로 콘텐츠 작성하기
 
위에서 배치한 "내용 직접 추가" 위젯 안에 실제 콘텐츠를 작성하여 내용을 채워 보도록 하자.   
먼저 "내용 직접 추가" 버튼을 이용하여 만들어 놓은 환영 메시지를 담은 내용을 아래와 같은 과정을 밟아 내용을 좀 더 의미있게 전달되도록 꾸며 보자.
 
- 페이지 수정 화면을 연 다음, 위젯 "설정" 아이콘을 클릭한다.
  "내용 직접 추가" 창에서 위지윅에디터의 기능을 이용하여 텍스트의 추가와 글자 색을 지정한 후 "저장"한다.

0-9-14-4 내용 직접 추가 수정.jpg

- "위젯 크기" 아이콘을 클릭하고, "위젯 크기" 창에서 배경색 속성값을 적당한 색상으로 설정한 후 "저장"한다.  

0-9-14-5 위젯 배경 색상 설정.jpg

- "내용 직접 추가" 위젯의 내용을 원하는 대로 완성하였으면 "저장" 버튼을 클릭하여 설정사항을 저장한다.

0-9-14-6 위젯 수정 완료.jpg

- 위에서 작업한 똑같은 방법으로 아래 그림의 "내용 직접 추가" 위젯(콘텐츠 1, 2, 3, 4)의 내용을 완성해 보자.

0-9-14-7 위젯 수정 - 강의실 만들기.jpg

- 앞서 배운 내용을 간단히 응용하게 되면, 아래 그림과 같이 "XE 강의실" 위젯의 내용이 그럴듯하게 꾸며 진다.
ㆍ"상자 위젯"의 "위젯 스타일" 아이콘을 클릭하여 위젯의 제목을 붙여 준다. 
ㆍ"내용 직접 추가" 위젯을 필요한 수만큼 복사한다.
ㆍ각각의 위젯에 제목과 내용을 입력하고 글자 크기와 색을 조정한다.
ㆍ위젯의 여백과 배경색을 적당하게 설정한다.
ㆍ기본 컴포넌트의 "특수문자"를 사용하고, "링크"를 이용하여 방문자의 콘텐츠 접근성을 용이하게 한다. 

0-9-14-8 위젯 수정 - 강의실 만들기 완료.jpg

- "콘텐츠 6" 위젯은 다음과 같이 사이트 운영정보를 알려주는 내용으로 구성해 보자.
ㆍ페이지 수정 화면에서 "콘텐츠 6" 위젯의 "설정" 아이콘을 클릭한다.
ㆍ앞에서와 동일한 요령으로 콘텐츠를 작성하고 "위젯 크기"의 속성을 설정한다.
ㆍ이미지를 삽입하려면 위지윅에디터 첨부파일 박스에서 "파일 첨부" 버튼을 클릭한다.
  → 내 컴퓨터에서 준비한 이미지를 선택한 다음, "열기" 버튼을 클릭하여 파일을 업로드한다.
  → 필요한 위치에 커서를 놓고 "본문 삽입" 버튼을 누르면 첨부 파일 이미지가 삽입된다.

0-9-14-9 콘텐츠 6.jpg

● "기본 카운터" 위젯 생성 배치하기
 
웹카운터는 사이트에 접속한 방문자 수나 특정 웹페이지를 열어 본 페이지뷰 횟수를 측정하고 집계하는 프로그램으로, XE 코어는 "기본 카운터 위젯"을 활용하여 페이지 내에 웹카운터를 추가하고 방문자의 접속 통계를 텍스트 형식으로 출력할 수 있다.
 
이제 "콘텐츠 5" 위젯 자리에 웹 카운터를 생성하여 삽입시키는 작업을 해 보자.  

0-9-15-1 콘텐츠 5.jpg

- 페이지 수정 화면을 열고 위젯 선택박스에서 "기본 카운터 위젯"을 선택한 후 "추가" 버튼을 클릭한다.

0-9-15-2 기본 카운터 위젯 추가.jpg

- "기본 카운터 위젯 코드생성" 화면이 열리면 "기본 카운터 스킨"을 선택한 다음, "코드생성" 버튼을 클릭한다.

0-9-15-3 기본 카운터 코드생성.jpg

- "기본 카운터" 위젯이 생성 되었으면 위젯의 크기를 콘텐츠 5의 크기에 맞게 조정한다.

0-9-15-4 기본 카운터 위젯 생성.jpg

- 콘텐츠 5를 삭제한 후,  "기본 카운터" 위젯을 그 위치로 이동시킨다.

0-9-15-5 기본 카운터 위젯 생성 완료.jpg

그럼 이것으로 오늘의 페이지 꾸미기 강의는 마치겠습니다. 이번 시간 공부한 내용을 간단히 정리해보면 위젯페이지는 위젯을 이용하여 페이지를 쉽게 꾸밀 수 있도록 되어 있지만, 페이지를 보다 세련되고 멋있게 콘텐츠를 채워서 페이지를 완성하려면 위지윅에디터를 보다 많이 활용하여야 할 것입니다.
 
그리고 아직까지는 위지윅에디터의 기본 컴포넌트와 확장 컴포넌트 기능만 가지고 페이지를 완벽하게 구성하고 표현하는데 많은 제약이 따릅니다. 따라서 비록 오늘은 HTML 편집기를 사용하지 않았지만, 향후 HTML 편집기를 다룰 줄 알아야 웹페이지의 업그레이드 작업을 훨씬 더 쉽게 할 수 있을 뿐만 아니라, 페이지의 완성도를 원하는 대로 높일 수 있습니다. 당연히 HTML5에 대한 기본 지식의 습득이 선행되어야 함은 두말할 필요도 없습니다.
 
이번 시간에 이어 다음 시간에도 계속 웹페이지 꾸미는 방법을 다루게 되는데, 오늘은 레이아웃의 콘텐츠 영역에 들어가는 위젯페이지를 "위젯"과 "내용 직접 추가" 기능을 사용하여 페이지를 만드는 중요한 실습을 하였습니다. 그런데 아래 그림에서 보는 바와 같이 오늘 힘들게 만든 페이지 모듈은 그럭저럭 보아 줄 수 있을 정도로 만들어 진 것 같은 데, 레이아웃의 이미지 영역은 XE에서 최초 제공한 기본 레이아웃을 사용하였기 때문에 전혀 그 내용이 맞지 않아 레이아웃을 수정해야할 필요가 생겼습니다.  

0-9-16 페이지 모듈 작성 완료.jpg

곧 웹페이지는 단순히 콘텐츠 모듈만 보여지는 것이 아니라 콘텐츠를 장식해 주는 레이아웃도 연동되어 하나의 화면에서 함께 보여지기 때문에, 콘텐츠를 잘 만들었다고 만족해서도 안되고, 그렇다고 레이아웃에만 치중하다보면 속이 텅빈 공갈빵이 되기 쉽습니다. 결국 콘텐츠와 레이아웃은 아주 이상적이고도 조화롭게 궁합을 잘 맞추어서 죽을 때까지 백년해로 할 수 있게 만들어 주어야 하는 것입니다. 그럼 이 주제와 관련하여 다음 시간에 계속하여 레이아웃의 옵션 설정과 편집 기능을 통하여 페이지 꾸미는 방법을 공부하도록 하겠습니다.
오늘 강의 열심히 따라오시느라 수고 몽땅 하셨습니다. 

 

Atachment
첨부 '50'