한동안 게임하느라 안했던 블로그를 다시 시작하면서
자작 NAS(XPEnology)로 운영하다보니 아무래도 속도면에서
포털 블로그에 비해 많이 떨어진걸 개선 하고 싶었습니다.
집에 전용선을 깔수도 없고… 그래서 결국엔…AMP를 적용하기로..

1.AMP란?

AMP 즉 Accelerated Mobile Pages의 약자인데
말그대로 가속 모바일페이지? 입니다.
AMP를 적용하는 가장 큰 이유는 로딩시간 단축입니다.

AMP의 작동 원리는 페이지 구성 단순화, 대역폭 최적화, 페이지 캐싱으로 나누어 집니다.
구성 단순화는 자바 스크립트 코드등을 최소화 합니다. 그래서 테마자체의 효과 같은건 포기해야 합니다.
대역폭 최적화는 텍스트를 먼저 불러오고 용량이 큰 이미지등은 나중에 불러 오는 걸 의미합니다.
페이지 캐싱은 AMP의 작동 원리중 가장 핵심이라 할 수 있는데 AMP가 적용된 페이지를 구글에서 캐싱하고 있다가
구독자가 해당 글을 검색하여 클릭하게 되면 사이트를 운영하는 서버가 아니라 구글에서 캐싱한 데이터를 보여주게 됩니다.

모바일에서 구글 검색을 하게 되면 위와 같이 사이트 주소옆에 번개 모양을 보실 수 있는데
그 번개 모양이 있는 페이지를 클릭하게 되면 놀라운 속도로 해당 페이지가 열립니다.

2.플러그인으로 워드프레스에 AMP 적용하기

AMP를 워드프레스에 적용하는 방법은 크게 두가지가 있습니다.
직접 HTML코드를 이용해 적용을 하는 방법과 간편하게 플러그인을 설치하는 방법입니다.
HTML코드를 이용해 적용을 하는 방법은 https://www.ampproject.org/learn/overview/
를 참고하시면 됩니다.

대표적인 워드프레스의 무료 AMP플러그인으로는

AMP for WP플러그인과 Automatic에서 만든 AMP플러그인이 있습니다.

Automatic의 AMP플러그인이 가볍긴하지만 AMP를 적용시에 메뉴가 없네요;;;
그래서 전 AMP for WP플러그인을 사용합니다.
물론 영어이기도 하고 설정이 꽤 많지만 조금 워드프레스를 사용하신 분이라면
설치후 플러그인을 실행하면 어렵지않게 설정하실 수 있도록 안내 됩니다.

AMP for WP은 기본으로 3개의 무료테마와 다운로드해서 사용할 수 있는 무료테마 3개를 제공합니다.
총 6개의 무료테마!

또한 애드센스(AdSense)를 사용하시는 분이라면 손쉽게 광고를 삽입 하실 수도 있습니다.
애드센스 코드를 따로 넣으시려면 기존과를 다른형태의 코드를 넣어야 하는데 어렵진 않지만
조금 번거롭습니다.
하지만 아무래도 무료 기능이라 그런지 AMP for WP로 광고를 넣으면 광고 좌우에 여백이 좀 크네요;;
그래서 전 광고는 기존에 사용하던 AD Inserter 플러그인을 이용합니다.

이외에도 여러가지 옵션이 존재합니다.

어느 정도 설정이 끝나셨으면
자신의 페이지 주소뒤에 /amp 를 입력하면 amp 페이지를 불러옵니다.

적용이 되셨으면 구글 검색에 자신의 글에 번개 보양이 뜨는것만 기다리시면 됩니다.
구글에 검색 되기 까지는 2~3일 정도 걸리며 그뒤로 하나둘씩 적용되기 시작합니다.

초반에는 구글에서 만든 애드센스 플러그인을 사용하였는데.

이제 지원이 중지가 됐네요.

페이지 수준광고를 사용하라며.

그래서 한동안 페이지 수준 광고를 사용했는데

어느순간에는 적당한 위치에 알아서 광고가 표시되다가

얼마전부터 수익이 갑자기 떨어져서 봤더니

데스크탑에서 광고가 잘 나오지 않는 현상이 발생 하였습니다.

그래서 귀찮지만 직접 광고를 달려고

플러그인을 알아보던 중 애드센스 뿐만 아니라 다른 광고도 삽입 할수도 있고 강력한 기능을 가지고 있는

Ad Inserter란 플러그인이 눈에 들어왔습니다.

1. Ad Inserter 설치

Ad Inserter

직접 워드프레스 플러그인 추가 페이지에서 검색하여 설치 하거나

위 링크에 들어가서 설치를 해줍니다.

설치를 했으면 이제 광고 단위를 만들어야겠죠?

애드센스 승인이 되어있으시다면

2.애드센스 광고단위 생성

Adsense.com

으로 들어갑니다

좌측에 내 광고 – 광고 단위 경로를 클릭하시면

우측과 같은 화면이 나오는데 여기서 새 광고 단위를 클릭하세요

위와 같은 광고 선택하는 화면이 나오는데

텍스트 및 디스플레이 광고를 선택합니다.

일치하는 콘텐츠는 다음번 포스팅때 이야기 하겠습니다.

가장위에 이름 부분에는 알아보기 쉽게 적어줍니다.

예를 들어 상단에 들어갈 광고면 ‘상단 광고’ 이렇게요~

그리고 광고크기는 반응형 홈페이지나 블로그 경우에는 자동크기 반응형 하시는게 속편합니다.

그외 광고 유형에서 텍스트 및 디스플레이 광고를 할지 텍스트나 디스플레이 광고 중에 하나만

할지 선택합니다.

텍스트 광고 스타일은 광고 디자인?을 정하는건데 크게 수익하고 관련이 없을 듯 합니다.

그외 맞춤 채널과 대체광고는 일반 사용자에겐 크게 필요 없기에 일단 패스합니다.

다하셨으면 저장 및 코드 생성을 클릭해주세요.

그럼 위와 같은 코드가 나오는데 이걸 전체 선택후 복사해 주세요.

이제 다시 워드프레스로 갑니다.

3.Ad Inserter 설정

워드프레스 관리자 화면에서

설정 – Ad Inserter 로 들어갑니다.

위와 같은 화면이 나오는데 존 유료 버전이라 조금 다를 수 있습니다.

하지만 유료 사용하지 않아도 충분히 대부분 기능을 사용하실수 있습니다.

저는 플러그인이 좋아서 기부 개념으로 구매했습니다. 유료 버전의 기능을 사용할 일은 없네요.

우선 무료의 경우 16개의 광고를 삽입할 수 있습니다.

상단에 숫자1을 클릭후 조금전에 애드센스에 만든 광고 단위를 검은 화면에 붙여 넣기 해주세요.

아래 쪽에 메뉴들을 누르면 위와 같은 화면이 나옵니다.

하나씩 살펴 보겠습니다.

상단 좌측에는 상세옵션 추가 버튼(Misc, Device, List, Manual, Preview)이 있고 우측에는 저장 버튼이 있습니다.

그 아래에는 광고의 위치를 지정 할 수 있는 메뉴가 있는데

우와 같이 그림으로 안나온다면 Hide 부분이 Show로 되어 있을 겁니다.

아이콘 첫번째 줄은 어느 위치에 광고를 둘지 정하는것이고

두번째 줄은 정렬설정 입니다.

무료버전에서는 화면에 따라 따라오는 스티치 광고만 지원이 안됩니다.(2번째줄 뒤에서 4개)

그아쪽에는 어느 위치에 광고를 표시할지 정하는 부분인데

광고를 게시하고 싶은 위치에 체크를 해주세요.

*Preview를 누르시면 광고 모양과 여백등의 상세조정이 가능합니다*

위설정은 Manual, Misc, Devices 순입니다.

Manual 설정

이 광고를 위젯에서 사용할지 여부와 숏코드와 PHP코드등으로 사용할지

여부를 체크할수 있습니다.

위젯의 경우 여기서 체크한다고 위젯에 바로 나오는게 아니라 위젯에서

Ad Inserter 위젯을 선택후 광고를 선택해야 합니다.

Misc 설정

광고를 로그인한 사용자에대한 광고 표시여부와 광고를 몇개 삽입할건지 지정할 수 있으며

광고가 표시되는 페이지나 글, 또는 적당한 광고가 없을때 어떤 태그에 해당하는 광고를 삽입할지 정하실 수 있습니다.

그리고 몇번째 위치에 광고를 삽입 할지도 정할 수 있습니다.

예를들면 광고 위치를 상단이 아닌 Between Posts를 선택시에

2번째 Between Posts에 삽입하고 싶다면

Filter insertions에 2를 입력해 주면 됩니다.

위 스크린 샷은 저의 블로그 카테고리와 홈페이지등에 적용 되어있는 광고의 설정입니다.

Max부분에 1이라고 입력했는데 Between Posts를 선택하면

카테고리에서 글 사이사이 광고가 다들어 가버립니다

그래서 한개만 표시하려고 1을 선택한 것이고

Filter insertions에 2를 한것은 위에서 설명한대로 두번째 위치에 배치한 것입니다.

위치 확인 자신의 홈페이지나 블로그 화면으로 간뒤에

위에 툴바에 보시면 이런 메뉴가 있습니다.

여기서 Show Positions를 클릭하시면

이렇게 위치를 확인 하실 수 있습니다.

Devices 설정

특별한 설명이 필요 없을 듯 합니다.

위와 같이 구독자가 어느 디바이스로 왔을때 광고를 보여 줄지 정할 수 있습니다.

이것을 잘이용하면 모바일과 홈페이지에서 다른위치에 광고를 배치할 수 있습니다.

이 설명을 빼먹을 뻔 했네요.

위치선택에서 After Paragraph나 Before Paragraph를 선택하면

위와 같은 설정이 추가 됩니다.

Paragraph number은 단락 넘버인데

툴바의 Show Positions에서 확인이 가능합니다.

하지만 글마다 단락위치도 다르고 설정하는데 어려움이 있으니 퍼센트로 지정을 해줍니다.

위 처럼 0.7이면 글의 70%정도 내려온 위치에 광고가 표시 됩니다.

0.3이면 30%정도 내려온 위치에 광고가 표시 되겠죠?

그아래 130이라고 쓰여 있는부분은

페이지에 어느정도의 글자가 있을때 광고를 표시할지 정하는 부분 입니다.

위광고는 모바일에서 130개 이상의 글자가 있을때 광고를 표시하도록 설정한 것 입니다.

비워두면 무제한 입니다.

중요한걸 빼먹었네요

그리고 광고는 위치마다 제가각 애드센스에서 광고단위를 만들어서 사용해주세요.
추후에 통계 낼 때 편합니다.

추후에 통계 낼 때 편합니다.

이상 Ad Inserter 설정 방법과 구글 광고 삽입 방법이었습니다.

그래서 송금받을 은행을 알아봤는데
 국민 카드와 함께 사용시에 수수료 혜택을 볼수있네요.

국민은행 외화 수수료 기준입니다.
위 기준보시면 큰 금액의 경우에는 수수료를 면제 받기 힘듭니다.

MVP스타가 되려면..
위 기준에 들어가야하는데…
제일 깔끔한 방법으론 다른 기준다빼고 요구불예금의 3개월 평잔이 1억이 있으면 됩니다.
그럼 KB평점이 10,000점이 되나
일반통장에 1억씩 입금해서 썩히는 사람이 많지 않을겁니다.
하지만 KB국민 플래티늄 카드를 사용하신다면 이야기가 달라집니다.

제가 사용하는 카드입니다.
연회비가 조금쌔긴해도 마일리지 하나는 정말 잘 모이네요

상품정보에
플래티늄 – 고품격 서비스 – KB국민은행 금융수수료 감면/면제 서비스 부분에 보시면
위와같은 내용을 확인하실수 있습니다.
이부분에 대해 국민은행과 상담했는데 위 내용이 맞다고 합니다.
신용카드 연회비가 조금 비싸지만
애드센스로 수익이 많이 나시는 분이라면 국민 플래티늄카드나 그보다 상위카드를
사용하시면 수수료 부분만 하더라도 충분히 혜택을 연회비를 충당하고도 남을 것 같습니다. 

그외 수수료 나가는 부분이 있을지는 모르나
일단 입금을 받아봐야할 것 같습니다.
입금이되면 다시한번 포스팅 하도록 하겠습니다.

귀찮아서 신경안쓰고 있다가 오늘 해보았습니다.

우선 처음으로 광고 게재하시려는 분들은
애드센스에 가입해야겠죠?
https://www.google.co.kr/adsense/
위 주소로 접속해주세요

지금 가입하기

구글 계정이 있으신분은 로그인을 눌러주시고
없으시면 계정만들기로 구글 계정을 하나 만들어주세요~

로그인하면 위와 같은 화면이 나오는데
자신의 웹사이트를 적어주고 한국어를 선택해주세요.
홈페이지가 해외사람들 위주면 그 나라 언어로 해주고
저장하고 계속하기를 누릅니다.

귀찮지만 전부 입력해주세요~

동의안하면 가입 안시켜주니 동의합니다

빨간색 부분의 코드를
자신의 웹사이트나 블로그의 head부분에 넣어주고 체크부분에 체크하시고 완료를 클릭합니다.
요놈이 애드센스 QuickStart를 이용할수있는 코드이자
연결 코드입니다~

최대 3일이 소요된다고는 하는데 길어야 하루정도면 검토 완료되는듯 합니다.

검토가 완료된후 로그인하셔서
메뉴 – 내광고 – 페이지 수준 광고 탭에 들어가시면
위와같은 설정 화면을 보실수 있습니다.
여기서 Quickstart광고가 체크 되어있나 확인해주시고
아래 모바일 친화적 광고부분에는
사용하고싶은 광고 유형을 선택하시면 됩니다.

위 스크린샷처럼 그전처럼 따로 위치를 지정하지 않아도
알아서 랜덤위치에 광고가 게재됩니다.
이걸 뭐라고하는지 모르겠으나
하단에 툭튀어나오는 광고와 화면전환시에 종종
화면을 꽉채우는 전면 광고까지 게재됩니다.

이건 PC에서 접속했으시 화면인데
모바일 보다는 광고가 덜 나오는듯합니다만
알아서 글사이 링크사이에 슬쩍 들어가 있네요.

무엇보다 마음에 드는건 광고를 잘못 게재해여
정책위반에 걸릴일은 없겠네요.
블로그시작한지 얼마안되어 수익이 그닥없지만..
진작에 할걸 그랬습니다.
이리 편한걸..쓸데없이 플러그인이나 설치하고