카카오 알림 디자인 스펙¶

요지¶

선생님이 커스텀 메시지를 쓰고 미리보는 화면과 역할별 알림 설정 화면의 흐름·상태를 다룬다. 아래 화면·컴포넌트·상태는 원본이 스케치 수준이라 기획(prd)에서 역산한 1차 골격이다.

🚧 내용 추가 필요

메시지 작성·미리보기 전용 Figma 미입수(원본은 UI 스케치). 디자이너가 확정 시 — 메시지 에디터 + 치환 변수 삽입 UI·실시간 미리보기 패널 레이아웃·대상 선택 리스트(개별/일괄)·서비스 필수(고정) vs 마케팅(가변) 토글 시안을 본문에 명세. 아래는 그 전까지의 정책 기반 골격.

상위 PRD (링크)¶

기획(자동/수동 발송·치환 변수·역할별 설정)은 prd, 구현은 frd.

사용자 플로우¶

스터디룸 > 메시지 발송
  ├─ 템플릿 선택 / 자유 입력 (치환 변수 %학생명%)
  ├─ 실시간 미리보기
  ├─ 대상 선택(개별/일괄: 학생/보호자)
  └─ 발송 → 결과 토스트
마이페이지 > 알림 설정: 서비스 필수 알림(ON 고정) / 마케팅 알림(토글)

화면 · 컴포넌트 (Figma 링크)¶

메시지 에디터: 입력창 + 변수 삽입 + 미리보기 패널.
대상 선택: 학생/보호자 체크 리스트(개별·전체).
설정 토글: 서비스 필수(비활성 고정 표시) vs 마케팅(가변 토글).
에셋·Figma 미확정(원본 UI 스케치). 토큰·컴포넌트는 design-system.

인터랙션 · 상태¶

변수 입력 시 미리보기 즉시 치환 반영. 발송 전 대상·내용 확인. 실패 항목은 사유 노출.
상태: 작성 / 미리보기 / 발송 중 / 성공 / 실패(사유 표시).
안전장치(PRD §요구사항): 미리보기 확인 전 발송 버튼 비활성, 변수 누락·글자수 초과 경고, 다수 대상 시 미리보기는 첫 수신자 기준.

접근성¶

토글·체크 상태에 색 외 보조 표식. 미리보기 영역 스크린리더 라벨.

개발 핸드오프 노트¶

미리보기 패널은 모바일에서 작성창 하단/탭 전환. 브레이크포인트 공통 responsive.
에디터·미리보기·대상 선택 상태와 템플릿/치환 변수 매핑 규약은 dev-handoff. 발송 API·템플릿 구조는 frd. 앱키·시크릿 등 자격증명 값은 미노출(환경변수).