📚 지식 노트

정보 구조의 네 요소

정보 구조(information architecture, IA)는 콘텐츠와 기능을 사람이 찾고 이해할 수 있게 나누고, 이름 붙이고, 잇는 설계다. 화면의 색이나 모양보다 먼저 정해지고, 잘못되면 시각 디자인으로는 고칠 수 없다. 흔히 네 요소로 나눠 본다.

• 분류(organization): 무엇을 어느 묶음에 넣을지. 주제별, 할 일별, 대상별, 시간순, 가나다순 같은 기준이 있다.
• 이름(labeling): 묶음과 링크를 무엇이라 부를지. 같은 묶음이라도 "고객 지원"과 "분실물 찾기"는 전혀 다르게 읽힌다.
• 내비게이션(navigation): 묶음 사이를 오가는 길과 "지금 어디 있는지" 알려 주는 표시.
• 검색(search): 이름을 모르거나 구조를 따라가기 싫은 사람을 위한 길.

멘탈 모델: 사용자가 믿는 구조

멘탈 모델은 사용자가 시스템이 어떻게 동작한다고 믿는지다. NN/g가 강조하듯 사실이 아니라 믿음이고, 사람마다 다르며, 경험에 따라 바뀐다. 문제는 만드는 사람의 모델이 늘 더 정교하다는 데서 생긴다. 조직 안에서는 부서 이름이 당연하지만, 바깥 사람은 그 부서가 무엇을 하는지 모른다.

사용자는 대부분의 시간을 다른 서비스에서 보낸다. 그래서 내 서비스도 익숙한 서비스처럼 움직이기를 기대한다(제이콥의 법칙). 장바구니가 오른쪽 위에, 로고를 누르면 홈으로 가는 것이 그 예다. 익숙한 모델은 바꾸기 어려우니, 새 방식을 들일 때는 이유가 분명해야 하고 처음에 잘 설명해야 한다. 사용자의 모델을 알아내는 가장 쉬운 방법은 생각을 말하며 써 보게 하는 것이고, 구조에 대해서라면 다음의 카드 소팅이다.

카드 소팅: 사용자에게 묶어 보게 한다

카드 소팅은 콘텐츠 항목을 카드에 하나씩 적어 사용자에게 주고, 자기 생각대로 묶고 이름을 붙이게 하는 방법이다. 세 가지가 있다.

• 열린 카드 소팅: 묶음을 사용자가 만들고 이름도 붙인다. 가장 흔하고, 구조를 처음 잡을 때 쓴다.
• 닫힌 카드 소팅: 묶음을 미리 정해 주고 카드를 넣게 한다. 기존 구조를 확인하는 용도지만, NN/g는 그 목적이라면 대개 트리 테스트가 낫다고 본다.
• 혼합: 일부 묶음만 정해 준다. 한두 묶음에 확신이 있을 때만 쓴다.

NN/g는 카드를 30~50장으로 권한다. 진행자가 옆에서 이유를 묻는 대면 방식은 정성적 통찰을, 온라인 도구로 혼자 하게 하는 방식은 정량적 결과를 얻는 데 쓴다. 결과를 모으면 카드 두 장이 같은 묶음에 들어간 비율(유사도)이 나오고, 이것으로 아래에서 위로 묶어 가면 덴드로그램이 된다.

몇 명이 필요한가. NN/g가 인용한 168명 연구에서 무작위로 일부만 뽑아 보니, 5명의 결과는 전체 결과와 상관이 0.75, 15명은 0.90, 30명은 0.95이었다. 그래서 대부분의 프로젝트에는 15명을 권한다. 위 그림의 가상 다섯 명은 과정을 보이기 위한 것이고, 실제로는 이보다 많이 모은다.

결과 읽기: 유사도 행렬

덴드로그램은 묶이는 순서를 보이고, 유사도 행렬은 모든 쌍을 한눈에 보인다. 칸 하나는 두 카드를 함께 묶은 사람의 비율이다. 줄을 군집 순서대로 세우면 대각선을 따라 진한 블록이 생기고, 그것이 메뉴 묶음의 후보다.

행렬에서 더 쓸모 있는 것은 흐린 칸이 흩어진 카드다. 사람마다 다른 곳에 넣었다는 뜻이고, 이름이 애매하거나 여러 묶음에 걸치는 항목이다. 이런 카드는 이름을 바꾸거나, 두 곳에서 링크하거나, 검색으로 받친다. 카드 소팅은 답을 주는 방법이 아니라 사용자의 모델을 보여 주는 방법이다. 최종 구조는 팀이 정하고, 다음의 트리 테스트로 확인한다.

트리 테스트: 구조만으로 길을 찾게 한다

트리 테스트는 카드 소팅의 반대 방향이다. 카드 소팅이 구조를 만드는(생성적) 방법이라면, 트리 테스트는 만든 구조를 평가하는 방법이다. 시각 디자인도 화면도 없이 메뉴의 나무만 보여 주고 "~하려면 어디로 가겠습니까?" 같은 과제를 준다. 사용자는 묶음을 펼쳐 가며 답이 있을 곳을 고른다.

그림의 가상 결과는 열 명 중 70%가 성공했지만 곧바로 간 사람은 50%뿐이고, 실패한 30%는 모두 같은 곳으로 갔다. 이런 몰림은 이름의 문제다. 디자인이 없으니 결과는 순수하게 분류와 이름의 성적이고, 시각 디자인을 들이기 전에 싸게 고칠 수 있다. 정성적으로는 몇 명으로도 되지만, 비율을 재려면 표본이 커야 한다(사용자 조사의 표본 수).

내비게이션 패턴: 늘 보이게 할 것인가

구조가 정해지면 그것을 화면에 어떻게 드러낼지 고른다. 패턴마다 공간과 발견 가능성을 맞바꾼다.

숨긴 메뉴의 비용은 실험으로 재어 있다. NN/g가 179명을 6개 사이트에서 시험한 결과, 데스크톱에서 숨긴 메뉴는 27%만 쓰였지만 보이는 메뉴는 48%, 보이는 것과 숨긴 것을 함께 둔 메뉴는 50%가 쓰였다. 휴대폰에서도 숨긴 메뉴는 57%, 함께 둔 메뉴는 86%였다. 숨기면 과제 시간도 데스크톱에서 39% 이상, 휴대폰에서 15% 늘었다. 그래서 휴대폰에서도 가장 중요한 몇 곳은 밖에 꺼내 두고 나머지를 햄버거에 넣는 조합이 흔하다.

메가 메뉴를 호버로 열 때 NN/g는 마우스가 0.5초 머문 뒤 0.1초 안에 열고, 마우스가 메뉴 밖으로 0.5초 나가 있을 때 닫으라고 권한다. 지나가던 마우스에 메뉴가 펄럭이지 않게 하려는 것이다. 브레드크럼은 현재 페이지를 맨 끝에 두되 링크하지 않는다(아무 일도 하지 않는 링크가 되기 때문이다). 휴대폰에서 터치 목표의 크기와 엄지가 닿는 자리는 모바일 앱 개발 노트와 반응형·모바일·접근성에 있다.

정보 냄새: 누르기 전에 고른다

사람들은 링크를 누르기 전에 그 너머에 원하는 것이 있을지 어림한다. NN/g는 정보 냄새(information scent)를 "출처의 겉모습에서 얻은, 그 출처가 줄 가치에 대한 사용자의 불완전한 어림"으로 정의한다. 동물이 냄새를 따라 먹이를 찾듯 사람도 정보를 찾아 다닌다는 정보 채집 이론(information foraging)의 핵심 개념이다.

• 구체적으로: "더 보기", "자세히" 같은 이름은 냄새가 없다. 목적지를 말하는 이름을 쓴다.
• 사용자의 말로: 사내 용어나 브랜드 이름은 바깥 사람에게 냄새가 없다.
• 맥락 없이도 읽히게: 휴대폰에서는 주변 맥락이 접혀 있기 쉽다. NN/g의 예처럼 "크리스마스"보다 "크리스마스 선물"이 낫다.
• 요약 한 줄: 비슷한 두 링크(예: 일반 진료와 응급 진료)는 아래 설명 한 줄이 차이를 알려 준다.
• 낚시하지 않기: 과장된 이름으로 누르게 하면 다음부터 모든 링크를 믿지 않는다.

깊이와 너비: 몇 단계로 나눌까

같은 항목을 한 단계에 몇 개씩 나누느냐에 따라 구조의 깊이가 정해진다. 한 단계에 b개씩 고르게 하면, 항목 N개에 닿는 데 필요한 단계 수는 b를 몇 번 곱해야 N 이상이 되는가다. 1,000개라면 너비 10은 3단계, 너비 4는 5단계, 너비 32는 2단계다.

NN/g의 정리는 이렇다. 얕은 구조는 콘텐츠가 묻히지 않고, 분명하고 구체적인 묶음 이름을 쓰기 쉽다. 대신 메뉴가 길면 압도되고 가장 좋은 선택지를 놓친다. 깊은 구조는 단계마다 메뉴가 짧아 훑기 쉽지만, 여러 번 눌러야 하고 길을 잃거나 포기하기 쉬우며, 단계마다 몇 개 안 되는 묶음은 이름이 막연해진다. 결론은 분명하고 알아보기 쉬운 묶음이 있으면 얕은 쪽을 택하고, 깊어질 수밖에 없다면 가나다 색인이나 "많이 찾는 것" 같은 지름길과 브레드크럼으로 보완하라는 것이다. 숫자 하나로 정할 일이 아니라 카드 소팅과 트리 테스트로 확인할 일이다.

검색 UX: 자동 완성, 필터, 결과 없음

검색은 구조를 모르는 사람의 길이지만, 검색이 있다고 구조를 대충 해도 되는 것은 아니다. 검색 결과도 결국 분류와 이름으로 정리되어야 읽힌다. 검색 화면에서 손이 가장 많이 가는 곳은 셋이다.

• 자동 완성: 제안이 입력 뒤에 글자를 덧붙이는 방식이면 덧붙는 글자를 강조하고, 입력이 가운데 들어간 인기 검색어를 보이는 방식이면 입력한 부분을 강조한다. 모든 제안은 실제로 좋은 결과로 이어져야 하고, 휴대폰에서는 화려한 제안을 단순한 글자 제안으로 줄인다(NN/g).
• 필터: 둘러보는 사용자에게는 고를 때마다 결과가 바로 바뀌는 방식이, 조건을 이미 아는 사용자에게는 여러 개를 고른 뒤 한 번에 적용하는 방식이 맞는다. 사이트가 느리면 모아서 적용하는 쪽이 낫다. 선택지마다 결과 수를 달면 0건이 되는 조합을 미리 피한다.
• 결과 없음: NN/g의 세 지침은 결과가 없다는 것을 분명히 보이고, 검색어를 고칠 수 있게 그대로 두고 비슷한 검색어·맞춤법 교정 같은 다음 길을 주고, 농담으로 사용자를 놀리지 않는 것이다.

검색 로그는 그 자체로 정보 구조 조사다. 사람들이 메뉴에 있는 것을 검색한다면 그 이름이 안 보이거나 안 읽힌다는 뜻이고, 자주 나오는 결과 없음 검색어는 없는 콘텐츠나 다른 이름을 알려 준다. 검색 엔진의 색인과 순위 매기기는 검색과 추천 노트에 있다.

사이트맵: 구조를 한 장에

사이트맵은 페이지의 계층을 나무 모양으로 그린 문서다. 맨 윗줄 묶음이 전역 내비게이션이 되고, 그 아래가 지역 내비게이션이 된다. 페이지마다 번호를 붙여 두면 기획·디자인·개발·QA가 같은 페이지를 같은 이름으로 부른다.

사이트맵은 "어디에 무엇이 있나"를 보이지만 "어떻게 오가나"는 보이지 못한다. 화면 사이의 흐름은 와이어프레임을 화살표로 잇는 와이어플로나 사용자 흐름도로 따로 그린다(UX와 UI, 디자인 프로세스). 사용자에게 보이는 사이트맵 페이지와 검색 엔진에 주는 sitemap.xml은 이름만 같고 목적이 다르다.

흔한 오해

• "정보 구조는 조직도를 따라가면 된다": 사용자는 부서를 모른다. 사용자의 일과 상황으로 나눈다.
• "카드 소팅 결과가 곧 메뉴다": 카드 소팅은 사용자의 모델을 보여 줄 뿐이다. 구조는 팀이 정하고 트리 테스트로 확인한다.
• "3번 클릭 안에 닿아야 한다": 클릭 수보다 단계마다 고르기가 쉬운지가 중요하다. 냄새가 짙은 다섯 번이 헷갈리는 두 번보다 낫다.
• "검색이 있으니 메뉴는 대충 해도 된다": 검색어를 떠올리지 못하는 사람, 무엇이 있는지 둘러보려는 사람이 있다. 검색 결과도 분류와 이름이 있어야 읽힌다.
• "햄버거 메뉴는 누구나 안다": 아이콘은 알아도 덜 연다. 숨긴 메뉴는 실험에서 덜 쓰였고 과제를 느리게 했다.
• "브레드크럼은 지나온 길이다": 브레드크럼은 계층 속 현재 위치다. 뒤로 가기가 이미 방문 기록을 맡는다.

핵심 자료