지난 한 주 동안 티스토리 블로그와 애드센스를 열심히 연구했습니다. 독학으로 배우느라 힘들었지만 나름 만족하는 수준의 레이아웃을 확정했습니다. 이제는 블로그나 애드센스에 집중하기보다는 양질의 콘텐츠를 만들어내는 데 집중하려 합니다. 어떤 소재로 글을 써야 하는지 고민을 자주 합니다. 블로그로 수익을 창출하기 위해서는 키워드 검색을 통해 조회수가 높은 키워드로 글을 작성해야 한다는 내용을 많이 보았습니다. 그것이 노하우라고 합니다. 그런 글은 내가 경험한 얘기가 아니고 키워드를 중심으로 쥐어짜고 만들어 내어야 하는 이야기라서 거부감이 느껴졌습니다. 드론이 빨리 돌아와야 얘깃거리가 많을 텐데 지금 진행되는 것으로 보아서는 6월말 정도나 되어야 드론을 받을 수 있을 것 같네요.
나의 드론이 돌아오기까지 책, 애드센스, 소셜마케팅, 인생 2막, 그리고 미니멀 라이프와 같은 저의 관심사를 가지고 포스팅을 진행하려 합니다. 우선은 나름 힘들게 완성된 티스토리 블로그와 애드센스 광고에 대한 내용을 글로 정리를 하려 합니다. 지금은 정리가 되었지만 나중에 다시 레이아웃을 변경해야 하거나 새로운 블로그를 하나 더 만들 때 또는 다른 사람들에게 도움을 주려할 때 다시 하나씩 검색하면서 고생하는 일을 덜기 위해서라도 지금 정리가 필요합니다.
오늘은 티스토리 상단에 애드센스 광고를 삽입하는 과정을 다시 한번 정리를 하려 합니다. 복습이 시작이 되었습니다. 중요한 것은 제가 했던 것처럼 먼저 이 길을 걷고 있는 선배님들의 블로그를 통해서 어떤 레이아웃이 마음에 드는지 또 어떤 형태와 크기의 애드센스 광고를 생성하고 배치를 할 것인지를 생각하고 있어야 합니다. 윤곽이 정해지먼 애드센스를 통해서 다양한 광고를 미리 생성해두면 바로 적용하고 확인이 가능해서 좋습니다.
이제 티스토리 본문 상단에 애드센스 광고를 삽입하는 방법을 살펴보겠습니다. 애드센스에서 광고를 생성했다면 본문에 상단에 광고를 삽입하는 방법은 크게 2가지가 있습니다. 첫 번째는 티스토리 블로그의 플러그인을 이용하여 광고를 삽입하는 방법이고, 두 번째는 티스토리 블로그의 HTML/CSS 편집 기능을 이용하여 직접 HTML 코드를 삽입하는 방법입니다. 저의 경우 처음에는 플러그인 기능을 이용하여 반응형 광고를 상단에 삽입했는데 제가 생각했던 것처럼 레이아웃이 나오지 않아서 결국은 HTML/CSS를 직접 수정하여 애드센스 광고를 삽입했습니다.
먼저 제 티스토리 블로그의 레이아웃을 살펴보겠습니다. 이미 보셨겠지만 밖으로 나가지 않고 이 포스팅에서 다시 한번 살펴보겠습니다.
위 그림은 제 포스팅 하나를 통째로 화면 캡처한 내용입니다. 오늘 광고를 삽입할 곳은 그림에서 '1번'으로 표기된 화살표가 있는 곳입니다. 먼저 티스토리의 플러그인을 이용하여 광고를 삽입하는 방법은 아래 링크를 통해서 확인 바랍니다.
두 번째로 HTML/CSS를 직접 수정하여 애드센스 광고를 삽입하는 방법입니다. 이 방법도 먼저 올린 포스팅을 참조하시면 과정을 확인할 수 있습니다.
최근에는 대부분 티스토리 스킨을 반응형 스킨을 적용합니다. 반응형 스킨을 적용하면 모바일 환경과 PC 환경이 서로 다른 페이지를 보여주는 게 아니라서 구독자 입장에서 응답 속도가 빨라서 좋습니다. 블로그 제작자 입장에서는 사용자가 어떠한 기기로 접속을 하더라도 레이아웃의 손상 없이 서비스를 제공할 수 있습니다. 반응형이 아닌 경우 PC 환경에서 최적화된 페이지가 모바일 환경에서는 깨져서 보이거나 스크롤 바를 조작하면서 내용을 확인하는 상황이 발생할 수 있습니다. 때문에 최근에는 거의 반응형 스킨을 적용하는 추세인 것 같습니다.
애드센스의 경우 광고가 잘리거나 박스가 광고를 가릴 경우 또는 광고로 첫 화면을 도배하는 경우 모바일 정책 위반으로 페널티를 받을 수 있습니다. 때문에 스킨도 반응형으로 광고로 반응형을 많이 추천하고 있습니다. 저는 반응형 애드센스 광고와 고정형 애드센스 광고를 혼용해서 사용합니다. 때문에 저는 블로그에 광고를 삽입 후 노트북, 아이패드, 아이폰에서 출력물의 레이아웃을 모두 살펴보고 이상이 유무를 확인합니다. 아이패드는 거의 PC와 동일하게 출력되기 때문에 휴대폰에서만 추가로 확인해도 문제는 없을 것으로 판단합니다.
위 페이지의 상단 광고가 아이패드와 아이폰에서는 어떻게 출력되는지 아래 그림을 통해서 살펴보겠습니다.
아이패드에서는 PC와 거의 차이 없는 출력을 보입니다.
아이폰에서 보이는 화면입니다. 휴대폰은 세로보기로 주로 보기 때문에 광고가 먼저 보이고 글은 아래로 내려가서 보입니다. 처음에는 300*250 사이즈의 박스 광고를 상단에 배치를 했습니다. 이 경우 아이폰 6로 보았을 때 박스 왼쪽에 글자가 1~2 글자씩 아래로 보여 가독성에 문제가 되어 광고 사이즈를 336*280으로 키워서 아이폰 6 환경에 최적화시켰습니다. 그런데 아이폰 6플러스나 5" 이상의 화면에서는 오른쪽에 광고가 배치되고 왼쪽에 글자가 조금씩 보입니다. 모든 조건을 다 만족시키기는 어려울 것 같습니다. 이런저런 다양한 시도를 통해서 자신에게 맞는 조건을 찾아야 합니다.
오늘은 본문 상단에 2개의 애드센스 광고를 삽입하는 방법을 배워 보겠습니다. 아래 그림의 경우가 본문 상단에 2개의 애드센스 광고를 배치한 형태입니다. 이번에도 위에서 설명된 두 번째 방법인 HTML/CSS 편집을 통해서 광고를 삽입할 예정입니다.
상단에 2개의 광고 삽입하기.txt먼저 오늘 사용할 HTML 코드입니다. 아래 링크를 클릭하셔서 다운로드합니다. 그런 다음 애드센스에서 삽입할 광고 코드 2개를 아래의 그림과 같이 화살표가 있는 위치에 삽입합니다. 참고로 저는 300*250 박스형 광고 2개를 미리 생성 해 두었습니다.
아래 그림과 같이 광고 코드를 삽입하시면 됩니다. 이제 전체를 선택 후(Ctrl + A) 후 소스를 복사(Ctrl + C) 합니다.
티스토리의 관리자 페이지에서 HTML/CSS 편집을 클릭합니다. 아래와 같이 HTML/CSS를 편집할 수 있는 창이 열리면 아래 그림에서와 같이 HTML 편집 화면인지 확인을 합니다. 다음 편집창 적당한 곳에 마우스를 클릭 후 검색(Ctrl+F)을 실행합니다. 검색란에 'article_rep_desc'를 입력하면 아래 그림의 108행의 위치(점선표시)를 찾아 줍니다. 그 위에 소스를 붙여넣기(Ctrl+V) 합니다. 이제 저장하고 빠져나옵니다.
참고로 위의 'article_rep_desc'에서 검색된 위치의 아래쪽에 복사한 코드를 삽입하면 본문의 하단에 광고가 들어갑니다. 위 검색 조건은 앞으로도 계속 만나게 될 겁니다. 이미 위치를 눈으로 익혀두면 편리합니다.
브라우저에서 새로고침을 누르면 페이지 상단에 2개의 광고가 노출되는 것을 확인할 수 있습니다. 화면은 위에서 먼저 보여 드렸기 때문에 생략합니다. 아이패드도 동일한 화면 구성입니다. 참고로 아이폰에서는 박스 2개가 옆으로 나란히 배치가 되지 않고 아래 그림에서와 같이 위/아래로 배치가 됩니다.
지금까지 애드센스 광고를 티스토리 블로그의 상단에 노출시키는 방법을 살펴보았습니다. 최종 복습을 하면 애드센스 광고는 티스토리 블로그의 플러그인을 이용해서 삽입하는 방법과 HTML/CSS를 직접 편집 후 삽입하는 2가지의 방법이 있습니다. 상단에 광고를 삽입하는 방법은 본문 상단의 좌측/중앙/우측에 1개를 배치할 수 있고, 본문 상단에 2개를 나란히 배치할 수 있습니다. 설명되지 않은 내용은 조금만 응용해 보시면 됩니다. 이 글이 소셜마케팅에 관심을 두고 애드센스를 이용하여 수익형 블로그를 운영하시고자 준비하시는 분들에게 도움이 되기를 바랍니다. 다음에는 본문 중앙에 광고를 삽입하는 방법을 살펴보겠습니다.
2017/05/28 - [Social Business] - 처음으로 애드센스 광고를 달다
2017/05/29 - [Social Business] - 티스토리 블로그 우측 상단에 애드센스 광고 삽입하기