광고 영역이 어떤 화면에서도 잘리지 않는 반응형 설정 5단계
"뷰포트 단위"인 vw와 vh를 광고 컨테이너에 적용하면 스마트폰, 태블릿, 와이드모니터 어디에서 봐도 광고 영역이 화면을 벗어나거나 잘리는 일이 없다. px처럼 고정값이 아니라 화면 크기에 비례해서 자동으로 조정되기 때문이다. 한 번 설정해두면 반응형 광고 레이아웃이 완성된다.
블로그를 PC로만 보던 시절은 지났다. 지금은 방문자의 60~70%가 모바일로 들어온다. 그런데 광고 영역을 px로 고정해두면 모바일에서 광고가 화면 밖으로 삐져나오거나, 텍스트를 가리거나, 스크롤이 이상해지는 일이 생긴다. 이걸 해결하는 가장 우아한 방법이 "뷰포트 단위" 활용이다. 이 글에서는 vw/vh의 개념부터 실전 적용까지 5단계로 정리했다.
📋 목차
- vw와 vh가 뭔지 3분에 이해하기
- px 대신 vw를 써야 하는 상황
- 광고 컨테이너에 vw 적용하는 법
- vh로 높이 기반 광고 영역 설정하기
- min/max 함수와 clamp()로 과도한 확대 방지
- 실전 코드 예시와 브라우저 호환성 체크
- 출처
📐 vw와 vh가 뭔지 3분에 이해하기
"뷰포트 단위"는 브라우저 창(뷰포트)의 크기를 기준으로 계산되는 CSS 단위다. 1vw는 뷰포트 너비의 1%, 1vh는 뷰포트 높이의 1%다. 예를 들어 스마트폰 화면이 390px 너비라면 1vw = 3.9px, 100vw = 390px이 된다. 와이드 모니터가 1920px이라면 1vw = 19.2px이 된다. 화면 크기가 달라져도 비율로 적용되기 때문에 항상 화면에 맞게 맞춰진다.
px은 절댓값이라 한 번 정해지면 화면이 달라져도 그 크기 그대로다. 이게 반응형 레이아웃에서 문제가 생기는 주 원인이다. 광고 영역을 `width: 728px`로 고정해두면 모바일 화면(390px)에서 광고가 화면을 훌쩍 넘어가 버린다. "뷰포트 단위"를 쓰면 이 문제가 근본적으로 해결된다.
🔄 px 대신 vw를 써야 하는 상황
모든 곳에 vw/vh를 쓰는 게 맞는 건 아니다. 적합한 상황이 따로 있다.
- 광고 컨테이너 너비: 화면 너비에 비례해서 광고 영역이 항상 적절하게 표시되어야 할 때. `width: 90vw`처럼 설정하면 어떤 화면에서도 화면 너비의 90%를 차지한다.
- 전체 화면 배너: 블로그 상단이나 중간에 전체 폭 배너를 놓을 때 `width: 100vw`가 유용하다.
- 폰트 크기: 본문 글자 크기를 `font-size: 2vw`처럼 설정하면 화면 크기에 비례해 글자가 커지거나 작아진다.
- 섹션 높이: 광고 섹션의 최소 높이를 `min-height: 10vh`로 설정해 작은 화면에서 광고 영역이 너무 납작해지지 않도록 보호.
반면 버튼 크기, 아이콘, 내부 패딩처럼 화면 크기와 무관하게 일정해야 하는 요소에는 px이나 em을 쓰는 게 맞다.
🖼️ 광고 컨테이너에 vw 적용하는 법
"뷰포트 단위"로 광고 컨테이너를 설정하는 기본 코드 예시다.
.ad-container {
width: 90vw;
max-width: 728px;
margin: 32px auto;
text-align: center;
overflow: hidden;
}
포인트는 `width: 90vw`와 `max-width: 728px`의 조합이다. 모바일에서는 화면 너비의 90%를 차지하고, PC에서는 728px 이상 넓어지지 않도록 제한한다. 이 두 속성이 함께 있어야 모바일에선 꽉 차게, 와이드모니터에선 적당한 크기로 표시된다.
광고가 컨테이너 너비를 초과해서 가로 스크롤이 생기는 문제는 `overflow: hidden`으로 막는다. 애드센스 광고가 자동으로 크기를 설정하는 경우 컨테이너보다 살짝 크게 렌더링될 때가 있는데 이걸 잘라준다.
📏 vh로 높이 기반 광고 영역 설정하기
광고 영역의 높이를 vh로 제어하면 화면 높이가 작은 기기(예: 폴드형 스마트폰을 가로로 사용할 때)에서 광고가 화면을 꽉 채워 콘텐츠를 가리는 문제를 방지할 수 있다.
.ad-container {
max-height: 30vh;
overflow: hidden;
}
이 설정은 광고 영역이 화면 높이의 30% 이상은 차지하지 않도록 제한한다. 화면이 작은 기기에서 광고 때문에 콘텐츠가 화면 밖으로 밀리는 현상을 막을 수 있다. 단, 광고 단위 크기가 강제로 잘릴 수 있으니 반응형 광고 단위와 함께 써야 효과적이다.
🎯 min/max 함수와 clamp()로 과도한 확대 방지
현대 CSS에서 "뷰포트 단위"를 쓸 때 가장 강력한 조합이 `clamp()` 함수다. clamp(최솟값, 기준값, 최댓값)으로 최소~최대 범위 안에서 유연하게 크기가 결정된다.
.ad-container {
width: clamp(300px, 90vw, 728px);
margin: clamp(16px, 4vw, 40px) auto;
}
이 설정의 의미는 이렇다. 너비는 최소 300px, 최대 728px 사이에서 뷰포트 너비의 90%로 유동적으로 결정된다. 마진도 최소 16px, 최대 40px 사이에서 화면 너비의 4%로 자동 조정된다. 미디어 쿼리 없이 이 한 줄로 모바일부터 와이드모니터까지 모든 화면에 최적화된 광고 레이아웃이 완성된다. 지원 브라우저는 크롬 79+, 파이어폭스 75+, 사파리 13.1+로 현재 사용되는 대부분의 브라우저에서 작동한다.
🧪 실전 코드 예시와 브라우저 호환성 체크
실전에서 바로 붙여쓸 수 있는 완성 코드다.
/* 광고 컨테이너 */
.ad-wrapper {
width: clamp(300px, 90vw, 728px);
margin: clamp(20px, 4vw, 40px) auto;
padding: 8px 0;
text-align: center;
overflow: hidden;
box-sizing: border-box;
}
/* 반응형 ins 태그 */
.ad-wrapper ins.adsbygoogle {
display: block;
width: 100%;
}
브라우저 호환성 확인은 caniuse.com에서 "clamp" 검색으로 확인할 수 있다. IE11은 지원하지 않지만 국내 IE11 사용자는 1% 미만이라 무시해도 된다. 티스토리는 자체 CSS 에디터에서 위 코드를 skin.html 또는 style.css에 직접 추가하면 된다.
📌 출처 및 추천 검색 태그
참고 출처
- MDN Web Docs – viewport units: https://developer.mozilla.org/ko/docs/Web/CSS/length
- MDN Web Docs – clamp(): https://developer.mozilla.org/ko/docs/Web/CSS/clamp
- Can I Use – CSS clamp: https://caniuse.com/css-math-functions
- Google AdSense 반응형 광고 가이드: https://support.google.com/adsense/answer/3541854
- CSS Tricks – A Complete Guide to Viewport Units: https://css-tricks.com/fun-viewport-units/