brunch

라이킷 30 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Jenny Jang Jun 29. 2024

[UXUI] 디자인 시스템이란? +오픈소스,UI Kit

디자인 시스템, 꼭 구축해야 하는가?

▦ 디자인 시스템이란 무엇인가?

디자인 시스템은 제품 팀이 일관된 사용자 경험을 제공하기 위해 사용하는 재사용 가능한 UI 요소들의 모음입니다. 디자인 시스템은 디지털 제품의 시각적 디자인과 시각적 언어를 일관되게 유지하며, 제품 팀, 디자이너, 개발자들에게 "일관된 단일 디자인 소스" 역할을 합니다.

기본적인 디자인 시스템 예시 출처: https://www.figma.com/community/file/874766871676128442

디자인 시스템의 구성 요소

디자인 시스템을 이해하기 쉽게 설명하자면, 이는 제품 또는 회사의 "디자인 언어"와 "디자인 철학"으로 생각할 수 있습니다. 주요 구성 요소는 다음과 같습니다:

다양한 UI 컴포넌트: 버튼, 아이콘, 폼 등 다양한 사용자 인터페이스 요소들

코드 컴포넌트 및 코드 스니펫: 재사용 가능한 코드 조각들

디자인 파일 및 디자인 요소: 시각적 디자인 파일 및 요소들

스타일 가이드: 타이포그래피 스타일, 색상 팔레트 등

디자인 가이드라인: 디자인 패턴, 시각적 스타일 및 모범 사례

디자인 프로세스 및 시각적 디자인 가이드라인: 디자인 절차 및 시각적 디자인 지침

콘텐츠 가이드라인 및 스타일 가이드: 콘텐츠 작성 규칙 및 스타일 지침

기타 디자인 리소스: 문서, 기사, 디자인 원칙 및 디자인 철학 지침

디자인 시스템의 장점

디자인 시스템은 단순한 제품의 구성 요소를 넘어서, 제품과 브랜드의 디자인 철학 및 시각적 언어를 나타냅니다.

일관성 유지: 제품과 디자인 팀이 일관되게 작업할 수 있도록 합니다.

디자인 부채 감소: 중복 작업을 줄이고, 디자인 팀이 명확한 모범 사례를 참고하여 훌륭한 사용자 경험을 쉽게 창출할 수 있습니다.

효율성 향상: 재사용 가능한 요소들을 통해 개발 속도를 높이고, 오류를 줄입니다.

협업 증진: 전 세계 수천 명의 직원이 동일한 기준을 참고할 수 있게 하여, 협업을 촉진합니다.

▦ 디자인 시스템의 활용

디자인 시스템은 회사의 UX 디자이너, UI 디자이너, 개발자, 마케팅 담당자 및 콘텐츠 작성자가 동시에 참조할 수 있는 강력한 지침서 역할을 합니다. 이를 통해 제품의 디자인을 일관되게 개발하는 데 필요한 지침을 제공합니다.

예시: 드롭다운 메뉴 생성

* 드롭다운 메뉴의 다양한 디자인 옵션

개발자가 새로운 기능 내에서 드롭다운 메뉴를 만들어야 한다고 가정해봅시다. 드롭다운이나 입력 필드와 같은 작은 디자인 요소는 겉으로는 간단해 보이지만, 수십 가지의 작은 디자인 결정이 포함됩니다. 개발자는 다음과 같은 몇 가지 질문에 직면하게 될 것입니다:

- 이 컴포넌트는 어떻게 생겼나요?

- 이 컴포넌트의 크기는 얼마나 되나요?

- 각 UI 요소의 색상 팔레트는 무엇인가요?

- 컴포넌트의 UI 요소들은 어떻게 간격을 두고 크기가 결정되나요?

- 드롭다운은 어떻게 열리나요?

- 호버 전환은 어떻게 되나요?

- 어떤 아이콘, 타이포그래피, 색상을 사용해야 하나요?

- 카피는 어떻게 작성해야 하나요? 콘텐츠 가이드라인이 있나요?

- 빈 상태(empty state)는 어떻게 생겼나요?

- 디자이너가 처음부터 새로 만들어야 하나요?

- 이 컴포넌트의 디자인 파일은 어디서 찾을 수 있나요?

디자인 시스템이 이미 구축되어 있다면, 디자이너는 이미 이러한 요소들을 고려하여 다른 페이지에 사용할 드롭다운 컴포넌트를 디자인했을 가능성이 큽니다. 즉 디자인 시스템이 이미 구축되어 있다면, 개발자는 기존 드롭다운 컴포넌트의 코드 스니펫을 복사하여 모든 측면 — 간격, 타이포그래피, UX, 호버 상태 등 — 이 디자이너의 의도대로 동작하도록 할 수 있습니다.

▦ 디자인 시스템의 유지 및 업데이트

마찬가지로, 제품 디자이너나 디자인 팀원이 드롭다운 컴포넌트를 변경하고자 할 때, 한 곳에서 이러한 변경을 수행하면 코드 컴포넌트가 업데이트되어 해당 컴포넌트가 사용되는 모든 곳에 변경 사항이 반영되도록 할 수 있습니다.

디자인 시스템을 구현해야 하는 이유 1 : 빠른 작업

기존 디자인 컴포넌트를 사용하여 작업하는 것은 일종의 창의성에 대한 제약을 거는 것처럼 보일 수 있지만, 실제로는 결정 피로를 줄이고 제품 팀이 더 빠르게 작업하며 더 나은 디자인과 구축을 할 수 있게 합니다. 정의된 디자인 시스템이 없으면 시각적 스타일과 디자인이 엉망이 되고 일관성이 없어집니다. 앞서 언급한 예로 돌아가서; 간단한 드롭다운 컴포넌트가 제품 전반에 걸쳐 다르게 보이고 동작한다면, 이는 혼란스럽고 나쁜 사용자 경험을 초래합니다.

즉, 디자인 시스템은 일관된 사용자 경험을 제공하고, 디자인 및 개발 팀의 효율성을 높이며, 제품의 시각적 및 기능적 일관성을 유지하는 데 필수적인 도구입니다. 이를 통해 제품 팀은 더 나은 사용자 경험을 창출하고, 디자인 부채를 줄이며, 전체 개발 과정을 더 원활하게 진행할 수 있습니다.

디자인 시스템을 구현해야 하는 이유 2 : 디자인 부채를 피하기 위해

대부분의 경우 디자인 시스템이 필요한 이유는 디자인 부채를 피하기 위해서입니다. 간단히 말해, 디자인 부채는 단기 목표를 달성하기 위해 생략된 일관성, 불완전성, 나쁜 사용자 경험 및 디자인 프로세스의 축적입니다. 이는 팀이 작업 중에 취한 모든 지름길을 의미하며, 나중에 이를 해결해야 합니다.

디자인 부채는 시간이 지남에 따라 자연스럽게 쌓이며 모든 제품에 발생합니다. 중요한 것은 그 비용, 시간, 자원이 너무 많이 들기 전에 이를 이해하고 관리하는 것입니다. 수천 개의 회사가 이를 무시하고 있다가 경쟁사에 비해 열악한 디자인과 사용자 경험으로 인해 뒤처지게 됩니다.

▦ 글로벌 기업들의 디자인 시스템 예시 (오픈소스)

많은 기업들이 디자인 시스템을 공개적으로 제공하고 오픈 소스로 제공하고있습니다.

이러한 시스템은 세계적인 기업들이 디자인을 어떻게 생각하고 디자인 시스템 및 디자인 개발 프로세스에 접근하는지 탐색할 수 있는 훌륭한 리소스입니다. 아래와 같이 큰회사들의 공개 디자인시스템을 참고해서 내 프로젝트의 디자인 시스템을 구축할 수도 있어요.

Google Material Design 3

Google의 Material Design System은 이론, 리소스, 도구를 결합하여 디지털 경험을 만드는 통합 시스템입니다. Material 3는 Google의 오픈 소스 디자인 시스템의 최신 버전으로, 방대한 UI 컴포넌트, 아이콘, 스타일, 소스 파일, 스타터 키트, 코드 컴포넌트 등을 포함하고 있습니다.

- [Google Material Design 3](https://material.io/

Apple Human Interface Guidelines

Apple 플랫폼과 원활하게 통합되는 멋진 앱을 디자인하기 위한 심층적인 가이드라인과 UI 리소스를 제공합니다. 이 디자인 시스템은 iOS, macOS, tvOS, watchOS를 위한 다양한 템플릿, UI 컴포넌트, 디자인 가이드라인으로 구성되어 있습니다. 디자인 워크플로우를 개선하기 위해 많은 UI 디자인 도구, 기능, 스타일 가이드를 쉽게 다운로드할 수 있습니다.

- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/

Microsoft Fluent Design System

Microsoft Fluent는 디자이너와 개발자에게 매력적인 제품 경험을 만들 수 있는 프레임워크를 제공하는 오픈 소스, 크로스 플랫폼 디자인 시스템입니다. 수백 가지의 무료 디자인 요소(색상, 레이아웃, 모션, 아이콘, 타이포그래피 등)를 포함하고 있어 Windows, Android, iOS 등 다양한 플랫폼에서 사용할 수 있습니다.

- [Microsoft Fluent Design System](https://www.microsoft.com/design/fluent/

Atlassian Design System

Atlassian은 프로젝트 관리 전략 및 팀 협업 방법을 개발하고 제품 디자인 도구 모음을 개선할 수 있는 디자인 도구, 기능, 가이드라인을 제공합니다.

- [Atlassian Design System](https://atlassian.design/

이 시스템들은 디자인 시스템을 구축하거나 개선하려는 팀에게 유용한 참고 자료가 될 수 있습니다.

[팁] 디자인 시스템 빠르게 구축 :UI Kit 사용

그렇다면, 모든 회사, 앱에는 디자인 시스템이 필요한가요? 직접 구축하려면 시간과 돈이 너무 많이 들지 않을까요?

우리가 음식을 준비할때 직접 모든 재료를 사고 요리를 할 수도 있지만 시간과 돈이 부족하면 밀키트를 사서 빠르게 조리할 수도 있어요. 디자인도 마찬가지입니다. 디자인에도 밀키트가 존재해요 바로 UI Kit 입니다.

디자인 시스템을 구축하고 유지하는 것은 많은 작업이 필요합니다. 일부 디자인 시스템은 간단하고 유지 관리가 쉬운 반면, 일부는 전담 디자인 시스템 디자이너와 개발자를 고용할 정도로 복잡합니다. 그렇다면 실제로 디자인 시스템이 필요한지 고민해볼 필요가 있습니다. 그냥 간단한 앱 프로젝트거나, 큰 회사 혹은 SaaS 프로젝트가 아닌 경우에는 디자이너를 고용하고 디자인 시스템을 처음부터 구축하는 것은 시간낭비, 돈 낭비를 초래할 수도 있습니다.

따라서, 초기 앱 프로젝트 혹은 디자인 시스템을 자체 구축하기 어려운 회사의 경우에는 UI 키트를 구매하는 것을 추천합니다.