Notification

Notification (알림)

Feature flag

알림은 사용자에게 정보를 전달하는 메시지예요. 알림에는 toast, inline, actionable, callout의 네 가지 변형이 있습니다. 시스템 상태 업데이트나 변경을 알리고, 사용자에게 즉각적인 피드백을 제공하는 데 사용됩니다.

출처: Notification

본문

개요 (Overview)

알림은 사용자와 소통하고 피드백을 공유하는 방법을 제공해요. 네 가지 상태로 제공되며, 올바른 변형과 결합하면 각 사용 사례에 관련 있고 시기적절하며 유익한 알림이 됩니다. 상태는 전달되는 정보의 목적을 나타내며, 특정 상황에 맞게 알림의 방해 정도를 조절할 수 있게 해줍니다.

언제 사용할까요 (When to use)

시스템 상태의 업데이트나 변경을 사용자에게 알리려면 알림을 사용하세요. 사용자와 소통하고 즉각적인 피드백을 제공하는 것은 신뢰를 쌓는 데 중요합니다. 알림은 사용자와 소통하는 효과적인 방법이지만 방해가 되므로 아껴서 사용해야 해요.

각 알림 변형(모달 포함)을 언제 사용할지에 대한 더 많은 컨텍스트는 알림 패턴(notifications pattern)을 참고하세요. Carbon은 inline, toast, actionable, modal 알림 변형만 지원하지만, 일부 제품 팀은 배너와 알림 센터도 지원합니다.

변형 (Variants)

변형 (Variant)	용도 (Purpose)
Inline	인라인 알림은 작업 흐름에 나타나 액션의 상태를 사용자에게 알림. 보통 주요 콘텐츠 영역의 상단에 나타남.
Toast	토스트 알림은 짧은 메시지를 표시하는 비모달(non-modal) 시간 기반 창 요소. 보통 화면 상단에 나타나 몇 초 후 사라짐.
Actionable	액션 가능한 알림은 inline 또는 toast 알림처럼 스타일링된 알림 안에서 인터랙티브 요소를 허용함.
Callout	콜아웃은 페이지 콘텐츠와 함께 로드되고, 상황에 맞게 배치되며, 닫을 수 없는 중요 정보를 강조하는 데 사용됨.

기능 플래그 (Feature flags)

기능 플래그(feature flag)가 actionable 알림 변형에 추가되어 접근성을 개선하고 시각적 모양이 아닌 일부 기능을 변경했어요. 코드 특정 기능 플래그 정보는 코드(Code) 탭을 참고하세요. 현재 actionable 알림은 폐기되지 않지만, 팀은 앞으로 제품에 기능 플래그 알림을 사용하도록 권장됩니다. 향후 다음 주요 릴리스(v12)가 출시되면 이 기능 플래그가 컴포넌트의 기본 버전이 됩니다.

포맷 (Formatting)

구조 (Anatomy)

1. Inline

A. Icon B. Title C. Body content D. Close button

3. Actionable (inline and toast)

A. Icon B. Title C. Body content D. Close button E. Action button

2. Toast

A. Icon B. Title C. Body content D. Close button

4. Callout

A. Icon B. Title C. Body content F. Link

알림 상태 (Notification status)

알림 상태는 전달되는 정보의 감정적 톤을 전달하도록 설계됐어요. 각 상태는 특정 색상과 아이콘과 연결되어 일관되고 보편적인 사용자 경험을 보장합니다.

인라인 변형에 대한 알림 상태

무엇을 사용할지 결정하기

다양한 알림 상태 중에서 선택할 때는 전달해야 할 컨텍스트와 감정을 고려하세요. callout을 제외한 모든 알림 변형은 보통 액션 또는 작업이 완료된 후의 피드백으로 제공됩니다. callout 변형은 사용자가 작업을 시작하거나 액션을 취하기 전에 지침을 제공하며, 따라서 success나 error 상태를 포함하지 않는다는 점에서 독특합니다.

상태 (Status)	용도 (Usage)	색상 (Color)	아이콘 (Icon)	변형 (Variants)
Informational	사용자의 현재 액션이나 작업과 연결되지 않을 수 있는 추가 정보를 사용자에게 제공	Blue	information filled	Inline, Toast, Actionable, Callout
Success	작업이 예상대로 완료되었음을 확인	Green	checkmark filled	Inline, Toast, Actionable
Warning	사용자가 바람직하지 않거나 예상치 못한 결과를 초래할 수 있는 액션을 취하고 있음을 알림	Yellow	warning filled	Inline, Toast, Actionable, Callout
Error	오류나 심각한 실패를 알리고, 선택적으로 문제가 해결될 때까지 사용자가 진행하는 것을 차단	Red	error filled	Inline, Toast, Actionable

콘텐츠 (Content)

알림은 제한된 공간의 콘텐츠를 제공하므로 콘텐츠가 짧고 간결해야 해요. IBM Style - Messages의 지침을 따르고, 사용자가 알림을 훑어보면서 상황을 파악하고 다음에 무엇을 해야 할지 빨리 알 수 있도록 메시지를 작성하세요.

주요 요소 (Main elements)

제목 (Title)

• 제목은 가장 중요한 정보 조각을 설명하는 짧고 설명적이어야 해요. 오류 메시지의 경우 "Server instance unavailable"처럼 중지되었거나 할 수 없는 것을 제목에서 알려주세요.
• 제목을 끝낼 때 마침표를 사용하지 마세요.
• 제목 같은 곳에서 서식 있는 텍스트를 사용할 때 스크린 리더는 전체 메시지를 한 문장으로 소리 내어 읽습니다. 메시지가 하나의 문자열로 읽히기 때문에 의미 전달을 텍스트 스타일링에 의존하지 마세요.

본문 콘텐츠 (Body content)

• 간결하세요. 콘텐츠를 한두 개의 짧은 문장으로 제한하세요.
• 제목을 반복하거나 바꿔 말하지 마세요.
• 문제 해결 방법을 설명하기 위해 문제 해결(troubleshooting) 동작이나 다음 단계를 포함하세요. 이것이 IBM Style이 "user action"이라고 부르는 것입니다. User actions는 오류 메시지에 필수입니다.
• 가능하면 actionable 알림을 사용하고, 사용자가 문제를 해결하는 곳으로 리디렉션하는 링크를 알림 본문에 포함하세요.

액션 버튼 (Action button)

• 라벨을 간결하게 유지하고 사용자가 취할 수 있는 액션을 명확히 나타내세요.
• 액션 라벨을 한두 단어로 제한하세요. 권장 액션 라벨 목록은 Carbon 콘텐츠 가이드라인을 참고하세요.

링크 (Link)

• 링크의 목적지를 설명적이고 의미 있게 나타내야 해요.
• 반드시 문장 끝에 있을 필요는 없으며 본문 콘텐츠 안에 있을 수도 있습니다.

넘침 (Overflow)

toast나 inline 알림에 두 줄보다 긴 메시지가 필요하다면 actionable 알림을 사용하고, 사용자를 전체 알림 메시지 보기로 데려가는 "View more" 링크와 함께 짧은 메시지를 포함하세요. 이 목적지는 더 많은 세부 정보가 있는 전체 페이지나 모달이 될 수 있어요.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

Inline (인라인 알림)

인라인 알림은 작업 흐름에서 액션이나 시스템의 상태를 사용자에게 알리기 위해 나타나요. 인라인 알림은 보통 주요 콘텐츠 영역의 상단이나 주의가 필요한 항목 가까이에 나타납니다.

인라인 포맷 (Inline formatting)

다양한 UI 레이아웃에서의 인라인 알림 배치 예시

크기 (Sizing)

인라인 알림의 너비는 콘텐츠와 레이아웃에 따라 달라져요. 관련된 컨테이너나 콘텐츠 영역을 채우도록 확장될 수 있습니다. 높이는 두 줄의 텍스트를 초과해서는 안 되는 콘텐츠 길이에 기반합니다.

배치 (Placement)

인라인 알림은 관련 항목 근처에 나타나요. 있는 컨테이너나 콘텐츠 영역의 너비를 채우도록 확장될 수 있으며 그리드 컬럼에 정렬되어야 합니다.

제출과 취소 버튼 바로 위, 폼의 하단에 인라인 알림을 배치하세요. 오류 알림이 개별 텍스트 입력에 적용될 때는 해당 특정 입력 필드의 오류 상태를 보완해야 해요.

폼의 오류 메시지를 보완하는 인라인 알림 예시

닫기 (Dismissal)

인라인 알림은 자동으로 닫히지 않아요. 사용자가 닫거나 알림을 해결하는 액션을 취할 때까지 페이지에 유지됩니다.

오른쪽 위의 작은 "x"는 인라인 알림을 닫는 데 사용됩니다. 닫기 버튼 포함은 선택 사항이며, 사용자가 알림을 읽거나 상호작용하는 것이 중요하다면 포함하지 않아야 합니다.

Toast (토스트 알림)

토스트 알림은 짧은 메시지를 표시하는 비모달(non-modal) 시간 기반 창 요소예요. 보통 화면 상단에 나타나 몇 초 후 사라집니다.

토스트 포맷 (Toast formatting)

다양한 UI 레이아웃에서의 토스트 알림 배치 예시

타임스탬프 (Time stamp)

토스트 알림은 컨테이너 하단에 타임스탬프를 포함할 수 있어요. 타임스탬프는 알림이 전송된 시간을 보여줍니다. 타임스탬프 사용은 선택 사항이지만, 토스트 알림은 제품 전반에 걸쳐 일관되어야 하므로 모든 토스트 알림이 타임스탬프를 포함하거나 모두 포함하지 않아야 합니다. 타임스탬프는 선택 사항이며 세 번째 줄의 콘텐츠가 필요하면 제거할 수 있어요.

크기 (Sizing)

토스트 알림은 고정 너비를 사용하며 그 높이는 알림 메시지의 길이에 따라 달라져요. 콘텐츠 가이드라인에서 언급했듯이 토스트 알림을 두 줄의 텍스트로 제한하세요.

배치 (Placement)

토스트 알림은 화면의 오른쪽 위에서 슬라이드 인/아웃됩니다. 사이에 $spacing-03로 쌓이며, 새 토스트 알림은 목록 상단에 나타나고 닫힐 때까지 더 오래된 알림이 아래로 밀립니다.

닫기 (Dismissal)

토스트 알림은 기본적으로 유지되지만, 시간 초과되어 화면에 5초 후 자동으로 닫히도록 코딩될 수 있어요. 사용자가 더 일찍 닫을 수 있도록 닫기 버튼을 포함할 수도 있습니다. 토스트 알림은 화면의 콘텐츠를 덮기 때문에 항상 쉽게 닫을 수 있어야 합니다. 토스트 알림이 자동으로 닫힐 수 있으므로, 알림을 읽거나 나중에 참조하려는 사용자는 토스트 알림이 사라진 후 다른 곳에서 접근할 수 있어야 합니다.

Actionable (액션 가능한 알림)

액션 가능한 알림은 인터랙티브 요소가 있는 inline 또는 toast 알림이에요. 액션 가능한 알림은 사용자 인터랙션이 필요하므로 트리거될 때 포커스를 받고, 따라서 스크린 리더와 키보드 사용자를 방해합니다. 각 알림에 하나의 액션만 허용되며, 이 액션은 종종 사용자를 메시지와 관련된 흐름이나 페이지로 데려가 알림을 해결할 수 있게 합니다.

사용자가 과거 알림을 다시 방문하고 조치를 취할 수 있는 알림 센터(notification center) 사용을 고려하세요.

포맷 (Formatting)

Inline

액션 가능한 인라인 알림은 제목과 본문 콘텐츠에 인접한 고스트 버튼 액션이 있어요. 모바일 화면에서는 액션 버튼이 본문 콘텐츠 아래로 줄바꿈됩니다. 이 버튼은 사용자가 알림에 대해 추가 조치를 취할 수 있게 해야 합니다.

Toast

액션 가능한 토스트 알림은 본문 콘텐츠 끝에 tertiary 버튼을 포함할 수 있어요. 이 버튼은 짧아야 하며, 사용자를 알림을 해결하기 위한 조치를 취하거나 추가 정보를 찾을 수 있는 페이지나 모달로 데려가야 합니다. 토스트 알림은 자동으로 닫히므로 링크 목적지로 이동하는 대체 경로가 있는지 확인하세요.

액션 가능한 토스트 알림(위); 액션 가능한 인라인 알림(아래)

닫기 (Dismissal)

액션 가능한 알림은 사용자가 닫을 때까지 유지됩니다. inline 스타일링을 사용한다면 인라인 닫기에 대한 인라인 알림을 참고하세요. 액션 가능한 알림에 toast 알림 스타일을 사용한다면 알림은 사용자가 닫을 때까지 화면에 남아 있어야 해요. 알림이 열려 있으므로 사용자는 토스트가 너무 빨리 닫히지 않고 버튼과 상호작용할 충분한 시간을 갖습니다. 자세한 내용은 토스트 알림을 참고하세요.

링크 (Links)

필요하면 액션 가능한 알림은 링크를 포함할 수 있어요. 액션 가능한 알림 안의 링크는 사용자를 다음 단계로 리디렉션하는 데 사용될 수 있습니다.

액션 (Actions)

필요하면 액션 가능한 알림은 인라인 알림용 고스트 버튼이나 토스트 알림용 tertiary 버튼을 포함할 수 있어요. 이 액션 버튼을 통해 사용자는 알림을 해결하거나 더 많은 세부 정보를 위해 페이지로 이동할 수 있습니다.

Callout (콜아웃)

콜아웃은 페이지 콘텐츠 안에서 중요한 정보를 상황에 맞게 강조하는 데 사용되며 닫을 수 없어요. 다른 알림 컴포넌트와 달리 사용자나 시스템에 의해 트리거되지 않고, 페이지 콘텐츠와 함께 로드됩니다. 피드백 메커니즘으로 작동하지 않으며 지속적이고 항상 화면에 있어 사용자에게 필요한 정보를 제공합니다.

콜아웃은 정보를 강조할 필요가 있을 때 폼, 대시보드, 기사 등에서 사용할 수 있어요. 부정적인 사용자 경험을 방지할 수 있는 중요한 정보에 주의를 끌도록 설계됐습니다. 또한 사용자가 정보에 입각한 결정을 내리도록 안내하는 세부 사항을 강조하는 데 사용될 수 있어, 궁극적으로 전체 경험을 향상시킵니다.

콜아웃 포맷 (Callout formatting)

상태 (Status)

callout 변형은 사용자 여정을 성공적으로 완료하는 데 제공되므로 informational과 warning 상태만 포함해요. 따라서 작업 완료 후 피드백으로 제공되는 반응적(reactive)인 다른 알림에 있는 success와 error 상태는 포함하지 않습니다.

제목 (Title)

콜아웃에서 제목이 중복되어 정보를 읽는 흐름을 깨뜨릴 수 있다면 제목을 생략할 수 있어요. 사람들이 작업에서 주의를 돌리지 않고 콘텐츠를 훑어보기 더 쉬울 때만 제목을 사용하세요.

크기 (Sizing)

콜아웃의 너비는 콘텐츠와 레이아웃에 따라 달라져요. 관련된 컨테이너나 콘텐츠 영역을 채우도록 확장될 수 있습니다. 높이는 콘텐츠 길이에 기반합니다.

정렬 (Alignment)

단일 페이지에 여러 콜아웃을 과도하게 채우는 것을 피하고, 함께 쌓아 올리지 마세요. 콜아웃은 놓치지 말아야 할 정보를 강조하기 위해 아껴서 사용해야 해요. 다른 모든 콘텐츠에는 표준 텍스트 컴포넌트를 사용하세요.

배치 (Placement)

콜아웃은 특정 페이지 요소와 관련되며 더 효과적으로 연관되도록 그 근처에 배치되어야 해요.

• 버튼 또는 입력과 함께: 중요 정보가 액션에 영향을 준다면 관련 버튼이나 입력 위에 콜아웃을 배치하세요. 이 강조된 메시지는 사용자가 진행하기 전에 자신의 액션에 대해 확신을 갖게 합니다.
• 데이터 또는 정보와 함께: 사용자가 보는 데이터의 앞이나 뒤 중 무엇이 가장 잘 맞는지에 따라 콜아웃을 상황에 맞게 배치하세요.
• 인라인 알림과 함께: 사용자 여정 중 콜아웃과 인라인 알림이 공존해야 할 때는 콜아웃을 인라인 알림 위로 옮기고, 짧게 지속되는 인라인 알림은 이를 트리거한 버튼이나 입력에 더 가깝게 배치하세요.

인라인 오류 알림이 나타날 때 콜아웃이 배치되는 방식의 예시

닫기 (Dismissal)

다른 알림과 달리 콜아웃은 사용자에게 닫을 수 없는 중요한 정보를 강조하는 데 사용되므로 닫히지 않아요. 항상 화면에 있으며 페이지 콘텐츠와 함께 로드됩니다.

링크 (Links)

필요하면 콜아웃은 링크를 포함할 수 있어요. 콜아웃의 링크는 현재 사용자 여정에 필요한 추가 컨텍스트나 관련 정보를 제공할 때만 사용해야 합니다. 별도의 사용자 여정으로의 탐색을 촉진하는 데 사용해서는 안 됩니다.

액션 (Actions)

액션 가능한 알림과 달리 콜아웃은 자체 액션 버튼을 포함하지 않아요. 콜아웃은 사용자가 액션을 취하기 전에 상황에 맞게 정보를 제공하기 위한 것이므로 액션 버튼 근처에 배치하세요.

공통 동작 (Universal behaviors)

인터랙션 (Interactions)

마우스 (Mouse)

사용자는 닫기 x를 클릭해 닫을 수 있는 알림을 닫을 수 있어요.

키보드 (Keyboard)

액션 가능한 알림의 경우 액션이 먼저 포커스를 받아요. Tab을 사용해 액션과 닫기 x 사이를 이동하세요. 알림을 닫으려면 닫기 x에 포커스가 있는 동안 Enter 또는 Space를 누르거나 Esc 키를 사용하세요.

스크린 리더 (Screen readers)

VoiceOver: 알림을 닫으려면 닫기 x에 포커스가 있는 동안 Enter 또는 Space를 누르거나 Esc 키를 사용하세요. JAWS: 알림을 닫으려면 닫기 x에 포커스가 있는 동안 Enter 또는 Space를 누르거나 Esc 키를 사용하세요. NVDA: 알림을 닫으려면 닫기 x에 포커스가 있는 동안 Enter 또는 Space를 누르거나 Esc 키를 사용하세요.

수정자 (Modifiers)

고대비·저대비 (High and low contrast)

Carbon은 고대비와 저대비 스타일 알림을 지원해요. 고대비 알림은 중요 메시징에 가장 좋고, 저대비 알림은 사용자에게 시각적으로 덜 방해가 됩니다.

제품에서 어떤 알림 스타일을 사용할지는 제품 팀이 결정할 문제예요. Callout, inline, toast 알림은 다른 스타일을 사용할 수 있지만, 각 알림 변형 안에서 스타일을 섞으면 안 됩니다. 확신이 없으면 저대비 알림을 사용하세요.

고대비 알림(위); 저대비 알림(아래)

관련 컴포넌트 (Related)

• Modal component
• Notifications pattern
• Inline link
• Button
• Form

더 알아보기 (Learn more)

알림은 상태 업데이트와 피드백을 사용자에게 전달하는 메시지예요. 상황에 따라 inline, toast, actionable, callout 변형을 고르고, Informational·Success·Warning·Error 상태를 전달할 내용에 맞춰 적용하세요. 콘텐츠는 간결하게 유지하고, 닫기·링크·액션 버튼을 규칙에 맞게 활용하면 됩니다.