UI/UX 디자인이 발전함에 따라 UI 화면을 생성해야 하는 규모나 속도도 끊임없이 발전되고 있습니다.
이러한 발전 속도 때문에 설계 작업을 간소화 하기 위해서 여러 기업에서 디자인 시스템을 구축하고 있습니다.
디자인 시스템이란?
디자인 시스템은 디자인 원칙, 규격, 재사용성이 높은 UI 패턴과 컴포넌트 라고 볼 수 있습니다.
각 기업의 스타일 또는 방향에 따라 단순 스타일 가이드, 패턴 라이브러리 역할만 하는 디자인 시스템도 있고 브랜드 원칙이나 UX 원칙에 이르기까지 하나의 철학을 구성하는 시스템도 있습니다.
결국 디자인 시스템은 어떤 제품을 만들 때 표준으로 사용할 규칙을 세우고 이에 따라 작업을 효율적이고, 일관되며, 더 나아가 확장할 수 있도록 하기 위한 목적이라고 볼 수 있습니다.
디자인 시스템이 필요한 이유
- 공동의 디자인 자산
회사에 소속되어 있는 디자이너는 추구하는 컨셉에 따라야하고, 모든 프로젝트에서 디자인 원칙을 탐조하여 제작해야 합니다. 내부에서 필요한 목적은 디자이너에게 분명한 목표를 제공하게 됩니다.
또한 유저들에게는 컬러, 패턴 등 해당 서비스에 친숙함과 안정감을 제공합니다. 잘 만들어진 디자인 시스템은 사용자 경험을 극대화 합니다. - 생산성 극대화
디자인 시스템의 주요 이점은 미리 만들어진 UI 구성 요소와 만들어진 요소를 활용하여 디자인이나 개발함에 있어 생산성이 극대화 됩니다. - 설계 및 시간비용 최소화
공통적으로 사용할 UI 컴포넌트들은 대부분 미리 제작이 되어있어 재사용이 가능하기 때문에 디자이너와 개발자는 좀 더 복잡한 문제들에 집중할 수 있습니다. 규모가 크지 않은 서비스의 경우에는 큰 이득이 없어 보이지만, 서비스의 규모가 커지면 커질수록 더욱 큰 효과를 발휘합니다. - 팀원들 간의 용어 통합
협업에 있어서 의사소통은 매우 중요합니다. 디자인 시스템은 잘못된 의사 소통으로 인한 디자인 낭비나 개발 시간을 줄여줍니다. 예를 들면 네비게이션 메뉴의 디자인이나 기능에 대해서는 따로 논의하지 않아도 됩니다. 그 이유는 디자인 시스템 내에서 이미 정의되어 있고 협의가 되어 있는 내용이기 때문입니다.
디자인 시스템에 사용되는 도구
디자인 시스템은 결국 간단히 설명하면 디자인과 개발의 생산성을 높여주기 위한 문서화 되어 있는 가이드 라고 할 수 있습니다.
이 때 사용하는 도구 중 하나가 스토리북(Storybook) 입니다.
Storybook은 본래 컴포넌트 문서 작성에 특화되어 있었지만, v5.2 부터 Docs라는 애드온이 개발 되면서 MDX 포맷으로 작성 할 수 있게 되어 다양한 애드온과 함께 UI개발에 도움이 되는 여러 기능을 갖추게 되었으며, 인지도 및 사용률 또한 다른 도구들에 비해 월등히 높은 편입니다.
Storybook을 사용해야 하는 이유
- 복잡한 로직 없이 독립적인 환경에서 컴포넌트를 개발할 수 있습니다.
- 재사용을 위한 컴포넌트들을 story 내에서 조합해 테스트할 수 있습니다.
- 컴포넌트들을 문서화 할 수 있고, 디자인 시스템에 적용하여 피그마의 컴포넌트들과 동기화할 수 있습니다.
Storybook에서 만든 컴포넌트들은 피그마에서 제작한 디자인 요소들과 동기화해서 개발자와 디자이너 간의 신속한 작업을 가능하게 합니다.
제가 속해있는 스타트업에서는 각자가 맏은 프로젝트 외에 짬짬히 시간을 내서 프론트엔드 개발자와 디자이너 분들이 모여 직접 디자인 시스템 구축을 시작했습니다.
아직 내부 개발 프로세스 효율에 초점을 맞추어 우선적인 컴포넌트들 위주로 개발을 하고 있어서 미흡한 부분이 많지만 최대한 쉽게 접근해서 사용할 수 있도록 노력하고 있습니다.
다음에는 디자이너 분들이 피그마를 사용해 디자인한 UI 요소들과 스토리북을 동기화해서 사용하는 부분과 실제 0 부터 만들어가고 있는 컴포넌트들에 대해 포스팅 하도록 하겠습니다.
감사합니다.
유익한 글이었습니다.