Page Banner
페이지 상단에 위치하며 사용자에게 전체적인 상태나 중요한 메시지를 전달하는 상위 레벨 메시지 컴포넌트입니다.
Anatomy
Page Banner는 메시지 텍스트를 감싸고 있는 컨테이너로 구성되어 있으며, 필요에 따라 Prefix Icon, Title, Link Text, Chevron, Dismiss 버튼을 표시할 수 있습니다.
Properties
Interaction
Page Banner 우측에 표시되는 요소에 따라 다른 Interaction을 가질 수 있습니다.
Variant
Page Banner는 Neutral, Informative, Positive, Warning, Critical, Magic 여섯 가지 Tone으로 구성되어 있으며, 각 Tone은 Weak와 Solid 두 가지 스타일을 가집니다.
Tone=Magic은 Variant=Solid와 조합하여 사용하지 않습니다.
Prefix Icon Property
Prefix Icon을 표시할 수 있습니다. 아이콘은 Fill 타입 사용을 권장합니다.
Title Property
Show Title Property로 Title을 표시할 수 있습니다.
State
Actionable Page Banner에는 Pressed 상태가 있습니다.
Guidelines
Page Banner의 위치
Page Banner는 페이지 상단에 위치하며 사용자에게 전체적인 상태나 중요한 메시지를 전달하는 상위 레벨 메시지 컴포넌트입니다.
항상 페이지 최상단에 배치되며(상단 이미지가 있는 경우 이미지 하단), 한 화면에 하나만 존재할 수 있습니다.
스크롤 시에도 Page Banner를 상단에 고정하여 표시할 수 있습니다. 이 경우, 개발자에게 인터랙션 가이드를 명확히 제공해야 합니다.
한 화면에 여러 개의 Page Banner가 표시되지 않도록 주의해주세요.
Title, Description 사이 간격 표시
Page Banner의 Title은 Inline 요소로, 텍스트처럼 줄을 차지하지 않고 배치됩니다.
Title과 Description 사이의 여백은 두 번의 띄어쓰기로 표시합니다.
제목과 내용 작성하기
Page Banner 제목은 검토 중, 미노출, 제재됨과 같이 상태를 나타내는 짧은 단어로 표시하고, 꼭 필요한 경우에만 사용합니다. 본문은 핵심 내용만 간결하게 작성하며, 제목에서 언급한 내용을 반복하지 않습니다.
Page Banner로 상태 표시하기
Page Banner는 페이지의 중요한 상태 변화나 사용자 액션에 대한 피드백을 전달합니다. 상황에 맞는 Tone을 선택해서 사용해주세요.
| Tone | 사용 예시 |
|---|---|
| Neutral | 상태가 특별히 없거나, 상태값이 명확하지 않은 초기 상태 |
| Informative | 베타 기능 안내, 사용자 권한 제한, 정보 기반 메시지 |
| Positive | 승인됨, 발행됨, 저장 성공, 검토 통과 |
| Warning | 만료 임박, 제출 누락, 필수 정보 부족 등 잠재적 문제 상태 |
| Critical | 검수 거절, 제재 상태, 편집 불가, 유효성 검증 실패 |
주요 기능 또는 서비스의 진입점을 표시하기
Actionable Page Banner는 주요 기능 또는 서비스의 진입점으로 활용할 수 있습니다.
Dismissible 인터랙션 사용하기
Dismissible 인터랙션은 사용자에게 한 번만 전달해도 충분한 정보에 한해 사용하며, 경고·오류 메시지에는 사용하지 않습니다.
닫은 후에 동일한 메시지가 반복해서 표시되지 않도록 주의해주세요.
Page Banner, Callout 비교
Page Banner와 Callout 컴포넌트는 모두 사용자에게 메시지를 전달하지만, 용도, 시각적 무게, 위치, 메시지의 범위가 다르기 때문에 명확하게 구분하여 사용해야 합니다.
| Callout | Page Banner | |
|---|---|---|
| 위치 | 콘텐츠 흐름 내 (본문 중간) | 페이지 상단 |
| 너비 | 콘텐츠 너비 (제한적) | 전체 너비 (gutter 없이 가로 확장) |
| 용도 | 팁, 기능 설명, 위험 요소 주의 | 페이지 상태, 제재, 기능 활성화 안내 등 |
| 메시지 범위 | 로컬 (해당 기능/내용에 국한) | 글로벌 (페이지 전체) |
| Sticky 속성 | 없음 (스크롤과 함께 이동) | 있음 (상단 고정 가능) |
Page Banner V3 변경점
- 컴포넌트의 이름이 'Inline Alert'에서 'Page Banner'로 바뀌었습니다.
- Interaction에 따라 세 가지로 구분되어 있던 컴포넌트를 하나로 합쳤습니다.
- 내용이 2줄 이상 표시될 때 Prefix, Suffix 요소가 텍스트 상단에 정렬되도록 조정하여 시각적으로 안정적인 레이아웃을 만들었습니다.
Specification
base
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | paddingX | |
| paddingY | |||
| minHeight | |||
| prefixIcon | size | ||
| marginRight | |||
| content | gap | ||
| title | fontSize | ||
| lineHeight | |||
| fontWeight | |||
| description | fontSize | ||
| lineHeight | |||
| fontWeight | |||
| button | targetHeight | ||
| fontSize | |||
| lineHeight | |||
| fontWeight | |||
| suffixIcon | size | ||
| targetSize | |||
| marginLeft |
tone=neutral, variant=weak
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| prefixIcon | color | ||
| title | color | ||
| description | color | ||
| button | color | ||
| suffixIcon | color | ||
| pressed | root | color |
tone=neutral, variant=solid
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| prefixIcon | color | ||
| title | color | ||
| description | color | ||
| button | color | ||
| suffixIcon | color | ||
| pressed | root | color |
tone=positive, variant=weak
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| prefixIcon | color | ||
| title | color | ||
| description | color | ||
| button | color | ||
| suffixIcon | color | ||
| pressed | root | color |
tone=positive, variant=solid
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| prefixIcon | color | ||
| title | color | ||
| description | color | ||
| button | color | ||
| suffixIcon | color | ||
| pressed | root | color |
tone=informative, variant=weak
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| prefixIcon | color | ||
| title | color | ||
| description | color | ||
| button | color | ||
| suffixIcon | color | ||
| pressed | root | color |
tone=informative, variant=solid
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| prefixIcon | color | ||
| title | color | ||
| description | color | ||
| button | color | ||
| suffixIcon | color | ||
| pressed | root | color |
tone=warning, variant=weak
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| prefixIcon | color | ||
| title | color | ||
| description | color | ||
| button | color | ||
| suffixIcon | color | ||
| pressed | root | color |
tone=warning, variant=solid
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| prefixIcon | color | ||
| title | color | ||
| description | color | ||
| button | color | ||
| suffixIcon | color | ||
| pressed | root | color |
tone=critical, variant=weak
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| prefixIcon | color | ||
| title | color | ||
| description | color | ||
| button | color | ||
| suffixIcon | color | ||
| pressed | root | color |
tone=critical, variant=solid
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| prefixIcon | color | ||
| title | color | ||
| description | color | ||
| button | color | ||
| suffixIcon | color | ||
| pressed | root | color |
tone=magic, variant=weak
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | gradient | |
| prefixIcon | color | ||
| title | color | ||
| description | color | ||
| button | color | ||
| suffixIcon | color | ||
| pressed | root | gradient |
Last updated on