수학방

반응형 스킨을 사용한 지 벌써 6개월 정도 돼가네요.

반응형 스킨의 가장 큰 장점은 기기에 상관없이 비슷한 블로그 화면을 보여줄 수 있다는 거죠. 부수적으로 구글 웹로그 분석을 모바일에서도 사용할 수 있다는 점도 좋고요.

그 외에도 많은 장점이 있는데, 개인적으로 가장 좋은 건 구글에서 검색 유입이 들어온다는 거예요. 예전에 구글 웹마스터 도구에서 매개변수를 잘못 건드리는 바람에 구글에서 블로그의 모바일 페이지만 검색되고 PC 페이지가 검색되지 않았거든요. 포럼에서 알려준 대로 매개변수 설정을 초기화해도 문제가 해결되지 않아서 포기하고 있었어요.

이유는 모르겠는데, 반응형스킨으로 바꾸고 난 다음부터는 구글에서 검색되는 PC 페이지가 점점 늘어나고 있어요. 반대로 검색 결과에서 모바일 페이지는 점점 없어지고 있고요. 지금은 거의 모든 PC 페이지가 검색돼요.

하지만 아직 해결되지 않은 문제가 있더라고요.

아래는 구글에서 검색한 결과인데요. 첫 번째 링크의 주소가 "http://mathbang.net/m/post/view/id/396"처럼 되어 있어요.

반응형 스킨을 사용하면 모바일 페이지가 필요 없으니 모바일 웹 스킨을 off 하죠. 그랬더니 모바일 페이지 주소인 "m/…/"이 들어가 링크가 정상적으로 작동하지 않아요. 그냥 블로그의 홈으로 이동해버립니다.

"http://mathbang.net/m/396"처럼 매개변수없는 모바일 주소는 정상적으로 해당 페이지로 이동하고요.

반응형 스킨을 처음 사용할 때는 구글 검색결과에서 이런 형태의 주소가 많았었는데 점점 개수가 줄어들어 들고 있어서 그냥 놔두면 언젠가는 전부 다 없어질 수도 있을 거예요.

저와 같은 문제를 겪고 있는 분들도 계실 거예요. 시간이 지나면 자연스럽게 없어지니까 그냥 기다리시면 될 것 같아요.

구글 검색 결과에서도 알아서 없어지고 있어서 별문제는 없어 보이지만 다른 블로그나 홈페이지에서 링크를 걸 때 사용된 게 간혹 있더라고요. 모바일 기기에서 주소를 바로 복사해서 붙여넣은 모양이지요.

이건 구글의 문제라기보다 티스토리의 문제인 것 같아요. 모바일 스킨을 off할 수 있는 기능을 만들 때 모바일 주소로 된 페이지의 이동을 제어했어야 하는데, 티스토리에서 미쳐 신경 쓰지 못한듯 합니다. 빨리 수정되었으면 좋겠네요.

함께 보면 좋은 글

티스토리 공지 주소 오류, 버그
티스토리 비공개 글 찾는 방법, 작성중인 글
티스토리 이웃 링크 추가 버튼 만들기
본문 검색창 설치로 블로그 페이지뷰 늘리기

보통 원하는 사이트에 접속할 때는 즐겨찾기를 이용하게 되는데요. 브라우저나 앱을 먼저 실행시킨 후에 몇 번의 클릭을 해서 접속해야 하죠.

보통 앱을 설치하게 되면 홈 화면에 바로 가기 아이콘이 생기는데 이처럼 자주 가는 사이트나 웹페이지의 바로 가기를 만들어 사용하면 훨씬 더 쉽고 빠르게 해당 사이트에 접속할 수 있어요. PC에서 자주 가는 사이트는 홈에 바로 가기를 만들기도 하잖아요. 그거랑 같은 거죠.

블로그 바로 가기 앱 만드는 방법이 블로그 운영자들에게 도움이 되는 방법이라면 이 방법은 블로그를 사용하는 분들에게 도움이 되는 방법이에요. 방법은 어렵지 않으니까 금방 따라할 수 있어요.

블로그 바로 가기 홈 화면에 추가

먼저 휴대전화에서 브라우저나 네이버, 다음 같은 앱을 실행하세요. 홈화면에 추가할 사이트 또는 페이지에 접속하세요. 아래 그림은 수학방에서 중3 수학 목차 페이지입니다.

그림의 제일 오른쪽 아래에 보면 "…"이 있어요. 사용하는 브라우저나 앱에 따라 오른쪽 아래가 아니라 오른쪽 위에 있기도 하고 위치는 다를 수 있어요.

"…"을 누르면 메뉴가 나오는데 여기서 "홈 화면 추가"를 선택하세요.

"홈 화면 추가"를 누르면 바로 가기를 만들 수 있는 창이 열려요. 여기에 사용할 이름을 적고 추가를 누르세요.

위 과정을 마치면 홈 화면에 아래 그림처럼 바로 가기 아이콘이 표시된 걸 볼 수 있어요.

이제 홈 화면에서 "중3 수학 목차" 아이콘을 선택하면 지정했던 중3 수학 목차 페이지가 열리게 되는 거죠.

특정 사이트 가려고 앱 실행시키고 북마크 창 열어서 선택하고 하는 과정을 단 한 번에 끝낼 수 있는 좋은 방법이에요.

함께 보면 좋은 글

블로그 바로가기 앱 만드는 방법

지난주에 스킨을 반응형 스킨으로 바꾸면서 가장 기대했던 부분은 구글 웹로그 분석과 네이버 애널리틱스 통계를 모바일에서도 이용할 수 있다는 거였어요. 그동안에 모바일 웹에서는 통계를 사용할 수 없어서 답답한 게 있었거든요. 그냥 애드센스의 모바일 노출 수를 보고 대충 예상하는 정도였어요.

반응형 스킨에서는 이런 통계 도구를 이용할 수 있게 된 기념으로 통계 분석을 한 번 해봤어요. 이전에 예상했던 내용과 크게 다르지 않지만 조금 더 세부적으로 통계를 낼 수도 있고 몰랐던 사실까지 몇 가지가 있어요. 그리고 이런 내용을 바탕으로 스킨의 일부 구조를 바꿀 필요가 있다는 것도 깨달았고요.

잘 모르는 상태에서 예상만으로 운영하는 것과 정확한 통계를 바탕으로 해서 콘텐츠의 구조, 상태를 수정하는 건 차이가 있네요.

모바일 유입, 수입 분석

일주일 동안 유입 경로를 봤는데, 모바일이 70%, PC가 30% 정도 되네요. 애드센스의 노출 수로 예상했을 때는 75 : 25 정도일 거라고 생각했었거든요. 별 차이가 없긴 하지만 그래도 모바일의 비중이 엄청나게 높네요. 모바일 환경에 대응하기 위해서(?) 반응형 스킨으로 바꾸길 잘했다는 생각이 들어요.

위는 네이버 애널리틱스, 아래는 구글 웹분석로그의 통계입니다.

운영체제별 통계입니다.

네이버 애널리틱스는 PC와 모바일 기기의 운영체제를 한꺼번에 나타내고 있고, 구글 웹로그 분석은 모바일 운영체제만 따로 표시한 겁니다. 안드로이드가 절대다수네요.

구글 웹로그 분석에서는 기기별 통계도 확인할 수 있어요. 아이폰은 버전에 상관없이 하나로 보여주는데 갤럭시는 버전뿐 아니라 통신사까지도 구분해서 보여주는군요.

유입은 모바일과 데스크톱이 70 : 30이지만 수입은 반대로 30 : 70 정도 돼요. 모바일에서의 클릭률은 별로 높지 않고 단가도 PC보다 많이 낮으니까요.

모바일 수입만 놓고 보면 유입수에 대비해서 아이폰에서의 수입이 많았습니다. RPM이 웬만한 데스크톱 광고만큼의 수입이죠. 아이폰이 화면이 작아서 광고가 차지하는 비중이 상대적으로 더 높아 클릭이 많이 발생하는 게 아닌가 싶어요.

태블릿의 RPM이 데스크톱보다 더 높게 나오는 것도 같은 이유일 거예요. 태블릿이 화면은 더 작은데 광고는 데스크톱과 같은 광고나 나오니까 화면에서 광고가 차지하는 영역이 더 넓어지고 더 많은 관심을 끌게 되지요.

반응형 스킨으로 바꾼 후에 이렇게 모바일과 태블릿에서의 통계를 확인할 수 있고 또 PC의 통계와 비교하는 재미가 쏠쏠하네요. 유입이 많은 기기에 맞게 콘텐츠와 광고의 배치를 조금 더 신경 써야겠다는 생각도 들고요. 그리고 그냥 대충 예상만 했던 모바일의 유입 정도를 직접 확인했다는 것도 큰 수확이고요.

쓰면 쓸수록 반응형 스킨으로 바꾸길 잘했다는 생각이 들어요.

함께 보면 좋은 글

반응형 스킨 Tistory skeleton 적용 후기.
애드센스 A/B테스트을 쉽게 - 실험 베타 서비스
애드센스 수입 향상 팁 - 텍스트 광고 편
애드센스 최적화 배치 방법, 히트맵(headtmap)

어제 애드센스 320x100 광고 테스트 중이라는 글에서 새로 나온 320x100 광고를 테스트 한다고 했었어요. 그런데 이제 이 테스트를 중단해야 할 것 같습니다. 애드센스 정책 위반의 소지가 있어서요.

모바일 페이지를 수정하거나 광고를 바꿀 때 모바일 페이지 보기, 기기별로 모바일 페이지 확인하는 방법에서 소개한 트로이(http://troy.labs.daum.net)에서 확인을 하는데요. 보통은 그냥 제일 위에 있는 갤럭시S4화면에서만 확인했거든요.

그런데 오늘 다른 기기에서 어떻게 보이는지 확인하다가 한 가지를 발견했어요.

아래는 320x100 광고를 넣은 걸 갤럭시S4로 본 화면이에요. 여기는 별 문제가 없어보이죠.

그런데 문제는 아이폰이에요.

아래는 아이폰4에서 본 화면인데요. 본문이 전혀 보이지 않고 광고만 보이네요. 아이폰이 다른 스마트폰에 비해서 화면이 작아서 화면에 보여지는 콘텐츠의 양이 너무 적어요. 스크롤하지 않은 페이지에서 본문 내용이 충분히 보이지 않으면 애드센스 정책 위반이잖아요. 그래서 320x100을 사용하면 안 될 것 같아요.

근데 320x50 광고를 넣은 페이지를 아이폰4에서 볼 때 본문이 한 줄밖에 보이지 않는군요. 이것도 정책위반이 될 수도 있겠지만 애드센스 측에서도 티스토리의 애드센스 모바일 플러그인에 320x50 광고 단위를 사용하라고 권하고 있으니 이건 문제삼지 않을 것 같아요.

새로운 광고 단위가 나오고 수입도 괜찮을 것 같아서 실험을 하고 있었는데, 더 이상 실험을 할 수 없을 것 같아서 아쉽네요.

함께 보면 좋은 글

애드센스 A/B테스트을 쉽게 - 실험 베타 서비스
애드센스 수입 향상 팁 - 텍스트 광고 편
애드센스 필수 가이드북
애드센스 최적화 배치 방법, 히트맵(headtmap)
애드센스 타겟팅 - 문맥 vs 관심기반 vs 게재위치

애드센스에 새로운 광고 단위가 나왔어요. 320x100으로 모바일에 사용하면 딱 좋은 크기죠. 320x50은 너무 작아서 광고 클릭이 거의 없어서 조금 더 큰 광고가 나왔으면 하는 이용자들의 바람이 있었잖아요.

새로 나온 320x100 광고를 시험 삼아 사용해보고 있습니다.

티스토리의 애드센스 플러그인에서는 320x50만 사용할 수 있어서 플러그인이 아니라 본문에 직접 삽입하는 방식으로 테스트 중이에요. 모든 글에 다 넣지는 못하고 100개 정도 넣어봤습니다. 그리고 상단에 광고 두 개가 나오는 건 애드센스 정책위반이라서 애드센스 플러그인은 해제해놓았습니다.

단가는 두 광고가 같은데, 클릭률이 320x100이 320x50보다 3배 이상 높아요. 그에 따라 RPM도 3배 정도 올랐으니까 당연히 수익도 많이 나네요.

블로그 글이 500개 정도 되는데, 500개에서 노출되던 320x50의 수입과 수정한 100개의 글에서 노출되는 320x100의 수입이 거의 같아요.

일단 수입적인 측면에서는 320x100이 더 나은데 이게 티스토리의 정책에 위반되는 게 아닌지 확실하지 않아서 나머지 글들에 대한 수정은 보류해야겠네요.

애드센스 320x100 광고 테스트 중

티스토리의 애드센스 플러그인을 사용한 모습입니다. 320x50입니다. 글자가 너무 작아서 잘 보이지 않네요.

아래는 본문에 직접 넣은 320x100이고요. 글자 크기가 훨씬 커져서 눈에 잘 들어오네요. 그리고 광고의 높이는 100인데, 안의 문구는 100이 안 돼서 광고 하단에 여백이 좀 많이 생기네요.

애드센스 플러그인에 320x50을 넣고, 본문에 320x100을 넣은 모습입니다. 애드센스 정책위반이라 이렇게 사용하면 안 되는데 스크린샷 찍으려고 한 번 해봤어요.

광고의 위치도 제목 위에서 제목 아래로 바뀌었기 때문에 RPM이 늘어난 게 광고 크기 때문이라고만 얘기할 수는 없어요. 하지만 광고의 크기가 늘어난 게 확실히 영향이 있기는 있겠죠.

새 광고 단위가 나온 만큼 티스토리에서 애드센스 플러그인의 상단 광고에 320x100도 사용할 수 있게 바꿔줬으면 좋겠네요. 계속해서 고객센터로 문의하자고요. ㅎㅎ

함께 보면 좋은 글

애드센스 A/B 테스트을 쉽게 - 실험 베타 서비스
애드센스 수입 향상 팁 - 텍스트 광고 편
애드센스 필수 가이드북
애드센스 최적화 배치 방법, 히트맵(headtmap)
애드센스를 본문 상단 오른쪽에 넣기
애드센스 수익 향상 팁 - A/B 테스트
애드센스 최적화 배치 도움되는 곳

스마트폰과 태블릿이 많이 보급되어 블로그에 모바일 유입이 엄청나게 늘었어요. 제 블로그만 하더라도 이미 PC 접속의 몇 배가 될 정도입니다.

모바일 페이지에서 블로그가 어떻게 나오는지 확인해야할 필요가 있는데, 방법이 마땅치 않았습니다. 모바일 페이지를 확인하려면 내가 가지고 있는 스마트폰을 통해서 확인하면 좋은데, 수없이 많은 기기 중 한 기기로만 확인할 수 있어 여러가지 제약이 많았죠.

이 글에서는 이런 제약없이 다양한 제조사의 다양한 기기로 모바일 페이지를 볼 수 있는 방법을 소개합니다.

모바일 페이지 보기

보통 블로그나 웹페이지의 모바일 페이지를 보려면 user-agent를 바꿔서 보는 방법을 이용하는데요. 이런 방법은 파이어폭스나 크롬의 플러그인으로 구현되는 경우가 많아요. 게다가 user-agent를 바꾸는 작업은 인터넷 익스플로어에서는 정말 귀찮은 방법이죠.

하지만 이 글에서 소개할 방법은 별도의 프로그램이나 플러그인 필요없이 간단히 주소만 입력하는 것만으로 모바일페이지를 보는 방법입니다.

다음 실험실에서 진행 중인 트로이(Troy)라는 실험인데요.

http://troy.labs.daum.net/

위 링크를 클릭하고 접속해서 보고싶은 모바일 페이지의 주소만 입력하면 끝입니다.

트로이(Troy)의 로고와 설명입니다.

Troy는 간편하게 주요 모바일 단말기 기본 브라우저의 실제 크기 화면을 통해 모바일 웹 페이지의 인터페이스를 검증하는데 도움을 주는 개발 도구입니다.

누구나 빠르게 모바일 웹 페이지를 한 곳에서 테스트해 볼 수 있는 장점이 있습니다. 화면 확대/축소 기능 및 맞춤형 크기 변경 기능 또한 제공합니다.

여기에 표시되는 화면 크기는 모바일 웹 개발 시 흔히 사용되는 medium-dpi 기준의 브라우저 크기로서, 기기 또는 운영체제별 특성,버그는 실제 기기를 통해 확인하셔야 합니다.

앞으로 Troy는 새로운 단말기 추가 및 User-Agent 변경 기능 등도 제공할 예정입니다. 여러분의 사용 소감 및 개선 아이디어를 부탁 드립니다.

단순히 모바일 페이지만 보여주는 것이 아니라 제조사별, 기종별로 볼 수 있어요. 같은 기종이라도 해상도가 다른데, 이 곳에서는 한꺼번에 모든 기기에서 보여지는 모바일 화면을 볼 수 있어에 훨씬 유용합니다.

국내에서 가장 많이 이용하는 삼성, 애플, LG, 팬텍의 스마프폰과 태블릿PC를 지원하고 해당 기종을 선택하면 거기에 맞게 모바일 페이지를 표시해 줍니다.

삼성: 갤럭시 S, 갤럭시 S2, 갤럭시 S3, 갤럭시 S4, 갤럭시 노트, 갤럭시 노트 2, 갤럭시 넥서스, 갤럭시 탭
애플: 아이폰 3GS, 아이폰 4, 아이폰 5, 아이패드
LG: 옵티머스 G, 옵티머스 G Pro, 옵티머스 뷰 2, 옵티머스 One
팬텍: 베가 No.6, 베가 R3
PC: 1024 x 768, 1366 x 768

함께 보면 좋은 글

애드센스 CPE? 확장형 광고
웹접근성 검사, 웹접근성 평가 도구 N-WAX
애드센스 타겟팅 - 문맥 vs 관심기반 vs 게재위치
블로그 속도 측정 - Google PageSpeed Insights
애드센스를 본문 상단 오른쪽에 넣기
애드센스 수익 향상 팁 - A/B 테스트

애드센스 모바일용 플러그인이 발표된지 일주일이 지났습니다.

제 블로그는 노출의 70% 가 모바일에서 노출이 됩니다. 많을 때는 80%까지 노출이 되기도 하고요. 따라서 모바일 광고를 넣어야하는 입장에서 구글 애드센스 모바일용 플러그인은 참 반가운 플러그인이었습니다.

현재 본문 하단에 있는 광고는 PC와 모바일에 양쪽에서 모두 보이도록 하고 있기 때문에 본문 상단에만 320x50 광고를 넣었지요.

애드센스 모바일용 플러그인사용후기

320x50 광고를 상단에 넣으면서 본문 하단 광고의 모바일 수익만큼 나오기를 기대했는데, 기대 수준에 훨씬 못 미치네요.

아래는 일주일 동안의 320x50 수입입니다. $1.54 달러밖에 안돼요. 애드센스 광고 단위 중 노출 수는 가장 많지만 수익은 다른 광고 4 ~ 5번 클릭한 것밖에 안되는군요. 특히 처음에 기대했던 본문 하단 광고의 모바일 수익의 1/7밖에 안되는 수치입니다.

클릭율도 단가도 rpm도 모두 소수 둘째 자리에 머물러 있어요.

의외인 것도 있어요. 노출 수가 1000번을 겨우 넘겨 통계로 말하기는 힘들지만, 데스크톱에서의 320x50 광고의 RPM이 모바일에서의 RPM보다 5배 정도 높네요.

원래 애드센스는 광고 단위를 넣은 초기에는 수입이 별로 많지 않습니다. 광고가 꾸준히 노출되면 될수록 수익이 늘어나더라고요. 앞으로 한 달이상은 지켜봐야겠지만 그 이후에도 수익이 저 정도밖에 안된다면 굳이 사용할 필요는 없다고 생각이 되는군요.

함께 보면 좋은 글

애드센스 광고 유형 한 번에 수정하기 - 텍스트/이미지광고
[블로그/애드센스] - 애드센스 스코어카드란
[블로그/애드센스] - 본문 왼쪽에 세로 애드센스 광고 넣기
[블로그/애드센스] - 모바일페이지에 애드센스 광고 넣을 때 주의할 점
[블로그/애드센스] - 애드센스 타겟팅 - 문맥 vs 관심기반 vs 게재위치
[블로그/애드센스] - 애드센스 크기가 작은 광고가 나올 때
[블로그/애드센스] - 애드센스 광고 게재위치 정책 이해하기
[블로그/애드센스] - 애드센스 최적화 배치 도움되는 곳
블로그/애드센스] - 애드센스 수익 계산 - 환율 적용하는 방법
[블로그/애드센스] - 애드센스를 본문 상단 오른쪽에 넣기
[블로그/애드센스] - 애드센스 수익 향상 팁 - A/B 테스트

모바일 트래픽이 증가하면서 모바일 애드센스에 대한 관심이 높아졌죠? 모바일 트래픽을 조금이라도 이롭게 하기 위해서 모바일 페이지에도 애드센스를 넣는 추세입니다.

특히 모바일 페이지에는 가독성을 해치지 않고, 무효클릭도 예방할 수 있는 320x50광고를 많이 사용하죠. 그런데 이 광고는 PC에서는 효율이 매우 떨어져요. 그래서 320x50 광고를 모바일에서는 보이고, PC에서는 보이지않게 하는 다양한 방법이 알려져 있어요.

하지만 이런 방법들을 사용할 때 주의할 점이 있어서 알려드려요.

애드센스 모바일 광고 넣을 때 주의할 점

티스토리의 모바일 페이지는 스킨 수정이나 css를 사용할 수 없어서 모바일에서 보이는 광고는 본문에 직접 광고 코드를 넣어야하는 불편함이 있어요. 그런데 본문에 직접 광고를 넣으면 이 광고는 PC에서도 보이고 모바일에서도 보이게 돼요.

그래서 애드센스가 모바일에서는 보이고 PC에서는 보이지 않는 여러가지 방법을 사용합니다. 그 중에 html과 css를 이용한 방법이 있어요. 그 방법은 아래와 같아요.

관리자 - 스킨 편집 - style.css에 아래 내용을 넣어요.

.mobile {display: none}

그런 다음 글을 쓸 때마다 본문에 애드센스 광고 코드를 매 본문에 삽입해 줍니다. 물론 html 모드에서요.

<dis clsass="mobile">
애드센스 광고 코드
</div>

이렇게 하면 애드센스 광고는 모바일에서는 표시가 되지만 PC에서는 표시가 되지 않아요. 적용도 잘 되면서 가장 쉬운 방법이에요.

그런데 이 방법에는 문제가 있어요. 바로 애드센스에서 하지 말라는 방법이거든요. 애드센스의 광고 코드를 수정할 수 있는 몇 가지 예시가 있는데, 위 사항은 거기에 해당하지 않아요.

애드센스 도움말 - 애드센스 광코 코드 수정을 보면 허용되지 않는 광고 코드가 나와있어요. 그 중 첫번째가 바로 광고를 숨기는 건데, 그 예시로 css의 display:none이 나와있어요. 

빼도 박도 못하고 아주 정확하게 나와있죠?

그래서 위에서 소개한 방법은 사용하시면 안돼요. 모바일과 PC에서 모두 보이는 애드센스를 사용하거나 반응형 디자인에 있는 소스를 변형해서 사용하시는 게 가장 좋습니다.

함께 보면 좋은 글

애드센스 크롤러 오류 원인과 해결 방법 - 스코어카드
애드센스 타겟팅 - 문맥 vs 관심기반 vs 게재위치
애드센스 크기가 작은 광고가 나올 때
애드센스 광고 게재위치 정책 이해하기
애드센스 최적화 배치 도움되는 곳
애드센스 수익 향상 팁 - A/B 테스트
AdSense 정책의 전반적인 이해 - 행아웃 온에어 세션 요약
애드센스를 본문 상단 오른쪽에 넣기