디자인 시스템, 스타일 가이드, 컴포넌트 라이브러리, 디자인 시스템의 차이, 구글과 애플의 디자인 시스템
1. 디자인 시스템
- 디자인 시스템은 재사용 가능한 컴포넌트(UI 요소)와 패턴을 정의하여, 전체 디자인에 일관성 있게 적용할 수 있도록 만든 가이드라인이나 규칙을 의미함
즉, 여러 곳에 공통적으로 사용할 디자인에 대해 어떻게 디자인해야 하고, 사용해야 하는지 가이드라인이나 규칙을 정해 놓는 것 - 디자인 시스템은 주로 디지털 디자인에서 사용됨
- 디자이너의 역할이 단순한 스타일을 창조하는 역할에서 비즈니스 문제를 해결하는 역할로 바뀌며 디자인 조직의 규모도 커지고, 디자인 시스템이 대두됨
- 디자인 시스템 장점
- 커뮤니케이션 효율화
- 콤팩트한 UI 구축 가능
- 일관성 있는 UX 제공
- 궁극적으로 새로운 디자인을 만드는 작업이 줄기 때문에 크리에이티브의 영역이 준다고 이해할 수 있으나, 동일한 디자인을 만드는 작업이 줄어드는 것이 때문에 디자이너들이 더 많은 생각을 하고 더 넓은 비즈니스의 문제를 바라볼 수 있는 환경을 제공함
- 디자인 시스템의 6가지 구성 요소
- 레이아웃
- 간격, 그리드 시스템
- 스타일
- 컬러, 아이코노그래피(아이콘 디자인, 도상학), 타이포그래피(폰트의 종류, 자간, 행간 등)
- 컴포넌트
- 버튼, 폼 등의 UI 요소
- 패턴
- 탬플릿
- 내비게이션, 검색 등의 패턴
- 콘텐츠
- 용어, 보이스톤(사용자에게 보이는 말투)
- 사용성
- 접근성, 글로벌 서비스 원칙
- 레이아웃
- 레이아웃
- 간격, 그리드 시스템
- padding 값 16px, 높이 값 32px 사용
- 스타일
- 컬러, 타이포그래피 등
- 컬러값 #E37E61 사용
- 폰트 SF Pro 사용
- 컴포넌트
- 레이아웃과 스타일을 통해서 컴포넌트 요소를 생성
- UI 요소인 버튼
2. 스타일 가이드, 컴포넌트 라이브러리, 디자인 시스템의 차이
- 스타일 가이드 < 컴포넌트 라이브러리 < 디자인 시스템
- 스타일 가이드
- 브랜드 요소가 UI에 적용되는 방법을 제공
- 컬러, 아이코노그래피, 타이포그래피 제공
- 컬러, 버튼, 폰트 등 디자인 스타일에 대한 가이드
- 컴포넌트 라이브러리
- 팀 내에서 사용되는 공통 스타일과 컴포넌트 제공
- 디자인 툴을 통해 자동 동기화
- 디자인 시스템
- 엘리먼트(element), 컴포넌트, 영역 등을 문서와 코드로 제공
- 디자인 원칙과 규칙 등을 추가적으로 제공
- 어떻게 디자인해야 하고, 언제, 어떻게 사용해야 하는지 등
3. 구글 디자인 시스템: Material Design
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
m3.material.io
4. 애플 디자인 시스템: Human Interface Guidelines
Human Interface Guidelines | Apple Developer Documentation
The HIG contains guidance and best practices that can help you design a great experience for any Apple platform.
developer.apple.com