사용자 화면 · 홈

알림 내역

HOM-004 · 2026. 03. 04

화면 이름 알림 내역
화면 위치 홈 > 알림 내역
화면 ID HOM-004
작성일 2026. 03. 04
9:41
알림

30분전

소식

시스템 알림입니다. 시스템 알림입니다. 시스템 알림입니다. 시스템 알림입니다.

30분전

찜 작품 소식

찜 작품 소식입니다. 찜 작품 소식입니다. 찜 작품 소식입니다.

30분전

1일전

공지사항

공지사항입니다. 공지사항입니다. 공지사항입니다.

1일전

혜택

혜택입니다. 혜택입니다. 혜택입니다. 혜택입니다.

1일전

3주전

소식

시스템 알림입니다. 시스템 알림입니다.

3주전

핀 작품 알림

핀 작품 소식입니다. 핀 작품 소식입니다.

3주전

공지사항

공지사항입니다. 공지사항입니다.

3주전

1
2
3
Description
0 화면 접근 조건
  • 홈 화면 우측 상단 알림 아이콘 클릭 시 본 화면으로 이동됨
  • 로그인 사용자만 진입 가능
  • 비로그인 시 내용이 없고 시 처리
    • HOM-001/002/003 홈 화면에서 알림 아이콘 클릭 시
      • 로그인이 되어 있으면(LOG-006)
      • HOM-004(알림 내역) 화면으로 이동
    • 로그인이 되어 있지 않으면
      • LOC-008에서 자동/가입 처리
1 헤더
  • 뒤로가기 버튼과 화면 타이틀 '알림'으로 구성됨
  • 뒤로가기 버튼 클릭 시 이전 화면(홈)으로 이동됨
2 읽지않은 알림 내역
  • 사용자가 아직 확인하지 않은 알림 목록 영역
  • 읽지 않은 알림은 짙은 색깔과 시각적으로 구분되는 배경 색상으로 노출
    • 이는 배경 색상 같은 추후 디자인에서 정의
  • 알림 유형에 따라 상단에 알림 카테고리 라벨이 노출될 수 있음
    • 알림 유형 시 작품 알림은 관련 화면에 이동됨
  • 알림을 클릭하는 즉시 읽은 상태 전환
3 읽은 알림 내역
  • 사용자가 이미 확인한 알림 목록 영역이
  • 알림을 읽은 기준은 해당 알림을 클릭한 시점
  • 읽은 알림 시 연경될 내용 노출
  • 알림 클릭 시 시간별 내용 확인 및 관련 화면/화면
4 토스트 메세지 정의
  • 알림 클릭 시 연결된 페이지가 존재하지 않는 경우
    • 토스트 메시지 노출
      • 이 내용은 준비중입니다.
    • 토스트 메시지는 화면 하단에 노출되며, 자동으로 사라짐
5 공통 규칙
  • 알림 내역은 최신 알림이 상단에 노출되는 리스트 구조임
  • 알림내역은 스크롤 방식으로 목록을 확인할 수 있음
  • 알림 저장 범위는 사용 가능 기존에 따라 확정된다
  • 화면 내 모든 텍 기능은 로그인 사용자만 사용 가능
  • 비로그인 사용자는 앱 상태 변경 불가

Design Output

UI 디자인 산출물

위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.

9:41
알림

30분전

소식

시스템 알림입니다. 시스템 알림입니다. 시스템 알림입니다. 시스템 알림입니다.

30분전

찜 작품 소식

찜 작품 소식입니다. 찜 작품 소식입니다. 찜 작품 소식입니다.

30분전

1일전

공지사항

공지사항입니다. 공지사항입니다. 공지사항입니다.

1일전

혜택

혜택입니다. 혜택입니다. 혜택입니다. 혜택입니다.

1일전

3주전

소식

시스템 알림입니다. 시스템 알림입니다.

3주전

핀 작품 알림

핀 작품 소식입니다. 핀 작품 소식입니다.

3주전

공지사항

공지사항입니다. 공지사항입니다.

3주전

Applied Design Tokens
요소Token값
전체 배경 --bg #FAFAF8
헤더 --sans · 17px · 700 back arrow square/miter
알림 카테고리 라벨 --mono · 10px TASA Orbiter, --text-secondary
알림 본문 --sans · 13px · 400 Pretendard, --charcoal
시간 표시 --mono · 10px TASA Orbiter, --text-muted
미확인 알림 bg rgba(26,26,26,0.04) 좌측 3px --charcoal 보더
구분선 rgba(26,26,26,0.06) 1px
좌우 패딩 24px 전체 콘텐츠 마진
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • 홈 화면 우측 상단 알림 아이콘 클릭 시 본 화면으로 이동됨
  • 로그인 사용자만 진입 가능
  • 비로그인 시 내용이 없고 시 처리
    • HOM-001/002/003 홈 화면에서 알림 아이콘 클릭 시
      • 로그인이 되어 있으면(LOG-006)
      • HOM-004(알림 내역) 화면으로 이동
    • 로그인이 되어 있지 않으면
      • LOC-008에서 자동/가입 처리
1 헤더
  • 뒤로가기 버튼과 화면 타이틀 '알림'으로 구성됨
  • 뒤로가기 버튼 클릭 시 이전 화면(홈)으로 이동됨
2 읽지않은 알림 내역
  • 사용자가 아직 확인하지 않은 알림 목록 영역
  • 읽지 않은 알림은 짙은 색깔과 시각적으로 구분되는 배경 색상으로 노출
    • 이는 배경 색상 같은 추후 디자인에서 정의
  • 알림 유형에 따라 상단에 알림 카테고리 라벨이 노출될 수 있음
    • 알림 유형 시 작품 알림은 관련 화면에 이동됨
  • 알림을 클릭하는 즉시 읽은 상태 전환
3 읽은 알림 내역
  • 사용자가 이미 확인한 알림 목록 영역이
  • 알림을 읽은 기준은 해당 알림을 클릭한 시점
  • 읽은 알림 시 연경될 내용 노출
  • 알림 클릭 시 시간별 내용 확인 및 관련 화면/화면
4 토스트 메세지 정의
  • 알림 클릭 시 연결된 페이지가 존재하지 않는 경우
    • 토스트 메시지 노출
      • 이 내용은 준비중입니다.
    • 토스트 메시지는 화면 하단에 노출되며, 자동으로 사라짐
5 공통 규칙
  • 알림 내역은 최신 알림이 상단에 노출되는 리스트 구조임
  • 알림내역은 스크롤 방식으로 목록을 확인할 수 있음
  • 알림 저장 범위는 사용 가능 기존에 따라 확정된다
  • 화면 내 모든 텍 기능은 로그인 사용자만 사용 가능
  • 비로그인 사용자는 앱 상태 변경 불가
← 이전 화면: HOM-003 다음 화면: HOM-005 →