[IA] 웹/앱 서비스 기획에서 중요한 '정보구조'

웹/앱 서비스 기획에서 중요한 IA(정보구조)에 대해서 알아보겠습니다.

 

정보구조(IA, Information Architecture)

IA는 제품에 들어가는 정보들을 조직화하고 구조화하는 것입니다. 

이를 통해 제품/서비스 전체에 어떤 정보들이 들어가는지의 모습을 한눈에 알아볼 수 있습니다.

제품/서비스를 짜임새 있게 제작하고, 전체 규모를 파악하기 위해 제작됩니다.

정보 구조의 설계가 구체적이고 자세할수록, 기획 의도가 잘 반영된 결과물이 나온다고 할 수 있습니다.

 

IA 설계의 핵심 가치는 사용자, 콘텐츠, 시나리오 이 3가지입니다.

설계할 때 먼저 타깃 사용자의 페르소나(Persona)를 정의하고 고객 패턴을 예측해야 하며,

이를 바탕으로 사용자가 웹/앱 서비스를 경험하며 콘텐츠를 경험하게 되는 과정을 파악하고

시나리오를 구성합니다.

그 사용자의 여정(Journey)을 단계화하며,

각각의 단계를 구현하기 위해 구체적으로 어떤 설계가 필요할지에 대해 고민합니다.

핵심 가치 3가지에 대한 고려는 곧 UX(User Experience) 디자인과 연결됩니다.

 

IA 예시

 

<IA 작성 시 참고할 부분들>

* IA의 양식에 정답은 없습니다. 기본적인 양식들을 참고하되 프로젝트별로 더 필요한 항목들을 추가하여 세부적인 내역들을 작성하면 됩니다.

1. 제목 : 모든 문서의 기본입니다. IA에서도 최상단에는 항상 제목을 씁니다.

2. 버전(ver.), 작성일, 작성자 : 누가 언제 만든 문서인지 알기 위해 씁니다.

3. No. : 작업되어야 할 페이지 넘버들을 써 내려갑니다.

4. Depth : 페이지의 위치/관계를 나타냅니다. 시작점이 1 Depth 인지 2 Depth 인지는 중요하지 않습니다. 다만, 다른 페이지 사이의 구조가 명확하게 정리되어 있는지가 중요합니다.

5. Type : 페이지의 성격에 대해 씁니다.

6. Contents : 해당 페이지에 어떤 것이 들어가는지 씁니다.

7. Decription : 필요하다면 추가적인 설명을 씁니다.

 

<IA 설계시 고려 할 4가지 시스템>

IA를 설계할 때는 크게 아래와 같이 4가지를 고려합니다.

분류와 계층, 내비게이션, 검색, 레이블링 시스템입니다.

 

1. 분류와 계층 / 조직 구조 시스템 (Organization System)

핵심이 되는 콘텐츠를 정하고, 콘텐츠별로 세부적인 기능들을 정의하며 

전체적인 정보를 세부적으로 분류합니다.

IA의 표준이라고 할 수 있는 트리 모양의 계층 구조(Hierarchal Structures)가 있고,

순차 구조(Sequential Structures), 매트릭스 구조(Matrix Structures)가 있습니다.

 

2. 내비게이션 시스템 (Navigation System)

정보 간의 탐색 및 이동 방법을 정합니다.

여기서 '내비게이션'은 사용자가 의도한 대로 웹/앱 서비스를 경험하도록 유도하는 것을 의미합니다.

탑 메뉴를 지칭하는 GNB(Global Navigation Bar)와

그 밑의 하위 메뉴들을 지칭하는 LNB(Local Navigation Bar)가 있습니다. 

사용자가 내비게이션을 통해 자신이 어느 영역에 있는지, 원하는 정보를 얻으려면 어디로 가면 되는지를 파악할 수 있도록 단순하고 직관적으로 만듭니다.

 

3. 검색 시스템 (Searching System)

사용자가 원하는 정보를 바로 찾을 수 있게 합니다.

검색 바 / 상세 검색 / 추천 / 자동 검색어 기능 등, 검색 시스템을 효율적으로 지원하는 도구들을 활용할 수 있습니다.

많은 이용자들이 보통 먼저 사이트를 둘러보고 나서, 원하는 정보가 없을 때 검색 시스템을 이용하여 찾습니다.

그러므로, 먼저 최대한 사용자가 원하는 정보들을 쉽게 찾을 수 있게끔 제품을 설계하고, 

나머지 정보들은 검색 시스템을 통해 찾을 수 있도록 만들어야 합니다.

 

4. 레이블링 시스템 (Labeling System)

라벨링, 레이블링 시스템이라고도 합니다. 이름을 붙이는 것인데요.

메뉴 제목과 소제목, 링크 제목 등에 이름을 붙이는 것입니다.

어려운 전문 용어를 쓰기보다는 고객이 이해하기 쉽도록 쉬운 언어를 사용하는 것이 좋습니다.

사용자가 원하는 특정 콘텐츠가 있는 위치를 쉽게 찾을 수 있도록, 일관성을 지켜야 합니다.

 

 

<사이트맵(Sitemap)의 작성>

분류와 계층을 만들기 위해서는 먼저 사이트맵을 작성합니다.

사이트맵은 제품의 대표적인 페이지들을 시각적으로 보여줍니다.

 

사이트 맵에는 상하 구조 사이트맵과 좌우 구조 사이트맵이 있습니다.

상하 구조 사이트맵은 A라는 메뉴에서부터 시작해서 B, C, D 등의 메뉴로 가는 형태이고,

좌우 구조 사이트맵은 A라는 메뉴에서 B, C, D 각각으로 나뉘어 가는 맵의 형태입니다.

보통은 상하 구조 사이트맵을 쓰는 것이 일반적입니다.

 

 

<사이트맵(Sitemap), 플로우차트(Flow Chart), 메뉴 구조도(Menu Structure), IA 의 차이점>

여기서, 사이트맵과 플로우차트, 메뉴 구조도, IA에 혼동을 가질 수가 있는데요.

사이트 맵은 '메뉴 간의 구조적인 부분'만을 다루고, 

플로우 차트는 '특정 사용자의 시나리오에 대한 흐름들'을 모여준다는 면에서 다릅니다.

메뉴 구조도는 메뉴를 구조화하여 정리하는 것이고, 상단 메뉴에 나오는 것들을 정리하는 편입니다.

보통 메뉴들을 통하여 페이지들로 진입하기 때문에, IA와 메뉴구조도는 거의 비슷하게 나온다고 볼 수 있는데요.

IA에는 팝업이나 에러 페이지 등 숨겨진 페이지들까지 더 상세하게 나온다는 점이 차이점이라고 볼 수 있습니다.

 

IA와 기능 정의서, 정책 정의서를 함께 만드는 것이나 따로 만드는 것에 대해서는 정답은 없습니다.

프로젝트의 범위가 작으면 한 번에 모아서 정리할 수도 있고,

범위가 크고 개별적으로 정리가 필요하면 따로 작성해 만들어주면 됩니다.

필요한 내용이 어디에라도 있고, 보는 입장에서 편하게 이해가 되면 됩니다.

 

 

<참고>

* 웹사이트에서 먼저 '정보구조'에 대한 개념이 발전되어 왔습니다.

* 스마트폰이 많이 쓰이면서, 모바일만의 정보구조 패턴들도 만들어지게 되었습니다.

  - 모바일에서는 허브 앤 스포크(Hub&Spoke), 중첩 인형(Nedted Doll), 탭(Tabbed View) 등의 패턴이 있습니다.