모바일 비교표를 줄이지 않고 읽게 만드는 가로 스크롤과 행 제목

비교표는 정보를 작게 만드는 곳이 아닙니다

모바일에서 비교표가 화면 밖으로 나가면 글자 크기를 줄여 모든 열을 한 번에 넣고 싶어집니다. 그러나 숫자와 조건을 읽기 어려워지면 표를 넣은 목적이 사라집니다. 비교표의 역할은 같은 기준으로 여러 선택지를 확인하게 하는 것입니다. 화면에 모두 보이게 하는 목표와 정보를 읽을 수 있게 하는 목표를 구분하고, 실제로 어느 항목을 함께 비교해야 하는지 먼저 정리합니다.

가상의 구성 A·B·C 표를 사용합니다. 가로로 이동한 뒤에도 어떤 구성의 어떤 값인지 알 수 있도록 행·열 제목과 단위를 연결하는 예제입니다.

행과 열의 비교 방향을 먼저 정합니다

열을 구성별로 나누고 행을 치수·색상·포함 항목별로 나누면 같은 행을 따라 구성의 차이를 볼 수 있습니다. 반대로 행을 상품별로 나누는 방식도 가능합니다. 어느 방향을 쓰든 같은 위치의 셀이 같은 종류의 값을 설명해야 합니다. 한 열에는 상품 외경을, 다른 열에는 내부 치수를 넣으면 표의 정렬이 깔끔해도 비교 기준은 서로 다릅니다.

설명용 표에서는 외경 폭을 모두 mm로 적었습니다. 단위를 값마다 넣을지 행 제목에 넣을지는 문맥에 맞춰 정하되, 독자가 값과 단위를 떨어뜨려 읽지 않게 해야 합니다. 자료가 없는 항목은 0이나 대시로 바꾸어 없는 기능처럼 보이게 하지 않습니다. 미확인, 해당 없음, 제공하지 않음은 서로 다른 상태이므로 실제 자료에 맞는 말을 사용합니다.

아래는 설명용 값입니다. 실제 비교표의 근거와 확인일을 셀별로 연결하는 방법은 비교표의 기준·출처 기록에서 다룹니다.

굵은 글자와 표 제목 셀을 구분합니다

표에서 제목처럼 보이는 글자를 굵게 표시했다고 데이터와의 관계가 코드에 자동으로 남는 것은 아닙니다. 행과 열의 제목에는 th를 사용하고, 단순한 두 방향의 제목에서는 scope로 row와 col 관계를 설명할 수 있습니다. W3C WAI의 표 안내는 제목 셀과 데이터 셀의 관계를 다룹니다. 복잡한 병합이나 여러 단계의 제목이 있다면 별도의 구조를 검토해야 합니다.

<thead>
  <tr><th scope="col">항목</th>
      <th scope="col">구성 A</th></tr>
</thead>
<tbody>
  <tr><th scope="row">외경 폭</th>
      <td>240 mm</td></tr>
</tbody>

단순한 표는 scope로 관계를 나타낼 수 있습니다. 병합 셀이나 여러 단계의 제목이 필요하다면 해당 구조에 맞는 제목 연결을 검토하고 실제 읽기 순서를 확인합니다.

caption에는 표가 어떤 비교를 하는지 적을 수 있습니다. 표 밖의 큰 제목과 caption이 같은 문장을 반복한다면 문맥에서 어떤 이름이 필요한지 살펴봅니다. 짧은 표 이름은 비교 대상을 알려주고, 조건과 예외는 가까운 본문에서 설명하는 방식으로 역할을 나눌 수 있습니다. 표 이름 하나에 모든 출처와 제한을 길게 넣어 읽기 흐름을 복잡하게 만들지 않습니다.

필요한 가로 이동은 표 영역 안에 둡니다

넓은 표의 가로 이동은 표 영역 안으로 제한합니다. 아래 최소 너비 640px는 구조를 설명하는 값이므로 실제 열 수와 셀 내용에 맞게 조정하세요.

<div role="region" aria-label="구성 비교표"
  tabindex="0"
  style="max-width:100%;overflow-x:auto">
  <table style="min-width:640px">
    ... 표 제목과 데이터 ...
  </table>
</div>

키보드로 스크롤 영역에 들어가 가로로 움직인 뒤 다음 본문으로 나와 봅니다. 초점 테두리가 보이고, 이동이 표에만 적용되는지 확인합니다.

화면의 오른쪽 열이 안 보일 때 사용자는 표가 끝났다고 생각할 수도 있습니다. 일부 다음 열이 보이도록 배치하거나 가로 이동 안내를 제공하는 방식을 검토합니다. 다만 표시를 만들기 위해 데이터의 글자를 잘라 보이지 않게 하지는 않습니다. 필요한 값이 전체로 읽히는지와 이동 가능성을 함께 확인합니다.

이동 뒤에도 어떤 항목의 값인지 알 수 있어야 합니다

가로로 이동해 구성 C만 보이면 왼쪽 행 제목을 놓칠 수 있습니다. 독자는 280이라는 숫자가 폭인지 높이인지 구분하지 못할 수 있습니다. 행 제목을 함께 확인하기 쉬운 구조인지 살펴보고, 필요한 경우 제목 열을 유지하는 배치를 검토합니다. 고정 열을 사용한다면 좁은 화면에서 데이터 영역을 덮거나 초점 표시를 가리지 않는지도 확인해야 합니다.

표를 위아래로 길게 이동할 때는 열 제목과 데이터의 관계도 다시 봅니다. 제목 행을 고정하는 배치가 도움이 될 수 있지만, 여러 고정 요소가 화면을 대부분 차지하면 실제 데이터를 읽을 공간이 줄어듭니다. 고정 구매 버튼이나 헤더가 있는 페이지에서는 표 제목과의 겹침까지 포함해 검수합니다. 정보를 붙잡는 배치가 다른 정보를 덮는 방식이 되지 않아야 합니다.

고정 배치가 없어도 표의 코드 관계는 유지돼야 합니다. 시각적으로 보이는 제목과 보조기술이 확인할 제목을 별도의 표처럼 복제했다면 데이터 변경 때 두 제목이 달라질 수 있습니다. 반복 표시가 필요한 구현에서는 무엇이 원본 관계를 제공하는지 개발자와 확인하고, 실제 읽기 순서를 검사합니다.

카드로 바꾸면 비교 방향도 달라집니다

작은 화면에서 상품별 카드로 바꾸는 방법은 각 상품을 독립적으로 읽기에는 편할 수 있습니다. 그러나 같은 항목을 옆으로 비교하는 과업에서는 카드 사이를 오가며 값을 기억해야 할 수 있습니다. 표를 카드로 바꾼다는 결정은 모양의 문제가 아니라 사용자가 무엇을 비교하려는지에 대한 편집 판단입니다.

카드 방식을 사용한다면 상품 이름과 항목 이름을 함께 남겨 값만 나열하지 않습니다. 항목 순서를 카드마다 바꾸면 같은 기준을 찾기 어려울 수 있습니다. 구성 A에서는 치수를 먼저, 구성 B에서는 포함 항목을 먼저 보여주는 경우 의도적인 이유가 있는지 확인하고, 공통 비교 항목은 일관된 순서로 제공하는 편이 좋습니다.

데스크톱 표와 모바일 카드에 같은 데이터를 두 번 입력하면 나중에 한쪽만 바꾸는 오류가 생길 수 있습니다. 가능하면 동일한 정보원을 쓰거나 운영 장부에서 두 표시 위치를 연결합니다. 두 구조를 모두 제공하더라도 접근 경로에 따라 같은 정보가 불필요하게 반복되거나 숨겨진 구조가 읽히는지 사용하는 환경에서 검수해야 합니다.

표를 PDF나 종이로 전달한다면 화면의 스크롤만으로는 부족합니다. 인쇄용 스타일에서 표와 출처를 남기는 방법도 함께 확인하세요.

짧게 적는 것과 조건을 없애는 것은 다릅니다

셀 안에 긴 문장이 들어 있으면 표가 커질 수 있습니다. 그렇다고 적용 조건을 지워 “가능” 또는 “불가”만 남기면 실제 자료의 의미가 달라질 수 있습니다. 표 안에는 비교에 필요한 핵심 값을 남기고, 상세 조건을 본문이나 연결된 설명으로 제공하는 방법을 검토합니다. 연결 설명이 어떤 셀과 관계되는지도 알 수 있어야 합니다.

체크 아이콘 하나로 “포함”을 표시할 때는 그 기호의 의미를 텍스트나 적절한 설명으로 전달합니다. 색상만으로 추천 여부나 조건 차이를 구분하지 않습니다. 확인하지 않은 기능을 빈 셀로 남겼다면 독자가 “없는 기능”으로 읽지 않도록 자료 상태를 표시합니다. 정보가 없는 상태와 부정적인 결과를 섞지 않는 것이 중요합니다.

숫자는 단위와 산정 조건을 함께 봅니다. 두 구성의 치수를 비교하려면 측정 방향과 외경·내경이 같은지, 포함 항목을 비교하려면 같은 옵션 기준인지 확인해야 합니다. 표시 폭을 줄이는 기술 작업이 이 조건을 대신 검토하지 않습니다. 표의 내용과 화면 구조를 같은 공개 승인에 연결해야 합니다.

mm와 cm, 제품 한 개와 세트처럼 비교 단위가 섞이는 문제는 단위 표기를 맞추는 방법에서 별도로 다룹니다.

검수 기록에는 화면과 비교 과업을 함께 남깁니다

사용한 브라우저, 화면 폭, 확대 상태, 입력 방식과 실제 읽힌 내용을 기록합니다. 짧은 값이 긴 조건 문장으로 바뀌면 셀 높이와 줄바꿈도 달라지므로, 데이터를 교체한 뒤 표와 카드 표시를 함께 확인하세요.

오른쪽 구성 C에서도 외경 폭의 관계를 유지합니다

앞의 구성 A·B·C 표를 그대로 사용합니다. 외경 폭 행을 가로로 읽는 과업이며 새로운 상품·단위를 추가하지 않습니다.

한 값을 찾았다고 비교가 끝난 것은 아닙니다. 가로 위치를 바꿔도 현재 열의 구성과 현재 행의 항목을 다시 식별할 수 있어야 합니다. 카드로 바꾸는 대안을 택할 때도 A와 C의 같은 항목을 비교하는 과업을 반복합니다.

참고 자료와 예제의 범위

• W3C WAI: 한 방향 제목의 표 — 제목 셀과 데이터 관계.
• W3C WAI: 두 방향 제목의 표 — 행·열 제목과 scope 관계.
• W3C WAI: 표 작성 팁 — 표 구조와 읽기 검토.