[서비스의 메뉴 구축] 길을 정비하는 일
PM스쿨_학습일지 13
2024.03.19
'메뉴 트리(Menu Tree)'와 '정보 구조도(Information Architecture, IA)'라는 용어를 들어본 적 있는가? 앱이나 웹을 다루는 사람들 혹은 IT업계에 종사하는 사람이거나, 에세이와 같은 형태로 트렌드를 자주 공부하는 사람들에겐 익숙할지도 모르겠다. 오늘은 서비스를 구축함에 있어 길을 정비하는 일과도 같은 이 두 가지 문서를 살펴봄으로써, 서비스의 메뉴를 구축하는 것이 왜 중요한 지에 관해 이야기 해보려고 한다.
메뉴 트리와 정보 구조도
먼저 '메뉴 트리'는 앱이나 웹 서비스에서 제공하는 기능을 항목으로 설계한 부분을 'MENU'라는 카테고리로 한정하여, 앱이나 웹으로 서비스를 사용하는 사람들이 화면을 통해 접하는 'MENU'의 구성을 Tree(나무, 가지치기의 모양)로 표현한 것을 말한다.
사진 1. 출처_본인(제로베이스 LMS 6주 차 과제 중)사진 1에서 볼 수 있듯이, 사용자가 해당 서비스의 홈 화면으로부터 접근할 수 있는 기능들을 '메뉴'의 형태로 구분한 것이다. 위의 예시와 같이 여러분이 인스타그램을 사용한다고 가정해 보자. 회원이 아닌 사람이라면, 회원 가입을 통해 로그인에 접근하게 되고, 로그인을 한 유저는 인스타그램의 홈 화면을 통해 7가지의 핑크색 메뉴를 만나게 된다.
화면의 왼쪽 가장 위에는 로고가 오른쪽 위에는 알림, DM(메시지)가 위치해 있으며, 화면의 대부분을 피드라는 형태의 게시판이 사진, 영상, 광고 등을 무한 스크롤의 형태로 계속해서 보여준다. 좀 더 밑으로 내려가보자. 가장 아래에서 나머지 4가지 메뉴를 만날 수 있다. 친구가 아닌 다른 사람들의 게시물을 볼 수 있는 탐색 메뉴, 새롭게 게시물을 만들 수 있게 해주는 새 게시물 메뉴, 그리고 내가 올린 게시물들을 한눈에 볼 수 있는 내 프로필 메뉴로 구성되어 있다.
인스타그램을 처음 사용하는 유저들은 해당 서비스에서 제공하는 기능을 각각의 메뉴를 하나하나 눌러보며 알아볼 것이다. 피드가 비어 있기에 탐색을 통해 누군가를 찾고 피드에 추가하기도 하며, 나의 게시물을 올리기도 한다. 이러한 기능들을 유저들은 사용해 보며 서비스를 이해하게 된다.
다음으로, 정보 구조도(IA)는 기획자가 서비스 전체의 설계 구조를 전반적으로 정리해 둔 문서를 의미한다. 서비스의 구성요소를 단계적으로 표기하여, 각 단계에 해당하는 기능과 세부사항을 정리해 둔 문서인데, 주로 엑셀과 같은 표 형태로 정리한다.
사진 2의 예시는, 메뉴 트리의 메뉴로 구성한 부분에 관한 구체적인 사항들을 엑셀 혹은 표의 형태로 정리해 둔 것을 보여준다. Depth는 클릭 수를 의미하며, 한 번 클릭함에 따라 다음 정보를 화면의 변경 혹은 팝업 등의 요소로 제공하게 되는데 이를 3차원의 '깊이'로 표현하였다. 메인을 제외하고 첫 화면에서 얻을 수 있는 기능에 관한 정보들을 1 Depth에 배치하고 각 메뉴 카테고리마다 제공할 기능을 단계별로 정의한 것을 알 수 있다.
또한, 각 기능에 관하여 ID를 부여하여 소통하기 편리하게 구성한 것을 알 수 있고, 다른 팀과 함께 소통해야 하는 부분이 있기에 세부적인 설명(Description)을 기재한 것이 특징이다. "어떤 서비스가 어떤 기능을 제공하고 있는가?", " 어떤 메뉴의 항목을 통해 어떻게 접근할 수 있는가?"에 관한 질문들을 답한다고 볼 수 있겠다.
위의 두 문서의 공통점은 해당 서비스를 접근하는 방식에 관하여 정의를 내리고 있다는 것이다. 한편, 메뉴 트리는 정보 구조도에 비해 간단하게 표현된 것 같지만, 각 하위 항목을 어떤 상위 항목을 통해 접근할 수 있는지에 관한 '흐름(Flow) 정보'를 제공하고 있다. 또한, 각 기능들이 섞이지 않도록 구분점을 명확히 세우기도 한다. 일례로 인스타그램의 스토리와 릴스에 관한 구분이 그런 것이다. 피드 메뉴의 클릭을 통해 스토리와 릴스가 혼재되어 나타난다면 유저는 릴스와 스토리의 차이를 인지하지 못할 것이다. 하지만, 피드 자체에 스토리와 릴스를 각각 구분하여 클릭하도록 구성하였기 때문에 유사한 형태지만 다른 부분들을 인지하게 된다.
다음으로, 정보 구조도는 메뉴 트리에 비해 상세한 부분들이 포함되어 있어 복잡하게 느낄 수 있다. 하지만, 메뉴 트리에서 제공하는 '흐름 정보'와 '정보의 구분'을 가능하게 하는 세부 논리가 정보 구조도 문서에 포함되어 있다. 유저는 사용 경험을 통해 서비스의 기능을 구분해 낸다. 반면, 해당 서비스를 구축하는 기획자, 개발자, 디자이너는 문서에 의한 소통으로 서비스의 기능을 구분해 만들어내게 된다. 다시 인스타그램의 예시를 들어보자. 개발자는 영상과 음악, 텍스트를 짧은 영상으로 만들어 제공하는 '스토리' 기능과 '릴스' 기능의 차이를 이해하지 못할 수 있다. '왜 같은 기능을 두 번 제공하는 것일까?' 스토리는 24시간 동안만 공개 설정 범위에 따라(주로 친구들에게) 짧게 노출하는 형태이지만, 릴스는 게시물의 형태로 공개 설정 범위에 따라 릴스라는 피드에 노출되게 되므로 두 기능의 성격이 다르다. 이러한 세부 설명을 포함하여 각 화면에서 어떻게 어떤 메뉴에 따라 구성된다는 것을 설명할 때 제작자들은 그 의도에 공감하게 될 것이다.
마무리하며,
서비스는 누군가에게 어떤 기능을 제공하도록 구성되어 있다. 정말 좋고 다양한 기능을 가진 서비스이더라도 그것을 사용하는 유저가 정확히 인지하지 못한다면 좋은 서비스라고 정의하기 어려울 것이다. 심지어, 정말 좋고 다양한 기능을 가진 서비스를 제작해야 하는 제작팀이 명확한 기능 구분과 서비스의 흐름 구조를 제시하지 않는다면 어떻겠는가? 서비스를 접하는 순간 잠시 좋을 순 있으나, 결국 유저 스스로 무엇을 하는지 인지하지 못하게 되거나, 원하는 바를 찾으러 왔다가 이게 뭐야 하고 나갈지도 모르겠다.
원하는 목적지로 안내하는 명확한 길. 그것을 만들어내기 위한 노력이 지금도 필요하다.
