QR Code Generator

텍스트, URL, 연락처 등을 QR 코드로 변환하는 도구입니다. 크기, 색상, 오류 수정 레벨 커스터마이징 가능! SVG, PNG 다운로드 지원.

⚙️ Settings

Text / URL:

Size: 256px

Error Correction Level:

L (7%)M (15%)Q (25%)H (30%)

Foreground Color:

Background Color:

Include Margin

📱 Preview

Enter text to generate QR code

💡 QR Code Use Cases

🔗 Website Links

Share URLs for easy mobile access

📧 Contact Info

vCard format for quick contact saving

📶 WiFi

Share WiFi credentials easily

💳 Payment

Crypto addresses or payment links

QR 코드란?

QR(Quick Response) 코드는 2차원 바코드로, 스마트폰 카메라로 빠르게 스캔하여 정보를 읽을 수 있는 시각적 데이터 형식입니다.

주요 특징

• 빠른 인식: 카메라로 즉시 스캔
• 대용량: 최대 4,296자의 영숫자 저장
• 오류 복원: 일부 손상되어도 읽기 가능
• 다목적: URL, 텍스트, 연락처, WiFi 등

오류 수정 레벨

QR 코드가 손상되었을 때 복구 가능한 정도를 결정합니다:

레벨	복구율	용도
L (Low)	7%	깨끗한 환경, 큰 QR 코드
M (Medium)	15%	일반적인 사용 (권장)
Q (Quartile)	25%	야외 환경, 인쇄물
H (High)	30%	로고 삽입, 높은 신뢰성 필요

낮은 레벨 (L) → 더 많은 데이터, 작은 크기
높은 레벨 (H) → 적은 데이터, 큰 크기, 높은 복구율

실제 사용 예시

1. 웹사이트 URL

일반 URL:

https://github.com/username/repository

짧은 URL (권장):

https://bit.ly/abc123

2. 연락처 정보 (vCard)

BEGIN:VCARD
VERSION:3.0
FN:홍길동
ORG:ABC Company
TITLE:Software Engineer
TEL:+82-10-1234-5678
EMAIL:hong@example.com
URL:https://example.com
ADR:;;서울시 강남구;서울;;06000;대한민국
END:VCARD

3. WiFi 연결 정보

WIFI:T:WPA;S:MyNetwork;P:MyPassword123;;

형식 설명:

• T: 보안 타입 (WPA, WEP, nopass)
• S: SSID (네트워크 이름)
• P: 비밀번호
• H: 숨김 네트워크 (true/false, 선택사항)

예시:

WIFI:T:WPA;S:CafeWiFi;P:coffee123;H:false;;

4. 이메일 주소

단순 이메일:

mailto:contact@example.com

제목과 내용 포함:

mailto:contact@example.com?subject=문의사항&body=안녕하세요

5. 전화번호

직접 전화:

tel:+821012345678

SMS 메시지:

sms:+821012345678?body=안녕하세요

6. 지도 위치

Google Maps 좌표:

geo:37.5665,126.9780?q=서울시청

주소:

https://maps.google.com/?q=서울시청

7. 앱스토어 링크

iOS App Store:

https://apps.apple.com/app/id123456789

Google Play Store:

https://play.google.com/store/apps/details?id=com.example.app

8. 소셜 미디어

Instagram:

https://instagram.com/username

Twitter:

https://twitter.com/username

LinkedIn:

https://linkedin.com/in/username

색상 커스터마이징

브랜드 컬러 적용

/* 기본 (검은색/흰색) */
Foreground: #000000
Background: #FFFFFF

/* 브랜드 컬러 예시 */
Foreground: #1877F2  /* Facebook Blue */
Background: #FFFFFF

Foreground: #E4405F  /* Instagram Pink */
Background: #FFFFFF

Foreground: #00C300  /* LINE Green */
Background: #FFFFFF

색상 선택 팁

1. 높은 대비: 스캔 성공률 향상
2. 어두운 전경색: 밝은 배경에 어두운 코드
3. 테스트: 다양한 스캐너로 테스트
4. 인쇄 고려: 인쇄 시 색상 재현 확인

피해야 할 조합

❌ 낮은 대비
Foreground: #CCCCCC
Background: #FFFFFF

❌ 밝은 전경색
Foreground: #FFFF00
Background: #FFFFFF

✅ 좋은 대비
Foreground: #000000 또는 어두운 색
Background: #FFFFFF 또는 밝은 색

크기 가이드

사용 환경별 권장 크기

용도	크기	스캔 거리
명함	128-256px	10-20cm
웹사이트	256-384px	20-40cm
포스터	512px+	50cm-1m
대형 광고	1024px+	2m+

크기 공식

최소 크기 = 스캔 거리 / 10

예시:
- 1m 거리: 최소 10cm (약 400px)
- 50cm 거리: 최소 5cm (약 200px)
- 20cm 거리: 최소 2cm (약 80px)

마진 (Quiet Zone)

QR 코드 주변의 여백으로, 스캔 성공률을 높입니다.

마진 포함 ✅
┌─────────────────┐
│                 │
│   ┌─────────┐   │
│   │ QR CODE │   │
│   └─────────┘   │
│                 │
└─────────────────┘

마진 없음 ❌
┌─────────┐
│ QR CODE │
└─────────┘

권장사항:

• 최소 4 모듈(픽셀) 여백
• "Include Margin" 옵션 활성화 권장

다운로드 형식

SVG (Scalable Vector Graphics)

✅ 장점:
- 무한 확대 가능 (벡터 형식)
- 파일 크기 작음
- 수정 용이 (Illustrator, Inkscape 등)
- 인쇄 품질 최상

❌ 단점:
- 일부 구형 프로그램 미지원
- 웹 브라우저에서만 직접 표시

사용 케이스:

• 인쇄물 (명함, 포스터, 광고)
• 로고 삽입
• 디자인 작업

PNG (Portable Network Graphics)

✅ 장점:
- 모든 프로그램 지원
- 투명 배경 가능
- 웹 호환성 최상

❌ 단점:
- 확대 시 품질 저하
- SVG보다 파일 크기 큼

사용 케이스:

• 웹사이트 임베딩
• 소셜 미디어
• 문서 첨부

실전 활용 예시

1. 레스토랑 메뉴

// 메뉴 URL을 QR 코드로
const menuUrl = 'https://restaurant.com/menu';

QR 코드 생성:
- Size: 256px
- Level: M (일반 환경)
- 테이블 스티커에 부착
→ 고객이 스캔하여 메뉴 확인

2. 명함

BEGIN:VCARD
VERSION:3.0
FN:김개발
ORG:테크 스타트업
TITLE:CTO
TEL:+82-10-1234-5678
EMAIL:dev@startup.com
URL:https://startup.com
NOTE:함께 혁신을 만들어가요!
END:VCARD

QR 코드 설정:
- Size: 180px (명함 적합)
- Level: H (높은 신뢰성)
- 명함 뒷면 우측 하단 배치

3. 이벤트 티켓

https://event.com/ticket?id=ABC123&seat=A-15

// 티켓 검증 시스템
function validateTicket(qrData) {
  const url = new URL(qrData);
  const ticketId = url.searchParams.get('id');
  const seat = url.searchParams.get('seat');

  // 데이터베이스에서 티켓 확인
  return verifyTicket(ticketId, seat);
}

4. 제품 정보

https://product.com/info/SKU12345

제품 포장에 부착:

• 제품 상세 정보
• 사용 설명서
• A/S 접수
• 정품 인증

5. WiFi 공유 (카페/사무실)

WIFI:T:WPA;S:Cafe_Guest;P:welcome123;;

테이블 스티커:

┌─────────────────┐
│   WiFi 정보     │
│   ┌─────────┐   │
│   │ QR CODE │   │
│   └─────────┘   │
│   스캔하여      │
│   연결하세요    │
└─────────────────┘

6. 설문조사/피드백

https://forms.google.com/survey/abc123

영수증 하단:

고객 만족도 조사
QR 코드 스캔하고 소중한 의견 남겨주세요
└─────────┐
│ QR CODE │
└─────────┘

7. 앱 다운로드

// 플랫폼별 자동 리다이렉트
function getAppStoreUrl(userAgent) {
  if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
    return 'https://apps.apple.com/app/id123456';
  } else if (userAgent.includes('Android')) {
    return 'https://play.google.com/store/apps/details?id=com.app';
  }
  return 'https://website.com/download';
}

8. 결제/송금

암호화폐 주소:

bitcoin:1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa?amount=0.01

계좌이체:

https://pay.com/transfer?account=123-456-789&amount=10000

보안 고려사항

1. URL 단축 주의

// ❌ 위험: 단축 URL은 최종 목적지 숨김
const shortUrl = 'https://bit.ly/abc123';

// ✅ 안전: 전체 URL 표시 또는 신뢰할 수 있는 도메인
const safeUrl = 'https://yourcompany.com/page';

2. HTTPS 사용

❌ http://example.com  (보안되지 않음)
✅ https://example.com (SSL/TLS 암호화)

3. 악성 QR 코드 방지

// QR 코드 스캔 전 URL 미리보기 표시
function previewQRContent(url) {
  alert(`이동할 URL: ${url}\n계속하시겠습니까?`);
}

4. 개인정보 최소화

❌ 민감한 정보 직접 포함:
VCARD with SSN, credit card, password

✅ 안전한 참조 링크:
https://secure.site/profile?token=abc123

인쇄 가이드

1. 해상도

최소 DPI: 300 DPI (인쇄용)
권장 DPI: 600 DPI (고품질)

계산:
QR 크기 3cm × 300 DPI = 354px
QR 크기 3cm × 600 DPI = 708px

2. 색상 모드

웹용: RGB 모드
인쇄용: CMYK 모드 변환 필요

3. 테스트 인쇄

1. 테스트 인쇄 (A4 용지)
2. 실제 크기로 스캔 테스트
3. 다양한 스캐너 앱으로 확인
4. 조명 조건별 테스트

4. 재질별 최적화

재질	고려사항
용지	무광 선호 (반사 방지)
플라스틱	스크래치 방지 코팅
금속	레이저 각인 (높은 대비)
천	큰 크기, 단순한 데이터

사용 팁

1. 데이터 최적화

❌ 긴 URL: https://example.com/very/long/path/to/resource?param1=value1&param2=value2

✅ 짧은 URL: https://bit.ly/abc123
또는 도메인 단축: https://ex.co/resource

2. 로고 삽입

// 중앙에 로고 배치 시
// 오류 수정 레벨 H(30%) 사용 권장
// 로고 크기는 QR 코드의 10-30% 이내

3. 테스트 체크리스트

□ 다양한 스캔 앱 테스트
  - iOS 기본 카메라
  - Android 기본 카메라
  - 서드파티 QR 스캐너
□ 조명 조건 확인
  - 실내 조명
  - 야외 자연광
  - 어두운 환경
□ 거리별 테스트
  - 가까운 거리 (10cm)
  - 중간 거리 (50cm)
  - 먼 거리 (1m+)
□ 각도별 테스트
  - 정면
  - 측면 (최대 45도)

4. 모니터링

// URL에 트래킹 파라미터 추가
const trackedUrl = 'https://example.com/page?utm_source=qr&utm_medium=poster&utm_campaign=2024spring';

// Google Analytics로 스캔 추적
// 캠페인별 효과 측정

트러블슈팅

스캔이 안 될 때

1. 크기 확인

   • 너무 작지 않은지 확인
   • 최소 2×2cm 권장

2. 대비 확인

   • 전경색과 배경색 대비 증가
   • 검은색/흰색 조합 테스트

3. 마진 확인

   • "Include Margin" 옵션 활성화
   • 주변 여백 충분한지 확인

4. 오류 수정 레벨 상향

   • L → M → Q → H 순서로 시도

5. 인쇄 품질

   • 해상도 증가 (300+ DPI)
   • 선명한 인쇄 확인

데이터가 너무 많을 때

증상: QR 코드가 너무 복잡하고 밀집됨

해결 방법:
1. URL 단축 (bit.ly, tinyurl 등)
2. 오류 수정 레벨 낮추기 (H → L)
3. 여러 개의 QR 코드로 분할
4. 웹페이지에 정보 저장 후 링크만 QR 코드로

관련 도구

• Base64 Image Viewer - Base64 이미지 변환
• URL Encoder - URL 인코딩
• Image to Base64 - 이미지 변환

추가 리소스

• QR Code Specification - QR 코드 표준
• ZXing - 오픈소스 QR 코드 라이브러리
• QR Code Generator API - API 문서

베스트 프랙티스

1. URL 관리

// 단축 URL 사용 + 리다이렉트 관리
const urlMap = {
  'menu': 'https://restaurant.com/menu',
  'wifi': 'https://restaurant.com/wifi',
  'feedback': 'https://restaurant.com/survey'
};

// QR 코드에는 짧은 버전 사용
// https://r.co/menu

2. 버전 관리

QR 코드 재인쇄 최소화:
- URL을 변경 가능한 리다이렉트로 설정
- 콘텐츠는 웹페이지에서 업데이트
- QR 코드 자체는 고정된 URL 유지

3. 분석 통합

// Google Analytics 이벤트 트래킹
function trackQRScan(campaign) {
  gtag('event', 'qr_scan', {
    'campaign': campaign,
    'timestamp': new Date().toISOString()
  });
}

4. 접근성 고려

□ QR 코드와 함께 텍스트 URL 제공
□ 대체 접근 방법 제시 (웹사이트 검색 등)
□ 명확한 안내문 ("스캔하여 접속하세요")
□ 충분한 크기와 위치 배치