● 캠페인 제안 · 완료(done) 화면 UX

생성된 메일을 “보내기 전에 검토”하도록
자연스럽게 유도하는 2026 패턴

현재 완료 화면은 검토·수정 기능이 이미 다 들어있지만 검토가 100% 선택이라, 가장 강조된 버튼을 누르면 메일을 한 번도 안 열고 발송 단계로 넘어갈 수 있습니다. 차단(blocking) 없이 검토를 기본 동선으로 끌어올리는 방법을 제안합니다.

지금 완료 화면에 이미 있는 것

별도 검토 페이지로 나눌 필요 없음 — 검토·수정 클로즈드 루프가 done 안에 있습니다.

구현됨 리드×스텝 매트릭스

hero 위젯 없이 결과 매트릭스가 중심. DoneEmailsMatrix

구현됨 셀 → 메일 전문 드로어

서식메일/원문 탭, deliverability 경고. DoneEmailDrawer

구현됨 인라인 수동 편집 + AI 재작성

제목·본문·발송시간 수정, 자연어로 이 메일만 재생성.

구현됨 행/열 배치 선택

일괄 재생성 · 발송시간 일괄 변경.

최소 변경 · 본질 집중. 새 기능을 얹기보다 흐름을 바로잡는 쪽.

갭 1 검토가 전적으로 선택

적응형 Primary Action. 미확인 상태엔 “메일 확인하기”가 primary, 한 번이라도 검토하면 “발송 시작”이 primary로 자연 역전. CSS 상태 기반, 차단 없음.

갭 2 라벨↔동작 미스매치

“발송 시작하기”인데 실제로는 /sequences/edit로 이동. 라벨 정직성 — 동작과 일치시키거나 done에서 바로 활성화.

갭 3 편집 경로 이원화

드로어 “전체 편집 화면”과 done 인라인 편집이 중복. 단일 편집 경로로 통합해 이탈 제거(김치볶음밥 원칙).

갭 4 검토 진행 신호 없음

가벼운 진행 표시. “12개 중 3개 확인” 같은 비강제 progress + 확인한 셀 ✓ 마킹. 진행감만 주고 막지 않음.

셀을 눌러 메일을 “확인”해 보세요. 확인이 쌓이면 하단 버튼 강조가 자연스럽게 역전됩니다.

완료 화면 · 리드별 생성 결과

0 / 9 메일 확인됨 · 먼저 메일을 살펴보면 더 안전하게 발송돼요

* 순수 CSS 상태([data-reviewed]) + 약간의 JS. React 포팅 시 Jotai/로컬 state 한 개로 동일 구현.

이 문서 자체가 데모 — 빌드 없이 vanilla 로 작성.

light-dark() 라이트 기본 + opt-in 다크 · @layer 우선순위 격리 · container queries 반응형 · color-mix() 토큰 파생.

네이티브 <dialog> 모달 · @view-transition 페이지 전환 · prefers-reduced-motion 존중 · JS 최소.