적용버전 : XE Ver 1.5 or higher 메뉴의 표현 방법과 새 메뉴 작성하기

메뉴 만들기

하이퍼링크(Hyperlinks)의 목록

image메뉴는 단순한 링크 요소를 보기좋게 나열한 차림표를 말합니다. 링크(Link, 고리)는 하이퍼링크(Hyperlink)의 줄임말로 하이퍼텍스트(Hypertext) 문서 안에서 모든 형식의 자료를 직접 가리킬 수 있는 참조 고리이며, 웹페이지에 대한 지식이 없어도 방문자에게 쉽고 편리하게 "바로 가기"를 제공하는 특별한 텍스트를 말합니다.

인터넷(Internet)이 처음 세상에 나왔을 때 월드와이드웹(World Wide Web, WWW)의 웹(Web)은 거미줄을 뜻함에도 불구하고 웹세상은 "너무나 깊고 넓다."는 의미의 바다로 비유되곤 했지요. 그래서 그런지 초창기 만들어진 웹브라우저도 항해자(navigator)라는 뜻의 넷스케이프 네비게이터(netscape navigator)라고 불렀고, 배를 조정하는 키가 매우 인상적입니다. 요즘은 미지의 세계를 "탐험(explore)하다." 또는 바다보다 더 넓은 우주를 탐험한다는 뜻의 Explorer를 즐겨사용하게 되었는데 이것은 과거 웹브라우저 전쟁에서 마이크로소프트사의 인터넷 익스플로러(Internet Explorer) 웹브라우저가 승리하였기 때문입니다. 하지만 아직도 인터넷은 넓은 바다와 항해하는 배를 연상시키는 추억이 많이 남아있습니다.

같은 문서내 특정 위치나 혹은 다른 HTML 문서로 이동하기 위한 링크 요소는 배의 닻(Anchor, 앵커)이 바다 밑으로 긴 줄을 늘어뜨려 놓은 모습을 닮았다고 해서 지금까지 하이퍼링크를 대표하는 아이콘(anchor)이 되었고, 마크업 언어로 작성할 때는 <a href="URL">하이퍼링크 텍스트</a> 형식으로 작성합니다. 따라서 href의 속성 값은 바다 깊은 곳, 네트워크 어딘가의 닻이 도달한 그곳의 자원을 가리키는 것입니다.

image

하이퍼링크를 보기좋게 나열할 수 있는 마크업 언어로서는 목록을 만들기 편리한 ul, li 엘리먼트가 가장 일반적으로 사용되며 이렇게 묶은 그룹을 메뉴라고 부르기도 하고, 넓은 바다 위에서 없어서는 안될 위성항법장치를 닮았다고 해서 네비게이션(navigation)이라는 별명도 갖고 있습니다. XE 코어도 이러한 메뉴 그룹의 구조, 디자인, 표준화 작업를 통해 위 그림과 같은 메뉴바를 각각 최상위 공통 네비게이션(Global Navigation Bar, GNB), 현재 서비스의 지역 네비게이션(Local Navigation Bar, LNB)이라고 부릅니다.


메뉴의 깊이(Depth)

XE 코어는 링크의 목록을 배열 변수에 담아 두고 객체(Object)화하여 사용자가 필요할 때 내어 줍니다. 만약 menu1, menu2, menu3, menu4, menu5 라는 링크 목록을 만들고 싶다면 UL(Unordered List)를 이용해 다음과 같이 작성할 수 있습니다.

<ul>
	<li>menu1</li>
	<li>menu2</li>
	<li>menu3</li>
	<li>menu4</li>
	<li>menu5</li>
</ul>

목록을 가로 또는 세로방향으로 나열한다고 했을 때 한 단계로 표시하기 때문에 위와 같은 그룹은 1차 메뉴(1단)의 형식이 됩니다. 만약 menu1이 하위 목록을 갖고 싶다면 다음과 같이 작성할 수 있습니다.

<ul>
	<li><a href="">menu1</a>
		<ul>
			<li><a href="">menu1-1</a></li>
			<li><a href="">menu1-2</a></li>
			<li><a href="">menu1-3</a></li>
		</ul>
	</li>
	<li><a href="">menu2</a></li>
	<li><a href="">menu3</a></li>
	<li><a href="">menu4</a></li>
	<li><a href="">menu5</a></li>
</ul>

이러한 목록 형식을 2차 메뉴(2단계)의 표현이라고 말합니다. 만약 3차 메뉴(3단계)의 형식으로 표현하고 싶다면 menu1-1 항목에서 같은 방법으로 하위 목록을 추가하게 됩니다. 이러한 목록은 메뉴 변수에 담겨지고 객체로 포장되어 보관되기 때문에 사용자가 레이아웃을 변경한다고 해도 레이아웃이 표현할 수 있는 메뉴의 깊이(depth, 목록의 단계)만큼 GNB, LNB 영역에 출력할 수 있는 것입니다.

다시말해서 레이아웃이 2차 메뉴까지 표현할 수 있다면 사용자가 3차 메뉴까지 작성하였다고 하더라도 레이아웃에서는 2차 메뉴까지만 보이게 되고 나머지는 표현할 방법이 없을 뿐 목록은 항상 가지고 있다는 의미입니다. 만약 3차 메뉴까지 지원하는 레이아웃을 만난다면 설정된 목록 그대로 표현될 것입니다.


사이트 메뉴 만들기

XE 코어에서 위와 같이 메뉴의 목록을 만들고 관리하는 도구는 메뉴 관리(Menu Management) 모듈이 담당합니다. 이것을 사이트맵이라 표현하는군요. XE 코어를 설치하였을 때 기본적으로 생성된 메뉴가 있습니다. 아래 그림과 같이 2차 메뉴로 작성되어 있고 각각의 메뉴에 같은 welcome_page 모듈이 연결되어 있는 것을 알 수 있습니다.

image

메뉴는 링크 요소가 주제라고 했습니다. 따라서 메뉴를 추가할 경우 연결할 자원의 URL을 입력하는 것은 기본입니다.
하지만 코어는 이곳에서도 사용자에게 다음과 같이 3가지를 질문합니다.

  • 새로운 모듈을 만들고 연결하시겠습니까?...
  • 모듈을 찾아 연결하시겠습니까?...
  • URL을 직접 입력하시겠습니까?...

말줄임표 뒤에는 이런 뜻이 있답니다...^^

  • 새로운 모듈을 만들고 연결하시겠습니까? 여기서도 간단히 모듈을 만들 수 있는 서비스를 제공합니다.
  • 모듈을 찾아 연결하시겠습니까? 만약 미리 모듈을 만들어 두셨다면 쉽고 빠르게 찾아 연결시켜 드리겠습니다.
  • URL을 직접 입력하시겠습니까? 다른 웹페이지로 가장 빠르게 모실 수 있는 쾌속선을 준비하죠.

위 3가지 질문에 대답할 내용을 이전 과정에서 모두 준비해 두었습니다. 아래 순서를 따라하면서 새로운 메뉴를 추가하는 방법, 간단히 모듈을 만드는 방법, 이전 모듈을 찾아 연결하는 방법, 그리고 URL을 이용해 메뉴와 연결시키는 방법에 대해 살펴보도록 합니다.

  • image▲ XE 코어가 미리 만든 메뉴는 그대로 두고 새 메뉴를 만들어 봅니다. [새 사이트맵 추가] 버튼을 클릭합니다.
  • image▲ 메뉴의 이름을 my_menu로 입력합니다. 자유롭게 네이밍 하세요. 단, 변수로 사용할 영문으로...
  • image▲ 1차 메뉴 작성을 위해 [메뉴 추가] 버튼을 클릭합니다.
  • image▲ 첫번째 메뉴는 새로운 모듈을 생성해 보기로 하고 위와 같이 입력하세요.
  • image▲ 입력을 완료하고 [저장] 버튼을 클릭하면 메뉴가 생성됩니다.
  • image▲ 새 메뉴를 추가하기 위해 [메뉴 추가] 버튼을 클릭합니다.
  • image▲ 이전에 생성했던 문서 페이지를 연결하기 위해 [모듈 선택]을 클릭하고 문서를 찾아 연결합니다.
    입력을 완료하고 [저장] 버튼을 클릭합니다.
  • image▲ 새 메뉴를 추가하기 위해 [메뉴 추가] 버튼을 클릭합니다.
  • image▲ 이전에 생성했던 위젯 페이지를 연결하기 위해 [모듈 선택]을 클릭하고 위젯 페이지를 찾아 연결합니다.
    입력을 완료하고 [저장] 버튼을 클릭합니다.
  • image▲ 새 메뉴를 추가하기 위해 [메뉴 추가] 버튼을 클릭합니다.
  • image▲ 이전에 생성했던 외부 페이지를 연결하기 위해 [모듈 선택]을 클릭하고 외부 페이지를 찾아 연결합니다.
    입력을 완료하고 [저장] 버튼을 클릭합니다.
  • image▲ 새 메뉴를 추가하기 위해 [메뉴 추가] 버튼을 클릭합니다.
  • image▲ 이전에 생성했던 게시판을 연결하기 위해 [모듈 선택]을 클릭하고 게시판 모듈을 찾아 연결합니다.
    입력을 완료하고 [저장] 버튼을 클릭합니다.
  • image▲ 새 메뉴를 추가하기 위해 [메뉴 추가] 버튼을 클릭합니다.
  • image▲ 다른 웹사이트와 연결하기위해 [연결 url]을 선택하고 URL을 입력합니다. [새 창 열기]를 선택하면 메뉴를 클릭했을 때
    새 창을 열고 이동합니다. 입력을 완료하고 [저장] 버튼을 클릭합니다.
  • image▲ 새 메뉴 그룹이 생성되었습니다. 새로 만든 메뉴를 사용하기 위해서는 레이아웃과 연결해야 합니다.
  • image▲ [설치된 레이아웃]을 클릭합니다.
  • image▲ 메뉴를 사용할 레이아웃을 선택합니다.
  • image▲ [레이아웃 설정]을 클릭합니다.
  • image▲ [상단 메뉴] 선택상자에서 새로 생성한 my_manu를 선택하고 [레이아웃 일괄 적용]에 체크표시합니다.
    입력을 완료하고 [저장] 버튼을 클릭합니다.
  • image▲ 새 메뉴 작성이 완료되었습니다. 메뉴의 동작을 확인하기 위해 메뉴1을 클릭합니다.

Tip - 만약 모듈이 각각 다른 레이아웃을 선택적으로 사용해야 한다면 [레이아웃 일괄 적용]에 체크표시하지 마십시오. 메뉴는 연결된 모듈을 호출할 뿐이고 모듈은 자신이 선택한 레이아웃을 이용하기 때문입니다. 이런 경우 메뉴A와 같은 유형의 메뉴B를 만들고 레이아웃B에 메뉴B를 연결하여 해당하는 메뉴 링크만 수정하도록 합니다.


메뉴1은 메뉴를 생성하는 단계에서 새로운 문서 페이지를 생성할 수 있었던 메뉴 항목이었습니다. 따라서 아직 내용이 없는 빈 페이지를 보여주고 사용자의 입력을 기다리고 있습니다. 만약 게시판 모듈을 선택하고 모듈의 아이디를 생성한다면 새로운 게시판을 생성한 후 자동으로 메뉴와 연결시켜 줍니다. 마찬가지로 모듈의 세부적인 옵션은 해당 모듈 관리에서 설정하도록 합니다.

image

1차 메뉴의 형식으로 작성했던 다른 메뉴 항목도 정상적으로 동작합니다. 만약 2차 메뉴의 형식으로 메뉴를 구성하고자 한다면 각각의 메뉴 항목 우측에 위치한 [추가]를 클릭한 후 같은 방법으로 하위 메뉴를 작성하게 됩니다. 메뉴 항목의 순서는 마우스 드래그를 이용해 자유롭게 이동이 가능합니다. 1차 메뉴 항목으로 빼낼수도 있고 하위 메뉴로 종속시킬 수도 있습니다. 메뉴의 내용 또는 순서를 수정한 경우 반드시 해당 메뉴 하단에 위치한 [저장] 버튼을 클릭하여 변경된 내용을 코어에게 알려주어야 합니다. 만약 메뉴가 목적한 내용대로 동작하지 않는 경우 [캐시파일 재생성]을 클릭하여 메뉴의 캐시파일을 재작성 해 주고 웹페이지를 다시 로드(F5)하면 원하는 결과를 얻을 수 있습니다.

메뉴1의 문서 페이지에서 [페이지 수정]을 클릭한 후 아래와 같이 작성하고 저장하였습니다.

image

그런데 웹브라우저를 열고 홈페이지에 접속하게 되면 XE 코어는 처음 설치시 생성되었던 welcome_page를 첫 내용으로 보여줍니다. 이러한 동작을 시작 모듈이라고 말합니다. 다음 과정에서는 시작 모듈을 설정하는 방법에 대해 알아봅니다.