변경 전

fastfive_before.mp4

변경 후

fastfive_after.mp4

기기 가속도 센서를 이용해 공이 중력에 반응하는 물리 시뮬레이션 앱입니다. 초기 구현 후 화면 끊김 현상을 체감했고, adb shell dumpsys gfxinfo를 활용해 원인을 분석했습니다. 이후 Compose 렌더링 구조와 게임 루프를 개선하여 정량적인 성능 최적화를 수행하고 검증했습니다.

🔧 기술 스택

Kotlin · Jetpack Compose · MVVM · SensorManager · Coroutines

Canvas · LaunchedEffect · withFrameNanos · @Volatile

adb shell dumpsys gfxinfo

⚠️ 문제

• Composable 내부에서 물리 연산을 직접 수행하며 UI 스레드를 블로킹하고 있었음
• delay(16L) 기반 게임 루프가 실제 화면의 vsync 신호와 동기화되지 않아 프레임 타이밍이 불규칙했음
• 센서 콜백 스레드와 UI 스레드 간 공유 변수의 메모리 가시성이 보장되지 않았음
• 측정 결과 Janky Frame 82.6%, P99 렌더링 시간 900ms로 심한 프레임 드랍이 발생했음

🛠 해결

• 물리 연산을 PhysicsViewModel로 분리하여 Composable은 상태 구독과 렌더링만 담당하도록 개선
• delay(16L) 기반 게임 루프를 withFrameNanos 기반 vsync 동기화 루프로 변경
• @Volatile을 적용해 센서 스레드와 UI 스레드 간 공유 변수의 가시성을 확보
• adb shell dumpsys gfxinfo를 활용해 리팩토링 전후 성능을 동일 환경에서 측정 및 비교

📈 결과

• Janky Frames 82.6% → 2.97% (97% 감소)
• P50 32ms → 16ms (50% 개선)
• P90 150ms → 17ms (89% 감소)
• P95 400ms → 17ms (96% 감소)
• P99 900ms → 32ms (96% 감소)
• 총 렌더링 프레임 500 → 1,213 (+143%)
• 메인 스레드 지연 284회 → 34회 (88% 감소)
• Android 에뮬레이터 동일 환경(before/after, 각 30초 안정화 후 수집)에서 상대적 개선 효과 검증
• 리팩토링 전후 영상을 통해 체감 끊김 해소 확인

🔗 링크

• GitHub : https://github.com/wooryeol/fastfive_card

📝 회고

• FastFive 출입 카드 UI 따라 만들기 - 버벅임과의 싸움