Doodle Doodle
Web 디자인 시스템? Design and Style Guide Component Library, UI Kit
- -
728x90
서비스 개발을 하면서 디자이너와 의견을 맞추고 소통하기 위해 방법을 찾아봤다.
사실 많이 미숙해서 css부분을 좀 쉽게 가져갈 수 있는게 없을까 하면서 찾았던게 구글의 MUI 프레임워크다.
디자인 시스템? 그런거 잘 모르겠고, 일단 편한거부터 찾자! 하며 MUI의 공식문서를 보게 되었다.
처음 공식문서를 들어갔을때 방대한 양에 놀라기도 했고, 이런것도 해줘? 라며 놀라기도 했다.
그냥 기본적으로 제공해주는 것들을 다 가져다 쓰고싶은 심정이었다.
하지만, 기본 제공해주는건 디자이너 눈에는 와 저런것도 되면, 이것도 되겠네? 가 됐다 ㅎㅎ..
그래서 MUI를 또 열심히 공부하게 됐고, 기본부터 정리하자는 생각에 구글링 하던 도중 디자인 시스템이란것을 알게 됐다.
Design System?
2014년 6월 구글이 Meterial Design System을 공개한 후 많은 회사들이 고유 디자인 시스템을 구축하고 공유하고 있다.
구글, 애플처럼 운영 체제를 관리하는 기업뿐만 아니라 IBM, Shopify 등의 플랫폼, Audi, Uber와 같은 모빌리티 회사, 금융, 스타트업 등 도메인과 회사 규모를 가리지 않는 트랜드이다.
일반적으로 디자인 시스템을 UI 툴킷(Tool Kit)만을 의미하는 것으로 알고 있지만, 디자인 시스템은 UI툴킷만을 지칭하는 것이 아니다.
디자이너, 개발자, 기획자 등 관련 이해를 관계자들이 프로젝트를 일관성있게 구축할 수 있도록 도와주는 모든 것들을 포함한다.
디자인 원칙(Design Principles), 프로세스(Process), UX 패턴, UI툴킷, 코드(code) 등 모든 것이 포함된다.
세부적 구성 요소에는 유형적인 요소와 무형적인 요소로 나눌 수 있다.
유형적인 요소에는 UI툴킷, 디자인 지침, 디자인 패턴 등이 있다.
무형적인 요소에는 브랜드 가치, 팀의 작업 방식, 사고 방식 등이 있다.(매우 추상적)
기업마다 디자인 시스템을 정의하는 기준이 다르나 일반적으로 디자인 시스템은 디자인 원칙을 가진다.
디자인 원칙은 기업 및 제품에 대한 방향성을 제시하는 것이다. 일반적으로 단어 및 짧은 문장 형태로 나타내며 3~6개의 원칙을 세운다.
디자인 원칙을 정하고 난 뒤 디자인 가이드라인을 구성한다. 이는 디자인 원칙에 접근하는 방법을 제시한다.
디자이너 및 개발자들은 디자인 가이드라인을 통해 프로젝트를 진행하게 된다. 이러한 디자인 원칙 및 디자인 가이드라인을 수립해 놓으면 프로젝트 의사결정이 쉬워진다.
디자인 가이드 라인은 방법으로만 제시되고 구체적인 지침을 담지 않는다. 디자인 규칙을 통해 디자인 가이드라인이 실제로 적용되는 방식을 제시한다. 디자인 규칙은 Style Guide 형식으로 제공된다.
디자인 시스템
디자인 시스템은 디자인 원칙, 규격, 다시 사용할 수 있는 UI 패턴과 컴포넌트, 코드를 포괄하는 종합 세트이다.
정의 상 디자인 시스템이 UI/UX 가이드라인을 포괄하고 있지만 실제 사례를 보면 디자인 시스템 마다 포괄하는 범위가 다르다.
단순 스타일 가이드, 패턴 라이브러리 역할만 하는 디자인 시스템도 있고 브랜드 원칙, UX 원칙에 이르기까지 하나의 철학을 구성하는 시스템도 있다.
UI 가이드라인
UI 가이드라인의 주 목적은 UI를 표준화하고 화면 간 일관성을 확보하는 것이다. 주요 화면에서 사용 되는 공통 UI 패턴과 주요 컴포넌트를 추출해 정의하고 상세 속성을 규정하여, 디자이너와 개발자가 정해진 기준에 따라 UI를 설계할 수 있도록 한다.
UX 가이드라인
UX 가이드라인은 서비스와 브랜드 측면에서 사용자가 일관적이고 차별화된 경험을 하도록 한다. 컨텐츠, 기능 별 사용자의 행동과 니즈를 반영해서 UX원칙을 도출한다.
컴포넌트 라이브러리
디자인 시스템은 단지 기획자나 디자이너들만을 위한 시스템이 아니다.
컴포넌트 라이브러리는 스타일 가이드 기반으로 개발자들이 붙어서 재사용이 가능한 컴포넌트 형식의 라이브러리를 구축하는 것이다.
요약하자면
통일감 잇는 서비스 브랜딩 구축
개발 생산성 향상과 수정 및 유지보수 유리
개발직군 이해 및 당사자간의 소통
정도가 될 것 같다.
https://www.wedesignx.com/knowledge/design-system
https://story.pxd.co.kr/1434
728x90
300x250
Contents
소중한 공감 감사합니다