홈페이지 메뉴, 꼭 윗줄에 가로로 놓아야 할까: 메뉴 구조가 다른 시안 9개

홈페이지 메뉴는 거의 다 똑같습니다. 왼쪽 위에 로고, 오른쪽 위에 '회사소개 · 서비스 · 포트폴리오 · 문의' 한 줄. 틀린 건 아닙니다. 다만 메뉴 항목이 네다섯 개뿐인 작은 회사라면, 메뉴 자체를 그 회사다운 모양으로 만들 수 있습니다. 10월에 추가한 내비게이션 시안 20개 가운데 9개를 골라 첫 화면 그대로 보여 드립니다. 글보다 그림이 많은 글입니다.

아홉 시안은 모두 직접 눌러볼 수 있습니다. 아래 링크는 PRISM HALL 시안으로 열리고, 같은 화면의 화살표로 나머지 시안을 이어서 볼 수 있습니다.

PRISM HALL 시안 직접 눌러보기 →

1네 모서리: PRISM HALL (전시관)

메뉴가 화면 네 귀퉁이에 있습니다. 왼쪽 위 '01 EXHIBITIONS 지금 만나는 전시', 오른쪽 위 '02 THE HALL 공간과 시선', 왼쪽 아래 '03 HAPPENINGS 함께 보는 시간', 오른쪽 아래 '04 YOUR VISIT 방문을 준비하며'. 가운데는 기울어진 전시 작품 한 점과 'Between the light.'라는 전시 제목뿐입니다. 전시장에 들어서면 작품이 가운데, 안내판이 벽 귀퉁이에 있는 것과 같은 배치입니다.

2서랍 목차: VAULT ARCHIVE (디자인 아카이브)

왼쪽 세로 칸이 목차입니다. 'A COLLECTION / 소장품'을 열면 'A.01 오브젝트 목록 · A.02 수집 기준 · A.03 재료 도감'이 펼쳐지고, 'B RESEARCH / 연구', 'C PUBLIC / 열린 자료'는 접혀 있습니다. 타자기 글꼴과 '+' '−' 기호가 서랍 손잡이 역할을 합니다. 항목이 많은 자료실·연구소·법률사무소처럼 분류와 하위 항목 구조가 필요한 곳에 맞습니다. 윗줄 가로 메뉴에 드롭다운을 다는 것보다 어디를 열었는지가 늘 보입니다.

3노선도: TRAVERSE (철도 여행사)

큰 사진 아래에 정거장 다섯 개가 선으로 이어져 있습니다. '01 노선 선택 · 02 출발 준비 · 03 동네 산책 · 04 하룻밤 · 05 여행 계획'. 메뉴이면서 여행의 순서입니다. 누르면 그 섹션으로 내려가고, 스크롤하면 현재 정거장이 칠해집니다. 순서가 있는 서비스(여행, 시공, 입학 절차)에 잘 맞는 구조입니다.

휴대폰에서는 가로 노선이 세로 노선이 됩니다. 'YOUR JOURNEY ↓' 아래로 정거장이 한 줄씩 쌓입니다. 이 글의 아홉 시안이 모두 이렇게 휴대폰에서는 세로로 다시 쌓는 규칙을 갖고 있습니다. 메뉴를 특이하게 만들 때 가장 먼저 정해야 하는 게 이 규칙입니다. PC에서만 멋진 메뉴는 손님의 절반을 놓칩니다.

4목차 열기 버튼 하나: BUREAU INDEX (건축사무소)

첫 화면에 메뉴가 없습니다. 오른쪽 위 '목차 열기 +' 버튼 하나뿐이고, 화면은 'Space is an ongoing conversation.'이라는 큰 문장이 차지합니다. 버튼을 누르면 화면 전체를 덮는 큰 활자의 디렉터리가 열립니다. 작업 수가 적고 한 점 한 점을 크게 보여주고 싶은 건축·사진·공예 스튜디오에 맞습니다. 메뉴를 숨기는 대신 '선별한 작업 04 ↓' 같은 안내 문구를 첫 화면에 둬서 길을 잃지 않게 했습니다.

5시간표: FREQUENCY (공연장)

로고 아래 한 줄이 '18:00 DOORS OPEN · 19:00 ON STAGE · 21:00 AFTER HOURS · 22:00 MEET HERE'입니다. 공연장에 오는 사람의 하루 순서가 메뉴입니다. 오른쪽 위에는 'NEXT SOUND AT 19:00'이 깜빡입니다. 어두운 바탕에 형광 연두색 하나만 써서 무대 조명 느낌을 냈습니다. 시간대로 서비스가 나뉘는 곳(공연장, 목욕탕, 조식·런치·디너 식당)에 쓸 수 있습니다.

6폴더 탭: LEDGER ROOM (경영 컨설팅)

서류 폴더의 탭이 메뉴입니다. '01 관점 · 02 업무 파일 · 03 프로젝트 · 04 첫 대화' 네 탭이 살짝 겹쳐 있고, 지금 열린 탭(04 첫 대화)만 진한 초록입니다. 탭 아래 종이 위에는 '지금, 무엇부터 정리하면 될까요?'라는 메모와 세 줄 체크리스트가 놓였습니다. 컨설팅·회계·법무처럼 서류가 일의 단위인 업종에 어울리고, 윗줄 가로 메뉴와 구조는 같아서 손님이 헤매지 않습니다.

7접지 안내서: GROVE CONSERVATORY (식물원)

관광지에서 받는 세 겹 접지 안내서를 펼친 모양입니다. 왼쪽 날개에 '01 산책 안내서 · 02 정원의 이야기', 오른쪽 날개에 '03 처음 오는 날 · 04 정원사의 메모 · 05 방문과 문의', 가운데에 온실 사진과 '가을의 빛과 잎'. 오른쪽 위 '봄 · 여름 · 가을 · 겨울' 버튼을 누르면 가운데 사진과 문구가 계절에 맞게 바뀝니다. 식물원·수목원·박물관·관광 안내 홈페이지에 그대로 쓸 수 있는 구조입니다.

8향의 서랍: SILLAGE (조향 스튜디오)

'01 향을 고르다 · 02 이야기를 열다 · 03 시향을 배우다 · 04 직접 만나다'. 서랍 네 칸이 세로로 쌓여 있고 색이 다 다릅니다. 열린 칸(01)에는 한 줄 설명과 '컬렉션 전체 보기 ↗' 링크가 보이고, 나머지는 '+'로 닫혀 있습니다. VAULT ARCHIVE의 서랍이 분류라면 SILLAGE의 서랍은 안내입니다. 메뉴를 누르기 전에 그 메뉴에 뭐가 있는지 한 줄로 알려줍니다. 향수·차·와인처럼 설명이 필요한 상품에 맞습니다.

9티켓 사이드바: EMBER TABLE (레스토랑)

왼쪽에 절취선이 있는 티켓이 세로로 붙어 있고, 그 안에 '01 불을 돌보는 사람들 · 02 이번 계절의 코스 · 03 밭에서 식탁까지 · 04 저녁을 위한 자리'와 영업시간 '화–토 18:00—22:00'이 적혀 있습니다. 메뉴가 늘 왼쪽에 고정되어 스크롤해도 따라옵니다. 코스 레스토랑처럼 한 번 방문에 읽을 내용이 긴 홈페이지에서, 메뉴를 사이드바로 고정하면 돌아갈 길이 항상 보입니다.

10메뉴 모양을 고르는 세 가지 질문

심플웹은 모든 홈페이지를 PC·태블릿·휴대폰에 맞춰 반응형으로 만듭니다. 메뉴 모양은 디자인 단계에서 두세 가지 안을 그려 보고 고릅니다.