문자, 상품번호, URL, 식별자를 바코드 이미지로 변환하는 도구입니다. 형식과 이미지 크기를 정한 뒤 바로 다운로드할 수 있습니다.
전단지, 명함, 메뉴판, 상품 포장까지 QR 코드는 이제 어디에나 있습니다. 그런데 인쇄해 보니 휴대폰이 잘 못 읽는 경우가 생각보다 많습니다. 처음부터 잘 찍히는 QR을 만드는 방법을 알아봅니다.
QR 코드는 1994년 일본 덴소웨이브가 자동차 부품 관리를 위해 개발한 2차원 코드로, 국제 표준 ISO/IEC 18004로 정의되어 있습니다. 세 모서리의 큰 사각형(위치 검출 패턴) 덕분에 어느 방향에서 찍어도 빠르게 인식됩니다.
QR 코드의 구조와 오류 정정 레벨(L·M·Q·H), 인쇄물에 넣을 때 필요한 최소 크기와 여백, 잘 안 찍히는 QR의 원인, 상품 바코드와의 차이를 정리합니다.가이드 읽기 →
나만의 버전이 필요하다면 아래 작업지시 프롬프트를 AI 채팅에 붙여 넣거나, 스킬 파일을 AI 코딩 에이전트에 저장하세요. 저희가 이 도구를 만들 때 정리한 기능, 예외 상황, 테스트 케이스가 그대로 담겨 있습니다.
Claude, ChatGPT, Gemini 같은 AI 채팅에 그대로 붙여 넣으세요.
당신은 숙련된 풀스택 웹 개발자입니다. 아래 요구사항에 맞춰 "바코드 생성기" 웹 도구를 만들어 주세요.
## 목표
Code 128, EAN-13 등 1차원 바코드를 원하는 크기의 이미지로 만드는 도구를 만든다.
## 핵심 기능
- 형식 선택(Code 128, EAN-13, UPC-A, Code 39)
- 너비·높이(px) 지정
- 바코드 아래 사람이 읽는 숫자 표시 옵션
- SVG/PNG 다운로드
- EAN-13 검증 숫자 자동 계산
## 입력
- 인코딩할 값
- 형식, 너비, 높이
## 출력
- 바코드 이미지
- 검증 숫자를 포함한 최종 값
## 예외 상황과 처리 규칙
- 형식별 허용 문자·길이 검증(EAN-13은 숫자 12~13자리)
- 입력한 검증 숫자가 틀리면 오류
- 요청한 크기와 출력 크기가 정확히 일치
- 판매용 EAN 번호는 GS1 발급이 필요하다는 안내
## 구현 조건
- 서버 없이 브라우저에서 동작하는 단일 페이지(HTML, CSS, JavaScript)로 만들고, 입력 데이터를 외부로 전송하지 마세요.
- 모바일에서도 쓰기 편한 반응형 UI로 만들고, 입력 요소에는 레이블을 달아 키보드로도 조작할 수 있게 해 주세요.
- 결과에는 '복사' 버튼을 달고, 잘못된 입력에는 이해하기 쉬운 한국어 오류 메시지를 보여 주세요.
- 핵심 로직은 UI와 분리된 함수로 작성해 단위 테스트를 할 수 있게 해 주세요.
## 완료 기준 (테스트 케이스)
- '123456789012' Code 128을 500×160으로 생성하면 SVG width=500, height=160
- EAN-13 '880123456789'의 검증 숫자 자동 계산
- 허용되지 않는 문자는 오류
먼저 구현 계획을 5줄 이내로 설명한 다음 전체 코드를 작성하고, 마지막에 위 테스트 케이스를 확인하는 방법을 알려 주세요.Claude Code 같은 AI 코딩 에이전트에서 .claude/skills/build-barcode-generator/SKILL.md 경로로 저장하면, 이 도구를 만들거나 고칠 때마다 다시 쓸 수 있습니다.
---
name: build-barcode-generator
description: 바코드 생성기 도구를 새로 만들거나 수정할 때 사용합니다. Code 128, EAN-13 등 1차원 바코드를 원하는 크기의 이미지로 만드는 도구를 만든다.
---
# 바코드 생성기 만들기
## 목표
Code 128, EAN-13 등 1차원 바코드를 원하는 크기의 이미지로 만드는 도구를 만든다.
## 작업 순서
1. 아래 필수 기능, 입력, 출력을 확인하고 빠진 정보가 있으면 먼저 질문합니다.
2. 핵심 로직을 UI와 분리된 순수 함수로 구현합니다.
3. 검증 목록의 테스트 케이스로 로직을 확인합니다.
4. 입력 폼, 결과 영역, 복사 버튼을 갖춘 반응형 UI를 만듭니다.
5. 규칙에 적힌 예외 상황을 하나씩 재현해 보고 오류 메시지를 다듬습니다.
## 핵심 기능
- 형식 선택(Code 128, EAN-13, UPC-A, Code 39)
- 너비·높이(px) 지정
- 바코드 아래 사람이 읽는 숫자 표시 옵션
- SVG/PNG 다운로드
- EAN-13 검증 숫자 자동 계산
## 입력
- 인코딩할 값
- 형식, 너비, 높이
## 출력
- 바코드 이미지
- 검증 숫자를 포함한 최종 값
## 규칙
- 형식별 허용 문자·길이 검증(EAN-13은 숫자 12~13자리)
- 입력한 검증 숫자가 틀리면 오류
- 요청한 크기와 출력 크기가 정확히 일치
- 판매용 EAN 번호는 GS1 발급이 필요하다는 안내
- 서버 없이 브라우저에서 동작하는 단일 페이지(HTML, CSS, JavaScript)로 만들고, 입력 데이터를 외부로 전송하지 마세요.
## 검증
- [ ] '123456789012' Code 128을 500×160으로 생성하면 SVG width=500, height=160
- [ ] EAN-13 '880123456789'의 검증 숫자 자동 계산
- [ ] 허용되지 않는 문자는 오류