Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

2019 GDG Suwon - [나 코딩한다 - Flutter 편] Flutter와 ...

Dora Lee
April 26, 2019

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

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

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

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

Dora Lee

April 26, 2019
Tweet

More Decks by Dora Lee

Other Decks in Technology

Transcript

  1. 안녕하세요! 저는 로플랫이란 실내위치 인식 기술을 보유한 스타트업에서 Android /

    iOS 개발자로 일하고있는 21살 개발자 이상훈입니다. “
  2. 현재 Flutter Github를 보면… 헉... 이슈 5000개 이상 물론 Flutter는

    좋은 프레임워크 하지만, 여러가지로 신경쓸게 많다!
  3. 1. Flutter 퍼포먼스의 오해 Flutter에는 여러가지 빌드 모드가 있음 디버그

    모드 vs 릴리즈 모드 Hot Reload / Hot Restart 하기 위한 웹소켓 생성 디버깅을 위한 여러가지 코드 포함 앱 실행하는데 초점, 디버그에 필요한 코드 없음 그 뜻은, 디버그를 위해 성능을 보장하지 못함 (프레임드랍 발생)
  4. 1. Flutter 퍼포먼스의 오해 개발하면서 테스트를 하는데, 버벅거리고, 프레임드랍이 거슬릴

    정도로 일어난다면 한번 릴리즈 빌드로 테스트해보세요 + 디버그모드는 소프트웨어 렌더링, + 릴리즈모드는 하드웨어 (GPU) 렌더링입니다!
  5. 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 채널로 변경해야 패치가능
  6. 2. Flutter의 UI 렌더링 오류 문제 Flutter 앱을 실행하면, 첫

    화면에서만 저런 현상이 발생함 첫 화면을 흰색의 더미페이지 위젯을 만들고 0.5 초 이후에 메인 페이지로 이동하도록 함
  7. 3. ListView / GridView + Image = OOM 리스트뷰 /

    그리드뷰에 네트워크에서 이미지를 불러옴 근데 개수가 많으면?
  8. 3. ListView / GridView + Image = OOM OOM 나는

    원인은 이미지를 “출력” 할 때 나는게 아니었다?! 화면에 리스트가 보이는 개수만큼 계속해서 다운로드 인스턴스를 생성해서 멀티 다운로드를 하고, Flutter 내부 캐시 로직을 타면서 리소스를 충분히 많이 먹고있는 상태. 스크롤하면, 화면에 보이는 다운로드 인스턴스도 지워지고, 적절하게 메모리 해제가 되어야하는데, 전혀 그렇지 않았음.
  9. 3. ListView / GridView + Image = OOM 영상은 약

    2주동안 노력하여 최적화를 한 결과
  10. 3. ListView / GridView + Image = OOM 스크롤을 하면

    할수록 버벅이면서 결국은 OOM으로 앱 강제종료
  11. 3. ListView / GridView + Image = OOM 리스트 /

    그리드 아이템은 각각 이벤트를 수신 com.loplat.maat.mainfeed.download.{$id}.complete 서버로부터 목록을 불러오면, 해당 목록을 직접 구현한 다운로드 매니저에 전달
  12. 3. ListView / GridView + Image = OOM 다운로드 매니저는

    순차적으로 (차례대로) 이미지를 다운로드 다운로드를 받으면, 이후 재다운로드를 받지 않도록 캐시
  13. 3. ListView / GridView + Image = OOM 캐시까지 끝나면,

    이벤트 송신 com.loplat.maat.mainfeed.download.{$id}.complete
  14. 3. ListView / GridView + Image = OOM 수신받은 이벤트의

    리스트 / 그리드 아이템은 캐시된 사진 출력
  15. 4. 카메라 플러그인 오류 iOS 에서만 크래시 이유는 비디오, 오디오를

    직접 Mixer, Muxer 를 통해 영상으로 출력. 그 과정에서 크래시