인터넷을 하다 보면 애드센스 광고가 이상하게 보이고 모바일 화면이 좌우로 움직이는 블로그를 간혹 볼 수 있습니다. 그럴 경우 보기가 불편할 뿐만 아니라 사이트에 대한 신뢰도가 떨어져 보여 방문자가 이탈하기가 쉽습니다.
모바일 화면이 좌우로 움직이는 것을 수평 스크롤이라고 하기도 하는데요. 이를 해결하는 방법은 의외로 단순합니다.
수평 스크롤 발생 원인
블로그가 모바일 화면에서 좌우로 움직이는 원인은 대체로 화면 폭보다 큰 고정 폭 이미지나 넓은 테이블이 게시 글 안에 포함되어 있기 때문입니다. 드물게 사이트의 마진이나 패딩 요소가 이상하게 꼬여 있는 경우도 있습니다.
여기까지는 옛날 이야기이고, 사실 요즈음 대부분의 블로그 스킨이나 테마는 반응형이기 때문에 이미지가 크다고 해서 모바일 화면 폭을 넘어서는 경우는 거의 없습니다.
따라서 모바일 화면이 좌우로 움직이는 현상은 주로 애드센스 코드와 같은 외부 위젯으로 인하여 발생한다고 볼 수 있습니다.
좌우 움직임 없애는 가장 빠른 방법
모바일 화면 좌우 움직임이 큰 이미지 때문에 발생하든 애드센스 때문에 발생하든, 이를 해결하는 방법은 외모» 사용자 정의» 추가 CSS에 아래 코드를 추가하기만 하면 수평 스크롤을 간단하게 없앨 수 있습니다.
/* 모바일 좌우 움직임 없애기*/
html, body {
max-width: 100%;
overflow-x: hidden;
}대부분의 경우는 이렇게 해결하지만, 이 방식은 이미지 고정폭 크기가 110%일 때, 모바일 화면에서 오른쪽의 10%가 잘려나가 보이지 않는다는 치명적인 단점이 있습니다.
애드센스 광고의 경우는 오른쪽 위의 X자 표시 정도 만큼이 잘려나가 X자가 보이지 않습니다. X 표시가 없으니 광고를 닫을 수 없어 더 유리하다고 해야 하나요? ㅋ
애드센스 광고로 인하여 수평 스크롤이 생기는 경우는 위와 같이 사이트 전체에 대해 설정하기보다 원인을 발생시킨 애드센스 개별 코드에 대하여 매개변수를 설정해 주는 것이 합리적인 선택이라고 생각합니다.
애드센스 코드 수정 방법
애드센스 코드로 인하여 모바일 화면이 좌우로 움직이는 현상은 게시 글의 본문에 삽입된 애드센스 코드를 아래와 같이 <div> 코드로 감싸기만 하면 모바일 화면이 좌우로 움직이는 현상을 없앨 수 있습니다.
잠깐, 워드프레스 본문에 애드센스 광고를 수동으로 삽입하는 방법에 대해서 궁금하신 분은 아래 링크 글을 참고하세요.
<div style="width:100%; max-width:100%; text-align:center;">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-x"
data-ad-slot="1234567890"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>⚠️ ca-pub-x와 data-ad-slot="..." 값은 본인의 애드센스 계정 정보로 바꿔주세요.
애드센스 게시자 대부분이 왜 그런지는 모르겠지만, “div style”에 “overflow-x: hidden;” 요소를 설정하는 것이 관습처럼 되어 있습니다.
하지만, 애드센스가 가로폭으로 전체 화면을 꽉 차게 하려면 이 요소를 빼주어야 합니다. 이 요소를 뺌으로써 오른 쪽 부분이 잘려 나가는 현상도 방지할 수도 있으니까 일거양득입니다.
애드센스 반응형 광고 단위가 방문자의 휴대기기에서 화면의 전체 폭을 사용하도록 확장되는지 여부를 결정하는 매개 변수가 data-full-width-responsive="true"입니다.
그런데 overflow-x: hidden; 요소를 넣게 되면, data-full-width-responsive="true"를 동작하지 못하도록 방해하기 때문에 애드센스 광고가 모바일 화면의 가로 폭 전체 화면을 차지하지 못하는 결과를 초래합니다.
구글 역시, 사용자의 휴대기기에서 화면의 전체 폭을 차지하는 설정이 수익 증대 가능성을 극대화한다고 공식적으로 설명하고 있습니다. 관심 있으신 분들은 아래 링크 글을 참조하세요.
📌휴대기기에서 전체 폭을 차지하는 반응형 광고의 동작 설정하기
만약 본문에 삽입하는 애드센스가 종류가 다양하고 그 수가 많다면 CSS 추가로 스타일을 지정하는 것이 효율적일 수도 있습니다. 다만 이 두 방법에는 아래와 같이 아주 약간의 장단점이 있으므로 자신의 사이트에 가장 어울리는 방법을 선택하세요.
성능(속도) 비교 요약
| 방식 | 렌더링 속도 | 유지보수 |
|---|---|---|
인라인 스타일 (<div style="...">) | 아주 약간 빠름 (브라우저가 바로 해석) | 종류가 복잡해질수록 유지 보수 불편 |
CSS 클래스 정의 (style.css 또는 사용자 정의 CSS) | 거의 동일하거나 아주 미세하게 느림 | 코드 관리, 일관성에 뛰어남 |
참고로 왜 그런지는 모르겠지만, 블로그스팟 경우 이미지에 캡션을 추가하면 좌우로 움직이는 현상을 방지할 수 있었습니다. 물론 이 방법은 개인적인 경험으로 일반화하기에는 어려운 팁입니다.
댓글