표를 모바일에서 보여 주는 세 가지 방법

사용자가 비교할 정보부터 고릅니다

데스크톱의 표를 모바일에 그대로 줄이면 숫자와 제목을 읽기 어려워질 수 있습니다. 먼저 사용자가 여러 행의 같은 항목을 비교하는지, 특정 항목 하나의 내용을 읽는지, 목록에서 바로 처리하는지를 구분합니다. 같은 데이터라도 주된 작업에 따라 적합한 배치가 달라집니다.

예를 들어 재고 수량을 여러 품목에 걸쳐 비교하는 화면과 주문 한 건의 배송 정보를 확인하는 화면은 다른 구성을 선택할 수 있습니다. 어떤 열이 판단에 꼭 필요한지, 상세에서 봐도 되는지, 항상 보이는 식별자는 무엇인지 적어 보세요.

중요한 열을 줄였다는 이유로 필요한 정보 자체가 사라져서는 안 됩니다. 숨긴 정보를 어디에서 볼 수 있는지와 현재 필터·정렬 조건을 어떻게 유지할지까지 함께 결정해야 합니다.

방법 하나: 비교가 중요하면 가로 스크롤을 씁니다

여러 행의 같은 열을 비교해야 한다면 표의 구조를 유지하고 가로로 이동하게 할 수 있습니다. 행과 열의 관계를 보존할 수 있지만, 옆에 더 많은 정보가 있다는 사실을 알아차릴 수 있어야 합니다. 전체 페이지가 의도치 않게 옆으로 밀리지 않도록 스크롤 영역도 구분합니다.

행을 식별하는 첫 열이나 제목을 고정할지는 실제 데이터 길이를 보고 결정합니다. 고정 영역이 너무 넓으면 비교할 값이 거의 보이지 않을 수 있습니다. 긴 이름, 큰 숫자, 빈 값이 섞인 상태에서도 확인하세요.

W3C 표 접근성 안내는 제목 셀과 데이터 셀의 관계를 명확하게 표현하는 방법을 설명합니다. 시각적으로 가로 스크롤을 더하더라도 이 관계가 유지되도록 구현해야 합니다.

방법 둘: 한 항목씩 읽는다면 카드로 바꿉니다

한 행에 담긴 내용을 묶어서 읽는 작업이라면 각 항목을 카드로 보여 줄 수 있습니다. 제목과 상태를 먼저 두고, 나머지는 이름과 값의 쌍으로 배치합니다. 표에서 열 제목이 설명하던 의미를 카드에서도 알 수 있어야 합니다.

카드는 각 항목의 맥락을 읽기 쉽지만 같은 값을 여러 항목에 걸쳐 비교하려면 이동이 많아질 수 있습니다. 행이 많고 비교가 주된 작업이라면 카드 전환이 더 나은 선택이라고 단정하지 않습니다. 정렬과 필터로 탐색 범위를 줄일 수 있는지도 함께 살펴봅니다.

카드 전체를 누르는 행동과 안쪽 버튼이 서로 충돌하지 않도록 설계합니다. 상세 이동, 선택, 삭제가 모두 있다면 각각 어디를 눌러야 하는지와 키보드 이동 순서가 분명해야 합니다.

방법 셋: 요약과 상세를 나누고 돌아오는 흐름을 지킵니다

목록에서 판단할 정보가 적고 나머지는 가끔 확인한다면 핵심 정보만 보여 주고 상세 화면이나 펼침 영역으로 연결할 수 있습니다. 요약에는 항목을 식별할 정보, 현재 상태, 우선 판단에 필요한 값을 남깁니다. 상세를 열기 전에도 무엇을 보게 될지 알 수 있어야 합니다.

상세에서 돌아왔을 때 정렬, 필터, 선택과 스크롤 위치가 유지되는지 확인합니다. 같은 항목을 다시 찾게 만들면 목록을 간단히 만든 이점이 줄어듭니다. 직접 주소로 상세에 들어온 경우의 복귀 경로도 정합니다.

• 실제 데이터 양과 긴 문구로 세 가지 방법을 비교합니다.
• 조회뿐 아니라 선택과 수정 등 주요 행동도 실행합니다.
• 좁은 폭, 글자 확대, 키보드 조작에서 정보가 남는지 확인합니다.

화면마다 같은 방식을 강제하기보다 사용자가 끝내야 하는 작업에 맞춰 선택하세요.