사용자 화면 · 마이페이지

자주 묻는 질문(FAQ)

MYP-013 · 2026. 03. 04

화면 이름 자주 묻는 질문(FAQ)
화면 위치 마이페이지 > 자주 묻는 질문(FAQ)
화면 ID MYP-013
작성일 2026. 03. 04
9:41
자주 묻는 질문(FAQ)
FAQ 제목입니다.
FAQ 내용이 적히는 란
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
1
2
Description
0 화면 접근 조건
  • 자주 묻는 질문(FAQ)은 로그인/비로그인 사용자 모두 접근 가능
1 자주묻는 질문 헤더
  • 구성
    • 뒤로가기 버튼
    • 타이틀: 자주 묻는 질문(FAQ)
  • 동작
    • 뒤로가기 버튼 클릭 시
      • 마이페이지 메인 화면(MYP-001)으로 이동
2 자주 묻는 질문 리스트 및 내용
  • 구성
    • FAQ 질목 리스트(아코디언 형태)
    • 질문 제목 영역
    • 펼침/접힘 아이콘
    • 답변 내용 영역(이하는 숨김)
  • 기본 상태
    • 모든 FAQ 항목은 접힌 상태로 노출
    • 질문 제목만 리스트 형태로 표시
  • 동작
    • 질문 제목 클릭 시
      • 해당 FAQ 항목이 펼쳐짐
      • 답변 내용 영역 노출
      • 펼침/접힘 아이콘 상태 변경
    • 이미 펼쳐진 항목 클릭 시
      • 다시 접힘
  • 동작 규칙
    • 동시에 여러 FAQ 항목 펼침 가능
    • 단일 오픈 강제하지 않음
  • 답변 내용 영역 설정
    • 텍스트 중심이나 콘텐츠
    • 이미지, 링크 등은 포함하지 않는 것을 기본으로 함
3 공통 규칙
  • FAQ 콘텐츠는 관리자에 의해 등록/관리되는 정적 콘텐츠
  • 사용자는 FAQ를 수정하거나 편집할 수 없음
  • FAQ 진입/이탈 시
    • 별도 탈퇴 화면 없이 리스트 메뉴로 상태 유지
  • 본 화면은 마이페이지 공통 규칙(MYP-001)을 따른다

Design Output

UI 디자인 산출물

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

9:41
자주 묻는 질문(FAQ)
FAQ 제목입니다.
FAQ 내용이 적히는 란
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
Applied Design Tokens
요소Token값
전체 배경 --bg #FAFAF8
헤더 타이틀 --sans · 17px · 700 Pretendard, --charcoal, letter-spacing: -0.02em
뒤로가기 아이콘 chevron-left · square/miter --charcoal, 20px, stroke 1.5px
FAQ 제목 (접힌) --sans · 15px · 500 Pretendard, --charcoal
FAQ 제목 (펼쳐진) --sans · 15px · 600 Pretendard, --charcoal
아코디언 아이콘 chevron-down/up · square/miter 접힌: --text-muted / 펼쳐진: --charcoal
답변 영역 배경 --neutral-95 답변 콘텐츠 영역
답변 텍스트 --sans · 13px · 400 Pretendard, --text-secondary, line-height: 1.7
구분선 rgba(26,26,26,0.06) 아코디언 항목 간 경계
좌우 패딩 24px 전체 콘텐츠 마진
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • 자주 묻는 질문(FAQ)은 로그인/비로그인 사용자 모두 접근 가능
1 자주묻는 질문 헤더
  • 구성
    • 뒤로가기 버튼
    • 타이틀: 자주 묻는 질문(FAQ)
  • 동작
    • 뒤로가기 버튼 클릭 시
      • 마이페이지 메인 화면(MYP-001)으로 이동
2 자주 묻는 질문 리스트 및 내용
  • 구성
    • FAQ 질목 리스트(아코디언 형태)
    • 질문 제목 영역
    • 펼침/접힘 아이콘
    • 답변 내용 영역(이하는 숨김)
  • 기본 상태
    • 모든 FAQ 항목은 접힌 상태로 노출
    • 질문 제목만 리스트 형태로 표시
  • 동작
    • 질문 제목 클릭 시
      • 해당 FAQ 항목이 펼쳐짐
      • 답변 내용 영역 노출
      • 펼침/접힘 아이콘 상태 변경
    • 이미 펼쳐진 항목 클릭 시
      • 다시 접힘
  • 동작 규칙
    • 동시에 여러 FAQ 항목 펼침 가능
    • 단일 오픈 강제하지 않음
  • 답변 내용 영역 설정
    • 텍스트 중심이나 콘텐츠
    • 이미지, 링크 등은 포함하지 않는 것을 기본으로 함
3 공통 규칙
  • FAQ 콘텐츠는 관리자에 의해 등록/관리되는 정적 콘텐츠
  • 사용자는 FAQ를 수정하거나 편집할 수 없음
  • FAQ 진입/이탈 시
    • 별도 탈퇴 화면 없이 리스트 메뉴로 상태 유지
  • 본 화면은 마이페이지 공통 규칙(MYP-001)을 따른다
← 이전 화면: MYP-012 다음 화면: MYP-014 →