알림 내역

Update History

1. 화면 구조 개요

HOM-004는 알림 내역 화면이다. 홈 화면(HOM-001/002/003) 우측 상단의 알림 아이콘(벨) 클릭 시 노출된다. 로그인 사용자만 접근 가능하며, 비로그인 사용자가 알림 아이콘을 클릭하면 LOG-008(로그인 안내 모달)이 먼저 표시된다.

화면은 헤더(뒤로가기 + 타이틀) + 알림 리스트(무한 스크롤)의 단순 2레이어 구조이다. 알림은 읽음/안 읽음 상태에 따라 배경색이 구분되며, 카테고리 라벨(소식/찜 작품 알림/공지사항/혜택)로 알림 유형을 구분한다.

구성 요소	역할	높이
Status Bar	iOS 시스템 상태바 (시간, 신호, 배터리)	47px (safe area)
헤더	뒤로가기(<) + 타이틀 "알림"	48px
알림 리스트	읽지 않은 + 읽은 알림 카드 세로 리스트	auto (스크롤)
Home Indicator	iOS 홈바	34px

2. 레이어 구조 + 치수

2-A. Status Bar (47px)

• 높이: 47px (iOS safe area inset)
• 배경: var(--bg) var(--bg)
• 좌측: 시간 "9:41" / 우측: 신호, Wi-Fi, 배터리 아이콘
• 아이콘 fill: var(--charcoal) (iOS 시스템 색상)

2-B. 헤더 (48px)

• 높이: 48px
• 배경: var(--bg) var(--bg)
• 레이아웃: display: flex; align-items: center
• 패딩: 0 24px (좌우)
• 뒤로가기 화살표: SVG 10x18 viewBox, position: absolute; left: 24px
  • stroke: var(--charcoal) var(--charcoal)
  • stroke-width: 1.5
  • stroke-linecap: square / stroke-linejoin: miter (CHAART 직각 스타일)
  • path: M9 1L1 9l8 8
• 타이틀 "알림": flex: 1; text-align: center
  • font-family: var(--sans) (Pretendard Variable)
  • font-size: 17px
  • font-weight: 700
  • color: var(--charcoal) var(--charcoal)
  • letter-spacing: var(--ls-tight) -0.02em
• 하단 구분선: border-bottom: 1px solid var(--alpha-6)

2-C. 알림 카드 (개별 반복 단위)

• 레이아웃: display: flex; flex-direction: column; justify-content: center
• 패딩: 16px 24px (상하 16px, 좌우 24px)
• 카드 간 구분: border-bottom: 1px solid var(--alpha-6)
• 카테고리 라벨 (첫 번째 줄)
  • font-family: var(--sans) (Pretendard Variable)
  • font-size: 11px
  • font-weight: 600
  • color: var(--text-secondary) var(--text-secondary)
  • letter-spacing: var(--ls-wide) 0.04em
  • margin: 0 0 6px
• 본문 텍스트 (두 번째 줄)
  • font-family: var(--sans) (Pretendard Variable)
  • font-size: 14px
  • font-weight: 400
  • color: var(--charcoal) var(--charcoal)
  • line-height: 1.55
  • letter-spacing: -0.005em
  • margin: 0
• 타임스탬프 (세 번째 줄)
  • font-family: var(--mono) (TASA Orbiter / Space Grotesk)
  • font-size: 11px
  • font-weight: 400
  • color: var(--text-muted) var(--text-muted)
  • letter-spacing: var(--ls-wide) 0.04em
  • margin: 8px 0 0
• 내부 간격 요약: 카테고리→본문 6px (margin-bottom), 본문→시간 8px (margin-top)

2-D. 읽지 않은 / 읽은 알림 배경 구분

상태	배경 토큰	실제값	시각 구분
읽지 않은 알림	var(--neutral-90)	#E5E5E5	밝은 회색 배경 (읽은 것과 확연히 구분)
읽은 알림	var(--bg)	var(--bg)	기본 배경 (warm paper)

2-E. Home Indicator (34px)

• 높이: 34px
• iOS 홈 인디케이터 바 (시스템 컴포넌트, 직접 구현 불필요)

3. 핵심 인터랙션

사용자 동작	시스템 반응
← 뒤로가기 버튼 클릭	이전 화면(홈)으로 이동 + 모든 알림 전체 읽음 처리 (서버 API 호출)
알림 카드 클릭 (랜딩 존재)	해당 알림 즉시 읽음 상태 전환 + 연결된 랜딩 페이지로 이동
알림 카드 클릭 (랜딩 없음)	해당 알림 읽음 처리 + 토스트 메시지 "이동할 페이지가 없습니다" 노출
리스트 세로 스크롤	과거 알림 추가 로딩 (무한 스크롤 또는 페이지네이션)

4. 상태 변화

4-A. 알림 카드 상태 전이

이전 상태	트리거	다음 상태	UI 변경
unread (안 읽음)	카드 클릭	read (읽음)	배경 --neutral-90 → --bg
unread (전체)	뒤로가기 클릭	read (전체)	모든 카드 배경 → --bg
read (읽음)	-	read (읽음)	변화 없음 (읽음→안 읽음 복원 불가)

4-B. 토스트 메시지 상태

• 조건: 알림 클릭 시 연결된 랜딩 페이지가 존재하지 않는 경우
• 메시지 텍스트: "이동할 페이지가 없습니다"
• 위치: 화면 하단 (Home Indicator 위쪽)
• 동작: 노출 후 자동 dismiss (약 2.5~3초)

4-C. 알림 유형별 카테고리

카테고리 라벨	알림 내용	클릭 시 연결 화면
소식	시스템/서비스 일반 알림	관련 화면 (동적)
찜 작품 알림	찜한 작품 상태 변경 (가격변동 등)	MKT-013 작품 상세
공지사항	서비스 공지	공지 상세 화면
혜택	프로모션/이벤트	이벤트 상세 화면

5. 네비게이션 플로우

5-A. 진입 경로

출발 화면	트리거	결과
HOM-001 / HOM-002 / HOM-003	우측 상단 알림 아이콘(벨) 클릭	→ HOM-004 (알림 내역)

5-B. 이탈 경로

동작	이동 화면	비고
← 뒤로가기 클릭	HOM-001 / HOM-002 / HOM-003 (직전 홈 화면)	전체 읽음 처리 후 이동
"소식" 카드 클릭	관련 화면 (동적)	해당 알림 읽음 처리
"찜 작품 알림" 카드 클릭	MKT-013 (작품 상세)	해당 알림 읽음 처리
"공지사항" 카드 클릭	공지 상세 화면	해당 알림 읽음 처리
"혜택" 카드 클릭	이벤트 상세 화면	해당 알림 읽음 처리

6. 에러/예외 처리

예외 상황	처리	연결 화면
비로그인 사용자가 알림 아이콘 클릭	로그인 안내 모달 노출	LOG-008
LOG-008에서 로그인 완료	HOM-004(알림 내역) 화면으로 이동	HOM-004
LOG-008에서 취소/닫기	기존 화면(홈) 유지, 이동 없음	- (현재 화면 유지)
알림 클릭 시 랜딩 페이지 없음	토스트 "이동할 페이지가 없습니다" 노출, 화면 유지	- (현재 화면 유지)
알림 목록 비어있음 (0건)	empty state 노출 (텍스트: "알림이 없습니다" 또는 유사)	-
네트워크 오류 (알림 로딩 실패)	에러 토스트 또는 재시도 UI	-

7. 모션 스펙

대상	속성	값
화면 진입	Push Navigation (right→left)	translateX(100% → 0), 350ms, ease-out
뒤로가기 이탈	Pop Navigation (left→right)	translateX(0 → 100%), 300ms, ease-in
알림 읽음 전환	background-color transition	background-color 200ms ease (--neutral-90 → --bg)
토스트 노출	slide-up + fade-in	translateY(20px → 0) + opacity(0 → 1), 250ms
토스트 dismiss	fade-out	opacity(1 → 0), 200ms, 2.5초 후 자동 실행
카드 탭 피드백	active press 스케일	scale(0.98), 100ms, ease

8. 여백 · 간격 요약

위치	속성	값
헤더 좌우 패딩	padding	0 24px
뒤로가기 화살표 left	position left	24px
알림 카드 패딩	padding	16px 24px (상하 16, 좌우 24)
카테고리 → 본문	margin-bottom	6px
본문 → 타임스탬프	margin-top	8px
카드 간 구분선	border-bottom	1px solid var(--alpha-6)
헤더 하단 구분선	border-bottom	1px solid var(--alpha-6)

9. 적용 디자인 토큰

9-A. 색상 토큰

토큰	실제값	사용처
--charcoal	var(--charcoal)	헤더 타이틀 색상, 뒤로가기 화살표 stroke, 본문 텍스트 색상
--bg	var(--bg)	헤더 배경, 읽은 알림 카드 배경
--neutral-90	#E5E5E5	읽지 않은 알림 카드 배경
--text-secondary	var(--text-secondary)	카테고리 라벨 색상
--text-muted	var(--text-muted)	타임스탬프 색상

9-B. 타이포그래피 토큰

요소	font-family	size	weight	letter-spacing
헤더 타이틀 "알림"	var(--sans)	17px	700	var(--ls-tight) -0.02em
카테고리 라벨	var(--sans)	11px	600	var(--ls-wide) 0.04em
알림 본문	var(--sans)	14px	400	-0.005em
타임스탬프	var(--mono)	11px	400	var(--ls-wide) 0.04em

9-C. 스페이싱/레터스페이싱 토큰

토큰	값	사용처
--ls-tight	-0.02em	헤더 타이틀
--ls-wide	0.04em	카테고리 라벨, 타임스탬프

9-D. 구분선/보더 토큰

• 헤더 하단 + 카드 간 구분선: 1px solid var(--alpha-6)
• 참고: var(--border) = var(--border) (시스템 전역 토큰). 이 화면에서는 피그마 산출물 기준 var(--alpha-6) 을 사용 (미세하게 밝음)

9-E. 접근성 적용

• 알림 리스트 전체: role="list"
• 각 알림 카드: role="listitem"
• 읽지 않은 알림 카드: aria-label에 "읽지 않음" 텍스트 포함
• 뒤로가기 버튼: aria-label="뒤로 가기"
• 터치 타겟: 카드 전체 영역 탭 가능, 최소 높이 48px 이상 확보 (카드 padding 16 + 내부 콘텐츠로 자동 충족)

9-F. 리스트 공통 규칙

• 정렬: 최신 알림이 상단에 노출되는 내림차순 리스트 구조
• 스크롤: 세로 스크롤 방식으로 전체 목록 확인 가능
• 삭제: 개별 항목 삭제 기능 없음 — 누적 노출 방식
• 상태 관리: 읽음/안 읽음 상태는 서버 기준으로 관리 (클라이언트 캐시 아님)
• 보존 기간: 알림 저장 범위는 서비스 정책에 따라 확정