고객이 택배사의 추적 링크를 클릭할 때마다 여러분의 사이트를 떠나게 됩니다. 이는 인게이지먼트, 브랜딩, 고객 지원 부담 감소의 기회를 놓치는 것입니다. 브랜드 추적 페이지는 고객을 여러분의 도메인에 머물게 하면서 더 나은 경험을 제공합니다. 지금부터 함께 만들어 보겠습니다.

왜 브랜드 추적 페이지가 필요한가요?

택배사 추적 페이지의 한계

고객을 택배사의 추적 페이지로 보내면 다음과 같은 문제가 생깁니다:

  • 고객이 여러분의 브랜드 경험을 벗어나게 됩니다
  • 고객이 보는 것은 여러분의 프로모션이 아닌 택배사의 광고입니다
  • 고객이 여러분의 지원팀에 쉽게 연락할 수 없습니다
  • 추적 정보가 혼란스러우면 택배사가 아닌 여러분 탓을 합니다

브랜드 추적 페이지의 효과

효과기대 수치
고객 사이트 이탈 방지재방문 페이지뷰 +15%
CS 문의 감소배송 추적 문의 -40%
추가 매출 기회관련 상품 추천 노출
브랜드 일관성전문적인 구매 후 경험
데이터 수집고객 인게이지먼트 분석

아키텍처 개요

Customer clicks tracking link
         ↓
Your branded tracking page
         ↓
JavaScript fetches tracking data from your API
         ↓
Your API calls WhereParcel → Returns standardized data
         ↓
Render tracking timeline + brand elements

1단계: 백엔드 API 엔드포인트

WhereParcel 요청을 프록시하는 API 엔드포인트를 생성합니다:

// routes/tracking.js
const express = require('express');
const router = express.Router();

router.get('/api/track/:trackingNumber', async (req, res) => {
  const { trackingNumber } = req.params;

  try {
    // Look up order by tracking number
    const order = await db.orders.findByTracking(trackingNumber);

    // Fetch tracking data from WhereParcel
    const tracking = await fetch('https://api.whereparcel.com/v2/track', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.WHEREPARCEL_API_KEY}:${process.env.WHEREPARCEL_SECRET_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        trackingItems: [{ carrier: order?.carrier || 'auto', trackingNumber }],
      }),
    }).then(r => r.json());

    res.json({
      order: order ? {
        id: order.id,
        items: order.items.map(i => ({
          name: i.name,
          image: i.imageUrl,
          quantity: i.quantity,
        })),
      } : null,
      tracking: tracking.data,
    });
  } catch (error) {
    res.status(500).json({ error: 'Unable to fetch tracking data' });
  }
});

module.exports = router;

2단계: 추적 페이지 HTML 구조

추적 페이지의 기본 구조를 만듭니다:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Track Your Order | YourStore</title>
  <style>
    /* See Step 4 for full styles */
  </style>
</head>
<body>
  <header class="tracking-header">
    <a href="/" class="logo">
      <img src="/logo.svg" alt="YourStore" />
    </a>
    <a href="/support" class="support-link">Need help?</a>
  </header>

  <main class="tracking-container">
    <!-- Search form (if no tracking number in URL) -->
    <div id="search-section" class="search-section">
      <h1>Track Your Order</h1>
      <form id="tracking-form">
        <input
          type="text"
          id="tracking-input"
          placeholder="Enter your tracking number"
          required
        />
        <button type="submit">Track</button>
      </form>
    </div>

    <!-- Results -->
    <div id="results-section" class="results-section" style="display:none">
      <div id="status-banner" class="status-banner"></div>
      <div id="order-items" class="order-items"></div>
      <div id="tracking-timeline" class="tracking-timeline"></div>
    </div>

    <!-- Loading state -->
    <div id="loading" class="loading" style="display:none">
      <div class="spinner"></div>
      <p>Fetching tracking information...</p>
    </div>
  </main>

  <footer class="tracking-footer">
    <p>&copy; 2026 YourStore. All rights reserved.</p>
  </footer>

  <script src="/tracking.js"></script>
</body>
</html>

3단계: 프론트엔드 JavaScript

추적 데이터를 가져와서 렌더링합니다:

// public/tracking.js

const STATUS_CONFIG = {
  pending: { label: 'Pending', icon: 'clock', color: '#6b7280' },
  info_received: { label: 'Info Received', icon: 'file', color: '#3b82f6' },
  picked_up: { label: 'Picked Up', icon: 'package', color: '#3b82f6' },
  in_transit: { label: 'In Transit', icon: 'truck', color: '#f59e0b' },
  out_for_delivery: { label: 'Out for Delivery', icon: 'map-pin', color: '#8b5cf6' },
  delivered: { label: 'Delivered', icon: 'check-circle', color: '#10b981' },
  exception: { label: 'Exception', icon: 'alert', color: '#ef4444' },
};

// Check URL for tracking number
const urlParams = new URLSearchParams(window.location.search);
const trackingNumber = urlParams.get('tn');

if (trackingNumber) {
  document.getElementById('tracking-input').value = trackingNumber;
  fetchTracking(trackingNumber);
}

// Form submission
document.getElementById('tracking-form').addEventListener('submit', (e) => {
  e.preventDefault();
  const tn = document.getElementById('tracking-input').value.trim();
  if (tn) {
    // Update URL without reload
    window.history.pushState({}, '', `?tn=${tn}`);
    fetchTracking(tn);
  }
});

async function fetchTracking(trackingNumber) {
  const loading = document.getElementById('loading');
  const results = document.getElementById('results-section');
  const search = document.getElementById('search-section');

  loading.style.display = 'flex';
  results.style.display = 'none';

  try {
    const response = await fetch(`/api/track/${trackingNumber}`);
    const data = await response.json();

    if (!response.ok) throw new Error(data.error);

    renderResults(data);
    results.style.display = 'block';
  } catch (error) {
    results.innerHTML = `
      <div class="error-message">
        <h2>Unable to find tracking information</h2>
        <p>Please check your tracking number and try again.</p>
      </div>
    `;
    results.style.display = 'block';
  } finally {
    loading.style.display = 'none';
  }
}

function renderResults(data) {
  const { tracking, order } = data;
  const config = STATUS_CONFIG[tracking.status] || STATUS_CONFIG.pending;

  // Status banner
  document.getElementById('status-banner').innerHTML = `
    <div class="status-icon" style="background: ${config.color}20; color: ${config.color}">
      ${config.label}
    </div>
    <h2>${getStatusMessage(tracking.status)}</h2>
    ${tracking.estimatedDelivery
      ? `<p class="eta">Estimated delivery: ${formatDate(tracking.estimatedDelivery)}</p>`
      : ''}
  `;

  // Order items (if available)
  if (order?.items?.length) {
    document.getElementById('order-items').innerHTML = `
      <h3>Your Items</h3>
      <div class="items-grid">
        ${order.items.map(item => `
          <div class="item-card">
            <img src="${item.image}" alt="${item.name}" />
            <span>${item.name}</span>
            <span class="qty">x${item.quantity}</span>
          </div>
        `).join('')}
      </div>
    `;
  }

  // Timeline
  document.getElementById('tracking-timeline').innerHTML = `
    <h3>Tracking History</h3>
    <div class="timeline">
      ${tracking.events.map((event, i) => `
        <div class="timeline-event ${i === 0 ? 'latest' : ''}">
          <div class="timeline-dot"></div>
          <div class="timeline-content">
            <div class="event-time">${formatDateTime(event.timestamp)}</div>
            <div class="event-status">${event.description}</div>
            ${event.location ? `<div class="event-location">${event.location}</div>` : ''}
          </div>
        </div>
      `).join('')}
    </div>
  `;
}

function getStatusMessage(status) {
  const messages = {
    pending: 'Your order is being prepared',
    picked_up: 'Your package has been picked up',
    in_transit: 'Your package is on its way',
    out_for_delivery: 'Your package is out for delivery today!',
    delivered: 'Your package has been delivered',
    exception: 'There is an issue with your delivery',
  };
  return messages[status] || 'Tracking your package';
}

function formatDate(dateStr) {
  return new Date(dateStr).toLocaleDateString('en-US', {
    weekday: 'long', month: 'long', day: 'numeric',
  });
}

function formatDateTime(dateStr) {
  return new Date(dateStr).toLocaleString('en-US', {
    month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit',
  });
}

4단계: CSS 스타일링

브랜드에 맞게 스타일을 적용합니다:

:root {
  --brand-primary: #4f46e5;
  --brand-secondary: #818cf8;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --border: #e5e7eb;
}

.tracking-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.status-banner {
  text-align: center;
  padding: 2rem;
  background: var(--bg-secondary);
  border-radius: 12px;
  margin-bottom: 2rem;
}

.status-icon {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.timeline-event {
  position: relative;
  padding-bottom: 1.5rem;
}

.timeline-dot {
  position: absolute;
  left: -2rem;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border);
  border: 3px solid var(--bg-primary);
}

.timeline-event.latest .timeline-dot {
  background: var(--brand-primary);
}

.event-time {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.event-status {
  font-weight: 500;
  color: var(--text-primary);
}

.event-location {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

5단계: 인게이지먼트 요소 추가

추적 페이지의 가치를 극대화합니다.

추천 상품 노출

function renderRecommendations(order) {
  if (!order) return;

  return `
    <section class="recommendations">
      <h3>You might also like</h3>
      <div class="product-grid">
        ${getRelatedProducts(order.items).map(product => `
          <a href="${product.url}" class="product-card">
            <img src="${product.image}" alt="${product.name}" />
            <span class="product-name">${product.name}</span>
            <span class="product-price">${product.price}</span>
          </a>
        `).join('')}
      </div>
    </section>
  `;
}

고객이 배송을 기다리는 동안 관련 상품을 추천하면 자연스러운 추가 매출 기회가 됩니다. 구매한 상품과 연관된 액세서리, 소모품, 또는 인기 상품을 노출하는 것이 효과적입니다.

배송 완료 후 피드백 수집

배송이 완료되면 배송 경험에 대한 피드백을 요청합니다:

if (tracking.status === 'delivered') {
  resultsHTML += `
    <section class="feedback-section">
      <h3>How was your delivery experience?</h3>
      <div class="rating-buttons">
        <button onclick="submitRating(5)">Excellent</button>
        <button onclick="submitRating(4)">Good</button>
        <button onclick="submitRating(3)">Average</button>
        <button onclick="submitRating(2)">Poor</button>
      </div>
    </section>
  `;
}

이렇게 수집한 피드백 데이터는 택배사별 배송 품질을 평가하고, 택배사 선택 전략을 수립하는 데 귀중한 자료가 됩니다. 또한 부정적인 피드백이 접수되면 CS팀이 선제적으로 대응할 수 있어 고객 만족도를 높이는 데 도움이 됩니다.

SEO 이점

브랜드 추적 페이지는 SEO 관점에서도 유리합니다:

  • 사이트 체류 시간 증가 — 고객이 추적 페이지를 여러 번 방문합니다
  • 이탈률 감소 — 고객이 여러분의 도메인 내에 머무릅니다
  • 내부 링크 — 상품, 블로그, 지원 페이지로의 연결이 가능합니다
  • 브랜드 권위 — 전문적인 추적 경험이 신뢰를 구축합니다

마무리

브랜드 추적 페이지는 구축할 수 있는 프로젝트 중 ROI가 가장 높은 것 중 하나입니다. CS 문의를 줄이고, 고객 인게이지먼트를 유지하며, 추가 매출 기회를 만들고, 전문적인 구매 후 경험을 제공합니다. WhereParcel의 API가 추적 데이터를 제공하므로 여러분은 프론트엔드 경험에만 집중하시면 됩니다.

참고 자료: