Design System Intro #1
디자인 시스템의 필요성 = 일관된 고객 경험
- 고객이 웹/앱을 이용하는데 자연스럽게 인터렉션하는것은 중요하다.
- 필요한 정보를 잘 찾아가야 하며, 예측 가능한 UI를 구성해야 한다.
디자인 시스템 원칙
디자인 시스템은 사용자의 환경마다 다르게 원칙이 적용된다.
예) 구글의 드라이빙 : https://developers.google.com/cars/design/design-foundations/interaction-principles
✅ 운전자-스크린 상호작용 핵심 원칙
- 정보는 최신 상태 & 한눈에 이해 가능
- 작업·상태를 2초 내 파악 가능: 운전 중 화면을 보는 시간을 최소화.
- 빠른 시스템 응답: 입력 후 0.25초 이내 반응, 로딩 시 스피너 표시.
- 정확하고 즉시 제공되는 주행 정보: 안전·주행 관련 정보는 실시간 표시.
- 핸즈온 주행 장려
- 한 손으로 가능한 제스처: 두 손을 동시에 떼는 동작 금지.
- 핸즈프리 음성 인터페이스: 음성 명령은 시각·수동 부담 최소화.
- 음성 인터랙션 단순화: 멀티스텝 음성 명령은 최소화.
- 주행 관련 작업 우선
- 운전자가 상호작용 속도 제어 가능: 언제든 중단·재개 가능.
- 운전 관련 정보 우선 표시: 내비게이션 > 미디어 등.
- 비운전 콘텐츠 최소화: 광고·SNS·웹 등은 주의 깊게 제한.
- 운전 관련 오디오 우선: 내비 안내 시 미디어 볼륨 자동 낮춤, 음소거 가능.
- 주의 분산 방지
- 위험·불필요한 활동 금지: 게임, 웹서핑, 피트니스 등.
- 관련 없는 움직임 최소화: 영상, 자동 스크롤, 불필요한 애니메이션 지양.
의사결정 원칙
- 고객의 문제 해결에 초점
- 검증된 컨벤션과 업계의 사례
- 고객이 고민하게 만드는 UX 지양, 방해 요소 제거, 데이터 활용
- 확장성 고려한 디자인
디자인 시스템 이점 3가지
✅ 1. 일관성 (Consistency)
- 모든 화면과 컴포넌트에서 동일한 규칙과 스타일을 적용해 브랜드 경험을 통일합니다.
- 사용자 입장에서 예측 가능성이 높아져 사용성 향상에 기여합니다.
✅ 2. 생산성 (Productivity)
- 재사용 가능한 컴포넌트와 가이드라인을 통해 디자인·개발 속도를 크게 향상시킵니다.
- 반복 작업을 줄이고, 팀 간 협업을 효율적으로 만듭니다.
✅ 3. 품질 (Quality)
- 표준화된 접근으로 버그와 불일치 감소, 접근성 준수 등 높은 품질의 결과물을 보장합니다.
- 테스트와 유지보수가 쉬워져 안정성이 강화됩니다.
디자인 시스템 레이어
Google Material Design
- Material Design: Foundations → Components → Patterns 구조로 계층을 가진다.
- https://m3.material.io/foundations
Foundations : 디자인의 기본 원칙과 시각적 토대.
- 스타일 관련 : 색상(Color), 타이포그래피(Typography), 아이콘, Shape, Shadow(Elevation)
- 레이아웃(Grid, Spacing, 해상도), Adaptive Design
- 접근성
- 모션 원칙(Motion) - 제스처, 입력, 선택, 상태
Components : UI를 구성하는 재사용 가능한 인터랙티브 요소.
- Button, Card, Text Field 등
Patterns : Components를 조합해 만든 상호작용 흐름과 UX 시나리오
- Dialog, Flow, Rolling Banner, Modal, Toast 등