# Accessibility-First Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: accessibility-first
- **카테고리**: ui-pattern
- **연도**: 2010s
## 설명
모든 사용자가 접근 가능한 포용적 디자인을 우선합니다.
## 핵심 원칙
- 포용성
- 접근성
- 평등
## 주요 특징
- 충분한 색상 대비
- 키보드 내비게이션
- 스크린 리더 지원
- ARIA 레이블
- 대체 텍스트
## 컬러 시스템 가이드
접근성이 최우선인 색상 시스템. 색상 선택보다 대비 비율이 우선
### 색상 역할
- primary: WCAG AAA (7:1) 이상 대비 확보한 색
- background: 텍스트와 최대 대비
- focus-ring: 포커스 표시 — 배경 대비 3:1 이상 필수
- error/warning/success: 색만이 아닌 아이콘+텍스트 병행
### 색상 제약 조건
- 색상 혼자 정보 전달 금지 — 반드시 텍스트/아이콘 병행
- WCAG AAA (7:1) 텍스트 대비 목표
- 색맹 사용자 고려 팔레트 선택
### 다크모드 전략
라이트/다크 모두 AAA 대비 충족
### 대비 요구사항
WCAG AAA (7:1) — 접근성이 핵심 가치
## 타이포그래피 가이드
- **폰트 성격**: 최고 가독성 폰트. 획 굵기 일정하고 자간 적절한 폰트
- **권장 폰트 수**: 최대 1개
- **타입 스케일**: 1.25 이상
### 타이포그래피 제약
- 최소 16px body — 작은 글자 금지
- line-height 1.5 이상
- 자간(letter-spacing) 너무 좁거나 넓지 않게 — 기본값 기준
## 하면 안 되는 것 (안티패턴)
- 색상만으로 상태/오류 전달 금지
- focus indicator 제거 금지
- contrast 4.5:1 미달 텍스트 사용 금지
- 자동 재생 동영상/애니메이션 금지
## 반드시 포함해야 하는 것
- focus visible — 키보드 포커스 항상 보임
- skip navigation 링크
- ARIA label 모든 인터랙티브 요소
- prefers-reduced-motion 지원
## 모션 가이드
prefers-reduced-motion: reduce 지원 필수. 기본적으로 모션 최소화. 필요 시 사용자 설정으로 활성화.
## 사용 사례
- 공공 서비스 웹사이트
- 의료 정보 플랫폼
- 교육 서비스
- 금융·행정 서비스
## 추천 프로젝트 유형
- 공공 서비스
- 의료·교육 플랫폼
- 금융·행정 서비스
- 글로벌 서비스
## 장점
- 장애인 포함 모든 사용자가 이용 가능
- SEO에도 긍정적 효과
- 법적 요구사항(ADA·WCAG) 충족
- 시니어 사용자 경험도 개선
## 단점·한계
- 초기 설계 및 검증 비용
- 모든 접근성 요구를 100% 충족하기 어려움
- 시각적으로 평범해질 수 있음
## 관련 스타일
- [carbon-design](https://ui.buildersgate.com/styles/carbon-design)
- [progressive-disclosure](https://ui.buildersgate.com/styles/progressive-disclosure)
- [micro-interactions](https://ui.buildersgate.com/styles/micro-interactions)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #1D4ED8
- secondary: #1E40AF
- accent: #F59E0B
- background: #FFFFFF
- surface: #F9FAFB
- text: #111827
- textSecondary: #374151
- border: #D1D5DB
### 헤더
- background: #1D4ED8
- textColor: #FFFFFF
- accentColor: #F59E0B
### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em
### 스페이싱
- unit: 8px
- scale: 1.2
### 그림자 (Shadows)
- sm: 0 1px 3px rgba(0,0,0,0.12)
- md: 0 4px 12px rgba(0,0,0,0.15)
- lg: 0 8px 24px rgba(0,0,0,0.18)
- xl: 0 16px 40px rgba(0,0,0,0.22)
### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 12px
- full: 9999px
### 테두리 (Borders)
- width: 2px
- style: solid
- color: #D1D5DB
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease
### 애니메이션
- duration: 200ms
- easing: ease
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=none
- 카드: style=outlined / hoverEffect=border
- 인풋: style=outlined / focusEffect=ring
- 배지: shape=rounded / style=solid
- 아이콘: package=lucide / strokeWidth=2 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: spacious
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Accessibility-First Design이란 무엇인가요?
A: 모든 사용자가 접근 가능한 포용적 디자인을 우선합니다.
### Q: Accessibility-First Design의 핵심 디자인 원칙은 무엇인가요?
A: Accessibility-First Design의 핵심 원칙은 포용성, 접근성, 평등입니다.
### Q: Accessibility-First Design은 어떤 프로젝트에 적합한가요?
A: Accessibility-First Design은 공공 서비스 웹사이트, 의료 정보 플랫폼, 교육 서비스, 금융·행정 서비스, 공공 서비스, 의료·교육 플랫폼, 금융·행정 서비스, 글로벌 서비스 등의 프로젝트에 적합합니다.
### Q: Accessibility-First Design의 장단점은 무엇인가요?
A: 장점으로는 장애인 포함 모든 사용자가 이용 가능, SEO에도 긍정적 효과, 법적 요구사항(ADA·WCAG) 충족, 시니어 사용자 경험도 개선이 있습니다. 단점으로는 초기 설계 및 검증 비용, 모든 접근성 요구를 100% 충족하기 어려움, 시각적으로 평범해질 수 있음이 있습니다.
### Q: Accessibility-First Design에서 색상은 어떻게 사용하나요?
A: 접근성이 최우선인 색상 시스템. 색상 선택보다 대비 비율이 우선 색상 역할은 primary: WCAG AAA (7:1) 이상 대비 확보한 색, background: 텍스트와 최대 대비, focus-ring: 포커스 표시 — 배경 대비 3:1 이상 필수입니다. 주의사항: 색상 혼자 정보 전달 금지 — 반드시 텍스트/아이콘 병행, WCAG AAA (7:1) 텍스트 대비 목표.
### Q: Accessibility-First Design에 어울리는 폰트 스타일은 무엇인가요?
A: Accessibility-First Design에는 최고 가독성 폰트. 획 굵기 일정하고 자간 적절한 폰트 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 최소 16px body — 작은 글자 금지, line-height 1.5 이상.
### Q: Accessibility-First Design 디자인에서 하면 안 되는 것은 무엇인가요?
A: Accessibility-First Design에서 피해야 할 것: 색상만으로 상태/오류 전달 금지, focus indicator 제거 금지, contrast 4.5:1 미달 텍스트 사용 금지, 자동 재생 동영상/애니메이션 금지.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=accessibility-first
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=accessibility-first&merged=true
"본문으로 바로가기" 링크에 Tab 키로 포커스하면 보입니다. 이를 통해 키보드 사용자가 반복적인 네비게이션을 건너뛸 수 있습니다.
Don't Rely on Color Alone
색상 외에도 다른 시각적 단서 제공
❌ 색상에만 의존
성공
실패
✓ 아이콘과 함께 사용
성공
실패
자주 묻는 질문
Accessibility-First Design이란 무엇인가요?
모든 사용자가 접근 가능한 포용적 디자인을 우선합니다.
Accessibility-First Design의 핵심 디자인 원칙은 무엇인가요?
Accessibility-First Design의 핵심 원칙은 포용성, 접근성, 평등입니다.
Accessibility-First Design은 어떤 프로젝트에 적합한가요?
Accessibility-First Design은 공공 서비스 웹사이트, 의료 정보 플랫폼, 교육 서비스, 금융·행정 서비스, 공공 서비스, 의료·교육 플랫폼, 금융·행정 서비스, 글로벌 서비스 등의 프로젝트에 적합합니다.
Accessibility-First Design의 장단점은 무엇인가요?
장점으로는 장애인 포함 모든 사용자가 이용 가능, SEO에도 긍정적 효과, 법적 요구사항(ADA·WCAG) 충족, 시니어 사용자 경험도 개선이 있습니다. 단점으로는 초기 설계 및 검증 비용, 모든 접근성 요구를 100% 충족하기 어려움, 시각적으로 평범해질 수 있음이 있습니다.
Accessibility-First Design에서 색상은 어떻게 사용하나요?
접근성이 최우선인 색상 시스템. 색상 선택보다 대비 비율이 우선 색상 역할은 primary: WCAG AAA (7:1) 이상 대비 확보한 색, background: 텍스트와 최대 대비, focus-ring: 포커스 표시 — 배경 대비 3:1 이상 필수입니다. 주의사항: 색상 혼자 정보 전달 금지 — 반드시 텍스트/아이콘 병행, WCAG AAA (7:1) 텍스트 대비 목표.
Accessibility-First Design에 어울리는 폰트 스타일은 무엇인가요?
Accessibility-First Design에는 최고 가독성 폰트. 획 굵기 일정하고 자간 적절한 폰트 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 최소 16px body — 작은 글자 금지, line-height 1.5 이상.
Accessibility-First Design 디자인에서 하면 안 되는 것은 무엇인가요?
Accessibility-First Design에서 피해야 할 것: 색상만으로 상태/오류 전달 금지, focus indicator 제거 금지, contrast 4.5:1 미달 텍스트 사용 금지, 자동 재생 동영상/애니메이션 금지.