튜토리얼
Claude Opus 5.5로 다크 모드에서 깨지는 제품 이메일 진단하기
Claude Opus 5.5로 같은 이메일의 밝은 화면과 어두운 화면을 비교하고, 실패한 자산이나 스타일을 찾아 작게 고치세요.
Claude Opus 5.5로 같은 이메일의 밝은 화면과 어두운 화면을 비교하고, 실패한 자산이나 스타일을 찾아 작게 고치세요. HTML, 로고 파일, 실제 받은 편지함 스크린샷을 제공합니다. 브라우저 미리보기는 배치에는 도움이 되지만 이메일 앱의 동작을 인증하지는 못합니다. 제품, 혜택, 버튼부터 읽히게 한 뒤 장식을 다듬습니다.
템플릿을 고치기 전에 실패를 분류하세요
다크 모드 문제는 서로 다른 계층에서 생깁니다. 변경마다 전후를 비교할 수 있도록 원본 이메일을 남겨 두세요.
| 사라지는 것 | 먼저 볼 위치 | 첫 시도 |
|---|---|---|
| 로고 안의 어두운 글자 | 이미지의 투명 픽셀 | 두 배경에서 읽히는 승인된 로고 처리 |
| 버튼 글자 | 받은 이메일의 글자색과 배경색 | 해당 버튼의 색 조합 수정 |
| 제품 테두리 | 사진과 인접 배경 | 제품색을 바꾸지 않는 배경 포함 이미지 처리 |
| 이미지 차단 시 전체 메시지 | 이미지에만 들어 있는 정보 | 혜택과 목적지를 실제 텍스트로 유지 |
Litmus 다크 모드 가이드는 수신 환경별 변환과 로고 처리의 차이를 설명합니다. CSS 수정 한 번이 성공했다고 모든 앱에서 같을 것이라 약속하지 마세요. 유용한 결과물은 패치와 클라이언트를 명시한 테스트 표입니다.
작고 반복 가능한 수신 비교를 만드세요
가상의 병 제품 출시 메일이라면 주요 수신 앱 두 개에서 같은 메시지를 밝은 모드와 어두운 모드로 열어 네 장을 준비합니다. 앱, 운영체제, 가능한 경우 버전, 메시지 수정 번호, 이미지 로딩 상태를 기록하세요. 발송 플랫폼도 코드를 바꿀 수 있으므로 실제 플랫폼으로 보낸 메시지를 비교합니다.
병은 잘 보이지만 어두운 워드마크가 사라진다고 가정해 봅시다. 브랜드가 승인한 얇은 밝은 윤곽선과 배경이 있는 로고 두 안을 요청합니다. 실제 표시 크기로 비교하세요. 원본 폭 320픽셀을 160픽셀로 표시하면 2픽셀 선은 약 1 CSS픽셀이 됩니다. 원본 확대 화면이 아닌 160픽셀에서 평가해야 합니다. 이는 예시 치수이며 보편적인 로고 규격이 아닙니다.
이번 테스트에서는 제품 사진을 유지합니다. 로고, 사진, 버튼을 동시에 바꾸면 다음 오류를 찾기 어렵습니다. 후보 A와 B를 따로 저장하고 같은 메시지 내용으로 비교하세요.
만능 요령 대신 증거를 요구하는 프롬프트
[이메일 수정본], [HTML 파일], [로고 파일]과 실제 수신 스크린샷 [각 앱/버전/모드]를 비교하세요.
제품색, 승인된 로고 비율, 혜택 문구, 목적지 URL은 바꾸지 마세요.
각 화면의 읽기 어려운 요소를 찾고 이미지 픽셀 문제와 HTML/CSS 색 문제를 구분하세요. 보이는 증거를 설명하고 근거 없는 앱 동작을 추측하지 마세요.
각 결함에 최소 수정안을 제시하세요. 로고는 브랜드가 승인한 윤곽선과 배경 포함 처리를 비교하고 브랜드 마크를 새로 그리지 마세요.
변경 목록, 필요한 HTML 패치, 자산 버전, 제시한 앱의 두 모드를 포함한 테스트 표를 주세요. 이미지가 차단되어도 혜택과 버튼을 이해할 수 있어야 합니다.
승인된 도구로 렌더링이나 테스트 발송이 가능하면 실제 검사한 항목을 정확히 보고하세요. 그렇지 않으면 미검증으로 표시하고 다음에 비교할 수신 화면을 알려 주세요. 브라우저 미리보기만으로 호환성을 주장하지 마세요.다음 대화에서는 실패한 한 행만 다룹니다. 예를 들어 ‘B의 로고는 통과했지만 화면 4에서 버튼 글자가 사라집니다. 그 버튼만 바꿔 주세요’라고 요청하세요. 눈에 보이는 결함을 따라가면 전체 디자인을 다시 시작하지 않아도 됩니다.
무엇을 통과 기준으로 삼나요?
시험한 각 설정에서 브랜드를 알아보고 제품을 식별하며 행동 버튼을 찾을 수 있어야 합니다. 버튼을 열어 목적지를 확인하고 이미지 차단 상태도 따로 검사하세요. 시험하지 않은 앱은 통과 처리하지 말고 기록합니다. 검은 작업 화면에서 괜찮은 로고도 플랫폼 변환 뒤에는 실패할 수 있습니다.
2026년 5월 질문은 다크 모드에서 빨강·파랑 로고를 보존하는 방법을 묻습니다. 실제 디자인 제약이지만 제안 방식이 당신의 캠페인에서 검증되었다는 증거는 아닙니다. 본문의 예시는 가상이며 Opus 평가가 아닙니다.
다음 발송 전 질문
이메일 전체를 이미지 한 장으로 만들까요?
이미지를 차단하면 혜택이 사라지고 글자를 바꾸기도 어렵습니다. 완성형 홍보 이미지가 유용할 수는 있지만 핵심 정보는 이미지 밖에도 남겨 두세요.
Opus가 로고 파일 자체를 수정하나요?
실제 편집 여부는 환경에 제공된 도구에 달려 있습니다. 수정 파일을 받아 직접 확인하세요. 말로 한 권고는 편집된 자산이 아닙니다.
Panelly는 어느 단계에 쓰나요?
Panelly Studio에서 제품 홍보 이미지를 만들고 채팅으로 시각적 수정을 진행하세요. 이메일 HTML, 발송, 수신 테스트는 별도 단계이며 Opus 통합을 뜻하지 않습니다. 이미지 설명은 제품 대체 텍스트 가이드를 참고하세요.
