스타일 가이드와 디자인 시스템 차이

디자인 시스템의 목적

디자이너와 디자이너, 디자이너와 개발자 혹은 기획자를 포함하여 플랫폼을 만들 때 소통하기 위하여 하나의 원칙을 정합니다.

이 원칙은 여러 사람들이 저작할 때 일관성 있게 설계를 할 수 있도록 도우며 컴포넌트의 재사용률을 올려주기 때문에 효율적으로 작업할 수 있도록 도와줍니다. 크게는 사용자에게도 일관적인 사용성을 제공합니다.

이 원칙을 디자인 시스템이라고 합니다.

 

디자인 시스템과 스타일 가이드 차이

스타일 가이드와 디자인 시스템 차이가 무엇일까요?

그전에 스타일 가이드에 대해서 알아보겠습니다. 스타일 가이드는 컬러, 버튼, 폰트, 컴포넌트 디자인의 스타일에 대한 가이드라고 보시면 됩니다. 작은 규모의 중소기업에서 플랫폼을 개발할 때 가장 많이 사용되며, 개발자와의 원활한 소통 및 일관적인 디자인을 위해선 꼭 필요한 가이드입니다. 그렇다면 디자인 시스템은 무엇일까요?  디자인 시스템은 어떤 구조로 어떻게 시스템이 작동되는지에 대한 가이드라고 보시면 됩니다. 따라서 디자인 시스템은 스타일 가이드를 포함 UX 원칙, 철학, 데이터 시각화 가이드, 프레임 워크, 코드 가이드, 디자인 리소스 등으로 이루어져 있습니다.

	디자인 시스템	스타일 가이드
내용	어떤 구조로 어떻게 시스템이 작동되는지 가이드	컬러, 버튼, 폰트 등 디자인 스타일에 대한 가이드

 

디자인 시스템의 오해

1. 스타일 가이드에 코딩을 붙이면 디자인 시스템이 된다?

회사 규모나 상황에 따라 스타일가이드만 활용하여 디자인 시스템이라 부르기도 하고 더 넓게 브랜드 철학까지 디자인 시스템에 담는 곳도 있습니다. 회사별로 상이합니다.

 

디자인 시스템 범위 (규모나 상황에 따라 범위가 다르다)

2. 디자인 시스템은 절대적 가이드며 한번 정해지면 끝?

아닙니다. 디자인 시스템은 약속이며 패턴입니다. 절대적 가이드 가이드가 아닌 권장 가이드입니다. 효율적이고 일관적인 개발을 위한 원칙이기 때문에 지속적으로 구성원 간 협의를 통해 개선 및 발전해나갈 수 있습니다.

 

반응형

디자인 시스템 대표 사례

라인 디자인 시스템

https://designsystem.line.me

LINE Design System

 

구글 머트리얼 디자인 시스템

https://material.io/design

Material Design

 

IBM 카본 디자인 시스템

https://www.carbondesignsystem.com/

Carbon Design System

 

애플 휴먼 인터페이스 가이드

https://developer.apple.com/design/human-interface-guidelines/

Human Interface Guidelines - Design - Apple Developer