개발
QR 코드 생성기 제작
제작 비화
이번에 QR 코드 관련으로 작은 이슈가 있었다.
어떤분이 온라인 QR 코드 생성기를 통해서 QR코드를 만들어 배포했는데 몇백명이 그 코드를 통해 웹사이트에 접근하자 더이상 큐알 코드의 기능이 막혔다는 이야기였다.
내 상식으로는 조금 이해가 안갔다.
단순히 큐알은 바코드마냥 어떤 텍스트데이터를 이미지화 시킨건데 할당량에 따른 접근차단 시스템이 있을리가 없었다.
좀 이해가 가질않아서 관련내용으로 알아봤더니 그건 일반적인 QR 코드에 관한이야기가 아니었다.
QR 코드를 제공해준 시스템에서 접속자 통계를 남기기위해 자신들의 사이트를 경유해서 링크를 제공했던것이었고, 그 일일 접속량의 할당량이 꽉차는 순간 QR 코드 연결 기능이 정지된 것이었다.
네이버 QR코드 생성 화면나는 그냥 단순하게 직접 QR 코드를 생성하면되지 왜 그런 통계달린 시스템을 이용하는걸까 하고 온라인으로 검색해봤는데, 은근히 그런 기능이 만들어진 클린한 사이트가 없다는걸 깨달았다.
통상적으로 네이버 검색으로도 네이버의 QR 코드 만들기가 제일 위에 뜨는 상황이고, 알수없는 외국사이트를 쓰자니 좀 쫄리는것도 사실이다.
그래서 한번 QR 코드에대해 공부도 해볼겸 이렇게 제작을 해보았다.
라이브러리: qrcode.js
사실 내가 뭘 만든건아니다.
QR 코드는 이미 라이브러리나 패키지로 훌륭하게 나와있는게 대다수이다.
그걸 웹사이트에 적절히 이용해서 쓰면 끝인 내용이다.
나는 이 사이트의 코드를 바탕으로 구현을 해보았다.
<!-- GitHub Raw나 CDN에서 가져올 수 있어요 -->
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>
<input id="urlInput" type="text" placeholder="URL을 입력하세요" style="width:300px"/>
<button id="btnGenerate">QR 생성</button>
<div id="qrcode" style="margin-top:20px;"></div>Copyconst input = document.getElementById('urlInput');
const btn = document.getElementById('btnGenerate');
const container = document.getElementById('qrcode');
btn.addEventListener('click', () => {
const url = input.value.trim();
if (!url) return alert('먼저 URL을 입력해주세요.');
// 컨테이너 비우고 새로 생성
container.innerHTML = '';
new QRCode(container, {
text: url,
width: 200, // QR 코드 가로 크기(px)
height: 200, // QR 코드 세로 크기(px)
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
});Copy구현 사항은 매우 간단하다.
위의 코드처럼 스크립트를 가져와 큐알 생성에 필요한 요소를 넣어두고 큐알코드 생성기능을 호출하면된다.
QR 코드 생성기 구현
내 블로그에 적용해본 서비스는 이정도이다.
QR 코드 생성기QR 코드의 이미지 크기와색상을 조정할 수 있게 만들어놓았다.
그리고 생성된 이미지를 클립보드에 복사하거나 다운로드할 수 있는 버튼도 추가해놓았다.
다만 사파리에서는 클립보드에 이미지를 저장하게하는 스크립트가 제대로 작동되지 않아서 그 부분만 예외처리를 해두었다.
실제로 해당 페이지로 가는 QR 코드를 생성해보았다.
잘 작동이 된다!
#JavaScript
2
개의 댓글
고양만두
**********@*****.***
5달 전
대댓글
네이버 QR 서비스를 이용해봤는데 하나를 생성하기 위해서 번거로운 입력 정보들이 많더라고요... 개불편!
내가 필요한건 그냥 단순한 페이지 이동시킬 수 있는 QR 코드인데 말이죠;
아마 불편하게 느낀 사람들이 많을거라고 생각해요. 그에 비해 쉽고 빠르게 만들 수 있어서 너무 좋은 것 같네요. 굳!
에루샤
5달 전
대댓글
5달 전
대댓글
@고양만두
들러주셔서 감사합니다~
저도 QR 코드 만들일이 있어서 여러 사이트 뒤져보다가 한글로 만들어진 기능만 심플하게 있는 사이트가 안보여서 공부도 해볼겸 만들어본 기능입니다.
스마트폰에서도 문제없이 작동하니 아무쪼록 잘 쓸 수 있지 않을까 하네요!