본문 바로가기
ᴜx/ᴀʀᴛɪᴄʟᴇ

올바른 디자인 시스템 만들기 : 컴포넌트

by jinx2a 2020. 11. 10.
반응형

오늘날 디자인 시스템은 모든 디자이너와 개발자로 이루어진 팀의 주요 도구 중 하나다. 아이콘에서 페이지 템플릿에 이르기까지 프로덕트의 모든 응용 가능한 디자인 요소가 어떻게 보이는지를 정의한다. 디자인 시스템은 새로운 레이아웃의 생성, 페이지 개발, 프로덕트 구성 요소에 대한 공통된 이해를 단순화하고 프로덕트의 사용성 향상에 도움을 준다.

 

 

 


디자인 시스템이 제품에 해를 끼칠 수 있는 방법

그러나 디자인 시스템은 어디에나 모두 그대로 사용 가능한 보편적인 도구가 아니다. 디자인된 프로덕트의 전략에 따라 모양과 크기가 다르다. 디자인 시스템을 만들고 유지하는 데 시간과 리소스를 투자하기 전에, 필요한 특정 목적이 무엇인지 생각해보아라. 이 과정은 나중에 많은 두통을 덜어 줄 것이다. 단지 현대적이고 트렌디하다고, 또는 Google이 한다고 해서 시스템 구축을 시작하지 마라.

 

 

- 너무 일찍 시작하면

프로덕트가 MVP 단계에서 막 개발 중일 때, 전략과 목표가 자주 바뀌기 때문에 디자인 시스템을 만드는 것은 시간 낭비다. 프로덕트 개발을 따라가지 못하고 곧바로 관련성을 잃게 된다. 프로덕트 개발 초기에는 항상 부족한 지원 시간이 더 필요할 것이다. 이 경우 디자인 시스템을 만드는 것보다 더 중요한 것이 있다.

 

 

- 너무 늦게 시작하면

프로덕트가 다른 시대의 고대 디자인 동물원일 때, 디자인 시스템은 모든 요소들을 한 곳에 모아서, 규모를 이해하는 것에 도움을 줄 것이다. 그러나 그러한 큰 라이브러리는 사용하기 어려울 것이며, 개발의 유연성과 디자인의 단순성이 사라질 것이다. 모든 것이 시작되는 모든 장점이 사라질 것이다. 제품 재설계를 통해 시간을 절약할 수 있는 경우가 바로 이것일까?

 

 

- 기성 솔루션을 사용하는 경우

디자인 시스템은 사용자의 요구에 맞게 조정된 개별 솔루션이어야 한다. 인기 있는 디자인 시스템은 자신의 제품에 100% 사용할 수 있도록 공개적으로 제공되지 않는다. 이를 사용하는 가장 좋은 방법은 다른 팀의 경험을 통해 배우는 것이다. 상호 작용 유형, 구성 요소 계층, 문서 작동 방식을 살펴보아라. 다른 사람의 내부 디자인 시스템을 살펴보면, 다른 사람의 작업을 복사하지 않고 직접 만드는 방법을 배울 수 있다.

 

 

 

 


디자인 시스템으로 올바르게 작업하는 방법

 

디자인 시스템을 만들 때 반드시 결정해야 할 두 가지 사항을 염두에 두어라.

 

-‍1. 디자인 시스템은 일관된 사용자 경험을 보장하고, 프로덕트 디자인의 품질을 향상해야 한다.

-2. 컴포넌트 시스템은 질서 있고 예측 가능한 개발 프로세스를 구성하고, 컴포넌트와 템플릿을 사용하여 레이아웃을 만드는 데 걸리는 시간을 줄일 수 있어야 한다.

이것은 그림자와 그라디언트의 아름다움이 아니라 디자인 시스템의 성공에 영향을 미친다. 디자인 시스템의 목표는 프로덕트를 더 빨리 만들기 위해 팀 전체의 작업을 확장하는 것이다.

 

 

선반에 배치

인기있는 디자인 시스템 접근 방식은 가장 간단한 UI 요소 (텍스트, 색상 또는 간격)를 원자로 설명하고 더 큰 구성 요소를 원자로 구성된 분자 (버튼 또는 입력 형식)로 설명하는 원자 원리이다. 아이디어는 시스템이 발전함에 따라, 이 접근 방식이 그룹화된 구성 요소(유기체)를 생성한 다음 전체 레이아웃, 페이지 또는 템플릿으로 이어진다는 것이다.

 

특히 프로덕트에서 라이브러리 컴포넌트가 거의 사용되지 않는 경우, 유연성을 조정하고 너무 복잡한 중첩을 만들지 마라. 그러나 다른 극단까지 가지 말고 조금씩 다른 원소의 동물원을 전체적으로 만들어라.

 

 

팀 구성

좋은 디자인 시스템은 개발 팀에게 명확해야 한다.

 

소규모 팀에서는 구성 요소와 템플릿의 일관성을 유지하기가 쉽다. 그러나 팀이 성장함에 따라, 구성 요소 사용에 대한 지식이 변경되거나 잊혀 질 수 있다. 이것이 모든 컴포넌트에 대한 최신 문서를 유지하는 것이 중요한 이유이다. 디자인 시스템의 룰 파괴로부터 보호하기 위해, 디자인 시스템을 감독할 사람이 필요하지만 프로덕트를 만드는 창의적인 프로세스를 제한하지는 않는다.

 

팀원들이 자유롭게 변경할 수 있다고 느끼는 것은 매우 중요하다. 디자인 시스템은 창의력을 강화하는 도구이지, 깨지지 않아야 하는 규칙이 아니다. 시스템의 목표 중 하나는 팀 프로세스를 개선하는 것임을 잊지 말아야 한다.

 

팀에 완전한 라이브러리와 최신 문서가 있는 경우, 모든 디자이너, 프로그래머, 분석가 또는 관리자는 세부 사항에 대해 걱정하지 않고 생각을 구성하고 컴포넌트에서 완성된 디자인을 조합할 수 있다.

 

 

 

 


시작할 곳

디자인 시스템이 어떻게 보일지는 사용자의 니즈를 해결하는 프로덕트 인터페이스에 따라 달라진다. 많은 디자이너들은 스크립트 작성에 집중하는 대신, 버튼이나 컴포넌트를 작성하는 것으로 디자인 시스템을 시작하는 실수를 저지르고 있다. 통합적인 디자인 언어의 작성은 사용자의 행동이나 제품 목표에 대한 지식이 있을 경우에만 시작해야 한다. 단지 페이지나 화면을 그리는 것이 아니라, 사람들이 사용하는 기능을 만들어라.

 

 

색깔

가장 단순하고 분명한 속성인 색상으로 시작해라. 팔레트를 만들기 위해 구축해야 하는 프로덕트 브랜드에 대한 주요 색상이 필요하다.

 

또한 성공 메시지와 오류의 색상을 관리해라. 이는 프로덕트 디자인의 일반적인 패턴(일반적으로 녹색 및 빨간색)이다.

 

텍스트에 순수한 검정색 # 000000을 사용하지 마라. 읽기가 어렵다. 브랜드의 메인 색상과 일치하는 색조로 희석해라.

 

동일한 조언이 회색조에도 적용된다. 디자이너는 #CCCCCC 또는 # F0F0F0 그레이를 자주 사용하지 않는다. 그들은 사용자의 눈에 부담을 주고 생명이 없는 것처럼 보인다. 대부분의 인터페이스에는 다음과 같은 회색 색상이 필요하다.

- 페이지 배경은 밝은 회색

- 테두리와 구분선의 경우 약간 더 어두운 색상

- 도움말 텍스트는 회색

 

 

글꼴

하나의 단일 글꼴에서 시작하고, 필요한 경우 다른 글꼴과 쌍으로 만들어라. 너무 많은 글꼴은 한 페이지에 함께 맞추기 어렵고 컴포넌트 접근 방식으로 사용하기 어렵다.

 

모든 곳에서 동일한 글꼴을 사용하더라도, 제목과 본문 텍스트를 조화롭게 결합해라. 제목은 서로 대조적이어야 하지만 본문에서 주의를 분산시키지 않아야 한다. 다음과 같은 스타일이 필요하다.

- 페이지의 텍스트 계층을 정의하기 위한 2~3 개의 주요 제목

- 여러 하위 제목

- 메인 텍스트 및 본문 텍스트 스타일 지정

- 캡션, 버튼 및 각주에 대한 텍스트

텍스트 컴포넌트를 정의하려면 글꼴 크기, 문자 간격 및 행간에 대한 스타일을 정의해야 한다. 대제목의 경우 문자와 행 사이의 간격을 줄여서 서로 떨어지지 않도록 해라. 작은 텍스트의 경우, 그 반대의 경우도 마찬가지이다. 페이지에서 숨을 쉬게 해라.

 

 

그림자 및 모서리 반경

종종 디자이너는 디자인 시스템에 그림자를 포함하지 않고 시각적 장치로 취급한다. 그러나 그림자에 대한 무모한 접근 방식은 사용자 인터페이스에서 불일치를 초래한다. 그림자는 밀도에 따라 인터페이스에 원근법을 추가하고, 시각적 계층 구조를 만들고 사용자가 필수 항목에 집중할 수 있도록 도와준다.

 

그림자에 기능적 의미를 부여해라.

- 상호 작용할 수 있는 요소에 밝은 그림자를 적용

- 대화형 요소 위로 마우스를 가져갈 때 그림자를 만든다,

- 기본 인터페이스 상단에 떠있는 요소에 그림자를 추가

- 사용자의 주의를 큰 그림자가 있는 창에 집중시켜라. 오브젝트가 클수록 그림자가 더 뚜렷해야 한다.

또한 코너 반경은 디자인 시스템으로 가져와, 크기와 기능이 다른 컴포넌트에 사용 가능하다. 작은 반경은 작은 요소, 버튼 및 입력 필드의 경우 중간 반경, 카드, 모달 및 큰 구성 요소의 경우 가장 큰 반경에 적합하다.

 

라운딩은 제품의 분위기도 설정한다. 둥근 요소는 더 친근한 느낌이 드는 반면, 각진 인터페이스는 제품에 진지한 느낌을 준다.

 

버튼 및 아이콘

버튼은 디자인 시스템에서 가장 중요한 요소 일 것이다. 사용자가 액션을 취할지 결정한다. 따라서 버튼의 모양을 통해 찾기 쉽고, 클릭할 수 있으며, 수행할 수 있는 작업이 무엇인지 명확해야 한다.

 

호버, 포커스 및 비활성과 같은 버튼 상태를 잊지 마라. 한 번 정의하고 프로덕트 전체에서 재사용해라.

 

아이콘은 일관성이 있어야 하며(예: 채우기 또는 윤곽선이 있어야 함), 선 너비와 옆에 있는 글꼴이 조화롭게 혼합되어야 한다. 아이콘의 반경, 필렛 각도에 주의를 기울이고 글꼴 선과 연관시켜라.

 

 

구성 요소들

색상, 버튼 및 글꼴과 같은 작은 독립 요소 각각의 스타일을 정의한 경우, 컴포넌트(기성품으로 구성된 블록)를 만들 수 있다. 예를 들어, 간단한 양식은 양식 헤더, 입력 필드 헤더, 입력 필드, 그 안의 텍스트 및 양식 버튼과 같은 사용 가능한 요소로 구성된다. 컴포넌트를 만드는 프로세스 자체는 글꼴 쌍의 조합을 만드는 것만큼 창의적이지는 않지만, 컴포넌트의 디자인 라이브러리를 구축하고 프로덕트의 새로운 기능 블록을 개발하는 프로세스를 크게 가속화한다.

컴포넌트는 하위 수준 구성 요소로 구성될 수 있다. 즉, 완벽하게 준비된 블록들로 구성된, 복잡한 전체 페이지를 만들 수 있다.

 

한 페이지에 컴포넌트를 배치하는 가장 쉽고 저렴한 방법은 8px의 배수로 그리드를 사용하는 것이다. 그런 다음 그들 사이의 들여 쓰기는 시스템 (8, 16, 24, 32, 48 등)에 따르고, 컴포넌트의 조화로운 구성을 만들며, 다른 페이지의 개발을 돕는다.

 

 

 

 


올바르게 해라

디자인 시스템을 만들기 위해 Sketch는 디자이너들 사이에서 인기 있는 응용 프로그램이 되었다. 스타일과 기본 심볼을 재사용할 수 있어, 디자인 시스템을 기반으로 한 디자인 워크 플로우의 속도가 빨라진다. 다음 문서에서 Sketch의 설계 시스템 구성 도구에 대해 자세히 알아볼 수 있다. 디자인 시스템 관리를 위한 스케치 도구

또한 영감을 얻기 위해 기성 디자인 시스템의 유용한 목록을 게시한다.

 

디자인 시스템은 올바르게 사용하면 유용한 도구이다. 모든 컴포넌트를 정의하는 데 조금 더 많은 시간을 투자하면, 작업 시간을 많이 절약할 수 있다. 그러나 디자인 시스템이 꼭 그 자체로 진공 상태에 있다는 생각에 얽매이지 마라. 프로덕트 팀 워크 플로우의 일부여야 한다.

 

 

 

 

-

저자 : PlantLabs Inc.
원문 링크: blog.plantapp.io/post/make-design-system-right

반응형

댓글