홈페이지 표 디자인, 휴대폰에서도 읽히는 표를 만드는 5가지 방법

홈페이지 표 디자인은 칸 수를 줄이고 제목 칸을 분명히 한 뒤, 좁은 화면에서는 가로 스크롤이나 카드형으로 바꾸면 됩니다. 이 글에서는 표가 휴대폰에서 깨지는 이유와 대응 방식 비교, 읽히는 표를 만드는 다섯 가지 방법을 정리했습니다.

표가 휴대폰에서 깨지는 이유

표는 가로와 세로를 함께 읽어야 뜻이 통하는 형식입니다. 데스크톱에서는 다섯 칸, 여섯 칸도 한눈에 들어오지만 휴대폰 화면 폭에서는 칸마다 글자가 한두 자씩 줄바꿈되거나, 표가 화면 밖으로 밀려나 페이지 전체가 옆으로 움직입니다. 가격표, 일정표, 제품 사양표, 수업 시간표처럼 홈페이지에 자주 들어가는 표가 대부분 이런 문제를 겪습니다.

W3C 접근성 지침은 화면 폭이 좁아져도 내용을 가로·세로 양쪽으로 스크롤하지 않고 볼 수 있어야 한다고 정하면서, 데이터 표처럼 2차원 배치가 꼭 필요한 부분은 예외로 둡니다. 다만 그 경우에도 표 영역 안에서만 스크롤되게 하고 주변 글은 화면에 맞게 줄바꿈되어야 한다고 설명합니다(WCAG 2.2 「리플로우」 해설). 표 때문에 페이지 전체가 옆으로 밀리는 것은 피해야 할 상태입니다.

휴대폰 표 대응 방식 비교

아래 표는 좁은 화면에서 표를 보여 주는 대표적인 방식 네 가지를 장점과 주의점으로 비교한 것입니다.

방식	장점	주의점
표 영역 가로 스크롤	표 구조를 그대로 유지	밀 수 있다는 표시가 필요
카드형으로 바꾸기	한 줄씩 위아래로 읽기 쉬움	항목끼리 비교는 어려워짐
칸 줄이기·표 나누기	모든 화면에서 단순하고 명확	내용을 다시 정리해야 함
표를 이미지로 넣기	모양이 고정됨	확대·검색·낭독 불가, 피함

비교가 핵심인 가격표나 사양표는 가로 스크롤이 맞고, 한 줄이 하나의 대상인 일정표나 연락처 목록은 카드형이 읽기 좋습니다. 표를 이미지로 캡처해 올리는 방식은 글자를 확대할 수 없고 검색엔진과 화면 낭독기도 읽지 못하므로 쓰지 않는 것이 좋습니다.

그림처럼 정답이 하나인 것은 아닙니다. 같은 사이트 안에서도 표의 성격에 따라 방식을 다르게 고르고, 고른 방식은 비슷한 표끼리 통일해 두면 방문자가 헷갈리지 않습니다. 화면 폭에 따라 배치가 바뀌는 원리는 반응형 웹과 모바일 웹의 차이에서 더 자세히 볼 수 있습니다.

읽히는 표를 만드는 5가지 방법

디자인을 고르기 전에 표 자체를 단순하게 만드는 것이 먼저입니다. 다음 다섯 가지를 순서대로 적용해 보세요.

1. 표가 꼭 필요한지 묻기: 항목이 두세 개뿐이면 표 대신 목록이나 문장이 더 읽기 쉽습니다.
2. 칸 수 줄이기: 비교에 쓰이지 않는 칸은 빼고, 설명이 긴 칸은 표 아래 문단으로 옮깁니다.
3. 제목 칸 표시하기: 맨 위 줄이나 맨 왼쪽 칸이 제목이라면 데이터 칸과 구분되게 표시합니다.
4. 칸 안의 글을 짧게 쓰기: 한 칸에 한 가지 정보만 넣고 단위는 제목 칸에 한 번만 적습니다.
5. 좁은 화면 방식 정하기: 가로 스크롤이면 첫 칸을 고정하거나 밀 수 있다는 안내를 두고, 카드형이면 각 값 앞에 항목 이름이 보이게 합니다.

표 종류별로 어울리는 방식

홈페이지에 자주 들어가는 표를 기준으로 보면 고르기가 쉬워집니다. 요금표와 제품 사양표는 항목끼리 견주어 보는 것이 목적이므로 가로 스크롤을 쓰고 첫 칸에 항목 이름을 고정합니다. 수업 시간표나 진료 시간표는 요일이 많아 칸이 넓어지므로 요일별 카드로 바꾸거나 오늘 요일만 먼저 보여 주는 방식을 고려합니다. 연락처나 담당자 목록은 한 줄이 한 사람이라 카드형이 가장 읽기 좋습니다.

칸이 열 개를 넘을 만큼 큰 표라면 디자인으로 해결하기보다 표를 둘로 나누는 편이 낫습니다. 자주 보는 항목만 본문 표로 남기고, 전체 자료는 내려받는 파일로 따로 제공하면 휴대폰 방문자도 필요한 정보를 바로 찾습니다.

표 구조는 보이지 않는 곳까지 맞추기

제목 칸은 굵게만 보이게 하는 것이 아니라 HTML에서 제목 칸(th)으로 표시해야 합니다. W3C 표 안내서는 제목 칸과 데이터 칸을 구분해 표시하고, 표 주제를 알려 주는 표 제목(caption)을 두며, 배치를 맞추려고 표를 쓰지 말라고 권합니다(W3C 표 접근성 안내서). 이렇게 만들어 두면 화면 낭독기가 칸을 이동할 때마다 해당 제목을 함께 읽어 줍니다.

표 디자인 점검 체크리스트

표를 올리기 전에 아래 항목을 휴대폰에서 직접 확인합니다.

• 표 때문에 페이지 전체가 옆으로 밀리지 않는다.
• 제목 칸이 데이터 칸과 구분되어 보인다.
• 한 칸에 한 가지 정보만 있다.
• 가로 스크롤 표에는 밀어서 볼 수 있다는 표시가 있다.
• 글자를 확대해도 표가 깨지지 않는다.
• 줄이 많은 표는 줄무늬나 구분선으로 행을 따라 읽기 쉽다.

요금을 표로 보여 줄지, 범위나 상담으로 안내할지는 가격 안내 페이지 글에서 따로 다룹니다.

디코랩이 돕는 방식

디코랩은 표가 들어가는 페이지를 휴대폰 폭에서 먼저 확인하고, 표의 성격에 맞춰 가로 스크롤이나 카드형 배치를 정해 퍼블리싱합니다. 운영 중인 사이트의 표가 휴대폰에서 깨진다면 유지보수 접수 게시판에 해당 페이지 주소를 남길 수 있습니다.

자주 묻는 질문

게시판 글에 넣은 표도 휴대폰에서 깨지나요?

편집기로 넣은 표도 칸이 많으면 같은 문제가 생깁니다. 사이트 본문 스타일에 표 가로 스크롤이 적용되어 있는지 확인하고, 글을 쓸 때 칸 수를 줄이는 것이 가장 확실합니다.

엑셀 표를 그대로 붙여 넣어도 되나요?

붙여 넣으면 엑셀의 글꼴, 색, 칸 너비 같은 서식이 함께 따라와 사이트 디자인과 어긋날 수 있습니다. 서식을 지우고 붙여 넣거나 편집기의 표 기능으로 다시 만드는 편이 깔끔합니다.

표를 PDF로 따로 올리면 어떨까요?

내려받아 출력할 자료라면 PDF도 좋지만, 페이지에서 바로 읽어야 하는 정보는 본문 표로 두는 것이 휴대폰과 검색 모두에 유리합니다. 필요하면 둘 다 제공합니다.

가로 스크롤 표에서 첫 칸을 고정해야 하나요?

꼭 필요하지는 않지만, 첫 칸이 항목 이름이라면 고정해 두는 편이 어느 줄을 보고 있는지 알기 쉽습니다.

홈페이지의 표가 휴대폰에서 잘 읽히지 않아 고민이라면 사이트 주소를 적어 디코랩 프로젝트 문의로 보내 주세요.