지난 편에서 이미지를 정보로 다루는 법을 익혔습니다. 이번에는 여러 데이터를 행과 열로 정리하는 표를 다룹니다. 표는 잘 쓰면 복잡한 수치를 한눈에 비교하게 해주는 강력한 도구입니다. 그런데 제가 초보 시절 표를 다룰 때는 두 가지 반대되는 실수를 했습니다. 하나는 표로 만들 데이터를 상자로 억지로 흉내 낸 것, 다른 하나는 반대로 화면을 배치하려고 표를 남용한 것이었습니다.
이번 편에서는 진짜 데이터를 담는 표를 올바르게 만드는 법을 살펴봅니다. 표의 제목을 붙이는 법, 머리 셀과 데이터 셀을 연결하는 법, 논리 구획을 나누는 법, 그리고 표를 화면 낭독 프로그램 사용자도 이해할 수 있게 만드는 접근성까지 차례로 짚겠습니다.
1. 표는 데이터를 위한 것
가장 먼저 분명히 할 원칙이 있습니다. 표는 오직 데이터를 표현할 때만 씁니다. 여러 값을 행과 열의 격자로 비교해야 하는 정보, 예를 들어 분기별 매출이나 요금제 비교 같은 것이 표에 어울립니다. 반대로 화면의 요소를 나란히 배치하려는 목적으로 표를 쓰는 것은 옛날 방식이며 지금은 피해야 합니다.
왜 배치용 표가 나쁠까요. 표는 기계에게 이것이 데이터 격자라고 선언하는 태그입니다. 화면 낭독 프로그램은 표를 만나면 몇 행 몇 열짜리 표라고 안내하고, 각 셀을 행과 열의 좌표로 읽어 줍니다. 그런데 배치용으로 쓴 표에는 실제 데이터가 없으니, 사용자는 의미 없는 격자 안내에 시달리게 됩니다.
요즘은 화면 배치를 위한 훨씬 나은 도구들이 있습니다. 그런 배치 작업은 스타일이 맡고, 표는 순수하게 데이터에만 집중하게 두는 것이 옳습니다. 만약 어쩔 수 없이 표를 배치 목적으로 써야 한다면, 이것이 데이터 표가 아니라는 역할 표시를 붙여 화면 낭독 프로그램이 격자로 읽지 않게 해야 합니다.
제가 이 원칙을 배우기 전에는 표와 상자를 기분 내키는 대로 섞어 썼습니다. 데이터를 상자로 늘어놓아 정렬이 어긋나기 일쑤였고, 반대로 배치를 표로 해서 접근성을 망치기도 했습니다. 각자의 쓰임을 분명히 나누고 나서야 표가 제 역할을 하기 시작했습니다.
그러니 표를 쓰기 전에 스스로 물어야 합니다. 이것이 행과 열로 비교되는 데이터인가, 아니면 그냥 화면 배치인가. 데이터라면 표가 정답이고, 배치라면 표는 오답입니다. 이 구분이 표를 올바르게 쓰는 출발점입니다.
2. 표의 제목과 구획
표에서 가장 먼저 붙여야 할 것은 표의 제목입니다. 표 전체가 무엇에 관한 것인지를 밝히는 짧은 설명을 표의 맨 앞에 둡니다. 이 제목은 화면 낭독 프로그램이 표를 읽기 시작할 때 가장 먼저 안내되어, 사용자에게 이 표가 무엇을 담고 있는지 미리 알려 줍니다. 표를 만나자마자 맥락을 얻는 것이죠.
제목 없이 셀만 나열된 표는 눈으로 보는 사람에게는 주변 문맥으로 짐작이 되지만, 소리로 듣는 사람에게는 정체불명의 숫자 나열입니다. 그래서 저는 데이터 표를 만들 때 제목을 붙이는 것을 첫 단추로 삼습니다. 표 위의 본문 문장으로 설명하는 것보다 표 안에 제목을 두는 것이 구조적으로 더 단단합니다.
표의 몸통은 세 개의 논리 구획으로 나눌 수 있습니다. 열의 제목이 놓이는 머리 구획, 실제 데이터가 놓이는 몸통 구획, 그리고 합계나 요약이 놓이는 바닥 구획입니다. 이렇게 나누면 표의 구조가 명확해지고, 화면 낭독 프로그램도 어디가 머리이고 어디가 데이터인지 구분해 안내합니다.
바닥 구획에는 재미있는 특성이 있습니다. 코드에서 어느 위치에 두든 화면에서는 표의 맨 아래에 표시됩니다. 그래서 합계 행을 코드 상단에 두어도 화면에서는 자연스럽게 하단에 나옵니다. 다만 읽는 사람의 혼란을 줄이려면 코드에서도 논리적 순서를 지키는 편이 좋습니다.
이 세 구획을 나누는 것은 필수는 아니지만, 표가 조금이라도 복잡해지면 나누는 편이 훨씬 명료합니다. 특히 데이터가 많은 표에서 머리와 몸통을 구분해 두면, 스크롤할 때 머리를 고정하는 처리도 쉬워집니다. 구조를 미리 나눠 두면 나중에 기능을 붙이기도 수월한 것이죠.
정리하면 표를 만들 때 제목부터 붙이고, 머리와 몸통과 바닥의 구획을 나누는 것이 좋은 출발입니다. 이 뼈대만 갖춰도 표는 훨씬 읽기 쉬워지고 접근성도 올라갑니다.
3. 머리 셀과 데이터 셀의 연결
표에서 가장 중요하면서도 자주 놓치는 것이 머리 셀과 데이터 셀의 연결입니다. 표에는 두 종류의 셀이 있습니다. 열이나 행의 제목 역할을 하는 머리 셀과, 실제 값이 담기는 데이터 셀입니다. 이 둘을 다른 태그로 구분해야 화면 낭독 프로그램이 제목과 값을 구별할 수 있습니다.
여기서 한 걸음 더 나아가, 머리 셀이 열의 제목인지 행의 제목인지를 밝히는 속성을 붙입니다. 열 제목이면 열 방향임을, 행 제목이면 행 방향임을 지정합니다. 이 지정이 있으면 화면 낭독 프로그램은 데이터 셀을 읽을 때 그 셀이 속한 열과 행의 제목을 함께 읽어 줍니다.
이 연결이 왜 중요한지는 소리로 표를 들어보면 압니다. 눈으로 보는 사람은 셀의 위치만 봐도 이것이 어느 열 어느 행의 값인지 압니다. 하지만 소리로 듣는 사람은 값만 덜렁 들으면 그것이 무엇에 대한 값인지 알 수 없습니다. 머리 셀과의 연결이 있으면 국내 이분기 매출은 천오백처럼 맥락과 함께 읽혀 이해가 됩니다.
아래 예시는 열 제목과 행 제목을 모두 갖춘 표의 구조입니다. 머리 셀의 방향 지정에 주목해 보세요.
<table>
<caption>분기별 매출</caption>
<thead>
<tr><th scope="col">분기</th><th scope="col">국내</th></tr>
</thead>
<tbody>
<tr><th scope="row">1분기</th><td>1,200</td></tr>
</tbody>
</table>
복잡한 표에서는 방향 지정만으로 부족할 때가 있습니다. 셀이 여러 열이나 행에 걸쳐 있거나 제목이 여러 층인 경우입니다. 이럴 때는 각 머리 셀에 고유한 이름을 부여하고, 데이터 셀에서 그 이름을 지목해 명시적으로 연결합니다. 조금 번거롭지만 복잡한 표의 접근성을 지키는 확실한 방법입니다.
제가 매출 표를 만들며 이 연결을 처음 제대로 적용했을 때, 화면 낭독 프로그램으로 들어보니 각 숫자가 어느 항목의 값인지 또렷이 안내되었습니다. 그 전에는 숫자만 줄줄이 읽혀 무슨 표인지 알 수 없었죠. 머리 셀 연결 하나로 표가 완전히 다른 물건이 된 경험이었습니다.
4. 복잡한 표를 다루는 요령
표가 복잡해질수록 접근성과 사용성이 함께 위협받습니다. 열이 너무 많으면 좁은 화면에서 가로로 넘쳐 흐르고, 셀 병합이 많으면 구조가 헷갈립니다. 그래서 저는 표를 만들 때 정말 이 모든 열이 필요한지부터 되짚습니다. 덜 중요한 열은 과감히 빼거나 상세 보기로 옮기는 것이 표를 살리는 길일 때가 많습니다.
좁은 화면에서 표가 넘칠 때는 표를 감싸는 영역에 가로 스크롤을 허용해, 표만 옆으로 밀리고 페이지 전체는 흔들리지 않게 합니다. 페이지 전체에 가로 스크롤이 생기는 것은 피해야 하지만, 표 하나만 그 안에서 스크롤되는 것은 데이터를 온전히 보여주기 위한 합리적인 선택입니다.
모바일에서는 표를 아예 다른 모양으로 바꾸기도 합니다. 열이 많은 표를 각 행마다 하나의 카드처럼 세로로 풀어내는 방식입니다. 다만 이렇게 모양을 바꿀 때도 머리 셀과 데이터의 연결이 유지되도록 신경 써야 접근성이 무너지지 않습니다. 겉모양만 바꾸고 구조를 망가뜨리면 안 됩니다.
셀 병합은 꼭 필요할 때만 씁니다. 여러 셀을 하나로 합치면 시각적으로는 깔끔해 보여도 구조는 복잡해집니다. 병합이 많은 표일수록 머리 셀 연결을 명시적으로 해주어야 화면 낭독 프로그램이 헤매지 않습니다. 병합의 편리함과 구조의 복잡함 사이에서 균형을 잡는 것이 요령입니다.
제가 실무에서 얻은 지혜는, 복잡한 표를 마주하면 표를 더 정교하게 만들기보다 데이터를 더 단순하게 만드는 쪽을 먼저 고민하라는 것입니다. 한 표에 너무 많은 것을 욱여넣기보다, 여러 개의 단순한 표로 나누는 것이 사용자에게 훨씬 친절할 때가 많습니다.
결국 표의 목표는 데이터를 명료하게 전하는 것이지 화려하게 보이는 것이 아닙니다. 복잡함은 대개 명료함의 적입니다. 단순하게 유지할 수 있다면 그것이 최선입니다.
5. 표를 만들 때의 나의 점검표
실무에서 표를 만들 때 저는 몇 가지를 순서대로 점검합니다. 첫째, 이것이 정말 데이터 표인가. 배치 목적이라면 표를 쓰지 않습니다. 이 첫 질문에서 이미 많은 실수를 걸러 낼 수 있습니다.
둘째, 표에 제목을 붙였는가. 표가 무엇에 관한 것인지를 표 안에서 밝혔는지 확인합니다. 이것 하나로 소리로 듣는 사용자의 이해가 크게 달라집니다.
셋째, 머리 셀과 데이터 셀을 구분하고 방향을 지정했는가. 열 제목과 행 제목이 제 태그와 속성을 갖추었는지 살핍니다. 이 연결이 표 접근성의 핵심이기 때문입니다.
넷째, 좁은 화면에서 표가 어떻게 되는지 확인했는가. 가로로 넘치지는 않는지, 넘친다면 표만 스크롤되게 처리했는지 점검합니다. 데이터가 잘려 보이면 표의 의미가 사라집니다.
이 네 가지를 습관적으로 확인하면서, 저는 표 때문에 접근성이 무너지는 일을 거의 겪지 않게 되었습니다. 표는 만들기는 쉬워도 제대로 만들기는 은근히 까다로운 요소라, 이런 점검 절차가 큰 도움이 됩니다.
이번 편에서는 데이터를 담는 표를 올바르게 만드는 법을 다뤘습니다. 다음 편에서는 사용자로부터 정보를 입력받는 폼으로 넘어가겠습니다. 폼은 웹에서 사용자와 대화하는 창구인 만큼, 다룰 것이 많고 실수하기도 쉬운 영역입니다. 데이터를 보여주는 법을 익혔으니, 이제 데이터를 입력받는 법을 배울 차례입니다.