인센티브박스: 개인의 저축 지갑

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 프론트엔드/백엔드 개발자: React + TypeScript, Supabase, Postmark 연동 기술 습득
• UX/UI 디자이너: 실시간 업데이트, 검색 기능, 모바일 호환성 등 사용자 경험 설계 참고
• 비즈니스 기획자: 이메일 쿠폰 관리 시스템의 시장적 가능성 분석
• 난이도: 중간 (AI 연동, 실시간 데이터 동기화 등 기술적 복잡도 존재)

핵심 요약

• AI 기반 이메일 쿠폰 추출: Claude 3 활용한 비구조화된 텍스트에서 구조화된 쿠폰 데이터 추출
• 실시간 데이터 동기화: Supabase Realtime을 통한 쿠폰 추가/삭제 시 즉시 UI 업데이트
• 웹 기반 아키텍처: React + TypeScript 프론트엔드, Node.js + Express 백엔드, Postmark 이메일 처리, Vercel 호스팅

섹션별 세부 요약

1. 소개 및 핵심 기능

• 이메일 기반 쿠폰 추출 및 구조화
• AI 구조화: Claude 3 (OpenRouter) 활용
• 검색 기능: 브랜드/카테고리 기준 필터링
• 알림 시스템: Supabase Realtime으로 실시간 쿠폰 업데이트

2. 프론트엔드 기술 스택

• 프레임워크: React + TypeScript + Vite (빠른 개발 환경)
• 상태 관리: Context API
• UI 구성 요소: 인라인 스타일 기반 커스텀 컴포넌트
• 라이브러리: React Router (네비게이션), Supabase (인증/데이터 저장)

3. 백엔드 기술 스택

• 서버: Node.js + Express
• 이메일 처리: Postmark Inbound Webhook
• AI 연동: OpenRouter를 통해 Claude 3 호출
• 데이터 저장: Supabase (DB, 인증, 실시간 업데이트)
• 환경 설정: .env 파일 기반 보안 구성

4. 이메일 처리 파이프라인

• 이메일 수신: Postmark 웹훅으로 이메일 내용 전달
• 데이터 추출: 발신자, 제목, 본문 파싱
• AI 처리: Claude 3으로 브랜드, 할인 금액, 만료일 등 정보 추출
• 저장 및 통지: Supabase에 저장 후 Supabase Realtime으로 클라이언트 알림

5. UX 설계 고려사항

• 시각적 구분: 만료 쿠폰은 희미한 빨강 배경으로 표시
• 검색 접근성: 헤더에 검색 기능 제공
• 보안: 인증 필요 (쿠폰 조회 시 개인정보 보호)
• 반응형 디자인: 모바일/데스크탑 호환

결론

• 핵심 기술 스택: Postmark (이메일 처리) + Claude 3 (AI 추출) + Supabase (데이터 저장/실시간 통신)
• 실무 적용 팁: AI 연동 시 Fallback Regex Parser로 오류 대응, Supabase Realtime으로 실시간 UI 업데이트 구현
• 구현 예시: npm run dev로 프론트엔드, npm run server로 백엔드 실행 후 valid-email@some-mail.com 계정으로 로그인하여 테스트 가능