피드로 돌아가기
A Background-remover application finished by Ai
Dev.toDev.to
Backend

개발자가 Cloudflare Workers + D1 + Pages 스택으로 AI 배경 제거 웹서비스를 구축해 기존 localStorage 방식에서 크로스 디바이스 동기화 기능 추가

A Background-remover application finished by Ai

hui sun2026년 3월 28일2intermediate

Context

lokalStorage를 사용한 기존 시스템에서는 사용자가 기기를 변경할 때 크레딧 및 멤버십 정보가 손실되는 문제가 발생했다. 이로 인해 사용자 데이터의 지속성과 접근성이 제한되었다.

Technical Solution

  • localStorage에서 Cloudflare D1 데이터베이스로 마이그레이션: google_id, email, credits, membership, membership_expire, total_used 필드를 포함한 users 테이블 생성
  • Google Login 기능 도입: 로그인 후 모든 기기에서 사용자 데이터 자동 동기화
  • Cloudflare Workers를 정적 HTML 페이지 서빙에 활용: 홈(/) , 가격(​/pro) 페이지와 API 엔드포인트(/purchase)를 단일 Worker에서 라우팅 처리
  • PayPal 결제 통합 시 샌드박스와 프로덕션 API 주소 분리 및 자동 결제 실패 시 수동 확인 폴백 메커니즘 구현
  • Remove.bg API를 백엔드에서 호출: 이미지당 $0.07 비용으로 AI 배경 제거 기능 구현

Impact

일일 수백 건 방문 기준으로 Workers 프리 티어(일일 100,000 요청), D1 프리 티어(5GB 저장소), Pages 프리 티어(500MB) 범위 내에서 운영되고 있다.

Key Takeaway

Cloudflare Workers + D1 + Pages 조합은 소규모~중규모 웹 애플리케이션에서 글로벌 CDN과 극저 운영 비용을 함께 제공하므로, 크로스 디바이스 사용자 상태 관리가 필요한 프로젝트에서 경량 데이터베이스 도입으로 localStorage의 기기 의존성을 제거할 수 있다.


localStorage 기반 웹 애플리케이션을 다중 기기 환경으로 확장하려는 경우, Cloudflare D1에 간단한 사용자 테이블(google_id를 식별자로 사용)을 구성하고 소셜 로그인을 연동하면 별도의 서버 관리 없이 크로스 디바이스 데이터 동기화를 구현할 수 있다.

원문 읽기