백오피스에서 우리는 수많은 데이터를 다룹니다. 주문, 회원, 결제 내역을 조회하고, 정렬하고, 수정합니다. 여러 건을 한눈에 훑기에 가장 자연스러운 형태가 테이블이고, 그래서 가장 많이 마주하는 화면도 테이블입니다. 거기서 가장 많이 고민하는 건 디자인이 아니라, 어떤 컬럼을 어떤 순서로 보여줄지입니다.
아무 생각 없이 만들면 보통 데이터가 나오는 순서를 그대로 옮깁니다. 백엔드가 주는 순서, 혹은 모델에 정의된 순서대로요. 주문·결제 내역 화면이 이렇게 됩니다.
주문 아이디 | 상태 | 결제수단 | 결제금액 | 상품명 | 고객명 | 환불금액 | 생성일시 | 수정일시빠진 정보는 없습니다. 그런데 막상 읽으려고 하면 걸립니다. 맨 앞은 사람이 외우지 못하는 주문 아이디, 이어서 상태와 결제 정보가 몰려 나오고, 정작 누가 무엇을 샀는지 — 상품명과 고객명 — 은 다섯째, 여섯째에야 나옵니다. 이 표는 읽는 사람이 아니라 데이터 구조를 따라 만들어졌습니다. 그래서 안 읽힙니다.
사람은 표를 잔디깎이처럼 읽는다
아이트래킹 연구에 따르면, 사람은 표를 읽을 때 일정한 동선을 그립니다. 맨 왼쪽 위 칸에서 시작해 한 행을 왼쪽에서 오른쪽으로 훑고, 끝나면 다음 행으로 내려갑니다. 잔디를 깎듯 행 단위로 왕복한다고 해서 잔디깎이(lawn-mower) 패턴이라고 부릅니다.
여기서 중요한 게 하나 있습니다. 한 행을 왼쪽부터 순서대로 읽는다는 건, 머릿속에서 그 행이 한 문장으로 합쳐진다는 뜻입니다. "이 고객이 이 상품을 이 금액에 결제했고, 지금 이 상태다" 같은 문장입니다. 그래서 컬럼 순서가 문장 흐름을 따르지 않으면, 읽는 사람은 흩어진 단어를 다시 문장으로 꿰맞춰야 합니다. 앞에서 느낀 어색함의 정체가 이것입니다.
한 행이 한 문장이 되게
컬럼 순서의 흔한 원칙은 "중요한 것부터"입니다. 맞는 말이지만 무엇이 중요한지는 사람마다 다릅니다. 그래서 저는 더 구체적인 기준을 씁니다. 육하원칙입니다. 누가, 무엇을, 어떻게 했고, 지금 어떤 상태이며, 언제 일어났다. 이 흐름으로 컬럼을 놓으면 한 행이 문장으로 읽힙니다.
주문 테이블에 적용해 봅니다. 고객명(누가), 상품명(무엇을), 결제금액과 결제수단(어떻게), 그리고 주문 상태입니다. 여기까지 읽으면 "이 고객이 이 상품을 이 금액에 이렇게 결제했고, 지금 이 상태다"가 한 문장으로 들어옵니다. 환불금액처럼 가끔 보는 값은 그 뒤로 물리고, 주문일시와 최근 변경일 같은 시간 정보는 맨 끝으로 모읍니다.
첫 칸은 사람이 부르는 값
맨 앞 칸은 그 행이 무엇인지 가리키는 자리입니다. 나쁜 예시에선 여기에 주문 아이디가 왔습니다. 내부에서 자동으로 매기는 값이라, 사람은 이걸 외우지도 입에 올리지도 않습니다.
그런데 이 자리의 값은 화면 안에만 살지 않습니다. 상담원이 전화로 고객에게 불러 주고, 개발자가 로그에서 찾고, 팀이 메신저에 붙여넣습니다. 여러 곳에서 같은 한 값으로 이 주문을 가리킵니다. 그러니 이 값은 이 건을 부르는 이름입니다.
이름이라면 세 가지를 만족해야 합니다. 유일하고, 안 바뀌고, 사람이 말할 수 있어야 합니다. 전화로 불러도 헷갈리지 않게요. 내부 아이디는 유일하고 안 바뀌지만 사람이 못 부릅니다. 고객명은 사람이 부르지만 유일하지도, 안 바뀌지도 않습니다. 그래서 맨 앞에는 주문번호가 옵니다. 사람이 눈으로 찾고 입으로 부르는 값이요.
이름도 도메인의 말로
순서만큼 중요한 게 이름입니다. "생성일시"는 무엇이 생성됐는지 흐릿합니다. 주문이 일어난 시각이라면 "주문일시"라고 적어야 분명합니다. "수정일시"는 "최근 변경일", 그냥 "상태"는 "주문 상태"라고 해야 바로 읽힙니다. 읽는 사람이 머릿속에서 한 번 더 번역하지 않도록, 화면에는 그들이 쓰는 말을 적습니다.
다시 보기
처음의 테이블을 같은 기준으로 고치면 이렇게 됩니다.
주문번호 | 고객명 | 상품명 | 결제금액 | 결제수단 | 주문 상태 | 환불금액 | 주문일시 | 최근 변경일이제 한 행이 한 문장으로 읽힙니다. "이 고객이 이 상품을 이 금액에 이렇게 결제했고, 지금 이 상태다." 담긴 정보는 처음과 똑같습니다. 사람이 못 읽는 주문 아이디를 주문번호로 바꾸고, 순서와 이름만 손봤을 뿐인데 읽는 부담이 확 줄어듭니다.
마치며
테이블은 데이터를 담는 그릇처럼 보이지만, 결국 사람이 읽는 글입니다. 한 행은 한 문장으로 읽히고, 컬럼 이름은 그 사람의 말이어야 합니다. 다음에 테이블을 만들 때, 컬럼을 왼쪽부터 소리 내어 읽어 보세요. 문장이 매끄럽게 이어지지 않는다면, 순서나 이름을 손볼 때입니다.