디자인 시스템 레퍼런스
효율적인 디자인 시스템 구축을 위한 레퍼런스
팀 내에서 사용될 디자인 시스템을 구축하는 일은 굉장히 복잡하고 많은 리소스가 필요합니다. 특히 관련 경험이나 정보가 부족하다면 더욱 어렵게 느껴집니다. 때문에 많은 팀에서 디자인 시스템 구축을 주저하고, 리소스 투입 대비 효과에 대해 고민하곤 합니다.
하지만 이미 공개된 디자인 시스템을 참고한다면 우려에 비해 디자인 시스템 구축을 쉽게 시작할 수 있습니다. 애플, 구글등 다양한 서비스들이 자신들의 디자인 시스템을 공개하고 있기 때문입니다. 이를 활용해 팀에 알맞게 적용한다면, 이미 검증된 시스템을 기반으로 팀의 디자인 시스템을 발전시킬 수 있습니다.
해당 글에서는 각 디자인 시스템의 주요 특징과 디자인 시스템 구축시의 참고 방법에 대해 다룹니다. 또한 공식 웹사이트와 Figma Community 프로필을 함께 표기하여 실무에서 바로 활용할 수 있도록 하였습니다.
아래 소개한 디자인 시스템들은 각기 다른 환경과 목적에 맞게 설계된 만큼, '우리 팀'에 가장 적합한 시스템을 참고하시길 바랍니다.
HIG(Human Interface Guideline) - Apple
Apple 생태계의 모든 제품에서 일관성 있는 디자인을 제공하기 위한 가이드라인입니다.
오랜 기간동안 사용자 경험을 기반으로 발전해왔기 때문에 해당 가이드라인 참고시 명확하게 검증된 패턴들에 대한 인사이트를 얻을 수 있습니다.
Google의 Material Design과 함께 가장 신뢰도 높은 디자인 가이드라인이라고 할 수 있습니다.
공식 문서의 경우 최근 한국어를 지원하며 더욱 편리하게 문서를 확인할 수 있게 되었습니다. 다만 문서의 양이 굉장히 방대하고 디자인 시스템 구성과 직접적으로 연관되지 않은 정보들도 많기 때문에, 필요한 부분을 집중적으로 확인하는 것이 효율적입니다.
Figma에서 공식적으로 지원하는 UI kits에 포함되어 있어 작업시 편리하게 사용이 가능합니다.
Material Design - Google
- Materal Design Figma Community
Material Design은 다양한 디바이스와 플랫폼에서 일관된 경험을 제공하기 위해 만들어진 디자인 시스템입니다. M3 버전으로 넘어오며 기존에 Material Design에서 강조되었던 종이와 잉크에 대한 메타포(그림자, 높이 등)가 줄어들고, 부드러운 디자인으로 초점이 이동했습니다.
HIG의 문서에 비해 컴포넌트의 정의와 패턴이 간결하게 정리되어있어, 상대적으로 참조하기에 편리합니다.
HIG와 마찬가지로 Figma에서 공식적으로 지원하는 UI kits에 포함되어 있어 작업시 편리하게 사용이 가능합니다.
Carbon Design System - IBM
- Carbon Design System Website
IBM의 Carbon Design System은 기업용 서비스 구축에 최적화된 디자인 시스텝 입니다.
모든 시각적 요소(타이포그래피, 아이콘, 일러스트레이션 등)를 2x Grid 개념에 따라 배치하는 것이 큰 특징입니다. 이는 2의 배수를 기본 단위로 설정하여, 일관성 있는 시각적 규칙을 유지할 수 있도록 돕습니다. 해당 개념을 기반으로 디자인 시스템을 구축한다면, 일관성 있는 규칙을 만드는데 큰 도움이 될 수 있습니다.
또한 기업용 서비스 구축에 최적화된 시스템이기 때문에 복잡한 데이터 중심의 서비스를 구축하는데 참고하기 적합합니다.
Polaris Design System - Shopify
- Polaris Design System Website
Polaris Design System는 전자상거래 플랫폼인 Shopify의 구축 및 유지에 사용되는 디자인 시스템입니다.
일반적인 B2C 서비스의 디자인 시스템에 비해 상대적으로 복잡한 데이터와 기능을 다루는 만큼 효율성과 정보 시각화에 강점이 있습니다. 데이터 시각화, 대시보드 등을 많이 사용하는 Saas 디자인 시스템을 구축할 때 참고하기 좋습니다.
LINE Design System - LINE
아시아를 중심으로 한 글로벌 메신저 플랫폼 서비스인 LINE의 디자인 시스템입니다. LINE은 단순한 메신저 앱을 넘어 결제, 쇼핑, 카메라 등 다양한 서비스를 제공하며, 복잡한 시스템을 구축할 때 참고하기에도 적합합니다.
메신저(LDSM) / 글로벌 패밀리 서비스(LDSG) 두가지의 디자인 시스템이 따로 구축되어 있습니다. 메신저 시스템의 경우 상대적으로 엄격하고 일관성 있는 시스템을 제공하며, 글로벌 패밀리 서비스의 경우 다양한 서비스에 적용하기 위해 더욱 유연한 시스템을 제공합니다.
친근함과 캐주얼한 라인의 톤앤매너를 잘 반영하는 디자인 시스템이며, 모바일 환경의 시스템 구축시 참고하기에 좋습니다.
공식 문서가 간결하고 명확하게 제시되어 있어 문서를 살펴보기 편리합니다.
Spectrum - Adobe
Adobe의 주력 서비스인 디자인 툴 및 웹 서비스에 적용되는 Spectrum 디자인 시스템입니다. XD를 소유하고 있는 회사의 특성상 Figma 컴포넌트는 제공하고 있지 않으며, 컴포넌트 사용을 원한다면 XD 파일을 Figma로 변환하여 사용해야합니다.
Carbon Design System과 마찬가지로 Data Visialization 항목을 참조하기 좋습니다. 특히 해당 항목의 색상 시스템을 살펴보면 데이터 시각화에 대해 이해하는데 큰 도움이 됩니다. 데이터 시각화에 대해 알아보고 싶다면 해당 아티클을 살펴보시면 좋습니다.
Base Design System - Uber
Base Design System은 차량 호출, 배달, 물류 서비스를 제공하는 글로벌 모빌리티 플랫폼 Uber의 디자인 시스템입니다.
Black&White로 구성된 Uber의 브랜드 비주얼을 잘 담고 있으며, 모바일 기준의 컴포넌트를 참고하기에 좋습니다.
2025년 1월 기준 공식 문서에서 Color, Border 등 확인할 수 없는 항목이 다수 존재합니다.
Wanted Design Library - Wanted
Wanted Design Library는 HR 플랫폼 원티드에 적용되는 디자인 시스템입니다.
별도의 시스템 공식 사이트가 존재하지 않고, 피그마 커뮤니티를 통해 직접 시스템 파일을 확인 할 수 있습니다. 피그마 파일 내에 문서가 함께 표기되어 있어 시스템의 구성요소와 함께 참고하기에 좋습니다.
특히 컴포넌트 구축시 참고하기에 적합합니다. 색상 토큰이 간결하고 명확하게 구성되어 있으며, 컴포넌트의 상태(State)를 표기하기 위해 Interaction 컴포넌트를 활용하는 방식이 돋보입니다.
