제품 리뷰 포스팅에 비교표를 처음 넣었을 때, HTML table 태그로 만들었다가 모바일에서 완전히 무너지는 걸 보고 멍했습니다. 열이 세 개를 넘자마자 가로 스크롤이 생겼고, 독자 대부분은 그냥 표를 무시하고 지나쳤습니다. 그때부터 CSS Grid 기반 비교표로 전환했는데, 생각보다 챙겨야 할 게 많았습니다. 반응형만 해결되면 끝인 줄 알았는데, 접근성과 SEO까지 얽혀 있었습니다.
HTML table이 모바일에서 무너지는 이유
일반적으로 표 형태의 데이터는 HTML table 태그로 만드는 게 정석이라고 알려져 있습니다. 저도 처음엔 그렇게 생각했습니다. 그런데 제가 직접 써봤는데, 열이 세 개를 넘어가는 순간 모바일 화면에서 테이블이 뷰포트(viewport) 바깥으로 밀려나기 시작했습니다. 뷰포트란 사용자가 기기 화면에서 실제로 볼 수 있는 영역을 말합니다. 화면 너비보다 콘텐츠 너비가 넓어지면 가로 스크롤이 생기는데, 대부분의 독자는 그 스크롤을 끝까지 당겨보지 않습니다.
table 태그 자체가 가진 구조적 한계입니다. table은 행(row)과 열(column)이 서로 연결된 격자 구조라, 열 너비를 화면 크기에 따라 유동적으로 조절하기가 까다롭습니다. overflow-x: auto로 컨테이너를 감싸는 방법도 있지만, 그러면 사용자가 스크롤을 직접 해야 하고, 그 순간 비교표로서의 역할은 절반 이상 죽습니다. 비교표는 항목들이 한눈에 들어와야 의미가 있기 때문입니다.
CSS Tricks에서도 반응형 환경에서 테이블이 깨지는 문제를 CSS로 해결하는 다양한 방법을 다루는데(출처: CSS-Tricks 반응형 데이터 테이블), 결국 공통된 결론은 "table 태그를 반응형으로 만드는 건 해결책을 덧붙이는 작업"이라는 겁니다. 태생적으로 반응형 친화적인 구조가 아니라는 뜻입니다. 저는 그 덧붙이기를 반복하다가 결국 구조 자체를 바꾸는 선택을 했습니다.
- HTML table은 열이 3개 이상이면 모바일에서 가로 스크롤 발생 가능성이 높다
- overflow-x: auto 처리는 스크롤을 사용자에게 떠넘기는 임시방편에 가깝다
- 반응형 비교표가 필요하다면 CSS Grid 기반 구조 전환이 근본적인 해결책이다
CSS Grid로 반응형 비교표 만드는 핵심 구조
CSS Grid 비교표의 핵심은 각 셀을 독립적인 div로 만들고, grid-template-columns로 열 너비를 정의하는 방식입니다. grid-template-columns란 그리드 컨테이너 안에서 각 열이 얼마나 너비를 차지할지 비율이나 절댓값으로 지정하는 속성입니다. 예를 들어 "2fr 1fr 1fr 1fr"로 설정하면 첫 번째 열(항목명)이 나머지 제품 열보다 두 배 너비를 가집니다. 이렇게 하면 항목 레이블이 읽히기 편하고, 제품 데이터 열은 균등하게 배분됩니다.
모바일 대응은 미디어 쿼리(media query)로 처리합니다. 미디어 쿼리란 화면 크기나 해상도 같은 조건에 따라 다른 CSS를 적용하게 해주는 규칙입니다. 화면 너비가 640px 이하가 되면 grid-template-columns를 "1fr 1fr"로 줄이고, 항목 레이블 열은 숨깁니다. 대신 각 셀에 data-label 속성을 붙여두고, CSS의 content 속성으로 레이블을 셀 앞에 표시합니다. 이렇게 하면 헤더 행 없이도 "가격: 8만원" 같은 형태로 정보를 읽을 수 있습니다.
MDN Web Docs의 CSS Grid 레이아웃 문서를 보면(출처: MDN Web Docs CSS Grid), fr 단위가 사용 가능한 공간을 비율로 나눠 가진다는 개념이 명확히 설명되어 있습니다. 제가 직접 써봤는데, fr 단위를 쓰면 컨테이너 너비가 바뀌어도 열 비율이 유지되기 때문에 별도의 계산 없이 반응형이 자연스럽게 됩니다. table의 width 퍼센트 지정보다 훨씬 직관적이었습니다.
추천 열 강조가 전환율을 올린 이유, 그리고 주의점
비교표를 CSS Grid로 바꾼 것만큼 효과가 컸던 게 추천 열 강조 처리였습니다. 솔직히 이건 예상 밖이었습니다. 단순히 배경색을 바꾸고 상단에 "추천" 배지를 달았을 뿐인데, 어필리에이트 링크 클릭률이 눈에 띄게 올라갔습니다. 독자가 비교표에서 실제로 원하는 건 데이터 전체가 아니라 "결국 뭘 사면 되냐"는 결론이라는 걸 그때 다시 확인했습니다.
구현 방식은 간단합니다. 추천 열의 div 전체에 recommended 클래스를 추가하고, 배경색과 border-top으로 시각적으로 구분합니다. 헤더 셀에는 "⭐추천" 텍스트를 붙여 스캔하는 독자도 바로 인식할 수 있게 했습니다. 여기서 !important를 쓰는 건 다른 셀의 배경색 지정과 충돌을 방지하기 위한 조치인데, 구조를 잘 설계하면 !important 없이도 처리 가능합니다. 제 경험상 이건 좀 다릅니다. 처음엔 편하지만 나중에 스타일 수정할 때 !important가 발목을 잡는 경우가 생겼습니다.
다만 추천 강조에는 신중해야 할 부분이 있습니다. 제가 보기엔, 어필리에이트 수수료가 높은 제품을 추천으로 표시하는 건 독자에 대한 기만입니다. 비교표는 데이터로 신뢰를 쌓는 포맷입니다. 추천의 근거가 데이터에 있지 않고 수수료에 있다면, 독자는 언젠가 알아채고 신뢰를 거둡니다. 전환율은 단기적으로 오를 수 있지만, 블로그의 장기적인 신뢰도는 깎입니다. 추천 배지는 실제로 그 제품이 비교 항목에서 우위를 점할 때만 붙이는 게 맞습니다.
접근성과 SEO, CSS Grid 비교표의 빈틈
CSS Grid 비교표가 반응형 측면에서는 확실히 낫지만, 접근성(accessibility) 측면에서는 이야기가 달라집니다. 접근성이란 시각 장애인처럼 보조 기술을 사용하는 사람들도 웹 콘텐츠를 동등하게 이용할 수 있게 만드는 것을 의미합니다. HTML table 태그는 스크린 리더가 구조를 자동으로 파악합니다. "3행 2열, 가격, 8만원" 이런 식으로 맥락을 읽어줍니다. 반면 div 기반 CSS Grid는 스크린 리더 입장에서 그냥 div 나열입니다.
이를 보완하려면 ARIA(Accessible Rich Internet Applications) 역할 속성을 수동으로 추가해야 합니다. ARIA란 HTML 요소에 역할과 상태를 명시적으로 부여해 보조 기술이 올바르게 해석하도록 돕는 속성 집합입니다. role="table", role="row", role="columnheader", role="cell"을 각 div에 붙이면 스크린 리더가 table처럼 읽을 수 있습니다. W3C의 접근성 테이블 가이드에서도(출처: W3C WAI 접근성 테이블 가이드) 이 속성 구조가 구체적으로 설명되어 있습니다. 문제는 이걸 빠뜨리면 시각 장애인 독자에게 비교표는 존재하지 않는 것과 같다는 겁니다.
SEO 측면에서도 빈틈이 있습니다. 구조화 데이터(Structured Data)란 검색 엔진이 콘텐츠의 의미를 기계적으로 이해하도록 Schema.org 형식으로 마크업을 추가하는 방식입니다. HTML table은 구글이 데이터 구조를 직접 인식해서 리치 결과에 반영하기도 하는데, CSS Grid 기반 div 비교표는 이 이점이 없습니다. Schema.org의 Product 구조화 데이터를 JSON-LD 형태로 별도 추가하면 어느 정도 보완이 되지만(출처: Schema.org Product), 이건 HTML을 추가로 작성해야 하는 부담입니다. 제 경험상 이 부분을 챙기는 블로거가 많지 않은데, 제품 비교 포스팅에서는 무시하기 아까운 포인트입니다.
- ARIA role 속성 없이 CSS Grid 비교표를 만들면 스크린 리더 사용자에게 의미 없는 div 나열이 된다
- role="table", role="row", role="columnheader", role="cell"을 div에 직접 명시해야 한다
- Schema.org Product 구조화 데이터를 JSON-LD로 추가하면 구글 쇼핑 탭 노출 가능성을 높일 수 있다
- CSS Grid 비교표는 반응형은 유리하지만, 접근성과 SEO는 HTML table 대비 수동 보완이 필요하다
정리하면, CSS Grid 비교표는 반응형이라는 한 가지 문제를 확실히 해결합니다. 그런데 그 대신 접근성과 SEO라는 두 가지 숙제를 직접 풀어야 합니다. HTML table이 자동으로 챙겨주던 것들을 손으로 채워야 한다는 뜻입니다. 어느 쪽이 더 낫다고 단정하기보다는, 어떤 독자를 위한 포스팅인지에 따라 선택이 달라질 수 있다고 봅니다.
제가 지금 쓰는 방식은 CSS Grid 구조에 ARIA 속성을 꼼꼼히 붙이고, 제품 비교 포스팅에는 JSON-LD 구조화 데이터를 추가하는 조합입니다. 번거롭지만 이 세 가지를 같이 챙겨야 비교표가 실제로 작동한다고 생각합니다. 반응형, 접근성, 검색 최적화, 이 중 하나라도 빠지면 누군가에게는 읽히지 않는 표가 됩니다.
참고: MDN Web Docs CSS Grid / CSS-Tricks 반응형 데이터 테이블 / Schema.org Product 구조화 데이터 / W3C WAI 접근성 테이블 가이드