Dub.co API 튜토리얼: 5분 안에 링크 단축기 구축

Source: Dev.to

프로덕션 환경에서 링크를 공유할 때마다—이메일 캠페인, Slack 연동, 혹은 사용자 대시보드에서든—다음 중 하나를 선택하게 됩니다: 직접 수동으로 처리하기, 제3자 서비스를 이용하기, 혹은 직접 구축하기.

오랫동안 개발자들이 떠올리는 가장 명확한 답은 Bitly였습니다. 2008년부터 업계 표준으로 자리 잡아 왔죠. 하지만 최근에 Bitly API를 사용해 보았다면, 제가 겪은 것과 같은 점을 눈치챘을 겁니다—기본적인 현대 앱이 기대하는 기능, 즉 맞춤 도메인, 괜찮은 분석, 안정적인 API 접근을 위해서는 월 $35가 필요합니다.

한편, Dub.co는 같은 기능을 전혀 비용 없이 제공하며 조용히 출시되었습니다.

저는 주말을 이용해 내 SaaS에 링크‑단축기 통합을 구축했고, 이제 Bitly를 완전히 배제하기로 했습니다. 5분 안에 구현하는 방법은 다음과 같습니다.

왜 이것이 중요한가: 링크 관리의 실제 비용

코드에 들어가기 전에 숫자 이야기를 해봅시다. 애플리케이션 전반에 걸쳐 링크를 관리하고 있다면 선택지는 세 가지입니다:

그것은 사소한 차이가 아닙니다. 완전한 비즈니스 모델 전환입니다.

Getting Started: Your First Link in 60 Seconds

The hardest part of using Dub.co is… there is no hard part.

1. Go to and sign up.
2. Create a workspace.
3. Get your API key from Settings → API Keys.

You’re done. You now have:

• A free custom domain (or bring your own)
• API access
• A dashboard with real‑time analytics
• QR‑code generation with your branding

튜토리얼: 링크 단축기 API 엔드포인트 만들기

예를 들어 이메일 캠페인 기능을 구축하고 사용자가 클릭한 링크를 추적해야 한다고 가정해 보세요. 여기서는 Dub.co 링크 단축을 백엔드에 50줄 이하로 추가하는 방법을 보여드립니다.

// Simple Node.js example with Dub API
const axios = require('axios');

async function createShortLink(longUrl, campaignName) {
  try {
    const response = await axios.post(
      'https://api.dub.co/links',
      {
        url: longUrl,
        domain: 'your-domain.com', // Your custom domain
        key: campaignName,          // Custom slug (optional)
        expiresAt: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000), // 30 days
        tags: ['campaign', 'email'],
      },
      {
        headers: {
          Authorization: `Bearer ${process.env.DUB_API_KEY}`,
          'Content-Type': 'application/json',
        },
      }
    );

    return response.data;
  } catch (error) {
    console.error(
      'Failed to create short link:',
      error.response?.data || error.message
    );
    throw error;
  }
}

// Usage
(async () => {
  const shortLink = await createShortLink(
    'https://example.com/ultra-long-product-page-that-nobody-wants-to-share',
    'Q1-2026-campaign'
  );

  console.log(`Short link: ${shortLink.shortUrl}`);
  console.log(`QR Code: ${shortLink.qrCode}`);
})();

분석 가져오기

async function getLinkAnalytics(shortUrl) {
  try {
    const response = await axios.get(
      `https://api.dub.co/links/info?url=${shortUrl}`,
      {
        headers: {
          Authorization: `Bearer ${process.env.DUB_API_KEY}`,
        },
      }
    );

    return response.data;
  } catch (error) {
    console.error(
      'Failed to fetch analytics:',
      error.response?.data || error.message
    );
    throw error;
  }
}

// Usage
(async () => {
  const analytics = await getLinkAnalytics('your-domain.com/Q1-2026-campaign');
  console.log(`Clicks: ${analytics.clicks}`);
  console.log(`Countries: ${JSON.stringify(analytics.countries)}`);
  console.log(`Devices: ${JSON.stringify(analytics.devices)}`);
})();

브랜드 QR 코드 생성

async function generateBrandedQR(shortUrl, brandColor) {
  // Returns a PNG URL you can embed directly
  return `https://api.dub.co/qr?url=${shortUrl}&color=${brandColor}`;
}

// Example
(async () => {
  const qrImage = await generateBrandedQR(
    'your-domain.com/Q1-2026-campaign',
    '3B82F6'
  );
  // Use `qrImage` in emails, PDFs, or your app
})();

실제 사용 사례: 이메일 캠페인 추적

전체 이메일 캠페인 시스템이 어떻게 생겼는지 예시를 보세요:

async function sendCampaignEmail(userEmail, productUrl, campaignId) {
  // 1️⃣ Create a short, trackable link
  const shortLink = await createShortLink(
    productUrl,
    `campaign-${campaignId}`
  );

  // 2️⃣ Generate a branded QR code
  const qrCode = await generateBrandedQR(shortLink.shortUrl, '3B82F6');

  // 3️⃣ Send email with both
  await sendEmail({
    to: userEmail,
    subject: 'Check out our latest product',
    html: `
      
We've got something new for you:

      [Click here](${shortLink.shortUrl})
      

      
Or scan this QR code:

      [Image: QR Code]
    `,
  });

  // 4️⃣ Later, check how many people actually clicked
  const analytics = await getLinkAnalytics(shortLink.shortUrl);
  console.log(`Campaign ${campaignId} clicks: ${analytics.clicks}`);
}

이게 전부입니다—5분이면 가격, 기능, 개발자 경험 모두에서 Bitly를 능가하는 완전한 기능을 갖춘 무료 링크 단축 솔루션을 만들 수 있습니다. 즐거운 코딩 되세요!

// Example: Get analytics for a short link
const analytics = await dub.getLinkAnalytics(shortLink.shortUrl);
console.log(`This link has been clicked ${analytics.clicks} times`);

Dub.co가 승리하는 이유 (특히 개발자를 위해)

• 오픈 소스 — SDK는 오픈 소스입니다. 공급업체에 종속되지 않습니다. 원한다면 직접 호스팅할 수도 있습니다.
• 개발자 우선 API — Dub.co는 개발자에 의해, 개발자를 위해 만들어졌습니다. API는 깔끔하고, 문서는 완전하며, 오류 메시지는 실제로 도움이 됩니다.
• 숨겨진 비용 없음 — 무료 플랜에서도 무제한 API 호출이 가능합니다. Bitly는 월 $35를 청구하면서도 여전히 속도 제한을 적용합니다.
• 맞춤형 브랜딩 — QR 코드에 로고와 브랜드 색상을 넣을 수 있습니다. 이는 전문적인 커뮤니케이션에 실제로 중요합니다.
• 실제 분석 — 클릭 수만이 아니라 지리 위치 데이터, 디바이스 정보, 리퍼러 소스 등 다양한 정보를 제공합니다.
• 팀 협업 — 내장된 팀 기능을 통해 마케팅 팀이 코드를 건드리지 않고도 링크를 관리할 수 있습니다.

한 가지 더: 맞춤 도메인

If you want your links to use your own domain (e.g., go.yourcompany.com instead of dub.co/...), just add it in the Dub.co dashboard and point your DNS records there. It takes 5 minutes, and now every link looks like it’s from your brand.

지금 시작하기

링크 관리, 제휴 추적, 이메일 캠페인, QR‑code 기능 등 어떤 형태든 구축하고 있다면, 사실상 Bitly에 월 $35를 지불하고 있는 것이며 Dub.co는 이를 무료로 제공합니다.

• 설정은 실제로 2 분이면 됩니다.
• API 통합은 10 분 정도 걸립니다.

결과는? 인프라 코드를 한 줄도 작성하지 않고도 제품에 전문적인 링크 관리, 분석, 팀 협업 기능이 내장됩니다.

여기에서 무료로 가입하세요 그리고 다음 5 분 안에 자체 도메인으로 짧은 링크를 만들기 시작하세요.