QR코드 활용에 관하여…

QR코드 활용에 관하여…

 

Print

 

- 프롤로그
QR코드는 이미 우리 생활 속에서 많이 활용되고 있습니다. 스마트폰이 대중화되면서 각종 마케팅 뿐만 아니라 코로나로 인해 각종 시설을 이용하기 위한 QR코드 체크인, 전자결제 시스템, 쿠폰 등 점점 사용처가 늘어가고 있습니다.
이렇게 여러 상황들에서 사용되고 있지만 아직 이를 직접 만들어 사용하는 것에는 어렵다고만 느끼시는 분이 많이 있습니다. 하지만 QR코드를 조그만 들여다보면 이를 쉽게 활용 할 수 있습니다. 이번 글은 QR코드를 활용하는 법을 설명하고자 합니다.

jj1
<QR코드 예시>

- QR코드란?
2차원 매트릭스 형태로 이루어진 바코드이다. 세 꼭지점의 큰 사각형과, 나머지 한 꼭지점에 근접하는 작은 사각형이 존재하며 QR코드가 담고 있는 내용이 많으면 일정 크기 간격으로 작은 사각형이 늘어나는 형태입니다.
일본 DENSO WAVE INCORPORATED란 곳에서 만들어졌으며 해당에 대한 특허의 권리를 행사하지 않겠다고 선언한 뒤 규격화/표준화를 통해 ISO국제규격, KS에도 제정되었고 모바일 전용 표준으로도 제정되어 세계 어느곳에서도 인정되게 되었습니다.

 

QR코드의 특징에 대해서는 간단하게 설명하고 넘어가겠습니다.
1. 대용량 정보 수납
2. 작은 공간에 인쇄
3. 일본어/한자를 효율적으로 표현
4. 오염/손상에 강함
5. 360도 어느 방향에서도 인식 가능
6. 연속 기능 지원

 

- QR코드를 만들어 보자.
QR코드는 규격화가 되었기때문에 여러 회사들에서 QR코드 generator를 제공하고 있어 해당 서비스를 이용하여 만드셔도 모두 똑같이 생성이 됩니다. 또한 open source 라이브러리를 통하여 각종 플랫폼에서 구현하여 직접 생성 하셔도 됩니다. 여기서 다룰 내용은 모바일에서 활용하기 위해서 어떠한 내용을 담아서 QR코드를 만들지에 대해 고민해보도록 하겠습니다. 기본적으로 QR코드에는 문자열 및 숫자가 들어가게 됩니다. 이를 활용하기 위해 몇가지 형식에 대해서 대응하고 있습니다. 대표적으로 URL, Email address, Phone number, 연락처, sms, 지리 정보, 캘린더 이벤트, Wi-Fi 네트워크 연결, 구글플레이 스토어 or App Store 연결 등이 있습니다.

 

- URL
아마도 평소에 가장 많이 보는 형태입니다. 브라우저에서 연결해주는 웹사이트 주소로 모바일에서 인식한다면 브라우저로 바로 연결해 줍니다. 이는 URL 프로토콜(https://)을 모바일에서 인식하여 연결하여 주는 것입니다.

jj2

<예) 클립소프트 IT이야기의 주소가 담긴 QR코드>

- Email address
모바일에서 인식하면 해당 메일 주소로 메일을 쓸 수 있도록 해줍니다.
mailto:[email protected] 형태를 따르고 있습니다.

 

- Phone number
모바일에서 인식하면 해당 번호로 전화를 걸 수 있게 해줍니다.
tel:+12125551212 형태를 따르고 있습니다.

 

- 연락처
최근 명함에 QR코드가 있는 것을 본 경험이 있으셨나요? 아마도 해당 명함에는 vCard 혹은 meCard 형태를 따르고 있을 것입니다.
BEGIN:VCARD
VERSION:3.0
FN:장주홍
TITLE:Software Engineer
TEL;CELL;VOICE:010-xxxx-xxxx
EMAIL;TYPE=INTERNET;TYPE=WORK;TYPE=PREF:[email protected]
URL;TYPE=Homepage:https://clipsoft.co.kr
END:VCARD

jj3
<예) 연락처>

예시를 코드 스캐너로 인식시키면 모바일 연락처에 정보들이 바로 입력되는 것을 확인하실 수 있습니다.

 

- Wi-Fi Network config
가끔 카페에서 무료 와이파이를 요청하면 QR코드를 보여주는 경우가 있습니다. 이를 스캔하면 해당 카페에서 제공하는 와이파이에 바로 연결 할 수 있는데 이는 아래와 같은 포멧으로 QR코드를 생성해 놓은 것이죠.
WIFI:T:WPA;S:mynetwork;P:mypass;;
QR코드를 스캔하면 바로 와이파이에 연결되니 한자씩 입력할 필요 없이 편하게 이용할 수 있습니다.

 

- 구글플레이 스토어, App Store
어플리케이션 광고할 때 항상 따라오는 QR코드라서 많이 보셨을 겁니다.
구글플레이 스토어 : market://details?id=org.example.ex
App Store : https://itunes.apple.com/kr/app/id123456789?mt=8

위와 같이 딥링크로 이루어져 QR코드를 스캔하면 각 스토어의 설치페이지로 이동합니다. 예시를 보셨으니 알겠지만 모두 텍스트와 숫자로 이루어져 있지만 해당 포맷들을 지정해 놓은 후 이를 따라가면 해당 동작들을 하도록 되어 있습니다. 이를 응용한다면 iOS, 안드로이드에 나의 앱을 만들어 올린 후 내가 만든 어플리케이션과 연동되도록 QR코드를 생성하여 활용 할 수 있습니다. 해당 방법은 아래의 링크를 참고하시면 됩니다.

iOS : universal link (https://developer.apple.com/ios/universal-links/)
안드로이드 : app link (https://developer.android.com/studio/write/app-link-indexing)

 

- QR코드를 꾸며 보자.
바코드를 생각하면 검은색과 흰색의 조합만 생각하시겠지만 QR코드의 경우 다양하게 꾸밀 수 있습니다. 전경색, 배경색에 그라데이션 효과도 넣을 수 있으며, 꼭지점의 프레임과 앵커의 색도 바꿀 수 있으며, 바코드 정 중앙에 텍스트 혹은 이미지를 넣어서 생성 할 수도 있습니다.

jj4 jj5
<예) 같은 데이터를 가졌지만 다른 형태의 QR코드>

물론 색깔의 경우 카메라가 이를 구분할 수 있는 대비되는 색상을 사용하여야 QR코드를 인식할 수 있으니 예쁘게 꾸민 후 인식이 되는지 확인을 하셔야 합니다.

 

- QR코드 고급 활용
위에서는 모바일기기의 기본 카메라을 이용한 QR코드 활용에 대해서 이야기 했다면, 여기에서는 내가 만든 어플리케이션에서 QR코드를 인식하여 활용하는 방법에 대해서 이야기 하려고 합니다.
위에서도 한번 언급하였지만 QR코드는 결국 문자열과 숫자로 이루어져 있어서 활용 방법을 무한히 넓혀 갈 수 있습니다. 이미 실생활에서도 많이 접하고 계시겠지만 제로페이와 같은 모바일 간편결제 서비스라던지, 코로나로 인한 QR코드 체크인 기능 등이 직접 만든 어플리케이션에서 활용하는 대표적인 예라고 볼 수 있습니다.

 

QR코드를 정밀하게 활용하기 위해서는 규격에 대해서 알아야 합니다. QR코드가 가질 수 있는 정보의 크기는 숫자의 경우 최대 7,089자, 문자(ASCII)는 최대 4,296자이며, 한자와 같은 아시아권 문자는 최대 1,817자까지 담을 수 있습니다. 또한 오류 복원 Level에 따라 약 7%에서 30%까지 복원이 가능합니다. 하지만 이를 최대로 담게 되면, QR코드 한개의 크기가 커지고 카메라가 이를 인식하기 어려워집니다. 그렇다면 규격을 넘는 데이터를 읽을 수 없느냐? 에 대해서는 그렇지 않다라고 말씀드립니다. QR코드의 특징에도 있지만 연속 기능을 이용하여 최대 16분할을 하여 1개의 데이터로 연결하는 방법이나 여러 개의 QR코드의 데이터를 직접 조합하는 방법으로 구현하여 사용할 수 있습니다.

 

실제로 저희 clipsoft에서 사내 벤처로 독립한 WikiLab의 코드엑스라는 어플에서 분할된 QR코드를 스캔하여 문서 위변조 여부를 확인하는 방법을 사용하고 있습니다..

jj6
<코드엑스 앱 사용 가이드>

두번째로는 오프라인과 온라인의 연결에 관한 내용입니다. 네이버에서 제공해 주는 QR코드 서비스를 이용해 보면 엄청 복잡하고 많은 데이터를 넣은 뒤 QR코드를 생성해도 매우 간단한 코드가 만들어집니다. 이를 분석해보면 네이버가 제공하는 단축URL형태의 데이터만 들어가 있는 것을 볼 수 있습니다.

 

즉, QR코드에는 URL정도의 정보만 넣어두고 모든 처리는 서버에서 처리하여, QR코드는 오프라인과 온라인의 연결고리 역할만 하는 것입니다. 이는 마케팅적으로 굉장히 좋은 효과라고 할 수 있습니다. 기존에는 이용자가 호기심을 느끼고 이에 대해 검색을 하거나 직접 스마트폰에서 URL등을 타이핑하여 접속하는 등의 노력은 QR코드를 스캔하는 것만으로 단번에 해결해 주는 것입니다.

 

이러한 방법을 통하여 이용자를 오프라인에서 온라인으로 끌어들이고 이용자에게는 필요한 데이터를, QR코드를 생성한 사람에게는 이를 이용하는 사람에 대한 데이터를 관리, 수집, 통계를 생성하고 이를 빅데이터로 활용 수 있습니다. 예를 네이버를 이용하여 들었지만 이러한 속성을 이용한다면 마케팅적인 부분만이 아니라 다른 여러가지 일을 할 수 있기 때문에 여러모로 고민을 해봐야 할 것입니다.

 

- 에필로그
QR코드는 처음에는 오프라인으로 대표되는 출력물에서 활용되도록 고안되었지만 스마트폰이 대중화 된 이후로는 오히려 오프라인과 온라인과의 연결고리가 되어주고 있습니다. 이러한 것들을 잘 활용하는 것은 우리를 조금 더 편하고 능률적이게 만들어 주는 것이므로 잘 활용하셨으면 좋겠습니다. 감사합니다.

 

※ 출처 및 참고

QR코드 공식홈페이지 : https://www.qrcode.com/ko
zxing wiki : https://github.com/zxing/zxing/wiki/Barcode-Contents
코드엑스 제품 메뉴얼 : http://wikilab.co.kr
네이버 QR코드 서비스 : https://qr.naver.com

0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기

HTML/CSS/기타

번호 제목 글쓴이 날짜 조회수
46 JS 글자수 체크(공백포함, 제외) 및 언어 옵션 설정 관리자 09-02 1,328
45 web chart - 실시간 차트 관리자 07-25 1,350
44 비동기 프로그래밍 관리자 07-25 1,311
43 table thead 고정과 tbody 스크롤 관리자 07-23 1,364
42 datepicker 사용하여 공휴일 직접 지정하기 관리자 06-11 1,428
41 Dropzone - 이미지 & 파일 업로드 (드래그 앤 드롭) 라이브러리 관리자 03-06 1,588
40 JSPDF 사용법(Javascript pdf) 관리자 03-04 1,865
39 FullCalendar(풀캘린더) 어거지 사용법 관리자 01-25 1,776
38 JQUERY - id가 여러개인데 한번에 찾고 싶을때! ${} 관리자 12-28 1,615
37 [CSS] 가로 스크롤 구현하기 관리자 12-27 1,751
36 JCROP을 이용한 업로드한 크롭( CROP ) 하기 관리자 12-27 1,716
35 제이쿼리 - 모달 다이아로그 및 여러 알림창들 관리자 12-21 1,441
34 Javascript/jQuery 이미지 회전 돋보기 관리자 11-07 1,832
33 Resolving the Issue of Fakepath in JavaScript 관리자 10-26 1,488
32 div 및 요소 화면 중앙에 위치시키기 관리자 10-21 1,514
31 [Jquery] 체크박스 전체 체크 , 해제 하는 방법 관리자 10-19 1,526
30 display 스타일 속성 사용하여 행 숨기기/보이기 관리자 09-16 1,934
29 자주 사용하는 비주얼 스튜디오 코드(Visual Studio Code, VSC, vscode) 단축키 정리 관리자 09-14 2,010
28 div 2개 나란히 정렬하는 방법 관리자 09-09 1,731
27 HTML, CSS - 헤더컬럼 고정형 table 구성하기 관리자 09-06 1,565