사용자 화면 · 마이페이지

공지사항 상세

MYP-010 · 2026. 03. 04

화면 이름 공지사항
화면 위치 마이페이지 > 공지사항
화면 ID MYP-010
작성일 2026. 03. 04
9:41
공지사항
전체
이벤트
시스템
기타

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

20XX. XX. XX

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

20XX. XX. XX

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

20XX. XX. XX

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

20XX. XX. XX

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

20XX. XX. XX

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

20XX. XX. XX

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

20XX. XX. XX

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

20XX. XX. XX

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

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

20XX. XX. XX

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

2-1
2-2
2-3
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 문의를 통해 연락하시기 바랍니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다. 공지사항 본문 내용입니다.

Applied Design Tokens
요소Token값
전체 배경 --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 모노그램 각인, 레드 악센트 바
Design Description

Update History

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