추가 메뉴(회원 메뉴 등) 만들기

웹사이트의 위쪽 메뉴는 보통 홈·소개·후기처럼 모두에게 같은 링크를 보여 주지만, 회원제 사이트라면 로그인·회원가입·마이페이지 같은 링크를 따로 모아 두고 싶을 때가 있습니다. 이럴 때 쓰는 것이 헤더·푸터 외에 이름을 붙여 따로 만드는 추가 메뉴입니다. 이 글에서는 추가 메뉴를 만드는 방법, 방문자와 회원에게 다르게 보이게 하는 방법, 에디터의 메뉴 요소에 연결하는 방법을 순서대로 안내합니다.

1. 추가 메뉴는 어디에서 만드나요

왼쪽 사이드바의 웹사이트 빌더에서 내 웹사이트를 열고 사이트 카드의 관리를 눌러 사이트 상세 화면으로 들어갑니다. 오른쪽 열에 헤더 메뉴, 푸터 메뉴 카드가 있고, 그 아래의 점선 테두리 카드 메뉴 추가가 추가 메뉴를 만드는 곳입니다.

1. 메뉴 이름 칸에 이름을 적습니다. 비워 두면 아래 선택에 따라 회원 메뉴 또는 새 메뉴라는 이름이 붙습니다.
2. 시작 방식을 고릅니다. 빈 메뉴로 시작은 항목 없이 만들고, 회원 메뉴 (로그인·회원가입·마이페이지)는 세 항목이 미리 들어 있는 메뉴를 만듭니다.
3. + 메뉴 만들기를 누르면 "'회원 메뉴'를 만들었습니다." 알림과 함께 새 메뉴 카드가 생깁니다.

2. 항목과 표시 대상 정하기

만들어진 카드에서는 이름을 바꾸거나 메뉴를 지울 수 있고, 항목은 헤더 메뉴와 같은 방식으로 다룹니다. 항목 줄의 위·아래 화살표로 순서를 바꾸고, +로 하위 항목을, 연필 아이콘으로 이름과 주소 수정을 합니다. 카드 아래쪽의 메뉴 이름과 URL 칸에 값을 적고 + 메뉴 항목 추가를 누르면 항목이 늘어납니다. 항목 편집의 자세한 방법은 헤더 메뉴 글과 같아 별도 글에서 다룹니다.

추가 메뉴의 특징은 항목 줄마다 있는 표시 대상 선택입니다.

• 모두: 누구에게나 보입니다(기본값).
• 방문자만: 로그인하지 않은 방문자에게만 보입니다.
• 회원만: 회원으로 로그인한 방문자에게만 보입니다.

회원 메뉴 프리셋은 로그인(/login)과 회원가입(/register)이 방문자만, 마이페이지(/mypage)가 회원만으로 들어 있습니다. 값을 바꾸면 선택하는 즉시 저장됩니다.

3. 에디터의 메뉴 요소에 연결하기

추가 메뉴는 만들기만 해서는 페이지에 나타나지 않습니다. 페이지의 어느 메뉴 요소가 이 메뉴를 보여 줄지 정해야 합니다. 메뉴 요소는 섹션 추가의 헤더 템플릿 같은 곳에 들어 있습니다.

1. 에디터에서 페이지를 열고, 캔버스의 메뉴 항목 글자를 눌러 메뉴 요소를 고릅니다. 왼쪽에 메뉴 편집 패널이 열리고 위쪽에 헤더 메뉴, 푸터 메뉴, 그리고 만든 추가 메뉴 탭이 나란히 보입니다.
2. 회원 메뉴 탭을 누르면 선택한 메뉴 요소 카드에 이 요소에 '회원 메뉴' 표시 버튼이 나타납니다.

1. 버튼을 누르면 "이 요소는 지금 '회원 메뉴'를 표시합니다."로 바뀌고, 캔버스의 메뉴가 회원 메뉴 항목으로 채워집니다.
2. 상단의 저장을 눌러 페이지에 저장합니다.

다른 메뉴 요소는 그대로 헤더 메뉴를 보여 줍니다. 헤더 메뉴로 되돌리려면 해당 요소를 고른 뒤 헤더 메뉴 탭에서 같은 버튼을 누릅니다. 에디터 캔버스에서는 표시 대상과 관계없이 항목이 모두 보이며, 표시 대상은 라이브 미리보기나 배포된 페이지에서 적용됩니다.

4. 방문자에게 보이는 모습 확인하기

저장한 뒤 상단의 라이브 미리보기를 누르면 로그인하지 않은 방문자가 보는 모습이 나옵니다. 아래 화면에서는 회원만으로 정한 마이페이지가 빠지고 로그인·회원가입·수업 예약이 보입니다. 회원으로 로그인해 있으면 반대로 로그인·회원가입이 숨겨지고 마이페이지가 보입니다.

5. 이렇게 활용해 보세요

• 헤더 위에 메뉴 요소를 하나 더 두고 회원 메뉴를 연결하면, 본 메뉴는 그대로 두고 로그인·마이페이지 링크만 따로 모아 둘 수 있습니다.
• 강의 수강생 전용 링크나 회원 혜택 안내처럼 로그인한 사람에게만 보여 줄 링크는 회원만으로 정해 보세요.
• 수업 예약처럼 사이트 안 페이지로 가는 항목은 URL 칸에 /yoga-class 같은 페이지 주소를 적어 함께 둘 수 있습니다.

6. 알아 두실 점

• 추가 메뉴는 사이트당 최대 12개까지 만들 수 있습니다.
• 이름 변경과 삭제는 추가 메뉴에만 있고, 헤더·푸터 메뉴는 지울 수 없습니다.
• 삭제를 누르면 확인 창이 열리며, 메뉴 항목도 함께 지워지고 이 메뉴를 쓰던 메뉴 요소는 헤더 메뉴로 표시됩니다.

• 회원 메뉴 프리셋에는 로그아웃 항목이 들어 있지 않습니다.
• 로그인·회원가입·마이페이지 화면의 디자인을 바꾸는 방법은 별도 글에서 다룹니다.