MailPlanet: 이메일 출처를 전 세계 지도에 시각화하는 웹 앱

카테고리

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

서브카테고리

웹 개발

대상자

• 개발자 (Next.js, Mapbox, Drizzle ORM 사용 경험자)
• 기술적 이해도: 중간 (Next.js, TypeScript, API 통합 기초 지식 필요)

핵심 요약

• Next.js 기반 웹 앱으로 이메일 출처를 3D 지도에 시각화
• Postmark Webhook을 통해 이메일 수신 후 Abstract API로 IP 위치 추적
• Drizzle ORM으로 IP 정보 저장 및 Mapbox GL JS로 실시간 마커 표시

섹션별 세부 요약

1. 기능 개요

• 이메일을 2446e801971b017b07291e89d25592b3@inbound.postmarkapp.com으로 전송하면 실시간으로 지도에 마커 생성
• 마커 클릭 시 이메일 발신자 정보(제목, 출처) 확인 가능
• Mapbox GL JS 기반의 3D 지도 UI 제공

2. 기술 스택

• 프레임워크: Next.js (TypeScript 기반)
• 지도: Mapbox GL JS
• 데이터베이스: Drizzle ORM (IP, 위치, 이메일 카운트 저장)
• 지오로케이션: Abstract API (IP → 국가, 위도/경도, 국기 정보 제공)
• 이메일 처리: Postmark Webhook (사용량 제한: 최대 99건)

3. 구현 방법

• /api/inbound-email 라우트에서 Postmark Webhook 수신
• 이메일 헤더에서 발신자 IP 추출 후 Abstract API로 위치 정보 변환
• Drizzle ORM을 통해 IP/위치/이메일 카운트 저장 (중복 IP 시 카운트 증가)
• src/components/Planet.tsx에서 Mapbox 지도에 실시간 마커 업데이트

4. 프로젝트 목적

• Postmark의 Inbound 이메일 기능을 활용해 이메일 정보를 시각화로 재미있게 표현
• Postmark의 간편한 설정(인증, 서버 구성)을 강조

결론

• GitHub 코드를 참고해 빠르게 구현 가능 (https://github.com/mailplanet)
• 실무 적용 시 Postmark + Abstract API + Mapbox 연동 패턴 활용
• 이메일 데이터의 지리적 분포 분석에 유용한 시각화 도구로 활용 가능