klaus/sodalive-android
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
3121d9dca995c40cd0533102f9733711b4fa4461
sodalive-android/docs/prd/20260515_design_token_xml_resource_prd.md

4.5 KiB
Raw Blame History

PRD: XML 디자인 토큰 리소스 추가

1. Overview

XML 레이아웃에서 재사용할 수 있는 색상, Spacing, Radius 디자인 토큰 리소스를 추가한다.

2. Problem

  • 현재 색상은 colors.xml에 값 중심 이름으로 많이 정의되어 있어 신규 디자인 시스템 팔레트를 의미 단위로 재사용하기 어렵다.
  • Spacing과 Radius는 공통 dimen 리소스로 중앙화되어 있지 않아 XML마다 직접 dp 값을 지정해야 한다.
  • 현재 프로젝트는 Compose가 아니라 XML 레이아웃 중심이므로 XML 리소스로 토큰을 제공해야 한다.

3. Goals

  • Primary Color soda_50부터 soda_900까지 XML color 리소스로 제공한다.
  • Semantic Color red_50부터 red_400, green_50부터 green_400까지 XML color 리소스로 제공한다.
  • Gray Color gray_50부터 gray_900까지 XML color 리소스로 제공한다.
  • Spacing 4, 6, 8, 12, 14, 16, 20, 24, 28, 32, 48을 XML dimen 리소스로 제공한다.
  • Radius 4, 8, 14를 XML dimen 리소스로 제공한다.

4. Non-Goals

  • 기존 XML 레이아웃의 색상, margin, padding, corner 값을 일괄 교체하지 않는다.
  • Compose Theme, Kotlin 디자인 토큰 객체, 신규 UI 컴포넌트를 추가하지 않는다.
  • 요청된 토큰 외 추가 색상, spacing, radius 값을 정의하지 않는다.
  • 기존 color_... 리소스 이름을 삭제하거나 변경하지 않는다.

5. Target Users

  • XML 레이아웃을 작성하거나 유지보수하는 Android 개발자.

6. User Stories

  • 개발자는 신규 XML 레이아웃에서 @color/soda_400처럼 의미 있는 색상 토큰을 사용하고 싶다.
  • 개발자는 XML에서 @dimen/spacing_16, @dimen/radius_8처럼 공통 간격과 라운드 값을 재사용하고 싶다.

7. Core Features

XML Color Tokens

app/src/main/res/values/colors.xml에 요청된 디자인 시스템 색상 토큰을 추가한다.

Requirements

  • Primary Color
    • soda_50: #E6F9FF
    • soda_100: #B8EEFD
    • soda_200: #85E1FB
    • soda_300: #4FD2F9
    • soda_400: #00BDF7
    • soda_500: #00A0DF
    • soda_600: #0081C2
    • soda_700: #006BA4
    • soda_800: #004F7F
    • soda_900: #052742
  • Accent
    • red_50: #FFF1F2
    • red_100: #FFD7D9
    • red_200: #FFB3B7
    • red_300: #FF858B
    • red_400: #FF4C3C
  • Point
    • green_50: #F5FBEF
    • green_100: #E9FADB
    • green_200: #C0F595
    • green_300: #9FFB56
    • green_400: #73FF01
  • Gray Color
    • gray_50: #FAFAFA
    • gray_100: #F2F2F2
    • gray_200: #E2E2E2
    • gray_300: #CCCCCC
    • gray_400: #B5B5B5
    • gray_500: #959595
    • gray_600: #787878
    • gray_700: #494949
    • gray_800: #343434
    • gray_900: #202020

XML Spacing and Radius Tokens

app/src/main/res/values/dimens.xml에 spacing/radius 토큰을 추가한다.

Requirements

  • Spacing: spacing_4, spacing_6, spacing_8, spacing_12, spacing_14, spacing_16, spacing_20, spacing_24, spacing_28, spacing_32, spacing_48
  • Radius: radius_4, radius_8, radius_14
  • 각 값은 이름의 숫자와 동일한 dp 값을 사용한다.

Edge Cases

  • 기존 레이아웃에 새 토큰을 자동 적용하지 않으므로 화면 변화는 발생하지 않는다.
  • 기존 colors.xml의 값 중심 색상 리소스는 유지한다.

8. UX / UI Expectations

  • 기존 화면은 변경되지 않는다.
  • 신규 XML 작성 시 색상, spacing, radius 값을 의미 있는 리소스 이름으로 재사용할 수 있다.

Usage Samples

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingHorizontal="@dimen/spacing_16"
    android:textColor="@color/soda_400" />

<corners android:radius="@dimen/radius_8" />

9. Technical Constraints

  • XML 리소스만 추가한다.
  • 기존 XML 레이아웃, Kotlin 코드, Compose 관련 파일은 변경하지 않는다.
  • 색상 토큰은 기존 색상 리소스 파일인 app/src/main/res/values/colors.xml에 추가한다.
  • Spacing과 Radius는 새 app/src/main/res/values/dimens.xml에 추가한다.

10. Metrics

  • 요청된 color 토큰 30개가 모두 존재한다.
  • 요청된 spacing 토큰 11개와 radius 토큰 3개가 모두 존재한다.
  • Android 리소스 병합 및 디버그 빌드가 성공한다.

11. Open Questions

  • 없음. 현재 요청 범위는 XML 리소스 추가로 한정한다.