II-32.디자인 토큰 활용과 코드 관리, 디자인 토큰을 CSS 변수, iOS Android 코드로 변환

II-32. 디자인 토큰 활용과 코드 관리

디자인 토큰은 디자인 시스템에서 중요한 구성 요소로, 디자인의 일관성을 보장하고 개발 및 디자인 팀 간의 협업을 원활하게 합니다. 이 강좌에서는 디자인 토큰의 개념을 이해하고, 이를 CSS 변수와 iOS, Android 코드로 변환하여 활용하는 방법을 알아보겠습니다. 구체적인 사례와 함께 단계별로 진행하겠습니다.

디자인 토큰의 정의

디자인 토큰은 색상, 타이포그래피, 간격 등의 디자인 요소를 코드 기반으로 정의한 것입니다. 이는 다양한 플랫폼과 기술 스택에서도 일관된 디자인을 유지할 수 있도록 도와줍니다. 디자인 토큰은 다음과 같은 몇 가지 장점이 있습니다:

일관성 보장: 디자인 토큰을 사용하면 동일한 디자인 언어를 유지할 수 있어 사용자의 경험이 일관되게 나타납니다.
재사용성: 디자인 구성 요소를 독립적으로 관리할 수 있어 재사용성이 높아집니다.
협업 개선: 개발자와 디자이너 간의 의사소통이 원활해져 프로젝트 효율이 증가합니다.
유지보수 용이: 디자인 변경 시, 한 곳에서 수정하면 모든 관련 요소에 자동으로 반영됩니다.

디자인 토큰의 프로세스

디자인 토큰의 프로세스를 다음과 같이 나눌 수 있습니다:

디자인 자산 정의: 색상 팔레트, 타이포그래피, 간격 등을 정의합니다.
디자인 토큰 생성: 다양한 플랫폼 및 프레임워크에 맞춰 디자인 토큰을 생성합니다.
코드 변환: CSS 변수, iOS, Android 코드 등으로 변환합니다.
코드 관리: 디자인 토큰을 중앙집중화하고 변경 관리를 합니다.

디자인 자산 정의

디자인 자산은 주로 다음과 같은 요소들로 구성됩니다:

색상: 브랜드의 아이덴티티를 반영하는 색상 팔레트.
타이포그래피: 글꼴 스타일, 크기, 두께 등을 포함.
간격: 요소 간의 여백 및 패딩.
아이콘: UI 구성 요소에 필요한 아이콘 세트.

예시: 색상 정의


{
  "color": {
    "primary": "#3498db",
    "secondary": "#2ecc71",
    "background": "#ffffff",
    "text": "#34495e"
  }
}

디자인 토큰 생성

디자인 토큰이 정의되면, 이를 실제 코드로 변환합니다. Figma와 같은 디자인 툴을 사용하여 디자인 토큰을 쉽게 생성할 수 있습니다.

Figma DevMode로 디자인 토큰 생성하기

Figma DevMode를 활성화하면 디자인 요소를 선택하고, 그 속성을 탐색하여 토큰으로 변환할 수 있습니다. 디자인 요소를 마우스 오른쪽 버튼으로 클릭하면 “Copy as CSS” 옵션이 나타나는데, 이를 통해 CSS 변수를 바로 생성할 수 있습니다.

예시: CSS 변수 생성


:root {
  --color-primary: #3498db;
  --color-secondary: #2ecc71;
  --color-background: #ffffff;
  --color-text: #34495e;
}

토큰 관리 및 코드 변환

디자인 토큰이 생성되면, 이를 중앙에서 관리하고 다양한 플랫폼에 맞춰 변환해야 합니다. 이를 위해 다음과 같은 도구와 방법을 활용할 수 있습니다:

Style Dictionary: 디자인 토큰을 생성하고 관리하는 오픈 소스 도구입니다. 이 도구를 사용하면 JSON 형식으로 정의한 디자인 토큰을 다양한 플랫폼에 맞게 변환할 수 있습니다.
PostCSS: CSS 변수를 포함하는 코드를 분석하고 변환하는 도구입니다.
Figma API: Figma 디자인 파일에서 자동으로 디자인 토큰을 추출하는 데 사용할 수 있는 API입니다.

Style Dictionary를 사용한 코드 변환

Style Dictionary를 사용하여 디자인 토큰을 iOS 및 Android 코드로 변환하는 과정은 다음과 같습니다:

디자인 토큰을 JSON 파일로 정의합니다.
Style Dictionary를 설치하고, JSON 파일을 기반으로 설정 파일을 작성합니다.
토큰을 원하는 형식으로 변환합니다.

예시: JSON 파일 생성


{
  "colors": {
    "primary": {
      "value": "#3498db"
    },
    "secondary": {
      "value": "#2ecc71"
    }
  }
}

Style Dictionary 설정 파일


module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    ios: {
      transformGroup: 'ios',
      buildPath: 'build/ios/',
      files: [{
        destination: 'Colors.swift',
        format: 'ios/colors.swift'
      }]
    },
    android: {
      transformGroup: 'android',
      buildPath: 'build/android/',
      files: [{
        destination: 'colors.xml',
        format: 'android/colors.xml'
      }]
    }
  }
};

디자인 토큰을 iOS/Android 코드로 변환

디자인 토큰을 변환한 후, iOS와 Android에서 각각 사용하는 코드가 생성됩니다. 이는 각 플랫폼에서 쉽게 사용할 수 있도록 하며, 팀 간의 일관성을 높이는 데 기여합니다.

iOS 코드 예시


import UIKit

extension UIColor {
    static let primary = UIColor(hex: "#3498db")
    static let secondary = UIColor(hex: "#2ecc71")
}

Android 코드 예시



    #3498db
    #2ecc71

결론

디자인 토큰은 현대의 디자인 시스템에서 없어서는 안 될 중요한 요소입니다. 이를 통해 디자인의 일관성을 유지하고, 개발과 디자인 간의 협업이 한층 원활해집니다. Figma DevMode와 Style Dictionary와 같은 도구를 활용해 디자인 토큰을 관리하고, CSS 변수 및 iOS/Android 코드로 변환함으로써 실질적인 효과를 얻을 수 있습니다. 이를 통해 생산성과 효율성을 한층 높일 수 있습니다.