Part 5-9. 네비게이션 바 설정하기

내비게이션 바 설정 가이드

내비게이션 바 기본 설정하기

1. 브랜드 설정 (Brand)

• 로고 업로드: "Logo" 카테고리를 선택하여 웹사이트 로고 이미지를 업로드합니다
• 권장 크기: 200x50 픽셀, 투명 배경 PNG 파일이 가장 좋습니다
• URL: 로고 클릭시 어디를 갈 지 정합니다. 빈칸으로 해두면 기본 홈화면으로 가게 됩니다. 빈칸으로 놔두면 됩니다

• 로고가 없다면?



• Type에 Text로 선택하고 브랜드명이나 회사명을 기입하고 Save를 누릅니다!

2. 사이트 검색 기능 (Site Search)

• 검색 기능 활성화
토글 버튼을 켜면 웹사이트 내 검색 기능이 활성화됩니다

• 검색 기능을 하면요?
방문자가 원하는 콘텐츠를 빠르게 찾을 수 있어 사용자 경험이 향상됩니다

• 검색 박스 위치
내비게이션 바 오른쪽에 검색 아이콘이 표시되며 아래처럼 키워드 검색시 관련 키워드가 들어간 페이지를 알려줍니다!

내비게이션 링크 설정하기 (Navbar Links)

1. 기존 메뉴 관리

• 메뉴 수정: 연필 아이콘을 클릭하여 제목, 유형, URL을 수정할 수 있습니다

• 메뉴 삭제: 휴지통 아이콘을 클릭하여 불필요한 메뉴를 삭제할 수 있습니다

• 메뉴 순서 변경: 메뉴 앞의 6개 점(::)을 드래그하여 순서를 변경할 수 있습니다

• 새 탭에서 열기: "NEW TAB" 체크박스를 선택하면 해당 링크가 새 탭에서 열립니다

2. 새 메뉴 추가하기

1. 하단의 입력 필드에 메뉴 제목(Link Title)을 입력합니다

2. 페이지 유형(Page)을 선택합니다
• page: 일반 페이지 링크
• dropdown: 드롭다운 메뉴 (하위 메뉴 포함)

3. 연결할 페이지(Select a page)를 선택합니다

4. "Add" 버튼을 클릭하여 메뉴를 추가합니다

새로 만든 노션 페이지가 보이지 않는다고요?

노션 데이터페이스에 새로운 페이지를 추가하셨나요? 그렇다면 아직 노션의 변경 데이터베이스가 Bullet에 업데이트되지 않거나, Bullet 서버에 반영하는데 시간이 걸릴 수 있습니다.

홈페이지 publish 버튼을 눌러 발행한 후 페이지를 새로고침하여 확인해보세요!

3. 드롭다운 메뉴 설정

• 드롭다운이 뭐죠?
드롭다운은 내비게이션 바에 하위 메뉴를 만드는 기능이예요. 드롭다운 메뉴는 여러 하위 페이지를 그룹화하여 정리된 내비게이션을 제공합니다

• 네버슬립 사례
아래 네버슬립 사이트에서 "멤버십" 메뉴는 드롭다운으로 설정하였어요. "멤버십" 메뉴에 마우스를 올리면 해당되는 메뉴가 뜹니다. 아래처럼 [Bullet 실전 가이드] 페이지가 보이죠?!

• 드롭다운 메뉴 추가 후 하위 메뉴를 개별적으로 추가해야 합니다

• 마지막 save로 변경사항 저장하는 것 잊지마세요!

Call to Action 버튼 설정하기

1. CTA 버튼 관리

• 기존 버튼 관리: 연필 아이콘으로 수정, 휴지통 아이콘으로 삭제 가능

• 새 탭에서 열기: "NEW TAB" 옵션을 체크하면 새 탭에서 링크가 열립니다

2. 새 CTA 버튼 추가

1. 버튼 텍스트(Link Title)를 입력합니다

2. 버튼 유형(Page)을 선택합니다

3. 연결할 페이지(Select a page)를 선택합니다

4. "Add" 버튼을 클릭하여 CTA 버튼을 추가합니다

내비게이션 바 최적화 팁

1. 메뉴 구성 최적화

• 적절한 메뉴 수: 5개 이내로 메뉴를 구성하여 사용자가 혼란스럽지 않게 합니다

• 명확한 라벨링: 메뉴 이름은 짧고 명확하게 작성하세요 ("서비스" 대신 "서비스 소개" 같은 구체적인 표현)

• 중요도 순서: 가장 중요한 페이지를 왼쪽에 배치하고, 덜 중요한 페이지는 오른쪽이나 드롭다운에 배치하세요

2. CTA 버튼 문구

• "무료 30분 상담 신청 ", "선착순 구매하기" 등 전환을 유도하는 멘트로 추가하세요

3. 필수 변경사항 저장

• 모든 설정을 완료한 후에는 반드시 상단의 "Save" 버튼을 클릭하여 변경사항을 저장하세요

• 저장 후 실제 웹사이트에서 모든 링크가 올바르게 작동하는지 테스트하세요