반응형 웹 디자인/ 애드센스 반응형 광고 단위 사용방법 링크

1. 반응형 웹사이트 디자인이란,
스마트폰, 태블릿, 컴퓨터 모니터 등의 다양한 화면 해상도와 가로세로비, 그리고 마우스와 터치 인터페이스를 고려해 그때그때 가장 알맞은 레이아웃을 보여줄 수 있도록 html코딩하는 방법을 말한다. 이렇게 만든 웹페이지는 일만 컴퓨터 화면에서도 웹브라우저 창모양을 바꾸면 레이아웃이 달라지기도 한다. 

반응형 디자인으로 웹페이지를 꾸미면, 신기하면서도 "얘들 사용자를 배려하는구나"하는 인상을 주기 좋다. 장애인을 위해 접근성을 개선한 웹사이트 디자인이 반응형보다 더 중요하지만, 어쨌든 가장 먼저 눈에 들어오는 것은 반응형이니까.

웹페이지 하나로 여러 해상도, 기계에 맞춰준다는 컨셉에서 알 수 있듯, 잘 되면 멋지지만 코딩이 복잡하고 전체적으로 웹페이지가 무거워지며^[각주:1], 잘 만들어도 무난하긴 하지만 각 단말기에 최적화한 페이지가 되기는 힘들다는 단점이 있다.  그래서 아예, 웹브라우저가 보내 주는 단말기와 화면 정보를 읽고 그 단말기에 최적화된 웹페이지 링크를 돌려주어 리로드하도록 하기도 한다.

Google Developers 사이트 웹 기본 사항(Web Fundamentals)

https://developers.google.com/web/fundamentals/

구글 웹마스터 블로그: 반응형 웹 디자인(Responsive design – harnessing the power of media queries)
https://webmasters.googleblog.com/2012/04/responsive-design-harnessing-power-of.html

2. 광고는 또 달라서,
화면보다 너무 작은 광고가 뜨지 않도록 하고, 화면을 가득 채워 혐오를 일으키지 않도록 하는 데 이용하기도 한다.
반응형 광고 단위 정보 https://support.google.com/adsense/answer/3213689?hl=ko

그리고 애드센스 항목. 반응형 광고 코드 수정 방법
https://support.google.com/adsense/answer/6307124

티스토리의 플러그인 항목에 반응형 광고코드를 넣는 물건이 추가된 지 좀 되었다. 이제는 모바일 광고코드, 일반 광고코드까지. 티스토리는 네이버 블로그와 이글루스에 비해 매우 일찍 애드센스같은 외부 광고코드를 관용해주었고 이후 공식 허용해 플러그인을 지원해주었다. 그것이 티스토리 컨텐츠가 지금 정도로 풍부해진 이유 중 하나라고 한다. 사실 개인 블로그에 그런 거 넣어 봐야 얼마 나오지 않지만, 재미는 있고 연습이 된다.

1. 여러 환경을 고려해 만든다는 것은, 자칫 여러 웹페이지를 하나에 뭉뚱그린 것처럼 코드가 늘어날 수도 있다. [본문으로]