feat(design-token): XML 디자인 토큰 리소스를 추가한다
This commit is contained in:
133
docs/prd/20260515_design_token_xml_resource_prd.md
Normal file
133
docs/prd/20260515_design_token_xml_resource_prd.md
Normal file
@@ -0,0 +1,133 @@
|
||||
# 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
|
||||
```xml
|
||||
<TextView
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:paddingHorizontal="@dimen/spacing_16"
|
||||
android:textColor="@color/soda_400" />
|
||||
```
|
||||
|
||||
```xml
|
||||
<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 리소스 추가로 한정한다.
|
||||
Reference in New Issue
Block a user