Web Guide표 디자인테이블 반응형데이터 표시
테이블(표) 디자인: 모바일에서 표를 보여주는 방법
PC에서 만든 표를 모바일에 그대로 두면 가로로 잘립니다.
그런데 잘린 줄 모르고 지나가는 방문자가 대부분입니다. 표는 반응형에서 가장 까다로운 요소입니다.
01표가 정말 필요한가
여러 항목을 여러 기준으로 비교할 때만 표가 필요합니다. 항목이 하나이거나 기준이 하나면 표가 아니라 목록이 낫습니다.
'사양 안내'라는 이름으로 두 열짜리 표를 쓰는 경우가 많은데, 이것은 표가 아니라 항목-값 목록입니다.
표가 필요한 경우
여러 항목 × 여러 기준 비교 · 제품 비교표 · 요금제 비교 · 일정표 · 가로세로 모두 의미가 있는 경우
표가 아니어도 되는 경우
항목-값 나열(사양, 회사 정보) · 두 열짜리 · 목록이나 정의형 구조가 더 적합합니다
02모바일 대응 네 가지 방법
표를 모바일에서 보여주는 방법은 몇 가지가 있습니다. 표의 성격에 따라 적합한 것이 다릅니다.
가장 나쁜 것은 아무 처리 없이 그대로 두어 가로로 잘리게 하는 것입니다.
가로 스크롤
표를 그대로 두고 옆으로 밀게 합니다. 구현이 간단하고 비교도 가능합니다. 스크롤 가능함을 알려줘야 합니다.
카드로 변환
행 하나를 카드 하나로 바꿉니다. 읽기 편하지만 비교는 어려워집니다.
열 숨기기
핵심 열만 남기고 나머지는 펼쳐서 봅니다.
행·열 전환
가로세로를 바꿉니다. 항목이 적을 때 유효합니다.
03가로 스크롤은 표시가 필요하다
가로로 밀 수 있다는 것을 모르면 잘린 내용을 못 봅니다. 그림자나 화살표로 더 있다는 것을 알려줘야 합니다.
첫 번째 열을 고정하면 옆으로 밀어도 어느 행인지 알 수 있어 훨씬 편합니다.
스크롤 힌트오른쪽 가장자리에 그림자나 화살표를 둡니다.
첫 열 고정항목명 열이 고정되면 비교가 가능합니다.
스크롤 바 노출숨기지 말고 보이게 합니다.
안내 문구'좌우로 밀어서 보세요' 한 줄을 넣는 방법도 있습니다.
04표 자체의 가독성
모바일 대응 이전에 표 자체가 읽기 편해야 합니다. 선을 많이 그으면 오히려 복잡해 보입니다.
세로선을 빼고 가로선만 얇게 쓰면 훨씬 깔끔해집니다.
점검 항목
선 줄이기
세로선을 빼고 가로선만. 여백으로 열을 구분합니다.
제목 행 구분
배경색이나 굵기로 구분합니다.
숫자 정렬
숫자는 오른쪽 정렬. 자릿수 비교가 쉬워집니다.
행 구분
행이 많으면 마우스 올린 행을 강조합니다.
접근성
제목 셀을 지정해야 스크린리더가 읽을 수 있습니다.
CHECK POINT
□ 이 내용이 정말 표여야 하는가
□ 두 열짜리 표를 목록으로 바꿀 수 있는지 검토했는가
□ 모바일 대응 방식을 정했는가
□ 가로 스크롤이면 스크롤 가능함을 표시했는가
□ 첫 번째 열이 고정되는가
□ 세로선을 빼고 여백으로 구분했는가
□ 숫자가 오른쪽 정렬되어 있는가
□ 제목 셀이 지정되어 있는가
#표 디자인#테이블 반응형#데이터 표시#가로 스크롤#모바일 대응#가독성#접근성#홈페이지 디자인#웹비스타#홈페이지 제작