레이블이 바코드인 게시물을 표시합니다. 모든 게시물 표시
레이블이 바코드인 게시물을 표시합니다. 모든 게시물 표시

2010년 7월 14일 수요일

블로그에 QR Code 달기

근래에 스마트폰에 대한 관심이 증가하면서 홈페이지에 한 귀퉁이에 QR Code가 달려 있는 것을 심심찮게 볼 수 있는데, Android Phone이나 iPhone 같은 스마트폰에는 QR Code Scanner 애플리케이션이 기본으로 갖추어져 있어서 이 QR Code를 읽기만 하면 어렵게 손으로 입력할 필요 없이 자동으로 해당 URL로 이동할 수 있게 됩니다.

물론, 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 달아보세요.