디자인 시스템이 기업마다 다른 이유
디자인 시스템 시리즈
Apple · Google디자인 시스템이 기업마다 다른 이유
애플, 구글, 마이크로소프트, 어도비를 포함한 다양한 글로벌 디자인 시스템을 살펴보면, 그 구성 요소는 대체로 유사하면서도 각기 다른 점들이 발견됩니다. 기업마다 디자인 시스템의 구성 요소가 어떻게 차별화되어 있는지, 그리고 그 배경에 대해 알아보겠습니다.
디자인 시스템의 구성 요소
일반적으로 디자인 시스템에는 Foundation과 Component가 포함되어 있습니다. Foundation이 디자인의 뼈대라면, Components는 그 뼈대를 채우는 벽돌이라고도 할 수 있습니다. Foundation이 스타일과 규칙을 제공하면 Components는 이를 활용해 구체적인 UI를 구성합니다.
Apple · Human Interface GuidelineFoundation
Foundation는 컬러, 타이포그래피, 그리드, 간격과 같은 디자인의 핵심 요소들을 포함합니다. 이러한 요소들은 디자인 시스템의 기본 규칙을 정의하여 일관성과 직관성을 제공하는 기반 역할을 합니다.
Apple · Human Interface GuidelineComponent
Component는 버튼, 입력 필드, 카드, 모달과 같은 재사용 가능한 UI 요소들을 포함합니다. 이러한 요소들은 디자인 시스템에서 일관성 있는 사용자 인터페이스를 구축하고, 효율적인 디자인과 개발을 지원합니다.
기업마다 다른 디자인 시스템의 구성
반면 Foundation과 Component를 제외한 구성요소는 기업마다 차이가 있습니다. 애플의 Human Interface Guideline과 구글의 Material Design 3를 비교하며 살펴보겠습니다.
Human Interface Guideline (Apple)
Foundation과 Component 외에 Patterns, Inputs, Technologes가 있습니다. 각 구성 요소의 특징과 존재 이유는 다음과 같습니다.
Patterns
Pattern은 Component의 조합과도 같습니다. iOS, macOS 등 다양한 OS에서도 유연함과 일관성을 제공하기 위해, 더 큰 단위인 Pattern을 정의하여 다양한 상황에 맞는 조합 방식을 명시한 거죠. 이는 Apple의 기기 간 일관된 UX를 유지하는 데 중요한 역할을 합니다.
Inputs
Apple은 iPhone, iPad, Apple Watch, Mac 등 다양한 기기에서 Apple만의 Input들을 사용하고 있고, 기기별 특화된 제스처, 음성, 터치 등의 입력 방식을 정의합니다. 특히 최근 추가된 Camera Control, Action Button과 같은 Input이 눈에 띕니다.
Technologies
Apple은 ARKit, HealthKit, Siri 등 고유의 기술 스택을 보유하고 있으며, 이는 앱과 Apple 생태계 간 깊이 있는 통합 경험을 제공합니다. 따라서 이러한 기술을 효과적으로 활용하는 방법을 디자인 시스템에 포함해 개발자와 디자이너가 Apple 생태계에 맞는 앱을 디자인하고 개발할 수 있도록 지원합니다.
Material Design 3 (Google)
Foundation과 Component 외에 Styles와 Develop이 있습니다. 각 구성 요소의 특징과 존재 이유는 다음과 같습니다.
Styles
Material Design은 다양한 화면 크기와 기기, 플랫폼을 고려해 일관된 시각적 아이덴티티를 추구합니다. Google은 색상, 그림자 같은 시각적 스타일을 Foundation이 아닌, Style로 별도 분리하여 기기 및 앱 환경에 맞는 자유로운 변형을 가능하게 했어요. 이런 접근은 Android, 웹, Wear OS 등 다양한 플랫폼에 적용할 때 필요한 시각적 유연성을 보장해 줍니다.
Develop
Google은 디자인과 개발의 긴밀한 통합을 중시하기 때문에, 이를 통해 더 넓은 플랫폼에 걸쳐 일관된 경험을 보장하고자 합니다. Apple과 달리 Google은 디자인 요소의 코드 구현을 명확히 지원하여, 디자이너와 개발자가 협업할 때 생길 수 있는 해석 차이를 줄이고, 다양한 Android 기기에서의 디자인 일관성을 높이는 데 초점을 맞춥니다.
애플과 구글 디자인 시스템의 차이점
Human Interface Guidelines
구성 요소
Foundations, Patterns, Components, Inputs, Technologies로 구성되어, 특히 기기별 상호작용 방식(Inputs)과 Apple 고유의 기술(Technologies)을 포함하여 Apple 생태계 특화된 UX를 제공합니다.
차별점
Apple 생태계의 고유한 기기 특성과 기술적 통합을 바탕으로, 사용자에게 직관적이고 통합된 경험을 제공하는 데 중점을 둡니다. Apple은 Inputs, Technologies와 같은 요소를 포함해 기기별 상호작용과 독자적인 기능을 세밀하게 규정하여, 다양한 기기에서 일관되면서도 독창적인 UX를 구현합니다.
Material Design 3
구성 요소
Foundations, Styles, Components, Develop로 구성되어 있으며, 특히 Styles는 색상, 그림자, 모션 등 시각적 요소를 독립적으로 정의하여 다양한 플랫폼에서 유연하게 디자인을 구현하도록 돕습니다. Develop는 코드 샘플과 최적화 지침을 통해 디자인 구현 시의 일관성을 높이고 협업을 강화합니다.
차별점
시각적 유연성과 디자인 구현의 일관성을 중요시하며, Styles와 Develop을 통해 다양한 플랫폼과 디바이스에서의 호환성을 강화합니다. 디자인과 개발의 긴밀한 협업을 지원하고 코드 구현의 명확한 지침을 제공하여, Android 생태계 전반에서 일관된 시각적 스타일과 효율적인 구현을 가능하게 합니다.
마치며
Vision Pro (Apple) · Pixel 9 pro (Google)디자인 시스템은 단순한 가이드라인이 아니라, 기업의 철학과 기술적 요구사항, 그리고 사용자 경험에 대한 비전을 반영하는 중요한 요소입니다. Apple과 Google의 사례에서 볼 수 있듯이, 각 기업은 자사의 제품과 사용자 기반에 맞춘 고유한 디자인 시스템을 구축하여 사용자에게 최상의 경험을 제공하고자 합니다.
이러한 차별화된 접근 방식은 다양한 플랫폼과 기기에서 일관된 사용자 경험을 창출하는 데 필수적이며, 기업들은 변화하는 기술 환경과 사용자 요구에 발맞추어 디자인 시스템을 지속적으로 발전시켜 나가는 것이 중요할 것입니다.
해외 디자인 시스템 70여 개를 한 번에 총정리해서 보고 싶다면 아래 글을 참고해 주세요!
