네비게이션과 정보구조의 차이 — 식당에서의 단상

화면설계 강의에서 자주 받는 질문. 마켓컬리와 식당을 예로 들어 정보구조(IA)와 네비게이션의 차이를 풀어봅니다.

네비게이션은 UI, 정보구조는 성격

네비게이션은 이동을 편리하게 하기 위해 메뉴나 버튼을 배치한 UI 요소입니다. 반면 정보구조(IA)는 시각 장애인이 이용하더라도 동일하게 인지할 수 있는, 정보의 성격적인 구조물입니다. 마켓컬리 모바일웹의 헤더바·탭바가 네비게이션이라면, 그 뒤에 깔린 정보의 분류 체계가 정보구조입니다.

지속성 vs 임시성

정보구조는 지속성을 지니고 성격별 분류 체계를 지향하지만, 네비게이션은 상대적으로 임시성을 지니고 사용성에 초점을 둡니다. 서랍 속 비품은 칸별로 정해져 있어도, 책상 위에 올리는 위치는 사람마다 다른 것과 같습니다. "검색 아이콘은 상단에 있어야지"라는 한마디에 탭바의 검색이 헤더로 올라갈 수 있는 것이죠.

모든 정보는 5가지로 나뉜다

정보구조는 성격으로 구분하기 때문에 Main / Product / Search / Utility / Company 다섯 가지로 정리됩니다. 식당도 마찬가지입니다. 간판·출입문은 Main, 주력 메뉴는 Product, 인포데스크는 Search, 물·수저·반찬은 Utility, 사업자등록증·허가증은 Company입니다.

왜 구분해야 하는가

PC 웹 시절에는 정보의 성격 구성과 네비게이션 그룹이 거의 일치해 섞어 써도 무방했습니다. 하지만 모바일에서 성격으로 제대로 구분하지 않으면, 같이 일하는 동료에게 혼란을 줄 수 있습니다. (원문: blog.naver.com/phk4568)