🧸 Daily UI 011
Prompt: 플래시 메시지
- 에러 메시지와 성공 메시지를 포함한 플래시 메시지를 디자인하세요.
- 이 메시지는 회원가입 폼을 위한 것인가요? 다운로드/업로드 상태 알림인가요? 아니면 멤버십 플랜 홍보를 위한 것인가요?
- Flash Message(플래시 메시지)는
사용자의 행동에 즉각 반응하여 일시적으로 보여지는 메시지입니다. - 예를 들어:
✅ "회원가입이 완료되었습니다!"
❌ "비밀번호가 일치하지 않습니다."
🔁 "파일이 업로드 중입니다..."
Flash Message의 핵심 목적
| 역할 | 설명 |
|---|---|
| 즉각적인 피드백 제공 | 사용자가 어떤 행동을 했을 때 그 결과를 알려줌 |
| 경고 또는 안내 | 오류나 유효성 문제 발생 시 사용자에게 수정 안내 |
| 성공 유도/보상 느낌 강화 | 완료된 행동에 대한 긍정적 피드백 제공 |
디자인 시 고려 요소
| 항목 | 설명 |
|---|---|
| 메시지 유형 | 🔴 에러 / 🟢 성공 / 🔵 정보 / 🟡 경고 등 |
| 색상 & 아이콘 | 사용자가 직관적으로 인지할 수 있게 시각 보조 요소 활용 |
| 위치 | 상단 고정 (Top Snackbar), 화면 중앙 모달, 입력창 근처 등 상황에 따라 다름 |
| 지속 시간 | 짧게 자동 사라지거나, 사용자가 직접 닫을 수 있도록 구성 |
| 접근성 | 스크린 리더가 읽을 수 있어야 하며, 대비가 명확해야 함 |
사용 예시 3가지
| 사용 시점 | 예시 메시지 | 비고 |
|---|---|---|
| 회원가입 후 | ✅ “가입이 완료되었습니다. 환영합니다!” | 성공 메시지 |
| 이메일 미입력 시 | ❌ “이메일을 입력해주세요.” | 에러 메시지 |
| 업로드 중 | 🔁 “이미지 업로드 중입니다…” | 진행 상태 메시지 |
UX 팁
- 에러 메시지에는 구체적 조치 안내 포함:
❌ “비밀번호 오류” → ✅ “비밀번호는 8자 이상이어야 합니다.” - 성공 메시지는 보상감 강화 문구 사용:
✅ “업로드 완료! 파일을 검토 중입니다.” - 사용 맥락을 반영한 UI 배치:
- 폼 제출 시 → 입력창 근처
- 시스템 전반 메시지 → 상단 또는 전체 오버레이
요약
- Flash Message는 사용자의 행동 결과에 대한 즉각적인 피드백 UI입니다.
- 에러와 성공 상황 모두에 맞춰, 시각적 요소 + 위치 + 언어 톤까지 고려한 디자인이 중요합니다.
- 단순히 보여주는 게 아니라, 사용자의 다음 행동을 자연스럽게 유도하는 UX 포인트로 활용됩니다.
🧸 결과물
