[서비스기획] 메뉴구조도(Menutree)기획과 작성방법에 대해 알아보자

메뉴구조도(Menutree)란?

메뉴구조도란 앱/웹 사이트의 메뉴와 구조를 한눈에 파악하여 볼 수 있도록 정리해놓은 문서이다. 웹사이트의 사이트맵을 생각하면 쉽게 이해할 수 있다. 

 

메뉴구조도는 언제 작성할까?

메뉴구조도 작성은 주로 신규 서비스 구축, 서비스 고도화 시 초기단계에서 진행하는 작업으로써, 메뉴를 목적에 맞게 분류하고 추가, 수정, 삭제하여 메뉴의 구조를 한눈에 파악하는데에 목적이 있다. 

 

Depth가 뭔지 알려줘!

Depth란 "깊이"라는 뜻을 가진 용어로, 화면의깊이를 뜻한다. 메인화면은 0depth가 될 것이고, 서비스 화면의 깊이에 따라 1 Depth, 2 Depth, 3Depth 순으로 정의한다.

출처: 본인 - Depth 정의

 

1Depth는 그룹핑한 메뉴의 대표메뉴이다.

그렇기에 1Depth 메뉴의 이름은 하위 메뉴들을 공통적으로 표현할 수 있는 이름으로 정해야 한다. 메뉴 순서는 중요성에 따라, 오른쪽 부터 왼쪽 순서대로 메뉴와 서비스를 구조화하는 것이 메뉴구조도 작성의 핵심이다.

( 웹의 경우, 맨 첫번째 1 Depth 메뉴를 구조화 할때 웹사이트의 정체성을 보여주는 메뉴로 구성하는 것이 좋다. )

 

 

2Depth 는 실제 화면을 구성하는 메뉴이다.  

콘텐츠/ 게시판(목록 형, 썸네일 형)/  기능 페이지(로그인, 회원가입, 마이페이지 등) 으로 구분할 수 있다. 사용자들이 제공받을 수 있는 서비스 혹은 기능을 중심으로 구성된 메뉴이다.

 

 

3Depth 는 목적에 따라 게시판 내 카테고리, 콘텐츠, 기능으로 구성될 수 있다. 

구성 목적에 따라서 개발 및 화면의 구성을 고려하여 작성하는 것이 좋다. 게시판 의 경우 카테고리를 정의해야 하고, 콘텐츠 일 경우 콘텐츠 목록을 검토해야한다. 기능 의 경우, 사용자의 편의성을 위해 구성되는 경우가 대부분이므로 '어떤 목적을 가지고 탐색할지'에 대해 고민해 볼 필요가 있다. 

 

 

---

구성 목적1 : 기능 

정부24 메뉴구조도 - 3Depth 메뉴의 구성 : 기능

정부24는 사용자의 민원서비스를 처리해주는 사이트로써, 서비스 이용동의, 알림 수신동의, 회원탈퇴 등 기능을 중심으로 3Depth 메뉴가 구성되어있다. 원하는 기능을 한눈에 확인할 수 있는 장점이 있으며, 민원 처리 사이트의 목적성에 부합하다고 볼 수 있다. 

 

 

구성목적2 : 콘텐츠

청년몽땅정보통 3Depth 메뉴의 구성: 콘텐츠

청년몽땅정보통은 미래 청년 일자리, 서울형뉴딜일자리 등의 정책을 3Depth 메뉴로 구성하여 정책위주의 메뉴로 구성이 되어있다.  정책을 한눈에 볼 수 있는 구조이므로 정책의 무게감을 보여주고자 하는 목적이 있다. 단점으로는, 다양한 정책 사이에서 원하는 정책을 찾기 어려울 수 있다.   

 

 

구성목적3 : 게시판 내 카테고리 메뉴

충남청년포털 3Depth 메뉴의 구성 : 게시판 내 카테고리

충남청년포털은 청년정책을 게시판 형태로 보여주도록 구성되어있다. 일자리·금융 내의 2Depth메뉴인 '진로탐색, 취업지원, 창업지원, 금융지원'은 각각 게시판으로 구성되어 있고, 크게 청년정책 카테고리로 구분된다. 또한 청년 생활정보 하위의 3Depth 메뉴로 '취업 · 교육, 금융 · 정보, 마음 · 건강, 영농 · 자립'은 청년생활 고민소 게시판 내의 카테고리로 구성되어있다. ( 해당 사이트는 필자가 고도화 프로젝트에서 기획한 사이트로 오픈을 앞두고 있다.  )

 

 

 

어떻게 작성할까?

1. 핵심기능에 따라 구성될 메뉴를 작성한다.
2. "목적"에 따라 메뉴를 그룹핑 한다. (1,2,3 Depth)
3. 그룹핑 된 메뉴의 1Depth 메뉴의 이름을 수정 혹은 재구성한다. 

 

 

 

 

목적에 따라 달라지는 메뉴구조도 기획

메뉴구조도에도 기획이 필요하다. 웹/앱 서비스에서 사용자에게 제공하고자 하는 서비스의 '목적'이 다르기 때문일 것이다.

필자는 '충남청년포털' 고도화 프로젝트를 진행하면서 2가지 안의 메뉴구조도를 작성했다.

 

 

출처 : 본인 - 메뉴구조도(1)

1안은 3Depth 를 콘텐츠(정책)으로 구성한 메뉴구조도이다. 

위에서 말했 듯, 정책을 3Depth로 구성하게 되면 정책의 무게감을 보여주는 동시에 모든 정책을 메뉴에서 확인할 수 있다. 하지만 정책의 개수에 따라서 메뉴를 구성하는 화면(GNB)이 변경될 수 있고, 가시성이 떨어질 수 있다는 단점이 있다. 

 

 

 

출처 : 본인 - 메뉴구조도(2)

 

2안은 3Depth를 게시판 내 카테고리로 구성한 메뉴구조도 이다.

게시판 형태로 정책을 확인하고 모아볼 수 있어 깔끔해보이지만, 정책을 가볍게 보여줄 수 있다는 점이 장점이자 단점이다. 또한 메뉴의 개수에 따라 비어있는 인상을 줄 수 있어, 메뉴의 무게중심을 잘 맞추어 구성해야한다. 충남청년포털의 경우 고객사의 의견에 따라 2안으로 확정되었다. 

 

 

↓ 함께보면 좋은 서비스 기획 포스팅 ↓

[본인인증] 휴대폰 본인인증 번호로 알림톡을 발송하는 서비스 가능할까? (feat. PASS, Nice평가정보)

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 1 (UI 가이드와 타

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 2 (feat.개발자에