feat(design-token): XML 디자인 토큰 리소스를 추가한다

2026-05-15 19:50:44 +09:00
parent bf2a5c7489
commit 7f0e7b0ff7
4 changed files with 303 additions and 0 deletions
--- a/docs/plan-task/20260515_XML디자인토큰리소스추가.md
+++ b/docs/plan-task/20260515_XML디자인토큰리소스추가.md
@@ -0,0 +1,118 @@
+# XML 디자인 토큰 리소스 추가
+
+## 작업 목표
+- XML 레이아웃에서 재사용할 수 있는 색상, Spacing, Radius 디자인 토큰 리소스를 추가한다.
+- 구현 범위는 XML 리소스 추가로만 한정한다.
+
+## 구현 계획
+
+### Task 1: Color 토큰 리소스 추가
+
+**Files:**
+- Modify: `app/src/main/res/values/colors.xml`
+
+- [x] **Step 1: RED - 신규 color 토큰 부재 확인**
+
+Run: `rg -n '<color name="(soda_400|red_400|green_400|gray_900)">' app/src/main/res/values/colors.xml`
+
+Expected: 토큰 추가 전에는 매칭 결과가 없어 실패한다.
+
+- [x] **Step 2: Primary, Semantic, Gray color 토큰 추가**
+
+`colors.xml`의 기존 리소스 하단에 요청된 `soda_*`, `red_*`, `green_*`, `gray_*` color 리소스를 추가한다.
+
+- [x] **Step 3: GREEN - 대표 color 토큰 확인**
+
+Run: `rg -n '<color name="(soda_400|red_400|green_400|gray_900)">' app/src/main/res/values/colors.xml`
+
+Expected: `soda_400`, `red_400`, `green_400`, `gray_900`이 모두 조회된다.
+
+### Task 2: Spacing/Radius dimen 리소스 추가
+
+**Files:**
+- Create: `app/src/main/res/values/dimens.xml`
+
+- [x] **Step 1: RED - 신규 dimen 토큰 부재 확인**
+
+Run: `rg -n '<dimen name="(spacing_16|spacing_48|radius_8|radius_14)">' app/src/main/res/values`
+
+Expected: 토큰 추가 전에는 매칭 결과가 없어 실패한다.
+
+- [x] **Step 2: Spacing과 Radius dimen 토큰 추가**
+
+`dimens.xml`을 생성하고 요청된 spacing 11개와 radius 3개를 `dp` 값으로 추가한다.
+
+- [x] **Step 3: GREEN - 대표 dimen 토큰 확인**
+
+Run: `rg -n '<dimen name="(spacing_16|spacing_48|radius_8|radius_14)">' app/src/main/res/values/dimens.xml`
+
+Expected: `spacing_16`, `spacing_48`, `radius_8`, `radius_14`가 모두 조회된다.
+
+### Task 3: 리소스 검증 및 문서 기록
+
+**Files:**
+- Modify: `docs/plan-task/20260515_XML디자인토큰리소스추가.md`
+
+- [x] **Step 1: XML LSP 진단 실행**
+
+Run: `lsp_diagnostics(app/src/main/res/values/colors.xml)` 및 `lsp_diagnostics(app/src/main/res/values/dimens.xml)`
+
+Expected: 새 XML 리소스에 새 오류가 없다. XML LSP가 환경에 없으면 그 사실을 검증 기록에 남긴다.
+
+- [x] **Step 2: 디버그 빌드 실행**
+
+Run: `./gradlew :app:assembleDebug`
+
+Expected: `BUILD SUCCESSFUL`
+
+- [x] **Step 3: 검증 기록 누적**
+
+문서 하단 `검증 기록`에 실행한 명령, 결과, 빌드 성공 여부를 한국어로 기록한다.
+
+## 체크리스트
+- [x] AC1: `soda_50`부터 `soda_900`까지 10개 Primary Color 토큰이 존재한다.
+  - QA: `colors.xml`에서 이름과 hex 값 확인
+- [x] AC2: `red_50`부터 `red_400`, `green_50`부터 `green_400`까지 Semantic Color 토큰이 존재한다.
+  - QA: `colors.xml`에서 이름과 hex 값 확인
+- [x] AC3: `gray_50`부터 `gray_900`까지 10개 Gray Color 토큰이 존재한다.
+  - QA: `colors.xml`에서 이름과 hex 값 확인
+- [x] AC4: spacing 11개와 radius 3개 dimen 토큰이 존재한다.
+  - QA: `dimens.xml`에서 이름과 dp 값 확인
+- [x] AC5: 기존 XML 레이아웃, Kotlin 코드, Compose 파일은 변경하지 않는다.
+  - QA: 변경 파일 목록에서 리소스/문서 외 변경이 없는지 확인
+- [x] AC6: 리소스 빌드 검증을 수행한다.
+  - QA: `./gradlew :app:assembleDebug`
+
+## 검증 기록
+- 2026-05-15
+  - 무엇/왜/어떻게: 구현 전 PRD와 계획 문서를 작성했다. 사용자 지시에 따라 범위는 XML 리소스 추가로만 제한했다.
+  - 실행 명령/도구:
+    - `read(app/src/main/res/values/colors.xml)`
+    - `read(app/src/main/res/values/themes.xml)`
+    - `rg --files app/src/main/res/values | rg 'dimens|spacing|radius|shape'`
+  - 결과:
+    - 기존 프로젝트는 XML 리소스 중심이며 Compose 사용 흔적이 확인되지 않았다.
+    - 기존 `dimens.xml`은 없어 새 파일 생성 대상으로 정리했다.
+- 2026-05-15
+  - 무엇/왜/어떻게: TDD 방식으로 토큰 추가 전 대표 color/dimen 조회가 실패함을 확인한 뒤, XML 리소스만 추가했다.
+  - 실행 명령/도구:
+    - `rg -n '<color name="(soda_400|red_400|green_400|gray_900)">' app/src/main/res/values/colors.xml`
+    - `rg -n '<dimen name="(spacing_16|spacing_48|radius_8|radius_14)">' app/src/main/res/values`
+    - `apply_patch`
+  - 결과:
+    - 토큰 추가 전에는 대표 color/dimen 토큰 조회 결과가 없었다.
+    - `colors.xml`에는 요청된 color 토큰 30개를 추가했다.
+    - `dimens.xml`에는 요청된 spacing 토큰 11개와 radius 토큰 3개를 추가했다.
+- 2026-05-15
+  - 무엇/왜/어떻게: 추가된 XML 리소스가 조회되고 Android 리소스 빌드가 가능한지 검증했다.
+  - 실행 명령/도구:
+    - `rg -n '<color name="(soda_[0-9]+|red_[0-9]+|green_[0-9]+|gray_[0-9]+)">' app/src/main/res/values/colors.xml`
+    - `rg -n '<dimen name="(spacing_[0-9]+|radius_[0-9]+)">' app/src/main/res/values/dimens.xml`
+    - `lsp_diagnostics(app/src/main/res/values/colors.xml)`
+    - `lsp_diagnostics(app/src/main/res/values/dimens.xml)`
+    - `./gradlew :app:assembleDebug`
+  - 결과:
+    - 요청된 color 토큰 30개와 dimen 토큰 14개가 모두 조회됐다.
+    - XML LSP는 현재 환경에 설정되어 있지 않아 실행 불가(`No LSP server configured for extension: .xml`)였다.
+    - `./gradlew :app:assembleDebug`는 `BUILD SUCCESSFUL`로 완료됐다.
+    - 빌드 중 기존 Kotlin deprecation/unchecked cast warning은 출력됐지만 이번 XML 리소스 추가와 무관하며 빌드는 성공했다.
--- a/docs/prd/20260515_design_token_xml_resource_prd.md
+++ b/docs/prd/20260515_design_token_xml_resource_prd.md
@@ -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 리소스 추가로 한정한다.