여러 페이지로 나누기

언제 나누나요?

한 장짜리(원페이지)도 훌륭한 홈페이지입니다. 나누는 건 이럴 때입니다.

• 메뉴가 10개 넘어 한 장이 너무 길어짐
• 검색에서 "메뉴", "오시는 길" 각각으로 찾아지길 원함
• 문의 폼처럼 독립된 기능이 생김

나누기로 했다면 구조는 이렇습니다.

my-site/
├─ index.html        ← 소개 (첫 화면)
├─ menu.html         ← 메뉴 전체
├─ location.html     ← 오시는 길
├─ contact.html      ← 문의
├─ style.css         ← 모든 페이지가 공유
└─ images/

주소는 mycafe.kr/menu.html 처럼 됩니다. (9강에서 .html을 뗍니다.)

따라하기 1: 두 페이지로 먼저 (★★ 보통 · 약 15분)

한 번에 네 페이지를 만들면 어디가 틀렸는지 찾기 어렵습니다. 소개(index)와 메뉴(menu) 두 페이지만 먼저 나눠 보세요.

새로고침 → 상단 "소개 / 메뉴"를 눌러 두 페이지가 오가는지 확인합니다.

따라하기 1-2: 네 페이지로 (★★★ 어려움 · 약 20분 · 선택)

두 페이지가 잘 되면 나머지 두 장을 추가합니다. 페이지가 많을수록 상단 메뉴와 링크 관리가 어려워지니, 꼭 필요한 만큼만 나누세요.

공통 부분 문제

나누고 나면 문제가 하나 생깁니다. 상단 메뉴를 고치려면 네 파일을 전부 고쳐야 합니다. 전화번호가 바뀌면 하단 네 군데를.

해결 방법은 두 가지입니다.

방법 A: Claude에게 한꺼번에 시키기 (지금은 이걸로)

Claude Code는 파일 여러 개를 한 번에 고칠 수 있습니다. 페이지가 5개 이하면 이걸로 충분합니다.

방법 B: 공통 부분을 한 곳에 (페이지가 많아지면)

"헤더와 푸터를 한 파일에 두고 모든 페이지가 가져다 쓰기". 이렇게 하려면 정적 사이트 생성기(Astro, Eleventy 등)라는 도구가 필요합니다. 페이지가 10개를 넘어가면 그때 Claude Code에게 "이 사이트를 Astro로 옮겨줘"라고 하면 됩니다. 지금은 아닙니다.

따라하기 2: 메뉴 페이지 다듬기

메뉴 페이지는 가장 자주 보는 페이지입니다.

따라하기 3: 가격표 같은 반복 내용

메뉴가 30개라면 30번 말하기 힘듭니다. 표로 주고 옮기게 하세요.

엑셀이나 메모장에 정리해둔 걸 붙여넣으면 됩니다. 나중에 가격이 바뀌어도 같은 방식으로.

따라하기 4: 페이지 사이 이동 점검

• 로고(가게 이름)를 누르면 index.html로
• 모든 페이지에서 상단 메뉴가 같은 위치, 같은 모양
• 현재 페이지가 메뉴에서 표시됨
• 첫 화면의 "전체 메뉴 보기"가 menu.html로

git add .
git commit -m "네 페이지로 분리, 메뉴 페이지 정리"

오늘의 실습 체크

다음 강의

3부 시작. 8강에서 인터넷에 올립니다. 오늘 만든 홈페이지를 폰으로 열어보게 됩니다.