메뉴 건너뛰기

XE Guidebook

사이트 만들기
2014.08.03 14:58

5-04 메뉴 만들기와 구조 바꾸기

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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


웹사이트에서 메뉴란 하이퍼링크(Hyperlink)가 걸려 있는 텍스트들을 체계적으로 보기 좋게 나열한 콘텐츠의 차림표라고 할 수 있다. 방문자로 하여금 웹에 대한 전문 지식이 없어도 메뉴의 클릭만으로 쉽고 편리하게 사이트를 서핑할 수 있도록 내비게이터 역할을 하기 때문에 아래 그림에서 보는 바와 같이 헤더 영역에 들어 있는 메뉴 그룹을 GNB(Global Nagation Bar)라고 하고, 현재 페이지의 좌 우측 사이드 영역에 있는 메뉴 그룹을 LNB(Local Navigation Bar)라고 한다.

  

0-4-1 GNB와 LNB.jpg

 

● [사이트 메뉴 편집] 기능
 
XE 코어에서 메뉴의 목록을 만들고 관리하는 기능은 "메뉴" 모듈이 담당하는데 이렇게 만들어진 메뉴의 그룹을 사이트맵이라 하며, XE Admin의 "[사이트 제작/편집] > [사이트 메뉴 편집]" 메뉴를 클릭하여 사이트맵의 작업창으로 접속할 수 있다.
 
XE 코어를 처음 설치하면 아래 그림과 같이 기본적으로 생성된 사이트맵 Welcome menu가 있으며, 그 안에는 "Welcome Page" 메뉴가 하나 있음을 볼 수 있는데, "사이트 메뉴 편집"창의 하위 창들을 하나하나 살펴 보면 사이트맵이 어떻게 구성되어 있는지, 어떤 작업을 이 곳에서 할 수 있는지를 알 수 있을 것이다.

 

0-4-2 기본 사이트맵.jpg

 

- 사이트맵 Welcome menu는 Welcome Page 메뉴 하나로 구성되어 있다.
- Welcome Page 메뉴의 메뉴타입은 위젯페이지 이며,
  메뉴 ID가 page_ijmu02라는 위젯페이지 모듈이 연결되어 있고,
  이 위젯페이지는 사이트에 접속 시 처음 보여지는 시작모듈로 사용(홈페이지로 사용중)되고 있다.
- 메뉴수정, 메뉴추가, 메뉴 잘라내기와 복사 및 붙여넣기, 메뉴 삭제 작업을 할 수 있다.
- 메뉴 추가는 메뉴타입별(문서페이지, 위젯페이지, 외부페이지, 게시판, 바로가기)로 작업이 이루어지며,
  메뉴 추가와 동시에 페이지 생성과 게시판 생성 작업을 해야 한다.
  메뉴타입을 변경하려면 메뉴를 삭제 후 재생성해야 한다.
- 현재 홈페이지로 사용중(시작모듈 사용중)인 모듈을 변경할 수 있다.
- 모듈에 연결되어 있는 레이아웃을 바꿀 수 있다.
- 메뉴 노출 대상, 접근 권한, 관리권한 옵션을 설정, 변경할 수 있다.
- 메뉴에 연결되어 있는 모듈의 상세 설정 작업을 할 수 있다.
 
 
● 메뉴 타입
 
XE에서는 메뉴를 생성할 때 기본적으로 메뉴 타입을 사전에 의무적으로 결정하도록 되어 있으며, 메뉴 타입을 변경하고 싶을 때에는 메뉴를 삭제하고 재생성하는 과정을 거쳐야 한다. 그리고 메뉴를 삭제할 때는 메뉴에 연결된 콘텐츠도 함께 삭제되므로 메뉴의 삭제 시는 매우 주의하여야 한다.
 
메뉴 추가 시 XE에서 기본적으로 제공하고 있는 메뉴 타입에는 다음과 같은 것들이 있으며, 사용자는 다른 메뉴타입을 추가로 설치하여 사용할 수 있다. 메뉴타입 모듈의 추가 설치와 구체적인 내용에 대해서는 앞 단원 "추가기능 설치방법"과 "설치된 모듈"을 참조하면 된다.
 
- 문서페이지
- 위젯페이지
- 외부페이지
- 게시판
- 바로가기
  '바로가기' 메뉴 타입이란 이미 만들어져 있는 메뉴 또는 외부 링크를 연결하는 메뉴이다.
  윈도우의 바로가기와 비슷한 기능으로, 바로가기 메뉴는 삭제해도 연결되어 있는 원본 콘텐츠가 삭제되지 않는다.
 
 
● 메뉴의 깊이
 
웹사이트는 방문자로 하여금 사이트에 접속 시 바로 직관적으로 사이트의 운영 목적과 내용을 알 수 있도록, 레이아웃은 합리적이고 세련되게 디자인되어야 하며, 콘텐츠는 체계적으로 기획, 분류, 구성되어 있어야 한다.
 
방문자에게 인기가 있고 좋은 사이트란 느낌은 일차적으로 레이아웃에 의하여 영향을 받는다고 해도 과언이 아닐 것이다. 그 중에서도 메뉴의 작동 방식이나 구조가 가장 중요한 요소가 됨은 말할 필요도 없을 것이다. 메뉴는 디자인 면에서 세련되어야 함은 물론이고 정보를 제공하는 편리성과 접근성 차원에서도 매우 계획적이고 체계적으로 만들어져야 하는 것이다.
 
제공할 정보와 콘텐츠를 보기 좋고 찾기 쉽게 하기 위해서, 메뉴 목록은 대개 트리구조를 취하면서 주제별로 대분류, 중분류, 소분류 등 단계적으로 그룹핑하여 구성하게 되는데, 스토리보드를 만들 때 충분히 생각하고 세심한 사용자 배려를 하여 메뉴 구조를 만드는 연습을 많이 하여야 할 것이다.
 
메뉴의 단계(깊이 depth)는 되도록이면 깊지 않도록 하는 것이 좋을 것이다. 3차 메뉴 이상 넘어가면 사용자는 웹서핑을 하는데 피곤함을 느끼게 된다. 비록 정답은 없는 질문에 대한 대답이기는 하지만 가급적 최대 3차 메뉴는 넘지 않도록 하자. 그렇다고 1차 메뉴로만 헤더 부분에 죽 늘어 놓는 것도 시선을 흐트려서 정신이 산만해진다.
 
적당한 차원으로 적당히 그룹핑하여 한눈에 전체 사이트의 모습이 들어오도록 메뉴 목록을 만들고, 메뉴만을 보고서도 직관적으로 원하는 정보에 쉽게 접근할 수 있도록 메뉴의 깊이와 넓이를 구성하는 능력이 웹사이트 기획의 첫걸음임을 명심하고 각자가 만들어 놓은 스토리보드를 다시 한번 살펴 보도록 하자.
 
 
● 사이트 맵 만들기
 
자 이제 앞 시간에 경쟁력있게 기획하고 구성해 놓은 스토리보드를 가지고, 사이트맵을 만들어 GNB와 LNB를 완성시켜 보도록 하자.
 
▶ 사이트맵의 이름 변경과 새 사이트맵 생성하기
 
앞으로의 강의에 사용할 사이트맵은 새로 만들어 사용하지 않고 XE에서 기본적으로 제공한 "Welcome menu" 사이트맵의 이름을 변경하여 사용할 것이다.

- XE Admin 관리자메뉴에서 "[사이트 제작/편집] > [사이트 메뉴 편집]" 메뉴를 클릭한다.
- "사이트 메뉴 편집" 창에서 "Welcome menu"를 클릭한다.
- "Welcome menu" 창에서 "사이트맵 편집"을 클릭하여 "사이트맵 이름"을 적절한 이름으로 변경하고, "확인"버튼을 누른다.
  ("Welcome menu" 창에서 "이름 변경"을 클릭하여 이름을 바꾸어도 된다.)
- 새 사이트맵을 추가하려면 "사이트 메뉴 편집" 창 하단의 "사이트맵 추가" 버튼을 클릭하여 만들면 된다.


0-4-3 사이트맵 이름 변경.jpg

 

▶ "위젯페이지" 타입의 메뉴 생성하기 
 
- "사이트 메뉴 편집" 창에서 이름이 바뀐 "XE guidebook" 사이트맵을 클릭한다.
- "XE Guidebook" 창에서 "메뉴추가" 클릭 → "위젯페이지"를 선택한다.

 

0-4-4 메뉴추가.jpg

 

- "메뉴 이름"과 "메뉴 ID" 입력 후 "확인" 버튼 클릭하면, "XE for yourself!" 이름을 가진 메뉴가 생성된다.  

※ "페이지 모듈에"에 대한 자세한 내용은 "페이지 모듈 설정하기" 참조
   "문서페이지" 타입의 메뉴 추가하기는 "위젯페이지" 타입과 동일하므로 각자 필요시 해 보면 된다. 

  

0-4-5 메뉴추가 완료.jpg

  

▶ "게시판" 타입의 메뉴 생성하기
 
- "사이트 메뉴 편집" 창에서 "XE guidebook" 사이트맵을 클릭한다.
- "XE guidebook" 창에서 "메뉴추가" 클릭 → "게시판"을 선택한다.

 

0-4-6 게시판 메뉴타입 추가.jpg


- "메뉴 이름"과 "메뉴 ID" 입력 후 "확인" 버튼 클릭하면 "XE 사용자 매뉴얼"이라는 게시판 타입의 메뉴가 생성된다. 

☞ 게시판 모듈 설정하기와 스킨 사용하기 참조

 

0-4-7 게시판 메뉴타입 추가 완료.jpg

 

▶ "바로가기" 타입의 메뉴 생성하기와 2차메뉴 구성하기 
 
스토리보드를 보면 "XE 나만의 레이아웃 만들기"라는 1차 메뉴가 있고 그 아래에 "XE-4Uself layout 소개", "XE-4Uself layout 기능", "XE-4Uself layout 만들기"라는 2차 메뉴 3개가 있다. "XE 나만의 레이아웃 만들기" 1차 메뉴를 클릭하면 "바로 가기" 메뉴 타입에 의하여 "XE-4Uself layout 소개" 페이지가 접속되도록 사이트맵을 구성할 것이다.
 
- "사이트 메뉴 편집" 창에서 "XE guidebook" 사이트맵을 클릭한다.
- "XE Guidebook" 창에서 "메뉴추가" 클릭 → "위젯페이지" 선택하여 먼저 "XE-4Uself layout 소개" 메뉴를 만든다.

 

0-4-8-1 2차메뉴 만들기.jpg

 

- "XE Guidebook" 창에서 "메뉴추가" 클릭 → "바로가기"를 선택한다.
- 메뉴이름에 "XE 레이아웃 만들기"를 입력한 후, "메뉴 링크" 탭을 클릭한다.
- "메뉴링크" 탭의 창에서 "XE-4Uself layout 소개" 메뉴를 선택한 다음, "확인" 버튼을 누른다.


0-4-8-2 2차메뉴 만들기.jpg

 

  그러면 "사이트 메뉴 편집"창에 "XE-4Uself layout 소개"와 "XE 나만의 레이아웃 만들기" 메뉴가 아래와 같이 만들어진다.

 

0-4-8-3 2차메뉴 만들기.jpg

 

- 스토리보드에서처럼 "XE-4Uself layout 소개" 메뉴를 "XE 나만의 레이아웃 만들기" 메뉴의 하위 2차 메뉴로 만들기 위해,
   "XE-4Uself layout 소개" 메뉴를 마우스로 클릭한 상태에서 "XE 나만의 레이아웃 만들기" 메뉴 위로 "drag & drop"한다.
 
  ※ "XE-4Uself layout 소개"  메뉴 클릭 → "잘라내기" 클릭 → "XE 나만의 레이아웃 만들기" 클릭 → "붙여넣기" 클릭하면,
     앞의 "drag & drop" 방식에 의하여 2차 메뉴 만드는 것과 동일하게 만들 수 있다. 

 

0-4-8-4 2차메뉴 만들기 완료.jpg

 

지금까지 XE Admin에서 작업한 사이트맵이 웹사이트에서 어떻게 나타나는지 확인해보자.
웹브라우저 주소창에 도메인을 입력하고 사이트에 접속하였을 때 다음과 같이 메뉴가 보여지면 제대로 작업이 된 것이다. 마우스를 메뉴바 위에 올리면 2차 메뉴도 보이게 될 것이다.

 

0-4-9 사이트에서 보여지는 사이트맵.jpg

 

그럼 계속해서 당초 구상했던 스토리보드에 의거하여 위에서 배운 방법대로 메뉴를 모두 생성하고, 사이트맵을 완성시키도록 하자. "쇠뿔도 단김에 빼라"고 내친 김에 사이트맵을 완전히 완성한 후에 휴식을 취하시길,,,저도 아래와 같이 사이트맵을 모두 완성하고 나서야 비로소 좀 쉬었습니다..ㅎㅎ

 

0-4-10 사이트맵 완성.jpg

 

이번 강의는 내용이 좀 많긴 하지만 그다지 힘들거나 지루하지는 않았을 겁니다. 이제서야 뭔가 내 사이트의 실체가 만들어지는 것 같아 신도 나고 보람도 한껏 느끼셨을 테니까요.. 앞으로 당분간 이 XE Admin의 "사이트 제작/편집" 안에 머무는 시간이 무척 많을 것입니다. 오늘과 같이 항상 신명나게 이 작업창을 대해주시길 바라면서,,,각자가 완성한 사이트맵을 가지고 다음 시간에 뵙겠습니다.