# Progressive Disclosure — 디자인 스타일 가이드
## 기본 정보
- **ID**: progressive-disclosure
- **카테고리**: ui-pattern
- **연도**: 1990s
## 설명
복잡한 정보를 단계적으로 노출하여 인지 부하를 줄입니다.
## 핵심 원칙
- 인지 부하 감소
- 사용자 제어
- 명확성
## 주요 특징
- 단계적 정보 공개
- 아코디언 메뉴
- 툴팁과 도움말
- 확장 가능한 섹션
- 필요 시 표시
## 컬러 시스템 가이드
정보 단계별 강조. 현재 단계 강조, 미래 단계 비활성화로 시선 유도
### 색상 역할
- 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
- 제품 상세 페이지
## 장점
- 인지 과부하 방지
- 초보 사용자와 전문가 모두 만족
- 페이지를 깔끔하게 유지
## 단점·한계
- 중요한 정보가 숨겨져 발견 어려울 수 있음
- 클릭 수 증가로 이탈률 상승 가능
- 모바일에서 아코디언 조작 불편할 수 있음
## 관련 스타일
- [card-design](https://ui.buildersgate.com/styles/card-design)
- [atomic-design](https://ui.buildersgate.com/styles/atomic-design)
- [accessibility-first](https://ui.buildersgate.com/styles/accessibility-first)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #FF9800
- secondary: #F57C00
- accent: #FFCC02
- background: #FFFDE7
- surface: #FFFFFF
- text: #1A1A1A
- textSecondary: #616161
- border: #FFE082
### 헤더
- background: linear-gradient(135deg, #FF9800 0%, #E65100 100%)
- textColor: #FFFFFF
- accentColor: #FFCC02
### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 1px 4px rgba(255,152,0,0.12)
- md: 0 4px 12px rgba(255,152,0,0.15)
- lg: 0 8px 24px rgba(255,152,0,0.18)
- xl: 0 16px 40px rgba(255,152,0,0.22)
### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 12px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #FFE082
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.3s ease
### 애니메이션
- duration: 300ms
- easing: ease-in-out
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=none
- 카드: style=outlined / hoverEffect=border
- 인풋: style=outlined / focusEffect=border
- 배지: shape=rounded / style=subtle
- 아이콘: package=lucide / strokeWidth=2 / defaultSize=20
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Progressive Disclosure이란 무엇인가요?
A: 복잡한 정보를 단계적으로 노출하여 인지 부하를 줄입니다.
### Q: Progressive Disclosure의 핵심 디자인 원칙은 무엇인가요?
A: Progressive Disclosure의 핵심 원칙은 인지 부하 감소, 사용자 제어, 명확성입니다.
### Q: Progressive Disclosure은 어떤 프로젝트에 적합한가요?
A: Progressive Disclosure은 복잡한 설정 페이지, FAQ 섹션, 긴 양식 (회원가입, 설문 등), 복잡한 내비게이션 메뉴, 복잡한 설정 UI, 긴 양식, FAQ, 제품 상세 페이지 등의 프로젝트에 적합합니다.
### Q: Progressive Disclosure의 장단점은 무엇인가요?
A: 장점으로는 인지 과부하 방지, 초보 사용자와 전문가 모두 만족, 페이지를 깔끔하게 유지이 있습니다. 단점으로는 중요한 정보가 숨겨져 발견 어려울 수 있음, 클릭 수 증가로 이탈률 상승 가능, 모바일에서 아코디언 조작 불편할 수 있음이 있습니다.
### Q: Progressive Disclosure에서 색상은 어떻게 사용하나요?
A: 정보 단계별 강조. 현재 단계 강조, 미래 단계 비활성화로 시선 유도 색상 역할은 active: 현재 활성 단계 — 강조색, completed: 완료 단계 — 차분한 성공색, inactive: 미래 단계 — 회색·비활성입니다. 주의사항: active와 inactive 대비 명확히 — 사용자가 현재 위치 즉시 파악, inactive 요소는 색 대비 낮춰 배경으로 밀어냄.
### Q: Progressive Disclosure에 어울리는 폰트 스타일은 무엇인가요?
A: Progressive Disclosure에는 명확하고 위계 있는 산세리프. 단계 레이블 가독성 최우선 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 각 단계 레이블 폰트 일관성 유지, 활성/비활성 상태를 color+weight로 동시 표현.
### Q: Progressive Disclosure 디자인에서 하면 안 되는 것은 무엇인가요?
A: Progressive Disclosure에서 피해야 할 것: 모든 정보 한 번에 노출 금지 — 단계적 공개, 다음 단계 완전히 숨기기 금지 — 존재는 보이되 비활성화.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=progressive-disclosure
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=progressive-disclosure&merged=true
Progressive Disclosure의 핵심 원칙은 인지 부하 감소, 사용자 제어, 명확성입니다.
Progressive Disclosure은 어떤 프로젝트에 적합한가요?
Progressive Disclosure은 복잡한 설정 페이지, FAQ 섹션, 긴 양식 (회원가입, 설문 등), 복잡한 내비게이션 메뉴, 복잡한 설정 UI, 긴 양식, FAQ, 제품 상세 페이지 등의 프로젝트에 적합합니다.
Progressive Disclosure의 장단점은 무엇인가요?
장점으로는 인지 과부하 방지, 초보 사용자와 전문가 모두 만족, 페이지를 깔끔하게 유지이 있습니다. 단점으로는 중요한 정보가 숨겨져 발견 어려울 수 있음, 클릭 수 증가로 이탈률 상승 가능, 모바일에서 아코디언 조작 불편할 수 있음이 있습니다.
Progressive Disclosure에서 색상은 어떻게 사용하나요?
정보 단계별 강조. 현재 단계 강조, 미래 단계 비활성화로 시선 유도 색상 역할은 active: 현재 활성 단계 — 강조색, completed: 완료 단계 — 차분한 성공색, inactive: 미래 단계 — 회색·비활성입니다. 주의사항: active와 inactive 대비 명확히 — 사용자가 현재 위치 즉시 파악, inactive 요소는 색 대비 낮춰 배경으로 밀어냄.
Progressive Disclosure에 어울리는 폰트 스타일은 무엇인가요?
Progressive Disclosure에는 명확하고 위계 있는 산세리프. 단계 레이블 가독성 최우선 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 각 단계 레이블 폰트 일관성 유지, 활성/비활성 상태를 color+weight로 동시 표현.
Progressive Disclosure 디자인에서 하면 안 되는 것은 무엇인가요?
Progressive Disclosure에서 피해야 할 것: 모든 정보 한 번에 노출 금지 — 단계적 공개, 다음 단계 완전히 숨기기 금지 — 존재는 보이되 비활성화.