커뮤니티 게시글

팁·노하우

[ 머블로 시작하기 ④ ] 메뉴 만들어서 홈페이지에 걸기

우아한삽질 2026-09-21 17:31 조회 5 수정됨

안녕하세요, 여러분! 우아한삽질입니다!

지난 글에서는 관리자 페이지에서 사이트 기본 설정을 함께 알아봤는데요.
사이트 이름도 넣고 로고도 올렸는데, 막상 홈페이지를 열어보면 상단에 ‘홈’ 하나만 덩그러니 있습니다.

그래서 이번 글에서는 메뉴를 만들어 홈페이지에 거는 방법을 알아보겠습니다.
메뉴를 걸어야 방문자가 페이지를 찾아 들어갈 수 있습니다.

아직 기본 설정 전이시라면 아래 글부터 확인해 주세요!
[ 머블로 시작하기 ③ ] 관리자 페이지에서 사이트 기본 설정하기

그럼 바로 시작해 보겠습니다!

1. 메뉴 관리 열기

관리자 페이지 왼쪽에서 ‘사이트 설정’을 누르고, 펼쳐진 목록에서 ‘메뉴 관리’를 선택합니다.

메뉴 관리 메뉴 위치

주소창에 /admin/menu 를 직접 입력해도 같은 화면으로 갑니다.

2. 화면 구조 먼저 이해하기

메뉴 관리는 위쪽에 탭이 다섯 개 있습니다.
여기서 한 가지만 기억하시면 나머지는 쉽습니다.

메뉴를 만드는 곳과 메뉴를 거는 곳이 따로 있습니다.

메뉴 관리 탭 구성

‘메뉴 아이템’ 탭은 메뉴를 만들어 두는 창고입니다.
여기에 있다고 해서 홈페이지에 바로 보이지는 않습니다.

나머지 네 탭은 그 메뉴를 어디에 걸지 정하는 자리입니다.
‘메인 메뉴’는 상단 가운데, ‘유틸리티 메뉴’는 상단 우측,
‘푸터 메뉴’는 화면 맨 아래, ‘마이페이지 메뉴’는 마이페이지 사이드바입니다.

3. 지금 있는 메뉴 살펴보기

‘메뉴 아이템’ 탭을 보시면 설치 직후에도 메뉴가 열한 개 들어 있습니다.
홈, 로그인, 회원가입, 마이페이지, 이용약관 같은 것들입니다.

설치 직후 메뉴 목록

제공자가 Core 로 표시된 것은 머블로가 기본으로 넣어 둔 메뉴입니다.
회원 기능에 꼭 필요한 것들이라 지우지 말고 그대로 두시는 편이 좋습니다.

보시면 알겠지만 회사소개나 공지사항 같은 메뉴는 하나도 없습니다.
그건 우리가 만들어야 합니다.

4. 메뉴가 갈 페이지 먼저 만들기

메뉴는 결국 어딘가로 가는 문입니다.
그래서 갈 곳을 먼저 만들어야 합니다.

왼쪽에서 ‘블록 관리’‘블록 페이지 관리’로 들어가
‘페이지 추가’ 버튼을 누릅니다.

블록 페이지 관리

입력할 것은 두 가지뿐입니다.
페이지 코드페이지 제목입니다.

페이지 추가 입력

페이지 코드는 주소가 됩니다.
코드를 about 으로 넣으면 그 페이지 주소는 /p/about 이 됩니다.
한글이 아닌 영문 소문자로 넣어 주세요.

제목은 회사소개로 넣겠습니다.
나머지 항목은 지금 건드리지 않아도 됩니다. 그대로 두고 저장합니다.

5. 저절로 생긴 메뉴 확인하기

이제 다시 ‘메뉴 관리’로 돌아가 보겠습니다.

아무것도 안 했는데 ‘회사소개’ 메뉴가 하나 늘어 있습니다.

자동으로 생긴 메뉴

블록 페이지를 만들면 같은 이름의 메뉴가 함께 만들어집니다.
제공자명 칸에 blockpage 라고 적힌 것이 그렇게 생긴 메뉴입니다.

그래서 페이지를 만들 때마다 메뉴를 따로 만들 필요가 없습니다.
이걸 모르고 손으로 또 만들면 같은 메뉴가 두 개가 됩니다.

6. 메인 메뉴에 올리기

메뉴가 만들어졌다고 홈페이지에 바로 보이지는 않습니다.
창고에서 꺼내 자리에 걸어야 합니다.

‘메인 메뉴’ 탭을 누르면 화면이 좌우로 나뉩니다.
왼쪽이 추가 가능한 메뉴, 오른쪽이 지금 걸려 있는 메뉴입니다.

메인 메뉴 탭

왼쪽 목록에서 ‘회사소개’ 오른쪽 끝의 파란 + 버튼을 누릅니다.
그러면 오른쪽 ‘메인 네비게이션’으로 넘어갑니다.

항목 왼쪽의 화살표 손잡이를 잡아 끌어다 놓아도 됩니다.
다만 + 버튼이 훨씬 편합니다.

메뉴 추가

끌어다 놓은 뒤에는 반드시 ‘저장’ 버튼을 눌러야 합니다.
저장하지 않고 다른 탭으로 옮기면 그대로 사라집니다.

7. 홈페이지에서 확인하기

저장했으면 홈페이지를 열어 봅니다.
관리자 화면 우측 상단의 집 모양 아이콘을 누르면 바로 넘어갑니다.

홈페이지에 걸린 메뉴

상단에 회사소개가 생겼습니다.
눌러 보면 아까 만든 /p/about 페이지로 들어갑니다.

아직 안이 비어 있는 건 정상입니다.
페이지 틀만 만들어 둔 상태니까요.

8. 순서 바꾸기와 빼기

메뉴 순서는 오른쪽 목록 안에서 위아래로 끌어 바꿉니다.
위에 있을수록 홈페이지에서도 왼쪽에 놓입니다.

메뉴를 빼고 싶을 때는 오른쪽 끝의 빨간 × 버튼을 누릅니다.
빼는 것이지 지우는 것이 아니라서, 왼쪽 창고에는 그대로 남아 있습니다.

메뉴 빼기

순서를 바꾼 뒤에도 ‘저장’을 눌러야 반영됩니다.

여기서 빼는 것지우는 것을 구분해 주세요.

오른쪽의 빨간 × 버튼은 이 자리에서만 내리는 것입니다.
메뉴 자체는 왼쪽 창고에 그대로 있어서 언제든 다시 올릴 수 있습니다.

메뉴를 아예 없애려면 ‘메뉴 아이템’ 탭으로 가서
그 줄 오른쪽 끝의 휴지통 아이콘을 눌러야 합니다.

메뉴 삭제 아이콘

휴지통을 누르면 정말 지울지 한 번 더 묻는 창이 뜹니다.
거기서 ‘확인’까지 눌러야 지워집니다.

다만 Core 로 표시된 기본 메뉴는 지우지 말아 주세요.
로그인이나 마이페이지가 사라지면 회원들이 길을 잃습니다.

9. 메뉴를 직접 만들기

블로그나 인스타그램처럼 바깥으로 나가는 메뉴는 직접 만들어야 합니다.
‘메뉴 아이템’ 탭에서 ‘메뉴 추가’ 버튼을 누릅니다.

메뉴 추가 폼

메뉴명은 화면에 보일 이름이고, URL은 갈 주소입니다.
바깥 주소는 https:// 부터 전부 적어 주세요.

바깥으로 나가는 메뉴라면 링크 타겟‘새 창’으로 바꾸시는 편이 좋습니다.
방문자가 우리 사이트를 떠나지 않게 됩니다.

여기서 하나 알아두면 좋은 것이 있습니다.
URL을 비워 두면 눌러도 아무 데도 가지 않는 메뉴가 됩니다.
하위 메뉴를 거느리는 제목용으로 쓰는 방법입니다.

10. 누구에게 보일지 정하기

같은 메뉴 추가 화면에 표시 대상접근 레벨이 있습니다.
이름이 비슷해서 헷갈리기 쉬운데 하는 일이 다릅니다.

표시 대상은 로그인 여부로 나눕니다.
‘전체’, ‘비로그인만’, ‘로그인만’ 중에 고릅니다.

접근 레벨은 회원 등급으로 나눕니다.
‘일반회원’으로 두면 로그인한 회원에게만 보입니다.
기본값인 ‘비회원’은 누구에게나 보인다는 뜻입니다.

표시 대상과 접근 레벨

회사소개처럼 누구나 봐야 하는 메뉴는 그대로 두시면 됩니다.

11. PC와 모바일 따로 정하기

메뉴 목록 표에는 PC모바일 칸이 따로 있습니다.
각각 ONOFF를 고를 수 있습니다.

모바일 화면은 좁아서 메뉴가 많으면 답답해집니다.
덜 중요한 메뉴는 모바일만 OFF로 두는 방법을 쓰시면 됩니다.

PC와 모바일 표시 설정

표에서 값을 바꾼 뒤에는 ‘선택 수정’을 눌러야 저장됩니다.

12. 푸터 메뉴 정리하기

‘푸터 메뉴’ 탭도 방식은 똑같습니다.
왼쪽에서 끌어다 오른쪽에 놓고 저장하면 됩니다.

설치 직후에는 홈, 이용약관, 개인정보처리방침이 들어 있습니다.
이용약관과 개인정보처리방침은 법으로 걸어 두어야 하는 것이니 빼지 말아 주세요.

푸터 메뉴

13. 로그인과 로그아웃은 왜 하나로 묶여 있을까

‘유틸리티 메뉴’ 탭을 열어 보시면 조금 다르게 생겼습니다.
메뉴 두 개가 화살표로 묶여 있습니다.

메뉴 쌍

로그인하지 않았을 때는 ‘로그인’이 보이고,
로그인하면 그 자리에 ‘로그아웃’이 대신 들어갑니다.
회원가입과 마이페이지도 같은 방식으로 자리를 바꿉니다.

이렇게 묶어 주는 것이 메뉴 추가 화면에 있던 메뉴 쌍 코드입니다.
같은 코드를 적어 둔 메뉴끼리 한 자리를 나눠 씁니다.

왼쪽 메뉴 아이템 목록을 보시면 이름 옆에 auth, account, mypage 같은
작은 딱지가 붙어 있는데, 그게 바로 이 쌍 코드입니다.

기본으로 들어 있는 쌍은 건드리지 않으셔도 됩니다.
직접 만든 메뉴를 묶고 싶을 때만 같은 코드를 적어 주시면 됩니다.

오늘 준비한 메뉴 만들어서 홈페이지에 걸기는 여기까지입니다!

정리하면 이렇습니다.
페이지 만들기 → 저절로 생긴 메뉴 확인 → 메인 메뉴로 끌어다 놓기 → 저장

메뉴가 걸리고 나면 그때부터 사이트처럼 보이기 시작합니다.
감사합니다!

글쓰기

댓글 0

등록된 댓글이 없습니다.