Web Guide표 반응형데이터 표시모바일 표
반응형 표와 데이터 처리
열이 많은 표는 모바일에서 가장 까다롭습니다.
그냥 줄이면 아무것도 읽히지 않습니다.
01왜 어려운가
표는 가로 공간을 많이 씁니다.
01
열이 많음
좁은 화면에 다 들어가지 않습니다.
02
글자가 작아짐
억지로 줄이면 못 읽습니다.
03
가로 스크롤
페이지 전체가 밀립니다.
04
비교 목적
여러 항목을 나란히 봐야 의미가 있습니다.
05
머리행 사라짐
아래로 내리면 무슨 열인지 모릅니다.
06
복사 어려움
모바일에서 값 복사가 불편합니다.
02대응 패턴
상황에 맞는 방식을 고릅니다.
표만 가로 스크롤
표 영역만 옆으로 밀게 합니다.
카드로 전환
행 하나를 카드 하나로 바꿉니다.
열 숨기기
중요한 열만 남기고 접습니다.
펼쳐보기
눌러야 상세가 나옵니다.
첫 열 고정
항목명은 항상 보이게.
우선순위 정렬
중요한 열을 앞에.
03선택 기준
표의 목적에 따라 다릅니다.
비교가 목적
가로 스크롤 유지 · 나란히 봐야 의미 있음 · 요금표, 스펙표
조회가 목적
카드로 전환 · 한 건씩 보면 충분 · 목록, 내역
04실무 주의
놓치기 쉬운 부분입니다.
스크롤 표시옆으로 밀 수 있다고 알려줍니다.
페이지 밀림 방지표만 움직이게 합니다.
머리행 고정무슨 값인지 알 수 있게.
숨긴 열 접근완전히 감추지는 않습니다.
읽기 도구 대응표 구조를 제대로 표시합니다.
인쇄 고려출력할 일이 있는지 확인.
CHECK POINT
□ 모바일에서 표가 읽히는가
□ 페이지 전체가 가로로 밀리지 않는가
□ 옆으로 밀 수 있다는 것을 알 수 있는가
□ 항목명 열이 보이는가
□ 숨긴 열에 접근할 수 있는가
□ 표의 목적에 맞는 방식을 골랐는가
□ 읽기 도구에서 구조가 전달되는가
□ 실제 기기에서 확인했는가
#표 반응형#데이터 표시#모바일 표#가로 스크롤#카드 전환#가독성#UX#반응형#웹비스타#홈페이지 제작