[초보자 가이드] HTML/JS로 나만의 100% 무료 QR 코드 생성기 만들기 (무료 소스 코드 포함)
안녕하세요! 오늘은 마케팅, 개인 명함, 식당 메뉴판 등 일상에서 정말 많이 쓰이는 **'QR 코드 생성기'**를 직접 만들어보는 시간을 갖겠습니다.
흔히 구글에서 "QR 코드 생성"을 검색하면 수많은 사이트가 나오지만, 개인정보 유출이 걱정되거나 나중에 유료 결제를 유도하는 경우가 많죠? 오늘 제가 공유해 드리는 코드를 활용하면 단 한 개의 HTML 파일만으로 서버 없이 여러분의 컴퓨터에서 안전하고 빠르게 QR 코드를 무제한으로 만들 수 있습니다.
1. QR 코드 생성기, 왜 직접 만들어야 할까요?
시중의 무료 QR 생성 사이트들은 다음과 같은 단점이 있습니다.
1) 유효기간: 일정 시간이 지나면 QR 코드가 만료되어 연결이 끊기는 '낚시성' 서비스가 많습니다.
2) 광고: QR 코드를 스캔할 때 5~10초 정도 중간 광고 페이지가 뜨기도 합니다.
3) 데이터 보안: 내가 어떤 링크를 생성했는지 해당 업체 기록에 남게 됩니다.
하지만 직접 만든 도구는 평생 무료이며, 오프라인에서도 작동하고, 무엇보다 광고 없이 깔끔하게 연결됩니다.
2. 사용된 기술 스택
이 프로그램은 웹의 가장 기본적인 3가지 요소로 구성됩니다.
HTML5: 웹 페이지의 구조와 입력창을 잡습니다.
CSS3: 깔끔하고 현대적인 디자인(UI)을 입힙니다.
JavaScript: 실시간으로 QR 코드를 생성하는 핵심 로직을 담당합니다.
QRCode.js: 복잡한 알고리즘인 QR 코드를 그려주는 가벼운 오픈소스 라이브러리를 활용했습니다.
혹은 쳇 지피티에게 이렇게 명령어를 내리면 쳇 지피티가 QR 코드 생성기코드를 만들어 줍니다.:
웹 UI로 간단한 QR코드 생성기 만들어 어주되 HTML 파일로 다운로드 받게 해 줘
3. 전체 소스 코드 (복사해서 사용하세요)
아래의 코드를 복사하여 메모장에 붙여넣고, 파일명을 qr-maker.html로 저장한 뒤 실행해 보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나만의 커스텀 QR 코드 메이커</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style>
:root { --primary-color: #4a90e2; --success-color: #2ecc71; }
body { font-family: 'Apple SD Gothic Neo', sans-serif; background: #f0f2f5; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
.card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); width: 350px; text-align: center; }
h2 { margin-bottom: 25px; color: #333; font-size: 1.5rem; }
input { width: 100%; padding: 14px; margin-bottom: 20px; border: 2px solid #eee; border-radius: 12px; box-sizing: border-box; font-size: 1rem; outline: none; transition: 0.3s; }
input:focus { border-color: var(--primary-color); }
button { width: 100%; padding: 14px; border: none; border-radius: 12px; cursor: pointer; font-weight: bold; margin-bottom: 10px; transition: 0.2s; font-size: 1rem; }
button:active { transform: scale(0.98); }
.btn-generate { background: var(--primary-color); color: white; }
.btn-save { background: var(--success-color); color: white; }
#qrcode { margin: 25px 0; display: flex; justify-content: center; padding: 15px; border: 1px dashed #ddd; border-radius: 15px; }
</style>
</head>
<body>
<div class="card">
<h2>QR Code Generator</h2>
<input type="text" id="qr-input" placeholder="URL이나 문구를 입력하세요" value="https://www.google.com">
<button class="btn-generate" onclick="makeCode()">QR 코드 생성하기</button>
<div id="qrcode"></div>
<button class="btn-save" onclick="downloadQR()">이미지로 저장하기</button>
</div>
<script>
// 초기 QR 객체 설정 (200x200 사이즈)
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 200, height: 200, correctLevel : QRCode.CorrectLevel.H
});
// 생성 함수
function makeCode() {
var elText = document.getElementById("qr-input");
if (!elText.value.trim()) { alert("내용을 입력해주세요"); return; }
qrcode.makeCode(elText.value);
}
// 다운로드 함수 (PNG로 추출)
function downloadQR() {
var img = document.querySelector("#qrcode img");
if (!img) { alert("먼저 QR을 생성해 주세요."); return; }
var link = document.createElement("a");
link.href = img.src;
link.download = "my_qrcode.png";
link.click();
}
makeCode(); // 페이지 로드 시 첫 화면 생성
</script>
</body>
</html>
4. 코드의 원리 (핵심만 쏙쏙!)
① 라이브러리(CDN) 활용
QR 코드는 흑백 격자 안에 데이터를 암호화하는 복잡한 과정이 필요합니다. 이를 우리가 직접 계산할 필요 없이, qrcode.min.js라는 오픈소스 라이브러리를 가져와서 makeCode()라는 명령어 한 줄로 완성하는 방식입니다.
② 이미지 저장 로직
웹 브라우저가 생성한 QR 이미지는 base64라는 데이터 형태로 존재합니다. 버튼을 클릭하면 이 데이터를 임시 링크에 연결해 마치 파일을 클릭해서 내려받는 것처럼 구현했습니다.
https://qr-code.io/en/create?step=1&qr_onboarding=active_dpf&fx=QR-code&utm_source=google&utm_medium=cpc&utm_id=21607568052&utm_content=167967407884&utm_term=qr+code&network=g&matchtype=b&device=c&gaid=MY-EN-C-DPF&gad_source=1&gad_campaignid=21607568052&gbraid=0AAAAA-G5uJL71G8u4-rIni-xlV9mjlSua&gclid=Cj0KCQjwiJvQBhCYARIsAMjts3L71XUH-WjOvT30kzQNwj3fg07ybY4mb-d1bGJwAPzjpm2iaFD53KkaAoeoEALw_wcB
5. 알아두면 좋은 QR 코드 활용 팁
무료 와이파이 QR: WIFI:T:WPA;S:와이파이이름;P:비밀번호;; 형태로 입력하면, 스캔하자마자 비밀번호 입력 없이 와이파이에 연결됩니다. 카페나 집에 붙여두면 최고예요!
긴급 연락처: 아이들의 가방이나 반려동물 인식표에 "전화번호: 010-0000-0000"을 담은 QR을 붙여보세요.
유튜브 구독: 내 채널 주소를 QR로 만들어 홍보물에 넣으면 구독자가 쑥쑥 늘어납니다.
마무리하며
이제 더 이상 유료 QR 생성 사이트를 찾아 헤맬 필요가 없습니다. 이 HTML 파일 하나만 있으면 언제 어디서든 나만의 QR 코드를 1초 만에 뚝딱 만들 수 있으니까요.
#QR코드생성기 #QR코드만들기 #HTML연습 #자바스크립트 #코딩입문 #웹개발 #나만의도구만들기 #IT팁
'블로그 이야기 > IT 배우기' 카테고리의 다른 글
| [왕초보 가이드] 워드·한글 대신 애플 페이지(Pages)를 써야 하는 이유와 100% 활용법 (0) | 2026.05.16 |
|---|---|
| [왕초보 가이드] 맥북·아이폰·아이패드 유저를 위한 애플 키노트(Keynote) 100% 활용법 (0) | 2026.05.16 |
| <부업> 블로그: 구글 애드센스 승인부터 월 100만 원 수익까지 실전 가이드 (2) | 2026.05.10 |
| <부업> 구글 블로그로 월 100만 원 만드는 실전 노하우 (0) | 2026.05.09 |
| 나도 애니메이션 유튜버! 땡전 한 푼 안 드는 AI 도구 Best 4 (0) | 2026.05.09 |
