Droidknighs2020에서 유튜브로 발표한 슬라이드입니다.
https://www.youtube.com/watch?v=gTYou3Ru1QM
[Speaker소개]
안드로이드 개발 7년차, Flutter 개발 2년차 개발자입니다. 현재 스타트업 Lawfully에서 182개국 약 7만명의 유저가 사용중인 글로벌앱을 개발/관리 하고 있습니다. 프론트엔드 개발에 관심이 많아 그 외에 React 프로젝트도 참여하였고, 각 플랫폼과 언어의 장단점을 잘 녹여서 개발에 적용중입니다.
이번 발표는 Flutter에 관심이 있는 개발자, 혹은 Flutter앱을 처음 런칭하시는 분들이 참고하시면 좋은 내용으로 준비했습니다.
[이런 분이 들으시면 좋습니다]
Flutter 관심 있으신분. Flutter로 앱을 출시하고 싶으신분. Native Platform 앱과 Flutter 앱을 비교해보고 싶으신분.
18. 2. 단일 코드 베이스가 주는 리소스 절약
1. 개발 리소스
- 같은 UI (인터렉션/애니메이션)
- 같은 API 및 DB 연동
- 같은 유저 액션 Logging (Analytics)
- 같은 Test Case 및 Code 관리
2. 디자인 작업 리소스
- 하나의 디자인 가이드
- 하나의 이미지, 인터렉션 assets
3. 다국어 관리 리소스
4. QA 리소스 (플랫폼 디펜던시 없는 테스트)
+ 커뮤니케이션 비용
22. 4. 빠르게 커지는 플러터 커뮤니티
주요 Cross-Platform Framework
작년 12월 React Native를 꺾고
안정적인 상승세를 타고 있습니다.
23. 4. 빠르게 커지는 플러터 커뮤니티
GitHub Star도 추월했습니다.
Flutter React Native
24. 4. 빠르게 커지는 플러터 커뮤니티
https://www.youtube.com/watch?v=R-iRVzd3E3M
- 10분만에 누구나 쉽게 Library Publishing 가능
- 1만 5천개의 Library Package들
https://libraries.io/pub
25. 4. 빠르게 커지는 플러터 커뮤니티
(https://www.facebook.com/groups/flutterkorea)
Flutter는 한국에서도 커지고 있다.
1. Facebook Group
(https://open.kakao.com/o/gsshoXJ)2. Kakaotalk Open Chat
30. a. 화면의 Goal
유저가 가장 쉽게 목적을 이루도록 하자.
1. 유저가 알고있는 정보(Text)는 모두 빼자.
2. 버튼을 인지시키고, 충분히 키워라. (최소 가로세로 8mm, 50dp 이상)
3. 직관적이지 않은 롱프레스, 스와이프, 스크롤은 꼭 힌트 or 가이드를 주자.
4. 유저의 노력을 최소로 줄이자. (단계를 덜자.)
36. b. 화면 사이의 Flow
기본 원칙들
1. 유저가 예상 가능한 타이밍에 화면 이동을 해라. (유저 액션 이후)
2. 어떤 옵션이나, 정보를 선택할땐 다이얼로그가 낫다.
3. 무한 Navigation이 되지 않도록 설계하자.
4. Context에 맞는 화면 전환 애니메이션을 주자.
37. b. 화면 사이의 Flow
Version 1
Home Book Profile Profile…∞Book
38. b. 화면 사이의 Flow
Version 2
Home Book Profile
change
Code?
39. b. 화면 사이의 Flow
Code?
1. 화면을 열때, 어떤 화면에서 진입했는지 Flag를 넣어준다. (bool or enum)
40. b. 화면 사이의 Flow
2. Flag를 체크해서, 정보를 이전 화면에게 Return. (pop 에 result를 넘김)
3. 결과 값을 받아서, 세팅을 해준다.
41. b. 화면 사이의 Flow
조건에 따라서, 무한 네비게이션이 될 수 있는 순환을 끊을 수 있다.
42. TIP - Nav 라이브러리 이용하기
b. 화면 사이의 Flow
dependencies:
nav: ^0.1.3
1. pubspec.yaml에 아래 디펜던시를 추가.
2. 예제에서 보셨던 함수들을 사용할 수 있습니다.
(https://github.com/bansooknam/nav)
44. c. 유저의 편의와 Revenue
기본 원리
1) 유저들은 원래 하던대로 행동한다. - 주로 쓰는 것만 쓰고, 그 습관과 UX에 익숙하다.
2) 새로운 것을 배워야 한다면,
하나씩 차근차근 직접 해볼 수 있게 유도하라. (Overlay 사용)
3) 결제 전환도 1,2번의 규칙들을 따른다.
4) 전환율 높이면서, 유저의 편의를 함께 지켜내는 것은 서로 상충될
때가 많다. 고민하고 또 고민하라.
45. c. 유저의 편의와 Revenue
1) 유저들은 원래 하던대로 행동한다.
- Android의 Back button, iOS의 Swipe Back 경험을
Flutter에서도 살리자.
- 일반적인 유저들의 앱 사용 경험을 염두해서 설계하자.
46. c. 유저의 편의와 Revenue
Android Back 버튼을 제어 => WillPopScope Widget 이용
onWillPop에 async함수로 bool 반환.
Android onBackPressed와 동일하다고 보면됩니다.
Navigator pop을 유도하기 위해서는 true를 반환
또는 Navigator.of(context).pop(); 직접 수행.
47. c. 유저의 편의와 Revenue
iOS의 기본 제스쳐 Swipe Back.
=> CupertinoPageRoute을 사용하면 된다.
48. 1. Android의 Back 버튼 처리를 위해서 WillPopScope를 사용하면 Swipe Back이
동작하지 않는 문제가 있다. (true를 반환해도 동작안함)
2. Dart:io 패키지 안에 Platform 분기를 통해서, 아래와 같이
iOS일때는 null을 선언해주면 Swipe Back이 정상 동작한다.
TIP - WillPopScope과 Swipe Back의 충돌
c. 유저의 편의와 Revenue
49. c. 유저의 편의와 Revenue
일반적인 유저들의 앱 사용 경험을 염두해서 설계하자.
50. c. 유저의 편의와 Revenue
Version 1
덜 고려된 UX로 인해
10건중 1번 상담이
성사되지 않음.
=> 유저들이 버튼을 누르지 않음.
=> 설명을 넣어서 알려주자!
=> Why?
상담 준비
제한시간 2분
버튼 클릭해야
상담 시작
상담중
51. c. 유저의 편의와 Revenue
Version 2
제한시간 2분
버튼 클릭해야
상담 시작
안내 문구 추가
=> 문제가 여전히 발생함
=> 문구가 너무 작아서 그런가?
=> 폰트를 키워서 릴리즈
=> 문제가 여전히 발생함
=> 도대체 왜??
52. c. 유저의 편의와 Revenue
사람들은 영상 통화를 할 때
자신의 얼굴을 보는 화면에서,
버튼을 눌러야 시작하는 경험을
해본적이 없음.
늘 기다리면 자동으로 연결되기 때문에
53. c. 유저의 편의와 Revenue
Version 3
카운트 다운 5초 뒤
자동으로 상담 시작
=> 일반 영상 통화의
UX를 적용시켜 문제 해결
54. c. 유저의 편의와 Revenue
2) 새로운 것을 배워야 한다면,
하나씩 차근차근 직접 해볼 수 있게 유도하라.
(Overlay 사용)
55. c. 유저의 편의와 Revenue
이런 가이드 화면 많이 보셨죠?
정독해보신 경험이 있나요?
98%의 유저들은 곧바로 Skip 버튼을 누릅니다.
왜냐하면 UX적으로 문제가 있기 때문입니다.
1. 유저가 예상하지 못한 Flow가 나와 당황스럽다.
2. 유저들은 배우는 것을 선호하지 않는다.
3. 특별히 한번에 여러개를 배우는 것은 정말 싫어한다.
4. 바로 해보고 싶지만, 가이드 창을 닫아야 해볼 수 있다.
56. c. 유저의 편의와 Revenue
전환율을 위해
행동 유도를 해야한다면
이렇게 하세요
1. 한 화면에 하나의 행동만 유도
2. 바로 행동을 해볼 수 있도록 한다.
(닫기 버튼 없이)
57. c. 유저의 편의와 Revenue
Android에서는 이렇게 만들기가
상당히 까다롭습니다.
1. 클릭이 된다는건 별도의 다이얼로그가 아닌
화면과 같은 View Depth에 존재해야 하고
2. 유도 대상 뷰가 다양한 디바이스의 비율에
맞아야 하기 때문에, 뷰 참조가 필요합니다.
3. 가이드를 위한 코드를 실무 코드와 함께 있게
하는 것이 개발자 입장에서 꺼림찍 합니다.
58. c. 유저의 편의와 Revenue
Flutter에서는
구현하기가 훨씬 수월합니다.
1. Overlay를 이용하면, 다이얼로그 처럼
별도의 레이어로 띄우면서, 그 아래 영역에
탭/ 스와이프 등이 가능합니다.
2. Key를 통해서, 뷰의 위치와 크기를 알 수 있어
뷰 참조를 간접적으로 전달 가능합니다.
3. Overlay를 할 대상의 코드는 별도로 분리가
가능 하기 때문에 유지보수 하기도 쉽습니다.
59. TIP - Overlay를 활용한 라이브러리 몇가지 소개
c. 유저의 편의와 Revenue
feature_discovery highlighter_coachmark
2가지 모두 Open Source & MIT License이기
때문에 원하는 스펙 구현이 안되어있다면
PR 요청을 하거나, 코드 수정을 해서 사용이 가능
61. d. 최신 Trend
추천하는 사이트
1. dribbble.com
2. behance.net/search?field=ui/ux
3. producthunt.com
트렌드에 뒤쳐지지 않도록,
어떤 앱이, 또
어떤 UX/UI가 유행인지
심심할때 마다 살펴보고
앱에 어떻게 적용할까 고민해보자.
73. 분석의 Scope
3. 유저를 분석
1. 사용자의 액션.
- 클릭, 스와이프, 스크롤
2. 사용자의 화면 전환.
- A화면에서 B화면으로 이동 경로
3. 사용자의 환경.
- os, version, 국가, 도시, 언어, 네트워크 속도
74. 분석의 내용
1. 앱 사용량 측정
- DAU, MAU, Retention, Session count & length
2. 릴리즈한 스펙의 분석
- 예상치/실제 비교, 의도한대로 사용하는지
3. Revenue 분석
- 전환율 분석/ 매출 분석
3. 유저를 분석
75. Analytics Tool 추천.
1. Amplitude
- 다양한 차트 제공
- 직관적이고, 자유도 높은 데이터 필터링 제공
- 월 1000만 Event까지는 무료로 사용 가능.
2. Firebase Analytics
- 많은 기본 분석을 제공 (Active User, Audiences 등등)
- 무료로 사용.
- Amplitude에 비해 데이터 가공 자유도가 떨어짐.
- Blog, Tutorial 설명글이 굉장히 많아서 쉽게 사용 가능.
3. 유저를 분석
87. 크래시는 왜 줄여야될까요?
4. 안정성
1. 마켓 리뷰에 직접적인 영향을 줍니다. (별점 1점 테러 - 유저 획득에 치명적.)
2. 기존 유저 이탈이 일어납니다. (크래시 경험한 유저의 62%가 uninstall)
3. 유저들이 느끼는 브랜드 가치가 떨어집니다.
4. 유료 결제 과정중에 발생한다면, 매출에 치명적.
5. 핫픽스 배포가 잦아지면 팀 리소스나 일정에 영향을 줍니다.
88. 그럼 얼마나 줄여야 되나요?
- Crash-free users 99.9%가 기본 (주간 7일 기준)
(10만명 기준 0.1%는 100명)
- 99.9% 아래로 떨어지면, 개발 우선순위를 높여서 핫픽스.
4. 안정성
89. firebase_crashlytics
설치방법
1. Firebase 프로젝트 세팅
- https://firebase.flutter.dev/docs/overview
2. Crashlytics 플러그인 설치 및 Android/ios 환경세팅
- https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_crashlytics
3. Firebase Console을 통해 잘 연동되었는지 확인.
- https://console.firebase.google.com/
4. 안정성
90. iOS - dSYMs (Xcode Debugging Symbols)
dSYMs를 업로드 하지 않으면
Native Crash stack-trace 불가능.
업로드 방법은 firebase console에
자세하게 잘 나와있습니다.
4. 안정성
91. 1. Bash Script에 아래와 같이 alias를 추가.
alias ud='./ios/Pods/Fabric/upload-symbols -gsp ./ios/Runner/GoogleService-Info.plist -p ios ./ios/Runner.app.dSYM.zip'
2. Apple App Store 업로드 후에 “ud” 입력만 하면 끝.
TIP - dSYMs 쉽게 업로드 하기
4. 안정성
92. Console 간략 설명
Android/ios앱 선택
Crashes, Non Fatal 선택 가능
Non Fatal을 선택하면
Dart 파일의 stack trace, line 확인 가능.
4. 안정성
93. Flutter는 기본적으로 크래시가 나지 않는다. (UI 코드 에러에 대해서는)
- 때문에 Android/iOS native 앱보다, 안정성이 높게 측정됨.
- 그러나 Native Channel과 연동한다면 크래시는 발생.
- UI오류는 Non Fatal을 자주 체크해서 고쳐 나가자.
4. 안정성
94. TIP - Error Widget 활용하기
4. 안정성
디버그 버전 릴리즈 버전 Error Widget 대응 버전
How?
95. TIP - Error Widget 활용하기
4. 안정성
Static builder function에
Custom Widget을 정의해서
원하는 형태로 노출 가능