웹사이트 주소, 연락처, 안내 문구를 스마트폰 카메라로 바로 인식할 수 있는 QR 코드 이미지로 만들어 드립니다. 명함이나 포스터에 인쇄할 때 유용합니다.
아니요! 직접 생성한 QR 코드는 평생 만료되지 않고 사용할 수 있습니다.
명함이나 전단지용으로는 최소 300x300 픽셀 이상을 권장합니다.
네! 최신 아이폰과 안드로이드 기본 카메라 앱에서 즉시 스캔됩니다.
전단지, 명함, 메뉴판, 상품 포장까지 QR 코드는 이제 어디에나 있습니다. 그런데 인쇄해 보니 휴대폰이 잘 못 읽는 경우가 생각보다 많습니다. 처음부터 잘 찍히는 QR을 만드는 방법을 알아봅니다.
QR 코드는 1994년 일본 덴소웨이브가 자동차 부품 관리를 위해 개발한 2차원 코드로, 국제 표준 ISO/IEC 18004로 정의되어 있습니다. 세 모서리의 큰 사각형(위치 검출 패턴) 덕분에 어느 방향에서 찍어도 빠르게 인식됩니다.
QR 코드의 구조와 오류 정정 레벨(L·M·Q·H), 인쇄물에 넣을 때 필요한 최소 크기와 여백, 잘 안 찍히는 QR의 원인, 상품 바코드와의 차이를 정리합니다.가이드 읽기 →
나만의 버전이 필요하다면 아래 작업지시 프롬프트를 AI 채팅에 붙여 넣거나, 스킬 파일을 AI 코딩 에이전트에 저장하세요. 저희가 이 도구를 만들 때 정리한 기능, 예외 상황, 테스트 케이스가 그대로 담겨 있습니다.
Claude, ChatGPT, Gemini 같은 AI 채팅에 그대로 붙여 넣으세요.
당신은 숙련된 풀스택 웹 개발자입니다. 아래 요구사항에 맞춰 "QR 코드 생성기" 웹 도구를 만들어 주세요.
## 목표
텍스트, URL, 와이파이 정보 등으로 인쇄 가능한 QR 코드를 만드는 도구를 만든다.
## 핵심 기능
- URL·텍스트·와이파이·연락처(vCard) 유형 선택
- 오류 정정 레벨(L/M/Q/H) 선택
- 크기·여백(콰이어트 존)·색상 설정
- PNG와 SVG 다운로드
- 가운데 로고 삽입(레벨 H 권장)
## 입력
- 내용과 유형
- 오류 정정 레벨, 크기, 색상, 로고
## 출력
- QR 코드 미리보기
- PNG/SVG 파일
## 예외 상황과 처리 규칙
- 밝은 배경·어두운 점 대비가 낮으면 경고
- 용량 초과 시 오류와 줄이는 방법 안내
- 와이파이 문자열의 특수문자(;, ,) 이스케이프
- 여백 4모듈 미만 설정 시 경고
## 구현 조건
- 서버 없이 브라우저에서 동작하는 단일 페이지(HTML, CSS, JavaScript)로 만들고, 입력 데이터를 외부로 전송하지 마세요.
- 모바일에서도 쓰기 편한 반응형 UI로 만들고, 입력 요소에는 레이블을 달아 키보드로도 조작할 수 있게 해 주세요.
- 결과에는 '복사' 버튼을 달고, 잘못된 입력에는 이해하기 쉬운 한국어 오류 메시지를 보여 주세요.
- 핵심 로직은 UI와 분리된 함수로 작성해 단위 테스트를 할 수 있게 해 주세요.
## 완료 기준 (테스트 케이스)
- 'https://example.com' 생성 후 스캐너 라이브러리로 디코딩 시 원문과 일치
- 레벨 H가 L보다 모듈 수가 같거나 많음
- SVG를 확대해도 깨지지 않음
먼저 구현 계획을 5줄 이내로 설명한 다음 전체 코드를 작성하고, 마지막에 위 테스트 케이스를 확인하는 방법을 알려 주세요.Claude Code 같은 AI 코딩 에이전트에서 .claude/skills/build-qr-code-generator/SKILL.md 경로로 저장하면, 이 도구를 만들거나 고칠 때마다 다시 쓸 수 있습니다.
---
name: build-qr-code-generator
description: QR 코드 생성기 도구를 새로 만들거나 수정할 때 사용합니다. 텍스트, URL, 와이파이 정보 등으로 인쇄 가능한 QR 코드를 만드는 도구를 만든다.
---
# QR 코드 생성기 만들기
## 목표
텍스트, URL, 와이파이 정보 등으로 인쇄 가능한 QR 코드를 만드는 도구를 만든다.
## 작업 순서
1. 아래 필수 기능, 입력, 출력을 확인하고 빠진 정보가 있으면 먼저 질문합니다.
2. 핵심 로직을 UI와 분리된 순수 함수로 구현합니다.
3. 검증 목록의 테스트 케이스로 로직을 확인합니다.
4. 입력 폼, 결과 영역, 복사 버튼을 갖춘 반응형 UI를 만듭니다.
5. 규칙에 적힌 예외 상황을 하나씩 재현해 보고 오류 메시지를 다듬습니다.
## 핵심 기능
- URL·텍스트·와이파이·연락처(vCard) 유형 선택
- 오류 정정 레벨(L/M/Q/H) 선택
- 크기·여백(콰이어트 존)·색상 설정
- PNG와 SVG 다운로드
- 가운데 로고 삽입(레벨 H 권장)
## 입력
- 내용과 유형
- 오류 정정 레벨, 크기, 색상, 로고
## 출력
- QR 코드 미리보기
- PNG/SVG 파일
## 규칙
- 밝은 배경·어두운 점 대비가 낮으면 경고
- 용량 초과 시 오류와 줄이는 방법 안내
- 와이파이 문자열의 특수문자(;, ,) 이스케이프
- 여백 4모듈 미만 설정 시 경고
- 서버 없이 브라우저에서 동작하는 단일 페이지(HTML, CSS, JavaScript)로 만들고, 입력 데이터를 외부로 전송하지 마세요.
## 검증
- [ ] 'https://example.com' 생성 후 스캐너 라이브러리로 디코딩 시 원문과 일치
- [ ] 레벨 H가 L보다 모듈 수가 같거나 많음
- [ ] SVG를 확대해도 깨지지 않음