[QR] 구글 API로 QR 코드 생성 / Wi-fi 접속 QR 코드 생성

구글 API로 QR 코드 생성



현재 코로나 사태로 인해 전자 출입 명부 및 매장 음식 주문 등에 QR 코드가 많이 사용되고 있습니다.


QR 코드는 간단하게 생성할 수 있고, 사용자는 카메라를 갖다 대기만 하면 되기 때문에 사용도 간편하고 편리하기 때문입니다.


또한, 암호화된 값 또는 긴 문자열도 QR 코드로 손쉽게 생성하여 전달할 수 있습니다.


QR 코드는 구글이 제공하는 API를 이용하면, 손쉽게 사용할 수 있는데요~!


한번 알아보겠습니다.



구글이 제공하는 QR 코드 생성 API는 URL 형식으로 해당 parameter만 넘기게 되면 QR 코드 이미지가 생성됩니다.


그러면 그 이미지 URL을 그대로 사용하거나 서버에 따로 저장하여 새로운 URL(static)을 생성하여 사용하면 됩니다.



URL : https://chart.apis.google.com/chart


parameter(cht) : API 종류 (qr로 고정)


parameter(chs) : QR 코드 사이즈(예 : 300x300)


parameter(chl) : QR코드로 생성할 원하는 값



예를 들어 해피쿠 블로그를 브라우저에서 열게 하는 QR코드를 생성하려면, 다음과 같은 URL을 입력하면 됩니다.


https://chart.apis.google.com/chart?cht=qr&chs=300x300&chl=https://www.happykoo.net


그러면 다음과 같이 QR 코드가 생성됩니다.

0c0d2ede266662419b278ea221bd99ba.png
 


직접 핸드폰 카메라로 인식해보시길 바랍니다~!




Wi-fi 접속 QR 코드 생성



번외로 Wi-fi 접속을 해주는 QR 코드도 생성하는 방법도 알아보겠습니다.


Wi-fi 접속도 QR 코드로 생성해놓고 사용하면, 매번 와이파이를 찾고, 비밀번호를 입력할 필요가 없습니다.


먼저, https://qifi.org/ 사이트에 접속합니다.f949aa95a6b706ef49393f5ec02f1e1d.png 




그리고 접속할 Wi-fi의 SSID와 비밀번호(Key)를 입력해주고 Generate 버튼을 누르면 됩니다. (정말 간단합니다.)


eeefbb53a610ced5364da2a5134ce05d.png
 


그럼 QR 코드가 생성되고 이 이미지를 다운받거나 프린트하여 사용하시면 됩니다~!


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

HTML/CSS/기타

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