[240120] 디자인 시스템 삽질 기록 - (1) 디자인 토큰

당근에서 진행한 세션을 참고해 디자인 시스템을 구축하는 과정을 적었습니다.

 

졸업프로젝트 기획을 시작했다. PC 웹 + 모바일 웹 + iOS 앱 디자인이 필요하다.

 

그런데 어떻게 각각의 플랫폼에서 UI 컴포넌트를 일관성 있게 구성할 수 있을까? 또 어떻게 우리 서비스의 PC버전에 익숙한 사람들이 모바일을 접했을 때, 혹은 반대의 경우에 어색하지 않도록 일관된 UX를 설계할 수 있을까?

 

지금까지는 네이밍 통일을 통해 피그마의 디자인 시스템을 그대로 코드로 옮기는 식으로 구성을 했었으나, 디자인을 바꾸게 된다면 어떻게 될까? 웹개발자(나)와 iOS 개발자 모두 자신의 코드를 수정해야 한다. 우리끼리 같은 디자인을 공유한다고 믿을 수 있을까...?

 

디자인 시스템의 필요성이 느껴지는 순간이었다. 어차피 디자인부터 웹개발까지 내가 해야하는 거, 이번 기회에 제대로 구축해 봐야겠다고 생각했다.

 

 

---

 

디자인 토큰

1. 의사결정은 시간에 따라 변하는 것이 당연하다.
2. 의사결정을 가장 빠르게 모든 제품에 반영하는 방법은 무엇일까?
3. 의사결정을 기계가 읽을 수 있는 방식으로 인코딩하는 것이다.

 

 

 

디자인 토큰은 디자인 결정을 인코딩한다

값을 인코딩

의도를 인코딩

맥락

• prefers-color-scheme (라이트모드/다크모드)
• prefers-reduced-motion
• iOS/Android 시스템 폰트에 따른 typography 조정

 

 

 

계층과 DSL

• DSL: 특정 도메인에 특화된 언어
• (맥락) → 의도 → 값 → Raw Value
• $scale.color(light).carrot-500 → #ff6f0f

 

 

 

Figma Variables

1. 변수 구성

2. 컴포넌트 배포 시 액션 트리거 웹훅 추가

3. 디자인 토큰 → 코드

 

 

 

시멘틱 토큰

1. 대부분의 시멘틱 토큰은 미리 정의할 필요가 없다.
2. 어떻게 시멘틱 토큰을 잘 추상화할 수 있을까?
   • 여러 컴포넌트를 관찰하고, 사용사례를 많이 갖고 있는 교집합 찾아내어 의도 추출하기
   • (ex. 여러 input의 background color)

 

 

---

 

졸업프로젝트에 도입할 내용들

[디자인]

1. 섣부르게 시멘틱 토큰을 정의하지 말고, 일단 의미를 배제하고 색상만으로 디자인해보자.

 

2. 나만의 규칙을 만들어보자. 메인 기능에 필요한 토큰들은

• 혼잡도를 구분할 컬러세트
• 혼잡도 컬러가 튀는만큼, 메인 컬러를 톤이 사알짝 들어간 무채색으로 가져가면서 위계 설정
• 라이트모드/다크모드를 고려한 컬러세트
• 애니메이션 -> Figma Variables로 가능할까?
• 폰트 -> PC와 모바일을 어떻게 구분할까?

 

3. 전체 UI가 나왔을 때, UI를 관찰하고 꼭 필요한 부분에는 의미를 부여하자.

 

[개발]

1. 컴포넌트 배포 시 액션 트리거 웹훅 (Figma에서 연동된 디자인이 FE에 바로 적용되도록) 추가하는 법!

 

1-1. 과제로 제출했던 피그마 디자인 일부이다. 연습하려고 화면 하나만 떼어왔다. font, color 등을 variable로 관리하면 된다. variable 위계 관리에 대해서는 더 알아봐야겠다.

 

1-2. 아래 플러그인에 깃허브 토큰과 레포지토리를 연결한다.

 

1-3. 그러면 내가 지정한 폴더에 아래와 같은 json 파일을 피그마에서 push 할 수 있다. CI/CD까지 해주면 좋을 것 같다.

{
  "colors/light": {
    "black": {
      "value": "#353535",
      "type": "color",
      "parent": "Variable collection/Mode 1",
      "description": ""
    },
    "white": {
      "value": "#ffffff",
      "type": "color",
      "parent": "Variable collection/Mode 1",
      "description": ""
    },
    /* ... */
  },
  "$themes": [],
  "$metadata": {
    "tokenSetOrder": [
      "colors/light"
    ]
  }
}

 

1-4. 그런데 나한테 필요한 value값 외에 쓸데없는게 너무 많다... json객체를 가공해서 colors객체를 만들어 export했는데, 더 좋은 방법이 있는지 찾아봐야겠다. 이를 자동화하는 라이브러리의 도입이 그럴만한 가치가 있는지도 따져보면 좋을 것 같다.

 

2. 폴더구조에 대한 고민이 필요하다.

 

 

 

참고자료

프론트엔드에 디자인 시스템 적용하기