메뉴 구조를 먼저 정해야 하는 이유

한 스타트업 대표님이 디자이너와 함께 화면부터 그리기 시작했습니다. 홈, 상품 상세, 장바구니까지 순조로웠습니다. 화면이 스무 장쯤 쌓였을 때 문제가 생겼습니다.

「내 정보」에도 주문 내역이 있고, 「주문」 메뉴에도 주문 내역이 있었습니다. 둘의 모양이 조금씩 달랐습니다. 반대로 쿠폰은 어느 메뉴에서도 찾을 수 없었습니다. 그려 놓은 화면을 다시 어디에 둘지 정하느라 두 주가 더 들었습니다.

화면이 먼저 생기고 자리가 나중에 정해지면 이런 일이 반복됩니다.

핵심은 화면을 그리기 전에 메뉴 구조로 서비스의 지도를 먼저 그리는 것입니다. 어떤 메뉴가 있고 각 화면이 어디에 매달리는지 정해 두면 화면이 겹치거나 빠지지 않습니다. 개발사도 이 지도를 보고 전체 크기를 가늠합니다.

메뉴 구조는 무엇을 정하는 일인가

메뉴 구조는 서비스 안의 모든 화면을 나무 모양으로 정리한 것입니다. 맨 위에 하단 탭이나 상단 메뉴가 있고, 그 아래에 목록 화면, 다시 그 아래에 상세 화면이 매달립니다.

이 단계에서는 화면이 어떻게 생겼는지는 정하지 않습니다. 대신 세 가지를 정합니다. 어떤 화면이 있는지, 그 화면이 어디에 속하는지, 사용자가 어느 길로 그 화면에 닿는지입니다.

먼저 정하지 않으면 생기는 일

특히 하단 탭 변경은 비쌉니다. 앱의 뼈대에 해당하기 때문에 개발이 시작된 뒤에 바꾸면 여러 화면을 함께 고쳐야 합니다.

이 증상들은 대개 개발이 한창일 때 드러납니다. 그때는 이미 디자인과 개발이 함께 움직이고 있어서, 자리 하나를 옮기는 일이 여러 사람의 작업을 되돌리는 일이 됩니다.

메뉴 구조는 이 순서로 짭니다

1. 사용자가 하는 일을 모두 적습니다. 「수업을 찾는다」「예약한다」「후기를 쓴다」처럼 동사로 적습니다.
2. 비슷한 일끼리 묶습니다. 묶음이 곧 메뉴 후보가 됩니다.
3. 맨 위 메뉴를 고릅니다. 앱이라면 하단 탭은 보통 네다섯 개를 넘기지 않습니다. 가장 자주 하는 일을 맨 위에 둡니다.
4. 각 묶음 아래에 화면을 매답니다. 목록, 상세, 작성처럼 단계별로 내려갑니다.
5. 관리자 쪽 구조를 따로 만듭니다. 사용자 메뉴와 섞지 않습니다.
6. 대표 시나리오로 따라가 봅니다. 「처음 온 사람이 첫 예약을 끝내기까지」를 메뉴 위에서 손가락으로 짚어 봅니다.

마지막 단계에서 막히는 곳이 나오면 구조가 아직 덜 된 것입니다. 이때 고치는 것은 종이 위의 선 몇 개라서 비용이 거의 들지 않습니다.

메뉴 구조가 있으면 그다음이 쉬워집니다

메뉴 구조가 정해지면 화면 목록은 거의 저절로 나옵니다. 나무의 잎을 한 줄로 늘어놓으면 되기 때문입니다. 화면 목록이 있으면 견적 범위가 분명해지고, 화면설계도 빠짐없이 그릴 수 있습니다.

메뉴 구조는 기획에서 가장 먼저 정하고 가장 늦게 바꿔야 하는 문서입니다. 화면설계와 기획서는 그 위에 올라갑니다. 개발을 어디에 맡기든, 직접 하시든 이 지도부터 정해 두면 이후의 결정이 훨씬 가벼워집니다.

자주 묻는 질문

메뉴 구조와 화면 목록은 어떻게 다른가요?

메뉴 구조는 화면들이 어떤 순서와 관계로 이어지는지 보여 주는 나무 모양의 지도입니다. 화면 목록은 그 나무에 달린 화면을 한 줄씩 늘어놓은 표입니다. 메뉴 구조를 먼저 정하면 화면 목록은 거기서 뽑아 낼 수 있습니다.

앱 하단 탭은 몇 개가 적당한가요?

정해진 숫자는 없지만 보통 네다섯 개 안에서 정합니다. 탭이 많아지면 사용자가 무엇을 먼저 해야 할지 헷갈립니다. 가장 자주 하는 일을 기준으로 고르고 나머지는 그 아래에 둡니다.

메뉴 구조는 엑셀로 그려도 되나요?

됩니다. 들여쓰기로 단계를 나타내는 표만으로도 충분합니다. 중요한 것은 모양이 아니라 모든 화면이 한 곳에 자리를 갖고 있는지입니다.