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