탭

하나의 대상을 다루는 화면인데 담을 내용이 여러 묶음일 때가 문제였습니다. 다 이어 붙이면 화면이 길어지고, 페이지를 나누면 같은 대상을 보는 중이라는 감각이 끊깁니다.

페이지덱의 문서 설정 화면이 그랬습니다. 이름과 아이콘을 바꾸는 항목, 누가 볼 수 있는지 정하는 항목, 지난 수정 기록, 다른 도구와 연결하는 항목이 한 페이지에 세로로 이어져 있었습니다. 화면 다섯 개 분량이었고, 권한을 고치러 들어온 사람은 매번 중간까지 내려가야 했습니다. 반대로 네 페이지로 쪼개 보니 권한을 바꾸고 수정 기록을 확인하는 흐름에서 뒤로 가기를 두 번 눌러야 했습니다.

탭은 이 둘 사이를 고른 장치입니다. 내용은 네 묶음으로 나누되 화면은 한 자리에 두고, 위쪽의 이름 줄만 눌러 갈아 끼웁니다. 대상이 바뀌지 않았다는 것을 화면이 계속 말해 주면서 길이는 묶음 하나만큼으로 줄어듭니다.

한 번에 한 묶음만 보이고 나머지는 같은 자리에 숨어 있는 구조입니다. 위쪽 이름 줄이 지금 무엇이 열려 있는지와 무엇을 더 열 수 있는지를 함께 알려 줍니다.

1. 선택된 탭을 분명히 표시합니다. 색만 바꾸면 그 차이를 못 보는 사람이 있으니 밑줄이나 배경처럼 색이 아닌 표시를 함께 씁니다. 지금 어디에 있는지 모르는 상태가 이 부품에서 가장 잦은 실패입니다.
2. 탭 이름은 한두 단어 명사로 적습니다. 안에 무엇이 있는지 예측되지 않으면 사용자는 첫 탭만 보고 나갑니다. 일반, 권한, 기록, 연동처럼 내용이 그대로 드러나는 말을 쓰고, 기타나 고급 같은 이름은 그 안에 무엇이 있는지 알려 주지 않으니 피합니다.
3. 개수는 셋에서 다섯 사이로 둡니다. 여섯을 넘기면 이름 줄이 한 줄에 들어가지 않고, 옆으로 밀리는 탭 줄에서는 뒤쪽 탭이 있다는 사실 자체가 전해지지 않습니다.
4. 지금 열린 탭을 주소에 남깁니다. 주소에 남지 않으면 새로고침하면 첫 탭으로 돌아가고, 권한 화면을 동료에게 링크로 보내도 상대는 일반 탭을 보게 됩니다.
5. 탭을 옮겼다가 돌아왔을 때 입력하던 값이 남아 있어야 합니다. 권한 탭에서 세 명을 고른 뒤 기록 탭을 잠깐 보고 돌아왔더니 선택이 풀려 있다면 사용자는 다시 고르지 않고 창을 닫습니다.
6. 키보드로도 옮길 수 있게 만듭니다. 이름 줄에 초점이 가 있을 때 좌우 화살표로 탭이 바뀌고, 열린 탭의 내용이 바로 다음 순서로 읽히게 표시해 둡니다. 접근성에서 이 부품이 자주 예로 나오는 이유입니다.

내용을 숨기는 장치라는 점이 이 부품의 성질을 정합니다. 숨긴 것은 열리지 않으므로, 모두가 봐야 하는 내용은 탭 안에 넣지 않습니다. 결제가 실패했다는 안내를 세 번째 탭에 두면 그 문장은 있어도 읽히지 않습니다.

한 대상에 딸린 내용이 성격별로 갈리고 그 갈래를 동시에 볼 필요가 없을 때 씁니다. 자주 쓰이는 자리가 넷입니다.

1. 설정 화면입니다. 일반, 권한, 알림처럼 한 번에 하나만 고치는 묶음이 나란히 놓이는 자리입니다.
2. 한 건의 상세 화면입니다. 고객 하나를 열었을 때 개요와 활동 기록과 청구 내역을 탭으로 나눕니다.
3. 목록의 상태 구분입니다. 전체, 진행 중, 완료를 탭으로 두면 걸러 내기가 곧 화면 전환이 됩니다. 탭 이름 옆에 건수를 붙여 두면 누르기 전에 어디에 일이 쌓였는지가 보입니다.
4. 같은 데이터의 다른 표현입니다. 같은 숫자를 그래프로 볼지 테이블로 볼지 고르게 하는 자리입니다.

쓰지 않는 자리도 분명합니다. 순서대로 밟아야 하는 과정에는 쓰지 않습니다. 탭은 아무 순서로나 눌러도 되는 구조라, 1단계를 건너뛰고 3단계를 열 수 있게 되어 버립니다. 나란히 놓고 견줘야 하는 내용도 탭으로 나누지 않습니다. 두 탭을 번갈아 누르며 기억으로 비교하게 만드는 대신 한 화면에 함께 둡니다.

"권한이 세 번째 탭에 있어서 아무도 못 찾아요. 첫 탭으로 옮기죠."

숨겨진 묶음의 조회율이 낮다는 문제를 자리 순서로 고치자는 말입니다.

"탭 옮겼는데 주소가 안 바뀌어서 링크 공유가 안 됩니다."

화면 상태가 주소에 남지 않아 새로고침과 공유가 깨진다는 지적입니다.

"탭이 일곱 개면 탭으로 해결할 문제가 아닙니다."

묶음이 너무 많아 분류 자체를 다시 봐야 한다는 뜻입니다.

민서가 문서 설정 화면을 탭 넷으로 나눈 뒤 태오가 조회 기록을 붙여 봤습니다. 첫 탭은 전체 방문의 90퍼센트가 열었고 네 번째 연동 탭은 4퍼센트였습니다. 4퍼센트라는 숫자를 두고 둘의 결론이 갈렸는데, 연동을 쓰는 팀에게는 그 탭이 필요하고 대다수에게는 필요하지 않다는 점에서 자리를 유지하기로 했습니다. 대신 권한 탭이 두 번째에서 열린 비율이 31퍼센트에 그친 것은 문제로 봤습니다. 권한을 고치려고 들어오는 문의가 그보다 많았기 때문이고, 그 탭을 첫 번째로 옮겼습니다.

공간을 아끼는 장치라고 읽는 경우가 가장 많습니다. 한 자리에 네 묶음이 들어가니 화면을 넷으로 쓴 것처럼 보입니다. 하지만 실제로 한 일은 셋을 숨긴 것입니다. 숨긴 내용은 열리지 않고, 두 번째 탭 뒤로 갈수록 조회율은 빠르게 떨어집니다. 모두가 알아야 하는 공지나 결제 실패 안내를 탭 안에 넣으면 그 문장은 없는 것과 같아집니다. 자리가 부족해서 탭을 쓰기로 했다면 먼저 지울 수 있는 내용이 있는지 봅니다.

탭을 늘려 정보 구조를 정리할 수 있다고 보는 것도 흔합니다. 묶음이 늘 때마다 이름 줄에 한 칸씩 붙이면 될 것 같습니다. 실제로는 탭 일곱 개는 분류가 되지 않았다는 신호입니다. 사용자는 이름 일곱 개 중 어디에 자기가 찾는 것이 있는지 판단하지 못하고 처음부터 하나씩 눌러 봅니다. 그 지점에서는 탭을 줄이는 대신 화면을 나누고 왼쪽에 메뉴를 세우는 쪽이 맞습니다. 항목이 스무 개여도 메뉴는 세로로 늘어날 수 있지만 탭 줄은 가로 폭에 막힙니다.