이번에 배울 것

• 정보 구조의 종류를 이해합니다.
• 구조에 따라 어떤 탐색이 가능한지 이해합니다.

도서관에서 책을 찾을 때 어떻게 하시나요? 이사하고 처음 가는 도서관이면 많은 것이 낯설겁니다. 일단 도서관에 가고 엘레베이터를 타고 열람실로 갑니다. 찾는 책이 있다면 컴퓨터나 스마트폰으로 책 위치를 검색합니다. 원하는 책을 찾으면 복잡한 숫자를 알려줍니다. 숫자를 이용해 책이 어느 책장에 어느 칸에 있는지 찾습니다. 딱히 원하는 책이 없을 때는 책장에 있는 비슷한 성격의 책들 중에 재밋어보이는 것을 고르기도 합니다.

모든 IT 서비스는 도서관 책 찾기와 비슷합니다. 원하는 책을 찾는 경험과 원하는 상품이나 콘텐츠를 찾는 경험이 모두 비슷합니다. 약간 다른 점이라면 디지털이라서 다양한 필터를 쉽게 적용할 수 있다는 점과 물리적으로 물건을 옮길 필요가 없다는 정도겠네요.

정보 구조 Information Architecture는 정보를 구성하는 구조에 대한 개념입니다. 도서관에서 책장을 어떻게 나눌지 책은 어떤 기준으로 배치할지에 대해 정하는 것이 곧 정보 구조입니다. 책을 찾는 것처럼 사용자가 원하는 정보에 쉽고 편하게 접근할 수 있는 것이 목표입니다.

공간이 한정된 모바일에서는 정보 구조를 설계하는 방식이 특히 중요합니다. 물리적인 공간은 정보의 한계가 있지만 가상의 디지털 공간에는 정보의 한계가 없기 때문에 정보의 구조를 설계하고 탐색하는 방식을 설계하는 것이 중요합니다.

정보 구조

정보의 구조는 크게 3가지로 나뉩니다.

Flat

많은 앱에서 사용하는 간단한 형태입니다. 각 화면이 계층 없이 평면으로 나열되는 구조입니다. 화면에 표시되는 정보가 동등한 수준으로 표시됩니다. 표시할 수 있는 정보의 한계가 있어 원하는 정보를 찾기가 더 어려워질 수 있습니다. 간단한 정보나 소규모 앱에 적합합니다.

• 예시: iOS, Android 네비게이션 탭

Tree

각 화면이 계층을 가지며 나무 형태로 정보를 나열하는 구조입니다. 상위와 하위로 카테고리가 나뉩니다. 전체 구조를 파악해서 내가 찾는 정보가 어디 있는지 빠르게 파악할 수 있습니다. 계층의 구조가 복잡하면 오히려 찾기가 어려워질 수 있습니다. 많은 량의 복잡한 정보를 정리할 때 보편적으로 사용하는 형태입니다.

• 예시: 커머스 트리 구조

Network

콘텐츠를 오가는 형태입니다.

독립된 각 화면이 네트워크로 연결된 구조입니다. 1개의 정보에 도달할 때 다양한 경로로 접근할 수 있을 때 많이 사용하는 방식입니다. 정해진 공간 안에서만 정보에 접근 가능한 Flat과 Tree와 다르게 여러 영역을 넘나들 수 있습니다. 특정 플로우로 유도할 수 없어 제어하기 어려울 수 있습니다.

• 예시: 나무위키, 위키피디아, 웹 브라우저

탐색 방식

제공하는 정보의 성격에 따라 다양한 정보 탐색 방식을 사용합니다.

Drill Down

여러 선택지 중 하나를 골라 하위 정보로 이동합니다. 카테고리처럼 방대한 양의 정보를 골라서 보는데 적합한 패턴입니다. 많은 량의 정보를 사용자에게 익숙한 방식으로 구분할 수 있을 때 적합한 패턴입니다.

• 예시: iOS 기본 구조

Step by Step

1번에 1개씩 과업을 수행하는 탐색법입니다. 단계별로 필요한 정보를 제출하고 그에 알맞는 새 과업이 순차적으로 제시되는 패턴입니다. 사용자가 제공해야 할 정보의 종류나 량이 많거나 조건에 따라 표시되는 정보나 플로우가 달라질 경우에 적합한 패턴입니다.

• 예시: 장바구니

Pyramid

부모 단계로 돌아가지 않고 Flat한 정보를 탐색하는 방법입니다. 갤러리처럼 리스트에서 콘텐츠에 진입하면 그 상태에서 다른 콘텐츠를 볼 수 있는 구조입니다. 리스트에서의 맥락이 정보 탐색에 크게 중요하지 않을 때 적합한 패턴입니다.

• 예시: iOS 갤러리 탐색

Module

여러 모듈이 있고 각자가 특정 단위로 구동되는 구조입니다. 여러 구조들이 하나로 결합될 때 사용되는 개념입니다. 중심이 되는 베이스 페이지가 있고 다양한 모듈에 접근 가능한 형태입니다. 각 모듈간 독립적으로 존재할 때 사용합니다.

• 예시: 장바구니, 위시리스트

쉬운 탐색 돕기

탐색을 더 쉽고 편하게 할 수 있게 정보 덩어리의 이름을 붙이고 범주를 나눕니다.

Labeling

정보의 성격을 빠르게 이해할 수 있게 적절한 이름을 써줍니다. 부모 요소를 보고 자식 요소를 예측할 수 있는 이름을 써야합니다. 이름이 너무 추상적이거나 너무 구체적이면 어떤 정보를 가지고 있는 예측하기 어려워 균형 잡힌 이름을 써줘야 합니다.

Categorize

라벨링과 마찬가지로 사용자가 원하는 정보가 어디에 속해 있는지 예측하기 쉽게 범주를 나눠야합니다. 정보 구조가 깊어질수록 정보를 찾기 어렵기 때문에 가급적 얇고 넓은 정보 구조로 카테고리를 나눕니다.