반응형

from Daum.net


침내 6월 1일, 다음의 뷰 애드(이하 View AD)가 런칭되었습니다.

다음 View AD는 기존의 클릭 당 수입지급방식의 웹 광고가 아닌, 다음이 그동안 운영해오고 있던 다음 View의 랭킹 방식을 적용한 View AD 랭킹을 통해 블로거에게 지원금을 차등 지급하는 방식으로서, 블로거들의 활발한 포스팅을 장려하여 블로거들의 트래픽을 다음 포탈로 집중시켜 트래픽과 정보의 수집을 얻겠다는 다음의 야심찬 광고 전략이라고 할 수 있겠습니다.

아직, 그 실효성에 있어서는 의문의 여지가 있는 것이 사실입니다만, 다음이 밝힌 바에 따르면 View AD 랭킹의 상위권(1~20위 정도)에 들어가 있는 블로거들의 경우에는 월 150만원 이상의 수입이 가능하다고 하니 많은 블로거들에게 있어서는 기대되지 않을 수 없는 시스템이라고 하겠는데요.

오늘 야심차게 블로그에 View AD를 적용시킨 순간, 한가지 고민거리가 발생하게 되었습니다. 그것은 바로 View AD의 위치가 고정된 상태로 블로그 포스트의 영역을 침범한다는 사실인 것이죠.

현재 View AD는 포스트의 우측 상단에 위치하게 됩니다. 사이즈 조정도, 위치 조정도 불가능한 상태인데요. 이 위치는 텍스트로 시작되는 포스트나, 가로로 긴 이미지가 맨 첫 라인에 위치하는 포스트의 경우에는 보기는 싫더라도 그리 큰 문제를 야기하지는 않지만 다음과 같은 포스트에서는 레이아웃의 붕괴를 가져오게 됩니다.


그림과 같이 좌측 혹은 우측에 그림이 위치하고 그 옆의 영역으로 텍스트가 들어가는 포스트의 경우는 그 레이아웃이 망가져 버린다는 단점이 생기게 되는데요. 이런 여러가지 문제로 인해 View AD의 위치를 조정하기 위한 편법이 필요하게 됩니다.

일단, 그 편법은 구글 애드센스를 상단에 위치하고 있는 블로거들에게 해당되는 이야기인데요. <table> 태그를 활용한 줌(zoom)님의 팁을 참고하시기 바랍니다.

view AD 시작 첫날, 적용 및 관리는 이렇게

<div> 태그를 활용한 티비님의 경우도 있구요.

다음 뷰 애드와 구글애드센스 본문 위 설치하는 방법

이 팁을 적용하기 위해서는 블로거에 따라서는 구글 애드센스의 수정이 필요할 수도 있습니다. 제 경우는 배너 타입의 수평형 구글 애드센스를 사용하고 있었는데, View AD와의 수평배치를 위해서 애드센스를 새로 적용하였습니다. 또한, 위의 팁을 적용하면서 주의할 점은 애드센스와 view AD 사이에 빈 공간이 발생할 경우, 포스트의 내용이 그 사이로 비집고 들어가게 된다는 점입니다. 바로 아래의 그림 처럼 말이죠.


이것은 View AD의 위치가 포스트 최상단에 별도의 라인으로 위치하는 것이 아니라 오른쪽에 겹쳐지는 영역으로 정렬되기 때문인데요, 그렇기 때문에 자기의 포스트 영역과 View AD의 공간을 없애 텍스트가 그 사이를 비집고 들어오지 못하도록 해야 합니다. View AD의 폭은 250px이므로, <div> 혹은 <table> 태그의 폭은 블로그 포스트 본문 영역에서 View AD의 폭을 뺀 넓이에서 조금씩 수정과 미리보기를 거쳐 조정하면 됩니다.

포스트 본문 영역 폭은 style.css에서 다음 라인을 찾아서 확인하실 수 있습니다.

".article {
 width:/*@post-width=*/680px/*@*/;
 color:/*@post-body-color=*/#000000/*@*/;
...(중략)

실제로 폭을 조절할 때는 View AD의 좌우 여백도 계산에 들어가는 듯 싶습니다. 제 블로그의 포스트 본문 영역이 680px인데, 애드센스와 View AD의 정렬을 위해 적용한 <div> 혹은 <table>의 폭은 420px가 되더군요. 결국 View AD의 좌우 여백 10px가 감안되어야 할 듯 합니다.

View AD 레이아웃 관련해서 여기저기 기웃거리다가 한가지 더 재미있는 사실을 발견했습니다. 일단 러브드웹님의 포스트를 참고하시도록 하구요.

다음 뷰애드(view AD)가 시작되었습니다. 구글 애드센스와 나란히 넣는 방법, 좌측 정렬하는 방법

View AD는 가로 250px, 세로 268px의 크기를 갖고 있습니다. 여기에 다시 좌측으로 10px, 하단으로 20px의 여백을 갖는 영역을 차지하고 있구요. 그림으로 보면 다음과 같습니다.


즉, 이것을 감안하여 애드센스 측면에 위치시킬 때 애드센스와 여백의 너비와 높이를 조정하면 레이아웃의 조정이 더 용이하리라 봅니다. 여백의 값을 지정하는 방법은 위의 러브드웹님의 포스트를 참조하시면 될 듯 하구요. 만약, 300x250의 애드센스를 사용한다면 높이의 경우, 38px만큼을 여백으로 지정해주면 View AD와 높이가 일치하여 포스트의 레이아웃의 붕괴를 막을 수가 있습니다. 이 원리를 제 블로그에 적용시켜보면 다음과 같습니다.


이 그림은 포스트 본문영역이 680px인 제 블로그의 경우 300x250 애드센스와 View AD를 나란히 배치시킨 경우의 레이아웃과 여백의 값들입니다. 적용할 본문 영역의 넓이와, 애드센스의 크기에 따라 애드센스와 View AD 사이의 여백, 그리고 하단의 여백이 차이가 있지만, 이것을 공식화하면 다음처럼 요약할 수 있겠습니다.

구글 애드센스가 위치하는 영역의 폭(px) = 포스트 본문 영역의 폭 - (View AD 폭 + 좌측 여백)
                                                 = Wpx - 260px

구글 애드센스가 위치하는 영역의 높이(px) = View AD의 높이 + 하단 여백 
                                                   = 268px + 20px

하지만, 위의 팁들은 구글 애드센스를 상단에 설치한 블로거들의 경우이고, 그렇지 않은 블로거라면 삽입 이미지와 텍스트가 나란히 배치된 포스트의 경우에는 View AD에 의해 레이아웃이 무너질 수 밖에 없습니다. View AD를 노출시키기 위해 일일이 포스트를 수정할 수도 없는 노릇이고 결국은 모두 상단에 구글 애드센스나 비슷한 배너 등을 위치시켜 레이아웃의 어그러짐을 막아야 할지도 모르겠군요.

다음 쪽에서 이 부분에 있어서는 아무래도 조속한 시일 내에 개선점을 내놓아야 할 듯 싶습니다. 보기에는 큰 문제가 아닐 수도 있지만, 이 위치 조정의 문제는 View AD에 있어서는 어쩌면 꽤 크리티컬한 문제일지도 모르겠군요. (이거 하느라 오늘 오전 하루가 다 날라가버렸습니다. 아, 회사에서 눈치 보이고;;;;)

반응형

+ Recent posts