이슈 #427
Jade Kim이(가) 6달 전에 변경
## 개요
리딤 코드 발송용 이메일 템플릿 제작 (HTML + 텍스트 버전)
## 이메일 구성 요소
### 기본 정보
- **발신자**: ALPHEA <support@alphea.ai> <noreply@alphea.io>
- **제목**: [ALPHEA] Founder Pass 사용권이 발급되었습니다 사용권 코드가 도착했습니다!
- **언어**: 한국어 (영어 버전은 추후 필요하면 제작) / 영어 (다국어 지원)
### 콘텐츠 구조
**헤더**
https://alphealabs-my.sharepoint.com/:w:/g/personal/chrispark_alphea_io/IQBqHITsZFaLQInduSszuEQ4Af7t60-fbV4KM8aqKDmMd7U?e=gfGX30 - ALPHEA 로고
- 환영 메시지
**본문**
- 리딤 코드 (크고 명확하게 표시)
- QR 코드 이미지 (스캔 가능)
- 혜택 설명 (AGX 포인트 / AI 서비스 기간)
- 유효기간 정보
- 사용 방법 안내
**푸터**
- ALPHEA 앱 다운로드 링크 (App Store / Google Play)
- 고객지원 연락처
- 개인정보처리방침 / 이용약관 링크
- 수신거부 안내
## 디자인 요구사항
### HTML 마크업 유의사항 버전
- 반응형 디자인 (모바일/데스크톱 최적화)
- 다크모드 지원
고려
- 주요 이메일 클라이언트 호환성 (Gmail, Outlook, iOS Mail)
- 인라인 CSS (외부 스타일시트 미지원 환경 대응)
- 이미지 로드 실패 시 대체 텍스트
### 텍스트 버전
- HTML을 볼 수 없는 환경 대응
- ASCII 아트로 구분선 활용
- 링크는 전체 URL 표시
## 디자인 변수 치환
템플릿에서 동적으로 치환될 변수:
```
{recipient_name} - 수신자 이름 (옵션)
{redeem_code} - 리딤 코드
{reward_type} - 혜택 종류 (AGX 포인트 / AI 서비스 월간 / 연간)
{reward_description} - 혜택 상세 설명
{agx_amount} - AGX 포인트 금액
{ai_service_days} - AI 서비스 일수
{expires_at} - 유효기간
{qr_code_url} - QR 코드 이미지 URL
{app_store_url} - App Store 링크
{google_play_url} - Google Play 링크
{support_email} - 고객지원 이메일
{unsubscribe_url} - 수신거부 링크
```
## 메시지 톤앤매너
- 친근하고 따뜻한 톤
- 명확하고 간결한 안내
- 행동 유도 문구 (CTA) 명확하게
- 전문적이면서도 접근하기 쉬운 언어
## 샘플 메시지 예시
```
안녕하세요, {recipient_name}님!
ALPHEA에서 특별한 선물을 보내드립니다.
━━━━━━━━━━━━━━━━━━━━
리딤 코드
ALPHEA-XXXX-XXXX-XXXX
━━━━━━━━━━━━━━━━━━━━
🎁 혜택: {reward_description}
⏰ 유효기간: {expires_at}까지
📱 사용 방법:
1. ALPHEA 앱을 다운로드하세요
2. 계정 로그인 후 '코드 입력' 메뉴로 이동
3. 위 코드를 입력하면 즉시 적용됩니다
QR 코드로 간편하게 사용하실 수도 있습니다!
[QR 코드 이미지]
감사합니다.
ALPHEA 팀
```
## 산출물
1. **HTML 템플릿**: `email-templates/redeem-code.html`
https://www.figma.com/design/hza5sOlnDV3u3BUJtMKOxs/QR-card?node-id=0-1&t=DUucT0YTfKJ2JxnN-1 2. **텍스트 템플릿**: `email-templates/redeem-code.txt`
3. **다국어 버전**: `email-templates/redeem-code-en.html` (영어)
4. **미리보기 샘플**: 실제 데이터로 채운 샘플 이메일 (스크린샷)
## 테스트 항목
- [ ] Gmail 데스크톱/모바일 렌더링 확인
- [ ] Outlook 데스크톱/웹 렌더링 확인
- [ ] iOS Mail 렌더링 확인
- [ ] 이미지 차단 시 대체 텍스트 확인
- [ ] 다크모드 표시 확인
- [ ] 변수 치환 정상 동작 확인
- [ ] 링크 클릭 동작 확인
- [ ] 스팸 필터 테스트 (SpamAssassin 등)
## 의존성
- #420 (Redeem Code 시스템) - 코드 포맷 확정
- #426 (SNS/문자 발송 기능) - 발송 시스템 연동
- Axi 캐릭터 에셋 (#264~#273) - 이메일 내 캐릭터 이미지 활용 검토
## 참고 자료
- REALLY GOOD EMAILS (https://reallygoodemails.com/)
- Litmus Email Design Guidelines
- Can I Email (https://www.caniemail.com/) - CSS 지원 확인
뒤로