피드로 돌아가기
플러터 풀로 털기
강남언니 공식 블로그강남언니 공식 블로그
Mobile

플러터 풀로 털기

힐링페이퍼가 Flutter를 도입해 네이티브 픽셀 렌더링 방식으로 60fps 성능 달성 및 QR 스캔 기능 앱 개발

이치웅2019년 8월 15일12intermediate

Context

멀티플랫폼 앱 개발 시 기존 프레임워크들(Cordova, Xamarin, React Native)은 성능, 생태계, 개발 난도 측면에서 트레이드오프가 존재했다. Cordova는 웹뷰 기반으로 성능이 느리고, Xamarin은 복잡한 UI 구현이 어려우며, React Native는 JS-네이티브 통신 비용이 크다.

Technical Solution

  • GPU 기반 픽셀 직접 렌더링 도입: OEM 위젯 대신 네이티브 위젯을 흉내 낸 픽셀을 직접 그려 게임 엔진 방식의 렌더링 구현
  • Dart의 JIT/AOT 컴파일 활용: JIT 컴파일로 hot reload를 통한 즉각적 코드 반영 및 AOT 컴파일로 Native ARM 코드 생성
  • iOS/Android 멀티플랫폼 지원: 단일 Dart 코드베이스로 두 플랫폼 동시 출시 지원
  • async/await 비동기 패턴: ES6 스타일 비동기 요청/응답 처리로 복잡한 콜백 회피
  • QR 코드 스캔 및 카메라 통합: 부기 패키지 택배 송장 스캔 및 회의실/커피머신 시설 QR 코드 스캔 기능 구현

Impact

대부분의 디바이스에서 60fps의 성능 달성. 코드 저장 시점에 결과 즉시 확인 가능 (빌드 시간 제거).

Key Takeaway

Flutter의 GPU 기반 픽셀 렌더링과 Dart의 JIT/AOT 컴파일 지원은 높은 성능과 빠른 개발 속도를 동시에 달성 가능하게 하지만, 아직 생태계 부족과 라이브러리 수준의 플랫폼별 호환성 검증이 필수적이다.


멀티플랫폼 모바일 앱 개발 시 높은 성능(60fps)과 빠른 개발 환경(hot reload)이 필요하다면 Flutter를 검토할 가치가 있으나, 프로덕션 출시 전 각 라이브러리별로 iOS/Android 양쪽 플랫폼 테스트를 필수적으로 수행해야 하며, 필요한 라이브러리가 생태계에 부족할 경우 개발 일정이 예상보다 길어질 수 있다.

원문 읽기
플러터 풀로 털기 | Devpick