색상, 공간 및 타이포그래피는 단단한 디자인 시스템을 위한 기본 구성요소이다. 브랜드를 만들 때 중점을 두어야 할 특유의 시각적 요소이기도 하다. 우리는 오늘 먼저 해야 할 일에 대해 알아볼 것이다.
디자인 시스템
디자인 시스템의 이점은 수많은 기사와 콘텐츠를 통해 야기되어 왔다. 만약 당신이 소규모 스타트업이나 대기업에 있다면 디자인 시스템을 구축하는 게 좋을 것이다. 디자인 시스템은 프로덕트와 브랜드의 구성요소를 관리하면서 진화하는 규칙세트이다. 또한, 디바이스와 플랫폼 전반에서 일관적이고 응집력 있는 시각적 경험을 구축하고, 디자인 작업을 하나로 집중화하여 통합시킨다.
"디자인 시스템은 확장할 수 있고 지속 가능한 방식으로 디자인을 위한 구성 요소를 출력하는 체계적인 접근법이다” - 쉐인 윌리엄스(Shane Williams)
나는 왜 당신이 디자인 시스템을 사용하고 만들어야 하는지 당신에게 설득하려고 하지는 않을 것이다. 이미 이에 대한 기사들이 많기 때문이다. 나는 당신이 기반을 마련했을 때 어디부터 시작하고 어디에 초점을 둘 지에 대한 실질적인 조언을 할 것이다.
하지만 우선 첫 번째는..
디자인 토큰
시작하기 전에 디자인 토큰의 사용 원리는 꼭 이해해야 할 중요한 개념이다. 디자인 토큰은 색상, 애니메이션, 간격, 글꼴, 그림자 등과 같은 것을 설명하는 디자인 관련 변수를 저장하는 데 사용하는 기본 요소이다.
"디자인 토큰은 디자인 시스템의 시각적 디자인 요소이다. 구체적으로 시각적 디자인 특성을 저장하는 존재라고 불린다. UI 개발을 위한 확장 가능하고 일관된 시각적 시스템을 유지하기 위해 하드 코딩된 값 [...] 대신 사용한다. “- 세일즈포스(Salesforce)
루이 첸아스(Louis Chenais)는 그의 글 “더미를 위한 디자인 토큰” 에서 토큰에 관해 설명했다.
또 다른 기사에서 티볼트 마흐에(Thibault Mahé)는 디자인 토큰에 대해 이야기했다. 그는 디자인 토큰은 디자인 시스템의 협업 및 유지 보수성을 촉진한다고 말하면서
이 주제에 관해 훌륭하게 발표했다.
들어가기 전에 디자인 토큰의 개념을 이해해야 한다. 이는 디자인 시스템 전체의 기본 구성 요소가 될 것이다.
원칙
좋은 디자인은 원칙에 달려 있다. 원칙은 디자인 시스템에 접근할 때 준수해야 할 지침 역할을 한다. 먼저 접근하기 위한 원칙을 정하라. 이는 모호함을 조명하고 디자인 시스템을 구축할 때 내리는 결정을 가이드해 줄 것이다.
“디자인 원칙은 어떤 소프트웨어든 어플리케이션의 가이드가 된다. 이는 고객, 동료 및 팀 구성원을 포함한 다양한 이해 관계자에게 제품의 주요 특징을 정의하고 전달한다. 디자인 원칙은 모든 의사결정을 할 수 있는 근본적인 목표로 명시함으로써, 프로젝트 각각을 통합된 전체로 진행할 수 있도록 한다.” - 루크 루블루프스키(Luke Wroblewski)
지향하는 목표
모든 디자인 시스템은 당신이 만든 전체 시스템을 관리하는 데 도움이 되는 이 세 가지 목표를 지향해야 한다.
쉽게 이해하고 적용할 수 있는 의미 명명 규칙
디자이너와 개발자 협업 - 디자이너가 혼자 작업한다면 디자인 시스템은 단순히 멋진 UI 스티커 시트로만 남을 것이다. 개발자가 디자인을 일괄적으로 구축하기 위해서 디자인 시스템을 활용할 수 있도록 디자인 시스템은 코드로 구현되어야한다.
전체를 수정하지 않아도 된다. 토큰으로 부터 중요한 가치와 컨셉을 뽑아내자. 이것은 추후에 수정사항이 생겼을 때, 토큰 전체를 바꾸지 않고 일부분만 수정할 수 있는 유연함을 준다.
이제 시작해보자
디자인 시스템을 구축하는 데 중점을 두는 세 가지 주요 영역은 색상, 공간 및 타이포그래피이다. 이러한 요소들을 정의하면, 당신의 브랜드를 독특하고, 인지할 수 있고, 유일무이하게 만드는 토대가 마련될 것이다.
다음 시간에는 시스템 확장을 위한 다른 요소들을 살펴보겠다.
