Design System 이 필요한 이유

[kt cloud 서비스개발팀 우현수 님]

 

Design System 이 필요한 이유

 

Design System 이란?

 

제품이나 서비스의 UI를 일관성 있게 설계하고 개발하기 위한 일련의 가이드라인, 컴포넌트, 패턴 등을 모아놓은 체계를 말한다. 이를 통해 디자인과 개발팀이 협업할 때 통일된 기준을 유지하고, 사용자가 일관된 경험을 할 수 있도록 할 수 있다. 디자인 시스템은 특히 대규모 제품이나 장기적으로 유지 보수되는 프로젝트에서 중요하다. 또한, 새로운 기능을 추가하거나 페이지를 기획할 때도 기존 디자인과 쉽게 통합할 수 있으며 유연성과 확장성을 제공하는 도구이다.

 

Design System 필요한 이유

 

 

1. 개발 효율성 향상: 개발자, 디자이너, 기획자 간의 반복적인 작업을 줄이고, 재사용할 수 있는 컴포넌트를 활용해 효율적인 Front-End 개발을 진행할 수 있다. 새로운 기능을 추가하거나 기획할 때도 이미 정의된 컴포넌트와 스타일을 통해 빠르게 작업을 수행할 수 있다.

 

2. 확장성: 디자인 시스템은 프로젝트가 커지더라도 일관성을 유지하면서 확장할 수 있는 구조를 제공한다. 새로운 기능이나 페이지를 추가할 때 디자인 시스템을 기반으로 작업하면 기존 페이지에 쉽게 어울리는 페이지 작업이 가능하다.

 

3. 일관성 유지: 서로 다른 페이지에 다수의 개발자가 작업을 하더라도 디자인 시스템을 이용한다면 통일된 UI를 제공할 수 있다. 이를 통해 사용자에게 일관된 경험을 제공하고, 제품의 신뢰도를 높일 수 있다.

 

4. 협업 용이: 개발자, 디자이너, 기획자 등 다양한 직무 간의 협업을 원활히 할 수 있다. 디자인 시스템 기준의 소통으로, 서로의 업무를 더 잘 이해할 수 있다.

 

5. 브랜드 일관성: 디자인 시스템을 이용해 브랜드의 아이덴티티를 일관되게 유지할 수 있다. 모든 UI 요소가 브랜드 가이드라인에 맞추어져 있기 때문에 사용자가 접하는 모든 인터페이스에서 일관된 브랜드 경험을 제공할 수 있다.

 

Design System 구성 요소

 

• 스타일 가이드 (컬러 팔레트, 타이포그래피 등)
• 컴포넌트 라이브러리 (버튼, 입력 필드 등 UI 요소)
• 패턴 라이브러리 (디자인 패턴, 인터렉션 패턴 등)
• 디자인 토큰 (속성 정의, 일관성 유지)
• UI 키트 (Figma 등 디자이너가 사용하기 위한 툴)
• 문서화 (사용 가이드, 예시 등)
• 워크플로우 툴 (storybook 등 디자이너와 개발자가 협업할 수 있는 툴)
• 브랜드 가이드 (브랜드 아이덴티티, 톤 등)

 → Storybook 을 이용하여 UI Component 의 사용법, 예시, Documents 제공 예정

 

Design System Component 디자인 및 개발 방법

• atomic design pattern (자세한 설명 및 Material Design Pattern 과 차이점, 장단점 등은 추후 테크 블로그에 추가 예정)

 → UI 구성 요소를 체계적이고 재사용 가능하게 만드는데 중점을 둔 Design Pattern

출처: https://atomicdesign.bradfrost.com/chapter-2/

 

Atoms (원자) → Molecules (분자) → Organisms (유기체) → Templates (템플릿)

 

각 요소를 명확하게 분리하고 정의하기에 용이하다. 따라서 규모가 크고 복잡한 UI를 다루는 프로젝트에서 특히 유리하며, 유지보수가 쉽고 일관성을 유지해야하는 디자인 시스템을 구축할 때 매우 효과적인 방법이다. 또한, 새로운 페이지나 컴포넌트를 만들때 이미 존재하는 원자나 분자 단위의 컴포넌트의 조합으로 빠르게 구축할 수 있다는 장점이 있다.

 

 

Design System에 대한 개인적인 견해

 

• ‘바퀴를 다시 발명하지 말라(Don't Reinvent the wheel)’는 잘 알려진 프로그래밍 격언이다. 디자인 시스템은 이를 방지하기 위해 잘 만들어 놓은 바퀴를 마련하는 것과 같은 일이라고 생각한다. 단순히 UI Component 를 찍어내는 작업에 집중하기 보다는 범용적으로 쓰일수 있는 Component 를 하는것이 Design System 의 목표가 되어야 한다

 

• '디자인 시스템은 하나의 단순한 프로젝트가 아니다. Products 를 제공하는 Product 이다. (A Design System isn't a Project. It’s a Product, Serving Products.)' 디자인 시스템을 하나의 프로젝트가 아닌 다양한 Product 에서 사용될 하나의 또 다른 Product 라고 인식하는 부분이 중요하다. 이러한 사고를 통해 기획 및 개발단에서 범용성을 확보해야 다양한 상황에서 개발 효율을 극대화할 수 있다.
•  

 

 

참고/출처

https://medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935

A Design System isn’t a Project. It’s a Product, Serving Products.