Part 3-4. 메뉴바와 네비게이션

웹사이트에 여러 페이지가 있다면, 방문자가 쉽게 이동할 수 있어야겠죠.

Oopy에서는 상단 메뉴바와 하단 네비게이터를 추가할 수 있습니다. 콘솔에서 클릭 몇 번이면 돼요.

Oopy 콘솔에서 "스타일 설정" → "메뉴바"로 들어갑니다.

메뉴바를 활성화하면 사이트 상단에 고정된 네비게이션 바가 생겨요.

메뉴에 들어갈 항목을 추가합니다.

라벨 — 메뉴에 표시될 텍스트입니다. "홈", "소개", "포트폴리오", "연락처" 같은 거요.

URL — 해당 메뉴를 클릭하면 이동할 주소입니다.

같은 사이트 내 페이지라면 상대 경로를 쓰면 돼요.

외부 링크도 가능합니다. 인스타그램이나 링크드인 프로필로 연결하고 싶다면 전체 URL을 넣으세요.

메뉴바 왼쪽에 로고나 사이트 이름을 넣을 수 있습니다.

이미지를 업로드하거나, 텍스트로 사이트 이름을 표시할 수 있어요. 로고를 클릭하면 홈으로 이동하게 설정하는 것도 가능합니다.

메뉴 항목이 많다면 드롭다운으로 묶을 수 있습니다.

예를 들어 "서비스"라는 메뉴 아래에 "컨설팅", "강의", "코칭"을 하위 항목으로 넣는 거예요.

서브메뉴 추가를 누르셔서 하위 메뉴를 넣으시면 됩니다!

페이지 하단에도 네비게이션을 추가할 수 있습니다. "이전 글 / 다음 글" 같은 형태예요.

블로그처럼 글이 여러 개 있는 사이트에서 유용합니다.

Oopy 콘솔에서 "스타일 설정" → "네비게이터"로 들어가서 설정할 수 있어요.

이전/다음 페이지 — 현재 페이지 기준으로 이전, 다음 페이지로 이동하는 버튼이 생깁니다.

목록으로 돌아가기 — 상위 페이지(목록)로 돌아가는 링크를 추가할 수 있어요.

메뉴바를 만들기 전에 사이트 구조를 먼저 정리하는 게 좋습니다.

종이에 대충 그려보세요.


홈
├── 소개
├── 포트폴리오
│   ├── 프로젝트 A
│   ├── 프로젝트 B
│   └── 프로젝트 C
├── 블로그
│   ├── 글 1
│   ├── 글 2
│   └── 글 3
└── 연락처

이런 식으로 구조가 잡히면, 메뉴에 뭘 넣어야 할지 명확해집니다.

메뉴 항목은 5~7개가 적당해요. 너무 많으면 오히려 혼란스럽습니다. 정 많다면 드롭다운으로 묶거나, 덜 중요한 건 하단 네비게이터로 빼세요.

메뉴바를 만들었다면 반드시 모바일에서도 확인해보세요.

Oopy가 자동으로 반응형 처리를 해주긴 하지만, 메뉴가 너무 많으면 모바일에서 보기 불편할 수 있어요.

햄버거 메뉴(≡)로 접히는지, 글씨가 잘리지 않는지 체크하고, 필요하면 조정하세요.

메뉴바와 네비게이션까지 설정했으면, 이제 사이트 구조가 잡힌 겁니다.

다음은 방문자의 행동을 유도하는 CTA 버튼과 팝업을 만들어볼게요.

후기 작성(클릭)하고 내 홈페이지 SEO 피드백 보고서 받아보세요!