现代化 UI 架构：Drawable 层规范与工程实践

비즈니스 로직 분리를 통한 UI Drawable 3계층 아키텍처 설계

goodlords2026년 5월 19일4분intermediate

AI 요약

Context

Drawable 정의 시 형태, 색상, 상태 로직이 과도하게 결합되어 유지보수 비용이 증가하는 문제 발생. 특히 비즈니스 의미를 담은 네이밍으로 인해 리소스 재사용성이 저하되고 테마 변경 시 모든 파일을 수정해야 하는 구조적 한계 직면.

Color, Shape, Component로 이어지는 3계층 구조 설계를 통한 관심사 분리 구현
Shape Layer에서 @dimen 및 @color/func_* 참조 방식을 채택하여 하드코딩 제거 및 테마 유연성 확보
{Type}{Color}{Usage}{State}{Level} 공식의 엄격한 네이밍 컨벤션을 적용하여 비즈니스 의존성 완전 제거
상태 제어 로직을 Color Layer가 아닌 Drawable Layer의 Selector로 위임하여 조합 가능한 UI 상태 설계
Selector 내 상태 우선순위(Disabled > Selected > Pressed > Focused > Default) 정의를 통한 일관된 상호작용 보장
Style Layer를 통한 최종 바인딩 구조로 뷰와 리소스 간의 결합도 최소화

실천 포인트

1. Drawable 파일명에 페이지명이나 기능명(예: login_btn)이 포함되어 있는지 확인하고 직능 기반 네이밍으로 전환

2. XML 내 #RRGGBB 색상 코드 사용을 금지하고 기능색(func_*) Token 참조 체계 구축

3. 상태별 색상 정의를 Color Layer가 아닌 Selector의 조합으로 처리하는지 검토

4. 원격 수정이 가능하도록 모든 수치를 @dimen 상수로 관리하는지 확인

태그