사이트맵

제품 구조는 오랫동안 만든 사람들 머릿속에만 있었습니다. 화면은 한 장씩 시안으로 나왔고 각각은 멀쩡했지만, 그 장들이 어떻게 이어지는지를 한눈에 볼 방법이 없었습니다.

새 기능을 어디에 둘지 정하는 자리에서 이 문제가 드러납니다. 알림 설정을 어디에 넣을지 물으면 답이 셋 나옵니다. 프로필 아래, 설정 아래, 워크스페이스 설정 아래입니다. 세 사람이 서로 다른 구조를 머릿속에 그리고 있었기 때문인데, 그림이 없으니 어느 쪽이 맞는지 따질 근거도 없습니다. 그래서 그날 목소리가 큰 쪽으로 정해지고, 반년 뒤에는 설정 안에 팀 관리가 있고 팀 관리 안에 또 설정이 있는 상태가 됩니다.

사이트맵은 머릿속 구조를 종이로 끌어냅니다. 옮겨 적는 것만으로 결정이 되지는 않지만, 결정해야 할 곳이 눈에 보이게 됩니다. 항목 하나에 닿기까지 다섯 번을 눌러야 하는 갈래, 한 층에 열아홉 개가 나란히 놓인 자리, 어느 갈래에도 속하지 않아 기타 아래 모아 둔 무더기가 눈에 띕니다.

한 장에 들어가는 것은 여섯 가지입니다.

1. 뿌리. 맨 위에 첫 화면 하나를 둡니다. 로그인 전과 후가 완전히 다른 제품이면 뿌리를 둘로 나눠 그립니다. 한 장에 합치면 어느 쪽 화면인지 구분이 안 됩니다.
2. 층. 뿌리 아래로 대분류, 그 아래 중분류 순으로 내려갑니다. 층은 셋에서 넷 사이로 잡습니다. 다섯 층이 넘으면 목적지에 닿기까지 다섯 번을 눌러야 한다는 뜻이고, 그림에서 그 갈래만 유독 길게 늘어져 보입니다.
3. 화면마다 적는 정보. 사용자에게 보일 이름, 자리를 가리키는 번호, 볼 수 있는 권한, 지금 있는 화면인지 만들 화면인지입니다. 번호는 1·1.1·1.1.2처럼 층에 맞춰 매깁니다. 이 번호가 있으면 이름이 아직 안 정해진 화면도 회의에서 가리킬 수 있습니다.
4. 연결선. 부모와 자식 관계를 선으로 잇습니다. 한 화면이 두 갈래에 걸치는 경우가 늘 생기는데, 이때 주 위치를 하나만 정하고 나머지는 점선으로 그립니다. 실선을 둘 그리면 나무가 아니라 그물이 되고, 개발 쪽에서 경로를 하나로 정할 수 없게 됩니다.
5. 진입점 표시. 메뉴에 노출되는 화면과 링크로만 들어가는 화면을 구분해 둡니다. 공유 링크로만 열리는 문서 화면처럼 메뉴에 없는 자리가 여럿 있고, 이 표시가 없으면 내비게이션을 만들 때 그 화면이 통째로 빠집니다.
6. 넣지 않는 것. 화면이 아닌 것은 넣지 않습니다. 확인 창, 짧게 떴다 사라지는 알림, 같은 화면의 탭 전환이 그렇습니다. 이것까지 그리면 노드가 세 배로 늘어나 큰 구조가 안 보입니다. 이쪽은 유저 플로우가 맡습니다. 목적을 이루기까지 지나는 경로와 갈림길을 그린 도면입니다.

그린 뒤에는 폭과 깊이의 균형을 확인합니다. 한 층에 다섯에서 일곱 개, 층은 셋 정도가 실무에서 자주 쓰이는 기준입니다.

그리는 사람은 구조를 정하는 사람입니다. 페이지덱에서는 민서가 그리고 지현이 검토합니다. 혼자 그리면 빠지는 화면이 있어서, 초안을 개발과 세일즈에 한 번씩 보여 자기 일에서 쓰는 화면이 있는지 확인받습니다.

읽는 쪽은 넷입니다.

1. 개발자. 만들 화면의 전체 목록이자 주소 설계의 입력입니다. 층 구조가 그대로 주소가 되는 경우가 많아서, 층을 바꾸면 주소도 바뀝니다.
2. 디자이너. 어떤 화면의 시안이 필요한지가 이 목록에서 나옵니다. 스무 개짜리 목록에 시안이 열두 장이면 여덟 장이 비어 있다는 뜻입니다.
3. 검수 담당. 만들어진 것과 그림을 맞춰 보며 빠진 화면을 찾습니다. 어느 경로로도 닿을 수 없는 화면이 이 대조에서 드러납니다.
4. 새로 들어온 사람. 제품 전체를 가장 빠르게 파악하는 문서입니다. 화면을 하나씩 열어 보는 것보다 빠릅니다.

갱신은 큰 구조가 바뀔 때만 합니다. 출시마다 손대면 유지하는 일이 일이 됩니다. 소유자를 한 사람으로 두고 갈래를 새로 만들거나 없애거나 이름을 바꿀 때 손봅니다. 이름 자체는 레이블링의 몫이지만 어느 갈래의 이름인지는 이 그림에서 확인합니다.

"이거 넣기 전에 사이트맵부터 열어 보죠. 어디 아래에 들어갈지 정해야 해요."

새 화면의 자리를 구조 위에서 정하자는 제안입니다.

"3.2 아래가 지금 다섯 층이에요. 여기만 유독 깊습니다."

그림에서 한 갈래가 다른 갈래보다 길게 늘어진 것을 짚는 말입니다.

"사이트맵에는 있는데 메뉴에서 안 보여요."

구조에는 자리가 있지만 진입점이 만들어지지 않았다는 뜻입니다.

페이지덱이 기업 고객용 권한 관리를 준비할 때 민서가 이 그림을 다시 펼쳤습니다. 새 화면 여섯 개를 어디에 붙일지가 문제였습니다. 설정 아래에 넣으면 설정이 열두 개로 늘고, 워크스페이스 아래에 넣으면 개인 설정과 팀 설정이 섞였습니다.

그림에 옮겨 놓고 보니 이미 설정 아래에 팀에 관한 항목이 셋 있었습니다. 민서는 그 셋을 새 화면 여섯 개와 함께 묶어 팀 관리라는 갈래를 하나 만들고, 설정에는 개인에 관한 것만 남겼습니다. 층은 하나 늘었지만 한 층에 놓인 항목이 열둘에서 여섯으로 줄었습니다.

한 번 그리고 끝나는 문서로 보는 경우가 가장 많습니다. 구조는 자주 안 바뀐다고 여기니 자연스러운 오해입니다. 하지만 기능이 늘면 갈래도 늘고, 반년이면 그림과 실제가 어긋납니다. 낡은 그림은 없는 그림보다 나쁩니다. 없으면 사람들이 직접 화면을 열어 확인하는데, 틀린 그림이 있으면 그것을 믿고 만들다가 뒤늦게 되돌립니다.

층을 얕게 만드는 것이 언제나 낫다고 여기는 것도 흔합니다. 세 번 눌러야 닿는 것보다 한 번에 닿는 것이 좋게 들립니다. 하지만 층을 없애면 그 항목들이 위층으로 올라와 한 줄에 스무 개가 늘어섭니다. 사용자는 누르는 횟수보다 고를 것이 스무 개라는 사실에 더 오래 멈춥니다. 선택지가 많을수록 결정이 느려진다는 힉의 법칙이 여기 걸립니다. 층과 폭은 한쪽을 줄이면 다른 쪽이 늘어나는 관계이고, 어느 쪽이 나은지는 사용자가 어떤 이름으로 항목을 찾아오는지에 달려 있습니다. 그 답은 택소노미를 정할 때 나옵니다.