Section message

특정 섹션이나 페이지에 대해 사용자의 주의가 필요한 상황을 전달하는 요소입니다. 정보, 성공, 경고, 오류 등 상황에 맞는 시각적 단서를 제공하여 사용자가 메시지의 중요도를 직관적으로 인지하도록 돕습니다.

Anatomy

  1. 1Container
  2. 2Heading
  3. 3Icon
  4. 4Description
  5. 5Bottom button
  6. 6Trailing button
  7. 7Close button

Variants

Variants
Description
Close button
Action

Status

메시지의 성격에 따라 아이콘과 색상을 구분하여, 사용자가 상황을 즉시 인지할 수 있도록 돕습니다.

  • Custom: 특정 상태를 강조하지 않고 예외적으로 자유롭게 변형하여 사용할 수 있습니다.
  • Info: 일반적인 안내를 제공할 때 사용합니다.
  • Positive: 사용자가 요청한 작업이 성공적으로 완료되었음을 알리는 긍정적인 피드백에 사용합니다.
  • Cautionary: 치명적인 오류는 아니지만, 사용자에게 주의가 필요한 상황을 알리기 위해 사용합니다.
  • Negative: 작업이 실패했거나 오류가 발생했음을 알리는 부정적인 피드백입니다.

Position

GNB 하단으로부터 20px 아래에 배치되며, 페이지와 함께 스크롤 되는 것을 기본 동작으로 합니다.

With close button

중요도가 낮은 메시지의 경우, 닫기 버튼을 추가하여 사용자가 직접 화면에서 숨길 수 있습니다.

With action

메시지에 대한 사용자의 즉각적인 응답이나 행동이 필요한 경우 Button을 추가할 수 있습니다.

Usage

Customize

Custom 속성을 통해 낮은 위계의 메시지를 제공하거나, 특정 목적에 맞는 메시지를 제공할 수 있습니다.

How to use

Do

간략한 메시지인 경우 버튼이 필요하다면 Bottom button이 아닌 Trailing button을 활용합니다.

Don’t

여러 메시지를 동시에 노출하지 않습니다.

Customize

Custom
contentColor
backgroundColor

© 2026 Wanted Lab, Inc.