앱/웹 제작 시 숲을 볼 수 있는 '서비스 메뉴 구조도(IA)' 작성법

내 서비스의 메뉴 구조도를 탄탄하게 작성하면 프로젝트 드롭 없이 서비스를 성공적으로 런칭할 수 있습니다.

앱/웹 서비스를 기획하기 전 서비스에 어떤 기능을 포함할 것인지, 버튼을 클릭하면 어떤 페이지로 이동하게 할지 등 전체 서비스의 구조를 어떻게 할 것인지 계획하고, 정리해야 합니다. 이때 필요한 것이 바로 서비스 메뉴구조도인데요. 서비스 메뉴 구조도란 무엇일까요?

서비스 메뉴 구조도란?

서비스 메뉴 구조도(IA)는 Information Architeture의 줄임말로, 정보 구조도라도 하고, 업계에서는 통상적으로 IA라고 합니다. 그러나 저희 밸류랩스에서는 일반인들도 쉽게 이해하고 사용할 수 있는 '메뉴'란 용어를 활용한 '서비스 메뉴 구조도'라고 명명하여 사용하고 있습니다.

앱 또는 웹 사이트 전체를 구성하는 페이지들의 구성 체계라고 할 수 있습니다.

기본적으로 '서비스 메뉴 구조도'는 아래 이미지와 같이 가로 형태로 나열하여 뎁스(Depth) 단계별로 구분하고 각 뎁스의 요소, 추가설명 등을 정리해나가는 방식입니다. 더 나아가 서비스 메뉴 구조도가 완성되면 WBS(Work Breakdown Structure, 작업 분할 구조도)의 요소인 담당자와 일정을 표시해 각 메뉴별로 누가 언제까지 기획, 디자인, 개발 등을 해 나가겠다라고 표기하고 진척 관리를 하게 됩니다.

그렇다면, '서비스 메뉴 구조도(IA)'는 어떻게 작성해야 할까요?

서비스 메뉴 구조도 구성 요소

1) 메뉴명 및 Depth

샘플 서비스 메뉴구조도 (서비스 배달이츠) - 메뉴명 및 Depth 관련 표시

Depth는 구조의 깊이라고 표현하는데 이는 메뉴의 서브 메뉴 단계를 의미합니다. 즉, 상위메뉴에서 하위로 들어갈 수록 숫자가 증가하고, 같은 화면에 있는 메뉴들은 같은 Depth로 구분하게 됩니다.​

1Depth 메뉴는 어떤 앱/웹 서비스든 처음에 서비스를 사용할 때 육안으로 확인할 수 있는 메뉴들이라고 보시면 됩니다. 위 탈잉의 메뉴구조도를 보면 1뎁스에서 모바일앱 시작, 홈, 검색 메뉴들이 구성된 것을 확인하실 수 있습니다.

2뎁스는 1뎁스의 하위 메뉴입니다. 위 홈 메뉴를 보면 홈 메뉴 하위에 수업 추천, VOD 수업, 신규 수업 안내가 Tab으로 구성된 것을 확인할 수 있습니다. 해당 메뉴들을 2뎁스 메뉴로 구분해놔야 해당 메뉴들에 대한 기획, 디자인, 개발을 누락 없이 할 수 있게 됩니다.

만약, VOD 수업, 신규 수업 안내를 표기하지 않고, 그냥 1뎁스 홈으로만 표현하고 기획할 경우 디자인 단계 또는 개발 단계에서 VOD 수업 기획이 없네요? 이 부분 디자인 어떻게 하면 되나요? 누락된 기획 언제까지 해주실 수 있나요?라고 확인하게 되면서 전체적인 오픈 일정이 변경되게 됩니다.

그리고, 서비스 메뉴 구조도 작성 시 뎁스는 가급적이면 4Depth를 초과하지 않도록 해주시는 게 좋습니다. 뎁스가 깊어질 수록 서비스를 사용하는 사용자는 해당 뎁스까지 터치해서 들어가게 되고, 다시 다른 카테고리 등을 탐색할 경우 다시 뒤로, 뒤로 터치를 하면 나와야 하는 등 서비스 사용성에 있어서 문제가 있게 됩니다. 쿠팡, 배달의 민족과 같이 포털 규모의 서비스에선 깊은 뎁스가 불가피하겠지만 초기 스타트업 서비스들은 가급적 예외적인 경우를 제외하고는 3Depth까지만 구성해서 사용성을 높인 구조로 기획하는 것이 좋습니다.

2) 화면 구분

샘플 서비스 메뉴구조도 (서비스 배달이츠) - 화면 구분

화면 구분은 해당 페이지가 어떤 형식으로 표출되게 할지 구분하는 영역입니다. 일발적인 화면 전체를 채우는 형태로 표출될 때는 'Page'로 기재하고, 동일한 페이지를 다른 섹션에도 공통으로 표출할 때는 '공통'으로 기재해 주시면 됩니다.

예를 들어, 선생님 대상 공지사항 게시판과 학생 대상 공지사항 게시판이 있다고 할 경우 게시판의 타이틀 정도만 상이하고, 이외 것은 디자인, 기능 등 모두 같다고 할 경우 선생님 공지사항은 'Page'로 표기하고, 학생 게시판은 '공통'으로 표기해주시면 됩니다. 이렇게 공통으로 표기하는 이유는 서비스의 전체 페이지 분량 즉 범위를 보고 해당 업무를 할 인원과 일정을 산정하기 위함입니다.

이 외에 '개발 범위', 'PC 범위', '모바일 범위' 열이 있는데 이 부분은 필수 요소는 아닙니다.

'PC 범위', '모바일 범위' 영역엔 화면구분에서 'Page'로 구분된 영역에 수치 1을 기입해주시면 전체 페이지를 합산하여 개발 규모를 확인할 수 있고, PC 범위 열과 모바일 범위 열을 구분하여 디바이스(PC, mobile)별 제작 규모를 한 눈에 확인할 수 있도록 합니다. 그리고, 화면 구분 영역에서 'Page' 외 공통, Link, Button, Pop-up, Area 등으로 표시한 부분에 대해선 Page의 부속 항목이기 때문에 수치 1을 기입하지 않습니다.

'개발 구분'의 경우엔 서비스 제작 시 단순 텍스트 위주의 이용약관 등의 페이지는 'html' 표시해 주시고, DB와 연결되는 동적 기능이 있는 회원가입 등의 페이지는 'Dev'로 기재해주시면 됩니다. 단순 텍스트 위주의 정적인 페이지(html)와 회원가입, 게시판, 쇼핑몰 리스트, 상세 페이지와 같은 동적 페이지(Dev)의 개발 난이도가 다르기 때문에 이와 같이 구분을 하게 됩니다.

이제 이 글을 읽고 계신 독자분이 앱 서비스 제작을 한다고 가정하고, 해당 서비스가 배달의 민족, 쿠팡이츠와 같은 배달앱이라고 할 경우 서비스명을 '배달이츠(가제)'라고 해보겠습니다.

샘플 서비스 메뉴구조도 (서비스 배달이츠)

서비스메뉴구조도(IA) 작성이 처음이시거나 서투르시다면 다음과 같은 방법으로 작성해보시는 걸 추천해 드립니다.​

'경쟁사 또는 참고 앱 화면 캡쳐', 더 나아가 해당 화면들을 Figma 서비스 등에 나열하기

​서비스 메뉴 구조도를 백지 상태에서 시작하려고 하면 어떻게 시작해야 되고 어떤 요소들이 들어가야 하는지 막막하기만 합니다. 이를 해결하기 위해 경쟁사 또는 참고 앱의 화면을 모두 캡쳐하고, 캡쳐한 전체 화면을 Figma 캔버스 등에 나열하게 되면 해당 서비스들의 전체 구성과 이용 흐름을 쉽게 파악할 수 있습니다.​

PPT에 해당 화면을 나열할 경우엔 많아야 2~5개 정도의 UI만 나열할 수 있기 때문에 전체 흐름을 캐치할 수가 없습니다. 그러나 Canvas 기반의 스케치, 어도비XD, 피그마 등에 캡쳐 화면을 나열하게 되면 한 눈에 흐름을 파악하고, 해당 화면들을 토대로 '서비스 메뉴 구조도'도 쉽게 작성할 수 있습니다.

킥고잉 화면 캡쳐 후 Figma 캔버스에 나열한 모습

위와 같이 배달 서비스 서비스 메뉴 구조도를 작성하기 위해 지도 기반인 공유 전동 킥보드 킥고잉 서비스의 화면들을 캡쳐해 보았습니다.

벤치마킹 대상인 서비스 3종 정도를 이와 같이 캡쳐해 보세요. 그럼 단일 서비스만을 파악할 때 보다 더 객관적으로 참고 서비스들을 파악하고, 3종 정도의 서비스 메뉴구조도를 이미 화면을 보고 따라서 작성해 보면 작성 방법을 체화하실 수 있게 됩니다.

자, 그럼 이제 위 과정을 거쳐서 자신의 서비스 메뉴 구조도를 작성해볼까요?

첨부파일

(샘플)배달이츠IA_v1.0.xlsx

파일 다운로드

가장 먼저 자신의 서비스를 모바일 앱/웹으로만 제작할지, PC 웹으로 제작할지 결정하셔야 합니다. 모바일앱으로만 제작할 경우엔 'PC 범위' 열은 삭제하셔도 됩니다. '배달이츠'의 경우엔 모바일 앱이지만 PC에서 네이버, 구글 검색을 통해 유입된 대상에게 '배달이츠' 서비스 소개는 PC로 제공해야 하기 때문에 PC 범위 열은 삭제하지 않고, 단순히 1p만으로 PC 범위를 설정했습니다. 해당 페지에서 앱스토어, 구글플레이 바로가기 링크를 제공하고요.

자, 이렇게 샘플로 제공해 드린 '배달이츠' 양식을 활용해서 자신의 앱/웹 서비스의 '서비스 메뉴 구조도(IA)'를 작성하게 되면 자신의 서비스의 전체 항목과 흐름을 스스로도 파악할 수 있게 됩니다.​

위와 같이 서비스 메뉴 구조도를 1차로 작성하면 일단 '서비스 메뉴 구조도'는 완성됩니다. 그러나 이 상태로 바로 UI 기획을 하게 되면 누락된 요소와 페이지가 많은 상태로 기획을 진행하게 될 수 있습니다. 기획이 부실하면 디자인, 개발 단계에서 또 추가적으로 재작업을 반복해야 하고, 그로 인해 전체 일정은 지연되게 됩니다.

그럼, 어떻게 하면 '서비스 메뉴 구조도'를 보다 완성도 있게 작성할 수 있을까요?

1) CRUD 점검/보완

먼저, CRUD를 점검하고 보완해주세요. 앱/웹 서비스를 만드는 개발자와 기획자에겐 이 CRUD 개념이 필수로 있어야 합니다. CRUD가 무엇을까요? C-Creat 등록, R-Read 상세, U-Update 수정, D-Delete 삭제를 의미합니다. 공지사항 게시판을 개발한다고 할 경우 먼저 작성하기 페이지가 필요합니다. 이 페이지는 Creat(등록) 페이지입니다. 그렇게 작성하고 나면 확인하는 상세(Read) 페이지가 나타납니다. 그리고 작성한 내용을 수정할 때의 페이지는 Update 페이지입니다. 데이터를 삭제할 경우엔 Delete 개념이 있고요. 즉 이와 같이 앱/웹 서비스엔 필수적으로 CRUD 개념이 있게 됩니다. 한 가지 더 예를 들면 회원가입 페이지는 Create 페이지입니다. 그런데 이렇게 Create만 하고 이 정보를 확인할 수 없다면 이 서비스를 이용할 수 없겠죠? 확인할 수 있는 페이지는 Read가 되는 마이페이지이고 수정을 할 때는 Update 회원 정보 수정 페이지입니다.

즉, 내가 만든 메뉴에 대해 CRUD를 생각해보고 누락된 R은 없는지 U는 없는지 점검해보면서 보완할 수 있습니다.

2) Depth 점검/보완

전체 메뉴구조도를 작성한 뒤 1Depth 외 하위 뎁스들은 엑셀에서 숨김 처리해서 1Depth만을 비교해서 누락된 사항은 없는지 1뎁스에 있어야 할 메뉴가 2뎁스에 있진 않은지 등 점검 후 다시 추가로 1~2뎁스만 남기로 이외 뎁스는 숨겨서 다시 점검하고 이렇게 기초가 되는 1뎁스부터 점검해 나가시면 뎁스 개념이 잘못되거나 누락된 부분을 확인하실 수 있습니다.  

3) 화면 구분의 'Page' 외 구분 점검

기본적으로 전체 메뉴는 'Page'로 되어 있을 것입니다. 그런데 해당 Page의 부속 요소인 Link, Pop-up, 외부 링크, 공통 등으로 표기되어야 할 메뉴에 대해선 수정해 주시면 됩니다. Link는 해당 메뉴는 있지만 클릭 시 다른 페이지로 이동할 때 쓰고, Pop-up은 페이지 내의 호출한 페이지로 Page의 부가 요소로 볼 수 있습니다. 그 부가 요소를 Page로 기재하고, 페이지 수로 1을 입력하면 전체 프로젝트 범위를 너무 크게 잡고 일정 및 인력 산정에 오차 범위를 넓힐 수 있게 됩니다. 외부 링크는 클릭 시 본 서비스가 아닌 외부 페이지를 새창으로 띄운다는 의미로 사용할 수 있습니다. 마지막으로 '공통' 표기는 반복 사용되는 페이지로 디자인, 개발을 단순히 복사해서 사용할 수 있는 메뉴를 의미합니다. 선생님 공지사항, 학생 공지사항은 타이틀만 다르고 거의 99% 유사한 경우이기 때문에 이런 경우에 공통으로 표기해주시면 됩니다. 이러한 화면구분을 다시 한 번 점검해주시면 됩니다.

4) 페이지 합계 Sum 수식 범위 확인

'PC 범위', '모바일 범위' 열 중 Page로 표기된 항목에 대해선 1로 수치를 기입하면 가장 하단에 페이지 합계 필드에 합산(Sum)되어 전체 페이지 규모를 확인할 수 있습니다. 그런데 서비스 메뉴 구조도 작성 시 여러 메뉴를 복사하거나 추가할 경우 해당 엑셀의 합산(Sum) 수식이 누락되거나 범위로 설정될 때 전체 수치에 대해 수치 함수가 적용되어 있지만 않고 일부 항목은 범위에서 제외되어 합산 수치가 다른 경우가 있습니다. 그래서 합산 수치의 범위가 제대로 잡혀져 있는지 확인 후 조정해주시면 됩니다.

5) Front(사용자 이용 화면) / Admin(관리자 운영 화면) 메뉴 매칭 확인

백오피스(Back Office)라고도 표현하는 Admin 기획 시 Front 페이지들에 대한 관리 메뉴가 누락 없이 반영되었는지 확인하고 보완해야 합니다. 회원체계를 예로 들면, 배달이츠의 경우 고객, 사장님, 라이더 3가지 회원체계로 구성되어 있을 때 Admin의 회원관리 영역에도 이 3가지 회원체계가 모두 존재해야 합니다. Admin 메뉴 구조도 작성 시 반드시 Front와 비교 후 누락된 관리 항목은 없는지 점검해주시면 되겠습니다.

지금까지 '서비스 메뉴 구조도' 기본 작성법과 고도화 과정을 통해 완성도 있는 서비스 메뉴구조도를 작성하는 방법에 대해 알아보았습니다.

이렇게 작성한 문서는 이제 서비스 제작을 위해 보다 탄탄하게 점검이 되어야 합니다.

그래서 나 혼자만 쓰는 서비스 메뉴 구조도가 아닌 프로젝트 팀원들과 프로젝트 오너에게 공유 및 리뷰를 통해 제 3자의 관점에서 다시 한 번 보완을 해주시면 더욱 탄탄한 서비스 메뉴 구조도가 되게 됩니다.

제 3자의 관점에서 다시 한 번 보완

1) 프로젝트 팀원

먼저, 내부 관계자(타 기획자, 개발자 및 PM, 디자이너)에게 공유 및 리뷰하고 보완합니다.​

2) 고객사(프로젝트 오너) 안내/보완

에이전시의 기획자의 프로젝트 오너는 고객사 담당자가 되겠고, 인하우스 스타트업의 경우엔 프로젝트 PM이 프로젝트 오너일 수 있습니다. 이 프로젝트 오너에게 '서비스 메뉴 구조도' 작성 내용에 대해서 안내하고, 수정 피드백을 받은 후 보완합니다.

3) UI 기획 시 보완

향후 Figma 또는 ppt 등으로 실제 UI 기획 시 화면을 그려나갈 때 추가되거나 삭제되는 메뉴 확인 후 '서비스 메뉴 구조도'도 함께 수정해주시면 됩니다.

지금까지 설명 드린 내용과 같이 '서비스 메뉴 구조도' 작성을 통해 내가 만들고자하는 서비스의 전체 숲을 보다 체계적으로 계획하고 확인할 수 있게 됩니다. 이렇게 먼저 밑그림을 탄탄하게 그린 뒤 실제 UI를 그리게 되면 앞뒤가 맞는 UI 기획, 누락 없는 기획을 할 수 있게 됩니다. 누락 사항이 많으면 많은 수록 디자인, 개발 단계로 진척이 이루어지는 동안 Loss는 더욱 커지고 프로젝트에 차질을 빚게 되는데요. '메인 타겟 유저 정의서'와 '서비스 메뉴구조도' 작성 단계는 전체 프로젝트에서 가장 중요한 단계라고 해도 과언이 아니겠습니다.

즉, 내 서비스의 메뉴 구조도를 꼼꼼하고, 탄탄하게 작성하면 수개월이 걸리는 앱/웹 프로젝트 진행 시 Loss 없이, 지연 없이, 프로젝트 드롭 없이 서비스를 성공적으로 런칭할 수 있습니다.

유익했다면! 이어서 읽어보기:)

실패 없는 개발을 위한 서비스 기획!

Figma 프로토타이핑 기획!🚀
상담문의