Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[2019-09] Mobile Dev. in Croquis

854 views

Published on

About mobile development process / stack in croquis.com

Published in: Technology
  • Be the first to comment

  • Be the first to like this

[2019-09] Mobile Dev. in Croquis

  1. 1. - Mobile Dev.
 in Croquis 크로키닷컴㈜ 윤상민 2019.9.19
  2. 2. ➢ 2012년 2월 창립 ➢ 2015년 2월 지그재그 서비스 개시 ✓ 현재 MAU 250만 ➢ 앱 위주의 서비스 ➢ https://zigzag.kr/ 은 서비스 안내 페이지 ➢ E-commerce 기능과 신규 개발중인 서비스에는 모바일 웹 사용 크로키닷컴은…
  3. 3. ➢ 현재 5명 (개발팀 전체 26명) ✓ ~2017.1(MAU 150만): 1명 (+CTO) ✓ ~2018.8(MAU 200만): 2명 ✓ ~2019.4: 3명 ➢ 기술 부채… ➢ 3명 시점까지는 각 개발자가 iOS / Android 모두를 담당 크로키 닷컴 앱 개발팀
  4. 4. ➢ 60여개의 UIViewController / Activity ➢ iOS 49,000 lines, Android 64,000 lines 지그재그 앱 규모
  5. 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. 6. ➢ 2016년 1월부터 Swift 전환 시작 (2.1), 6월쯤은 80% 이상 전환 완료 ➢ 적당히 안정화되었고 주 언어로 전환되는 것이 확실해 보인 시점 ➢ Swift 4.0(2017년 9월 발표)에서 계속 머물러있다가 5월에서야 5.0으로 업그레이드 ✓ 최신 버전을 유지하려고 노력도 하지만, 애플 정책상 안 할 수도 없었음 :) 언어 (iOS)
  7. 7. ➢ Scala, Retrolambda를 고려해본 적이 있음 ➢ Kotlin 1.0 릴리스(2016년 2월) 후 계속 지켜보다가 구글이 공식 지원을 발표(2017년 5월)한 이후로 전환하기로 어느 정도 결정 ➢ 하지만 기존 라이브러리(AndroidAnnotation)와 궁합이 안 맞아 실패 ➢ 2019년 5월부터 전환 시작, 약 10% 정도 전환 언어 (Android)
  8. 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. 9. ➢ 쇼핑몰 목록은 앱에 기본적으로 포함되어 배포 ✓ 앱 구동후 서버 상태 체크 하고 갱신 (및 캐싱) ✓ 서버에 문제가 있어도 최소한의 동작을 보장 ➢ 즐겨찾기, 내 상품 데이터도 클라이언트가 관리 ✓ 4.0(2016년 6월)에 로그인 기능을 추가하면서 문제가 됨 ✓ Couchbase를 사용해 동기화 방식으로 해결 ✓ 초기 동기화시 오래걸리는 문제가 있음 서버를 배제한 설계
  10. 10. ➢ 크래시 확인 ✓ Crashlytics 를 사용 ✓ 99% Crash-free ➢ CI/CD ✓ Bitrise ➢ 테스트 배포 ✓ Crashlytics Beta, TestFlight ✓ 최근에는 Alpha 테스트 단계를 추가해서 진행 ➢ Sketch & Zeplin 툴 & 외부 서비스
  11. 11. ➢ Apollo Client ✓ GraphQL은 사용하지만 Apollo Client는 사용하지 않는 방향으로 고민 중 ➢ Realm ✓ 계속 사용할지 여부 미정 ➢ RxSwift, RxJava ✓ 점점 더 많은 부분에 적용 중 ➢ Lottie 기타 라이브러리
  12. 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. 13. ➢ 2017년 하반기 광고 개발하면서 첫 A/B 테스트 ✓ 2열 vs 3열, 브리지 페이지 존재 여부 ✓ 일부 사용자 대상 ✓ 앱 설치시 자동으로 생성한 UUID 기반으로 구분 ➢ 현재는 광고 ID / UUID 값으로 서버에 질의한 결과를 가지고 활성화 피쳐 선택 ✓ 광고 ID가 없는 사용자가 많음 ✓ 앱 재설치나 기기 변경시 일일이 대응해줘야 하는 문제가 있음 A/B 테스트
  14. 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. 15. ➢ React ➢ MobX ➢ Next.js ➢ Storybook Mobile Web Tech Stack
  16. 16. - Thank you for your attention

×