Jetpack Compose로의 전환: Instacart Caper 팀의 AI 가속화 여정

섹션별 상세

4단계 점진적 마이그레이션 전략을 통해 운영 안정성을 확보했다. 한 번에 모든 것을 바꾸는 대신, 1단계에서는 Fragment 내부에 Compose를 래핑하고, 2단계에서 타입 안전한 내비게이션으로 전환하며, 3단계에서 순수 Compose 화면으로 변환한 뒤, 마지막 4단계에서 Compose Navigation으로 완전히 이전하는 방식을 채택했다.

kotlin

class ShoppingCartFragment : BaseComposeFragment() {
    @Inject lateinit var viewModel: ShoppingCartViewModel
    @Composable
    override fun Content() {
        val viewState by viewModel.state.collectAsStateWithLifecycle()
        ShoppingCartView(viewState)
    }
}

Fragment 내부에 Compose UI를 래핑하여 사용하는 초기 하이브리드 마이그레이션 패턴

kotlin

@Composable
fun MyFeatureScreen() {
    val bindings = provideMyFeatureBindings()
    val viewModel = provideMyFeatureViewModel()
    val fragment = LocalFragment.current
    val navController = fragment.findNavController()

    MyFeatureScreenInternal(
        viewModel = viewModel,
        scaffold = bindings.scaffold(),
        navigateBack = { navController.popBackStack() },
        navigateToDetails = { id -> navController.navigate(R.id.details_fragment) }
    )
}

Fragment 의존성을 분리하기 위해 매개변수가 없는 외부 함수와 순수 Compose 내부 함수를 분리한 패턴

AI 코딩 어시스턴트를 활용해 내비게이션 전환 속도를 5~7배 향상시켰다. 30개 이상의 서브 그래프와 130개 이상의 목적지를 수동으로 옮기는 대신, Git 히스토리의 변경 사항을 컨텍스트로 제공하고 AI가 패턴을 학습하게 하여 반복적인 변환 작업을 자동화했다.

kotlin

@Serializable
data class CouponDetailsDialogRoute(
    val couponId: String,
    val eligibleItemsCollapsed: Boolean = false,
    val showClipAnimations: Boolean = false,
    val featuredItemImageUrl: String? = null,
) : DialogRoute

Kotlin Serialization을 활용하여 정의한 타입 안전한 내비게이션 경로 객체

kotlin

navController.graph = navController.createGraph(
    startDestination = startDestination
) {
    onboardingRoutes()
    couponDetailsRoutes()
}.also { navGraph ->
    navGraph.addAll(xmlNavGraph)
}

새로운 Kotlin DSL 경로와 기존 XML 내비게이션 그래프를 공존시키는 점진적 전환 코드

Phase 2 마이그레이션에서 AI 도입 전후의 작업 시간 비교 차트 — Chart수동 작업 시 그래프당 수 시간이 걸리던 작업이 AI 도입 후 1시간 미만으로 단축되었음을 보여준다. 특히 복잡한 그래프일수록 AI를 통한 속도 향상 폭이 크며, 전체적으로 5-7배의 가속화가 이루어졌음을 수치로 증명한다.

AI 지침을 코드처럼 관리하는 'AI Skill' 워크플로를 구축했다. 단순한 가이드를 넘어 분석, 구현, Paparazzi를 이용한 시각적 검증, 정리까지 포함된 17단계의 엄격한 명령 세트를 정의했다. 이를 통해 AI가 복잡한 다중 파일 마이그레이션을 일관된 스타일로 수행하도록 제어했다.

Phase 3 마이그레이션의 AI Skill 활용 효과 차트 — ChartAI Skill을 적용한 워크플로가 복잡한 Fragment 마이그레이션 시간을 어떻게 단축시켰는지 보여준다. 엔지니어의 검증 단계가 포함되었음에도 불구하고, AI가 컨텍스트를 점진적으로 이해하며 작업 효율을 지속적으로 높였음을 나타낸다.

기술 부채 해결의 경제적 가치가 AI 도입으로 인해 변화했다. 과거에는 수동 작업의 공수가 너무 커서 미뤄졌던 대규모 리팩터링이 AI를 통해 비용 효율적인 작업으로 바뀌었다. 이는 엔지니어의 역할을 직접 실행에서 아키텍처 설계 및 검증 중심으로 이동시켰다.

Paparazzi 스냅샷 테스트를 AI 워크플로의 핵심 검증 단계로 통합했다. 기존 Fragment UI의 스냅샷을 기준점으로 생성하고, AI가 작성한 Compose UI의 스냅샷과 비교하여 픽셀 단위의 시각적 일치 여부를 확인했다. 이 과정을 통해 수동 QA 부담을 줄이고 마이그레이션의 신뢰도를 높였다.

용어 해설

젯팩 컴포즈(Jetpack Compose): — 구글이 개발한 안드로이드용 현대적 네이티브 UI 툴킷이다. XML 대신 선언형 프로그래밍 방식으로 UI를 작성하여 코드 양을 줄이고 개발 속도를 높이며 오류 가능성을 최소화한다.
프래그먼트(Fragment): — 안드로이드 앱 UI의 재사용 가능한 부분을 나타내는 구성 요소이다. 자체적인 생명주기를 가지며 액티비티 내에서 조합되어 화면을 구성하지만, 구조적 복잡성과 기술 부채의 원인이 되기도 한다.
코틀린 DSL(Kotlin DSL): — 코틀린 언어의 특징을 활용해 특정 도메인(여기서는 내비게이션 설정)에 특화된 언어 형식을 제공하는 방식이다. XML 설정보다 가독성이 높고 컴파일 시점의 타입 체크가 가능하다.
스냅샷 테스트(Snapshot Testing): — UI의 렌더링 결과를 이미지 파일로 저장하고, 코드 변경 후 생성된 새 이미지와 비교하여 의도치 않은 시각적 변화를 감지하는 테스트 기법이다. UI 마이그레이션 시 시각적 일관성을 보장하는 데 필수적이다.
타입 안전성(Type Safety): — 프로그래밍 언어가 데이터 타입을 엄격하게 관리하여 잘못된 타입의 데이터 사용으로 인한 런타임 오류를 방지하는 성질이다. 내비게이션에서 문자열 ID 대신 객체를 사용하여 오류를 줄인다.