웹/앱 서비스의 길잡이, '정보 구조도(IA)' 완벽 가이드

건물을 지을 때 뼈대가 부실하면 아무리 인테리어가 화려해도 결국 무너지게 된다. 웹이나 앱 서비스도 마찬가지다. 유저가 우리 서비스에 들어와서 길을 잃지 않고 원하는 목적지까지 도달하게 하려면 튼튼한 뼈대가 필요한데, 이 뼈대를 설계하는 문서가 바로 IA(Information Architecture, 정보 구조도)다.

오늘은 기획의 핵심이자 나침반 역할을 하는 IA가 정확히 무엇이고, 어떻게 작성하는지 공부한 내용을 정리해 본다.

1. 정보 구조도(IA)가 대체 뭘까? 

IA는 쉽게 말해 '웹/앱 서비스의 전체 메뉴판이자 지도'다. 실무에서는 사이트맵(Sitemap)이나 메뉴 트리(Menu Tree)라고 부르기도 한다.

어떤 메뉴 밑에 어떤 페이지가 들어가고, 그 페이지 안에는 어떤 기능들이 있는지 엑셀(스프레드시트)이나 마인드맵을 통해 계층 구조로 쫙 펼쳐 놓은 문서다. 디자인과 개발에 들어가기 전, 프로젝트에 참여하는 모든 팀원이 "우리가 만들 서비스의 규모와 구조가 이렇구나!"를 한눈에 파악할 수 있게 해주는 아주 중요한 기준점이 된다.

2. 좋은 IA를 짜기 위한 3단계 프로세스 

머릿속에 있는 수많은 아이디어를 갑자기 엑셀 표에 구겨 넣으려고 하면 막막하기 마련이다. 실무에서는 보통 다음과 같은 순서로 IA를 정리한다.

• Step 1. 기능 및 콘텐츠 나열하기 (Brainstorming)
  • 서비스에 들어가야 할 모든 기능과 화면을 포스트잇이나 메모장에 생각나는 대로 전부 적어본다. (예: 로그인, 회원가입, 비밀번호 찾기, 프로필 수정, 상품 검색, 장바구니 등)
• Step 2. 유사한 항목끼리 묶기 (Grouping)
  • 흩어져 있는 기능들 중 성격이 비슷한 것들끼리 그룹을 짓는다. (예: 로그인, 회원가입, 비밀번호 찾기 > '계정 관리' 그룹으로 묶기)
• Step 3. 계층화(Depth) 및 문서화하기
  • 묶인 그룹들을 바탕으로 상위 메뉴(Depth 1)부터 하위 메뉴(Depth 2, Depth 3...)로 점점 깊어지도록 위계질서를 부여하여 엑셀이나 표 형태로 정리한다.

3. 초보 기획자가 IA 설계 시 기억해야 할 꿀팁 

IA는 단순히 칸을 채우는 작업이 아니다. 유저의 편의성과 향후 서비스의 확장성까지 고려해야 한다.

• 사용자의 언어로 네이밍할 것
  • 메뉴 이름은 만드는 사람(공급자) 기준이 아니라, 쓰는 사람(유저)이 한눈에 알아볼 수 있는 직관적인 단어를 써야 한다.
• Depth(깊이)는 너무 깊지 않게! (3-Click Rule)
  • 유저가 원하는 정보나 핵심 기능에 도달하기까지 클릭을 세 번 이상하게 만들면 안 된다는 디자인 법칙이 있다. IA의 뎁스가 너무 깊어지면 유저는 피로감을 느끼고 이탈한다. 얕고 넓은 구조가 대체로 유리하다.
• 미래를 위한 확장성 열어두기
  • 서비스는 런칭 후에도 계속 업데이트된다. 나중에 새로운 기능이 추가될 때, 기존 구조를 다 뜯어고치지 않고도 자연스럽게 메뉴를 추가할 수 있도록 유연하게 설계하는 것이 좋은 IA다.