애드센스 광고 스크롤 되다가 상단 고정되는 효과 만들기

애드센스 광고를 통해 수익을 올리는 블로거라면 어떻게 더 광고가 방문자에게 잘 보이게 할지가 고민일 것이다. 그 중 하나의 방법으로, 스크롤 시에 광고가 상단에 한동안 고정되게 하는 효과를 구현하였다.

스크롤 시에 상단에 고정한다는 게 뭘 말하는 것인지는 아래 영상으로 먼저 확인해보기 바란다.

광고 상단고정 효과 예시

(적용된 블로그가 궁금하다면 이 곳을 들어가보면 실제로 어떻게 동작하는지 눈으로 볼 수 있다.)

사실 뭐 이걸 만들기는 어렵지 않다. 화면상에 테두리가 보이지는 않지만 div를 2단으로 해줘서 겉의 박스는 큰 여백을 가지도록 만들고, 그 안에 하나의 박스를 더 넣어서 실제 광고가 들어가는 2중 구조로 해주면 된다.

위 이미지 예시에서, ad11 부분은 내용은 없는데 사이즈만 지정해 둔다. 그리고 실제 광고가 들어가는 ad1 부분은 상단에 도착시 고정되는 css를 지정해준다.

그러면 광고 부분은 상단에 도착하면 고정이 되어 있다가 ad11 바깥쪽 박스의 여백이 스크롤되어 다 올라오면 같이 밀려서 위로 올라가게 된다.

상단 고정이 된다고 하더라도 그것은 상위 요소 속에서만 발생하는 점을 이용한 것이다.

스크롤 시 상단 고정되는 효과 HTML/CSS

먼저 html은 다음과 같은 형태로 본문에 광고를 수동삽입한다.

<div class="ad11">
<div id="ad1">&nbsp;</div>
</div>

<div class="ad11">
<div id="ad2">&nbsp;</div>
</div>

<div class="ad11">
<div id="ad3">&nbsp;</div>
</div>

여기서 id명으로 지정한 ad1, ad2, ad3이 실제 광고에 해당하는 숏코드이다. 광고 부분을 class명 ad11 이라는 걸로 감싸주도록 하는 것이 포인트이다.

(숏코드가 뭔지 잘 모르는 초보라면 티스워드에서 광고코드 변환기를 이용해서 넣으면 된다.)

직접 광고단위 소스를 다 넣어도 상관없는데 숏코드로 하는게 관리도 편하고 보기도 편해서 사용하면 여러모로 좋다. 그리고 저렇게 숏코드로 생성한 다음 서식에서 광고1번 광고2번 광고3번 식으로 만들어둔 뒤 포스팅 할 때 에디터에서 불러와서 원하는 위치에 넣으면 된다.

그리고 CSS에서는 다음과 같이 지정한다.

	#ad1 {
    position: -webkit-sticky;
    position: sticky !important;
    top: 0vh; /* 상단에 도달했을 때 고정 */
}
	#ad2 {
    position: -webkit-sticky;
    position: sticky !important;
    top: 10vh; /* 상단 10%지점에 도달했을 때 고정 */
}
	#ad3 {
    position: -webkit-sticky;
    position: sticky !important;
    top: 20vh; /* 상단 20%지점에 도달했을 때 고정 */
}

.ad11 {
		position: relative;
    margin-bottom: 20px; /* 하단 마진 */
    border: 0; /* 시각적 구분을 위한 테두리 */
    box-sizing: border-box; /* 테두리와 패딩을 너비에 포함 */
		height: 60vh; /* 또는 적절한 다른 높이로 조정 */
}
@media screen and (max-width:767px) {
  /* 모바일 환경 */
  .ad11 {
    height: 90vh !important; /* 모바일 환경에서의 비율 */
  }

}

뭐 복잡해 보이지만 하나씩 보면 그리 어렵지 않다.

먼저 #ad1 #ad2 #ad3은 위에서 말한 각 광고 삽입 부분의 id명이다. CSS에서 id는 #을 붙여서 class는 .을 붙여서 지정해 준다.

position 부분이 특정 부분에 걸려서 붙어있으라는 sticky 효과를 주는 내용이다. 그리고 그 위치는 top :얼마 형태로 지정하는데, vh는 화면의 세로폭을 100%로 할 때 어느 위치인지를 나타내는 상대적인 표현이다.

위 예제 코드에서 ad1은 0vh 즉 화면 최상단에 도달하면 걸려있도록 하였고, ad2는 10vh, ad3은 20vh를 주었다. 이렇게 하면 각각 화면 상단에서 10%, 20% 지점에 도착했을 때 멈춰있게 된다.

광고를 감싸준 외곽 박스인 ad11에 여백을 주어야 하는데 height를 지정하면 된다. 60vh를 지정해주었고, 모바일에서는 광고가 1X1 사각 형태가 많으니 90vh가 되도록 했다. 본인 스킨에 적용해보고 원하는 만큼 수치를 조정하면 된다.

스크롤 시 사라지는 효과 추가

여기서 한단계 더 나아가면, 광고가 고정되어 있다가 하단의 컨텐츠가 스크롤되어 올라오면 같이 밀려 올라가는게 아니라 배경처럼 가려지며 사라지는 효과도 줄 수 있다.

이렇게 하면 좀 더 신기하고 본문과 같이 움직이지 않으니 광고가 눈에 잘 들어오게 되는데, 아쉽게도 이 부분은 정책위반이다. 구글 광고가 컨텐츠에 가려지는 위반사항에 해당한다.

애드센스 정책위반에는 해당되지만 쿠팡 파트너스나 다른 제휴 광고를 삽입할 때에 응용해서 쓸 수는 있을 것이다.

이건 코드를 좀 달리해야 하는데, 외곽 박스로 광고를 싸주면 안된다.

<div id="ad1">&nbsp;</div>
<div class="ad11">&nbsp;</div>

<div id="ad2">&nbsp;</div>
<div class="ad22">&nbsp;</div>

<div id="ad3">&nbsp;</div>
<div class="ad33">&nbsp;</div>

이렇게 광고블럭 다음에 하나씩을 추가해주고, 여기서는 class명도 각각 다르게 지정해주어야 한다.

	#ad1 {
    position: -webkit-sticky;
    position: sticky !important;
    top: 0vh; /* 상단에 도달했을 때 고정 */
}
	#ad2 {
    position: -webkit-sticky;
    position: sticky !important;
    top: 10vh; /* 상단에 도달했을 때 고정 */
}
	#ad3 {
    position: -webkit-sticky;
    position: sticky !important;
    top: 20vh; /* 상단에 도달했을 때 고정 */
}

.ad11 {
		position: relative;
    margin-bottom: 20px; /* 하단 마진 */
    border: 0; /* 시각적 구분을 위한 테두리 */
    box-sizing: border-box; /* 테두리와 패딩을 너비에 포함 */
		height: 60vh; /* 또는 적절한 다른 높이로 조정 */
}
.ad22 {
		position: relative;
    margin-bottom: 20px; /* 하단 마진 */
    border: 0; /* 시각적 구분을 위한 테두리 */
    box-sizing: border-box; /* 테두리와 패딩을 너비에 포함 */
		height: 60vh; /* 또는 적절한 다른 높이로 조정 */
}
.ad22 {
		position: relative;
    margin-bottom: 20px; /* 하단 마진 */
    border: 0; /* 시각적 구분을 위한 테두리 */
    box-sizing: border-box; /* 테두리와 패딩을 너비에 포함 */
		height: 60vh; /* 또는 적절한 다른 높이로 조정 */
}

@media screen and (max-width:767px) {
  /* 모바일 환경 */
  .ad11 {
    height: 90vh !important; /* 모바일 환경에서의 비율 */
  }
	  .ad22 {
    height: 90vh !important; /* 모바일 환경에서의 비율 */
  }
	  .ad33 {
    height: 90vh !important; /* 모바일 환경에서의 비율 */
  }
}

CSS는 이렇게 각각의 id명, class명 별로 분리해서 작성해 준다. 이렇게 하면 일단 원하는 위치에 고정되는 효과까지는 똑같다. 그 다음 가려지는 것은 자바 스크립트를 적용해야 하는데 다음 소스를 </body> 앞에 넣는다.

<script>
document.addEventListener('scroll', function() {
    applyEffect(document.getElementById('ad1'), document.querySelector('.ad11'));
    applyEffect(document.getElementById('ad2'), document.querySelector('.ad22'));
    applyEffect(document.getElementById('ad3'), document.querySelector('.ad33'));
});

function applyEffect(ad, relatedAd) {
    var adBottomFromViewport = ad.getBoundingClientRect().bottom;
    var relatedAdBottomFromViewport = relatedAd.getBoundingClientRect().bottom;

    // relatedAd의 하단이 ad의 하단보다 위에 있을 때 가려지는 효과 적용
    if (relatedAdBottomFromViewport < adBottomFromViewport) {
        var hiddenHeight = adBottomFromViewport - relatedAdBottomFromViewport;
        ad.style.clipPath = `inset(0 0 ${hiddenHeight}px 0)`;
    } else {
        ad.style.clipPath = 'inset(0 0 0 0)';
    }

    // 광고가 완전히 가려졌을 때
    if (relatedAdBottomFromViewport <= 0) {
        ad.style.display = 'none';
    } else {
        ad.style.display = 'block';
    }
}
</script>

이건 광고 블럭과 여백 블럭의 위치를 계산해서, 광고 블럭의 최하단보다 여백 블럭의 하단이 스크롤해서 위로 올라오게 되면 그만큼 광고 블럭을 가려버리는 clipPath CSS 효과를 주는 내용이다.

scroll 이벤트가 발생할 때마다 계산을 하도록 되어 있고, ad11의 최하단이 ad1 최하단보다 위로 올라올 경우 그 차이만큼 ad1 하단부분을 가린다.

이렇게 하면 스크롤을 올릴때 마치 아래 컨텐츠가 올라오면서 광고를 지우고 넘어가는 듯한 효과를 줄 수 있다.