기존의 UI 가이드는 개발코드와 연결되지 않은 디자인 Asset 과 정적인 문서에 머물러 활용도가 높지 않았습니다.
디자인과 UI개발업무의 생산성 향상을 위해 Design Asset, Code Asset, 가이드라인이 연결된 개념으로 구성원간 협업의효율성을 높일 수 있는
Design System을 지향합니다.

Design System은 디지털채널 구축 시 기준이 되는 UI/UX원칙과 가이드라인, 그리고 구축과정에서 UI화면개발에 필요한 재사용 가능한 기본구성요소들인
Design Asset, Code Asset의 모음입니다.

Design System의 Asset 활용으로 사용자에게는 일관된 디지털 경험을 제공하고, 제작자에게는 시스템과 화면들의 설계, 구축시 효율성과 일정수준 이상의 UI품질을 확보 가능하도록 도움을 줍니다.

기존 UI가이드는 개발코드와 연결되지 않은 디자인 Asset과 화면 단위 설계 방식으로 Asset 재활용이 어려웠습니다. 그로 인해 의사소통을 위한 별도 작업이 필요하고 재활용이 가능한 컴포넌트로 변환하기 위해 많은 Effort가 소요되었습니다.

또한 웹사이트 형태의 스토리북이나 가이드는 접근성 측면에서는 개선되었지만, 이를 활용하고 협업하는 관점에서는 한계점을 가지고 있었습니다. 가이드북으로써의 역할은 수행할 수 있지만, Code나 Design Asset을 활용하기 위해 별도의 채널을 통해서 확인해야하는 번거로움이 있었습니다. 이러한 번거로움은 작업자간의 작업 편차를 발생시키며 개별적으로 확인하는 과정에서 일관성 있는 디자인 의사결정을 내리기 어려웠습니다.

자사의 Design System은 디지털 채널 구축시 기준이 되는 UIUX원칙과 가이드라인, 구축 과정에서 UI화면개발에 필요한 기본 구성요소들의 Design Asset과 Code Asset의 모음이며, 세부적으로는 1) 디자인 원칙과 기본 설계 원칙이 담겨있는Storybook, 2) UI 구성요소별 Design Asset과 활용방식이 담겨있는 Design Asset, 3) UI 구성요소별 Code Live Demo & Guide가 담겨있는 Code Asset으로 구성되어 있습니다.

이러한 Asset을 활용함으로써 사용자에게는 일관된 디지털 경험을 제공할 수 있으며 제작자는 설계 및 구축에 소요하는 시간과 비용을 최소화할 뿐 아니라, 검증된 고품질의 UI표준을 확보할 수 있습니다.

자사의 Design System은 최소 단위의 UI의 구성요소로부터 Page UI를 구현하는 Atomic Design 방법론* 활용하였으며, 재사용 가능한 Design System을 위해 서비스에 공통적으로 자주 사용되는 요소들을 최소단위(Atoms)로 정의하는 것부터 시작하여 하나, 둘 블록을 쌓듯 Component들을 조립하며 Page를 완성하는 방식으로 제작되었습니다.

Design Token 중심의 Atomic한 요소들이 모여 점진적이고 구조적으로 결합되면서 디자인의 전과정에 기여할 수 있는 시스템적인 프로세스를 갖추게 됩니다. 디자인 시스템 내부의 요소들은 서로 연결되어 있어 유기적인 유지보수가 가능하며 전반적인 디자인 과정을 상향평준화 시킬 수 있습니다.

자사 Design System의 핵심적인 특징은 다음과 같습니다.

Design System을 활용하기 위해서는 UXer(기획/디자인), FrontEnd UI 개발자, 아키텍트, 고객사 IT담당자간의 유기적 업무 협의가 필요하며, 프로세스 단계별 각 담당자의 업무를 가이드함으로써 개발 생산성을 향상시킬 수 있습니다. 가이드 문서와 Design&Code Asset이 결합되어 있어 기존에 여러 프로세스로 나누어 진행되었던 업무들이 하나의 과정으로 통합됩니다.

Design System은 Planning부터 Deliver까지 총 4단계로 구분되며 Design Token과 코드를 연결하는 프로세스가 특징적입니다. 이를 위해 Planning 단계에서부터 명확한 업무 협의 과정을 거쳐 개발환경에 맞는 Design Ops 체계를 수립합니다.

기존에는 디자인 프로세스에서 기획자와 디자이너가 개발자와 독립된 프로세스로 진행되었다면, Design System에서는 Design과 Code가 하나의 에셋으로 연결되기 때문에 서로 긴밀하게 협업하며 Token에 대한 개념을 명확히 합니다. 이를 통해 단순히 Design System에서 끝나는 것이 아니라 Design Ops 개념의 확장된 디자인 시스템을 구축합니다.

Design System의 공통된 가이드라인과 Asset은 Design-Code가 같은 기준으로 Align되어 기획/디자인영역과 프론트 개발 영역이 효과적으로 협업 할 수 있는 기점의 역할이 되어줍니다. 또한,  유사시스템의 구축시 초기의 Design 표준 및 공통 UI Code 구축에 필요한 Effort를 최소화하여 디자인, UI개발의 효율성을 향상 시킵니다. 또한, Component 와 Asset 재사용을 통해 유사성 높은 화면들에 일관된 품질과 사용성을 제공합니다.

Design 제작도구인 Figma의 도입으로 기획자/디자이너/개발자 간의 실시간 협업이 가능해지며, 정교화된 Asset과 Pattern Template으로 일관된 Output 품질의 UI 화면을 신속하게 구성할 수 있습니다. 라이브러리 구조로 구성된 UI표준은 최소한의 Effort로 업데이트 가능하여 지속적이고 효율적인 표준 관리가 가능해집니다.

20년 이상의 축적된 경험을 바탕으로 다양한 산업군에서 수많은 고객들과 함께 디지털 성장을 이루고 있습니다. 고객의 비지니스를 가장 잘 이해하고 혁신적인 기술을 활용하여 고객의 디지털 비지니스의 성장을 돕고 있습니다.