feat(typography): XML Typography 스타일을 추가한다
This commit is contained in:
69
app/src/main/res/values/typography.xml
Normal file
69
app/src/main/res/values/typography.xml
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<resources>
|
||||||
|
<style name="Typography" />
|
||||||
|
|
||||||
|
<style name="Typography.Heading1">
|
||||||
|
<item name="android:fontFamily">@font/bold</item>
|
||||||
|
<item name="android:textSize">24sp</item>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style name="Typography.Heading2">
|
||||||
|
<item name="android:fontFamily">@font/bold</item>
|
||||||
|
<item name="android:textSize">22sp</item>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style name="Typography.Heading3">
|
||||||
|
<item name="android:fontFamily">@font/bold</item>
|
||||||
|
<item name="android:textSize">20sp</item>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style name="Typography.Heading4">
|
||||||
|
<item name="android:fontFamily">@font/bold</item>
|
||||||
|
<item name="android:textSize">18sp</item>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style name="Typography.Body1">
|
||||||
|
<item name="android:fontFamily">@font/bold</item>
|
||||||
|
<item name="android:textSize">16sp</item>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style name="Typography.Body2">
|
||||||
|
<item name="android:fontFamily">@font/medium</item>
|
||||||
|
<item name="android:textSize">16sp</item>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style name="Typography.Body3">
|
||||||
|
<item name="android:fontFamily">@font/regular</item>
|
||||||
|
<item name="android:textSize">16sp</item>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style name="Typography.Body4">
|
||||||
|
<item name="android:fontFamily">@font/bold</item>
|
||||||
|
<item name="android:textSize">14sp</item>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style name="Typography.Body5">
|
||||||
|
<item name="android:fontFamily">@font/medium</item>
|
||||||
|
<item name="android:textSize">14sp</item>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style name="Typography.Body6">
|
||||||
|
<item name="android:fontFamily">@font/regular</item>
|
||||||
|
<item name="android:textSize">14sp</item>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style name="Typography.Caption1">
|
||||||
|
<item name="android:fontFamily">@font/bold</item>
|
||||||
|
<item name="android:textSize">12sp</item>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style name="Typography.Caption2">
|
||||||
|
<item name="android:fontFamily">@font/medium</item>
|
||||||
|
<item name="android:textSize">12sp</item>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style name="Typography.Caption3">
|
||||||
|
<item name="android:fontFamily">@font/regular</item>
|
||||||
|
<item name="android:textSize">12sp</item>
|
||||||
|
</style>
|
||||||
|
</resources>
|
||||||
107
docs/plan-task/20260515_XMLTypography스타일추가.md
Normal file
107
docs/plan-task/20260515_XMLTypography스타일추가.md
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
# XML Typography 스타일 추가
|
||||||
|
|
||||||
|
## 작업 목표
|
||||||
|
- XML 레이아웃에서 재사용할 수 있는 Typography 스타일 리소스를 추가한다.
|
||||||
|
|
||||||
|
## 구현 계획
|
||||||
|
|
||||||
|
### Task 1: Typography 리소스 파일 추가
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `app/src/main/res/values/typography.xml`
|
||||||
|
|
||||||
|
- [x] **Step 1: `typography.xml` 생성**
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<resources>
|
||||||
|
<style name="Typography.Heading1">
|
||||||
|
<item name="android:fontFamily">@font/bold</item>
|
||||||
|
<item name="android:textSize">24sp</item>
|
||||||
|
</style>
|
||||||
|
</resources>
|
||||||
|
```
|
||||||
|
|
||||||
|
- [x] **Step 2: 요청된 13개 스타일 완성**
|
||||||
|
|
||||||
|
`Heading1-4`, `Body1-6`, `Caption1-3`을 모두 추가하고 각 스타일은 `android:fontFamily`, `android:textSize`만 포함한다.
|
||||||
|
|
||||||
|
- [x] **Step 3: 리소스 빌드 검증**
|
||||||
|
|
||||||
|
Run: `./gradlew :app:assembleDebug`
|
||||||
|
Expected: `BUILD SUCCESSFUL`
|
||||||
|
|
||||||
|
### Task 2: Typography 사용 샘플 문서화
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `docs/prd/20260515_typography_xml_style_prd.md`
|
||||||
|
- Modify: `docs/plan-task/20260515_XMLTypography스타일추가.md`
|
||||||
|
|
||||||
|
- [x] **Step 1: XML 사용 샘플 추가**
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<TextView
|
||||||
|
android:id="@+id/tv_title"
|
||||||
|
style="@style/Typography.Heading1"
|
||||||
|
android:layout_width="wrap_content"
|
||||||
|
android:layout_height="wrap_content"
|
||||||
|
android:text="타이틀" />
|
||||||
|
```
|
||||||
|
|
||||||
|
- [x] **Step 2: Kotlin 사용 샘플 추가**
|
||||||
|
|
||||||
|
```kotlin
|
||||||
|
val textView = TextView(requireContext()).apply {
|
||||||
|
text = "본문"
|
||||||
|
setTextAppearance(R.style.Typography_Body3)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [x] **Step 3: Kotlin 리소스명 규칙 기록**
|
||||||
|
|
||||||
|
XML 스타일명 `Typography.Body3`는 Kotlin `R.style`에서 `Typography_Body3`처럼 점(`.`) 대신 밑줄(`_`)로 참조한다.
|
||||||
|
|
||||||
|
## 체크리스트
|
||||||
|
- [x] AC1: `Typography.Heading1`부터 `Typography.Heading4`까지 4개 스타일이 존재한다.
|
||||||
|
- QA: `app/src/main/res/values/typography.xml`에서 스타일명, `textSize`, `fontFamily` 확인
|
||||||
|
- [x] AC2: `Typography.Body1`부터 `Typography.Body6`까지 6개 스타일이 존재한다.
|
||||||
|
- QA: `app/src/main/res/values/typography.xml`에서 스타일명, `textSize`, `fontFamily` 확인
|
||||||
|
- [x] AC3: `Typography.Caption1`부터 `Typography.Caption3`까지 3개 스타일이 존재한다.
|
||||||
|
- QA: `app/src/main/res/values/typography.xml`에서 스타일명, `textSize`, `fontFamily` 확인
|
||||||
|
- [x] AC4: 기존 XML 레이아웃은 변경하지 않는다.
|
||||||
|
- QA: 변경 파일 목록에서 레이아웃 XML 변경이 없는지 확인
|
||||||
|
- [x] AC5: 변경 파일 진단/빌드 검증을 수행한다.
|
||||||
|
- QA: `lsp_diagnostics`, `./gradlew :app:assembleDebug`
|
||||||
|
- [x] AC6: Typography 사용 샘플을 XML과 Kotlin 기준으로 확인할 수 있다.
|
||||||
|
- QA: PRD 문서의 Usage Samples 섹션에서 `style="@style/Typography.Heading1"`와 `R.style.Typography_Body3` 확인
|
||||||
|
|
||||||
|
## 검증 기록
|
||||||
|
- 2026-05-15
|
||||||
|
- 무엇/왜/어떻게: 구현 전 계획 문서 작성. XML 기반 프로젝트이므로 Compose Typography 대신 values 리소스 스타일 추가로 범위를 한정했다.
|
||||||
|
- 실행 명령/도구:
|
||||||
|
- `read(docs/prd/sample-prd.md)`
|
||||||
|
- `read(app/src/main/res/values/themes.xml)`
|
||||||
|
- `rg --files app/src/main/res/values`
|
||||||
|
- 결과:
|
||||||
|
- PRD와 계획/TASK 문서를 기준으로 `typography.xml` 신규 생성 작업을 진행한다.
|
||||||
|
- 2026-05-15
|
||||||
|
- 무엇/왜/어떻게: `app/src/main/res/values/typography.xml`을 추가해 요청된 Heading, Body, Caption Typography 스타일 13개를 정의했다. Android 점 표기 스타일은 부모 스타일을 참조하므로 AAPT 리소스 링크 오류를 방지하기 위해 빈 베이스 스타일 `Typography`를 함께 추가했다.
|
||||||
|
- 실행 명령/도구:
|
||||||
|
- `lsp_diagnostics(app/src/main/res/values/typography.xml)`
|
||||||
|
- `./gradlew :app:assembleDebug`
|
||||||
|
- `rg("<style name=\"Typography\\.|android:textSize|android:fontFamily" app/src/main/res/values/typography.xml -n)`
|
||||||
|
- 결과:
|
||||||
|
- XML LSP는 현재 환경에 설정되어 있지 않아 실행 불가(`No LSP server configured for extension: .xml`)였다.
|
||||||
|
- 최초 빌드는 `Typography.Heading1` 등의 점 표기 스타일이 부모 `Typography`를 찾으면서 `style/Typography not found`로 실패했고, 원인 확인 후 빈 베이스 스타일 `Typography`를 추가했다.
|
||||||
|
- `./gradlew :app:assembleDebug`는 `BUILD SUCCESSFUL`로 완료되어 리소스 병합과 패키징이 정상 처리됐다.
|
||||||
|
- `rg` 확인 결과 요청된 13개 Typography 스타일과 각 `fontFamily`, `textSize`가 모두 존재한다.
|
||||||
|
- 2026-05-15
|
||||||
|
- 무엇/왜/어떻게: 새 Typography 스타일을 실제 XML 또는 Kotlin 코드에서 어떻게 참조하는지 PRD와 계획 문서에 샘플로 기록했다. 기존 XML 관례는 `style="@style/..."` 형태이고, Kotlin의 `R.style` 심볼은 점 표기 스타일명이 밑줄 표기로 생성되는 점을 반영했다.
|
||||||
|
- 실행 명령/도구:
|
||||||
|
- `rg("style=\"@style/|textAppearance=\"@style/|setTextAppearance|TextView\\(" app/src/main/res/layout app/src/main/java -n)`
|
||||||
|
- `read(app/src/main/res/layout/activity_add_alarm.xml)`
|
||||||
|
- `read(app/src/main/java/kr/co/vividnext/sodalive/chat/original/detail/OriginalWorkInfoFragment.kt)`
|
||||||
|
- `rg("Typography_(Heading1|Body3|Caption2)|Typography\\.Body3|Typography\\.Heading1" app/build/generated app/build/intermediates -n)`
|
||||||
|
- 결과:
|
||||||
|
- XML에서는 `activity_add_alarm.xml`의 `style="@style/AlarmDayCheckBox"`처럼 루트 `style` 속성을 쓰는 기존 예시를 확인했다.
|
||||||
|
- Kotlin에서는 기존 `setTextAppearance()` 사용처는 없고, `OriginalWorkInfoFragment.kt`에서 동적 `TextView`에 `textSize`를 직접 지정하는 패턴을 확인했다.
|
||||||
|
- 빌드 산출물의 `R.txt`에서 `Typography.Body3`가 `Typography_Body3` 심볼로 생성되는 것을 확인했다.
|
||||||
112
docs/prd/20260515_typography_xml_style_prd.md
Normal file
112
docs/prd/20260515_typography_xml_style_prd.md
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
# PRD: XML Typography 재사용 스타일 추가
|
||||||
|
|
||||||
|
## 1. Overview
|
||||||
|
XML 레이아웃 기반 화면에서 재사용할 수 있는 Typography 스타일 리소스를 추가한다.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Problem
|
||||||
|
- 현재 TextView의 `android:fontFamily`와 `android:textSize`가 XML마다 개별 지정되어 있다.
|
||||||
|
- 동일한 크기와 굵기를 반복 지정해 Typography 체계를 일관되게 재사용하기 어렵다.
|
||||||
|
- Compose를 사용하지 않는 현재 구조에서는 XML 스타일 리소스로 공통 Typography를 제공해야 한다.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Goals
|
||||||
|
- `Heading1`부터 `Heading4`까지 재사용 가능한 스타일을 제공한다.
|
||||||
|
- `Body1`부터 `Body6`까지 재사용 가능한 스타일을 제공한다.
|
||||||
|
- `Caption1`부터 `Caption3`까지 재사용 가능한 스타일을 제공한다.
|
||||||
|
- 각 스타일은 요청된 글자 크기와 폰트 굵기만 정의한다.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Non-Goals
|
||||||
|
- 기존 XML 레이아웃의 개별 `fontFamily` 또는 `textSize`를 일괄 교체하지 않는다.
|
||||||
|
- Compose `Typography` 또는 Kotlin 테마 파일을 추가하지 않는다.
|
||||||
|
- 색상, 줄간격, 자간, 마진, 패딩 등 요청되지 않은 시각 속성을 추가하지 않는다.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Target Users
|
||||||
|
- XML 레이아웃을 작성하거나 유지보수하는 Android 개발자.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. User Stories
|
||||||
|
- 개발자는 `TextView`에 공통 Typography 스타일을 지정해 같은 크기와 굵기를 반복 정의하지 않고 재사용하고 싶다.
|
||||||
|
- 개발자는 Heading, Body, Caption 계층을 이름으로 구분해 화면 텍스트 스타일을 일관되게 적용하고 싶다.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. Core Features
|
||||||
|
|
||||||
|
### XML Typography Style Resource
|
||||||
|
`app/src/main/res/values/typography.xml`에 다음 스타일을 추가한다.
|
||||||
|
|
||||||
|
#### Requirements
|
||||||
|
- Heading
|
||||||
|
- `Typography.Heading1`: 24sp, `@font/bold`
|
||||||
|
- `Typography.Heading2`: 22sp, `@font/bold`
|
||||||
|
- `Typography.Heading3`: 20sp, `@font/bold`
|
||||||
|
- `Typography.Heading4`: 18sp, `@font/bold`
|
||||||
|
- Body
|
||||||
|
- `Typography.Body1`: 16sp, `@font/bold`
|
||||||
|
- `Typography.Body2`: 16sp, `@font/medium`
|
||||||
|
- `Typography.Body3`: 16sp, `@font/regular`
|
||||||
|
- `Typography.Body4`: 14sp, `@font/bold`
|
||||||
|
- `Typography.Body5`: 14sp, `@font/medium`
|
||||||
|
- `Typography.Body6`: 14sp, `@font/regular`
|
||||||
|
- Caption
|
||||||
|
- `Typography.Caption1`: 12sp, `@font/bold`
|
||||||
|
- `Typography.Caption2`: 12sp, `@font/medium`
|
||||||
|
- `Typography.Caption3`: 12sp, `@font/regular`
|
||||||
|
|
||||||
|
#### Edge Cases
|
||||||
|
- 기존 레이아웃에 스타일을 자동 적용하지 않으므로 화면 변화는 발생하지 않는다.
|
||||||
|
- 폰트 리소스는 기존 `app/src/main/res/font`의 `bold`, `medium`, `regular`를 사용한다.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. UX / UI Expectations
|
||||||
|
- 새 스타일을 적용한 TextView는 정의된 크기와 폰트 굵기를 사용한다.
|
||||||
|
- 기존 화면은 스타일을 명시적으로 교체하기 전까지 변경되지 않는다.
|
||||||
|
|
||||||
|
### Usage Samples
|
||||||
|
XML 레이아웃에서는 `TextView`의 루트 속성에 `style`을 지정한다. `style`은 `android:` 네임스페이스를 붙이지 않는다.
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<TextView
|
||||||
|
android:id="@+id/tv_title"
|
||||||
|
style="@style/Typography.Heading1"
|
||||||
|
android:layout_width="wrap_content"
|
||||||
|
android:layout_height="wrap_content"
|
||||||
|
android:text="타이틀" />
|
||||||
|
```
|
||||||
|
|
||||||
|
기존 프로젝트의 동적 `TextView` 생성 코드는 `textSize` 등을 직접 지정하고 있다. Kotlin에서 새 Typography 스타일을 적용해야 할 때는 생성한 `TextView`에 `setTextAppearance()`를 사용한다. XML 스타일명 `Typography.Body3`는 Kotlin `R.style`에서 `Typography_Body3`로 참조한다.
|
||||||
|
|
||||||
|
```kotlin
|
||||||
|
val textView = TextView(requireContext()).apply {
|
||||||
|
text = "본문"
|
||||||
|
setTextAppearance(R.style.Typography_Body3)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. Technical Constraints
|
||||||
|
- 현재 프로젝트는 Compose가 아니라 XML 레이아웃 중심이므로 XML style 리소스로 구현한다.
|
||||||
|
- 새 스타일은 `TextView`에서 `style="@style/Typography.Body3"` 형태로 사용할 수 있어야 한다.
|
||||||
|
- Kotlin 코드에서는 `R.style.Typography_Body3`처럼 점(`.`) 대신 밑줄(`_`)로 변환된 리소스 이름을 사용한다.
|
||||||
|
- 기존 `themes.xml`을 비대하게 만들지 않기 위해 Typography 전용 values XML 파일을 사용한다.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. Metrics
|
||||||
|
- Android 리소스 병합 및 디버그 빌드가 성공한다.
|
||||||
|
- `typography.xml`에 요청된 13개 스타일이 모두 존재한다.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 11. Open Questions
|
||||||
|
- 없음. 현재 요청 범위에서는 기존 XML 교체 없이 스타일 리소스만 추가한다.
|
||||||
Reference in New Issue
Block a user