본문 바로가기
웹/UIUX 공부

메뉴 트리, 정보구조도 작성 방법

by cucat 2022. 5. 16.

정보 구조 설계에 해당하는 메뉴 트리, 정보 구조도(IA) 작성은 기획과 디자인 두 분야에서 통용되는 단계입니다.

 

기획자 뿐만 아니라 디자이너도 이와 같은 내용을 알면 디자인을 설계하고 표현하는데 있어서 매우 효율적인 작업을 할 수 있습니다.

 

이러한 정보 구조 설계를 마친 이후에 화면이 어떻게 보여지는지 와이어 프레임, 프로토 타이핑을 진행할 수 있습니다.

 

정보 구조를 설계하는 것의 핵심은, 사용자가 편리하게 이용할 수 있게 정보를 구성하는 것입니다.

 

어떤 구조가 사용자가 이용하기 편리한지 판단하는 근거디자인 리서치모델링, 아이디어 도출, 사용자 시나리오 등 지난 글들을 통해 알 수 있습니다.

 

이에 따라 사용자 경험을 이해하고 정보를 해체하고 재조합하면서, 논리적인 탐색 구조를 설정하도록 해봅시다.



0. 정보 구조 설계란?


정보 구조는 information Architecture라고 하는데, 말 그대로 정보의 구조 입니다. 


정부 구조를 설계하는 이유는, 논리적으로 정보를 구성함으로써 사용자가 서비스를 이용하는데 불편하지 않도록
하기 위해서입니다. 

 

정보 구조는 콘텐츠의 뼈대라고도 할 수 있습니다. 화면, 내비게이션 체계, 레이블링 등의 정보 구조를 도식이나 간결한 문서로 표현합니다.

 

작업자가 작업을 할 때 정보 구조를 쉽게 파악하면서 작업할 수 있기 때문에 필수적으로 작성되어야하는 문서입니다.



 

1. 메뉴 트리


정부 구조를 설계하려면 일단 서비스의 전체 구성을 한눈에 볼 수 있도록 메뉴 트리를 만들어야 합니다.


메뉴 트리를 만들 때는 상위에서 하위로 분류해 나가는 것을 나가는 것이 기본입니다.


상위와 하위를 나누는 기준은, 화면에서 특정 콘텐츠를 탭해서 디테일 뷰로 들어가는(깊이가 추가되는)경우 그 들어간 곳이 하위 구조입니다.

 

흔히 조직도나 가계도를 떠올리면 이해가 쉽습니다.



2. 정보 구조도

 

정보구조도는 그 자체로 정보 구조(IA)라고도 불릴 만큼, 많이 쓰이는 문서입니다. 메뉴 트리에서 콘텐츠의 상위 구조, 하위 구조를 정리했다면 그것을 깊이 단위로 정리할 수 있습니다.

 

 

어렵게 생각할 것 없습니다. 이 블로그의 정보 구조로 예를 들어 보겠습니다.

 

  • 홈 화면에서 특정 카테고리를 클릭하면 1Depth(깊이)가 가 추가되는 것입니다. 
  • 특정 카테고리에서 특정 글을 클릭해서 들어가면 2Depth가 추가되는 것입니다.

 

 

기본적으로 Depth에 따라 구분을 짓고, 계층 간 구조·화면 명칭·간략한 기능·메모를 정보 구조도를 통해 간략하게 정리함으로서 작업하기가 수월해집니다.

 

 

이상으로 정보 구조 설계에 해당하는 메뉴 트리, 정보 구조도(IA) 작성 방법에 대해 알아보았습니다. 읽어주셔서 감사합니다.

 

댓글