트랜잭션 이메일(인증/재설정) HTML 템플릿 운영 팁

HTML 이메일은 웹 프런트와 달리 제약이 많습니다.

• CSS 지원이 제각각(특히 Outlook)
• 외부 JS 불가
• 이미지/폰트도 제한적

그래서 table 기반 레이아웃 + 최소 CSS가 아직도 가장 안정적인 선택입니다.

1) 기본 원칙

• text/plain 버전도 함께 제공(메일 서버/클라이언트 호환)
• 중요한 정보(인증 코드/링크)는 텍스트로도 노출
• 너무 화려한 CSS/레이아웃은 피하기

2) 인증 코드 메일 패턴(추천)

• 중앙 정렬
• “코드 박스”는 배경색 + 큰 폰트 + letter-spacing
• 만료 시간 명시

3) CTA 버튼 패턴(추천)

• <a>를 버튼처럼 스타일링(메일 클라이언트 호환)
• 모바일에서는 버튼이 너무 작지 않게(터치 타겟)

4) 보안/운영 포인트

• 링크에 민감정보를 넣지 말고 토큰만 넣기
• 토큰 TTL을 짧게(예: 10~30분) + 1회성
• 메일 발송 실패 시에도 “계정 존재 여부”를 유추할 수 없게 응답 통일

같이 보면 좋은 문서:

• (라이브러리) nodemailer
• 비밀번호 재설정(Reset Password) 안전하게 만들기