PC에서는 메뉴가 맞는데 휴대폰에서는 순서가 다르거나, 메뉴 이름을 어디서 고쳐야 할지 막막한가요? CodeBuilder의 🧭 메뉴에서 ✎ 이름과 ▲·▼를 사용하면 같은 메뉴 구조가 PC와 모바일에 함께 반영됩니다. 단, 미공개 편집 경고가 보이면 먼저 멈춰야 합니다.
이 글의 목표는 이미 있는 메뉴 하나의 이름을 바꾸고 원하는 위치로 옮긴 뒤, PC와 휴대폰 실제 화면에서 이름·순서·링크를 직접 확인하는 것입니다.
버튼명과 동작은 2026년 8월 30일 CodeBuilder 원본 화면·코드에서 확인했습니다. 아래 이미지는 실제 고객 사이트가 아니라 원본 UI 명칭을 바탕으로 자체 제작한 설명용 재현이며, 메뉴와 사이트 내용은 모두 가상 예시입니다.
먼저 알아둘 점: 메뉴 변경은 공개 사이트에도 바로 반영됩니다
🧭 메뉴 관리 — PC·모바일 동시 적용은 PC용 메뉴와 모바일 메뉴를 따로 고치는 기능이 아닙니다. 같은 메뉴 구조를 한 번 수정해 두 화면에 함께 적용합니다.
또한 이 기능은 일반 페이지 편집처럼 마지막에 🚀 공개 반영을 기다리지 않고 헤더의 작업본과 공개본을 함께 바꿉니다. 따라서 메뉴를 열었을 때 다음 경고가 보이면 아무 버튼도 누르지 말고 먼저 닫습니다.
⚠️ 아직 공개하지 않은 편집이 있습니다. 여기서 메뉴를 바꾸면 그 편집도 함께 사이트에 반영됩니다.
경고에 적힌 header.html 또는 subtop.html 편집을 먼저 검토해 공개할지 되돌릴지 정한 뒤 메뉴 작업으로 돌아오세요. 작업 전에는 현재 공개 메뉴의 이름과 순서를 메모하거나 화면으로 남겨 두면 복구 기준이 됩니다.
1. 위쪽 ‘🧭 메뉴’를 열어 주소와 이름을 함께 봅니다
CodeBuilder 위쪽 도구모음에서 🧭 메뉴를 누릅니다. 🧭 메뉴 관리 — PC·모바일 동시 적용 창에는 각 메뉴의 이름과 연결 주소가 한 줄씩 표시됩니다.
- 바꾸려는 메뉴 이름을 찾습니다.
- 바로 아래 주소가 기대한 페이지인지 확인합니다.
- ⚠ 페이지 없음이 보이면 이름이나 순서를 바꾸기 전에 연결할 페이지부터 확인합니다.
이 글에서는 가상 사이트의 회사소개 메뉴가 about.html에 연결돼 있는지 먼저 확인합니다.
2. ‘✎ 이름’으로 방문자가 이해하기 쉬운 이름으로 바꿉니다
대상 행의 ✎ 이름을 누르면 새 메뉴 이름을 입력하세요. 창이 열립니다. 예를 들어 회사소개를 브랜드 이야기로 바꾸고 확인합니다.
이름 바꾸기는 표시 문구를 고치는 작업입니다. 아래에 보이는 about.html 같은 연결 주소는 그대로인지 다시 확인하세요. 이름은 짧고 구체적으로 쓰고, PC 상단 메뉴와 휴대폰 메뉴에서 한 줄로 읽히는 길이를 권장합니다.
3. ‘▲·▼’로 한 칸씩 옮겨 원하는 순서를 만듭니다
메뉴 순서는 드래그하지 않습니다. 각 행 오른쪽의 ▲와 ▼를 눌러 한 칸씩 옮깁니다. 예를 들어 브랜드 이야기를 서비스 뒤로 보내려면 필요한 만큼 ▼를 누릅니다.
버튼을 누를 때마다 즉시 반영되므로 한 번 움직인 뒤 목록을 다시 읽고 다음 버튼을 누르세요. 여러 칸을 급하게 연속 클릭하면 의도한 위치를 지나치기 쉽습니다.
4. 하위 메뉴는 들여쓴 목록 안에서 따로 정리합니다
상위 메뉴 아래에 하위 메뉴가 있으면 들여쓴 목록과 ＋ 하위 메뉴 추가가 보입니다. 하위 메뉴의 작은 ✎, ▲, ▼는 그 상위 메뉴 안에서만 이름과 순서를 바꿉니다.
상위 메뉴와 하위 메뉴를 혼동하지 않도록 먼저 들여쓰기와 연결 주소를 확인하세요. 하위 메뉴가 있는 상위 항목은 실수로 페이지 묶음이 끊어지지 않도록 삭제가 막혀 있습니다.
5. 창을 닫고 PC와 휴대폰에서 이름·순서·링크를 확인합니다
메뉴 관리 창을 닫으면 CodeBuilder가 페이지 목록과 헤더 미리보기를 다시 맞춥니다. 변경은 이미 공개본에도 반영됐으므로 작업 화면만 보고 끝내지 말고 실제 사이트 주소를 새 창에서 엽니다.
- PC: 상단 메뉴에서 새 이름과 순서를 왼쪽부터 읽습니다.
- 휴대폰: 메뉴 버튼을 열어 같은 이름과 순서인지 확인합니다.
- 링크: 바꾼 메뉴를 PC와 휴대폰에서 각각 눌러 기대한 페이지로 이동하는지 봅니다.
- 하위 메뉴: 펼침과 터치가 가능하고 상위 메뉴 안의 순서가 맞는지 확인합니다.
모바일에서는 이름이 너무 길어 두세 줄로 쪼개지거나, 메뉴 버튼의 터치 영역을 밀어내지 않는지도 함께 확인하세요.
메뉴가 예상대로 보이지 않을 때
- 미공개 편집 경고가 나옵니다: 메뉴 버튼을 누르지 말고 창을 닫습니다. 경고에 표시된 헤더 편집을 먼저 검토합니다.
- ‘⚠ 페이지 없음’이 보입니다: 해당 주소의 페이지 파일이 있는지 확인합니다. 새 페이지와 메뉴를 함께 만드는 순서는 오시는 길 메뉴·페이지 만들기를 참고하세요.
- 헤더가 메뉴관리로 바뀌었다는 안내가 나옵니다: 열어 둔
inc/header.html또는inc/subtop.html을 그대로 저장하지 말고 다시 열어 최신 내용과 맞춥니다. - 이름은 맞지만 다른 페이지가 열립니다: 이름 변경과 주소 변경은 다른 작업입니다. 버튼·링크 연결은 ‘내 페이지…’ 링크 연결 방법으로 확인하세요.
- 예전 메뉴가 보입니다: 실제 사이트를 새로고침한 뒤 PC와 휴대폰을 다시 확인합니다. 그래도 다르면 메뉴 관리 창의 현재 목록과 실제 주소를 비교합니다.
메뉴 이름·순서 변경 완료 확인표
- 작업 전 공개 메뉴의 이름과 순서를 기록했다.
- 미공개 헤더 편집 경고가 없는 상태에서 시작했다.
- ✎ 이름 뒤에도 연결 주소가 기대한 페이지를 가리킨다.
- ▲·▼로 한 칸씩 옮겨 최종 순서를 다시 읽었다.
- 상위 메뉴와 하위 메뉴의 들여쓰기·순서를 따로 확인했다.
- PC와 휴대폰 실제 사이트에서 이름·순서·링크를 각각 확인했다.
