링크 애그리게이터 또는 디렉터리를 위한 웹사이트 썸네일 자동화

Source: Dev.to

소개

링크 집계기, 디렉터리, 혹은 북마크 관리자를 만들고 있다면, 모든 링크에 대해 미리보기 썸네일을 수동으로 스크린샷을 찍지 않고 표시하는 방법이 궁금할 것입니다. 해결책은 스크린샷 API를 사용해 이 과정을 자동화하는 것입니다.

스크린샷 API 예시

async function captureThumb(url) {
  const response = await fetch('https://api.rendly.dev/v1/screenshot', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      url,
      width: 1280,
      height: 720,
      format: 'webp',
      quality: 80
    })
  });

  if (!response.ok) throw new Error(`Screenshot failed: ${response.status}`);
  return response.json();
}

큐 처리

새 URL이 시스템에 들어오면 데이터베이스에 저장하고 썸네일 큐에 작업을 추가합니다.

async function onNewLink(link) {
  await db.links.create({ url: link.url, title: link.title, thumb: null });
  await thumbnailQueue.add({ linkId: link.id, url: link.url });
}

thumbnailQueue.process(async (job) => {
  const { linkId, url } = job.data;
  const result = await captureThumb(url);
  await db.links.update(linkId, { thumb: result.url });
});

주기적 새로 고침

웹사이트는 변하기 때문에 썸네일이 오래될 수 있습니다. 일정에 따라 오래된 썸네일을 새로 고칩니다.

async function refreshStaleThumbs() {
  const staleLinks = await db.links.where(
    'thumb_updated_at < ?',
    new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) // 30 days
  );

  for (const link of staleLinks) {
    await thumbnailQueue.add({ linkId: link.id, url: link.url, refresh: true });
  }
}

레이지 로딩 & 플레이스홀더

레이지 로딩

[Image: ${link.title}]

대체 플레이스홀더

function thumbUrl(link) {
  return link.thumb || `/placeholders/${getDomainColor(link.url)}.svg`;
}

반응형 크기

다양한 상황에 맞게 다른 썸네일 크기를 제공합니다.

const listThumb = await captureThumb(url, { width: 640, height: 360 });
const detailThumb = await captureThumb(url, { width: 1280, height: 720 });

사용 사례

• 링크 집계기(예: 미리보기가 있는 Hacker News)
• 북마크 관리자(Raindrop.io, Pocket 스타일)
• 웹 디렉터리(도구·리소스 큐레이션 리스트)
• 포트폴리오 사이트(프로젝트 썸네일 표시)
• 경쟁 분석 대시보드

확장성 고려 사항

대부분의 스크린샷 API, 특히 Rendly는 단계별 요금제를 제공해 대규모에서도 비용 효율적으로 이용할 수 있습니다.

결론

썸네일 자동화는 “있으면 좋은” 기능을 제품의 신뢰할 수 있는 핵심 요소로 바꿔줍니다. 패턴은 간단합니다:

1. 입력 시 캡처한다.
2. 확장성을 위해 작업을 큐에 넣는다.
3. 주기적으로 새로 고친다.

사용자는 풍부한 미리보기를 즐기고, 여러분은 더 이상 수동으로 스크린샷을 찍을 필요가 없습니다.