by
Dec 14. 2020
메뉴구조도_양식(샘플)
정의 및 사용시기, 작성방법 공유
안녕하세요~ :D
오늘은 기획자가 많이 작성하는 문서 중 '메뉴구조도'에 대해서 알아보려고 합니다.
메뉴구조도는 무엇이며,언제 사용하고,어떻게 작성하는지에대해서 제가 작성했던 양식을 바탕으로 간단하게 설명드리겠습니다.
메뉴구조도란?
메뉴구조도는 사이트에 구성되어야 하는(혹은 구성되어 있는) 페이지를 트리형태로 표현한 문서로 보통 메뉴 간의 상/하관계와 기능 등을 엑셀로 작업하는 문서입니다.
조금 더 쉽게 설명을 해드리면 홈페이지에 있는 메뉴들을 연관 있는 것끼리 모아서 정리를 한 문서라고 생각하면 됩니다.
제가 좋아하는 회사 중 한 군데인 '네이버(NAVER)' 홈페이지를 예를 들어 설명을 드리겠습니다.
https://www.navercorp.com/naver/company
위 링크에 접속을 하면 상단에 '네이버 | 서비스 | 가치실현 | 홍보 | 투자정보 | 채용'이라는 메뉴가 보입니다.
이러한 메뉴들은 1Depth로 표현을 하며, 네이버그룹 홈페이지에서 많은 메뉴들을 6개의 대표그룹으로 구성해놓았다고 생각하면 됩니다.
(물론, 1Depth의 메뉴이지만 메인 등에서 노출을 시키지 않는 경우도 존재합니다)
이번에는 1Depth 처음에 위치한 '네이버'라는 메뉴를 클릭하면 하단에 '네이버' 메뉴와 연관이 있는 서브메뉴들이 노출됩니다.
여기서 'NAVER | 주요관계사 | 제휴제안 | CONTACT'가 2Depth가 됩니다.
그 다음으로는 '제휴제안' 하단에 위치한 '제휴제안 안내 | 제휴제안 등록 | 검토현황 조회'메뉴가 3Depth메뉴가 됩니다.
메뉴구조는 깊이가 깊을수록 사용자 편의성에 좋지 않기 때문에 3Depth로 구성하는 경우가 많지만 4Depth가 존재하거나 TAB 등이 존재할 수 있습니다.
이렇게 사이트의 전체적인 메뉴 정보들을 한눈에 알아볼 수 있도록 그룹화한 것을 메뉴구조도라고 말합니다.
메뉴구조도는 언제 사용하나요?
메뉴구조도를 작성하는 이유는 다양합니다.
저의 경우에는 벤처기업과 중소기업(SI업체)에 다닐 때 주로 메뉴구조도를 작성하였으며 이유는 다음과 같았습니다.
1) 제안서 작성을 위한 사전조사
2) 시스템(홈페이지) 신규 구축
3) 시스템(홈페이지) 고도화/리뉴얼
SI업체의 경우 새로운 사업에 참여하기 위해 제안서를 작성하는데 이때 가장 기본이 되는 사항은 기존 시스템을 분석하고 이해하여야 합니다.
'현재 ㅇㅇ홈페이지의 구조는 어떻게 되어있는지? 어떤 기능들이 있는지? 어떤 불편함이 있는지?' 등을 분석해야 하는데, 이때 가장 먼저 진행을 해야 하는 부분이 메뉴구조도 작성입니다.
또한, 시스템을 신규 구축하는 경우에도 메뉴구조도를 작성해야 합니다.
현업의 요구사항을 모두 수집 및 분석한 다음에 요구사항 어떤 메뉴에 어떤 식으로 적용시키고 이러한 메뉴들을 어떻게 구성을 하면 좋을지 등을 메뉴구조도에 1차적으로 표현합니다.
메뉴구조가 잘못 세워지는 경우에는 화면설계 등을 할 때 지장이 갈 수 있으므로 꼼꼼하게 메뉴 간의 관계와 사용자 편의성 등을 고려하여 설계를 하는 것이 좋습니다.
메뉴구조도는 어떻게 작성하나요?
메뉴구조도는 딱 정해진 양식이 없습니다.
저 또한 메뉴구조도를 작성하는 목적, 플랫폼 유형, 팀구성원 등에 따라 다르게 작성을 하는 편입니다.
1) 목적
- 신규로 구축해야 하는 시스템인 경우 : 요구사항을 바탕으로 1차적으로 메뉴 구성을 한 뒤, 이러한 메뉴를 다시 그룹화하는 방식으로 진행
- 제안서 작성을 위해 분석하는 경우 : 현재 시스템의 메뉴구조 및 기능을 그대로 작성
- (2개 이상의) 홈페이지를 통합하는 경우 : 각각의 홈페이지의 메뉴구조 및 기능을 1차적으로 작성 한 뒤, 통합 가능한 메뉴와 불가능한 메뉴를 분류
2) 플랫폼 유형
- WEB : 앞에서 설명한 방식대로 메뉴구조도 작성
- APP : 메뉴의 상/하관계를 고려하여 메뉴구조도를 작성하지만 메뉴간의 이동을 할 수 있는 부분을 함께 기재
3) 팀구성원
- 메뉴구조도를 작성할 때 함께 프로젝트를 진행할 팀원들의 이해를 돕기 위하여 각 메뉴의 기능(CRUD)까지 같이 기재하는 경우도 존재
- 참고사항
① CRUD는 데이터베이스 기준으로 개발자분들이 작업을 하는 부분이지만 기획단에서 이러한 부분을 정리해 주는 경우도 있음
② 팀원에 따라 이러한 CRUD를 작성해 주는 것을 좋아하는 사람도 존재하는 반면 월권이라고 생각하는 사람도 존재함
③ C - 생성, R - 조회, U - 업데이트, D - 삭제
메뉴구조도 작성 공부하는 Tip
1) 대기업 그룹 홈페이지에 접속합니다. (네이버그룹, 삼성그룹, 카카오그룹, CJ그룹, 현대그룹 등)
2) 메뉴들을 다 클릭하면서 메뉴구조도를 1차적으로 작성합니다.
3) 작성한 메뉴구조도와 홈페이지의 '사이트맵'을 비교하면서 자신이 누락한 부분이 있는지 등을 확인합니다.
4) 새로운 파일을 다시 열어 홈페이지의 메뉴들을 다시 작성해봅니다.
5) 이번에는 추가적으로 각 메뉴의 기능들을 '설명' 란에 상세하게 작성을 합니다.
6) 그 이후 해당 메뉴에서는 새로운 값을 등록할 수 있는지? 삭제할 수 있는? 조회만 하는지? 등을 기재합니다.
메뉴구조도 양식은 약 3년 전 정도에 부사수에게 설명을 해주기 위해 작성한 자료로 참고용으로만 봐주세요.
첨부파일은 네이버 블로그를 통해 업로드 하고 있으므로 아래 링크에 접속해서 확인하시면 됩니다 :D
https://blog.naver.com/dreamiter/222170526698
※ 기획업무와 기획자 관련되어 컨설팅이 필요하신 분들은 아래 링크를 참고해주세요.
※ 기획업무를 하면서 궁금하신 사항은 아래 카카오 오픈채팅방에 들어오셔서 물어보시면 됩니다.
https://open.kakao.com/o/g4uIw5Kc
※ 각종 기획문서(화면설계서, 메뉴구조도 등)와 취업/이직문서(경력기술서, 포트폴리오 등)는 네이버 블로그나 티스토리를 통해 다운로드 받으실 수 있습니다^_^
https://m.blog.naver.com/dreamiter
https://dreamiter.tistory.com/
