QR Code API를 만들었고, 내가 배운 점

Source: Dev.to

API

아주 간단합니다. 엔드포인트는 하나입니다:

GET https://api.qrcodeapi.io/generate?data=&size=

QR 코드 이미지를 반환합니다.

옵션

예시 (투명 배경에 보라색 QR 코드)

curl "https://api.qrcodeapi.io/generate?data=hello&color=8b5cf6&bgColor=transparent&format=svg"

동적 QR 코드

정적 QR 코드는 목적지 URL을 변경해야 할 때까지는 괜찮지만, 그때는 모든 것을 다시 인쇄해야 합니다. 동적 QR 코드는 여러분이 제어하는 리디렉션 URL을 가리키므로 인쇄된 QR 코드를 건드리지 않고도 언제든지 대상 URL을 변경할 수 있습니다.

동적 링크 만들기

// Create a dynamic link
const response = await fetch('https://api.qrcodeapi.io/links', {
  method: 'POST',
  headers: { 'X-API-Key': 'your-key' },
  body: JSON.stringify({ url: 'https://example.com/campaign-v1' })
});
// Returns a short code like "abc123"
// QR code points to: https://qr.qrcodeapi.io/abc123

나중에 목적지 업데이트

await fetch('https://api.qrcodeapi.io/links/abc123', {
  method: 'PUT',
  headers: { 'X-API-Key': 'your-key' },
  body: JSON.stringify({ url: 'https://example.com/campaign-v2' })
});

Scan Analytics

Every scan of a dynamic link is tracked:

• 디바이스 유형 (모바일/태블릿/데스크톱)
• 국가 및 도시 (IP 지리 위치 기반)
• 리퍼러
• 타임스탬프

쿠키도, 지문 추적도 없습니다—기본 HTTP 요청 데이터만 사용하며, 프라이버시를 존중합니다.

const stats = await fetch('https://api.qrcodeapi.io/analytics/abc123', {
  headers: { 'X-API-Key': 'your-key' }
});

// Example response:
{
  totalScans: 1247,
  uniqueScans: 892,
  byDevice: { mobile: 743, desktop: 401, tablet: 103 },
  byCountry: { US: 521, UK: 234, DE: 189, /* ... */ },
  byDay: [{ date: '2025-12-15', scans: 87 }, /* ... */]
}

기술 스택

• 런타임: Vercel Serverless Functions
• 데이터베이스: Supabase (PostgreSQL)
• QR 생성: qrcode npm package
• 이미지 처리: sharp (로고 오버레이용)
• Geo‑IP: geoip-lite
• 결제: Stripe

전체적으로 약 15개의 API 엔드포인트가 9개의 서버리스 함수로 통합되어 있습니다 (Vercel Hobby 플랜은 함수 12개 제한이 있습니다 😅).

TypeScript SDK

npm 패키지도 배포됩니다:

npm install qrcode-api-sdk

import { QRCodeAPI } from 'qrcode-api-sdk';

const client = new QRCodeAPI({ apiKey: 'your-key' });

// Generate QR code
const qr = await client.generate({
  data: 'https://dev.to/',
  format: 'svg',
  color: '#000000'
});

// Create dynamic link
const link = await client.links.create({
  url: 'https://example.com/'
});

// Get analytics
const stats = await client.analytics.get(link.shortCode);

전체 TypeScript 타입이 포함되어 있습니다.

가격

무료 티어는 대부분의 사이드 프로젝트에 충분합니다; 유료 티어는 인디 개발자를 위해 가격이 책정되었습니다.

내가 다르게 할 일

• 동적 QR 코드를 먼저 시작 – 사람들이 실제로 비용을 지불하는 것이 바로 이것이다. 정적 생성은 일반적인 상품이다.
• SDK를 더 일찍 구축 – 타입이 포함된 적절한 TypeScript SDK는 개발자 경험을 크게 향상시킨다.
• SEO를 과소평가하지 말 것 – 내 트래픽의 절반은 “QR code API Node.js” 혹은 “dynamic QR code API” 같은 검색에서 온다. SEO 랜딩 페이지에 주말을 투자한 것이 효과가 있었다.

시도해 보기

• 🌐 웹사이트:
• 📚 문서:
• 📦 npm 패키지:

피드백을 받고 싶습니다, 특히 가격 및 기능 아이디어에 대해. 다음을 고려하고 있습니다:

• 대량 생성 엔드포인트 (여러 QR 코드를 포함한 ZIP 파일)
• QR 코드 템플릿 / 스타일
• 스캔 이벤트에 대한 웹훅 알림

유용한 것이 무엇인지 알려 주세요! 🙏