Notifications
Notifications (알림)
알림은 사용자와 소통하고 피드백을 제공하는 중요한 방법이에요. 사용자 동작에 대한 세분화된 인라인 응답부터 시스템 차원 메시지까지 다양합니다.
출처: Notifications
본문
개요 (Overview)
사용자에게 정보를 계속 전하고, 사용자가 알아야 할 업데이트나 상태 변경이 있을 때 알림을 보내는 것이 중요해요. 사용자가 목표를 향해 나아가는지 이해하도록 항상 적절하고 적시의 메시지를 주어야 합니다. 알림이 관련성 있고, 적시이며, 유익하도록 보장하세요.
| Key principle | Definition |
|---|---|
| Relevant | 알림은 사용자의 목표와 관련되어야 하고 사용자가 하고 있는 일의 맥락에서 제시되어야 해요. |
| Timely | 프롬프트 알림으로 사용자가 최신 상태를 유지하고 중요한 알림을 즉시 보게 하세요. |
| Informative | 사용자에게 알림을 이해하고 해결하는 데 필요한 맥락과 다음 단계를 제공하세요. |
알림을 보낼 때는 사용자를 배려하세요. 너무 자주 또는 방해가 되는 알림은 부정적 경험을 만들고 사용자를 플랫폼에서 멀어지게 합니다.
알림은 상태(status)와 유형(type)으로 구성됩니다. 상태는 전달되는 정보의 목적을 나타내요. 알림 유형은 특정 상황에 맞게 알림의 방해 수준을 조정할 수 있게 해줍니다. Carbon의 알림 상태와 유형 옵션은 각 사용 사례에 대해 관련성 있고, 적시이며, 유익한 알림을 만들도록 결합되어야 합니다.
알림 상태 (Notification status)
- 정보(Informational)
- 성공(Success)
- 경고(Warning)
- 오류(Error)
알림 유형 (Notification type)
- 인라인(Inline)
- 토스트(Toast)
- 동작형(Actionable)
- 콜아웃(Callout)
- 배너(Banner)
- 알림 패널(Notification panel)
- 모달(Modal)
알림으로 디자인하기 (Designing with notifications)
언제 사용할까요 (When to use)
알림을 사용해 중요한 상태 변경과 업데이트를 사용자에게 알리세요. 투명성은 사용자 신뢰 구축의 핵심 요소이며 Jakob Nielsen의 10가지 사용성 휴리스틱 중 첫 번째입니다. 사용자와 관련 있어야 하고 가능한 한 방해가 적어야 합니다. 알림에는 태스크 생성(task-generated)과 시스템 생성(system-generated)이라는 두 가지 주요 사용 사례가 있습니다.
태스크 생성 알림 (Task-generated notifications)
태스크 생성 알림은 특정 태스크 중 사용자 동작에 응답해 시작됩니다. 사용자에게 직접적이고 즉각적인 피드백을 줍니다. 사용자가 작업 중인 페이지 영역에 배치되어야 하고 사용자 동작과 관련되어야 해요.
다음과 같은 때 태스크 생성 알림을 보낼 수 있습니다.
- 폼이 성공적으로 제출됨
- 파일 업로드에 문제가 있음
- 자격 증명을 찾을 수 없음
시스템 생성 알림 (System-generated notifications)
이 알림은 사용자 동작과 무관하게 애플리케이션이나 시스템에 의해 시작됩니다. 백그라운드 시스템 상태나 완료된 맥락 외 이벤트에 대한 업데이트를 제공합니다.
다음과 같은 때 시스템 생성 알림을 보낼 수 있습니다.
- 사용자가 네트워크 연결을 잃음
- 계획된 시스템 유지 관리가 곧 있음
- 새 보고서가 준비됨
- 사용자의 로그인 세션이 곧 만료됨
언제 사용하지 말아야 할까요 (When not to use)
필요한 곳에만 알림을 보내세요. 각 알림을 그것이 관련된 인터페이스와 워크플로우의 부분으로 한정하세요. 방해를 받는 것은 사용자에게 좌절스럽고 낙담시키는 경험을 만들므로 가능한 한 제한해야 합니다. 게다가 빈번한 방해는 생산성을 낮추고 경고 피로(alert fatigue)로 이어질 수 있습니다.
알림 상태 (Notification status)
알림 상태는 전달되는 정보의 정서적 톤을 전달하도록 설계됩니다. 각 상태는 특정 색상과 아이콘과 연관되어 일관되고 보편적인 사용자 경험을 보장합니다.
무엇을 쓸지 정하기 (Deciding what to use)
| Status | Usage | Color | Icon |
|---|---|---|---|
| Informational | 사용자의 현재 동작이나 태스크에 연결되지 않을 수 있는 추가 정보를 사용자에게 제공 | Blue | information filled |
| Success | 태스크가 예상대로 완료되었음을 확인 | Green | checkmark filled |
| Warning | 바람직하지 않거나 예상치 못한 결과가 있을 수 있는 동작을 취하고 있음을 사용자에게 알림 | Yellow | warning filled |
| Error | 오류나 심각한 실패를 알리고, 선택적으로 문제가 해결될 때까지 진행을 차단 | Red | error filled |
알림 유형 (Notification types)
무엇을 쓸지 정하기 (Deciding what to use)
| Type | Usage | Duration and interaction |
|---|---|---|
| Inline | 사용자에게 비방해성 피드백 또는 동작의 상태 제공 | 메시지가 해결되거나 사용자가 닫을 때까지 지속, 고스트 버튼 동작 포함 가능 |
| Toast | 페이지에 슬라이드되며 들어오고 나가는 짧은 시간 기반 메시지로 비방해성 정보 제공 | 동작 없는 토스트 알림은 자동으로 사라지거나 사용자가 닫을 수 있음. 동작 있는 토스트 알림은 사용자가 닫을 때까지 지속 |
| Actionable | 인라인 또는 토스트 알림처럼 스타일링된 알림 내에 인터랙티브 요소를 허용 | 동작이 취해지거나 사용자가 닫을 때까지 지속 |
| Callout | 페이지 콘텐츠 내에서 맥락적으로 중요한 정보를 강조하는 데 사용 | 다른 알림 컴포넌트와 달리 사용자나 시스템에 의해 트리거되지 않고 페이지 콘텐츠와 함께 로드되며, 지속되고 닫을 수 없음 |
| Banner | 태스크에 특정하지 않은 시스템 또는 제품 수준 알림 | 사용자가 닫을 때까지 지속, 고스트 버튼이나 링크 포함 가능 |
| Notification panel | 시스템 생성 메시지를 제공하는 알림 센터 | 사용자가 열고 닫음 |
| Modal | 주의나 동작이 필요한 중요 정보를 제공하는 매우 방해적인 알림 | 사용자가 닫을 때까지 지속되고 태스크를 차단. 모달은 다른 알림보다 더 많은 사용자 동작을 허용하며 다른 Carbon 컴포넌트를 포함할 수 있음 |
인라인 알림 (Inline notification)
인라인 알림은 비방해적이며 UI의 특정 영역에 한정됩니다. 인라인 알림은 태스크 생성과 시스템 생성 메시지를 모두 표시하며 사용자가 닫거나 알림이 해결될 때까지 지속됩니다. 폼이나 다른 입력 영역의 오류에 대한 필드 수준 메시지와 함께 자주 사용됩니다.
Carbon은 저대비와 고대비 인라인 알림을 제공합니다. 모든 인라인 알림은 메시지 의도에 해당하는 색상을 사용하며 메시지 의도를 강화하는 아이콘과 함께할 수도 있습니다.
모범 사례 (Best practices):
- 인라인 알림을 관련 항목 근처에 배치하세요.
- 폼에서 인라인 알림은 상단 또는 하단에 배치될 수 있어요.
- 메시지를 두 줄 미만으로 유지하세요.
- 인라인 알림으로 다른 콘텐츠를 덮지 마세요.
- 알림 너비는 맥락과 페이지 레이아웃에 따라 달라져요.
- 설명적으로 하고 사용자에게 명확한 다음 단계를 주세요.
토스트 (Toast)
토스트는 보통 페이지의 오른쪽 위에서 슬라이드되며 들어오고 나가는 알림입니다. 인라인 알림보다 더 방해적이며, UI의 특정 섹션에 해당하지 않는 시스템 생성 메시지에 가장 적합합니다.
Carbon 토스트는 저대비 또는 고대비일 수 있습니다. 색상은 메시지 의도와 일치해야 하며 메시지 의도를 전달하기 위해 아이콘을 사용할 수도 있습니다.
긴 메시지 (Long messages)
타임스탬프를 제거하면 더 긴 토스트 메시지를 위한 세 번째 콘텐츠 줄의 공간을 제공합니다. 토스트는 화면의 작은 영역에 한정된 한눈에 보는 메시지로 의도되므로 메시지가 세 줄을 초과해서는 안 되어요.
모범 사례 (Best practices):
- 여러 토스트는 세로로 쌓이며, 가장 최신 것이 리스트 상단에 나타납니다.
- 메시지를 명확하고 간결하게 유지하세요.
- 타임스탬프는 선택사항이며 제거할 수 있어요.
- 토스트 알림은 고정 너비를 가지며 콘텐츠 영역에 맞추기 위해 확장하면 안 됩니다.
동작형 (Actionable)
동작형 알림은 인라인 또는 토스트 알림처럼 스타일링된 알림 내에 인터랙티브 요소를 허용합니다. 동작형 알림은 사용자 상호작용이 필요하므로 트리거될 때 포커스를 받으며 스크린 리더와 키보드 사용자에게 매우 방해적일 수 있어요.
인라인 알림으로 스타일링된 동작형 알림은 하나의 고스트 버튼만 포함합니다. 오른쪽 위 모서리의 작은 "x"는 인라인 알림을 닫는 데 사용됩니다. 닫기 버튼 포함은 선택사항이며, 사용자가 알림을 읽거나 상호작용하는 것이 중요하다면 포함해서는 안 됩니다.
토스트 알림으로 스타일링된 동작형 알림은 하나의 3차(tertiary) 버튼만 포함할 수 있어요. 토스트가 동작 버튼을 포함하면 알림은 사용자가 닫을 때까지 화면에 유지되어야 합니다. 알림이 열린 채 유지되면 사용자는 토스트가 너무 빨리 닫히지 않고 버튼과 상호작용할 충분한 시간을 갖습니다.
모범 사례 (Best practices):
- 동작형 알림은 사용자가 닫을 때까지 지속되어 사용자가 알림과 상호작용할 시간을 주어야 해요.
- 알림당 하나의 동작만.
- 동작 라벨을 두 단어 이하로 제한하세요.
콜아웃 (Callout)
콜아웃은 페이지 콘텐츠 내에서 맥락적으로 중요한 정보를 강조하는 데 사용되며 닫을 수 없습니다. 다른 알림 컴포넌트와 달리 사용자나 시스템에 의해 트리거되지 않고 페이지 콘텐츠와 함께 로드됩니다. 피드백 메커니즘으로 작동하지 않으며, 지속적이고, 필요한 정보를 사용자에게 제공하기 위해 항상 화면에 존재합니다. 또한 콜아웃은 사용자가 태스크를 시작하거나 동작을 취하기 전에 안내를 제공하도록 의도되므로 성공이나 오류 상태를 포함하지 않습니다.
모범 사례 (Best practices):
- 사용자가 좋은 결정을 내리거나 나쁜 경험을 피하도록 돕는 정보를 강조하는 데 사용하세요.
- 동작 버튼, 입력 필드, 또는 다른 데이터 근처에 맥락적으로 콜아웃을 배치해 그들이 태스크를 완료하는 방법에 영향을 주는 정보를 제공하세요.
- 단일 페이지에 여러 콜아웃을 과부하시키지 마세요.
- 간과해서는 안 되는 정보를 강조하기 위해 드물게 사용하세요.
- 정보를 읽는 동안 흐름을 끊을 수 있는 중복 제목은 생략하세요.
배너 (Banner)
배너는 제품이나 시스템을 위한 일반 알림을 보여주기 위해 인터페이스 상단을 차지합니다(특정 태스크가 아닌). 사용자가 닫을 때까지 지속됩니다. 메시지에 따라 사용자가 제품이나 시스템 문제를 해결하면(예: 필요한 계정 정보 업데이트) 배너가 닫힐 수 있습니다. 배너는 여러 세션에 걸쳐 지속될 수도 있습니다.
모범 사례 (Best practices):
- 배너는 관계된 콘텐츠 영역의 상단에 배치되어야 해요.
- 배너 알림으로 다른 콘텐츠를 덮지 마세요.
- 시스템 차원 메시지는 기본 헤더나 내비게이션 바 바로 아래에 배치하세요.
- 배너는 고정(sticky)되지 않으며 페이지의 다른 콘텐츠와 함께 스크롤되어야 합니다.
- 한 번에 하나의 배너만 보여주세요.
Carbon이 배너에 대한 안내를 확고히 하고 배너 컴포넌트를 만들기 전에 더 많은 디자인 반복과 사용자 테스트가 필요합니다. 미래에 정제된 사용 예시를 주목하세요. 팀이 배너 컴포넌트를 개발했다면 다른 사람들이 사용할 수 있게 Carbon에 기여하는 것을 고려하세요.
알림 패널 (Notification panel)
알림 패널은 많은 수의 시스템 생성 알림을 받거나 나중에 알림을 참조해야 할 수 있는 사용자에게 유용해요. 알림이 들어올 때 알려주기 위해 토스트와 함께 사용됩니다.
알림 패널은 화면을 많은 지속 알림으로 어지럽히지 않고 사용자가 모든 알림에 접근하고 읽을 수 있게 합니다. 또한 알림을 읽는 데 더 많은 시간이 필요하거나, 스크린 리더를 사용하거나, 받는 알림을 제한하는 것을 선호하는 사용자에게 일관된 경험을 제공합니다.
Carbon이 알림 패널에 대한 안내를 확고히 하고 알림 패널 컴포넌트를 만들기 전에 더 많은 디자인 반복과 사용자 테스트가 필요합니다. 미래에 정제된 사용 예시를 주목하세요. 팀이 알림 패널 컴포넌트를 개발했다면 다른 사람들이 사용할 수 있게 Carbon에 기여하는 것을 고려하세요.
모범 사례 (Best practices):
- 사용자에게 알림 기본 설정을 관리하는 능력을 주세요.
- 사용자가 상호작용하지 않으면 같은 알림을 여러 번 보내지 마세요.
- 알림을 시간순으로 나열하세요.
- 알림은 출처나 긴급도로 그룹화될 수 있어요.
모달 (Modal)
모달은 사용자를 방해하고 현재 태스크를 일시 중지합니다. 사용자에게 매우 방해적이며 드물게 사용해야 합니다. 메시지가 중요하고 사용자의 즉각적인 주의나 동작이 필요할 때만 모달을 사용하세요. 모달은 사용자가 참여할 때까지 지속되고 사용자가 닫을 때만 사라집니다.
모범 사례 (Best practices):
- 한 번에 하나의 모달 알림만 표시하세요.
- 사용자의 태스크를 즉시 방해해야 할 때 모달을 사용하세요.
- 사용자에게 알림을 해결하고 닫는 명확한 단계를 주세요.
디자인 시 고려 사항 (Considerations when designing)
알림 우선순위 (Notification priority)
알림은 우선순위가 다양하므로 사용자에 대한 방해 수준도 달라야 해요. 전달되는 정보의 긴급성과 우선순위를 알림의 시각적 스타일과 동작에 맞추는 것이 중요합니다.
Carbon은 인라인과 토스트 알림에 두 가지 시각적 스타일을 제공합니다. 고대비 스타일은 더 시각적으로 방해적이며 긴급하거나 중요한 알림에 사용해야 합니다. 저대비 스타일은 보조 메시징이나 다른 낮은 우선순위 사용 사례에 더 좋아요. 토스트와 인라인 알림은 다른 스타일을 사용할 수 있지만, 변형 내에서 스타일을 절대 섞어서는 안 됩니다.
일반 사용자 동작 (General user action)
선택 동작 (Optional action)
동작형 알림은 사용자가 상호작용할 수 있는 고스트 또는 3차 버튼을 포함할 수 있어요. 이 알림에 대한 동작을 취하는 것은 선택사항이어야 하며 사용자가 현재 태스크를 계속하는 것을 막지 않아야 합니다. 이 동작은 종종 사용자가 알림을 해결할 수 있는 메시지와 관련된 흐름이나 페이지로 사용자를 데려갑니다.
필수 동작 (Required action)
일부 알림 패턴은 메시지가 처리될 때까지 사용자가 알림을 닫거나 태스크를 계속하는 것을 차단해야 합니다. 이는 오류나 빈 입력 필드가 있을 때 폼에서 흔히 발생합니다. 사용자가 계속하는 것을 막는 알림은 현재 태스크와 관련되어야 하고, 사용자에게 해결하거나 현재 태스크를 계속하는 데 필요한 단계를 제공해야 합니다.
사용자가 태스크를 계속하는 것을 차단하는 것은 방해적이고 전반적인 경험을 저해하므로, 사용자가 알림을 보는 것이 중요하거나 사용자가 즉시 동작을 취해야 할 때만 이 알림을 사용해야 합니다.
알림 메시지 (Notification message)
알림 메시지를 작성할 때 사용자의 맥락을 고려하는 것이 중요해요. 사용자에게 접근 가능하고 쉽게 이해될 언어를 사용하세요. 상황과 알림에 적절한 톤을 사용하세요.
태스크 생성 알림은 사용자 동작에 응답해 전송되므로 사용자에게 광범위한 배경 정보를 줄 필요는 없습니다. 반대로 시스템 생성 알림은 일반적으로 사용자의 현재 태스크와 관련이 없으므로 사용자가 알림을 이해할 충분한 맥락을 갖도록 해야 합니다.
"Success! Your resource has been created." — 명확하고 간결한 언어를 사용하세요.
"503 Service Unavailable" — 사용자에게 낯선 기술 전문 용어나 언어를 사용하지 마세요.
"Script failed to run. Check the log for more detail." — 필요하다면 사용자가 동작을 취하는 방법을 알도록 하세요.
"Instance was not created." — 사용자를 다음 단계 없이 남겨두지 마세요.
접근성 (Accessibility)
중요하거나 비상 메시지에 타이머로 닫히는 알림을 사용하지 마세요. 일부 장애가 있는 사용자는 메시지를 읽거나 상호작용하는 데 더 많은 시간이 필요하며, 시간 제한 동작형 토스트는 충분한 시간을 제공하지 못할 수 있습니다. WCAG 2.1 성공 기준 2.2.4 (AAA)
사용자는 비중요 알림을 관리하거나 제한할 수 있어야 합니다. 이는 사용자가 받는 방해나 중단 수를 줄이는 통제권을 주며, 인지적 제한이 있는 사용자에게 특히 유용해요. WCAG 2.1 성공 기준 2.2.3 (AAA)
관련 컴포넌트와 패턴 (Related components and patterns)
컴포넌트 (Components)
- 모달 (Modal)
- 알림 (Notification)
- UI 셸 (UI shell)
패턴 (Patterns)
- 대화상자 (Dialogs)
- 오류 상태 (Error states, 향후)
- 폼 (Forms)
오류 상태 패턴이 현재 계획 중입니다. 기여하고 싶다면 기여 가이드라인을 참고하세요.
참고 자료 (References)
- Alert Fatigue (Patient Safety Network, 2019)
- Aria Live Regions (W3C, 2017)
- Duncan P. Brumby, Christian P. Janssen, and Gloria Mark, How Do Interruptions Affect Productivity? (Rethinking Productivity in Software Engineering, 2019)
- Kim Flaherty, Indicators, Validations, and Notifications (Nielsen Norman Group, 2015)
- Aurora Harley, Visibility of System Status (Nielsen Norman Group, 2018)
- Jakob Nielsen, 10 Usability Heuristics for User Interface Design (Nielsen Norman Group, 1994)
- Web Content Accessibility Guidelines (W3C, 2018)
더 알아보기 (Learn more)
알림은 사용자에게 상태 변경과 업데이트를 전달하는 핵심 패턴이에요. 관련성, 적시성, 유익함이라는 세 원칙을 지키고, 정보·성공·경고·오류라는 상태를 메시지 의도에 맞춰 색상·아이콘과 조합하세요. 인라인·토스트·동작형·콜아웃·배너·알림 패널·모달이라는 유형을 방해 수준에 맞게 고르고, 중요 메시지는 타이머로 닫지 말며 필수 동작과 선택 동작을 구분해 설계하는 게 좋습니다.