Google Chart API 이용하여 QR코드 생성하기

어쩌다보니 QR코드와 인연이 많다.

QR코드 관련한 글을 쓰려고 과연 어디에 쓸모가 있을까 생각해보니 나 혼자 처음 구축한 프로젝트도 QR코드와 연계되어 있던 기억이 난다.

물론 그 때는 QR코드는 이미 만들어져있었고 이를 통해 연결되는 모바일 웹페이지를 구축하는 형태였고

지금은 QR코드 자체를 생성하는 API에 대한 소개니까 좀 다른가..

 

 

QR코드라 하면 주로 특정 웹페이지에 접속하는 행위를 간단하게 제공하는 방식으로 많이들 사용한다.

단순히 도메인에 연결시키거나 App Store에 연결해서 APP 다운로드 링크로 연결하는 형태를 많이 봤고, 나의 경우는 특정 URL로 연결시켜서 원하는 파라미터들을 전달받아서 기능을 수행하게 하고 있으며 이러한 이용방식은 구현하기 나름이다.

 

그럼 Google Chart API 이용하여 QR코드 만드는 법을 알아보자.

 

 

Google Chart API 이용하여 QR코드 생성하기

 

 

 

API를 이용하여 만드는 거면 당연지사 API를 보면 만들기 쉽다.

 

https://developers.google.com/chart/infographics/docs/qr_codes

 

Google Chart에서 제공하는 API 화면이다.

아.. 그리고 이제 현재 이 API는 사용이 추전되지 않는다고 안내되고 있다. Google Chart에서 지속적인 개선작업 등의 유지보수 지원이 안되는 듯 하니 신경쓰이면 다른 QR코드 생성방식을 확인해보시길.

개요 및 사용용도

 

QR코드는 2차원 바코드 형태로, 하이퍼링크 연결 등의 용도로 많이 사용된다.

최대 4,296자의 영문과 숫자를 저장할 수 있으며, 저장된 정보로는 URL이나 연락처 정보, 원한다면 그 이외의 다양한 내용도 포함시킬 수 있다. QR코드는 전용 판독기를 통해서도 읽어들일 수 있지만 대부분의 휴대전화에서 인식할 수 있다.

 

구문

 

https://chart.googleapis.com/chart?

위의 Root URL을 기반으로 URL Query 파라미터를 추가하여 원하는 형태의 QR코드를 생성할 수 있다.

파라미터 (Parameter)	필수/선택 여부	설명
cht=qr	필수	QR 코드임을 정의함
chs=<width>x<height>	필수	QR 코드로 표현될 이미지 사이즈 정의 (너비 * 높이)
chl=<data>	필수	인코딩 할 데이터. 데이터는 숫자 (0-9), 영숫자, 2진 데이터 또는 한자일 수 있습니다. QR 코드 내에서 데이터 유형을 혼합 할 수 없고, 데이터는 URL 인코딩 된 UTF-8이어야 함. URL의 최대 길이는 2Kb이므로 이 데이터를 인코딩하려면 POST를 사용하여 데이터를 보내야합니다.
choe=<output_encoding>	선택	QR 코드를 통해 표현될 데이터의 인코딩 값을 정의  아래의 형식을 지원하고 있음.  - UTF-8 (기본값)  - Shift_JIS  - ISO-8859-1
chld=<error_correction_level>|<margin>	선택	잘 안쓰는 옵션인 듯 하지만... - error_correction_level  QR코드가 잘못 읽히거나 가려지는 등의 이유로 인해 손실된 데이터를 복구할 수 있는 레벨을 정의하고 있다. L < M < Q < H 순으로 데이터 복구율은 높아지지만 저장할 수 있는 데이터 용량은 줄어든다.   - margin QR 코드 생성 시 실제적으로 가운데 검정색으로 생성되는 코드를 감싸고 있는 흰색 테두리 영역을 얼마나 줄 것인지를 정의한다. 말 그대로 margin값이다. 기본값은 4.

위의 API에서 필수값만 대부분 사용하고 있고, 이를 이용해서 예시 URL을 하나 만들어보자면

 

https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=http://ojava.tistory.com

 

 

 

 

위와 같이 200 * 200 사이즈의 QR코드가 생성되고, 해당 QR코드는 내 블로그에 접속하도록 되어있다.

궁금하신 분들은 해당 URL 연결하시고 핸드폰으로 QR코드 스캔 한 번 해보셔도 좋을 듯 ㅎ_ㅎ

 

 

 

 

만약 이렇게 단순히 URL을 넣어서 연결시킬 의도가 아니라 특정한 데이터를 받아와서 작업을 처리하고 싶은 경우에는

chl 값에 넣고자하는 내용을 정리해서 URL Encode 한 뒤에 QR코드를 생성해보자.

 

 

블로그 포스팅 정보에 대해 담고 있는 QR코드를 만든다는 가정하에 아래와 같은 내용을 입력했다.

 

postname=QR코드만들기&postcode=111&postdate=2017-06-12&posttime=18:30

 

 

이 내용을 그대로 넣으면... 혹시 되면 어쩌지 싶어서 해봤는데 인식이 잘 안된다.

API가 하라는대로 URL Encode해서 파라미터로 넘겨보도록 하자.

 

https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=postname%3DQR%EC%BD%94%EB%93%9C%EB%A7%8C%EB%93%A4%EA%B8%B0%26postcode%3D111%26postdate%3D2017-06-12%26posttime%3D18%3A30

 

 

 

 

 

이렇게 완성된 QR코드를 인식하면, 원래의 데이터로 URL Decode되어서 보여진다.

key = value 형태로 값을 구성했으니 데이터를 받아와서 원하는대로 가공하시면 되겠다. 쓴다면 PC나 태블릿 등에서 해당 데이터를 띄워주고 모바일 기기에서 해당 데이터를 가공해서 쓰는 방식을 택해야 할 듯 하다.

 

 

 

하루면 정리 끝! 할 줄 알았는데 조금씩 쓰다보니 생각보다 오래걸렸다.

그래도 QR코드 예시도 넣고 뿌_듯

 

 

잔인한 5월도 가고 이제 6월도 중순이다.
시간이 참 안간다고 생각했는데 돌아보니 훌쩍 지나왔다. 너무 헛되게 흘려보내 버린 건 아닌가 조금 후회스럽기도 하다.