[제로베이스 PM스쿨 29기] IA(Information Architecture, 정보 구조도)
IA란?
웹/앱 구축 시 필요한 화면과 메뉴의 정보 구조를 설계 및 정의하는 문서이다.
서비스에서 제공하는 정보의 구성에 관여하여 어떤 절차에 걸쳐 서비스에 접근하는지 시각적으로 표현할 수 있다.
IA를 그릴 때 사용할 수 있는 도구는 엑셀, 파워포인트, Visio(마이크로소프트의 다이어그램 도구), OmniGraffle(mac 사용자를 위한 다이어그램 도구), Lucidchart(클라우드 기반의 다이어그램 도구), Miro, Figma 등 다양한 도구와 방법이 있다.
주요 구성 요소
- 조직화 시스템
콘텐츠나 데이터를 어떻게 그룹화하고 구조화할 것인지 정의한다. 예를 들어, 주제별, 시간순, 알파벳순 등으로 분류할 수 있다. - 내비게이션 시스템
사용자가 정보를 탐색할 수 있는 경로를 설계한다. 메뉴, 링크, 검색 기능 등을 포함하며, 사용자가 원하는 정보에 쉽게 접근할 수 있게 돕는다. - 레이블링 시스템
정보를 표현하는 방식, 즉 콘텐츠나 링크에 붙이는 이름이나 설명을 정의한다. 명확하고 직관적인 레이블은 사용자가 정보를 이해하고 탐색하는 데 중요한 역할을 한다. - 검색 시스템
사용자가 특정 정보를 찾을 때 도움을 주는 기능이다. 효율적인 검색 시스템은 사용자가 필요로 하는 정보를 빠르게 찾아낼 수 있도록 설계된다.
IA는 언제 작성하면 좋을까?
- 서비스가 복잡하고 화면의 수가 많아 정리가 필요할 때
- 신규 서비스 구출 시 화면 설계를 진행하기 앞서 작업 우선순위를 선정해야 할 때
- 디자이너, 개발자가 작업 시 필요한 화면 간 연관성을 제대로 알지 못할 때
IA 작성 시 고려사항
- 사용자가 기존에 어떠한 경험을 가지고 있는가
- 우리 서비스에 왜 방문하고 어떤 것을 얻고자 하는가
- 사용자는 이용 중에 어떤 패턴을 보이는가
- 콘텐츠의 중요도가 공급자 중심인가 사용자 중심인가
무신사 모바일 앱 IA
내 생각
IA는 전체적인 구조 파악에 좋은 설계도인 것 같다. 지금 내가 보고있는 화면에서 어떻게, 어디로 연결되는지 파악할 수 있다. IA가 복잡해지면(depth가 깊어지면) 사용자 입장에서 사용하기에 불편함을 느낄 수 있으므로 IA를 그리면서 복잡성을 고려할 수 있을 것 같다.
무신사 앱 IA를 그려보면서 전체적인 구조를 파악할 수 있었고, 평소에 사용하지 않던 버튼도 클릭해보며 어떤 기능이 있는지 알 수 있었다. 필터링 기능이 곳곳에 위치시켜 사용자의 편의성을 고려한 것 같다. 특히 카테고리별로 추천하는 상품이 많았는데 사용자 맞춤으로 상품을 추천해주고, 요즘 유행하는 코디도 센스있는 제목을 통해 추천해준다. 작은 화면에서 사용자 경험을 높이기 위해 상단과 하단에 자주 사용하는 기능을 위치시켜 사용자의 편의성을 높인 것 같다.
또한 의류 카테고리에 굉장히 많은 종류가 있다. 상의만 봐도 상의 신상, 맨투맨/스웨트셔츠, 셔츠/블라우스, 후드 티셔츠, 니트/스웨터, 피케/카라 티셔츠, 긴소매 티셔츠, 반소매 티셔츠, 민소매 티셔츠, 스포츠 상의, 기타 상의 등이 있다. 이렇게 많은 카테고리를 텍스트로 나열한게 아니라 이미지를 더해 한눈에, 빠르게 내가 원하는 카테고리를 찾을 수 있도록 배치했다.
출처