Messaging
상황의 영향 범위와 긴급도에 맞는 메시지 컴포넌트를 골라요.
메시지는 시스템이 사용자에게 말을 거는 순간이에요. 잘 쓴 메시지는 신뢰를 쌓지만, 너무 많거나 너무 시끄러운 메시지는 작업을 방해하고 결국 무시당해요. 얼마나 넓은 범위에 영향을 주는지, 얼마나 급한지, 사용자가 무엇을 해야 하는지를 기준으로 컴포넌트를 골라요.
무엇을 언제
| 컴포넌트 | 범위 | 위치 | 사라짐 | 이럴 때 |
|---|---|---|---|---|
| Banner | 앱 전체 | 화면 맨 위, 콘텐츠를 아래로 밀어냄 | 원인이 해결될 때까지 유지 | 데이터·기능을 잃을 수 있는 치명적인 시스템 상황 |
| Flag | 방금 한 행동 | 화면 왼쪽 아래에 떠오름 | 닫기 또는 자동 사라짐 | 저장·이동·초대 같은 작업의 확인과 결과 |
| Section message | 화면의 한 영역 | 영향받는 영역 위 | 상황이 바뀔 때까지 유지 | 이 영역에 관한 안내·경고·오류 |
| Inline message | 특정 요소 하나 | 요소 바로 옆 아이콘 | 클릭해서 펼침 | 공간이 좁을 때 필요한 행동이나 부가 정보 |
| Modal dialog | 현재 작업 | 화면 위 레이어 | 사용자가 결정해야 닫힘 | 삭제 확인처럼 반드시 답을 받아야 하는 결정 |
| 폼 검증 메시지 | 필드 하나 | 필드 바로 아래 | 고치면 사라짐 | 입력 오류 → Forms |
고르는 순서
- 사용자가 결정해야만 진행할 수 있나요? → Modal dialog
- 앱 전체의 사용에 영향을 주나요? (점검, 결제 실패, 권한 만료) → Banner
- 방금 한 행동의 결과인가요? → Flag
- 화면의 특정 영역에 관한 내용인가요? → Section message
- 공간이 좁고 요소 하나에 붙는 내용인가요? → Inline message
Banner
- 한 번에 하나만 보여줘요. 닫을 수 없고, 원인이 사라지면 함께 사라져요.
- 오류·경고처럼 정말 중요한 내용에만 써요. 보조 기술이 즉시 읽어 주는
alert역할이라 남발하면 시끄러워요. - 잘리면 펼칠 방법이 없으니 문구를 짧게 써요. 원인, 영향받는 기능, 해결 방법 순서로 써요.
Flag
- 사용자가 방금 한 행동에 대한 이벤트성 확인이에요. "이슈를 보드로 옮겼어요", "3명을 초대했어요".
- 성공처럼 가벼운 내용은 자동으로 사라지게 하고, 오류처럼 놓치면 안 되는 내용은 닫기 전까지 남겨요.
- 여러 개가 쌓이면 최신 것이 위로 와요. 플래그 하나에 액션은 두 개까지만 둬요. (예: "되돌리기", "보기")
Section message
- 영향받는 영역 바로 위에 둬요. 페이지 전체가 아니라 이 페이지·패널·목록에 관한 내용이에요.
- 제목으로 상황을 요약하고, 본문에서 이유와 해결 방법을 설명해요. 필요하면 링크형 액션을 붙여요.
Inline message
- 아이콘과 짧은 문구만 보이고, 누르면 자세한 내용이 펼쳐져요. 표의 한 셀, 필드 옆처럼 공간이 좁을 때 좋아요.
- 사용자가 펼쳐 보지 않을 수도 있으니 꼭 알아야 하는 내용은 다른 컴포넌트로 보여줘요.
메시지 유형
모든 메시지 컴포넌트는 같은 유형 체계를 써요. 색과 아이콘이 의미를 나타내지만, 색만으로 구분하지 않도록 문구와 아이콘을 함께 써요.
| 유형 | 토큰 | 언제 |
|---|---|---|
| Information | bg-ds-background-information, text-ds-icon-information | 맥락을 더해 행동을 돕는 정보 |
| Success | bg-ds-background-success, text-ds-icon-success | 작업이 잘 끝났음을 알림 |
| Warning | bg-ds-background-warning, text-ds-icon-warning | 데이터 손실이나 오류로 이어질 수 있는 변화를 미리 알림 |
| Error | bg-ds-background-danger, text-ds-icon-danger | 문제가 생겼고, 다음에 무엇을 하면 되는지 알림 |
| Discovery | bg-ds-background-discovery, text-ds-icon-discovery | 새 기능 소개 |
문구 쓰기
Do· 해결 방법을 함께
"연결이 끊겼어요. 다시 연결하면 변경 사항이 저장돼요." 처럼 다음 행동을 알려줘요.
Don't· 원인만 나열
"오류 코드 503" 처럼 사용자가 할 수 있는 일이 없는 메시지는 피해요.
- 시스템 문제는 "저희가" 책임지는 말투로 써요. 사용자를 탓하지 않아요.
- 제목은 결과를, 본문은 이유와 방법을 담아요.
- 같은 상황에는 언제나 같은 컴포넌트와 같은 문구를 써요.