UI 디자인이 수년에 걸쳐 발전함에 따라 UI 화면을 생성해야 하는 규모와 속도도 높아졌습니다.
수백만 개의 애플리케이션과 수십억 개의 웹 사이트(매년 더 많이 생성됨)가 있을 뿐만 아니라, 각 앱과 웹 사이트에는 수백 또는 수천 개의 페이지(또는 화면)가 있을 수 있습니다.
이러한 급격한 확장으로 인해 조직에서는 설계 작업을 간소화해야 할 절박한 필요성이 대두 되었는데요,
이제, 여러 기업의 많은 설계 팀은 강력한 설계 시스템을 활용하여 대규모 설계를 체계적으로 관리 한다고 합니다.
“디자인 시스템 이란 무엇인가?”
•
기본 정의: 디자인 원칙, 규격, 다시 사용할 수 있는 UI 패턴과 컴포넌트, 코드를 포괄하는 총 집합체.
( 조직의 스타일 또는 방향에 따라 단순 스타일 가이드, 패턴 라이브러리 역할만 하는 디자인 시스템도 있고 브랜드 원칙, UX 원칙에 이르기까지 하나의 철학을 구성하는 시스템도 있음. )
•
목적: 어떤 제품을 만들 때 표준 규칙을 세우고 이에 따라 작업을 효율적이고, 일관되며, 나아가 확장할 수 있도록 함.
사실, 우리가 흔히 알고 있는 디자인 시스템의 정의는 극히 일부의 내용일 수 있습니다.
회사의 규모에 따라 상세 정의는 상이할 수 있지만, 많은 분들이 디자인 시스템에 대해 오해를 하고 있는 것도 사실 입니다.
“ 스타일 가이드와 코드를 결합하면 디자인 시스템 인가? “
스타일 가이드는 따지고 보면 디자인 시스템이 가진 여러 요소중 하나로 볼 수 있어, 스타일 가이드만 가지고는 디자인 시스템이라고 보기 어렵습니다.
즉, 디자인 시스템이라 하면, ‘어떤 구조로 어떻게 시스템이 작동되는지’ 에 대한 전반적인 가이드로 좀 더 넓은 범위의 의미와 기능을 가집니다. 물론, 조직과 프로덕트의 규모에 따라 얼마나 크게 범위를 가져갈지는 차이가 있을수 있겠지요.
“디자인 시스템은 왜 필요할까?”
1. 공동의 디자인 자산 확충
내부모든 디자이너는 추구하는 컨셉에 따라야하고, 모든 프로젝트에서 디자인 원칙을 탐조하여 제작해야 합니다. 내부에서 필요한 목적은 디자이너에게 분명한 목표를 제공하는 것입니다.
외부사용자에게 컬러, 인터넥션, 패턴은 친숙함과 안정된 느낌을 제공합니다. 잘 계획되고 실행된 디자인시스템은 사용자의 경험을 극대화 합니다.
2. 신속한 대규모 생성/복제 가능
디자인 시스템의 주요 이점은 미리 만들어진 UI 구성 요소와 요소를 활용하여 디자인을 빠르게 복제할 수 있다는 것입니다. 팀은 동일한 요소를 계속해서 계속해서 사용할 수 있으므로 바퀴를 재 발명할 필요성이 줄어들어 의도하지 않은 불일치의 위험이 있습니다.
3. 설계 리소스 시간/비용 최소화
더 간단한 UI 요소가 이미 생성되어 재사용 가능하기 때문에 디자인 리소스는 시각적 모양을 조정하는 데 집중하지 않고 더 복잡한 문제(예: 정보 우선 순위 지정, 워크플로 최적화, 여정 관리)에 더 집중할 수 있습니다. 적은 수의 화면만 만들면 이 결과가 작아 보일 수 있지만 수십 개의 팀과 수천 개의 화면에 걸쳐 작업을 조정해야 하는 경우에는 상당한 효과가 있습니다.
4. 팀간의 통합 언어 = 베스트 커뮤니케이션 툴
특히 디자인 책임이 바뀌거나 팀이 지리적으로 분산된 경우 통합 언어는 잘못된 의사 소통으로 인한 디자인 낭비나 개발 시간을 줄여줍니다. 예를 들어, 드롭다운 메뉴의 기능이나 모양에 대해서는 논의하지 않을 것입니다. 그 용어는 디자인 시스템 내에서 특별히 정의된 요소에 대해 예약되어 있기 때문입니다.
5. 시각적 일관성 유지
디자인 시스템은 구성 요소, 패턴 및 스타일의 단일 소스를 제공하고 분리된 경험을 통합하여 시각적으로 응집력 있고 동일한 생태계의 일부로 보이도록 합니다. 추가 보너스로 모든 주요 시각적 브랜드 변경 또는 재설계는 디자인 시스템을 통해 대규모로 관리할 수 있습니다.
“The complete set of design standards, documentation, and principles along with the toolkit(UI patterns and code components) to achieve those standards.” - 출처: uxpin.com
“디자인 시스템을 위한 필수적인 툴?”
Sketch, Abstract, Zeplin, Figma, Framer 등, 최근 UX/UI 디자이너 분들께서는 이 같은 Web-based 툴들을 많이 사용하실텐데요, 저희 CloudONE팀의 디자인파트는 Figma를 주요 툴로 이용중에 있습니다.
Figma는 최근 Adobe가 인수한 막강한 플랫폼이기도 하고, ‘디자이너’만 타깃으로 하지 않아 프론트엔드 개발자, PM, 기획자 모두가 쉽게 파일을 생성하고 협업할 수 있는 통합 툴이 될 수 있는것에 큰 매력을 느껴서이기 때문인데요, 특히 디자인시스템을 개발하는데 있어도 여러 편리한 기능을 잘 제공하고 있는거 같습니다.
(참고) Figma로 디자인시스템 만들어보기
저희팀의 경우에도, 오픈소스프로젝트인 Cloudforet(클라우드포레)를 개발하는데 있어 최상의 효율성을 갖기위해 Front-end 개발자, 그리고 Design파트 구성원들이 모여 직접 Design System을 개발을 해왔습니다.
물론 아직은 내부 개발프로세스의 효율성에 우선적인 초점을 맞추어 글로벌 상위 클래스의 디자인시스템들에 비해 다소 미흡한 부분들이 있지만, 곧 다른 외부개발자들 또한 쉽게 접근해서 활용할 수 있는 매력적인 툴이 될 수 있도록 계속해서 업데이트 예정입니다. 
Cloudforet(클라우드포레) 디자인시스템 살펴보기
Storybook: https://storybook.developer.spaceone.dev/