모바일 홈페이지의 가로 긴 표, 내용을 줄이기 전에 확인할 것

데스크톱에서는 한눈에 보이던 비교표가

스마트폰에서는 잘릴 수 있습니다.

글자 크기만 줄이면 정보를 담을 수는 있어도

읽기 어려워집니다.

모바일 표를 고칠 때는 열의 수보다 비교

목적부터 살펴보세요.

방문자가 함께 확인해야 하는 항목이

무엇인지가 출발점입니다.

01

같이 비교해야 하는 항목을 먼저 정하세요

모든 열이 같은 중요도를 갖는 것은 아닙니다.

이름이나 구분 기준처럼 각 행을 이해하는 데

필요한 정보와 상세 설명을 구분합니다.

방문자가 두 값을 나란히 봐야 판단할 수

있다면 그 관계가 깨지지 않아야 합니다.

화면에 맞추기 위해 순서만 바꾸다가 비교

의미를 잃지 않도록 합니다.

✓ 행을 구분하는 기준 확인

✓ 동시에 비교할 핵심 값 정리

·　·　·

02

가로 이동이 있다면 가능하다는 신호를

주세요

표를 가로로 움직이게 할 수 있지만 움직일 수

있다는 사실도 보여야 합니다.

일부 다음 열이 보이거나 가까운 안내가

있으면 탐색에 도움이 됩니다.

표 영역의 가로 이동과 페이지 전체의 가로

넘침은 구분하세요.

화면 전체가 옆으로 밀리지 않도록 실제

모바일 브라우저에서 점검합니다.

✓ 표 이동 가능 여부 안내

✓ 페이지 전체 가로 넘침 점검

03

카드로 바꿀 때는 항목 이름을 반복해

주세요

행을 카드 형태로 바꾸면 작은 화면에서도

읽기 쉬워질 수 있습니다.

다만 값만 늘어놓으면 원래 어느 열에

속했는지 알기 어렵습니다.

각 값의 항목 이름과 단위를 함께 표시하세요.

값이 없는 경우도 누락인지 해당 없음인지

구분해 원래 표의 의미를 유지합니다.

✓ 값마다 항목명과 단위 표시

✓ 빈 값의 의미 구분

·　·　·

04

실제 데이터와 접근 경로로 검수하세요

짧은 샘플 값만 넣으면 긴 제품명이나 여러 줄

설명의 문제를 놓칠 수 있습니다.

가장 긴 값과 값이 없는 행도 함께

확인합니다.

키보드나 보조 기술을 이용하는 방문자도 표의

제목과 행·열 관계를 이해할 수 있어야

합니다.

시각적인 배치와 정보 구조를 함께

점검하세요.

✓ 긴 값과 빈 값으로 테스트

✓ 표 제목과 행·열 관계 확인

·　·　·

자주 묻는 질문

Q. 표 글자를 작게 줄이면 되지 않나요?

정보는 들어가도 읽기 어려울 수 있습니다.

비교 목적과 핵심 항목을 정한 뒤 이동

방식이나 카드형 구성을 검토하세요.

Q. 모든 표를 카드로 바꿔야 하나요?

여러 행을 나란히 비교하는 목적이라면 표가

더 적합할 수 있습니다.

사용 목적에 따라 표현 방식을 선택해야

합니다.

Q. 가로 스크롤은 무조건 나쁜가요?

필요한 비교 관계를 유지하는 데 유용할 수

있습니다.

다만 이동 가능성을 안내하고 페이지 전체가

넘치지 않는지 확인하세요.

·　·　·

모바일 표의 목표는 모든 값을 억지로 한

화면에 넣는 것이 아닙니다.

작은 화면에서도 항목의 관계를 이해하고

비교할 수 있게 만드는 것입니다.

핵심 비교 항목, 이동 신호, 항목명과 단위를

먼저 점검해보세요.

·　·　·

SEO와 GEO는

홈페이지가 더 잘 발견되고

이해되도록 만드는 전략입니다.

​

SEO는 검색엔진을 위한 기본 구조,

GEO는 AI가 이해하기 쉬운 콘텐츠 구조에 가깝습니다.

​

홈페이지를 개선할 때는

먼저 SEO 기본을 점검하고,

이후 FAQ·요약·표·사례 콘텐츠를

보완하는 것이 좋습니다.

​

​

소이정은 기업 홈페이지 제작과

리뉴얼 과정에서 SEO와 GEO를 함께 고려합니다.

​

검색엔진에도 잘 보이고,

AI에도 잘 이해되는 홈페이지가 필요하다면

소이정과 함께 우리 사이트의

개선 우선순위부터 점검해보세요.

​

​