사용자 화면 · 마이페이지

공지사항 상세

MYP-010 · 2026. 01. 30

화면 이름 공지사항
화면 위치 마이페이지 > 공지사항
화면 ID MYP-010
작성일 2026. 01. 30
MYP-010 MYP-010
Description
0 화면 접근 조건
  • 공지사항은 로그인/비로그인 사용자 전체 접근 가능
1-1 공지사항 리스트 헤더 영역
  • 공지사항 리스트 헤더 영역
    • 구성
      • 뒤로가기 버튼
      • 타이틀 : 공지사항
      • 뒤로가기 버튼 클릭 시
        • 마이페이지 메인(MYP-001)으로 이동
1-2 공지사항 리스트 공지사항 유형 탭
  • 구성
    • 전체/이벤트/시스템/기타 탭
    • 탭 선택 시
      • 해당 유형의 공지사항 리스트로 필터링
      • 리스트는 최신 등록순으로 노출
1-3 공지사항 리스트
  • 구성
    • 공지사항 유형 라벨
    • 공지사항 제목
    • 등록일
    • 우측 화살표 아이콘
    • 리스트 항목 클릭 시
      • 공지사항 상세 화면으로 이동
2-1 공지사항 상세 내용 헤더 영역
  • 구성
    • 뒤로가기 버튼
    • 타이틀 : 공지사항 제목
    • 뒤로가기 버튼 클릭 시
      • 공지사항 리스트 화면으로 이동
2-2 공지사항 상세 내용 제목 영역
  • 구성
    • 공지사항 제목
    • 등록일
2-3 공지사항 상세 내용 본문 영역
  • 구성
    • 공지사항 본문 텍스트
      • 이미지가 포함된 경우 이미지 노출 가능
3 토스트 메시지 정의
  • 공지사항 목록 로딩 실패 시
    • 공지사항을 불러올 수 없어요. 잠시 후 다시 시도해주세요.
    • 공지사항 내용을 불러올 수 없어요. 잠시 후 다시 시도해주세요.
4 공통 규칙
  • 공지사항은 서비스 운영을 위한 고정 정보로 사용자가 삭제/수정 불가
  • 로그인 상태와 무과하게 동일한 공지사항 노출
  • 공지사항 리스트 및 상세 화면은 최신 정보 기준으로 갱신됨

Design Output

UI 디자인 산출물

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

9:41
공지사항
전체
이벤트
시스템
기타
MYP-010

(이벤트) 공지사항 제목입니다.

20XX. XX. XX

(시스템) 공지사항 제목입니다.

20XX. XX. XX

(기타) 공지사항 제목입니다.

20XX. XX. XX

(이벤트) 공지사항 제목입니다.

20XX. XX. XX

9:41
(이벤트) 공지사항 제목입니다.

(이벤트) 공지사항 제목입니다.

20XX. XX. XX

차트를 이용하시면서 궁금한 점이나 문의사항이 있으신가요? 안내된 1:1 문의를 통해 연락하시기 바랍니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다.

개발 구현 가이드 — MYP-010 공지사항 상세

Update History

2026.03.19sb-wireframe-frame 패턴 전환 (MKT 품질 통일), DS v2 연동, 구조 정합성 수정
2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합, Description/디자인 산출물 기준 전면 재작성
2026.03.16구현 가이드 최신화 (8섹션 재작성)
2026.03.11구현 가이드 추가 (7섹션: 화면구조, 레이어구조, 공지목록, 상세본문, 히어로, 에러처리, 예외처리)
2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

  • 2개 화면 구성: 공지사항 리스트 / 공지사항 상세
  • 리스트 화면: 상태바(44px) → 네비바(48px) → 탭 필터(전체/이벤트/시스템/기타) → Paper-Catalog Hero(160px, margin 16px 24px) → 리스트 항목들 → 홈 인디케이터(34px)
  • 상세 화면: 상태바(44px) → 네비바(48px) → 제목+날짜 영역 → 본문 영역 → 홈 인디케이터(34px)
  • 전체 배경: --bg (#FAFAF8)
  • 로그인/비로그인 사용자 전체 접근 가능

2. 레이어 구조 + 치수

#영역높이/위치배경/스타일
1상태바44pxiOS 시스템 상태바
2네비게이션 바48px--bg (#FAFAF8), padding 0 24px, gap 12px
3탭 필터 (리스트)auto (padding 12px 0)flex, 4등분, border-bottom 1px solid rgba(26,26,26,0.06)
4Paper-Catalog Hero160pxmargin 16px 24px, --paper + linen, CHRT 모노그램(50x58)
5콘텐츠 영역flex:1리스트 항목 or 상세 본문
6홈 인디케이터34pxiOS 홈 바 영역
  • 네비바: 뒤로가기 아이콘(chevron-left, 20x20px, --charcoal #1A1A1A, stroke 1.5px, round/round) + 타이틀(--sans Pretendard 17px/700, --charcoal, ls: -0.02em)
  • 활성 탭: --sans Pretendard 14px/700, --charcoal #1A1A1A, border-bottom 2px solid --charcoal
  • 비활성 탭: --sans Pretendard 14px/500, --text-muted (#888888)
  • 리스트 제목: --sans Pretendard 14px/500, --charcoal, ls: -0.01em
  • 리스트 날짜: --mono TASA Orbiter 11px/400, --text-muted, ls: 0.02em
  • 리스트 화살표: chevron-right 8x14px, --charcoal, stroke 1.5px, square
  • 리스트 항목 padding: 14px 24px
  • 상세 제목: --sans Pretendard 15px/600, --charcoal, ls: -0.01em
  • 상세 날짜: --mono TASA Orbiter 11px/400, --text-muted, ls: 0.02em
  • 상세 본문: --sans Pretendard 14px/400, --charcoal, line-height 1.8, ls: -0.005em

3. 핵심 인터랙션

  • 탭 필터 선택: 전체/이벤트/시스템/기타 탭 선택 시 해당 유형의 공지사항만 필터링하여 리스트 표시
  • 리스트 항목 탭: 공지사항 상세 화면으로 전환 (push navigation)
  • 뒤로가기 (리스트): 마이페이지 메인(MYP-001)으로 이동
  • 뒤로가기 (상세): 공지사항 리스트 화면으로 이동

4. 상태 변화

  • 탭 전환: 활성 탭에 bold(700) + 2px underline 적용, 비활성 탭은 medium(500) + --text-muted
  • 리스트 → 상세: 리스트 항목 탭 시 상세 화면으로 push transition
  • 이미지 포함 공지: 본문 영역에 이미지 노출 (조건부 렌더링)

5. 네비게이션 플로우

  • 진입: 마이페이지 메인(MYP-001) → 공지사항 리스트(MYP-010)
  • 리스트 → 상세: 리스트 항목 탭 → 공지사항 상세(동일 화면 내 전환)
  • 상세 → 리스트: 뒤로가기 → 공지사항 리스트로 복귀
  • 리스트 → MYP-001: 뒤로가기 → 마이페이지 메인

6. 에러 / 예외 처리

  • 목록 로딩 실패: 토스트 "공지사항을 불러올 수 없습니다. 잠시 후 다시 시도해주세요." + 재시도 버튼
  • 상세 로딩 실패: 토스트 "공지사항 상세 내용을 불러올 수 없습니다. 잠시 후 다시 시도해주세요."
  • 삭제된 공지 접근: "존재하지 않는 공지입니다" 안내 표시

7. 모션 스펙

  • 탭 전환: active indicator(2px underline) slide 200ms ease-out
  • 리스트→상세 전환: iOS push transition (right-to-left slide, 350ms)
  • 토스트: 하단에서 fadeIn 300ms, 2.5초 후 자동 dismiss fadeOut 300ms

8. 여백 · 간격 요약

요소값
콘텐츠 좌우 패딩24px
네비바 gap12px
탭 패딩12px 0 (상하)
리스트 항목 패딩14px 24px
리스트 제목↔날짜 간격4px (margin-bottom)
항목 간 구분선1px solid rgba(26,26,26,0.06)
상세 제목 영역 패딩20px 24px
상세 제목↔날짜 간격6px (margin-bottom)
상세 본문 패딩20px 24px
Paper-Catalog Heroheight 160px, margin 16px 24px

9. 적용 디자인 토큰

  • 전체 배경: --bg → #FAFAF8
  • 헤더 타이틀: --sans · 17px · 700 → Pretendard, --charcoal, ls: -0.02em
  • 활성 탭: --charcoal · 700 · 2px underline → 선택 상태: bold + border-bottom
  • 비활성 탭: --text-muted · 500 → 비선택 상태
  • 리스트 제목: --sans · 14px · 500 → Pretendard, --charcoal
  • 리스트 날짜: --mono · 11px → TASA Orbiter, --text-muted, ls: 0.02em
  • 리스트 화살표: chevron-right · square → --charcoal, 1.5px stroke
  • 상세 제목: --sans · 15px · 600 → Pretendard, --charcoal
  • 상세 본문: --sans · 14px · 400 · line-height 1.8 → Pretendard, --charcoal
  • 구분선: rgba(26,26,26,0.06) → 1px solid, 항목 간 분리
  • Paper-Catalog Hero: --paper + linen → CHRT 모노그램 각인, 레드 악센트 바
← 이전 화면: MYP-009 다음 화면: MYP-011 →