10. 정보구조
1. 정보구조란?
UX디자인이라는 일을 하다 보면 서비스의 전체적인 구조를 다시 뜯어보는 경우가 많다. 메인 화면에서 뭘 누르면 어디로 넘어가고, 뭐가 나오고, 어떤 기능을 쓸 수 있는지 등 전반적인 배치를 그려보면 꼭 설계도 같은 것이 나오게 되는데 이를 정보구조라 한다.
정보구조를 만드는 일은 서비스가 가진 모든 기능/정보를 어떻게 쪼개서 어떤 메뉴에 담을 지 결정하고, 각각의 메뉴에 적절한 이름을 붙이고, 이 화면에서 저 화면으로 어떻게 이동하도록 할 지를 모두 포함한다.
이를 신규 출점하는 백화점을 기획하는 것에 비유하면, 일단 입점할 모든 매장과 서비스를 파악한 뒤 어떤 매장을 몇 층에 배치할지, 해당 층에는 남성복만 넣을지 다른 장르도 넣을지, 만약 남성복 전문 층으로 한다면 안내판에 '남성복'이라고만 써 줄지 아니면 'Men's Collection'이라는 좀 더 있어보이는 이름을 넣어줄 것인지 등을 결정하는 것과 같다.
정보구조와 IA
정보구조를 IA(=Information Architecture)라고도 하는데, 보통 IA라고 부르면 엑셀 표 형식으로 정리된 형태의 문서(IA문서)를 가리킨다. 즉 IA나 정보구조나 의미상으론 같은 말이지만 실무에서는 IA라고 하면 문서, 정보구조라고 하면 꼭 문서에 국한되지는 않은 더 넓은 의미를 지칭하는 느낌이 든다.
IA 문서의 예시. 출처: https://m.blog.naver.com/mogni/70183062547이 문서라는 것이 통용되는 양식이 있는 것은 아니지만, 경험에 비추어보면 대체로 서비스의 대 카테고리를 1열에 나열하고 그 카테고리 하위의 메뉴(화면)들을 그 우측 열에 넣고, 더 하위 메뉴가 있다면 또 그 다음 열에 넣는 식으로 구성한다. 그리고 나머지 내용을 어떻게 채울 것인지는 그때마다 다른데, 주로 각각의 화면에 해당하는 현업 부서와 담당자를 넣거나, 혹은 화면 ID를 넣는 식으로 필요한 정보를 넣는다.
엑셀로 짜여진 IA도 있지만 아래와 같이 조직도처럼 표현된 IA도 있다.
출처: https://xd.adobe.com/ideas/process/information-architecture/information-architecture-users-conte사실 위와 같은 것들은 모두 현재, 또는 특정한 TO-BE 시점의 정보구조를 보여주는 스냅샷일 뿐이고, 서비스를 만들거나 개선하려는 UX디자이너는 이 서비스를 처음 이용하는 사용자가 어떻게 원하는 기능을 쉽게 찾고 정보를 탐색할 수 있는지를 먼저 고민해야 한다. 서비스가 담고 있는 정보와 기능이 많더라도 사용자들이 쉽게 공감할 수 있을 만큼 같은 성격의 메뉴들이 잘 그룹핑되어 있는지, 자주 찾는 기능에 진입하는 것에 문제가 없는지에 따라 잘 설계된 서비스인지 아닌지가 판가름되기 때문이다.
따라서 정보구조는 길 찾기, 즉 내비게이션과도 맞닿아 있다.
2. 정보구조와 내비게이션
실무에서 잘 모르는 부분이 있으면 주로 Apple의 HIG(Human Interface Guidelines)를 살펴보거나 Google의 Material Design을 찾아보게 되는데 사실 이들 가이드에선 정보구조라는 말이 등장하지 않는다. 그 대신 'Navigation'으로 정의된 항목에서 그 실마리를 찾을 수 있다.
애플은 좋은 내비게이션이란, 현재 위치를 궁금해하지 않도록 하는 것이라고 정의한다. 즉 사람들이 길을 잃었을 때 지도를 보고 현 위치를 파악하는 것처럼, 디지털 서비스에서도 지도를 보지 않고 길을 찾을 수 있을 만큼 자연스럽고 명료한 정보구조를 적용해야 한다는 것이다. 역시 애플 답다. 다음은 애플이 정의한 세 종류의 내비게이션이다. (HIG의 내비게이션 항목을 보려면 여기를 클릭)
1) 계층적 내비게이션(Hierarchical Navigation)
©Apple메인 화면에서 각각의 하위 메뉴로 이동하는 형태의 내비게이션으로, 화면 간의 위계는 명확해서 탐색은 용이하나 하나의 하위 메뉴에서 다른 카테고리의 하위 메뉴로 이동하려면 왔던 길을 다시 되돌아가야하는 번거로움이 있다.
2) 병렬적 내비게이션 (Flat Navigation)
©Apple앞선 글(내비게이션)에서 설명한, 하단의 Tab Bar로 3-5개의 카테고리가 구분되고 각각의 카테고리에서 하위 메뉴로 이동할 수 있도록 설계되어있는 서비스들에 해당하는 내비게이션 방식이다.
3) 맥락지향 내비게이션 (Context-Driven or Experience-Driven Navigaition)
©Apple이 방식은 일반적인 방식이라기보다는 게임이나 가입/신청 화면처럼 사용자 선택 또는 상태에 따라서 그 다음 보여지는 정보가 결정되는 방식의 내비게이션으로 이해하면 될 것 같다.
세 가지의 서로 다른 내비게이션이 소개되긴 했지만 사실 하나의 서비스에서 특정한 한 가지의 내비게이션 방식만 사용되는 것이 아니라, 여러 내비게이션 방식이 혼용된다. 가령 병렬적 내비게이션 방식으로 된 서비스라 할지라도 회원가입 프로세스는 맥락지향 내비게이션 방식이 쓰일 수 있다.
상술한 내용은 전반적인 구조를 이해하고 정의할 때 참고할 것들이고, 실제 서비스에서 이러한 정보구조와 내비게이션을 실체화하는 UI 요소는 GNB, 내비게이션 바(또는 타이틀 바), 탭 바(또는 Bottom Navigation) 등이 있다.
다음은 내비게이션 요소들에 대해서 공부할 예정이다.
