# Progressive Disclosure

> 복잡한 정보를 단계적으로 노출하여 인지 부하를 줄입니다.

- 층: 아카이브 (UI 패턴)
- ID: progressive-disclosure
- 연도: 1990s
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/progressive-disclosure

## 정의

복잡한 정보를 단계적으로 노출하여 인지 부하를 줄입니다.

## 주요 특징

- 단계적 정보 공개
- 아코디언 메뉴
- 툴팁과 도움말
- 확장 가능한 섹션
- 필요 시 표시

## 핵심 원칙

- 인지 부하 감소
- 사용자 제어
- 명확성

## 컬러 시스템

정보 단계별 강조. 현재 단계 강조, 미래 단계 비활성화로 시선 유도

### 색상 역할

- active: 현재 활성 단계 — 강조색
- completed: 완료 단계 — 차분한 성공색
- inactive: 미래 단계 — 회색·비활성
- destructive: 취소·삭제 — 빨강

### 색상 제약

- active와 inactive 대비 명확히 — 사용자가 현재 위치 즉시 파악
- inactive 요소는 색 대비 낮춰 배경으로 밀어냄

### 다크모드 전략

동일 역할 구조, 다크 팔레트로 교체

### 대비 요구사항

active 요소는 WCAG AA 이상 필수

## 타이포그래피

- 폰트 성격: 명확하고 위계 있는 산세리프. 단계 레이블 가독성 최우선
- 권장 폰트 수: 최대 1개
- 타입 스케일: 1.2 (Minor Third)

### 타이포그래피 제약

- 각 단계 레이블 폰트 일관성 유지
- 활성/비활성 상태를 color+weight로 동시 표현

## 설계 제약

### 하면 안 되는 것

- 모든 정보 한 번에 노출 금지 — 단계적 공개
- 다음 단계 완전히 숨기기 금지 — 존재는 보이되 비활성화

### 반드시 포함할 것

- 현재 단계 명확한 시각적 강조
- 진행 상태 표시 (step indicator)
- 이전 단계 되돌아가기 가능

### 모션 가이드

다음 단계 전환 시 slide 또는 fade. 200~300ms ease-in-out.

## 사용 사례

- 복잡한 설정 페이지
- FAQ 섹션
- 긴 양식 (회원가입, 설문 등)
- 복잡한 내비게이션 메뉴

## 추천 프로젝트 유형

- 복잡한 설정 UI
- 긴 양식
- FAQ
- 제품 상세 페이지

## 장단점

### 장점

- 인지 과부하 방지
- 초보 사용자와 전문가 모두 만족
- 페이지를 깔끔하게 유지

### 단점·한계

- 중요한 정보가 숨겨져 발견 어려울 수 있음
- 클릭 수 증가로 이탈률 상승 가능
- 모바일에서 아코디언 조작 불편할 수 있음

## 자주 묻는 질문

### Q1. Progressive Disclosure이란 무엇인가요?

복잡한 정보를 단계적으로 노출하여 인지 부하를 줄입니다.

### Q2. Progressive Disclosure의 핵심 디자인 원칙은 무엇인가요?

Progressive Disclosure의 핵심 원칙은 인지 부하 감소, 사용자 제어, 명확성입니다.

### Q3. Progressive Disclosure은 어떤 프로젝트에 적합한가요?

Progressive Disclosure은 복잡한 설정 페이지, FAQ 섹션, 긴 양식 (회원가입, 설문 등), 복잡한 내비게이션 메뉴, 복잡한 설정 UI, 긴 양식, FAQ, 제품 상세 페이지 등의 프로젝트에 적합합니다.

### Q4. Progressive Disclosure의 장단점은 무엇인가요?

장점으로는 인지 과부하 방지, 초보 사용자와 전문가 모두 만족, 페이지를 깔끔하게 유지이 있습니다. 단점으로는 중요한 정보가 숨겨져 발견 어려울 수 있음, 클릭 수 증가로 이탈률 상승 가능, 모바일에서 아코디언 조작 불편할 수 있음이 있습니다.

### Q5. Progressive Disclosure에서 색상은 어떻게 사용하나요?

정보 단계별 강조. 현재 단계 강조, 미래 단계 비활성화로 시선 유도 색상 역할은 active: 현재 활성 단계 — 강조색, completed: 완료 단계 — 차분한 성공색, inactive: 미래 단계 — 회색·비활성입니다. 주의사항: active와 inactive 대비 명확히 — 사용자가 현재 위치 즉시 파악, inactive 요소는 색 대비 낮춰 배경으로 밀어냄.

### Q6. Progressive Disclosure에 어울리는 폰트 스타일은 무엇인가요?

Progressive Disclosure에는 명확하고 위계 있는 산세리프. 단계 레이블 가독성 최우선 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 각 단계 레이블 폰트 일관성 유지, 활성/비활성 상태를 color+weight로 동시 표현.

### Q7. Progressive Disclosure 디자인에서 하면 안 되는 것은 무엇인가요?

Progressive Disclosure에서 피해야 할 것: 모든 정보 한 번에 노출 금지 — 단계적 공개, 다음 단계 완전히 숨기기 금지 — 존재는 보이되 비활성화.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #FF9800
- secondary: #F57C00
- accent: #FFCC02
- background: #FFFDE7
- surface: #FFFFFF
- text: #1A1A1A
- textSecondary: #616161
- border: #FFE082

### 타이포그래피

- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 4px / md 8px / lg 12px / full 9999px
- shadow sm: 0 1px 4px rgba(255,152,0,0.12)
- shadow md: 0 4px 12px rgba(255,152,0,0.15)
- shadow lg: 0 8px 24px rgba(255,152,0,0.18)
- border: 1px solid #FFE082

### 컴포넌트 형태

- button: rounded / hover lift / text none
- card: outlined / hover border
- input: outlined / focus border
- badge: rounded / subtle
- icon: lucide / stroke 2 / size 20px
- layout: boxed / section normal
- animation: 300ms ease-in-out

## 관련 링크

### 관련 스타일

- [Card-Based Design](https://ui.buildersgate.com/styles/card-design)
- [Atomic Design](https://ui.buildersgate.com/styles/atomic-design)
- [Accessibility-First Design](https://ui.buildersgate.com/styles/accessibility-first)

---

HTML 버전: https://ui.buildersgate.com/styles/progressive-disclosure

이 문서는 https://ui.buildersgate.com/styles/progressive-disclosure.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.