애드센스 한국 공식 블로그 - Inside AdSense
애드센스 제품 업데이트 소식, 정책 관련 소식 등 유용한 최신 정보를 블로그를 통해 만나보세요.
Go Multi-Screen 4부: 반응형 웹사이트로 전환하여 애드센스 수익이 10배 이상 증가한 Lego7205.com의 사례를 만나보세요!
2013년 11월 18일 월요일
Lego7205.com
은 과거에 출시된 LEGO의 인기 제품에 대한 리뷰를 제공하는 사이트입니다. 동네의 장난감 가게에서 오래된 LEGO 블럭을 발견할 때마다 추억에 잠기곤 하던 카주유키 카키시타(Kazuyuki Kakishita)씨는 소중한 추억을 다른 사람과도 공유하고 싶어 웹사이트를 개설하게 되었습니다.
2013년 8월, 카주유키씨는 변화하는 멀티스크린 환경에 적합한 전략을 고민하던 중 웹사이트를 반응형 웹 디자인(Responsive Web Design)으로 전환했습니다. 카주유키씨와의 아래 인터뷰 내용을 통해 반응형 웹으로 전환한 이유와 방법, 그리고 전환 후의 결과에 대해 읽어보세요.
“모바일과 태블릿 기기로부터 수신되는 트래픽이 50%를 초과하는 것은 단지 시간 문제였습니다. 멀티스크린 전략을 신속하게 수립하는 것이 중요하다고 생각했죠.”
2008년 Lego7205.com을 시작할 때는 데스크탑용 사이트만 있었습니다. 하지만 매년 모바일 및 태블릿으로부터 수신되는 트래픽이 늘고 있다는 것을 깨닫게 되었고 웹사이트를 반응형웹으로 구축하려고 결정하기 직전인 2013년 8월에는 모바일 트래픽이 40%를 넘어서고 있었습니다. 준비할 때가 되었다는 생각이 들었습니다.
“반응형웹은 유지 관리할 부분이 상대적으로 적은 가장 효율적인 솔루션이라고 생각했기 때문에 망설임없이 멀티스크린 전략으로 채택할 수 있었습니다."
일반적으로 각기 다른 해상도의 화면을 지원하기 위해 여러 웹사이트를 관리하려면 해야 할 일이 많습니다. 이런 관점에서 본다면 사이트를 하나만 관리하면 되는 반응형 웹디자인을 채택하는 것은 너무도 당연합니다. 그렇기 때문에 조금도 망설임 없이 채택할 수 있었습니다.
“반응형 웹을 설계할 때는 단순성이 성공의 열쇠입니다."
반응형 웹디자인을 고려하고 있다면 다양한 화면에 표시될 때 레이아웃이 어떻게 달라질지 염두에 두어야 합니다. 처음 사이트 레이아웃을 설계할 때 저는 설계를 변경할 때마다 매번 데스크탑, 스마트폰, 태블릿에서 레이아웃이 어떻게 표시되는지 확인했습니다. 이전의 데스크탑 웹사이트에는 구성 요소가 매우 많았지만 반응형 웹을 위해서는 가능한 한 디자인을 단순하게 유지하는 것이 관건이었습니다.
"시행착오를 통해 저는 다양한 화면 크기를 수용할 수 있는 사이트를 처음부터 다시 구축했습니다."
이전에는 관련 제품 목록을 페이지 상단에 배치하고 그 다음에 이미지를 배치했습니다. 하지만 스마트폰에서 확인해 보니 콘텐츠의 글자가 너무 많았고 이미지를 보려면 한참 스크롤해 내려가야 했습니다. 사용자가 어떤 기기를 사용하든 페이지에 어떤 내용이 있는지 금방 알 수 있도록 시선을 끄는 흥미로운 이미지가 제일 처음 표시되도록 위치를 변경했습니다. 또한 헤더에 표시되는 탐색 영역을 간소화하고, 콘텐츠 다음에 기타 탐색 목록을 배치하여 주요 콘텐츠가 아래로 내려가지 않도록 했습니다.
“반응형으로 웹사이트를 구축하는 데는 일주일 정도가 걸렸습니다.”
사용해오던 서버의 용량은 이미 과부하 상태였기 때문에 더 큰 서버로 전환해야 했습니다. 서버 전환에 이주일 정도 걸렸지만 웹사이트를 반응형 웹으로 구축하는 데는 일주일로 충분했습니다. 웹사이트를 처음부터 설계하기는 했지만 스타일시트는 코드가 단순하고 리뷰가 긍정적인 외부 템플릿을 사용했습니다. 이를 통해 많은 시간을 절약할 수 있었으며 CSS 코딩에 시간을 소모하는 대신 페이지 레이아웃과 사용 환경 개선에 더 많은 시간을 할애할 수 있었습니다. 저는 콘텐츠(데이터)와 템플릿을 별도로 관리하고 있습니다. 템플릿을 만든 후 데이터를 삽입하기만 하면 페이지가 자동으로 만들어집니다. Lego7205.com은 실제로 5~6개의 템플릿 패턴으로 관리됩니다.
반응형 웹사이트를 구축하기 전후인 8월과 9월의 상황을 비교해 보면 이탈률, 페이지뷰, 수익 등이 크게 향상되었다는 것을 알 수 있었습니다. 웹사이트를 반응형으로 구축할 때 애드센스 광고를 제외한 모든 광고를 삭제하기로 결정했습니다. 애드센스가 주소득원이었으므로 광고를 애드센스만으로 간소화했으며,반응형웹을 구축한 것 또한 매출 증대에 기여했습니다. 반응형을 채택한 후 이탈률이 19% 감소하였고 웹사이트 방문 중 페이지 조회수는 22% 증가했습니다. 이전에 비해 사용자의 참여율이 높아졌음을 실감합니다. 또한 애드센스 반응형 광고 코드를 적용한 후 CTR은 62% 증가했고 결과적으로 노출수와 CTR의 증가로 10배의 수익을 올릴 수 있었습니다.
“애드센스 반응형 광고는 구현 방법이 간단했습니다. 다른 애드센스 광고처럼 붙여넣기만 하면 됩니다."
애드센스 반응형 광고를 구현하는 것도 전혀 어렵지 않았습니다. 다른 애드센스 광고처럼 복사하여 붙여넣기만 하면 됩니다. 저는 애드센스팀에서 화면이 가로와 세로로 전환됨에 따라 광고 크기도 자동으로 바뀌도록 반응형 광고를 개선하기를 기대하고 있습니다.
“다른 웹사이트의 멀티스크린 전략에도 역시 반응형 웹을 선택할 계획입니다.”
앞으로 모바일 및 태블릿 기기로부터 접속하는 사용자 수가 증가할 것이라는 점에는 의심할 여지가 없기 때문에 가능한 한 빨리 제가 운영하는 다른 웹사이트를 위한 멀티스크린 전략도 개발해야 합니다. 모바일로부터 수신되는 트래픽이 가장 많은 웹사이트를 시작으로 다른 웹사이트에도 작업을 시작해야 합니다. 이 과정에서 당연히 Lego7205.com의 경우와 마찬가지로 반응형 웹디자인을 채택할 생각입니다.
* LEGO는 LEGO 그룹의 등록 상표입니다.
게시자: 한국 애드센스팀 Kelly
댓글 없음 :
댓글 쓰기
カテゴリー別
10주년 기획
게임용 애드센스
계정 업데이트
고객지원 프로그램
광고 검토
광고 미리보기
광고 심사 센터
광고 입찰 방식
광고 허용 및 차단
구글 플러스
구글신제품
국가 보고서
국제
금요 소셜 소식
기타
동영상
링크 단위
맞춤채널
멀티스크린 전략
모바일
무효클릭
문의하기
박스
블로그
비즈니스 동향
사례연구
새 인터페이스
설문조사
성공 사례
성공사례
소셜 미디어
수신 설정
수입/보고서
실적 보고서
애드센스
애드센스 계정
애드센스 기능
애드센스 성공사례
애드센스 정책
애드센스 행사
애애드센스 기능
연락처 정보
온라인 게임
월드컵
월요 모바일 소식
웹로그 분석
웹마스터 가이드라인
이메일 수신
이벤트 보고서
이벤트 추적
이용약관
이용약관 변경
전자상거래
정책
정책의 달
지급
진실과 오해
최적화
추천사항
콘텐츠 호스팅용 애드센스
크롤링
프로그램 정책
프프로그램 정책
플래시 게임
A/B 테스트
AFG
DFP
dinos
e-commerce
Go Multi-Screen
Google 애드센스
Google plus
Google+
pubtalk
seo
YouTube
YouTube 웹로그 분석
���기타�
過去記事一覧
2015
8월
5월
4월
3월
2월
2014
12월
11월
10월
9월
7월
6월
5월
4월
3월
2월
1월
2013
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2012
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2011
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
Feed
유용한 링크
Get started with AdSense
Sign in to your account
AdSense Help Center
AdSense Help Forum
제품 포럼
에 대한 여러분의 피드백을 주세요.
댓글 없음 :
댓글 쓰기