티스토리에서 제공해주는 무료 스킨을 변경한지 얼마 되지 않았다. 스킨에서 사용하고 있는 기능들을 CSS에서 변경해야 하는데, 해당 CSS소스를 알아보기가 쉽지 않았다. 인터넷으로 변경방법을 확인해봐도 관련 정보가 너무 부족했다. 그래서 스킨을 다시 바꿔보도록 한다. 반응형 스킨인 FastBoot라는 스킨으로, 많은 사람들이 사용하고 있어서인지 관련 정보들도 인터넷으로 쉽게 확인할 수 있다.

FastBoot 반응형 스킨을 제작한 사이트에 들어가보자. 해당 스킨에 대한 설치방법과 설명이 자세히 나와있다. 

바로가기 : 간단히 설치하는 반응형스킨!

해당페이지의 중간 부분을 보면, 다운로드 가능한 파일들이 있다. 최신버전인 1.6.2를 다운로드 받아서 사용하자. 

꾸미기 - 스킨으로 가면 스킨 설정을 하는 화면이 나온다. 우측상단의 '스킨등록+' 를 눌러서 새 스킨 등록 화면으로 넘어가자.

다음과 같이 새로운 스킨을 등록할 수 있는 화면으로 넘어왔다. 윗단계에서 다운 받아놨던 파일을 등록할 수가 있다. 압축파일인 FastBoot를 압축해제하여 사용가능하도록 준비해 놓는다. 하단에 보면 '+추가' 버튼이 있는데, 클릭하여 파일들을 업로드 시키자.

FastBoot 를 압축해제 놓은 파일들은 아래와 같다. 이 파일들을 모두 업로드 해야 한다. 먼저 images 폴더를 제외한 6개 파일들을 업로드한다. 다음으로 images 폴더 안에 있는 파일들을 추가로 업로드시킨다.

업로드가 완료되면, 다음처럼 파일목록 확인이 가능하다. 스킨 저장명을 입력하고 '저장'버튼을 눌러서 스킨등록을 마친다.

저장을 마친 스킨은 스킨-PC보관함 에서 확인이 가능하다. 상단에 보이는 Flatinum 스킨이 변경전 사용하고 있던 것이고, 하단에 보이는 FastBoot v1.6.2 는 이번에 새로 등록한 스킨이다. '적용' 버튼을 클릭하여, 해당 스킨을 내 티스토리에 적용시키자. 

적용이 완료가 되었다. FastBoot v1.6.2 를 통해서, 다음과 같은 레이아웃을 가진 스킨으로 티스토리가 변경이 되었다.

티스토리의 좋은 점 중에 하나는 화면의 구조라고 할 수 있는 스킨을 내 마음대로 선택하기 쉽다는 것이다. 스킨을 직접 만들어서 사용할 수도 있겠지만, 어느정도 실력이 있는 것이 아니면 도전해보기 쉽지 않다. 하지만 염려할 필요가 없다. 무료로 내가 마음에 드는 스킨들을 선택할 수 있는 방법이 있기 때문이다.

티스토리의 관리 페이지에 들어가면, 꾸미기 - 스킨 선택이 가능하다. 여기에서 변경가능한 스킨을 선택하는 것이 가능하다. 스킨을 클릭해보면, 우측으로 PC - 모바일 - PC보관함이라고 보여지는 것을 확인 할 수가 있다.

반응형 스킨이 대세이기 때문에 반응형 스킨을 사용하고 있었는데, 사용하다보니 내가 처음에 선택했던 스킨이 사이드바를 제공해주지 않았다. 직접 스킨을 수정하면서 사이드바를 추가할 수도 있겠지만, 사이드바를 제공해주고 있는 반응형 스킨을 찾는것이 더 쉬운 일이다. 

각 스킨에 대해서 미리보기를 할 수도 있고, 각 스킨의 상세한 설명들도 볼 수 있다. 각자 입맞에 맞는 형태 및 기능들을 확인하여서 적절한 스킨을 선택하면 된다. 내가 선택한 스킨은 Flatinum 스킨이다.

반응형 + 사이드바가 주요 목적이었기 때문에 Flatinum 을 선택했다. 우선 내가 사용하려고 했었던 사이드바가 배치되어 있고, 글을 보여주는 부분의 길이도 넓었다. 페이지의 상세 기능들은 직접 수정도 가능하지만, 어느정도 기능이 제공되어 있는 것을 사용하는 것도 상당한 시간을 줄여주는 일이다.

내가 사용하고자 하는 스킨을 선택하고, 한가지 더 체크해야 할 일이 남아있다. 바로 반응형 스킨을 사용하고자 선택했다면, 모바일 탭을 변경해줘야 한다. 모바일 탭에서 모바일웹 ON OFF 를 선택 가능한데, OFF로 설정을 해야 한다.

이제 나의 티스토리에, 새로운 반응형 스킨이 적용되었다. 사이드바가 있는 스킨을 원했던 이유가 사이드바에 애드센스 광고를 설치하려는 목적이었다. 이제 사이드바에 애드센스 광고를 설치하는 다음 단계로 가보자.

바로가기 - 사이드바에 광고추가하기

티스토리에 다양한 광고를 본인이 원하는 위치에 삽입할 수가 있다. 그중에서도, 이번에 알아볼 것은 구글 애드센스 광고를 티스토리의 사이드바에 삽입하는 것이다. 사이드바에 구글 애드센스 광고를 적용하는 방법을 한번 따라해보자.

구글 애드센스에서 사이드바에 등록하기 위한 새로운 광고 하나를 만들어야 한다. 사이드바는 위아래로 길쭉한 모양이므로, 우리가 사용할 광고도 위아래로 길쭉한 모양을 선택해서 만들어야 한다. 사각형모양의 광고를 등록할 수 없는 건 아니지만, 긴 사이드바를 효율적으로 사용하기 위해서는 비슷한 모양을 선택하는 것이 좋다.

다음 작업을 하기위해서 미리 확인해두어야 할 정보가 있다. 내가 가지고 있는 페이지의 사이드바의 크기를 알아야한다. 광고를 사이드바에 넣는 것이므로, 사이드바의 크기를 알아야 광고를 넣을때 크기를 조절해서 적용시킬 수가 있다.

나는 이 부분에서 잠시 작업을 멈출 수밖에 없었다. 내가 사용하고 있었던 스킨이 사이드바를 허용하지 않는 스킨이었다. CSS에서 #sidebar를 검색한 결과를 찾을 수가 없었다. 그래서 스킨을 변경하는 작업을 먼저 진행했다. 스킨변경 이후, 사이드바에 광고 삽입하기 과정을 계속 진행을 하고 있다.

바로가기 : 스킨변경하는 과정 확인

사이드바 배너를 사용하기 위해서는 티스토리에서 플러그인 설정을 해야 한다. 관리 및 통계 항목 중 배너출력을 사용하도록 설정을 한다. 사이드바에 배너를 출력가능하게 해주는 기능이다.

플러그인 설정이 완료되었다면, 다음작업을 진행하면 된다. 꾸미기 - 사이드바 설정을 통해서, 사이드바의 환경을 변경시킨다. 좌측 기본모듈에 보이는 HTML 배너출력을 우측 사이드바에 추가시킨다. + 버튼 클릭으로 이동시킬 수 있다. 

마지막으로 사이드바의 광고에 적절한 HTML소스를 넣는다. 구글 애드센스에서 등록했었던 광고의 코드를 가져와서 붙여넣어준다. 이제 사이드바에 구글 애드센스 광고가 적용이 되었다.

사이드바에 적용되는 광고의 크기는 HTML소스를 변경하여 수정이 가능하다. 소스내의, width:200px;height:600px 부분을 수정해가면서 내 사이드바에 설정할 광고크기를 선택하면 된다.

티스토리에 적용된 사이드바의 애드센스 광고를 확인하다보니, 인터넷 창의 크기에 따라서 사이드바가 아랫부분으로 옮겨지기도 한다. 그럼 글을 보여주는 부분의 길이를 줄이면, 사이드바가 더 오랫동안 보여지지 않을까? 글 부분의 길이 조정을 통해서 사이드바가 어떻게 되는지 확인을 해보는 것을 다음 주제로 삼아야겠다.

티스토리에 광고를 삽입하는 다양한 방법중에서, 이번에 알아볼 것은 본문 중간에 애드센스 광고를 넣는 방법이다.

애드센스를 티스토리에 넣는 방법 중, 간편하게 본문 중간에 광고를 적용할 수 있는 방법을 알아보자.

본문 중간 광고는 다음과 같이 본문 중간에 나오는 광고를 의미한다. 

광고의 내용이 어떤것이 나올지는 우리가 선택할 수는 없지만,

어떠한 광고를 배치시키고, 어떤 상황에서 보여줄 것인가는 선택가능하다.

본문 중간에 애드센스 광고를 삽입하는 과정을 살펴보자.

애드센스 광고를 티스토리에 삽입하기 위해서는 당연히 구글 애드센스에 이미 가입이 되어 있어야 한다.

그리고 티스토리에 설치하기 위한, 광고단위를 구글 애드센스에서 만들어줘야 한다.

구글 애드센스에 로그인 해보자.

페이지 상단의 좌측을 보면 메뉴목록을 조회할 수 있는 버튼이 있다.

그것을 클릭하면, 다음과 같은 내광고를 설정할 수 있는 "내광고" 메뉴를 찾을 수 있다.

내광고 - 콘텐츠 - 광고단위를 클릭하면, 실제 광고 등록이 가능하다.

애드센스의 광고단위 페이지에는, 다음과 같이 활성화가 되어있는 나의 모든 광고리스트들이 조회가 된다.

티스토리에 다양한 광고를 설치해보면서, 본인에게 잘맞는 광고를 확인해보는 작업도 필요하다.

화면상단, 본문중간, 화면하단, 사이드 등 다양한 이름으로 광고단위를 만들어서, 

어떤 곳에서 수익이 가장 많이 발생하는지 확인해볼 수도 있다.

이제 실제로 새 광고를 추가해보자. 

화면 좌측상단에 보이는 " + 새 광고 단위 " 버튼을 클릭하여, 아래와 같은 내 광고를 새롭게 만들 수 있다.

다양한 크기의 광고를 선택할 수 있으며,

본문중간에 넣을 광고를 선택하려면, 아래에서 확인 가능한 300 X 250 크기가 적당하다.

이름과 광고크기를 정하고, 저장 및 코드생성 버튼을 누른다.

"광고 단위가 성공적으로 만들어졌습니다." 라는 메시지와 함께, 광고 만들기는 완료되었다.

내 광고를 확인 할 수 있는, 광고 단위 페이지에

방금 등록했던 본문중간광고가 등록되어 있음을 확인할 수 있다.

해당 광고를 보면,

광고이름 밑에 코드 가져오기가 있다.

코드 가져오기를 클릭해보면, 위에서 광고가 만들어졌을때 나오는 메시지와 비슷한 화면을 볼 수가 있다.

해당 광고코드를 복사해서, 티스토리에 적용시키는 방법으로 사용하는 것이다.

이제 구글 애드센스에서 할 수 있는 일들은 끝이났다.

다음으로 티스토리에서 해당 광고를 실제로 적용하는 절차만 남았다.

티스토리에서 본문 중간에 애드센스 광고를 삽입하는 방법은, 간단하게 서식을 이용할 수가 있다.

먼저 새로운 글을 작성하는 페이지를 띄운다.

글 제목 입력하는 란의 우측을 보면 서식이라는 선택가능한 항목이 있다.

서식을 선택하고, 글 작성하는 창으로 가기전에 우측을 보면 HTML 이라고 나와있는 부분을 확인 할 수 있다.

이 부분을 체크하고, HTML로 되어있는 광고코드를 입력한다.

여기에 애드센스에 등록해두었던, 두두패밀리 본문중간광고를 입력을 한다.

이제 이 서식을 발행하면 된다. 내가 사용할 수 있는 서식으로 해당 작업이 적용되었다.

이제 마지막 단계로, 만들어 놓은 서식을 글 작성시에 사용하면 된다.

새로운 글을 작성하게 되면, 우측에 글 정보를 관리하는 부분이 있는데,

가장 하단으로 내려가면 서식부분이 있다.

서식을 누르면, 지금껏 사용하고자 등록했었던 '본문중간광고'가 있음을 확인할 수 있다.

글 중간에 넣고 싶은 부분에 커서를 놓고, 해당 서식을 클릭하면 그 곳에 본문 중간광고가 들어가게 된다.

본문의 끝부분이지만, 실제 적용되는 것을 확인시켜주기 위해서, 나는 바로 윗 부분에 본문중간광고를 삽입하였다.

지금까지 등록하려고 했던 광고가 위와 같은 방식으로 삽입되는 것을 확인 할 수 있다.

워드프레스에 애드센스 광고를 설치하는 방법을 알아보자. 

우선 사용 가능한 플러그인이 필요하다.

키워드에 easy plugin adsense 검색하면 플러그인을 찾을 수 있는데

그 중 우측 하단에 보이는 Easy Plugin for AdSense 를 사용할 것이다.

플러그인을 설치하면, 내 플러그인에 다음과 같이 적용이 된다.

간단하게 플러그인 설치만을 통해서 애드센스 광고를 쉽게 적용시킬 수 있다.

'설정' 버튼을 눌러서 상세 정보를 셋팅해보자.

해당 플러그인의 변경 가능한 옵션들을 확인 할 수 있다.

각각의 옵션들을 테스트해보면서, 워드프레스에 어떻게 적용이 되는지 확인하는 과정이 필요하다.

워드프레스의 플러그인에 광고를 등록하는 테스트를 해보기 위해서,

구글 애드센스에 반응형광고를 하나 신규로 만든다.

만들어진 광고의 '코드 가져오기'를 통해서, 해당 광고의 코드를 가져온다.

도입 애드센스 텍스트를 수정해보자.

위에서 가져온 코드를  플러그인 옵션의 빈 창에 입력해준다.

옵션들 하단에 있는 '변경 저장' 버튼으로, 변경 내용들을 적용시킨다.

해당 코드가 잘 적용되었는지 확인을 해보자.

다음과 같은 결과를 확인할 수 있다.

도입 애드센스 텍스트 부분이 적용이 된것으로, 글의 시작부분의 중앙에 광고가 적용된 것을 확인할 수 있다.

같은 방법으로 글의 중간과 끝에도 모두 광고를 적용시킨다.

위에서 사용했던 광고 코드를 그대로 입력하면 된다.

각 옵션들마다 위치와 보기를 설정하는 부분이 있어서 개별적으로 컨트롤 할 수 있다.

티스토리에서 광고수익을 발생시키는 다양한 방법중, 텐핑에 대해서 살펴보자.

이번은 텐핑을 어떻게 티스토리에 적용하고 광고수익을 발생시킬지 하는 것에 대해서 다뤄보려한다.

우선 가장 먼저, 텐핑 홈페이지에서 회원가입을 해야한다.

텐핑 사이트 바로가기 (http://tenping.kr)

텐핑 사이트에 접속하면 회원가입을 한다. 회원가입은 간편하게 휴대전화번호만을 가지고서도 등록이 가능하다.

텐핑에서는 선후배 맺기 제도를 이용해서, 많은 사람들이 참여할 수 있도록 하고,

맺어진 선후배들 간에 많은 혜택을 제공한다.

선배의 활동에 대해, 후배의 활동에 대해, 서로간의 인센티브를 제공해준다.

신규 가입시, 다음을 선배에 등록을 한다

never-stop@naver.com

회원가입이후 로그인을 하면, 텐핑을 티스토리에 등록할 수 있다

회원가입을 완료했으면, 로그인을 하여 다음 등록과정을 따라가자.

좌측에 다음과 같은 항목이 나오는 것을 볼 수 있다.

그 중에 소문박스를 클릭한다

소문박스 퍼가기 페이지가 나오면서,  원하는 소문박스 형태의 선택이 가능하다.

소문박스 형태는 다섯가지 종류가 있다.

해당 페이지 하단에 참고할만한 내용이 적혀있다.

수익성이 가장 높은 동영상 콘텐츠는 '큰 형태'에만 나온다고 하단에 표기가 되어있다.

소문박스 형태를 큰 형태(동영상 콘텐츠 포함)으로 설정하자. 사용 가능한 코드가 부여가 된다.

텐핑에서 할 수 있는 일은 여기까지이다.

이제 티스토리에 해당 코드를 적용하는 부분으로 다시 넘어와야 한다.

티스토리에서는 텐핑 등록이 가능하도록 기본 플러그인을 제공해주고 있다.

텐핑을 티스토리에 적용하기 위해서는 플러그인 설정을 해야한다.

티스토리의 관리페이지를 보면 다음과 같이 플러그인 설정하는 부분을 확인할 수 있다.

플러그인 설정을 클릭해보면, 사용가능한 리스트가 조회가 된다.

그 중에서, 텐핑 모바일용을 선택한다.

아래와 같이 광고코드를 등록할 수 있는 플러그인 창이 뜬다.

광고 위치는 글 하단에 배치가 되는 것으로 수정을 할 수 없다.

플러그인 창 하단에 텐핑 광고 코드를 입력하는 곳이 있는데, 여기에 텐핑 사이트에서 복사할 수 있었던 코드값을 붙여넣으면 된다.

코드값을 붙여넣고 확인버튼을 누르면, 정상적으로 텐핑이 등록된 것을 확인 할 수 있다.

해당 플러그인은 모바일용으로 제공되는 것이다.

PC에서 해당 플러그인 설치를 했다면, 아래와 같이 텐핑 (모바일용) 에 체크박스가 설정된것을 확인할 수 있을 것이다.

PC버전에는 텐핑광고가 적용되지 않는다.

모바일 기기에서 텐핑 광고가 잘 적용되었는지 확인할 수 있다.

내가 작성한 글들의 하단에 텐핑 광고가 붙어있음을 알 수 있다.

이제 사람들이 해당 광고를 클릭하게 되면 수익이 발생한다.

수익 발생은 텐핑 사이트에서 확인 가능하다.