근래에 스마트폰에 대한 관심이 증가하면서 홈페이지에 한 귀퉁이에
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 달아보세요.