테이블

목록을 보여 주는 방법은 여러 가지인데, 값끼리 견주는 일만은 한 가지 배치에서만 됩니다. 같은 종류의 숫자가 세로로 줄지어 있어야 눈이 위아래로 훑으며 큰 것과 작은 것을 가릴 수 있습니다.

페이지덱의 관리자 화면이 이 차이를 알려 줬습니다. 처음에는 팀 계정 목록을 상자 여러 개로 늘어놓았습니다. 상자마다 팀 이름과 인원, 쓴 용량, 결제 상태가 들어 있었고 화면은 깔끔했습니다. 그런데 운영을 맡은 수아가 어느 팀이 용량을 가장 많이 쓰는지 물었을 때 답할 방법이 없었습니다. 숫자가 상자마다 다른 위치에 있어서 서른 개를 하나씩 읽어야 했습니다. 상자를 걷어 내고 행과 열로 다시 깔자 같은 질문에 3초가 걸렸습니다. 용량 열 하나를 눌러 정렬하면 끝이었습니다.

그래서 이 부품은 정보를 많이 담기 위한 것이 아니라 견주기 위한 것입니다. 비교할 필요가 없는 목록이라면 카드처럼 덩어리로 묶는 편이 읽기 편하고, 비교가 목적이면 이 배치를 씁니다.

한 행이 한 건이고 한 열이 한 속성입니다. 같은 속성의 값이 세로로 정렬되면서 비교가 되는 구조입니다.

1. 맨 위 행은 열 이름을 담는 머리 행입니다. 나머지 행과 생김새가 달라야 하고, 화면을 내릴 때 위에 붙어 남아 있어야 스무 번째 행에서도 지금 보는 숫자가 무엇인지 알 수 있습니다.
2. 값의 종류에 따라 정렬 방향을 나눕니다. 글자는 왼쪽, 숫자는 오른쪽에 붙입니다. 숫자를 오른쪽에 붙이면 자릿수가 세로로 맞아떨어져 1,200과 980의 크기 차이가 읽지 않아도 보입니다.
3. 정렬은 열 이름을 눌러 바꿉니다. 지금 어느 열로 정렬돼 있고 오름차순인지 내림차순인지를 화살표로 표시합니다. 표시가 없으면 사용자는 자기가 방금 무엇을 눌렀는지 모릅니다.
4. 행을 고르는 칸과 고른 뒤 할 일을 함께 둡니다. 왼쪽 끝에 선택 칸을 두고, 여러 행을 고르면 화면 위쪽에 선택된 개수와 일괄 작업 버튼이 나타나는 식입니다.
5. 값이 없는 칸은 비워 두지 않고 줄표를 넣습니다. 빈 칸은 값이 0인지, 아직 안 들어온 것인지, 화면이 깨진 것인지 구분해 주지 않습니다.
6. 행이 많으면 쪽으로 나누거나 아래로 이어 붙입니다. 페이지네이션은 몇 번째 쪽인지가 남아 다시 찾아가기 쉽고, 이어 붙이는 방식은 훑어보기에 낫습니다.

열 개수가 이 부품의 한계를 정합니다. 일곱 개를 넘기면 가로 스크롤이 생기고, 가로로 밀린 상태에서는 지금 보는 숫자가 어느 팀의 것인지 사라집니다. 열이 많아야 하는 화면에서는 팀 이름처럼 기준이 되는 첫 열을 왼쪽에 고정해 둡니다.

값끼리 견주거나 한 건을 골라 처리하는 화면에 들어갑니다. 자주 쓰이는 자리가 넷입니다.

1. 관리자 화면입니다. 계정 목록, 결제 이력, 권한 목록처럼 수십 건에서 수천 건을 다루고 그중 하나를 찾아 처리하는 자리입니다.
2. 이력과 기록입니다. 누가 언제 무엇을 바꿨는지를 시간 순으로 늘어놓는 화면이고, 시각 열로 정렬하는 것이 기본 동작입니다.
3. 요금제 비교입니다. 세로를 기능, 가로를 요금제로 두면 어느 플랜에 무엇이 들어 있는지가 한눈에 갈립니다. 이때는 값이 숫자가 아니라 있음과 없음이라서 표시를 한 종류로 통일하는 것이 읽는 속도를 정합니다.
4. 대시보드의 아래쪽입니다. 위에는 그래프로 흐름을 보여 주고 아래에는 그 숫자를 만든 개별 건을 테이블로 붙입니다.

좁은 화면에서는 이 배치가 그대로 들어가지 않습니다. 열 일곱 개를 폭 400픽셀 화면에 넣으면 어느 방식으로도 읽히지 않으므로, 한 행을 카드 한 장으로 바꿔 세로로 쌓거나 핵심 두세 열만 남기고 나머지는 행을 눌러 들어가는 상세 화면으로 옮깁니다. 탭으로 열 묶음을 나누는 방법도 쓰입니다.

읽는 사람이 화면을 눈으로 보지 않는 경우도 함께 봅니다. 머리 행을 머리 행으로 표시해 두면 화면을 소리로 읽어 주는 프로그램이 셀마다 열 이름을 함께 읽어 줍니다. 그 표시가 없으면 사용자는 숫자만 스무 개 듣게 됩니다. 접근성에서 이 부품이 자주 예로 나오는 이유입니다.

"이 목록 카드로 깔았는데 테이블로 바꿔 주세요. 값을 견줘야 해서요."

보기 좋은 배치보다 비교가 되는 배치가 필요하다는 요청입니다.

"열이 열두 개예요. 넷만 남기고 나머지는 상세로 옮기죠."

가로 스크롤이 생기기 전에 열을 덜어 내자는 제안입니다.

"정렬 화살표가 없어서 지금 무슨 순서인지 모르겠어요."

상태를 화면에 표시하지 않아 사용자가 자기 조작의 결과를 확인할 수 없다는 지적입니다.

민서와 태오가 관리자 화면을 고칠 때 가장 오래 이야기한 것은 열을 무엇으로 할지였습니다. 운영팀이 실제로 하는 일을 보니 팀을 찾는 기준은 이름과 용량과 결제 상태 셋이었고, 나머지 여덟 열은 한 건을 골라 들어간 뒤에야 필요했습니다. 열을 넷으로 줄이고 나머지를 상세 화면으로 옮긴 뒤 가로 스크롤이 없어졌습니다. 같은 주에 머리 행 고정과 정렬 표시를 붙였고, 운영팀이 한 건을 찾는 데 걸리는 시간이 눈에 띄게 줄었습니다.

정보를 많이 담아야 할 때 쓰는 그릇이라고 읽는 경우가 가장 많습니다. 행과 열이 있으니 칸을 늘리면 그만큼 담을 수 있어 보입니다. 하지만 열을 하나 더할 때마다 모든 열의 너비가 줄고, 어느 순간 가로로 밀리면서 기준 열이 화면에서 사라집니다. 열 열다섯 개짜리 테이블은 담긴 정보가 많은 화면이 아니라 아무것도 견줄 수 없는 화면입니다. 폭 1,200픽셀에 열 열다섯을 넣으면 한 열이 80픽셀이고, 그 너비에는 팀 이름 여섯 자가 들어가지 않습니다. 남길 열을 고르는 기준은 이 열로 정렬하거나 이 열로 걸러 낼 일이 있는지입니다. 답이 아니면 그 값은 상세 화면으로 갑니다.

카드가 요즘 방식이고 테이블은 낡았다고 보는 것도 흔합니다. 화면을 새로 만들 때 격자로 늘어놓은 상자가 더 다듬어 보이니 그렇게 읽힙니다. 실제로는 둘이 맡는 일이 다릅니다. 상자는 한 건을 하나의 덩어리로 보여 주는 데 강하고, 행과 열은 여러 건을 같은 잣대로 늘어놓는 데 강합니다. 비교가 필요한 화면을 상자로 만들면 사용자가 그 비교를 눈으로 대신 하게 되고, 서른 건이 넘어가면 그 일을 포기합니다.