티스토리 블로그에 애드센스 광고를 붙이고 나서 PC로 보면 멀쩡한데 모바일로 열면 광고가 화면 밖으로 삐져나와 있었다.
가로 스크롤이 생기고 레이아웃이 무너지는 거다. 처음엔 애드센스 설정 문제인 줄 알고 광고 코드를 이리저리 바꿔봤다. 원인은 거기 있지 않았다. CSS에서 화면 크기에 따라 반응하는 설정을 제대로 안 해뒀던 게 문제였다. 그게 Media Query다.
Media Query로 모바일 최적화 (반응형 CSS, 브레이크포인트, 애드센스)
티스토리에 애드센스 광고를 처음 붙이고 나서, PC에서는 레이아웃이 멀쩡한데 스마트폰으로 보니 화면 오른쪽이 잘려나가는 걸 발견했습니다. 가로 스크롤이 생긴 겁니다. 원인을 찾는 데만 한참이 걸렸고, 그 과정에서 Media Query가 블로그 운영에서 얼마나 근본적인 문제인지 몸으로 배웠습니다.
광고가 삐져나오는 진짜 이유, 브레이크포인트로 잡는다
처음에는 당연히 애드센스 코드 자체가 문제라고 생각했습니다. 광고 단위 설정을 바꿔보고, 코드를 새로 발급받아 붙여봐도 달라지는 게 없었습니다. 제가 직접 써봤는데, 이렇게 엉뚱한 곳을 파다 보면 시간만 날아갑니다.
한참 뒤에야 광고를 감싸고 있는 div 컨테이너에 width: 728px처럼 고정 너비가 박혀 있다는 걸 발견했습니다. 여기서 고정 너비란 화면 크기와 무관하게 항상 동일한 픽셀 값으로 너비가 고정되는 방식입니다. PC에서는 728px짜리 광고가 들어갈 공간이 충분하지만, 모바일에서는 화면 너비 자체가 그보다 좁으니 광고가 화면 밖으로 밀려날 수밖에 없는 구조였던 겁니다.
해결 방법은 의외로 단순했습니다. Media Query를 써서 모바일 화면일 때 해당 컨테이너의 너비를 max-width: 100%로 바꿔주는 것만으로 가로 스크롤이 사라졌습니다. Media Query란 CSS에서 화면 크기나 해상도 같은 조건에 따라 다른 스타일을 적용할 수 있게 해주는 문법입니다. 기본 형태는 @media (max-width: 768px) { }이고, 중괄호 안에 해당 조건일 때 덮어쓸 스타일을 넣으면 됩니다.
이때 기준이 되는 숫자가 브레이크포인트(breakpoint)입니다. 브레이크포인트란 레이아웃이 전환되는 화면 너비의 기준점을 의미합니다. 통상적으로 768px 이하를 모바일, 769px~1024px를 태블릿, 1025px 이상을 PC로 구분합니다. 이 기준을 어디에 두느냐에 따라 같은 CSS 코드도 전혀 다르게 작동합니다.
광고 관련해서 한 가지 더 짚어두면, 구글 애드센스 정책상 광고가 화면 영역 밖으로 밀려날 경우 광고 게재가 중단될 수 있습니다(출처: Google AdSense 고객센터). 수익이 목적인 블로그라면 이건 단순한 디자인 문제가 아닙니다. 콘텐츠를 아무리 쌓아도 광고가 정상 게재되지 않으면 수익 자체가 끊깁니다.
모바일에서 레이아웃을 확인하는 가장 빠른 방법은 크롬 개발자 도구입니다. F12를 누르면 열리고, 상단의 기기 아이콘을 클릭하면 모바일 시뮬레이션 모드로 전환됩니다. 저는 이 경험 이후로 CSS를 수정할 때 이 창을 항상 옆에 띄워두고 작업합니다. 수정할 때마다 스마트폰으로 직접 확인하는 것보다 훨씬 빠르게 문제를 잡을 수 있습니다.
모바일에서 레이아웃을 점검할 때 확인해야 할 핵심 항목은 다음과 같습니다.
- 광고 컨테이너에 고정 너비(px 단위)가 설정되어 있지 않은지
- overflow: hidden이 적용되어 콘텐츠가 잘리지 않는지
- 이미지나 임베드 요소에 max-width: 100%가 선언되어 있는지
- 브레이크포인트 기준이 실제 방문자 기기 폭과 맞게 설정되어 있는지
모바일 퍼스트, 왜 나중으로 미루면 안 되는가
솔직히 이건 예상 밖이었습니다. 블로그 통계 화면에서 방문자의 기기 비율을 처음 확인했을 때, 모바일이 70%를 훌쩍 넘고 있었습니다. PC로 글을 쓰고 PC에서 디자인을 다듬다 보니 자연스럽게 PC 중심으로 생각하게 되는데, 실제 독자의 대다수는 스마트폰 화면으로 보고 있었던 겁니다.
그 전까지는 PC 기준으로 레이아웃을 완성하고 나중에 모바일을 손보는 방식으로 작업했습니다. 그런데 이렇게 하면 결국 두 번 작업하게 됩니다. PC 스타일을 기준으로 다 짜고 나면, 모바일에서 깨지는 부분을 하나씩 예외 처리해야 하는데 이게 생각보다 손이 많이 갑니다. 제 경험상 이 방식은 분명히 비효율적입니다.
모바일 퍼스트(Mobile First)란 모바일 화면을 기본 스타일로 먼저 설계하고, 화면이 커질수록 조건을 추가해 나가는 방식입니다. CSS 관점에서 보면, min-width 기반의 미디어 쿼리를 쓰는 것이 모바일 퍼스트 설계입니다. 반대로 max-width를 기준으로 PC 스타일을 먼저 짜고 모바일 예외를 추가하는 방식은 데스크탑 퍼스트(Desktop First)라고 부릅니다. 어떤 방향으로 가느냐에 따라 CSS 구조 전체가 달라집니다.
이 문제가 단순히 사용자 경험에만 영향을 주는 게 아닙니다. 구글은 모바일 퍼스트 인덱싱(Mobile-First Indexing) 정책을 적용하고 있어, 검색 엔진이 웹페이지를 평가할 때 모바일 버전을 기준으로 SEO 점수를 산출합니다(출처: Google Search Central). 여기서 SEO(Search Engine Optimization)란 검색 엔진에서 내 페이지가 더 높은 순위에 노출되도록 최적화하는 작업을 말합니다. 모바일에서 레이아웃이 무너진 페이지는 검색 결과에서도 밀려날 가능성이 있습니다.
애드센스 승인을 목표로 콘텐츠를 열심히 쌓으면서 레이아웃 최적화를 나중으로 미루는 분들을 종종 봅니다. 그런데 모바일에서 화면이 깨진 블로그는 방문자가 첫 페이지에서 나가버립니다. 아무리 잘 쓴 글도 읽히지 않으면 의미가 없고, SEO 점수도 올라가지 않습니다. Media Query는 블로그를 개설한 초기부터 기본으로 챙겨야 하는 요소입니다.
반응형 웹(Responsive Web)이라는 표현을 자주 듣지만, 실제로 그게 무엇인지 모호하게 느끼는 분도 많습니다. 반응형 웹이란 하나의 HTML과 CSS로 화면 크기에 따라 레이아웃이 유동적으로 변하는 구조를 말합니다. Media Query가 그 핵심 구현 수단입니다. 별도의 모바일 전용 페이지를 만들 필요 없이, CSS 조건 분기만으로 PC와 모바일을 동시에 대응할 수 있습니다.
모바일 레이아웃이 무너진 상태로 글을 백 개 쌓는 것보다, 처음에 구조를 제대로 잡고 시작하는 편이 결과적으로 훨씬 빠릅니다. 제가 직접 겪어본 결론입니다.
Media Query는 어렵지 않습니다. 브레이크포인트 기준 몇 가지만 머릿속에 정리해두고, 크롬 개발자 도구를 열어서 모바일 시뮬레이션으로 확인하는 습관만 들이면 대부분의 레이아웃 문제는 충분히 잡을 수 있습니다. 콘텐츠에 공을 들이는 만큼, 그 콘텐츠가 제대로 보이는 환경을 만드는 데도 초반부터 신경 쓰시길 권합니다.
참고 및 출처
MDN Web Docs — Using Media Queries (한국어)
Google Search Central — 모바일 친화적 사이트 구축
Google AdSense 고객센터 — 반응형 광고 코드 사용 방법
W3C Media Queries Level 5 공식 스펙
CSS-Tricks — A Complete Guide to CSS Media Queries