이메일을 지원 티켓으로 변환하는 Postmark Kanban Inbox

카테고리

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

서브카테고리

웹 개발

대상자

• 프론트엔드/백엔드 개발자
• AI/ML 모델을 활용한 시스템 구축에 관심 있는 개발자
• Postmark 웹훅과 Hugging Face API를 활용한 실시간 이메일 처리 시스템 개발자
• 난이도: 중간 (Express, React, Prisma, Tailwind 등 기술 스택 이해 필요)

핵심 요약

• Postmark Inbound Webhook을 통해 이메일을 자동으로 카테고리화하고 Kanban 카드로 변환
• facebook/bart-large-mnli 모델을 사용한 Zero-shot 분류 (fine-tuning 없이 티켓 카테고리 및 우선순위 분류)
• 모던 웹 기술 스택 사용: Node.js + Express, React + TypeScript, Tailwind CSS, Prisma + SQLite
• 로컬 환경에서 완전히 구동 가능 (ngrok으로 웹훅 설정, curl/JSON 테스트 지원)

섹션별 세부 요약

1. README 설정 가이드

• 로컬 환경 구동 방법

- 프론트엔드/백엔드 서버 동시 실행

- ngrok을 통한 Postmark Inbound Webhook 설정

- curl 또는 JSON을 사용한 로컬 테스트 지원

• 필수 의존성 설치

- Postmark API, Hugging Face Inference API 인증 정보 설정

2. 프로젝트 구조

• 백엔드: server/ 폴더에 Express + Prisma 기반 빠른 파일 기반 데이터 레이어
• 프론트엔드: client/ 폴더에 React + TypeScript + Tailwind CSS 기반 현대적인 UI
• 데이터 처리: Prisma + SQLite로 로컬 테스트 용이
• API 통합: TanStack Query로 API 데이터 관리 및 캐싱, @dnd-kit로 Kanban 드래그 앤 드롭 구현

3. 핵심 기술 스택

• AI 모델 활용: Hugging Face Inference API + facebook/bart-large-mnli 모델로 Zero-shot 분류
• 티켓 카테고리 및 우선순위 자동 분류
• UI/UX: Shadcn UI + Tailwind CSS로 일관된 인터페이스, Confetti animation으로 티켓 완료 시 피드백 제공
• 개발 환경: Vite + TypeScript 기반 빠른 개발 편의성

4. 개발자 노트

• 프론트엔드 개발자가 주로 작업했으나, 백엔드/ML 통합을 통해 새로운 기술 탐구
• 실시간 이메일 처리 시스템 구축 시 Postmark + AI 모델 결합의 효과성 강조

결론

• Postmark Inbound Webhook과 Zero-shot AI 분류 모델을 결합하면 자동화된 티켓 관리 시스템 구축 가능
• 로컬 환경에서 완전히 테스트 가능하며, https://github.com/iefendiev/postmark-kanban-inbox에서 전체 코드 확인 가능
• Express + React + Prisma + Tailwind 기반 구조로 확장성과 유지보수성 보장