# Progressive Disclosure — 디자인 스타일 가이드

## 기본 정보
- **ID**: progressive-disclosure
- **카테고리**: ui-pattern
- **연도**: 1990s

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

## 핵심 원칙
- 인지 부하 감소
- 사용자 제어
- 명확성

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

## 사용 사례
- 복잡한 설정 페이지
- 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

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=progressive-disclosure
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=progressive-disclosure&merged=true
← 홈으로 돌아가기

Progressive Disclosure

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

연도

1990s

#FF9800

핵심 원칙

1

인지 부하 감소

2

사용자 제어

3

명확성

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Accordion Menu

필요한 정보만 단계적으로 표시

Show More Pattern

더보기 버튼으로 점진적 정보 공개

제품 설명

이것은 제품의 기본 설명입니다. 처음에는 중요한 정보만 표시합니다.

Multi-Step Wizard

복잡한 프로세스를 단계별로 나누기

1
2
3

Step 1: 기본 정보

첫 번째 단계에서는 기본 정보만 입력합니다.

Tooltips & Help Text

필요할 때만 표시되는 도움말

Expandable Cards

카드 확장으로 상세 정보 표시

Card 1

기본 정보만 표시됩니다.

Card 2

기본 정보만 표시됩니다.

관련 스타일 탐색

Card-Based Design

정보를 카드 형태로 구조화하여 스캔과 소비가 용이하도록 합니다.

Atomic Design

화학의 원자 개념을 차용하여 UI를 5단계로 구조화하는 방법론입니다.

Accessibility-First Design

모든 사용자가 접근 가능한 포용적 디자인을 우선합니다.