알림 센터 시스템
목적
알림 센터 시스템은 인앱 알림 센터, 피드 또는 받은 편지함을 위한 구조화되고 재사용 가능한 설계 프레임워크를 제공합니다. 최신 웹 애플리케이션, 특히 SaaS 작업 공간, 커뮤니티 포털, 협업 편집기 및 전자상거래 계정에서 알림은 멘션, 댓글, 시스템 알림, 워크플로 상태 업데이트, 작업 완료와 같은 비동기 이벤트에 대한 최신 정보를 사용자에게 제공합니다.
전용 알림 센터가 없으면 애플리케이션은 방해가 되는 오버레이(모달)나 일시적이고 놓치기 쉬운 알림(토스트/배너)에 의존해야 합니다. 이 시스템은 이러한 업데이트를 중앙 집중화하고, 시각적 계층 구조, 상호 작용 상태(읽음 vs. 읽지 않음), 컨텍스트별 그룹화, 반응형 적응을 관리하는 동시에 전체 키보드 및 스크린 리더 접근성(WCAG AA)을 보장합니다.
사용 사례
- 협업 작업 공간: 문서 댓글, 공유 폴더, 작업 할당 및 멘션 집계 (예: Slack, Notion, Figma).
- 비동기 워크플로우: 데이터 내보내기, 백그라운드 보고서, 빌드 배포 또는 배치 처리와 같은 장기 실행 작업 추적.
- 트랜잭션 업데이트: 전자상거래 배송 업데이트, 구독 갱신 알림 또는 결제 확인 추적.
- 소셜 및 커뮤니티 피드: 좋아요, 답글, 팔로우, 그룹 초대 및 활동 업데이트 관리.
- 계정 보안 및 상태: 새로운 로그인 위치, 비밀번호 변경 또는 저장소 할당량 경고를 사용자에게 알림.
사용하지 말아야 할 경우
- 중요 차단: 이벤트로 인해 사용자가 현재 작업을 완료하지 못하도록 해야 하는 경우(예: 결제 실패, 세션 만료, 잘못된 데이터 제출)
오버레이-및-대화상자-시스템(모달/경고 대화상자)을 사용하세요. - 일시적인 단일 작업 피드백: 직접적인 작업에 대한 즉각적인 확인(예: "링크 복사됨", "설정 저장됨")이 필요한 경우 토스트를 사용하세요(
토스트-및-스낵바-시스템참조). - 전역 중단 공지: 사이트 전체의 우선순위가 높은 시스템 알림(예: "30분 후 예정된 점검")의 경우 글로벌 배너를 사용하세요(
배너-및-알림-시스템참조). - 독립형 전환 랜딩 페이지: 독립형 랜딩 페이지는 외부 링크와 방해 요소를 최소화해야 합니다. 글로벌 알림 아이콘은 역효과를 낳습니다.
입력
- 정보 아키텍처 (알림 스키마):
- 메타데이터: 작성자 아바타/이니셜, 이벤트 소스, 작업 유형.
- 내용: 제목(무슨 일이 일어났는지), 본문 텍스트(추가 세부 정보/컨텍스트), 타임스탬프.
- 상태: 읽음 vs. 읽지 않음, 높음/중간/낮음 우선순위, 보관됨.
- 작업: 기본 대상 링크, 인라인 빠른 작업(예: "승인", "읽음으로 표시", "스레드 음소거").
- 표시 컨텍스트 및 밀도: 인터페이스가 고밀도 SaaS 대시보드(공간 효율적인 팝오버 목록 항목 필요)인지 넓은 플랫폼(슬라이드 아웃 서랍 또는 페이지 활용 가능)인지 여부.
- 트리거 아이콘그래피: 시각적 앵커(일반적으로 종 아이콘) 및 알림 배지 디자인(숫자 개수 대 간단한 점 표시기).
- 대화형 작업 레이아웃: 사용 가능한 대량 작업(예: "모두 읽음으로 표시", "모두 지우기", "알림 설정").
출력
- 트리거 배지 해부학: 헤더 아이콘, 숫자 배지 개수 및 무음 표시기 점에 대한 특정 디자인 기준.
- 컨테이너 레이아웃 사양: 크기, 경계, 위치 및 컨테이너 동작(드롭다운, 사이드 드로어 또는 전용 페이지).
- 알림 카드 해부학: 명시적인 내부 레이아웃(아바타, 본문, 타임스탬프, 읽지 않음 표시기 점, 빠른 작업 트리거).
- 상태 전환 매트릭스: 읽지 않음과 읽음 상태, 호버 상태, 활성 상태, 포커스 링 및 로딩 스켈레톤에 대한 별도의 스타일링.
- 키보드 및 스크린 리더 사양: 포커스 트랩 매개변수, 로빙 tabindex 구조, 라이브 리전 알림 정의 및 사용자 지정 aria 설명.
워크플로우
1. 헤더 트리거 및 배지 표시기 설계
알림 센터의 진입점은 거의 항상 전역 유틸리티 헤더(오른쪽)에 있습니다.
- 종 아이콘: 깔끔한 종 아이콘을 선택하세요.
- 읽지 않음 개수 배지:
- 종 아이콘의 오른쪽 상단 사분면에 원형 배지를 배치하세요.
- 컨테이너 오버플로를 방지하기 위해 배지 개수를
99+(또는 매우 좁은 레이아웃의 경우9+)로 제한하세요. - 개수가 0이면 DOM에서 배지를 제거하거나
display: none을 사용하여 숨겨야 합니다(빨간색 버블 안에0을 절대 표시하지 마세요). - 읽지 않은 알림 수를 명시적으로 명시하는
aria-label또는 숨겨진 스크린 리더 텍스트를 포함하세요(예:<span class="sr-only">, 읽지 않은 알림 4개</span>).
2. 컨테이너 레이아웃 패턴 선택
밀도, 대상 장치 및 필요한 상호 작용 양에 따라 레이아웃을 선택하세요.
- 패턴 A: 드롭다운 팝오버 (중간 콘텐츠 밀도의 데스크톱 기본값)
- 트리거를 기준으로 배치됩니다.
- 권장 크기: 최소 너비
320px, 최대 너비420px. 스크롤 가능한 컨테이너(overflow-y: auto)로 높이를500px로 제한하세요. - 최상위 쌓임 컨텍스트에 표시되도록 표준 팝오버 메커니즘(또는 기본 Popover API)을 사용하여 팝업을 고정하세요.
- 패턴 B: 사이드 드로어 (높은 콘텐츠 밀도 또는 복잡한 작업 흐름에 가장 적합)
- 화면 오른쪽 가장자리에서 슬라이드되어 들어오며, 전체 뷰포트 높이를 차지합니다.
- 권장 너비:
360px~480px. - 미묘한 배경 오버레이(스크림)로 페이지 배경을 어둡게 처리하세요.
- 패턴 C: 전용 알림 페이지 (모바일 뷰포트 또는 복잡한 받은 편지함 관리를 위한 대체)
- 정렬, 검색, 필터링 및 대량의 알림 아카이브 관리를 위한 전체 화면 보기입니다.
3. 내부 카드 계층 구조 및 해부학 설정
각 개별 알림은 카드( <ol> 또는 <ul> 내부의 목록 항목 <li>)입니다. 엄격한 수직 및 수평 그리드 계층 구조를 따라야 합니다.
+-------------------------------------------------------------+
| (•) [아바타] **홍길동**님이 _프로젝트 X_에서 회원님을 언급했습니다 (x) |
| "수정된 UI 스케치를 검토해 주세요." |
| [ 3시간 전 ] [ 승인 ] [ 거절 ] |
+-------------------------------------------------------------+
- 읽지 않음 표시기 점 (수평 앵커): 가장 왼쪽에 작고 대비가 높으며 기본 색상(예: 파란색 또는 보라색)의 점을 배치하세요. 이것은 읽지 않은 항목을 가장 빠르게 스캔할 수 있는 앵커입니다.
- 아바타/아이콘 영역: 표시기 옆에 사용자 생성 이벤트의 경우 원형 아바타를 배치하고, 시스템 이벤트의 경우 색상이 지정된 배경 안에 분류된 유틸리티 아이콘을 배치하세요.
- 텍스트 블록 (수직 흐름):
- 제목/헤더: 행위자와 작업을 강조하는 굵은 텍스트입니다.
- 발췌문: 보조 내용(예: 댓글 텍스트, 오류 설명)을 표시하는 더 작고 흐릿한 텍스트입니다. CSS line-clamp를 사용하여 최대 2줄의 텍스트로 제한하세요.
- 타임스탬프: 상대적 시간(예: "5분 전", "어제")을 표시하는 흐릿하고 작은 텍스트(예:
12px)입니다.
- 빠른 작업 (컨텍스트별 트리거):
- 텍스트 발췌문 아래에 정렬된 빠른 작업 버튼(예: "초대 수락", "댓글 보기")을 배치하세요.
- 오른쪽 모서리의 호버/포커스 시 미묘한 보조 트리거(예: 오버플로우 메뉴 버튼 또는 직접 "읽음으로 표시" 확인 표시 버튼)를 제공하세요.
- 닫기/해제 아이콘(X)은 오른쪽 상단 모서리에 위치해야 하며, 터치 상호 작용을 위해 최소
24x24px크기여야 합니다.
4. 명확한 상태 전환 생성
사용자 상호 작용을 반영하는 별개의 상태를 제공하세요.
- 읽지 않음 상태: 밝은 배경, 굵은 텍스트, 보이는 파란색 표시기 점.
- 읽음 상태: 읽지 않음 배경을 희미하게 하고, 텍스트 두께를 보통으로 변경하며, 표시기 점을 숨깁니다.
- 호버/포커스 상태: 배경색을 약간 변경하고(예: 흰색에서 부드러운 중성 회색으로) 보조 인라인 트리거(예: "보관", "읽음으로 표시")를 표시합니다.
- 포커스 상태: 키보드로 탐색할 때 개별 항목 주위에 고대비 포커스 링을 표시합니다. 포커스를 계속 표시하고 선명하게 유지하세요(최소 2px 외곽선 및 오프셋).
- 비활성화 상태: 작업 카드가 처리 중인 경우(예: "승인" 클릭) 인라인 로딩 스피너를 적용하고, 불투명도를
0.5로 줄이고, 버튼 속성을disabled로 설정하여 이중 클릭을 방지하세요.
5. 대량 작업 및 빈 상태 정의
- 바닥글 탐색: "모든 알림 보기"(전용 페이지로 연결) 또는 "모두 읽음으로 표시"에 대한 바닥글 링크를 항상 제공하세요.
- 빈 상태: 알림이 없거나 모든 알림이 지워지면 격려하는 시각 자료(예: 확인 표시 또는 종), 중립적인 헤더("모두 확인 완료!"), "알림 설정"에 대한 보조 설명 링크가 포함된 빈 상태를 표시하세요(
빈-상태-시스템참조).
6. 키보드 포커스 및 스크린 리더 관리 구현
- 트리거 토글: 종 아이콘에서
Enter또는Space를 누르면 팝오버가 토글됩니다.aria-expanded="true/false"및aria-controls="notification-panel-id"를 적용하세요. - 포커스 트랩(드로어 및 팝오버): 열리면 키보드 포커스가 즉시 패널 내부의 첫 번째 작동 가능한 요소(일반적으로 "모두 읽음으로 표시" 버튼 또는 첫 번째 알림 항목)로 이동해야 합니다. 패널이 표시되는 동안 포커스는 패널 내부에 고정되어야 합니다.
Escape를 누르면 패널이 닫히고 포커스가 종 아이콘으로 직접 돌아와야 합니다. - 로빙 Tabindex / 목록 탐색: 알림 항목이 수십 개 있는 경우 키보드 사용자가
ArrowUp및ArrowDown키를 사용하여 카드 사이를 탐색할 수 있도록 하고, 단일 탭 중지점(활성 항목의 경우tabindex="0", 다른 항목의 경우tabindex="-1")을 유지하세요. 이렇게 하면 키보드 사용자가 페이지 끝까지 도달하기 위해 50개의 링크를 탭해야 하는 것을 방지할 수 있습니다. - 스크린 리더 알림: 숨겨진
aria-live="polite"영역을 사용하여 동적으로 발생하는 읽지 않은 개수에 대한 업데이트를 알리세요(예: "Sarah로부터 새 알림").
의사 결정 규칙
규칙 1: 드롭다운 vs. 사이드 드로어 vs. 페이지
이 레이아웃 그리드를 사용하여 컨테이너 구조를 선택하세요.
- 드롭다운 팝오버를 선택하는 경우: 앱에 평균 10-15개 미만의 알림이 있고, 대부분 짧은 업데이트이며, 작업이 간단한 경우(직접 링크 또는 빠른 해제 등).
- 사이드 드로어를 선택하는 경우: 알림 패널에 대화형 탭(예: "전체", "멘션", "보관함")이 포함되어 있거나, 풍부한 여러 줄 카드 요약이 필요하거나, 알림 내에서 직접 답장할 수 있는 텍스트 입력과 같은 복잡한 양식 필드가 필요한 경우.
- 전용 페이지를 선택하는 경우: 사용자가 강력한 검색 필터, 확인 표시 다중 선택 및 대규모 보관 워크플로우가 필요한 알림이 많은 작업 부하(예: GitHub PR 검토 받은 편지함, Zendesk 지원 티켓, Shopify 스토어 알림)를 관리하는 경우.
규칙 2: 아바타 vs. 아이콘 표시기
- 특정 사용자가 트리거한 소셜 또는 직접 협업 이벤트인 경우 사용자 아바타(이미지 또는 이니셜)를 사용하세요(예: "Sarah가 파일을 공유했습니다").
- 시스템에서 생성된 이벤트인 경우 시스템 아이콘(상태별 색상: 알림은 빨간색, 경고는 노란색, 정보는 파란색)을 사용하세요(예: "데이터베이스 백업 완료").
규칙 3: 읽음으로 표시 작업 동작
- 알림 카드를 클릭하면 사용자를 딥 링크 대상으로 리디렉션하고 항목을 읽음으로 표시해야 합니다.
- 카드에 전용으로 표시되는 "읽음으로 표시" 확인 표시 아이콘을 제공하여 사용자가 패널에서 벗어나지 않고 항목을 읽음으로 표시할 수 있도록 하세요.
제약 조건
1. 대비 및 크기 (WCAG AA)
- 텍스트 대비: 모든 알림 복사본이
4.5:1대비 비율을 충족하는지 확인하세요. 타임스탬프와 흐릿한 발췌문은4.5:1(또는 큰 텍스트의 경우3:1) 아래로 떨어지지 않아야 합니다. - 터치 대상: 개별 버튼(닫기 아이콘, 수락/거절 링크, 읽음으로 표시 확인 표시)의 탭 대상은 WCAG 2.2 SC 2.5.8 최소 대상 크기인
24x24px를 충족해야 합니다. - 키보드 대비: 포커스 링은 카드 배경에 대해 최소
3:1의 대비 비율을 가져야 합니다.
2. 반응성
- 데스크톱: 플로팅 패널은 지능적으로 위치해야 합니다. 트리거가 화면 오른쪽 가장자리 근처에 있으면 잘림을 방지하기 위해 팝오버가 오른쪽에 정렬되어야 합니다.
- 모바일 뷰포트 (
< 768px): 데스크톱 드롭다운 팝오버를 전체 화면 패널 또는 하단 정렬 슬라이드 업 시트로 변환하여 엄지 손가락 도달 접근성을 보장하고 작고 스크롤 불가능한 팝오버 컨테이너를 방지하세요.
3. 동적 쌓임
- 팝오버 또는 드로어의 z-index가 표준 레이아웃 요소 위에 있지만 모달 트리거 아래에 구성되었는지 확인하세요(예:
--z-index-popover: 1000,--z-index-modal: 2000).
일반적인 실패 패턴
- "벗어날 수 없는 받은 편지함": 데스크톱에서 드롭다운 알림 팝오버를 열었지만
Escape키 닫기 리스너를 제공하지 않는 경우. 사용자는 강제로 작은 "X"를 찾아 클릭하거나 팝오버 외부를 클릭하여 닫아야 합니다. - "멈춘 배지" 루프: 알림 배지에 읽지 않은 항목
3개가 표시되지만 패널을 열면 어떤 카드가 읽지 않았는지 시각적으로 강조 표시되지 않고 읽음으로 표시할 명확한 방법도 제공되지 않습니다. 배지는 계속 멈춰 있어 사용자 피로를 유발하고 결국 배너 맹목 현상이 발생합니다. - "싱크대" 피드: 이메일 전문, 원시 데이터베이스 로그 및 마케팅 프로모션을 작은 드롭다운 패널에 채워 넣어 레이아웃 오버플로우를 일으키고 시각적 계층 구조를 무너뜨리는 경우.
- 스크롤 시 레이아웃 이동: 정적 픽셀 좌표로 스타일이 지정된 팝오버가 스크롤 시 헤더 종 아이콘에 계속 부착되지 못하고 콘텐츠 위에 임의로 떠다니는 경우.
- 이중 포커스 외곽선: 외부 컨테이너 카드와 내부 딥 링크 버튼이 동시에 포커스를 캡처하여 키보드 사용자가 알림당 두 번 탭해야 하는 이중 레이어 포커스 스타일링.
검증 기준
- 배지 개수 동작: 읽지 않은 개수가
0이면 빨간색 점이나 숫자 표시기가 보기에서 완전히 숨겨집니다. - 상태 대비: 읽지 않은 카드는 읽은 카드와 시각적으로 명확하게 구분됩니다(배경, 텍스트 두께 및 표시기 점 사용).
- 대상 크기: 카드 내부의 모든 클릭 가능한 버튼/링크가 WCAG 2.2 24x24px 터치 대상 최소값을 충족합니다.
- 반응형 변환: 모바일 뷰포트에서 알림 센터가 전체 화면 패널 또는 바텀 시트로 전환됩니다.
- 포커스 트랩: 패널이 열리면 키보드 포커스가 패널 내부에 갇히고
Escape가 포커스를 트리거로 돌려보냅니다. - 스크린 리더: 알림 카드에 올바른
aria속성(aria-live,role="status",aria-label)이 포함되어 있습니다. - 빈 상태: 알림이 없으면 빈 상태가 올바르게 표시됩니다.
- 로딩 상태: 콘텐츠를 가져오는 동안 스켈레톤 로딩 상태가 표시됩니다.