30분만에 나만의 웹사이트 제작하기#4
XE3를 활용해서 웹에 대해서 잘 모르는 초보자도 쉽게 홈페이지를 구성할 수 있는 웹사이트 제작방법을 소개하기위해 제작되었습니다.
이번 챕터는 메뉴를 설정하고 구성하는 방법에 대해서 알아보겠습니다.
지난번 세번째 글에서는 사이트를 설치한 이후, 기본 설정을 하는 방법과 설정 결과들을 살펴보았습니다.
내 사이트 이름과 설정을 끝마쳤다면, 사이트 메뉴를 만들어 컨텐츠를 쌓을 공간을 만들어야 합니다.
그래서 이번시간에는, 메뉴를 만들고 각각의 메뉴는 어떻게 구성할 수 있는지에 대해서 알아보도록 하겠습니다.
관리자 사이트 로그인
내 사이트 도메인/settings 로 들어가 관리자 아이디로 로그인하여, 관리자 사이트로 이동해줍니다.
관리자 사이트로 로그인 했다면, 왼쪽의메뉴에서 사이트맵 > 사이트 메뉴 편집을 클릭하여, 메뉴 편집으로 이동합니다.
사이트 메뉴 편집에 진입하면 아래의 화면을 마주 하게되는데요,
화면에 보이는 용어들을 설명해 드리겠습니다.
이 페이지에서에서 사용되는 용어는 아래와 같습니다.
- 메뉴 : 게시판 페이지, 위젯 페이지등의 아이템을 묶는 그룹을 의미합니다.
- 아이템 : 게시판, 위젯과 같은 각각의 아이템을 의미합니다.
우리는 알기 쉽게, 메뉴를 사이트 맵 으로 부르고, 아이템을 메뉴로 부르게 될 것입니다.
메뉴(사이트 맵) 추가 하기
사이트맵의 이름은 기본적으로는 일반 사용자가 방문하였을때, 보이는 페이지에서는 보이지 않습니다.
관리를 하기 쉬운 이름과, 메모를 입력해주세요. 입력하고 스크롤을 조금 내리면, 아래의 항목을 볼 수 있습니다.
사이트 맵(메뉴)에 지정된 테마는 다음에 이 사이트 맵에 추가 되는 메뉴(아이템)의 테마를 자동으로 설정을 따라오게 할 수 있습니다.
이번에는 손쉽게 Together 테마의 기본 설정을 사용하기로 하고, 등록 버튼을 ㅌ우눌러 사이트 맵을 생성합니다.
방금 만든 내 사이트 맵이 추가 된 모습입니다.
이제, 내 사이트의 메뉴를 본격적으로 추가 할 차례입니다.
아이템(메뉴) 추가 하기
내 사이트 맵의 오른쪽에 있는 아이템 추가를 눌러 메뉴를 추가할 수 있습니다.
아이템 추가를 누르면, 메뉴 타입을 선택하는 페이지를 볼 수 있습니다. 각 타입을 알아보겠습니다.
- Direct Link 메뉴는, 직접 링크를 걸 수 있는 메뉴입니다.
사이트의 페이지가 아닌 내 유튜브, 비메오 등의 다른 페이지로 이동하고 싶을때 선택하는 메뉴입니다. - Board 메뉴는 공지사항, 자유게시판, 문의게시판 등 게시판형의 메뉴입니다. 글을 작성하고, 댓글을 작성할 수 있는 게시판을 만들 때 사용합니다.
- Simple Page 메뉴는 게시판이 아닌 단순히 상품 설명 페이지, 회사 소개, CEO 인사와 같은 정적 페이지를 만들 때 사용합니다.
- Widget Page 메뉴는 보통 홈(메인)을 생성할 때 사용하며, 위젯 구성을 통해 페이지를 꾸밀 수도 있고 직접 내용을 채울 수도 있습니다.
Direct Link(직접 링크 메뉴)추가 하는 방법
대부분의 메뉴를 추가하는 방법이나 구성 화면은 동일하지만, Direct Link는 Item URL부분에 링크를 입력합니다.
- Item URL은 메뉴의 주소를 의미하며, 이 메뉴를 클릭하면 이동할 주소를 입력합니다. Item Title은 메뉴의 이름을 의미하며, 메뉴의 이름을 입력합니다.
- Item Description은 메뉴의 설명 또는 메모를 작성할 수 있습니다.
일반적으로는 일반 사용자들에게 노출이 되지 않는 메뉴입니다. - Link Image 항목은, 메뉴가 글자 형태의 텍스트가 아닌, 이미지를 사용해야 할때 각각의 상황에 맞는 이미지를 등록할 수 있도록 지원하고 있습니다.
모두 입력한 예시는 아래에서 볼 수 있습니다.
메뉴를 추가 하는 방법
대부분의 메뉴를 추가하는 방법이나 구성 화면은 동일합니다.
대표적으로 게시판을 만드는 방법을 예로 들고 있습니다.
게시판, 위젯, simple page 등의 메뉴들은 Item URL에 주소가 아닌 해당 메뉴의 ID만 입력하여 메뉴를 만들 수 있습니다.
ID는 내사이트주소/메뉴ID 로 접속할 수 있습니다.
모두 입력한 다음 아래에 있는 테마 설정을 체크된 상태인지 확인해주세요.
저장 버튼을 누르면 아래 화면 처럼 내가 만든 메뉴가 추가 된 것을 볼 수 있습니다.
이렇게 하면 기본 메뉴를 생성하실 수 있는 방법을 알게 되었습니다!
서브메뉴를 만드는 방법
사이트를 만들다 보면, 1차 메뉴인 메인 메뉴만 있는것이 아니라 고객센터 아래에 문의하기 게시판이나, 공지사항 게시판을 보여주고 싶을때가 있습니다.
이럴때, 우리는 간단하게 메뉴를 구성할 수 있는데요
메뉴를 2차 메뉴에 마우스로 끌어당길 수 있는 방법과, 직접 메뉴에 2차 메뉴를 만드는 방법 모두 소개합니다.
서브메뉴를 만드는 방법 (마우스로 끌어당기기)
위쪽의 메뉴를 만드는 방법으로 2차 메뉴를 만들어줍니다.
그 다음, 아래 이미지의 설명 처럼 점 부분을 클릭 합니다.
클릭했다면 아래 이미지 처럼 2차 메뉴가 필요한 곳으로 마우스를 끌어다 놓습니다.
이렇게 하면, 아래 이미지 처럼 정상적으로 2차 메뉴를 구성할 수 있게 되었습니다 :)
서브메뉴를 만드는 방법 (직접 메뉴에 추가하기)
마우스로 구성하는 방법은 미리 메뉴를 다 만들어 놓고, 구성하기에 적합한 방법입니다.
이번에는 직접 해당 메뉴에 하위 메뉴를 만드는 방법에 대해서 알아보겠습니다.
먼저, 2차 메뉴를 만들 메뉴의 이름을 클릭해주세요.
이때, /notice 와 같은 주소를 누르지 않도록 유의해주세요 :)
메뉴 수정 페이지가 나오면, 상단의 아이템 추가 버튼을 눌러 만들고 싶은 메뉴를 생성합니다.
위에서 설명한 메뉴 추가 방법대로 추가하면, 정상적으로 하위에 메뉴가 구성된 화면을 볼 수 있습니다 :)
이렇게 하여 모든 메뉴 구성 방법에 대해서 알아 보았습니다.
하지만 우리는, 메뉴만 만들어서 내 페이지에 보이지 않는다는 것을 알 수 있습니다.
테마에서, 내 메뉴를 연결해주는 방법을 마지막으로 정리해봅시다.
테마에 내 메뉴 연결하기
지금 보고 있는 관리자 사이트의 왼쪽 메뉴에서 설정 > 테마 설정을 클릭합니다.
내가 사용하는 테마 설정의 오른쪽에 위치한 수정 버튼을 클릭 합니다.
XE3 Together 기준으로, 일반설정의 메인 메뉴 항목에서 Main Menu를 클릭하여 사용할 사이트맵(메뉴)를 클릭한 다음 맨 하단의 저장 버튼을 클릭합니다.
이렇게 하고 아무런 내 사이트맵에 있는 메뉴로 진입하면 내 메뉴가 아래 이미지 처럼 보이는 것을 확인할 수 있습니다.
그리고 로고 텍스트 또는 글자를 누르면 내 사이트 맵이 아닌, 기본 사이트 맵이 나오게 되는데요.
그때는 아래 이미지 처럼 메인 페이지용 테마 설정도 아까와 같이 메뉴를 설정해주면 됩니다 :)
홈 페이지(메인 페이지) 바꾸는 방법
간혹 메인 페이지를 기본으로 구성된 페이지가 아닌, 게시판을 보여주고 싶은 경우가 있습니다.
그 경우 사이트맵 > 사이트 메뉴 편집 으로 이동하여 아래 이미지 처럼 메인 페이지로 설정하고 싶은 메뉴의 회색 집 모양을 클릭합니다.
클릭하고 나면, 아래 이미지 처럼 내가 누른 메뉴가 푸른색 집 모양이 보이게 됩니다.
이제 진짜 내 홈페이지 주소를 입력해, 내가 설정한 메인 페이지가 정상적으로 나오는지, 메뉴는 잘 나오는지 확인합니다.
잘 나온다면, 이제 내 사이트를 운영할 준비가 되었습니다!
축하합니다! 여기까지 읽으신 여러분은 내가 만든 나만의 웹사이트를 가지게 되었습니다.
계속 발행되는 XEHub의 Campus 를 통해서 조금 더 디테일한 나만의 웹 사이트를 꾸미고 만들 수 있습니다.
지금 까지 30분만에 나만의 웹사이트 만들기를 읽어주셔서 감사합니다 :)
웹사이트를 만드는것은 어렵지 않습니다, XE와 함께라면요 :)
