TL;DR
가격 비교표를 모바일로 옮길 때는 먼저 행과 열의 비교 관계가 중요한지 판단해야 합니다. 관계를 유지해야 하는 표는 표 영역만 가로로 탐색하게 할 수 있지만, 화면 전체가 넘치거나 조건이 사라지는 상태는 피해야 합니다.
표를 접기 전에 비교 과제를 확인하기
여러 서비스의 포함 범위를 나란히 비교하는 표라면 열 사이의 관계가 핵심입니다. 이를 항목별 카드로 바꾸면 좁은 화면에서는 편해 보여도 동일 조건을 다시 오가며 기억해야 할 수 있습니다. 반대로 단순한 연락처 목록처럼 열 간 비교가 중요하지 않은 데이터는 세로 배치가 더 자연스러울 수 있습니다. 표라는 모양을 유지할지보다 사용자가 무엇을 비교하려는지 먼저 적습니다.
W3C는 사용이나 의미를 위해 이차원 배치가 필요한 콘텐츠에는 리플로 기준의 예외가 있을 수 있다고 설명합니다. 표가 그 예에 포함될 수 있지만 모든 표와 화면 전체에 무조건 예외를 적용한다는 뜻은 아닙니다. 필요한 비교 관계를 확인한 뒤 표 영역의 탐색과 주변 본문의 읽기를 구분해야 합니다. 표 하나 때문에 제목과 문의 버튼까지 좌우로 밀려서는 안 됩니다.
가로 탐색을 선택했다면 경계를 보여주기
좁은 화면에 열 일부만 보이는 경우 옆에 더 많은 정보가 있다는 사실을 이해할 수 있어야 합니다. 가로 스크롤 영역이 어디까지인지 시각적으로 확인하고, 터치와 키보드에서 접근 가능한지 점검합니다. 표의 마지막 열까지 이동한 뒤 원래 페이지의 세로 읽기를 계속할 수 있어야 합니다. 스크롤을 강제로 가로채는 별도 동작은 신중하게 검토하세요.
MDN은 반응형 웹을 여러 기기 화면에서 유연한 배치와 사용성을 유지하는 설계로 설명합니다. 기준 화면에서 표를 작게 축소하는 것만으로 반응형 대응이 끝나지는 않습니다. 숫자와 조건을 읽을 수 있는 크기인지, 열 제목을 기억하지 않고도 값의 의미를 이해할 수 있는지 실제 이용 과제로 확인해야 합니다.
가격의 전제 조건을 표 밖으로 잃지 않기
표에는 금액이 있지만 포함 범위와 제외 조건이 아래 먼 곳에 떨어져 있으면 오해가 생길 수 있습니다. 가격이 확정값인지 예시인지, 별도 확인이 필요한 항목인지 실제 제공 정보에 맞춰 설명합니다. 확인되지 않은 금액이나 타 업체 평균을 채워 넣지 않습니다. 모바일 재배치 뒤에도 가격과 그 조건을 함께 읽을 수 있는지 확인해야 합니다.
Google은 콘텐츠에 충분하고 완전한 설명이 있는지와 쉽게 확인할 수 있는 사실 오류가 없는지를 점검하도록 안내합니다. 표를 간결하게 만든다는 이유로 중요한 조건을 삭제하지 않아야 합니다. 공식 가이드가 특정 가격표 레이아웃을 지정하는 것은 아니지만, 정보를 줄이는 편집 과정에서 정확성과 충분성을 확인할 필요는 있습니다.
다른 제공 방식을 선택하는 경우
각 서비스 설명을 세로로 나눌 때는 같은 비교 축을 같은 순서로 제공해 조건을 찾기 쉽게 합니다. 핵심 비교만 짧은 표로 두고 상세 조건은 별도 설명으로 연결할 수도 있습니다. 어느 방식이든 화면에 보이는 요약과 상세 내용이 서로 모순되지 않는지 대조합니다. 숨겨진 열에만 중요한 제한 사항이 남아 있으면 이용자가 선택 전에 확인하기 어렵습니다.
검수 기록에는 대표 화면 폭과 긴 항목, 빈 값, 조건이 많은 항목을 포함합니다. 표를 이미지로 바꿔 넘침을 감추는 방식은 확대와 정보 접근 문제를 남길 수 있으므로 대체 수단으로 자동 선택하지 않습니다. 데이터의 관계와 읽기 순서가 실제로 유지되는지가 최종 기준입니다.
마무리
표 아래의 설명이 어느 행에 해당하는지도 표시해야 합니다. 여러 조건을 한꺼번에 각주처럼 모아두면 좁은 화면에서 값을 오가며 맞추기 어렵습니다. 조건이 특정 항목에만 적용된다면 그 항목과 가까이 연결하고, 공통 조건은 공통이라는 범위를 명확히 적습니다. 검수자는 값과 조건을 함께 읽은 뒤 같은 의미로 설명할 수 있어야 합니다.
모바일 비교표는 축소 기술보다 비교 관계를 보존하는 판단이 먼저입니다. 표 영역의 탐색, 읽을 수 있는 값과 제목, 가격 조건의 연결을 함께 확인하고 화면 전체의 넘침과 정보 손실을 구분해 해결하세요.