UI/UX 디자인 시스템

UI/UX 디자인 시스템

---

디자인 시스템

디자인 시스템은 디자인 원칙부터 재사용할 수 있는 UI 패턴과 컴포넌트, 코드로 구성된 시스템을 의미합니다. 이는 전체 서비스에 효율적이고 일관된 디자인을 적용할 수 있도록 도와줍니다.

 

디자인 시스템은 단순한 '디자인' 가이드가 아니라, 디자인 팀과 개발팀이 업무 전반 프로세스와 방식을 일관되게 가져갈 수 있도록 도와주는 협업 '시스템'에 가깝습니다. 이를 통해 제품 개발에 관련된 인원들이 통일된 규칙하에 사용자에게 일관된 디자인과 사용성을 제공할 수 있습니다.

 

디자인 시스템은 제품의 특성이나 규모 혹은 구성원들의 상황에 따라, 작은 규모에서 디자인 시스템은 컴포넌트 라이브러리 역할로 충분할 수 있지만 큰 규모의 서비스의 경우 더욱 다양한 복잡한 디자인 및 개발 프로세스를 포함하게 됩니다. 

 

따라서 디자인 시스템은 실무에서 서비스 확장이나 다양한 디바이스 환경에 대응할 때 시간과 노력을 절약해 주는 도구로 작용합니다.

 

 

디자인 시스템의 이점

 

1. 팀간의 원활한 협업 촉진

디자인 시스템은 PM, 디자이너, 개발자 등 여러 분야의 사람들이 공통의 기준과 프로세스를 따르는 것과 같습니다.

디자이너와 개발자는 문서 혹은 툴킷 형태를 기반으로 디자인 시스템을 공유해 이를 참고하며 서로의 작업에 대한 이해를 높일 수 있습니다. 따라서 프로젝트의 진행 속도가 빨라지며, 팀원 간의 소통과 협업이 원활해집니다.

 

2. 일관성 있는 사용자 경험 제공

디자인 시스템에 따라 제품이 만들어지면, 사용자들은 시간이 지남에 따라 서비스의 일관된 디자인에 점점 익숙해지기 때문에, 인터페이스를 사용하는 데 걸리는 시간이 점점 줄어듭니다. 사용자는 일관성 있는 UI를 경험하면서 서비스를 더 쉽게 이해하고 사용할 수 있게 됩니다. 결국 이는 전반적인 사용자 만족도를 향상하는 결과를 가져옵니다.

 

3. 효율적인 디자인 및 개발 과정

디자인 시스템에서 특정 컴포넌트의 다양한 상태(기본 상태, 포커스 상태, 에러 상태 등)에 대한 디자인 가이드라인 및 컴포넌트 라이브러리를 미리 정의한다면 디자인과 개발 과정에서 효율성을 크게 향상할 수 있습니다.

이는 개발자의 디자인 관련 업무를 줄여주기 때문에 비즈니스 로직 혹은 성능 최적화와 같은 더 크고 복잡한 문제에 개발자가 집중할 수 있도록 도와줍니다.

 

4. 브랜드 인지도 강화

코카콜라를 떠올리면 빨간색 로고가 생각나는 것과 같이, 사용자들이 일관된 디자인을 인지하게 되면 그 제품이나 브랜드에 대한 인지도와 신뢰도가 높아지게 됩니다.

이를 위해 디자인 시스템을 도입해 브랜드의 개성과 가치를 표현하는 색상, 타이포그래피, 아이콘, 이미지 등의 요소를 통일할 수 있습니다. 따라서 사용자들은 제품이나 서비스를 사용하면서 브랜드와 연결되는 느낌을 받게 됩니다.이를 통해 사용자에게 일관된 브랜드 이미지를 제공하여 기업의 브랜드 가치와 시장에서의 경쟁력을 향상할 수 있습니다.

 

 

디자인 시스템을 도입하기 좋은 시기

 

1. 제품군 및 기능의 확장

서로 다른 프로젝트에서 일관성 있는 디자인을 적용하고 싶을 때 디자인 시스템을 도입해 재사용할 수 있는 컴포넌트를 공유함으로써 작업의 효율을 높일 수 있습니다.

 

2. 관련된 인원이 늘어날 때

서비스와 관련된 인원이 늘어날수록 서로 다르게 만들어 낸 솔루션과 스타일이 추가되면 점차 사용자 경험이 상이하게 됩니다. 따라서 서비스를 만드는 디자이너 및 이해관계자가 많아진다면, 디자인 시스템 구축을 고려할 수 있습니다.

 

3. 채널의 확장

오프라인 채널이 온라인으로 확장되거나 다양한 기기에 동일한 서비스를 제공하게 되는 경우가 있습니다. 이때 서로 다른 채널에서 공통의 디자인을 적용한다면 일관된 사용자 경험을 제공할 수 있습니다.

 

 

디자인 시스템 구축하기

1. 디자인 원칙 정의
   • 프로젝트의 목표 및 브랜드 가치를 고려하여 설정
2. 제품 검토
   • 공통 컴포넌트 및 패턴 찾기
3. 스타일 가이드 개발
   • 색상, 글꼴, 아이콘, 간격 등
4. 컴포넌트 디자인 및 문서화
   • 컴포넌트 디자인 완성 후 사용 방법 및 세부 사항 문서화
5. 디자인 시스템 구현
   • 디자인 시스템의 요소를 사용해 개발자가 실제 서비스에 구현
6. 지속적인 유지보수 및 업데이트
   • 기존 구성 요소의 개선, 사용자 피드백 반영

 

 

디자인 시스템을 위한 도구들

1. Figma

2. Tokens Studio for Figma (Figma Tokens)

3. Sketch

4. Storybook

5. InVision Design System Manager (DSM)

6. Zeplin

 

---

 

Atomic Design

 

기존의 웹 디자인 방식은 각 페이지마다 디자인 요소를 개별적으로 만들고 관리하는 방식이었습니다. 하지만 프로젝트 규모가 커질수록 관리가 어려워지고, 일관성을 유지하기 어려워졌습니다. 

 

이러한 문제를 해결하기 위해 아토믹 디자인(Atomic Design)이라는 개념이 등장하였습니다. 아토믹 디자인은 UI를 물질의 가장 작은 단위인 원자(atom)처럼 최대한 쪼개고, 그것들을 조합하고 점짐적으로 확장시켜 일관성 있는 디자인 시스템을 구축하는 것을 목표로 합니다.

출처:  https://atomicdesign.bradfrost.com/chapter-2/#the-part-and-the-whole

 

아토믹 디자인의 구성 요소로는 원자(atom)에서 시작해, 분자(molecule), 유기체(organism), 템플릿(template), 페이지(page)가 있습니다.

이러한 구성 요소는 웹을 여러 부분이 모인 하나의 전체이자, 동시에 여러 부분으로 이루어진 집합으로 이루어진 집합으로 이해하는 접근 방식(Mental model)에 가깝습니다. 이러한 접근 방식은 UI를 체계적이고 재사용 가능한 모듈로 구성하도록 도와줍니다.

 

 

아토믹 디자인의 장점

 

1. 모듈화와 재사용성

아토믹 디자인은 작은 단위의 구성요소를 만들고, 이를 조합하여 더 큰 단위의 구성 요소를 생성하는 방식으로 진행됩니다. 이렇게 모듈화된 구성 요소는 쉽게 재사용할 수 있어 개발 시간을 단축시키고 코드의 중복을 줄입니다.

 

2. 유지보수의 편리함

웹사이트나 애플리케이션의 변경이나 업데이트가 필요할 때, 각 구성 요소를 개별적으로 수정하기 쉽고 이러한 변경이 전체 시스템에 영향을 미치지 않습니다. 이는 프로젝트의 유지 보수를 편리하게 만들어 줍니다.

 

3. 확장성

아토믹 디자인을 적용한다면 새로운 기능이나 페이지를 추가할 때 유연한 확장이 가능합니다. 이미 만들어진 구성 요소를 조합하여 새로운 기능을 구현하거나, 필요한 경우 기존 구성 요소를 확장하여 새로운 버전을 만들 수 있기 때문입니다. 이를 통해 프로젝트의 확장성이 높아지며, 새로운 요구 사항이 생겼을 때 더 빠르게 대응할 수 있습니다.

 

같이 읽으면 좋은 글

https://yozm.wishket.com/magazine/detail/1531/

Atomic Design Pattern의 Best Practice 여정기 | 요즘IT