불혹의 나이를 넘기고 40대 중반도 넘어서고 이제 쉰을 향하여 달려가고 있습니다. 달려가기 싫은데 천천히 가고 싶은데 나의 의지와 상관없이 시간은 왜 이렇게 빨리 흘러가는지? 가는 세월은 누구도 막을 수 없는 거라 순응하며 살아가고 있습니다. 나이가 들어간다는 것이 다 나쁜 것은 아닌 것 같습니다. 예전보다 상황을 판단하고 이해하는 능력은 나이가 들어가면서 더 빨라졌습니다. 문제는 기억력입니다. 이제는 하루가 다르게 기억력이 감퇴하고 있다는 것을 느끼고 있습니다. 불과 며칠 전에 애드센스 광고를 다는 방법을 독학하고 내 블로그에 반영을 했는데 채 일주일도 지나지 않았는데 벌써 기억에서 멀어지고 있다는 느낌입니다. 내 기억에서 완전히 잊히기 전에 과정을 정리해야 합니다.
지금까지 본문의 상단, 중간, 하단에 애드센스 광고를 삽입하는 방법을 배웠습니다. 오늘은 사이드바에 애드센스 광고를 삽입하는 방법을 배워보겠습니다. 이미 본문에 광고를 삽입하는 방법을 학습한 상태임으로 사이드바에 광고를 삽입하는 방법은 그리 힘들거나 어렵지 않습니다. 지금까지 배운 상태를 조금만 응용하면 됩니다.
오늘 사이드바에 광고를 삽입하는 방법을 학습하기 전에 먼저 알아야 할 한 가지가 있습니다. 혹 제가 이렇게 글을 올린다고 해서 소스의 내용이나 티스토리에서 사용되는 스킨의 구조를 완전히 이해하고 있느냐? 절대 아닙니다. 저도 똑 같이 백지상태에서 시작하고 있습니다. 다행히 HTML이나 CSS에 사용되는 스크립터의 경우 인터프리터 언어와 비슷한 성질을 가지고 있습니다. 중간에 오류가 있더라도 결과물을 보여준다는 것입니다. 오류가 있는 상태로 결과를 보여주기 때문에 결과물을 보면서 소스를 수정하면 됩니다. 때문에 누구나 할 수 있습니다. 오히려 실수를 통해서 더 좋은 결과물을 만들 수 있는 구조입니다. 스크립트는 컴파일러 방식의 개발자들을 작성하는 프로그래밍과는 조금 거리가 있습니다.
제가 하고 싶은 말은 겁을 먹지 말라는 얘기입니다. 누구나 할 수 있습니다. 이제 본격적으로 티스토리 블로그의 사이드바에 애드센스 광고를 삽입하는 방법을 배워 보겠습니다. 지금까지 그랬듯이 오늘도 애드센스 사이트에서 사이드바에 사용할 광고를 먼저 생성합니다. 다른 분들의 블로그를 먼저 잘 관찰해 보셨나요? 사이드바에 사용하는 광고는 세로 방향으로 길게 생긴 형태를 주로 합니다. 꼭 그 원칙을 따를 필요는 없습니다. 자 이제 제 블로그에는 사이드바 광고를 어떻게 삽입했는지 레이아웃을 먼저 보겠습니다.
사이드바에 광고를 삽입하는 방법은 아직은 티스토리 블로그에서 플러그인 형태로 서비스를 제공하지는 않습니다. 그렇지만 또 다른 형태로 삽입할 수 있습니다. 사이드바 메뉴에서 HTML 편집 기능을 이용하는 방법입니다. 이 방법은 쉽게 사이드바에 애드센스 광고를 삽입할 수 있습니다.
우선 아래 그림에서와 같이 티스토리 관리 페이지에서 사이드바 > HTML 배너 출력 > 편집을 클릭을 합니다.
아래 그림과 같이 HTML 배너 출력 창이 열리면 배너의 이름을 적당하게 입력하고 HTML 소스 부분에 애드센스 광고를 삽입하면 됩니다. 이렇게 쉽게 사이드바에 애드센스 광고를 삽입할 수 있습니다. 그런데 제가 사용하는 스킨 하고는 어떤 문제가 있는지 제가 생각했던 것과 조금씩 다르게 출력이 되어서 저는 이 방법이 아닌 소스에 직접 삽입/수정하는 방법을 이용했습니다.
다시 티스토리의 관리자 페이지에서 꾸미기 > HTML/CSS 편집을 클릭합니다. 이전에 올린 포스팅을 보셨다면 이 정도는 잘 아시죠?
HTML/CSS 편집할 수 있도록 브라우저 상에 새로운 탭이 열립니다. 여기서 기본적으로 HTML 편집 모드로 되어있습니다. 한번 더 확인합니다. 아래 그림에서와 같이 HTML을 클릭하고 편집 화면 내부를 마우스로 한 번 클릭 후 검색(Ctrl + F)을 실행합니다. 그리고 새로운 사이드바 항목을 만들기 위해 소스를 삽입할 위치를 찾습니다. 아래 그림과 같이 검색에 's_sidebar'를 입력 후 엔터키를 누르면 본문에서 's_sidebar'가 시작된 곳을 찾아 줍니다.
이곳이 바로 사이드바의 메뉴가 정의된 소스 부분입니다. 우리는 여기에 새로운 애드센스 광고를 삽입할 수 있는 새로운 사이드바 메뉴바를 생성하기 위한 소스를 삽입할 것입니다.
여기에 있는 소스의 위치는 실제 출력될 사이드바의 위치와 무관합니다. 따라서 위에서 검색된 <s_sidebar></s_sidebar> 사이에 아래에 편집할 소스를 삽입하면 됩니다. 그리고 사이드바를 구성하는 메뉴는 <s_sidebar_element></s_sidebar_element>로 구성이 됩니다. 아래 녹색으로 표시된 박스가 애드센스 광고를 삽입할 사이드바의 메뉴입니다. 메뉴의 이름은 '애드센스 1'입니다. 아래 그림에 '여기를 주목해 주세요' 표기된 부분입니다. 참고로 주석이 사이드바의 타이틀이 되도록 설정이 되어 있습니다.
아래와 같이 <s_sidebar_element> ~ </s_sidebar_element>로 구성된 애드센스 사이드바 메뉴를 <s_sidebar></s_sidebar> 사이에 삽입을 합니다. 저는 스킨에서 제공하는 소스와 구분하기 위해서 가장 아래에 코드를 삽입했습니다. 삽입 후 저장을 클릭합니다.
사이드바_애드센스_광고삽입.txt편의를 위해서 소스는 위 링크를 클릭하신 후 다운로드합니다. 소스는 아래 그림과 같이 구성되어 있습니다. 붉은색 선으로 표기된 글자를 지우고 애드센스의 광고 코드를 여기에 붙여 넣고 전체 소스를 선택하여 위에서 설명된 위치에 삽입하면 됩니다.
사이드바에 애드센스 메뉴바를 여러 개를 생성할 수 있습니다. 다시 위의 레이아웃 그림으로 올라가서 보시면 아시겠지만 저는 사이드바에 2개의 애드센스 광고를 노출시켰습니다. 하나 더 사이드바 메뉴를 생성하기 위해서는 위의 과정을 한번 더 반복하시면 됩니다. 자꾸 다양한 시도를 통해서 배우고 내 것으로 만들어가면 됩니다.
소스를 저장하고 나와도 사이드바에 아직까지 광고가 노출되지 않습니다. 중요한 것은 지금부터입니다. 지금까지 우리가 사이드바에 삽입할 광고 코드를 삽입하고 저장한 것은 사이드바 편집 도구를 통해 관리할 수 있도록 사용자 모듈을 생성한 것입니다. 따라서 아래 그림과 같이 티스토리의 관리자 페이지에서 꾸미기 > 사이드바를 클릭 후 기본 모듈에서 내가 생성한 사이드바 메뉴 항목이 있는지 확인하는 것입니다.
아래 그림을 보시면 위에서 생성한 2개의 사이드바 메뉴(모듈)가 추가된 것을 확인할 수 있습니다. 이제 사이드바에 애드센스 광고를 노출시키기 위해서는 '+' 표시를 클릭하고 저장을 클릭합니다.
지금까지 잘 따라오셨죠. 그렇다면 아래 그림에서와 같이 사이드바 항목에 '애드센스 1', '애드센스 2'라는 모듈이 추가된 것을 확인할 수 있습니다. 이제 '저장'을 클릭하고 빠져나옵니다.
이제 남은 것은 사이드바를 통해서 정상적으로 애드센스 광고가 노출되고 있는지 확인하는 과정만 남았습니다. 아마 문제없이 잘 노출이 될 겁니다. 참고로 저는 참고로 했던 소스를 일부 수정을 했습니다. 위에 첨부된 소스 중 일부 내용은 다른 분에게 오히려 문제가 되거나 필요하지 않을 수 있습니다.
제가 소스를 수정한 이유는 PC 환경에서 제 블로그를 보았을 때는 정상적으로 출력이 되었으나 휴대폰이나 아이패드로 보았을 때 제가 생각했던 것과 달리 광고와 다른 사이드바가 겹쳐서 보이는 부분이 있었습니다. 구글의 정책상 광고가 잘려서 노출이 되거나 광고 위에 다른 글자 등이 표시가 될 경우 정책 위한으로 페널티를 적용받을 수 있다고 합니다. 따라서 애드센스 광고를 노출시킨 후에는 반드시 다양한 기기에서 정상적으로 노출이 되는지 확인 작업이 필요하다고 생각합니다. 어렵게 생각하지 마세요. 위에서도 언급했지만 스크립트는 오류가 있어도 오류가 있는 상태로 결과를 보여줍니다. 따라서 소스 코드를 구조를 이해하면서 조금씩 변경하다 보면 생각했던 상태로 소스를 수정할 수 있습니다. 저도 그렇게 조금씩 배워가고 있는 중입니다.
2017/06/01 - [Social Business] - 티스토리 본문 상단에 애드센스 광고 삽입하기 총정리