Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020

Speaker l
Flutter로 글로벌앱
출시를 위한 꿀팁.
남반석

간략한 소개
2013~2019: Naver - Android
2019~2020: Lawfully - Flutter (Android+ios)
https://github.com/bansooknam
bs.nam@lawfully.com

글로벌앱?
세계적인 앱?

글로벌앱?
세계적인 앱?
전 세계 90%
이상의 국가에서 사용한다면
글로벌앱 일까요?

글로벌앱?
일반적으로 글로벌앱이란?

글로벌앱?
1. 다양한 국가에서 사용하는 앱
2. 다양한 언어를 제공하는 앱
3. 많은 사람들이 사용하는 앱
일반적으로 글로벌앱이란?
개발적으로 글로벌 앱이란?

글로벌앱?
개발적으로 글로벌 앱이란?

글로벌앱?
개발적인
5가지 관점

국가/언어
UI/UX
안정성
유저 분석
최선의 서비스
Global App
(Flutter)
글로벌앱?
1.
2.
3.
4. 5.
Flutter

Why Flutter ?
1. 압도적 성능

1. 압도적 성능
2만개의 View 파티클 객체들의 좌표를 계산하고,
애니메이션을 동작/ 유저의 인터렉션을 실시간 계산해도
전혀 끊김이 없음
성능의 비결
C++언어로 구현된 렌더링 엔진
앱에 컴파일 될때 5MB 용량으로 작지만,
강력한 Performance 발휘
https://github.com/gskinnerTeam/flutter_vignettes/tree/master/vignettes/sparkle_party

1. 압도적 성능
https://github.com/gskinnerTeam/flutter_vignettes

2. 단일 코드 베이스가 주는 리소스 절약
Why Flutter ?

Android/iOS 2개의 UI Framework
Kotlin/Swift Native 코드 개발
Flutter 단일 Framework
Dart 코드 개발
50% 리소스 절감?

Android/iOS 2개의 UI Framework
Kotlin/Swift Native 코드 개발
Flutter 단일 Framework
Dart 코드 개발
50% 70% 이상 절감
(개발자 입장 X => 회사 입장)

How?

1. 개발 리소스
- 같은 UI (인터렉션/애니메이션)
- 같은 API 및 DB 연동
- 같은 유저 액션 Logging (Analytics)
- 같은 Test Case 및 Code 관리
2. 디자인 작업 리소스
- 하나의 디자인 가이드
- 하나의 이미지, 인터렉션 assets
3. 다국어 관리 리소스
4. QA 리소스 (플랫폼 디펜던시 없는 테스트)
+ 커뮤니케이션 비용

3. 네이티브와 100% 호환성
Why Flutter ?

3. 네이티브와 100% 호환성
Flutter에서 가능한 것들
1. Flutter에서 Native 함수 사용하기.
- Platform Channel -> Call Methods & get a Returning value
2. Flutter에서 Native화면 띄우기
- Activity (Android) & ViewController (ios)
3. Flutter 화면 일부에서 Native View 사용하기
- Platform View

4. 빠르게 커지는 플러터 커뮤니티
Why Flutter ?

주요 Cross-Platform Framework
작년 12월 React Native를 꺾고
안정적인 상승세를 타고 있습니다.

GitHub Star도 추월했습니다.
Flutter React Native

https://www.youtube.com/watch?v=R-iRVzd3E3M
- 10분만에 누구나 쉽게 Library Publishing 가능
- 1만 5천개의 Library Package들
https://libraries.io/pub

(https://www.facebook.com/groups/flutterkorea)
Flutter는 한국에서도 커지고 있다.
1. Facebook Group
(https://open.kakao.com/o/gsshoXJ)2. Kakaotalk Open Chat

국가/언어안정성
유저 분석
최선의 서비스
Global App
(Flutter)
글로벌앱?
2.
3.
4. 5.
Flutter
1. UI/UX

글로벌앱?
사용자 경험이 다른 경쟁사 앱보다 더 낫도록
1. UI/UX

UI/UX - 개발의 Scope
1. UI/UX
a. 화면의 Goal
b. 화면 사이의 Flow
c. 유저의 편의와 Revenue
d. 최신 Trend

a. 화면의 Goal
유저가 가장 쉽게 목적을 이루도록 하자.
1. 유저가 알고있는 정보(Text)는 모두 빼자.
2. 버튼을 인지시키고, 충분히 키워라. (최소 가로세로 8mm, 50dp 이상)
3. 직관적이지 않은 롱프레스, 스와이프, 스크롤은 꼭 힌트 or 가이드를 주자.
4. 유저의 노력을 최소로 줄이자. (단계를 덜자.)

a. 화면의 Goal
Version 1
2⃣
A
1⃣
B
3⃣
C
Citizenship

a. 화면의 Goal
Version 2
1⃣
2⃣
A B C
all
1⃣
3⃣

a. 화면의 Goal
- 화면의 갯수도 줄고,
- 화면 Flow도 줄고
- 유저의 단계도 줄고,
- 유저는 더 적은 노력으로
Goal을 이루게 됐습니다.

2. UI/UX를 훌륭하게

기본 원칙들
1. 유저가 예상 가능한 타이밍에 화면 이동을 해라. (유저 액션 이후)
2. 어떤 옵션이나, 정보를 선택할땐 다이얼로그가 낫다.
3. 무한 Navigation이 되지 않도록 설계하자.
4. Context에 맞는 화면 전환 애니메이션을 주자.

Version 1
Home Book Profile Profile…∞Book

Version 2
Home Book Profile
change
Code?

Code?
1. 화면을 열때, 어떤 화면에서 진입했는지 Flag를 넣어준다. (bool or enum)

2. Flag를 체크해서, 정보를 이전 화면에게 Return. (pop 에 result를 넘김)
3. 결과 값을 받아서, 세팅을 해준다.

조건에 따라서, 무한 네비게이션이 될 수 있는 순환을 끊을 수 있다.

TIP - Nav 라이브러리 이용하기
dependencies:
nav: ^0.1.3
1. pubspec.yaml에 아래 디펜던시를 추가.
2. 예제에서 보셨던 함수들을 사용할 수 있습니다.
(https://github.com/bansooknam/nav)

기본 원리
1) 유저들은 원래 하던대로 행동한다. - 주로 쓰는 것만 쓰고, 그 습관과 UX에 익숙하다.
2) 새로운 것을 배워야 한다면,
하나씩 차근차근 직접 해볼 수 있게 유도하라. (Overlay 사용)
3) 결제 전환도 1,2번의 규칙들을 따른다.
4) 전환율 높이면서, 유저의 편의를 함께 지켜내는 것은 서로 상충될
때가 많다. 고민하고 또 고민하라.

1) 유저들은 원래 하던대로 행동한다.
- Android의 Back button, iOS의 Swipe Back 경험을
Flutter에서도 살리자.
- 일반적인 유저들의 앱 사용 경험을 염두해서 설계하자.

Android Back 버튼을 제어 => WillPopScope Widget 이용
onWillPop에 async함수로 bool 반환.
Android onBackPressed와 동일하다고 보면됩니다.
Navigator pop을 유도하기 위해서는 true를 반환
또는 Navigator.of(context).pop(); 직접 수행.

iOS의 기본 제스쳐 Swipe Back.
=> CupertinoPageRoute을 사용하면 된다.

1. Android의 Back 버튼 처리를 위해서 WillPopScope를 사용하면 Swipe Back이
동작하지 않는 문제가 있다. (true를 반환해도 동작안함)
2. Dart:io 패키지 안에 Platform 분기를 통해서, 아래와 같이
iOS일때는 null을 선언해주면 Swipe Back이 정상 동작한다.
TIP - WillPopScope과 Swipe Back의 충돌

일반적인 유저들의 앱 사용 경험을 염두해서 설계하자.

Version 1
덜 고려된 UX로 인해
10건중 1번 상담이
성사되지 않음.
=> 유저들이 버튼을 누르지 않음.
=> 설명을 넣어서 알려주자!
=> Why?
상담 준비
제한시간 2분
버튼 클릭해야
상담 시작
상담중

Version 2
제한시간 2분
버튼 클릭해야
상담 시작
안내 문구 추가
=> 문제가 여전히 발생함
=> 문구가 너무 작아서 그런가?
=> 폰트를 키워서 릴리즈
=> 문제가 여전히 발생함
=> 도대체 왜??

사람들은 영상 통화를 할 때
자신의 얼굴을 보는 화면에서,
버튼을 눌러야 시작하는 경험을
해본적이 없음.
늘 기다리면 자동으로 연결되기 때문에

Version 3
카운트 다운 5초 뒤
자동으로 상담 시작
=> 일반 영상 통화의
UX를 적용시켜 문제 해결

2) 새로운 것을 배워야 한다면,
하나씩 차근차근 직접 해볼 수 있게 유도하라.
(Overlay 사용)

이런 가이드 화면 많이 보셨죠?
정독해보신 경험이 있나요?
98%의 유저들은 곧바로 Skip 버튼을 누릅니다.
왜냐하면 UX적으로 문제가 있기 때문입니다.
1. 유저가 예상하지 못한 Flow가 나와 당황스럽다.
2. 유저들은 배우는 것을 선호하지 않는다.
3. 특별히 한번에 여러개를 배우는 것은 정말 싫어한다.
4. 바로 해보고 싶지만, 가이드 창을 닫아야 해볼 수 있다.

전환율을 위해
행동 유도를 해야한다면
이렇게 하세요
1. 한 화면에 하나의 행동만 유도
2. 바로 행동을 해볼 수 있도록 한다.
(닫기 버튼 없이)

Android에서는 이렇게 만들기가
상당히 까다롭습니다.
1. 클릭이 된다는건 별도의 다이얼로그가 아닌
화면과 같은 View Depth에 존재해야 하고
2. 유도 대상 뷰가 다양한 디바이스의 비율에
맞아야 하기 때문에, 뷰 참조가 필요합니다.
3. 가이드를 위한 코드를 실무 코드와 함께 있게
하는 것이 개발자 입장에서 꺼림찍 합니다.

Flutter에서는
구현하기가 훨씬 수월합니다.
1. Overlay를 이용하면, 다이얼로그 처럼
별도의 레이어로 띄우면서, 그 아래 영역에
탭/ 스와이프 등이 가능합니다.
2. Key를 통해서, 뷰의 위치와 크기를 알 수 있어
뷰 참조를 간접적으로 전달 가능합니다.
3. Overlay를 할 대상의 코드는 별도로 분리가
가능 하기 때문에 유지보수 하기도 쉽습니다.

TIP - Overlay를 활용한 라이브러리 몇가지 소개
feature_discovery highlighter_coachmark
2가지 모두 Open Source & MIT License이기
때문에 원하는 스펙 구현이 안되어있다면
PR 요청을 하거나, 코드 수정을 해서 사용이 가능

d. 최신 Trend

d. 최신 Trend
추천하는 사이트
1. dribbble.com
2. behance.net/search?field=ui/ux
3. producthunt.com
트렌드에 뒤쳐지지 않도록,
어떤 앱이, 또
어떤 UX/UI가 유행인지
심심할때 마다 살펴보고
앱에 어떻게 적용할까 고민해보자.

글로벌앱?
2. 최선의 서비스
하나의 스펙을 구현하더라도 가장 효율적/효과적으로.

어떤 아이콘이
클릭 전환이 많이 일어날까요?

어떤 신규 스펙을 구현하거나,
기존의 스펙을 수정할 때,
어떤 것이 더 효과가 있을지 확신이 없을 때가 있다.
그럴때
감으로 느낌으로 하지 말고
다 해보자
?

A/B 테스트 준비물
Simple Constant Data
(parameters)

Remote Config
Add parameter
Get parameter
pubspec.yaml에 아래 디펜던시 추가.
firebase_remote_config: ^0.3.0

Logo Monica CEO
3개의 다른 값이 유저들 마다 골고루 내려가도록 할 수 있다.

1. 생성
2. 실험 이름 및 설명 입력

3. 타겟 설정
4. 목적 설정
더 높은 수치가 나오길 바라는 이벤트 지정.
(또는 전환율, Retention 등)

5. Variant 추가
6. 실험 저장
및 실행
* 한번 실행하면 중간에 편집 불가.

7. 실험 결과 분석
8. 실험 종료 및
Winner 적용

글로벌앱?
3. 유저 분석
사용자들의 로그를 잘 분석하여 사용 패턴과, 유저의 니즈를 파악.

분석의 Scope
3. 유저를 분석
1. 사용자의 액션.
- 클릭, 스와이프, 스크롤
2. 사용자의 화면 전환.
- A화면에서 B화면으로 이동 경로
3. 사용자의 환경.
- os, version, 국가, 도시, 언어, 네트워크 속도

분석의 내용
1. 앱 사용량 측정
- DAU, MAU, Retention, Session count & length
2. 릴리즈한 스펙의 분석
- 예상치/실제 비교, 의도한대로 사용하는지
3. Revenue 분석
- 전환율 분석/ 매출 분석
3. 유저를 분석

Analytics Tool 추천.
1. Amplitude
- 다양한 차트 제공
- 직관적이고, 자유도 높은 데이터 필터링 제공
- 월 1000만 Event까지는 무료로 사용 가능.
2. Firebase Analytics
- 많은 기본 분석을 제공 (Active User, Audiences 등등)
- 무료로 사용.
- Amplitude에 비해 데이터 가공 자유도가 떨어짐.
- Blog, Tutorial 설명글이 굉장히 많아서 쉽게 사용 가능.
3. 유저를 분석

Amplitude 설치/사용 예시
pubspec.yaml에 아래 디펜던시 추가.
amplitude_flutter: ^2.2.0
초기화
이벤트 로그 전송
이벤트 로그와 추가 파라미터
3. 유저를 분석

Amplitude 기능 간략 소개
유저들을 분석할때, 세부적으로 그룹핑, 필터링이 가능.
Where절을 WYSIWYG하게 직관적으로 편집
3. 유저를 분석

- 원하는 Chart 형태
- 원하는 기간/단위/혹은 날짜
3. 유저를 분석

- 다양한 이벤트들끼리 경향성 파악 가능
3. 유저를 분석

- 하나의 이벤트에 여러가지
value property 로깅 가능.
- value별 count 확인 가능
3. 유저를 분석

- value도 where UI로 필터링 가능.
(숫자라면 비교 연산까지 가능)
3. 유저를 분석

- 이벤트간 Funnel (이벤트 전환율) - Funnel에서 벗어난 User들의 Funnel 분석.
3. 유저를 분석

유저의 기본 정보 파악
3. 유저를 분석

유저의 앱 사용 패턴 파악 그 외에도 굉장히 많은 기능들이 존재.
3. 유저를 분석

1000만 이벤트까지 무료
3. 유저를 분석
강추 ❤

글로벌앱?
크래시가 나지 않고, 화면 오류, 기다림이 적도록
4. 안정성

크래시는 왜 줄여야될까요?
4. 안정성
1. 마켓 리뷰에 직접적인 영향을 줍니다. (별점 1점 테러 - 유저 획득에 치명적.)
2. 기존 유저 이탈이 일어납니다. (크래시 경험한 유저의 62%가 uninstall)
3. 유저들이 느끼는 브랜드 가치가 떨어집니다.
4. 유료 결제 과정중에 발생한다면, 매출에 치명적.
5. 핫픽스 배포가 잦아지면 팀 리소스나 일정에 영향을 줍니다.

그럼 얼마나 줄여야 되나요?
- Crash-free users 99.9%가 기본 (주간 7일 기준)
(10만명 기준 0.1%는 100명)
- 99.9% 아래로 떨어지면, 개발 우선순위를 높여서 핫픽스.
4. 안정성

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. 안정성

iOS - dSYMs (Xcode Debugging Symbols)
dSYMs를 업로드 하지 않으면
Native Crash stack-trace 불가능.
업로드 방법은 firebase console에
자세하게 잘 나와있습니다.
4. 안정성

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. 안정성

Console 간략 설명
Android/ios앱 선택
Crashes, Non Fatal 선택 가능
Non Fatal을 선택하면
Dart 파일의 stack trace, line 확인 가능.
4. 안정성

Flutter는 기본적으로 크래시가 나지 않는다. (UI 코드 에러에 대해서는)
- 때문에 Android/iOS native 앱보다, 안정성이 높게 측정됨.
- 그러나 Native Channel과 연동한다면 크래시는 발생.
- UI오류는 Non Fatal을 자주 체크해서 고쳐 나가자.
4. 안정성

TIP - Error Widget 활용하기
4. 안정성
디버그 버전 릴리즈 버전 Error Widget 대응 버전
How?

TIP - Error Widget 활용하기
4. 안정성
Static builder function에
Custom Widget을 정의해서
원하는 형태로 노출 가능

글로벌앱?
5. 국가/언어
다양한 국가 언어와 문법, 단위를 지원

flutter_sheet_localization
최강 끝판왕 패키지 추천
https://github.com/aloisdeniel/flutter_sheet_localization
5. 국가/언어

Google Sheet에 텍스트를 관리하고,
Flutter Build 수행하면 코드가 자동 생성된다.
5. 국가/언어

제공하는 기능
1. Lang code에 맞게 코드 클래스/필드 생성.
2. 파라미터 이름 및 타입 지원 (String, int, double, num, DateTime)
5. 국가/언어

제공하는 기능
3. Conditional 언어 분기
4. Date Formatter
5. 국가/언어

How To?
dependencies:
flutter_sheet_localization: ^2.0.0
dev_dependencies:
flutter_sheet_localization_generator: ^2.0.0
build_runner: ^1.3.1
1. pubspec.yaml에 아래 디펜던시를 추가.
3. build_runner 명령 수행
2. AppLocalizationsDelegate 생성.
flutter packages pub run build_runner build
(https://github.com/aloisdeniel/flutter_sheet_localization)
5. 국가/언어

국가/언어안정성
유저 분석
최선의 서비스
Global App
글로벌앱?
UI/UX

마무리
감사합니다.국가/언어안정성유저 분석최선의 서비스UI/UX
궁금한게 있으시면
bs.nam@lawfully.com

Reference
globe- https://www.pngguru.com/free-transparent-background-png-clipart-nliga
platform view - https://medium.com/flutter-community/flutter-platformview-how-to-create-flutter-widgets-from-native-views-366e378115b6
face call - https://www.player.one/how-use-whatsapp-video-calling-feature-app-finally-brings-face-face-calls-android-ios-568571
Overlay experience - https://www.quora.com/How-effective-are-full-screen-tutorial-overlays-in-mobile-apps-as-a-way-of-helping-users-to-understand-the-
features-and-interface-of-an-app
instructional Overlay and coach marks - https://www.nngroup.com/articles/mobile-instructional-overlay/
Overlay guide - https://24.media.tumblr.com/tumblr_m8is6fcbnM1r71i1jo1_500.png
62%의 유저가 uninstall - https://appsamurai.com/mobile-app-performance-metrics-for-crash-free-apps/
#:~:text=Crashes%20are%20a%20significant%20concern,98%25%20crash%2Dfree%20users.
RemoteConfig - https://firebase.google.com/docs/remote-config?authuser=0
AB Testing - https://firebase.google.com/docs/ab-testing?authuser=0

Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020

More Related Content

What's hot (20)

Similar to Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020 (20)

Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020