디자인 시스템 부화기: 서비스 인큐베이팅의 시작

내가 현재 몸 담고 있는 회사는 그룹 내 전 계열사에 IT솔루션 및 서비스를 제공한다.

계열사는 식품, 유통, 숙박, 화학, 엔터테인먼트, 건설, 바이오, 헬스케어 등의 다양한 글로벌 산업분야에서 활동한다.

비즈니스 구조상 그룹 이미지의 일관성을 유지하면서 계열사 도메인만의 특성을 고려한 경험을 동시에 제공해야 한다.

계열사마다 형태나 색상은 조금씩 다르고, 앱과 웹에서 쓰는 아이콘 모양이나 파일명도 차이가 있다.

중복된 작업을 최소화하고 확장성과 효율성을 극대화하기위해 '디자인시스템 구축'에 대한 필요성을 자연스레 느낄 수 있었다.

---

디자인 시스템이란?

디자인 원칙과 규격, 재사용 가능한 UI 패턴과 컴포넌트, 코드를 포괄하는 시스템이다. 즉, 서비스 전반에 사용한 공통적인 컬러, 서체, 컴포넌트 등을 정리해 놓은 문서 이다. 디자인 시스템 등장 초기에는 단순히 스타일 가이드와 라이브러리 역할만을 하는UI 키트(UI Kit) 수준이었지만 현재는 브랜드 원칙과 UX까지 어우르는 더 고도화된 시스템으로 발전하였다.

 

디자인 시스템은 디자인 원칙과 규격, 재사용 가능한 UI 패턴과 컴포넌트, 코드를 포괄하는 시스템입니다. 즉, 서비스 전반에 사용되는 공통적인 컬러, 서체, 컴포넌트 등을 정리한 문서입니다. 초기의 디자인 시스템은 단순히 스타일 가이드와 라이브러리 역할을 하는 UI 키트 수준이었으나, 현재는 브랜드 원칙과 UX까지 아우르는 고도화된 시스템으로 발전하였습니다.

---

디자인 시스템 도입 시 장점

 

✔️ 언어와 시각의 '커뮤니케이터'

첫 번째로, 디자이너와 개발자 간의 커뮤니케이션을 원활하게 해줍니다. 디자이너와 디자이너 사이에서도 호흡이 맞지 않으면 같은 작업을 해도 미묘한 차이로 인해 균열이 생길 수 있습니다. 기계가 아닌 사람이기 때문에 싱크를 맞추는 데 휴먼 에러가 발생할 수밖에 없습니다. 하물며 디자이너와 개발자는 어떠한가? 디자이너와 개발자 간에는 접근 방식이 다르기 때문에 커뮤니케이션 이슈가 자주 발생합니다. 따라서, 서로 합의된 기준에 따라 UI를 설계할 수 있도록 도와줍니다. 공통적인 패턴을 파악하여 주요 컴포넌트를 추출하고, 상세 속성을 정의함으로써 불필요한 커뮤니케이션을 줄이고 효율적으로 작업할 수 있습니다.

 

✔️ 기준점이 되는 '표준 매뉴얼'

디자인 시스템은 UI를 표준화하여 화면 간의 일관성을 보장합니다. 이는 공통적인 패턴을 파악하고 주요 컴포넌트를 추출하여 상세 속성을 정의함으로써 이루어집니다. 이렇게 정의된 컴포넌트와 패턴을 사용하면 각 계열사나 프로젝트 팀이 같은 기준에 따라 UI를 설계하고 개발할 수 있습니다. 일관된 UI는 사용자에게 신뢰감을 주고, 브랜드 이미지의 통일성을 유지하는 데 필수적입니다.

 

✔️ 제품 구축 및 유지보수 '시간 단축키'

마지막으로, UI 표준화를 통해 화면 간의 일관성을 확보하면, 제품 구축과 유지보수 시간도 크게 단축됩니다.

단순히 리소스를 복사해 사용하는 경우 심볼이 연결되어 있지 않아 새로운 문제 해결에 집중할 시간에 반복적인 UI 구현에 시간을 소비하게 됩니다. 설계된 공통 컴포넌트와 패턴을 재사용함으로써 개발자는 새로운 기능을 구현할 때마다 처음부터 디자인을 작성하거나 코딩할 필요가 없습니다. 이로 인해 중복 작업이 줄어들고, 오류 발생 가능성도 감소합니다. 이는 곧, 디자인 시스템은 반복적인 작업을 단축시키고, 디자인이 비즈니스에 미치는 영향을 깊이 생각할 시간을 제공합니다.

---

디자인 시스템을 구성하는 요소

 

✔️ 디자인 가이드

프로덕트가 지향하는 디자인 원칙(Design Principles)에 따라 디자인을 구성하기 위한 방법을 정의합니다.

 

✔️ 스타일 가이드

색상, 글꼴, 레이아웃, 그리드 시스템, 간격, UX 라이팅 등 일관성과 브랜드 정체성을 유지할 수 있도록 하는 스타일 관련 규칙과 지침을 정의합니다.

 

✔️ 컴포넌트 & 템플릿

버튼, 입력 필드, 모달, 메뉴, 탐색바 등 UI 요소의 디자인 및 동작을 정의하고 재사용 가능한 패턴을 컴포넌트 형태로 명확하게 제시합니다.

 

 

디자인 시스템을 구성하는 요소는 추후 다뤄보겠습니다.

---

완벽한 디자인 시스템의 길라잡이: 지속적인 개선

과연 완벽한 디자인 시스템을 만드는 것이 가능할까요? 디자인 시스템은 일회성 프로젝트가 아니라, 지속적인 업데이트가 필요한 요소입니다. 끊임없이 변화하는 사용자 요구와 기술 발전에 맞춰 디자인 시스템을 지속적으로 개선해 나가야 합니다. 이러한 과정에서 디자인 시스템은 제품의 품질을 높이고, 효율성을 극대화하는 데 중요한 역할을 합니다. 즉, 디자인 시스템을 도입함으로써 우리는 더욱 효율적이고 일관된 제품을 개발할 수 있으며, 이는 곧 고객 만족도로 이어져 회사와 개인 모두에게 큰 도움이 됩니다.

마지막으로, 디자인 시스템은 단순히 UI 키트 수준으로 여겨져서는 안 됩니다. 눈에 보이는 패턴이나 컴포넌트를 정의하는 것뿐만 아니라, 브랜드 정체성과 팀의 의사결정 방식에 대한 지침 등 무형적인 요소까지 고려함으로써 제품을 더 잘 만들 수 있는 길라잡이 역할을 해야 합니다.