디자인 시스템이란?

디자인 시스템이란 ?

디자인 시스템은 팀이 제품을 디자인, 실현 및 개발할 수 있도록 하는 모든 요소를 ​​그룹화하는 단일 소스입니다.

디자인 시스템은 제품 팀을 위한 공통 시각적 언어 를 정의하는 재사용 가능한 그래픽 구성 요소, 디자인 표준, 스타일 가이드의 모음입니다 . 디자인 프로세스를 가속화하고 명확한 그래픽 표준을 사용하여 최종 제품 구축에 관련된 팀 간의 격차를 해소하므로 구성 요소에서 웹 사이트를 매우 쉽게 조립할 수 있습니다. 따라서 기본적으로 디자인 시스템은 그래픽 및 개발 팀을 위한 규칙서이며 다음과 같이 분류할 수 있습니다.

• 디자인 시스템 – 이를 달성하기 위한 원칙, 패턴 및 코드 구성 요소와 함께 완전한 디자인 표준 세트.
• 패턴 라이브러리 – 허용된 디자인 패턴을 정의하는 디자인 시스템의 하위 클래스.
• 스타일 가이드 – UI 패턴, 타이포그래피 등에 대한 사용 사례를 포함하여 제품이 어떻게 보여야 하는지 보여주는 하위 클래스입니다.

스타일 가이드와 패턴 라이브러리는 디자인 시스템의 결과물 중 일부라 볼수 있습니다. 이름 에서 알 수 있듯이 스타일 가이드 는 그래픽 스타일(색상, 글꼴, 일러스트레이션...)과 그 사용법에 중점을 둡니다. 패턴 라이브러리는기능적 구성요소와 그 사용법을 통합합니다.

 

디자인 시스템의 좋은 점

디자인 시스템은 회사 또는 제품 시각적 식별의 새로운 요소를 디자인하는 데 일관성을 제공합니다. 디자인 시스템은 최종 사용자와 제품 팀을 위한 간단하고 아름다운 경험을 제공하므로 다음과 같은 작업을 훨씬 쉽게 수행할 수 있습니다.

• 디자이너 는 디자인 프로세스를 전체 웹 페이지보다 더 작은 부분으로 분해하고, 작업하고, 관리하고, 변경하기 쉽습니다.
• 개발자 들이 통합된 스타일을 유지하기 위해 필요한 구성 요소를 구축하는 방법에 대한 비전을 명확하게 하고,
• 구성 요소 기반 접근 방식인 제품 소유자/관리자 는 추가 페이지 요소에 대해 개발 팀에 요청하는 프로세스를 매우 쉽게 만듭니다.

 

디자인 시스템의 목적

디자인 시스템의 기본 목적은 팀의 작업을 용이하게 하는 것입니다. 

따라서 우리가 스스로에게 물어야 할 첫 번째 질문은 "내 디자인 시스템에 무엇을 넣어야 할까요?"가 아닙니다. 그러나 "누가 그것을 어떻게 사용할 것인가?"입니다.

 

1. 목적공유
   무엇이든 시작하기 전에 명확한 공유 목표를 중심으로 팀을 정렬하는 것이 중요합니다. 디자인 시스템의 비전을 제시하고 모든 사람이 같은 방향을 바라보도록 하는 데 도움이 됩니다. 시간이 지날수록 발전할 것이며, 변경된 사항은 알리기만 하면 됩니다. 목표에 따라 디자인의 방향이 다르지 않은지 확인하고, 공동작업을 통하여 가치를 정의할 수도 있습니다.
   
   
2. 설계의 원칙
   디자인 시스템은 의미있는 디자인 결정을 내리는데 도움을 줍니다. 디자인 원칙은 선택보다 방향입니다.
   
   
3. 브랜드 아이덴티티
   아이덴티티는 브랜드의 전략과 목표에 따라 정의되어야 합니다. 
   
   
4. 구성요소와 패턴
   구성 요소 및 패턴은 시스템의 핵심입니다. 앞서 언급한 모든 요소는 이러한 요소를 만들고 일관된 경험을 제공하는 데 도움이 됩니다. 구성 요소 는 LEGO 블록으로 볼수 있습니다. 디자이너는 Sketch에서 사용하고 개발자는 코드에서 직접 사용합니다. 기능적 동작을 지정해야 합니다.
   
   

 

 

 

팀이나 제품마다 한 가지 종류의 디자인 시스템이 있다고 거의 말할 수 있습니다. 좋은 디자인 시스템을 정의하려면 다음과 같은 올바른 질문에 대해 고민해야 합니다.

• 얼마나 많은 사람들이 이 시스템을 사용할 것입니까?
• 그들의 프로필은 무엇이며 주제에 대해 충분히 성숙합니까?
• 얼마나 많은 제품을 정렬해야 합니까? 얼마나 많은 플랫폼에서? 얼마나 많은 다른 기술(Angular, React, 기타...)이 있습니까?
• 어느 정도의 일관성을 원하는가?

이 모든 답변은 가장 적절한 종류의 디자인 시스템을 정의하는 데 도움이 됩니다.

 

Strict or loose

airbnb / ted

Strict한 시스템은 포괄적이고 상세한 문서가 있으며 설계와 개발 간에 완전히 동기화됩니다. 시스템에 새로운 패턴을 도입하기 위한 엄격한 절차가 있을 것입니다. 엄격한 시스템은 팀이 직면할 수 있는 대부분의 사례를 다루기 위해 매우 광범위하게 제공해야 합니다.

 

loose한 시스템은 테스트에 더 많이 할애합니다. 시스템은 약간의 자유를 유지하면서 팀을 위한 프레임워크를 제공합니다. 디자이너와 개발자는 제품에 대한 특정 요구 사항과 관련하여 자유롭게 사용하거나 사용하지 않아도 됩니다.

 

두가지 시스템에서 사이에서 한쪽에 치우치기 보다는 올바른 균형을 찾아야 합니다. 

 

 

모듈식 or 통합형

모듈식 시스템은 교체 및 재사용이 가능합니다. 빠르게 확장해야 하고 여러 사용자 요구 사항에 적응해야 하는 프로젝트에 적합합니다. 단점은 구현하기에 많은 비용이 든다는 것입니다(함께 잘 작동하면서 독립적일 수 있는 모듈을 만들기가 어려울 수 있기 때문입니다). 이러한 종류의 시스템은 특히 전자 상거래, 금융 및 정부 웹 사이트와 같은 대규모 제품에 적합합니다. 

 

통합형 시스템 은 하나의 고유한 컨텍스트에 중점을 둡니다. 또한 부품으로 구성되어 있지만 이러한 부품은 교환할 수 없습니다. 이러한 종류의 시스템은 반복되는 부분이 거의 없고 강력하고 자주 변경되는 아트 디렉션(포트폴리오, 쇼케이스, 마케팅 캠페인 등)이 필요한 제품에 적합합니다.

 

중앙 집중모델  or 분산모델

중앙집중모델, 분산모델 디자인 시스템  — by Nathan Curtis

중앙 집중식 모델에서는 한 팀이 시스템을 담당하고 발전시킵니다. 이 팀은 다른 팀의 작업을 용이하게 하기 위해 존재하며 시스템이 대부분의 필요를 충족하는지 확인하기 위해 그들과 매우 가까이 있어야 합니다.

 

분산 모델에서는 여러 팀의 여러 사람이 시스템을 담당합니다. 모든 사람이 참여한다고 느끼기 때문에 시스템 채택이 더 빠릅니다. 그러나 시스템에 대한 전반적인 비전을 유지할 팀 리더도 필요합니다.

각각의 경우에 모든 사람이 참여하도록 하고 소속감을 조성하기 위해 시스템을 개선하기 위한 제안을 하는 것이 좋습니다.