Banner 및 알림 시스템

배너 및 알림 시스템

목적

배너 및 알림 시스템은 비-지속적, 비-오버레이 통신 계층을 설계하기 위한 방법론을 제공합니다. 사용자를 중단시키는 모달과 달리 배너와 알림은 사용자가 현재 작업을 계속할 수 있도록 하면서 중요한 정보(상태 업데이트, 경고 또는 공지사항)를 전달합니다. 이 시스템은 알림이 시각적으로 구별되고, 적절한 우선순위가 지정되며, 접근 가능하도록 보장합니다.

사용 사례

• 사이트 전체 공지사항 전달 (예: "2시간 후 예정된 정기 점검").
• 양식 내 컨텍스트 피드백 제공 (예: "변경 사항이 성공적으로 저장되었습니다").
• 계정 문제에 대한 사용자 경고 (예: "구독이 3일 후 만료됩니다").
• 전체 앱을 차단하지는 않지만 기능에 영향을 미치는 시스템 오류 알림 (예: "은행 동기화를 현재 사용할 수 없습니다").
• 프로모션 또는 새로운 기능 출시를 위한 "마케팅 배너" 표시.

사용하지 말아야 할 경우

• 중요 차단: 사용자가 진행하기 전에 반드시 조치를 취해야 하는 경우 overlay-and-dialog-system (모달)을 사용하세요.
• 수동적 피드백: 수명이 짧고 우선순위가 낮은 상태 업데이트 (예: "링크 복사됨")에는 overlay-and-dialog-system의 토스트를 사용하세요.
• 데이터 레이블: 단일 항목의 간단한 상태 표시기에는 badge-and-tag-system을 사용하세요.
• 탐색: 기본 또는 보조 탐색 링크에는 배너를 사용하지 마세요. site-navigation-system을 사용하세요.

입력

1. 메시지 중요도: 오류, 경고, 성공 또는 정보 메시지입니까?
2. 범위: 전역(사이트 전체)입니까, 아니면 인라인(특정 섹션/페이지)입니까?
3. 해제 가능성: 사용자가 이 메시지를 숨길 수 있습니까, 아니면 계속 표시되어야 합니까?
4. 조치 필요 여부: 메시지에 후속 조치가 필요합니까? (예: "결제 정보 업데이트")
5. 브랜드 팔레트: 상태에 대한 표준 색상 (위험 빨강, 경고 주황 등).

출력

1. 알림 구성 요소 사양: 아이콘, 텍스트 계층 구조 및 작업 배치에 대한 정의.
2. 공간 논리: 배너가 표시되는 위치에 대한 규칙 (뷰포트 상단, 콘텐츠 위, 또는 섹션 내부).
3. 상태 매트릭스: 다양한 메시지 중요도에 대한 시각적 처리.
4. 접근성 계획: 대화형 알림을 위한 ARIA 역할 및 포커스 관리 규칙.

워크플로우

1. 알림 수준 결정 (중요도)

의도에 따라 상태를 할당합니다:

• 오류 (높은 우선순위): 주의가 필요하지만 뷰를 깨지 않는 중요 문제.
• 경고 (중간 우선순위): 잠재적인 문제 또는 다가오는 마감일.
• 성공 (낮은 우선순위): 완료된 작업의 확인.
• 정보/공지: 중립적인 정보 또는 마케팅 업데이트.

2. 배치 패턴 선택

• 전역 배너 (상단 바): 뷰포트의 맨 위에 위치. 높은 우선순위의 사이트 전체 공지사항에 가장 적합.
• 페이지 배너: 전역 헤더 아래, 페이지 콘텐츠 위에 위치. 페이지별 알림에 가장 적합.
• 인라인 알림: 섹션 내부 또는 관련 구성 요소 옆에 직접 위치 (예: 양식 내부). 컨텍스트 피드백에 가장 적합.

3. 구성 요소 구조 설계

각 알림은 일관된 내부 계층 구조를 따라야 합니다:

• 아이콘: 중요도를 나타내는 시각적 약어 (예: 성공의 체크 표시).
• 제목 (선택 사항): 더 긴 알림을 위한 굵은 제목.
• 설명: 핵심 메시지. 간결하게 유지하세요.
• 작업: 다음 단계를 위한 버튼 또는 링크.
• 해제 트리거: 알림이 중요하지 않은 경우 'X' 버튼.

4. 상호작용 규칙 수립

• 지속성: 알림이 작업 후 사라지는지, 시간 초과 후 사라지는지 (배너에는 권장되지 않음), 또는 수동으로 해제할 때만 사라지는지 결정합니다.
• 레이아웃 이동 관리: 나타나는 배너가 갑작스러운 레이아웃 이동(CLS)을 일으키지 않도록 합니다. 예약된 공간이나 부드러운 전환을 사용하세요.

5. 반응형 동작 정의

• 쌓기: 모바일에서는 작업이 가로로 맞지 않으면 텍스트 아래로 이동해야 합니다.
• 너비: 전역 배너는 전체 너비입니다. 인라인 알림은 컨테이너 너비를 따릅니다.

의사 결정 규칙

• "한 번에 하나" 규칙: 두 개 이상의 전역 배너를 쌓지 마십시오. 여러 공지사항이 있는 경우 단일 "알림 센터" 또는 슬라이더로 통합하세요.
• 색상 + 아이콘: 알림 상태를 전달하기 위해 색상에만 의존하지 마십시오. 접근성을 위해 항상 아이콘을 포함하세요.
• 컨텍스트별 배치: 사용자 행동(예: "저장" 버튼 클릭)으로 인한 알림은 작업 지점 근처(인라인)에 배치합니다. 시스템 상태인 경우 상단(전역)에 배치합니다.
• 해제 로직: "정보" 및 "성공" 배너는 항상 사용자가 해제할 수 있도록 합니다. "오류" 및 "경고" 배너는 기본 문제가 해결된 경우에만 해제되어야 합니다.

제약 사항

• 접근성: 높은 우선순위 오류에는 role="alert"를, 낮은 우선순위 업데이트에는 role="status"를 사용합니다. 텍스트에 대해 4.5:1 명도 대비를 확인합니다. 전역 배너가 고정/고정된 경우 콘텐츠 스크롤 시 포커스된 요소를 영구적으로 가리지 않는지 확인합니다 (WCAG 2.2 SC 2.4.11).
• 타이포그래피: 명확한 글꼴 크기(최소 14px)를 사용하고 긴 설명에는 모두 대문자를 피합니다.
• 모바일 도달: 해제 버튼이 WCAG 2.2 SC 2.5.8 최소 24x24px를 충족하는지 확인하고, 레이아웃이 허용하는 경우 최대 44x44px로 크기를 조정합니다.

일반적인 실패 패턴

• "무시 가능한 오류": 중요한 오류에 "정보" 스타일을 사용하여 사용자가 중요한 경고를 놓치게 합니다.
• 침입적 마케팅: 사용자를 짜증나게 하고 "알림" 공간의 가치를 떨어뜨리는 저가치 프로모션에 전역 배너를 사용합니다.
• 누락된 조치: 사용자에게 문제가 있음 (예: "결제 실패")을 알리면서 문제를 해결할 직접적인 링크를 제공하지 않습니다.
• 레이아웃 쓰래싱: "팝인"되어 전체 페이지 콘텐츠를 아래로 밀어내는 배너로 인해 사용자가 잘못 클릭하게 됩니다.

검증 기준

• 모든 알림은 중요도와 일치하는 아이콘 및 색상 조합을 사용합니다.
• 전역 배너는 계층 구조의 맨 위에 배치됩니다.
• 인라인 알림은 관련 콘텐츠와 가까운 곳에 배치됩니다.
• 모든 대화형 요소 (닫기, CTA)는 WCAG 2.2 최소 24x24px 터치 대상(2.5.8)을 충족합니다.
• 높은 우선순위 알림은 적절한 ARIA 역할(alert)을 사용합니다.
• 해제 가능한 배너는 해당 상태를 기억합니다 (또는 다시 나타나는 시점에 대한 로직이 있습니다).