사용자 화면 · 마이페이지

자주 묻는 질문(FAQ)

MYP-013 · 2026. 01. 30

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

Design Output

UI 디자인 산출물

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

9:41
자주 묻는 질문(FAQ)
FAQ 제목입니다.
FAQ 내용이 적히는 란
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
FAQ 제목입니다.
개발 구현 가이드 — MYP-013 자주 묻는 질문(FAQ)

Update History

2026.03.19sb-wireframe-frame 패턴 전환 (MKT 품질 통일), DS v2 연동, 구조 정합성 수정
2026.03.16구현 가이드 최신화 (8섹션 재작성)
2026.03.11구현 가이드 추가 (7섹션)
2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

FAQ 화면은 아코디언 형태의 질문/답변 리스트 단일 화면이다. 상단 헤더(뒤로가기 + 타이틀) 아래 아코디언 항목이 세로로 연속 나열된다. 별도 CTA 버튼이나 고정 하단 바, 탭바 없이 전체가 스크롤 가능한 리스트로 구성된다. 전체 배경: --bg (#FAFAF8).

2. 레이어 구조 + 치수

# 영역 높이/위치 스타일 상세
1상태바44pxiOS 시스템 영역
2네비게이션 바48px뒤로가기(chevron-left 20px, --charcoal #1A1A1A, stroke 1.5, round/round) + 타이틀 "자주 묻는 질문(FAQ)" (--sans Pretendard 17px/700, --charcoal, ls:-0.02em), gap 8px
3아코디언 리스트flex: 1 (스크롤)FAQ 항목 반복, 개수 가변, 항목 간 구분선 rgba(26,26,26,0.06) 1px

3. 핵심 인터랙션 — 아코디언 컴포넌트

  • 접힌 상태 (기본): 질문 제목 --sans Pretendard 15px/500, --charcoal (#1A1A1A), ls:-0.01em + 우측 chevron-down SVG 14x14px, stroke --text-muted (#888888) 1.5px round/round. 행 padding: 16px 24px, 전체 행 터치 가능
  • 펼쳐진 상태: 질문 제목 font-weight 600으로 변경 + chevron-up SVG, stroke --charcoal (#1A1A1A). 답변 영역: padding 0 24px 16px, 내부 div background --neutral-95, padding 16px, min-height 80px. 답변 텍스트: --sans 13px/400, --text-secondary (#555555), line-height 1.7, ls:-0.005em
  • 구분선: 각 항목 하단 border-bottom 1px solid rgba(26,26,26,0.06)
  • 동시 펼침 허용: 여러 항목을 동시에 펼칠 수 있음 (accordion 단일 오픈 강제 안 함)

4. 상태 변화

  • 접힌 → 펼쳐짐: 질문 클릭 시 답변 영역 나타남, 제목 weight 500→600, chevron-down→chevron-up, 아이콘 색 --text-muted→--charcoal
  • 펼쳐짐 → 접힘: 동일 질문 재클릭 시 답변 영역 숨김, 제목 weight 600→500, chevron-up→chevron-down, 아이콘 색 --charcoal→--text-muted
  • 초기 상태: 화면 진입 시 모든 항목 접힌 상태
  • 콘텐츠 특성: 관리자 등록/관리 정적 콘텐츠, 사용자 편집 불가. 텍스트 중심 (이미지/링크 기본 미포함)

5. 네비게이션 플로우

  • 뒤로가기 클릭 → MYP-001(마이페이지 메인)으로 이동
  • 진입/이탈 시 아코디언 상태 초기화 (모두 접힌 상태로 리셋)
  • 로그인/비로그인 사용자 모두 접근 가능

6. 에러/예외 처리

  • FAQ 데이터 로드 실패 → 에러 메시지 + 재시도 버튼 표시
  • FAQ 항목 0건 → 빈 상태 안내 문구 표시
  • 답변 내용 매우 긴 경우 → 스크롤 내에서 자연 확장 (max-height 제한 없음)

7. 모션 스펙

  • 아코디언 펼침/접힘: height 0→auto, transition 200ms ease-out
  • chevron 아이콘: rotate(0deg)→rotate(180deg), transition 200ms ease-out
  • 답변 영역 등장: opacity 0→1 함께 적용 시 150ms ease-out

8. 여백 · 간격 요약

  • 전체 좌우 패딩: 24px
  • 아코디언 행 패딩: 16px 24px (상하 좌우)
  • 답변 영역 외부: padding 0 24px 16px
  • 답변 영역 내부: padding 16px, min-height 80px
  • 헤더 내부 gap: 8px (아이콘-타이틀 간)
  • chevron 아이콘 크기: 14x14px, viewBox 0 0 24 24
  • 뒤로가기 아이콘 크기: 20x20px, viewBox 0 0 24 24

9. 적용 디자인 토큰

  • [색상]
  • --charcoal: #1A1A1A
  • --text-muted: #888888
  • --text-secondary: #555555
  • [타이포그래피]
  • --sans: Pretendard Variable
  • [기타]
  • --neutral-95: (see tokens.css)
← 이전 화면: MYP-012 다음 화면: MYP-014 →