사이드 프로젝트 시작 D-1

우디님의 스레드 글을 필기함

 

 

"디자인을 더 효율적으로 구조화하는 것"

 

 

이번 사이드 프로젝트의 목표는 '내가 효율적인 디자인시스템을 설계할 능력이 있다'를 증명하는 것이다.

 

여기서 효율적이라는 것은 기획자, 개발자와 협업을 할 때

1. 디자인 일관성이 유지되고

2. 중복 작업이 없이

3. 소통이 원활하게 진행되는 것 = 의사소통 비용이 적게 드는 것

 

특히 이번 프로젝트는 출시 이후 개선까지가 목표이기 때문에 효율적인 디자인시스템이 매우 중요하다.

 

그렇다면 우선 기존의 기업들은 어떤 식으로 디자인시스템을 구축하고 운영하고 있는지 분석해야 한다.

흔히 보던 디자인 토큰화, 문서화, 변수 체계 정립, 더 나아가 JSON 변환 자동화까지 

 

 

-

 

 

바로 디자인시스템을 분석하기 전, 개념을 먼저 정리하고 가려고 한다.

사실 구글 Material Design을 보고 뭐가 뭔지 모르겠어서 창을 껐다. 심각하다.

 

 

디자인시스템에 대해 여러 인사이트를 찾아보면서 가장 많이 봤던 단어,

토큰화

 

토큰 = 디자인시스템에서 반복적으로 사용되는 디자인 속성을 효율적으로 관리하기 위해 추상화된 값을 변수로 정의한 코드 

출처: KRDS

 

'토큰화' 한다는 건 추상화된 값을 변수로 치환해 코드로 만든다는 것

 

코드를 효율적으로 관리하기 위해 기본 스타일을 지정하는 Primitive token,

거기에 상태나 역할을 지정하는 Semantic token,

그리고 특정 컴포넌트를 사용하기 위한 Component token 으로 나눌 수 있고 각 토큰의 범위는 아래와 같다.

 

KRDS의 설명을 바탕으로 만들었음

 

 

 

디자인 토큰을 이해하는 데에 가장 도움이 되었던 글과 영상

 

https://www.krds.go.kr/html/site/style/style_07.html

디자인 토큰(Design Token) | 스타일 가이드 - KRDS

https://www.youtube.com/watch?v=IN0a_3c1vJs

 

 

https://www.youtube.com/watch?v=i795wrODuD4

 

 

 

그래서 이걸 어떻게 지정해야 하는데? > 동료랑 합의하세요.

 

디자인 토큰을 다룰 때 제일 중요한 건 동료와의 합의라고 한다.

같은 토큰으로 작업할 개발자와 함께 소통을 하며 토큰을 잡아가면 될 것 같다.

 

 

내일은 구글 Material Design 을 분석하며 네이밍에 대한 감을 잡으려고 한다.

 

 

 

-

 

 

프로젝트를 마무리할 때면 

효율에 미친 디자이너가 되어 있고 싶다.