Design + 읽을
해외 디자인 아티클 번역 뉴스레터, 읽는 디자인 디독

같이 읽고 싶은 친구가 떠오른다면
😍구독링크 복사해서 공유하기😍
http://bit.ly/2FNQNpv

디자인 시스템 구축하기 1부 : 준비
색상, 공간 및 타이포그래피는 단단한 디자인 시스템을 위한 기본 구성요소이다. 브랜드를 만들 때 중점을 두어야 할 특유의 시각적 요소이기도 하다. 우리는 오늘 먼저 해야 할 일에 대해 알아볼 것이다.

우리가 다루는 것
1부 - 먼저 해야 할 일
2부 - 컬러
3부 - 크기와 간격
4부 - 타이포그래피
5부 - 보너스 요소들


디자인 시스템
디자인 시스템의 이점은 수많은 기사와 콘텐츠를 통해 야기되어 왔다. 만약 당신이 소규모 스타트업이나 대기업에 있다면 디자인 시스템을 구축하는 게 좋을 것이다. 디자인 시스템은 프로덕트와 브랜드의 구성요소를 관리하면서 진화하는 규칙세트이다. 또한, 디바이스와 플랫폼 전반에서 일관적이고 응집력 있는 시각적 경험을 구축하고, 디자인 작업을 하나로 집중화하여 통합시킨다. 

"디자인 시스템은 확장할 수 있고 지속 가능한 방식으로 디자인을 위한 구성 요소를 출력하는 체계적인 접근법이다” - 쉐인 윌리엄스(Shane Williams)

나는 왜 당신이 디자인 시스템을 사용하고 만들어야 하는지 당신에게 설득하려고 하지는 않을 것이다. 이미 이에 대한 기사들이 많기 때문이다. 나는 당신이 기반을 마련했을 때 어디부터 시작하고 어디에 초점을 둘 지에 대한 실질적인 조언을 할 것이다.

하지만 우선 첫 번째는..
디자인 토큰
시작하기 전에 디자인 토큰의 사용 원리는 꼭 이해해야 할 중요한 개념이다. 디자인 토큰은 색상, 애니메이션, 간격, 글꼴, 그림자 등과 같은 것을 설명하는 디자인 관련 변수를 저장하는 데 사용하는 기본 요소이다.

"디자인 토큰은 디자인 시스템의 시각적 디자인 요소이다. 구체적으로 시각적 디자인 특성을 저장하는 존재라고 불린다. UI 개발을 위한 확장 가능하고 일관된 시각적 시스템을 유지하기 위해 하드 코딩된 값 [...] 대신 사용한다. “- 세일즈포스(Salesforce)

네이선 커티스 (Nathan Curtis)는 자신의 기사에서 토큰을 훌륭하게 설명한다. 디자인 시스템의 토큰 - 모든 사람을 위한 디자인 결정을 설계 및 구현하기 위한 10가지 팁

루이 첸아스(Louis Chenais)는 그의 글 “더미를 위한 디자인 토큰” 에서 토큰에 관해 설명했다.

또 다른 기사에서 티볼트 마흐에(Thibault Mahé)는 디자인 토큰에 대해 이야기했다. 그는 디자인 토큰은 디자인 시스템의 협업 및 유지 보수성을 촉진한다고 말하면서 이 주제에 관해 훌륭하게 발표했다. 

들어가기 전에 디자인 토큰의 개념을 이해해야 한다. 이는 디자인 시스템 전체의 기본 구성 요소가 될 것이다.

원칙
좋은 디자인은 원칙에 달려 있다. 원칙은 디자인 시스템에 접근할 때 준수해야 할 지침 역할을 한다. 먼저 접근하기 위한 원칙을 정하라. 이는 모호함을 조명하고 디자인 시스템을 구축할 때 내리는 결정을 가이드해 줄 것이다.

‘브랜드 디자인 원칙 정의 및 가이드 방법’은 좋은 출발점이며, 프로세스를 통해서 당신을 가이드해 줄 것이다.

“디자인 원칙은 어떤 소프트웨어든 어플리케이션의 가이드가 된다. 이는 고객, 동료 및 팀 구성원을 포함한 다양한 이해 관계자에게 제품의 주요 특징을 정의하고 전달한다. 디자인 원칙은 모든 의사결정을 할 수 있는 근본적인 목표로 명시함으로써, 프로젝트 각각을 통합된 전체로 진행할 수 있도록 한다.” - 루크 루블루프스키(Luke Wroblewski)

지향하는 목표
모든 디자인 시스템은 당신이 만든 전체 시스템을 관리하는 데 도움이 되는 이 세 가지 목표를 지향해야 한다.

  1. 쉽게 이해하고 적용할 수 있는 의미 명명 규칙
  2. 디자이너와 개발자 협업 - 디자이너가 혼자 작업한다면 디자인 시스템은 단순히 멋진 UI 스티커 시트로만 남을 것이다.  개발자가 디자인을 일괄적으로 구축하기 위해서 디자인 시스템을 활용할 수 있도록 디자인 시스템은 코드로 구현되어야한다.
  3. 전체를 수정하지 않아도 된다.  토큰으로 부터 중요한 가치와 컨셉을 뽑아내자. 이것은 추후에 수정사항이 생겼을 때, 토큰 전체를 바꾸지 않고 일부분만 수정할 수 있는 유연함을 준다.

이제 시작해보자
디자인 시스템을 구축하는 데 중점을 두는 세 가지 주요 영역색상, 공간 및 타이포그래피이다. 이러한 요소들을 정의하면, 당신의 브랜드를 독특하고, 인지할 수 있고, 유일무이하게 만드는 토대가 마련될 것이다.

다음 시간에는 시스템 확장을 위한 다른 요소들을 살펴보겠다.

저자 : Shane P Williams
원문 링크: https://uxdesign.cc/building-a-design-system-where-to-start-part-1-first-things-first-57577153ae2d
*무단 전재 및 재배포 금지(링크 공유 가능)

[2019.08.22] 
디자인 시스템을 효율적으로 구축하는 법에 대해 총 5편에 걸쳐 발행하고자 합니다. 오늘은 구축에 앞서 먼저 해야할 일과 왜 하는지에 대해 알아봤는데요, 나머지 아티클 번역본도 기대해주세요!

[디독 도네이션 OPEN] 

오늘 읽으신 아티클이 마음에 드셨다면, 작은 금액이라도 디독의 서비스 유지를 위해 후원해주시면 감사하겠습니다. :)

카카오뱅크 3333 123 7696 03 (김강령)

*후원해주신 금액은 전액 서비스 운영(메일 발송 솔루션 비용)에 사용됩니다.
*후원자(입금자명) 리스트 기입을 원하지 않으시는 분은 메일로 말씀해주세요.


7월 후원해주신 분들
김영석, 김혜연, 박철순, 이주임, 임용태, 구보명, 유동현, 성수진, 구재환, 유신애, 이은우, 홍순기, 이도후, 임종헌, 김규범, 김주양, 조용준, 김지연, 김민주, 박지현, 박은지, 이수연, 조은하, 박상욱, 김하연, 임주희, 홍기현, 하현우, 송지은, 고애리, 유가은, 박주현, 임준평, 장윤선 외 19분 

후원해주신 분들, 정말 감사합니다! 덕분에 서비스를 유지할 수 있게 되었습니다. :)
피드백은 d.dok.newsletter@gmail.com 으로 남겨주세요. 추천하고 싶은 영문 아티클 역시 링크를 남겨주시면 검토 후 번역하여 보내드립니다.
디독
d.dok.newsletter@gmail.com
- -
수신거부 Unsubscribe