About mobile development process / stack in croquis.com

1. -
Mobile Dev.
in Croquis
크로키닷컴㈜ 윤상민
2019.9.19

2. ➢ 2012년 2월 창립
➢ 2015년 2월 지그재그 서비스 개시
✓ 현재 MAU 250만
➢ 앱 위주의 서비스
➢ https://zigzag.kr/ 은 서비스 안내 페이지
➢ E-commerce 기능과 신규 개발중인 서비스에는 모바일 웹
사용
크로키닷컴은…

3. ➢ 현재 5명 (개발팀 전체 26명)
✓ ~2017.1(MAU 150만): 1명 (+CTO)
✓ ~2018.8(MAU 200만): 2명
✓ ~2019.4: 3명
➢ 기술 부채…
➢ 3명 시점까지는 각 개발자가 iOS / Android 모두를 담당
크로키 닷컴 앱 개발팀

4. ➢ 60여개의 UIViewController / Activity
➢ iOS 49,000 lines, Android 64,000 lines
지그재그 앱 규모

5. ➢ Cordova, Xamarin, React Native, Flutter, …
➢ 회사 초기에 Web app을 시도해 본 적은 있지만 성능문제로 접음
➢ 이후 모든 앱은 Native로 개발
➢ 사용하지 않는 이유
✓ Native look and feel
✓ 새 기능을 사용할 수 있을 때까지 시일이 걸린다
✓ 구인
✓ https://medium.com/airbnb-engineering/react-native-at-airbnb-
f95aa460be1c
Native vs Cross Platform

6. ➢ 2016년 1월부터 Swift 전환 시작 (2.1), 6월쯤은 80% 이상 전환 완료
➢ 적당히 안정화되었고 주 언어로 전환되는 것이 확실해 보인 시점
➢ Swift 4.0(2017년 9월 발표)에서 계속 머물러있다가 5월에서야 5.0으로 업그레이드
✓ 최신 버전을 유지하려고 노력도 하지만, 애플 정책상 안 할 수도 없었음 :)
언어 (iOS)

7. ➢ Scala, Retrolambda를 고려해본 적이 있음
➢ Kotlin 1.0 릴리스(2016년 2월) 후 계속 지켜보다가 구글이 공식 지원을 발표(2017년
5월)한 이후로 전환하기로 어느 정도 결정
➢ 하지만 기존 라이브러리(AndroidAnnotation)와 궁합이 안 맞아 실패
➢ 2019년 5월부터 전환 시작, 약 10% 정도 전환
언어 (Android)

8. ➢ http://androidannotations.org/
➢ TranslateActivity_ 로 참조해야 함
➢ 초기 개발에는 유용했지만, 커뮤니티
의 발전방향과 달라 여러가지 문제가
발생
➢ 현재는 걷어내는 쪽으로 진행
AndroidAnnotation @EActivity(R.layout.translate)
// Sets content view to R.layout.translate
public class TranslateActivity extends Activity {
@ViewById // Injects R.id.textInput
EditText textInput;
@ViewById(R.id.myTextView) // Injects R.id.myTextView
TextView result;
@AnimationRes // Injects android.R.anim.fade_in
Animation fadeIn;
@Click // When R.id.doTranslate button is clicked
void doTranslate() {
translateInBackground(textInput.getText().toString());
}
@Background // Executed in a background thread
void translateInBackground(String textToTranslate) {
String translatedText = callGoogleTranslate(textToTranslate);
showResult(translatedText);
}
@UiThread // Executed in the ui thread
void showResult(String translatedText) {
result.setText(translatedText);
result.startAnimation(fadeIn);
}
}

9. ➢ 쇼핑몰 목록은 앱에 기본적으로 포함되어 배포
✓ 앱 구동후 서버 상태 체크 하고 갱신 (및 캐싱)
✓ 서버에 문제가 있어도 최소한의 동작을 보장
➢ 즐겨찾기, 내 상품 데이터도 클라이언트가 관리
✓ 4.0(2016년 6월)에 로그인 기능을 추가하면서 문제가 됨
✓ Couchbase를 사용해 동기화 방식으로 해결
✓ 초기 동기화시 오래걸리는 문제가 있음
서버를 배제한 설계

10. ➢ 크래시 확인
✓ Crashlytics 를 사용
✓ 99% Crash-free
➢ CI/CD
✓ Bitrise
➢ 테스트 배포
✓ Crashlytics Beta, TestFlight
✓ 최근에는 Alpha 테스트 단계를 추가해서 진행
➢ Sketch & Zeplin
툴 & 외부 서비스

11. ➢ Apollo Client
✓ GraphQL은 사용하지만 Apollo Client는 사용하지 않는 방향으로 고민 중
➢ Realm
✓ 계속 사용할지 여부 미정
➢ RxSwift, RxJava
✓ 점점 더 많은 부분에 적용 중
➢ Lottie
기타 라이브러리

12. ➢ 분석을 위한 로그는 앱에서 자체적으로 수집해, 앱 종료시 서버로 보냄
✓ zigzag://app/resumed
zigzag://app/shops/ranking
zigzag://app/shops/some-shop
zigzag://app/browser?shop_id=some-shop
https://some-shop.com/product/1234
➢ 교차 검증을 위해 Firebase로도 로그를 보냄
➢ 크래시 분석에 도움이 되기 위해 Crashlytics로 보내는 로그도 있음
➢ 마케팅용 이벤트는 AppsFlyer, Facebook, Firebase로 보냄
로그 수집

13. ➢ 2017년 하반기 광고 개발하면서 첫 A/B 테스트
✓ 2열 vs 3열, 브리지 페이지 존재 여부
✓ 일부 사용자 대상
✓ 앱 설치시 자동으로 생성한 UUID 기반으로 구분
➢ 현재는 광고 ID / UUID 값으로 서버에 질의한 결과를 가지고 활성화 피쳐 선택
✓ 광고 ID가 없는 사용자가 많음
✓ 앱 재설치나 기기 변경시 일일이 대응해줘야 하는 문제가 있음
A/B 테스트

14. 1. Asana에 Task 생성 -> GitHub에 자동으로 이슈 생성 (by Unito)
2.feature/283-login, hotfix/247-design-fix 와 같이 이슈번호를 포함한 브랜치를
생성해 작업
3.PR후 리뷰
4.develop 또는 release/v1.2.3 브랜치에 머지
5.알파/베타 테스트
6.master 브랜치로 머지하고 버전(v1.2.3) 태깅
작업 흐름 (앱 개발)

15. ➢ React
➢ MobX
➢ Next.js
➢ Storybook
Mobile Web Tech Stack

16. -
Thank you
for your attention