'디자인 토큰'에 관한 '디자인 시스템'
Token 토큰
어디서든 보편적으로 사용할 수 있으며 특화된 기능이 없는 현금 5만원권이 있다. 이 5만원 현금으로 지하철 이용권을 샀을 때(반대로 다시 현금으로 바꿀 수 있다는 가정), 이 토큰은 현금 5만원의 가치와 지하철을 탈 수 있는 특화된 기능이 추가되었다. 즉 하나의 형태에 여러가지 기능이나 정보를 담을 수 있는 개념이라 할 수 있다.
Design Token 디자인 토큰의 Digital Color
컬러, 래디우스, 스페이싱, 타이포그래피 등 대부분의 디자인 속성에서 디자인토큰 정의를 내릴 수 있다. 그 중에 디지털 컬러의 정의를 알아보고자 한다.
프로덕트 디자인 분야는 정확한 컬러를 개발자나 타부서 협업팀에 공유해야하는 경우가 많다. 몇 안되는 두세개 컬러가 엘리먼트에 적용되는 경우라면 문제가 없지만, 수십개 컬러가 수백 수천개의 엘리먼트에 적용이 된다면 관리가 어려워진다. 디자이너의 컬러칩 토큰에 대하여 알아보자.
'Toss' 어플 계좌이체 화면Q. 위 사진에서, 보내기 버튼에 사용된 색상은 뭐라고 지칭 해야할까?
1. #3182F7 2. 파란색 3. 토스 메인 컬러 4. 토스 메인 버튼 컬러
정답은 1,2,3,4번 모두 해당된다.
이 버튼은 토스 브랜드의 메인 버튼 컬러이자, 대표 메인 컬러이기도 하며, 파란색이기도 하고 일명 Hex값이라고 하는 #3182F7 이기도 하다.
1. 헥스값은 가장 보편적으로 사용되는 공유 코드값 개념이다. 이외에도 RGB, CMIK 등 컬러 그 자체 고유 가치 값을 정의하는 표현을 Core Value 라고 한다. Core Value 는 정확한 값을 공유하고 사용하는데 굉장히 특화되어 있다. 하지만 컴퓨터 스포이드로 입력해보지 않는 이상 명칭만으로는 색상과 용도 확인이 어렵다는 단점이 있다.
2. 50~900 단계로 컬러 스펙트럼을 통해 색상을 표현하는 것을 Primitive(프리미티브) or Glrobal(글로벌)이라고 한다. 보내기 버튼의 색상을 '블루 500' 이라고 명칭했을때, 파란색의 중간정도 명도를 사용했다는 대략적인 실제 색상이나 밝기를 유추할 수 있는 장점이 있다. 그러나 헥스값과 같은 정확한 컬러값을 알 수 없다는 단점이 있다,
3. 일반적으로 브랜드를 대표하는 컬러를 Primary Color(프라이머리 컬러) 라고 한다. 즉 의미를 표현하는 컬러라고 할 수 있으며, 이러한 네이밍 규칙을 Semantic 이라고 한다. 의미나 의도를 명확하게 전달하고자 하지만 코어밸류나 프리미티브와 다르게 색상의 이름과 용도를 알 수 없다.
4. 메인 버튼 색상의 경우, 명확하게 사용처를 알려준다. 이런 네이밍을 Component(컴포넌트)라고 한다. 자주 사용되는 디자인을 컴포넌트로 만들어 놓고 자주 꺼내 쓴다고 이해하면 된다. 자주 사용되는 색상 값도 미리 이름을 지정해서 적용할 수 있다. 그러므로 Button Primary 라고 명칭할 수 있으며 버튼에 사용하는 메인 컬러구나 라는 용도를 분명히 알 수 있다는 특징이 있다. 또한 버튼들의 컬러만 변경해야하는 이슈가 생겼을 때 Button Primary 명칭의 컬러칩만 변경하면 되므로 대응에 순조롭다. 반면 명칭만으로는 정확한 컬러값, 색상이름을 알 수 없다.
1 -> 2 -> 3 -> 4 로 원래의 가치에 기능을 붙이는 작업을 토크나 라고 한다.
But,
이러한 네이밍이 구조적으로는 좋은 네이밍 이지만, 관리가 어렵다는 문제도 있다. 개인단위의 작업이나 소규모 작업에는 관리부분에 큰 이슈가 없지만, 회사단위나 큰 프로젝트, 오랫동안 유지 보수를 해야하는 프로젝트에서는 제작 후 관리하는 부분에서 어려움이 있다. 고객의 니즈를 반영하여 기존 기능이나 디자인을 개선하고 유지 보수 관리를 해야하는 부분이 많다.
'Design System 디자인 시스템'
이런 부분들을 효과적으로 관리하고자 시행되고 있는 '디자인 시스템' 이라는 개념이 새로 자리 잡았다.
디자인 시스템은 프로젝트가 아닙니다. 제품을 제공하는 제품입니다. - Nathan Curtis, EightShapes -
- 서비스의 목적에 맞게 일관된 패턴과 규칙을 구성하는 언어이다. 일종의 레고 세트라고 볼 수 있다.
- 디자인의 원칙, 규격, 쉽게 재사용 할 수 있는 UI패턴과 컴포넌트, 코드를 포괄한다.
- 회사마다 각자 대표하는 디자인을 시스템화 하여 문서 가이드를 만든다.
⇣⇣⇣⇣⇣
- 다양한 제품에 대응 (Design at Scale) : 대규모 디자인 및 개발작업을 신속하게 만들고 복제할 수 있다.
- 효율성 확보 (Efficiency) : 설계 리소스에 대한 부담을 덜어주어 더 크고 복잡한 문제에 집중할 수 있도록 해준다. 정보 우선순위 지정, 워크플로우 최적화 및 여정 관리에 더 집중하도록!
- 협업에 기여 (Collaboration) : 팀원들과, 타부서 팀들과 언어 통일이 가능하다. 잘못된 커뮤니케이션으로 낭비되는 시간을 줄여준다.
- 일관성 있는 사용자 경험 (UX Consistency) : 제품간의 시각적인 일관성을 유지해 준다. 같은 생태계의 일부처럼 보이게 하는 것. 추가로 시각적 리브랜딩이나 재설계에 있어 대규모로 관리할 수 있다.
마치며,
코딩의 오픈소스 개발이 표준으로 자리 잡은 것과 같이 디자인도 유사한 양상을 보이고 있다. 다양한 기업에서 디자인 시스템을 누구에게나 공개하여 창작의 자유를 장려하고 쉽고 빠르게 학습하는데 도움을 주고 있다. 개발 문화가 혁신하고 있는 것처럼 디자인 또한 다양한 측면에서 혁신을 시도하고 있다. 이러한 모습이 앞으로 미래에 어떻게 변화를 가져올지 지켜봐야 하지만, 더 많은 창작의 자유와 사고의 확장, 궁극적으로 더 좋은 사용자 경험을 만들 수 있는 환경으로 진화하고 있다는 것은 확실한 사실이다.
