크로스 플랫폼 디자인 시스템: 웹·iOS·Android를 하나의 토큰으로

UX 디자인

크로스 플랫폼디자인 시스템Design TokenStyle Dictionary멀티 플랫폼

이 글은 누구를 위한 것인가

  • 웹팀과 앱팀이 다른 색상과 간격을 쓰는 조직
  • 디자인 토큰을 하나 바꾸면 웹·앱에 자동 반영되게 하고 싶은 팀
  • 크로스 플랫폼 디자인 시스템을 처음 도입하는 팀

들어가며

웹에서는 #FF4B2B, iOS에서는 UIColor(red: 1.0, green: 0.29, blue: 0.17), Android에서는 #FF4B2B가 모두 같은 색인데 세 곳에 따로 관리된다. 디자인 토큰 하나로 세 플랫폼을 동시에 업데이트하는 것이 목표다.

이 글은 bluefoxdev.kr의 멀티 플랫폼 디자인 시스템 가이드 를 참고하여 작성했습니다.

1. 크로스 플랫폼 토큰 전략

[플랫폼별 디자인 차이점]

색상:
  공통 → 동일하게 적용 가능

타이포그래피:
  웹: px 단위, Pretendard 폰트
  iOS: pt 단위, SF Pro 폰트 (시스템 폰트)
  Android: sp 단위, Noto Sans (시스템 폰트)
  → Base Scale 공유, 단위와 폰트는 플랫폼별 변환

간격 (Spacing):
  4px 기반 배수: 4, 8, 12, 16, 24, 32
  → 공통 scale, 플랫폼별 dp/pt로 변환

모서리 반경:
  공통 적용 가능 (픽셀 단위 동일)

그림자:
  웹: box-shadow
  iOS: shadow* 속성
  Android: elevation
  → 유사한 시각적 결과지만 구현이 다름

[공유 범위]
  100% 공유: 색상, 간격 스케일, 타이포 크기 비율
  50% 공유: 모서리, 애니메이션 속도
  플랫폼별: 폰트, 그림자, 네이티브 패턴

2. Style Dictionary 멀티 플랫폼 빌드

// style-dictionary.config.js
const StyleDictionary = require("style-dictionary");

// 커스텀 변환: px → pt (iOS)
StyleDictionary.registerTransform({
  name: "size/ios-pt",
  type: "value",
  matcher: (token) => token.attributes.category === "size",
  transformer: (token) => `${token.value}`, // iOS는 비율 동일
});

// 커스텀 변환: px → sp (Android)
StyleDictionary.registerTransform({
  name: "size/android-sp",
  type: "value",
  matcher: (token) => token.attributes.category === "fontSize",
  transformer: (token) => `${token.value}sp`,
});

module.exports = {
  source: ["tokens/**/*.json"],
  platforms: {
    // 웹 CSS
    css: {
      transformGroup: "css",
      buildPath: "dist/web/",
      files: [{
        destination: "tokens.css",
        format: "css/variables",
        options: { outputReferences: true },
      }],
    },
    
    // iOS Swift
    ios: {
      transformGroup: "ios-swift",
      buildPath: "dist/ios/",
      files: [{
        destination: "DesignTokens.swift",
        format: "ios-swift/class.swift",
        className: "DesignTokens",
        filter: (token) => token.attributes.category !== "font",
      }],
    },
    
    // Android XML
    android: {
      transformGroup: "android",
      buildPath: "dist/android/",
      files: [
        {
          destination: "colors.xml",
          format: "android/colors",
          filter: { attributes: { category: "color" } },
        },
        {
          destination: "dimens.xml",
          format: "android/dimens",
          filter: { attributes: { category: "size" } },
        },
      ],
    },
  },
};

3. 플랫폼 가이드라인 매핑

[컴포넌트별 플랫폼 가이드라인 조율]

Button 컴포넌트:
  공통: 색상, 텍스트 크기, 패딩 비율
  iOS: SF Symbols 아이콘, 네이티브 탭 피드백
  Android: Material Ripple 효과, 높이 56dp 최소
  웹: hover/focus 상태, 커서 pointer

Bottom Navigation:
  iOS: Tab Bar (4-5개 아이템, 하단 고정)
  Android: Navigation Bar (Material 3 가이드)
  웹: 사이드바 or 상단 탭 (모바일은 Bottom Nav)

Dialog/Modal:
  iOS: UIAlertController 패턴 (취소 왼쪽, 확인 오른쪽)
  Android: AlertDialog (취소 왼쪽, 확인 오른쪽 → 동일)
  웹: 중앙 모달 or 사이드 패널

[디자이너 체크리스트]
  □ iOS HIG 준수 확인
  □ Android Material 3 준수 확인
  □ 웹 WCAG 접근성 확인
  □ 플랫폼별 터치 타겟 최소 크기 (iOS: 44pt, Android: 48dp)

마무리

크로스 플랫폼 디자인 시스템의 목표는 "완벽한 통일"이 아니라 "일관된 브랜드 경험"이다. 색상과 타이포 스케일을 공유하면서도, 각 플랫폼의 네이티브 패턴을 존중해야 한다. iOS 사용자는 iOS답게, Android 사용자는 Android답게 느끼면서도 같은 브랜드임을 느껴야 한다.