기존 앱에 Compose를 도입할 경우 Compose 구성요소에 MaterialTheme을 사용하려면 Material XML 테마를 이전해야 합니다. 그러면 앱의 테마 설정은 뷰 기반 테마와 Compose 테마라는 두 가지 정보 소스를 갖습니다. 스타일 설정 변경은 여러 위치에서 이루어져야 합니다. 앱이 Compose로 완전히 이전되면 XML 테마를 삭제합니다.
Material Theme 빌더 도구를 사용하여 색상을 이전할 수 있습니다.
XML에서 Compose로 마이그레이션을 시작할 때 테마를 Material 3 Compose 테마로 마이그레이션합니다.
용어집
| 용어 | 정의 |
|---|---|
MaterialTheme |
Compose UI 구성요소에 테마 (색상, 서체, 모양)를 제공하는 컴포저블 함수입니다. |
Shape |
MaterialTheme의 맞춤 구성요소 모양을 정의하는 데 사용되는 Compose 객체입니다. |
Typography |
MaterialTheme의 맞춤 텍스트 스타일 (글꼴 모음, 크기, 두께)을 정의하는 데 사용되는 Compose 객체입니다. |
Color |
MaterialTheme의 맞춤 색 구성표를 정의하는 데 사용되는 Compose 객체입니다. |
| XML 테마 | 뷰 시스템에서 사용하는 XML 파일에 정의된 Android 테마 시스템입니다. |
제한사항
마이그레이션하기 전에 다음 제한사항에 유의하세요.
- 이 가이드에서는 Material 3로의 이전만 설명합니다. 대체 디자인 시스템에서 이전하는 방법은 Material 2 또는 Compose의 맞춤 디자인 시스템을 참고하세요.
- 궁극적인 목표는 Compose로 완전히 이전하여 XML 테마를 삭제하는 것입니다. 이 가이드에서는 이전 방법을 설명하지만 최종적으로 XML 테마를 삭제하는 방법은 설명하지 않습니다.
1단계: 디자인 시스템 평가
XML 뷰 프로젝트에서 사용되는 디자인 시스템을 식별합니다. 기존 디자인 시스템을 Compose의 Material 3으로 이전하기 위한 이전 경로와 필요한 단계를 분석합니다.
2단계: 테마 소스 파일 식별
테마 설정에 필요한 모든 XML 리소스와 파일(밝은 색상 구성표와 어두운 색상 구성표, 테마, 모양, 크기, 서체, 스타일, 기타 관련 파일)을 식별하고 찾습니다.
문자열과 같은 리소스는 그대로 재사용할 수 있으며 마이그레이션할 필요가 없습니다.
3단계: 색상 이전
어두운 색 구성표와 밝은 색 구성표를 XML에서 Material 3 Compose의 상응하는 색 구성표로 이전합니다.
4단계: 맞춤 도형 및 서체 이전하기
앱에서 맞춤 도형을 사용하는 경우:
- Compose 코드에서 XML 도형 정의를 복제하는
Shape객체를 정의합니다. 이
Shape객체를MaterialTheme에 제공합니다.자세한 내용은 모양을 참고하세요.
- Compose 코드에서 XML 도형 정의를 복제하는
앱에서 맞춤 서체를 사용하는 경우 다음을 충족해야 합니다.
- Compose 코드에서 Compose 코드에
Typography객체를 정의하여 XML 텍스트 스타일과 글꼴 정의를 복제합니다. 이
Typography객체를MaterialTheme에 제공합니다.자세한 내용은 서체를 참고하세요.
- Compose 코드에서 Compose 코드에
5단계: 테마 이전 유효성 검사
항상 원래 XML 테마의 기존 테마 값을 Compose의 새 Material Theme의 신뢰할 수 있는 소스로 사용하세요. 브랜드 일관성을 유지하고 시각적 회귀를 방지하기 위해 마이그레이션 중에 새 테마 값을 만들지 마세요.
모든 새 Compose 테마 값이 기존 XML 값과 일치하는지 확인합니다. 마이그레이션된 값을 하드코딩하지 마세요.