# Page Banner URL: /components/page-banner Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/page-banner.mdx 페이지 상단에 위치하며 사용자에게 전체적인 상태나 중요한 메시지를 전달하는 상위 레벨 메시지 컴포넌트입니다. ## Anatomy ![Page Banner의 Anatomy 이미지. Container, Prefix Icon, Title, Link Text, Chevron, Dismiss 버튼으로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8422e6d3-e167-4c7f-a495-9158b54a80b7) Page Banner는 메시지 텍스트를 감싸고 있는 컨테이너로 구성되어 있으며, 필요에 따라 Prefix Icon, Title, Link Text, Chevron, Dismiss 버튼을 표시할 수 있습니다. ## Properties ### Interaction ![Page Banner의 Interaction 종류 - Default, Actionable, Dismissible](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/60d82531-804c-4b4c-a951-b8d0acac4158) Page Banner 우측에 표시되는 요소에 따라 다른 Interaction을 가질 수 있습니다. ### Variant ![Page Banner의 Variant 및 Tone - Neutral, Informative, Positive, Warning, Critical, Magic Tone과 Weak, Solid Variant](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/428a8527-28aa-4691-9e2f-c66a3c3bb848) Page Banner는 Neutral, Informative, Positive, Warning, Critical, Magic 여섯 가지 Tone으로 구성되어 있으며, 각 Tone은 Weak와 Solid 두 가지 스타일을 가집니다. Tone=Magic은 Variant=Solid와 조합하여 사용하지 않습니다. ### Prefix Icon Property ![Page Banner의 Prefix Icon Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d95712f0-38da-4e4b-971a-41d74ec18462) Prefix Icon을 표시할 수 있습니다. 아이콘은 Fill 타입 사용을 권장합니다. ### Title Property ![Page Banner의 Title Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/cc15663a-6fa1-4660-807c-15d70351cfb0) Show Title Property로 Title을 표시할 수 있습니다. ### State ![Page Banner의 State - Actionable Page Banner의 Pressed 상태](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/058fd2df-5dc8-426a-b906-22af70350cd6) Actionable Page Banner에는 Pressed 상태가 있습니다. ## Guidelines ### Page Banner의 위치 ![Page Banner의 위치 예시 - 페이지 상단 배치](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/e57d68b2-3dcd-435c-835f-f63c3c5c53e8) Page Banner는 페이지 상단에 위치하며 사용자에게 전체적인 상태나 중요한 메시지를 전달하는 상위 레벨 메시지 컴포넌트입니다. 항상 페이지 최상단에 배치되며(상단 이미지가 있는 경우 이미지 하단), 한 화면에 하나만 존재할 수 있습니다. ![Page Banner의 위치 예시 - 상단 고정](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b1c3a879-2567-487c-95ea-8ba7880c633a) 스크롤 시에도 Page Banner를 상단에 고정하여 표시할 수 있습니다. 이 경우, 개발자에게 인터랙션 가이드를 명확히 제공해야 합니다. **한 화면에 여러 개의 Page Banner가 표시되지 않도록 주의해주세요.** ### Title, Description 사이 간격 표시 ![Page Banner의 Title과 Description 사이 간격 표시 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/43321fda-bf5e-4973-a852-b31aa1db6a4c) Page Banner의 Title은 Inline 요소로, 텍스트처럼 줄을 차지하지 않고 배치됩니다. Title과 Description 사이의 여백은 두 번의 띄어쓰기로 표시합니다. ### 제목과 내용 작성하기 ![Page Banner 제목으로 '미노출'을 사용한 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f0ea44cc-ce63-4310-a881-ab30e8b30cec) Page Banner 제목은 검토 중, 미노출, 제재됨과 같이 상태를 나타내는 짧은 단어로 표시하고, 꼭 필요한 경우에만 사용합니다. 본문은 핵심 내용만 간결하게 작성하며, 제목에서 언급한 내용을 반복하지 않습니다. ### Page Banner로 상태 표시하기 ![Page Banner로 다양한 상태 표시 예시 - Neutral Weak, Warning Weak](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5529a398-b914-484e-84a4-8a1e057e4b58) ![Page Banner로 다양한 상태 표시 예시 - Critical Weak, Critical Strong](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5e27d072-c704-42d8-9b66-6e0958c070c4) ![Page Banner로 다양한 상태 표시 예시 - Informative Weak, Positive Weak](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ee55e3eb-340d-46e4-8502-bb0cd4d5a691) Page Banner는 페이지의 중요한 상태 변화나 사용자 액션에 대한 피드백을 전달합니다. 상황에 맞는 Tone을 선택해서 사용해주세요. | Tone | 사용 예시 | | --------------- | ---------------------------------- | | **Neutral** | 상태가 특별히 없거나, 상태값이 명확하지 않은 초기 상태 | | **Informative** | 베타 기능 안내, 사용자 권한 제한, 정보 기반 메시지 | | **Positive** | 승인됨, 발행됨, 저장 성공, 검토 통과 | | **Warning** | 만료 임박, 제출 누락, 필수 정보 부족 등 잠재적 문제 상태 | | **Critical** | 검수 거절, 제재 상태, 편집 불가, 유효성 검증 실패 | ### 주요 기능 또는 서비스의 진입점을 표시하기 ![Actionable Page Banner를 서비스 진입점으로 활용한 예시 - 안심결제, 부동산](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a4f893a7-4756-4f49-ac3a-9bd8072e05df) ![Actionable Page Banner를 주요 기능 진입점으로 활용한 예시 - 이웃광고, 편의점 택배](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/e3f01157-7f62-46a3-97c3-f8a9d78a7caa) Actionable Page Banner는 주요 기능 또는 서비스의 진입점으로 활용할 수 있습니다. ### Dismissible 인터랙션 사용하기 ![새 기능 소개를 위해 Dismissible 인터랙션을 사용한 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/32cc99b7-f63c-437a-baf4-b05572ec065b) Dismissible 인터랙션은 사용자에게 한 번만 전달해도 충분한 정보에 한해 사용하며, 경고·오류 메시지에는 사용하지 않습니다. 닫은 후에 동일한 메시지가 반복해서 표시되지 않도록 주의해주세요. ### Page Banner, Callout 비교 Page Banner와 [Callout](/components/callout) 컴포넌트는 모두 사용자에게 메시지를 전달하지만, 용도, 시각적 무게, 위치, 메시지의 범위가 다르기 때문에 명확하게 구분하여 사용해야 합니다. | | Callout | Page Banner | | ------------- | ------------------ | ----------------------- | | **위치** | 콘텐츠 흐름 내 (본문 중간) | 페이지 상단 | | **너비** | 콘텐츠 너비 (제한적) | 전체 너비 (gutter 없이 가로 확장) | | **용도** | 팁, 기능 설명, 위험 요소 주의 | 페이지 상태, 제재, 기능 활성화 안내 등 | | **메시지 범위** | 로컬 (해당 기능/내용에 국한) | 글로벌 (페이지 전체) | | **Sticky 속성** | 없음 (스크롤과 함께 이동) | 있음 (상단 고정 가능) | ## Specification ### Page Banner Component spec (JSON): /rootage/components/page-banner.json ### Page Banner Close Button Component spec (JSON): /rootage/components/page-banner-close-button.json