프라이버시 우선 vCard QR 코드 생성기 만들기 (백엔드 없이)

Source: Dev.to

왜 만들었나요

시도해 본 모든 QR 코드 생성기는 이메일을 요구하거나 구독을 강요하거나 내 연락처 데이터를 서버에 저장했습니다. 이런 단점 없이 명함용 QR 코드로 연락처 정보를 간단히 공유할 방법이 필요했습니다.

제약 조건

• 백엔드 없음 – 모든 것이 브라우저에서 실행됩니다.
• 연락처 정보가 내 디바이스를 떠나지 않습니다.

기술 스택

• HTML/CSS – 순수, 프레임워크 없이
• Tailwind CSS – CDN을 통해 스타일링
• qrcode.js – 클라이언트‑사이드 QR 생성
• qr-code-styling – 로고 오버레이 기능 제공
• GitHub Pages + Cloudflare – 전 세계 CDN을 갖춘 무료 호스팅

vCard란?

vCard는 연락처 정보를 위한 단순 텍스트 형식입니다. 예시:

john@example.com

이 문자열을 QR 코드에 인코딩하면 휴대폰이 vCard 형식을 인식하고 연락처 저장을 제안합니다.

예시 코드 (JavaScript)

// Generate a vCard string
const generateVCard = (name, phone, email, company) => {
  const [first, ...rest] = name.split(' ');
  const last = rest.join(' ');

  return `BEGIN:VCARD
VERSION:3.0
N:${last};${first};;;
FN:${name}
ORG:${company}
TEL;TYPE=WORK:${phone}
EMAIL:${email}
END:VCARD`;
};

// Generate QR code client‑side
const qrcode = new QRCode(document.getElementById('qr'), {
  text: generateVCard('John Doe', '+15551234567', 'john@example.com', 'Acme'),
  width: 256,
  height: 256,
  correctLevel: QRCode.CorrectLevel.H
});

이게 전부입니다—API 호출도, 데이터베이스도, 사용자 계정도 없습니다.

구독 없이 수익화

• Logo overlay – QR 코드에 회사 로고를 추가합니다.

배운 점

소스 코드는 GitHub에 공개되어 있으니 작동 방식을 확인하고 싶다면 확인해 보세요: (replace with the actual repository URL).