모든 ui요소의 기본 구성요소로 하드코딩된 값 대신 디자인 토큰을 사용
구글 머티리얼 디자인
- 디자인 토큰에 대해서 공부하다보니 구글 머티리얼이나 다른 디자인 소스에서 해당 디자인에 대한 철학이 아니라 전반적인 디자인 시스템에 대한 일반적인 철학도 많이 있어서 정리하면 좋을듯하여 정리!
- 머티리얼 디자인에서 설명하는 디자인 토큰→ 머티리얼 디자인의 디자인 토큰은 크게 이름과 값 부분으로 구성된다.
- 이름 (name) : 코드에서 나올 법한 이름을 가진다.
- ex ) md.ref.palette.secondary90 → 이름은 마침표로 구분되어 여러 부분으로 나뉠 수 있다
- 해당 이름과 관련된 값!
- ex) #E8DEF8 → 해당 이름에 대응되는 값으로 특정 색상을 나타내는 hex코드가 대표적인 예이다.
- 특정 스타일에 변경이 있을 시에 해당 이름들에 적용된 스타일값을 변경하면 해당 이름이 적용된 모든 대상들에 변경이 일어나게 되는 시스템!
- 해당 스타일의 이름 그리고 이 이름들의 시스템이라고 보여진다.
- 디자인 패턴은 결국 재사용성을 높여 확장/유지보수가 편리하게 해주는데 이러한 점을 디자인에 적용하여 디자인을 단순히 독립적인 요소들의 결합이 아니라 하나의 시스템으로 변환시켜 디자인 패턴과 마찬가지로 확장/유지보수의 편의성을 높여주는구나.
- → 디자인 토큰은 작고 반복되는 디자인 결정을 의미한다. 이러한 결정들은 디자인 시스템의 시각적인 스타일을 나타낸다.
디자인 토큰이 중요한 이유single source of truth, SSOT
- “Tokens enable a design system to have a single source of truth. They provide a kind of repository for recording and tracking style choices and changes.” - 위키피디아
모든 데이터에 대해 하나의 출처를 사용한다는 개념조금 더 나의 생각을 붙여본다면 프로그램에서 발생되는 모든 컴포넌트나 인스턴스들을 파라미터로 데이터를 받게 된다.
이때 받게 되는게 데이터가 변형되어서 들어오기도 하지만 결국 같은 소스의 데이터를 변형시켜서 들어오는 것이다.
그리고 이런 데이터의 전달은 하나의 컴포넌트로만 그리고 하나의 뎁스가 아니라 여러 컴포넌트로 대층적으로 전달될 수 있게된다.
이렇게 여러 방면으로 데이터가 전달되지만 결국에 이렇게 변형된 데이터들의 출처를 타고 들어가다보면 결국 하나의 소스가 된다는 개념!그리고 이 시스템은 일종에 디자인에 대한 결정이나 변경사항을 저장하고 식별할 수 있게 해준다.
다시 디자인 토큰으로 돌아와서 디자인 토큰이 결국 디자인 시스템이 SSOT가 가능하도록 해준다고 한다.
모든 데이터가 하나의 출처를 사용한다는 개념이 모호할 수 있는데 데이터가 위치한 다른 모든 곳들은 단지 으뜸되는 "진실 공급원"의 위치를 참조하기만 하므로,
으뜸되는 위치의 데이터 요소를 갱신하면 수정 사항 반영을 빠뜨릴 데이터의 사본이 존재할 가능성 없이 시스템 전체에 전파되게 된다.
피그마의 베리어블
: 피그마에서 디자인 토큰을 구현하기 위한 요소!
피그마는 디자인 토큰을 구현하고 이를 통해서 시스템을 만들다
그리고 이렇게 만들어진 시스템은 단순히 디자인에서만 사용되는게 아니라
파그마를 통해서 json파일로 추출하여 다양한 어플리케이션이나 디바이스에서 동일한 소스로 사용이 가능하다!
피그마에서 디자인 토큰을 구현하는 기능이 variable이다!
하지만 현재로써는 베리어블은 다양한 디자인 요소 중에 몇 가지만 포함한다.
(색상, 공간, 숫자, 문자, 둥근정도, 참/거짓)
하지만 이것만으로도 많은 불필요한 접근을 줄일 수 있다고 보인다.
다른 요소들은 컴포넌트나 템플릿등의 다른 단위에서 처리하면 될듯하다.
어쩌면 다양한 요소들을 넣지 않는건 의도일 수도 있어보인다.
위의 요소들은 값이 숫자거나 직관적으로 다가오지 않기에 이렇게 처리하는 것일 수도 있어보인다.