물론, QR Code가 URL 정보만 담을 수 있는 것은 아닙니다. 연락처, E-mail 주소, 전화번호, 위치정보, 일반 문자열 등 매우 다양한 정보를 담을 수 있기 때문에 스마트폰에서 QR Code의 주요한 목적은 한번의 스캔으로 간편하고 빠르게 정보를 가져오는 것입니다.
그래서, 비록 Blogger가 아직 공식적인 모바일용 템플릿을 지원하고 있지는 않지만(요즘 스마트폰들 Full-Browsing 잘 지원하니까 괜찮아요. ㅡㅡ^), QR Code만이라도 달아보고자 이리저리 검색을 해보고 다녔습니다.
처음에 goo.gl의 단축 URL에 '.qr'만 붙이면 QR Code가 나온다는 정보를 입수하고 그것을 어떻게 활용할 방법이 없을까 고민하면서 이리저리 테스트했는데, 생각보다 쉽지 않더군요. goo.gl에서 생성된 QR Code URL을 JSON 형식으로 돌려주는 Google App Engine 용 애플리케이션을 만들고, 다시 그것을 Javascript를 활용해 동적으로 페이지에 IMG 태그 형태로 삽입하는 그런 것... 이 모든 것이 다 부질 없는 짓이었습니다. 조금 더 검색해보니 더 확실하고 더 간단한 방법이 있더군요.
그것은 바로 Google의 Chart API를 사용해서 QR Code 이미지를 얻는 방법입니다. 이 방법은 Blogger뿐만 아니라 다른 블로그, 또는 일반 웹사이트까지 다양하게 적용할 수 있습니다. 먼저 아래 사이트를 방문해서 내용을 한번 읽어본 다음 나머지 글을 보면 더 이해가 쉽습니다.
LINK: How To Add QR Code In Blogger Or BlogSpot?
위 사이트에서 알려주는 방법은 Google의 Chart API를 사용해서 고정된 URL에 대한 QR Code 이미지를 받는 것인데, 조금만 응용하면 매 블로그 글마다 고유한 QR Code를 붙일 수 있습니다. QR Code를 삽입하고 싶은 적절한 위치에다 아래 HTML+Javascript 코드를 붙여주기만 하면 됩니다. 경우에 따라서 location.href 부분을 다른 것으로 대체해야 할 수도 있지만, 대부분의 경우 그냥 써먹을 수 있습니다. QR Code 이미지의 크기는 chs=150x150 부분을 수정하면 조정할 수 있습니다. (가로x세로)
Blogger에서는 HTML/Javascript 가젯을 하나 추가하고 그 내용으로 아래 코드를 입력하면 잘 동작합니다.
<div id="QRCodeDiv"></div> <script type="text/javascript"> var eurl = encodeURIComponent(location.href); document.getElementById("QRCodeDiv").innerHTML = "<img src=\"http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=" + eurl + "\" alt=\"QR Code\"/>"; </script>이제 QR Code 달아보세요.
