이메일 QA
필터: $ARGUMENTS
렌더러: ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/render-html.mjs
1. 모든 템플릿에 대한 최종 HTML 가져오기
- 갤러리 스크립트가 존재하는가? package.json에서
email-gallery,email:preview또는emails를 찾으세요. 하나가 모든 템플릿을 fixture 데이터로 작성한다면, 실행하고 출력 디렉터리를 사용하세요. - 아니면 하네스를 작성하세요.
/tmp/email-qa/render.ts에 (사용자가 유지하기를 원하지 않는 한 리포지토리 외부에):- 각 렌더러(React Email
render(), 템플릿 리터럴 함수, MJML)를 가져옵니다. - 실제 fixture로 호출하며, 긴 이름, 누락된 선택 필드, 0개/1개/여러 항목, 두 로케일 등 엣지 케이스를 포함합니다.
<template>-<case>.html을 작성합니다.- env, DB 또는 네트워크를 읽는 모든 것을 스텁 처리합니다. 리포지토리의
tsx로 실행합니다.
- 각 렌더러(React Email
- 항상 최종 생성된 HTML을 QA하고, JSX는 절대 QA하지 마세요.
2. 렌더링 + 정적 검사
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/render-html.mjs /tmp/email-qa/out/*.html --out /tmp/email-qa/shots
각 파일에 대해 @600/@375 라이트 및 다크, 그리고 @600-noimg와 정적 이슈가 있는 render.json이 생성됩니다. 모든 템플릿에 대해 시트를 읽으세요.
3. 체크리스트 (스크립트가 플래그하는 것 외에)
- 플레이스홀더:
undefined,NaN,null,[object Object],{{…}},Invalid Date, 빈kr, 숨겨져야 할 곳에 나타난0 st가 없어야 합니다. - 프리헤더: 존재하고, 의미 있으며, 제목과 반복되지 않아야 합니다. 본문 텍스트가 받은 편지함 미리보기로 새지 않도록 패딩 처리되어야 합니다.
- 구독 취소: 다이제스트 및 마케팅용으로 필수 (발송 코드에
List-Unsubscribe+List-Unsubscribe-Post헤더 포함). 트랜잭셔널 메일은 면제되며, 각 템플릿이 어떤 종류인지 명시하세요. - 이미지 꺼짐: 메시지가 여전히 의미가 있고, 모든 의미 있는 이미지에 대체 텍스트가 있으며, 스페이서에는
alt=""가 있고, CTA는 이미지가 아닌 라이브 텍스트여야 합니다. - 다크 모드: 로고에 투명 또는 다크 안전 변형이 있고, 어두운 배경에 어두운 텍스트가 없으며, 브랜드 색상이 여전히 3:1을 통과해야 합니다. Gmail/Outlook 강제 반전은 에뮬레이션할 수 없으므로, 투명 배경에 하드코딩된
#000텍스트를 위험으로 플래그하세요. - Outlook 데스크톱: 테이블 레이아웃, flex/grid 없음, 버튼용 VML 또는
mso패딩 대체,width=속성의 너비, 간격을 위한 블록 요소에margin없음. - 링크: 절대
https://, 프로젝트에서 사용하는 UTM, localhost 또는 미리보기 호스트 없음, 구독 취소 링크에 추적 없음. - 카피: 전체 로케일이 올바른지 (문자열에
copy-check규칙 실행), 보낸 사람 이름, 회신 주소 (프로젝트가 예상하는 대로). - 375px에서 스크롤 없이 CTA가 보이고 잘리지 않아야 합니다. 총 크기는 약 102KB 미만이어야 합니다.
종료 기준
- 모든 템플릿이 모든 변형으로 렌더링되었고 시트가 읽혔습니다.
- 플레이스홀더 누수나 상대 링크가 없으며, 뷰포트 메타가 존재합니다.
- 각 남은 이슈는 버그(수정됨) 또는 위험(보고됨)으로 표시됩니다.
- 사용자에게 간단한 요약과 shots 디렉터리가 제공됩니다.