2019 GDG Suwon - [나 코딩한다 - Flutter 편] Flutter와 싸우기, 그리고 화해하기

안녕하세요!
현재 로플랫이란 실내위치 인식 기술을 보유한 스타트업에서 안드로이드 / iOS 개발자로 일하고있는 이상훈입니다!

이번 GDG 수원에서 주최하는 행사인 [나 코딩한다 - Flutter 편] 에서 Flutter와 싸우기, 그리고 화해하기 라는 주제로 발표했습니다.

Flutter를 통해 실제서비스 개발을 할 때 고군분투 했던 일들을 공유해봅니다.

Transcript

1. Flutter 와 싸우기, 화해하기 by sanghun.lee at loplat in GDG Suwon
2. 안녕하세요! 저는 로플랫이란 실내위치 인식 기술을 보유한 스타트업에서 Android / iOS 개발자로 일하고있는 21살 개발자 이상훈입니다. “
3. Flutter랑 왜 싸우고...? 화해...?는 무슨말?
4. 현재 Flutter Github를 보면...
5. 현재 Flutter Github를 보면...
6. 현재 Flutter Github를 보면… 헉... 이슈 5000개 이상
7. 현재 Flutter Github를 보면… 헉... 이슈 5000개 이상 물론 Flutter는 좋은 프레임워크
8. 현재 Flutter Github를 보면… 헉... 이슈 5000개 이상 물론 Flutter는 좋은 프레임워크 하지만, 여러가지로 신경쓸게 많다!
9. Flutter로 실제 서비스를 만들면서 다양한 Flutter의 이슈들을 만나고, 해결했던 과정을 알려드리려 합니다.
10. 1. Flutter 퍼포먼스의 오해
11. 1. Flutter 퍼포먼스의 오해 Flutter에는 여러가지 빌드 모드가 있음 디버그 모드 vs 릴리즈 모드
12. 1. Flutter 퍼포먼스의 오해 Flutter에는 여러가지 빌드 모드가 있음 디버그 모드 vs 릴리즈 모드 Hot Reload / Hot Restart 하기 위한 웹소켓 생성 디버깅을 위한 여러가지 코드 포함 앱 실행하는데 초점, 디버그에 필요한 코드 없음 그 뜻은, 디버그를 위해 성능을 보장하지 못함 (프레임드랍 발생)
13. 1. Flutter 퍼포먼스의 오해 디버그 모드 vs 릴리즈 모드
14. 1. Flutter 퍼포먼스의 오해 개발하면서 테스트를 하는데, 버벅거리고, 프레임드랍이 거슬릴 정도로 일어난다면 한번 릴리즈 빌드로 테스트해보세요 + 디버그모드는 소프트웨어 렌더링, + 릴리즈모드는 하드웨어 (GPU) 렌더링입니다!
15. 2. Flutter의 UI 렌더링 오류 문제
16. 2. Flutter의 UI 렌더링 오류 문제
17. 2. Flutter의 UI 렌더링 오류 문제 Flutter 1.2.0 이상 버전 Flutter 1.1.9 이하 버전
18. 2. Flutter의 UI 렌더링 오류 문제
19. 2. Flutter의 UI 렌더링 오류 문제 iOS에서만 발생하는 문제 Skia 엔진에서 사용하는 CCPR(Coverage Counting Path Rendering) 알고리즘으로 인해 발생 Flutter 1.2.0 이상버전부터 CCPR이라는 GPU 벡터 레스터화 알고리즘을 사용함. 해당 알고리즘을 사용하도록 공유코드가 많아서 자세한 원인은 나오지 않은 상태. Flutter 1.4.0 부터 CCPR 이라는 알고리즘을 사용하지 않도록 패치됨. 하지만, 현재 최신 Flutter 안정화 버전은 1.2.1 이므로 master 채널로 변경해야 패치가능
20. 2. Flutter의 UI 렌더링 오류 문제 해결법
21. 2. Flutter의 UI 렌더링 오류 문제 Flutter 앱을 실행하면, 첫 화면에서만 저런 현상이 발생함 첫 화면을 흰색의 더미페이지 위젯을 만들고 0.5 초 이후에 메인 페이지로 이동하도록 함
22. 2. Flutter의 UI 렌더링 오류 문제 나름... 해결...
23. 3. ListView / GridView + Image = OOM
24. 3. ListView / GridView + Image = OOM 리스트뷰 / 그리드뷰에 네트워크에서 이미지를 불러옴 근데 개수가 많으면?
25. 3. ListView / GridView + Image = OOM OOM 나는 원인은 이미지를 “출력” 할 때 나는게 아니었다?! 화면에 리스트가 보이는 개수만큼 계속해서 다운로드 인스턴스를 생성해서 멀티 다운로드를 하고, Flutter 내부 캐시 로직을 타면서 리소스를 충분히 많이 먹고있는 상태. 스크롤하면, 화면에 보이는 다운로드 인스턴스도 지워지고, 적절하게 메모리 해제가 되어야하는데, 전혀 그렇지 않았음.
26. 3. ListView / GridView + Image = OOM 영상은 약 2주동안 노력하여 최적화를 한 결과
27. 3. ListView / GridView + Image = OOM 스크롤을 하면 할수록 버벅이면서 결국은 OOM으로 앱 강제종료
28. 3. ListView / GridView + Image = OOM 해결법
29. 3. ListView / GridView + Image = OOM 리스트 / 그리드 아이템은 각각 이벤트를 수신 com.loplat.maat.mainfeed.download.{$id}.complete 서버로부터 목록을 불러오면, 해당 목록을 직접 구현한 다운로드 매니저에 전달
30. 3. ListView / GridView + Image = OOM 다운로드 매니저는 순차적으로 (차례대로) 이미지를 다운로드 다운로드를 받으면, 이후 재다운로드를 받지 않도록 캐시
31. 3. ListView / GridView + Image = OOM 캐시까지 끝나면, 이벤트 송신 com.loplat.maat.mainfeed.download.{$id}.complete
32. 3. ListView / GridView + Image = OOM 수신받은 이벤트의 리스트 / 그리드 아이템은 캐시된 사진 출력
33. 4. 카메라 플러그인 오류
34. 4. 카메라 플러그인 오류 서비스 특성상 영상 촬영이 가능해야함.
35. 4. 카메라 플러그인 오류 카메라 플러그인이 있길래 “아싸” 하면서 사용했는데...
36. 4. 카메라 플러그인 오류 공식 플러그인 샘플 앱 마저 영상 촬영 버튼을 누르는 순간 크래시
37. 4. 카메라 플러그인 오류 iOS 에서만 크래시 이유는 비디오, 오디오를 직접 Mixer, Muxer 를 통해 영상으로 출력. 그 과정에서 크래시
38. 해결법 4. 카메라 플러그인 오류
39. Flutter에는 네이티브 뷰를 Flutter 위젯으로 사용할 수 있는 API 존재 4. 카메라 플러그인 오류
40. 안드로이드는 AndroidView, iOS는 UiKitView 4. 카메라 플러그인 오류
41. 안드로이드는 camera2 API로, iOS는 AVFoundation API로 직접 카메라 뷰 구현 4. 카메라 플러그인 오류
42. 네이티브에서 뷰를 만든 후, Flutter MethodChannel API로 dart와 네이티브 코드와 연결 4. 카메라 플러그인 오류
43. 4. 카메라 플러그인 오류 영상은 네이티브 카메라 뷰를 Flutter에 적용한 결과
44. Flutter의 이슈가 2500 이하가 되기까지
45. Flutter에 대해 더 깊게 공부하고 최근엔 엔진쪽에 관심이 많아 오픈소스로도 기여해보려고 합니다.
46. 감사합니다.