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

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

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

이 글은 가상의 구성 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>

이 코드는 관계를 설명하는 일부 예제이며 모든 복잡한 표를 해결하는 완성 구조가 아닙니다. 시각적으로는 한 셀이 여러 열 위에 걸쳐 있는 제목이라도 보조기술에서 어떤 데이터의 제목인지 알 수 있어야 합니다. 표를 단순하게 정리할 수 있다면 먼저 단순한 비교 축으로 나누고, 불필요하게 병합한 셀을 줄이는 편집을 검토합니다.

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

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

열이 많아 한 화면에 읽기 가능한 크기로 넣기 어렵다면 표 영역 안에서 가로로 이동하는 구조를 검토할 수 있습니다. 이때 페이지 전체가 가로로 흔들리지 않고 표 안의 정보만 이동해야 합니다. 아래는 코드 구조를 설명하는 예제이며 실제 표시 폭과 최소 표 너비는 데이터와 디자인에 따라 조정해야 합니다. 숫자 640을 모든 비교표의 권장값으로 제시하지 않습니다.

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

가로 이동할 수 있다는 안내를 주변에 제공하고 실제로 키보드로 해당 영역에 접근해 이동할 수 있는지 확인합니다. tabindex를 넣었다는 사실만으로 모든 기기에서 사용성이 검증됐다고 보지 않습니다. 초점 표시가 보이는지, 다음 본문 요소로 빠져나갈 수 있는지, 가로 이동이 어디에 적용되는지 사용하는 환경에서 확인해야 합니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

실제 검수를 했다면 사용하는 브라우저와 화면 폭, 확대, 입력 방식, 보조기술을 따로 적고 관찰한 결과를 남깁니다. 자동 검사에서 제목 셀이 있다는 결과와 실제로 비교 과업을 수행할 수 있다는 결과는 다른 확인입니다.

데이터를 수정한 뒤에는 표시 구조도 다시 봅니다. 짧은 값이 긴 조건 문장으로 바뀌면 셀 높이와 줄바꿈이 달라질 수 있습니다. 표를 처음 만들 때만 검사하고 이후에는 내용만 갱신한다면 작은 화면에서 새로운 잘림이 생길 수 있습니다. 수정 요청에 데이터 변경과 표시 상태의 재검수를 함께 넣습니다.

본문을 숨기지 않고 비교를 유지했는지 확인합니다

1. 같은 행과 열이 같은 기준의 값을 비교하는지 확인합니다.
2. 제목 셀과 데이터의 관계, 단위와 자료 상태를 남깁니다.
3. 필요한 가로 이동은 표 영역 안에 두고 접근 방법을 확인합니다.
4. 이동 뒤에도 항목과 구성의 관계가 읽히는지 봅니다.
5. 카드로 바꾼 경우 비교 과업과 데이터 일치를 다시 확인합니다.
6. 데이터 교체 후 실제 화면과 접근 경로를 재검수합니다.

완성된 비교표는 작은 화면에 모든 정보를 억지로 밀어 넣는 구조가 아닙니다. 읽을 수 있는 크기, 비교 기준, 제목 관계, 필요한 이동을 함께 관리하는 구조입니다. 일부 열을 감춰 놓고 전체 표를 검증했다고 보고하거나 가로 넘침을 없애기 위해 조건을 지우지 않습니다. 검사한 범위와 아직 확인하지 않은 환경을 기록해 다음 수정에서도 같은 비교 의미를 유지해야 합니다.

참고 자료와 예제의 범위

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

자료 대조일: 2026-09-13. 구성 A·B·C와 수치·코드는 설명용이며 실제 상품 비교나 보조기술 시험 결과가 아닙니다. 작성·운영: 오경연 / detailry. 정정·문의로 보완 자료를 전달할 수 있습니다.

가로 이동 뒤 셀의 주인을 다시 찾는 가상 검사

아래 품목과 가격·용량은 레이아웃 비교용 가정이며 실제 판매 정보가 아닙니다.

셀 숫자가 모두 화면에 나타났다는 이유로 비교가 완성됐다고 처리하지 않습니다. 스크롤 위치와 열 제목, 현재 행 식별을 함께 기록해야 값이 누구의 것인지 재현할 수 있습니다. 행을 카드로 바꾸는 대안도 같은 열을 두 행 사이에서 비교하는 과업을 다시 시험해야 합니다. 한 행만 읽기 쉬워진 상태와 두 대상을 같은 기준으로 비교할 수 있는 상태는 다릅니다.