$30 off During Our Annual Pro Sale. View Details »

Revamping 6 apps in 8 months

Revamping 6 apps in 8 months

극한직업: 6개의 legacy Android / iOS 앱을 8개월만에 리뉴얼 한 이야기 (+ 최근의 모바일 기술에 대한 소감: 아키텍처(MVP, MVVM), 언어(Swift, Kotlin), 기타(Rx, DI, ..))

Sa-ryong Kang

October 23, 2018
Tweet

More Decks by Sa-ryong Kang

Other Decks in Technology

Transcript

  1. ӓೠ૒স: 6ѐ੄ LEGACY ANDROID / IOS জ ਸ 8ѐਘ݅ী ܻ׏঴

    ೠ ੉ঠӝ ઁ25ର KODEVELOPER Ҋҵ࠙ైӝ
  2. 0. ࢲۿ WHO IS THIS GUY? ▸ 18֙ର ಽझఖ ূ૑פয

    (ߔূ٘ 10֙ / ݽ߄ੌ 6.5֙ / ਢ೐ۿ౟ূ٘ 1֙) ▸ ತস ੹ޙо: ޷Ҵীࢲ ೠ ߣ, ೠҴীࢲ ف ߣ झఋ౟স ೮׮ ݈ইݡ਺ ▸ ӝ۞ӝ ইࡅ: ೠҴী ইղ৬ ف ইٜҗ ъই૑৬ Ҋন੉ܳ فҊ ੓਺ ▸ Senior SW Engineer @ Nextbeat ▸ 11/15 ࠗఠ IBMer
  3. উ٘۽੉٘ য೒ ખ ٜ݅য ࠊ. ֎?! औѱ ೡ ࣻ ੓ਗ਼ই.

    Dilbert © 2018, Andrews McMeel Syndication
  4. PHASE 1. BABY SITTER APP ౠ૚ ▸ ই੉ܳ ݐӝҊ र਷

    ࠗݽ৬ ੹ޙ ߬੉࠺ दఠܳ োѾ೧઱ח C2C ࢲ࠺झ ▸ ೞա੄ জীࢲ ࠁഐ੗ ݽ٘ / दఠ ݽ٘ܳ ݽف ૑ਗ ▸ ࢚׼൤ ݆਷ ചݶ ন, ചݶ ൒ܴ੉ ࠂ੟ೠ दաܻয়о ݆਺ ▸ ݒ୹੉ ֫૑ח ঋਵա ࣗঘ Ѿઁо ݒ਋ ݆ই Ѿઁ੄ উ੿ࢿ੉ ݒ਋ ઺ਃ
  5. PHASE 1. BABY SITTER APP PROBLEM: TOTAL CHAOS ▸ 30%

    ੿ب ٜ݅য૓ ࢚కীࢲ ઱פয ূ૑פয 1ݺҗ ೣԋ ైੑ ▸ ୭ঈ੄ ௏٘ ಿ૕: ҃೷੉ ࠗ઒ೠ ୡब੗о ੿ࢿਸ ٜ੉૑ ঋҊ ૠ ௏٘ ▸ ੋࣻੋ҅ ੹ޖ: ੹੐੗ 3ݺ(Android সޖਤఌ 1, iOS 1, ࢲߡ 1)੉ ކٶ ృࢎೠ ࢚క ▸ উ੿ࢿ: ࢎনࢲ ؀۽੄ بࢶ਷ ز੘਷ ೞחؘ ઑӘ݅ ߩযաݶ জ੉ ߄۽ ௼ېद.. ▸ ੤അߑߨ(੤അਯ 100%): ࡅܲ ࣘب۽ చਸ ੹ജ, API ഐ୹ ب઺ জਸ ࠺ഝࢿച, ࢎনࢲ৬ ׮ܲ بࢶਵ۽ ഥਗоੑ दب, … ▸ ޖܻೠ ੌ੿: iOS োղ ୹द, Android 2018֙ 1ਘ ࣇ૩઱ ୹द (ଵҊ۽.. ੑࢎੌ: 10/16)
  6. PHASE 1. BABY SITTER APP CHALLENGE: ASYNCHRONOUS ▸ উ٘۽੉٘੄ উ੿ࢿ

    ޙઁ੄ ਗੋ: ࠺زӝ ୊ܻীࢲ ৘৻࢚ടী ؀ೠ ୊ܻо ੹ޖ ▸ iOS੄ ҃਋ উ੿ࢿ ޙઁח ੸ਵա ࢿמ ੉गо ੓঻਺ ▸ ৵ ݽ߄ੌীࢲ ࠺زӝ ୊ܻо ઺ਃೠо? ▸ Frame lag - 60Hz: 16ms / 90Hz, 12 ms / 120Hz, 8 ms ▸ Android੄ ҃਋: ANR (App Not-Responding) problem
  7. PHASE 1. BABY SITTER APP CHALLENGE: OLD LANGUAGE ▸ iOSח

    Swift 2.x۽, Androidח Java۽ ѐߊغҊ ੓ח ࢚క ▸ নଃ ݽف ੗ز ߸ജోਸ ઁҕ, but.. ▸ Kotlin਷ ޷ޑೠ ޙઁо.. ▸ Null ୊ܻ۽ ੋ೧ ੹ഃ ৘࢚ ޅೠ Ҕীࢲ crashо ߊࢤೡ ࣻ ੓ח ૑܉ߒ 
 eg. ੤੘֙ Nࢎীࢲ ੓঻؍ জ ੢গ ▸ ೧Ѿ଼਷ ୥୥ೠ Testੋؘ.. native SAM(Single Abstract Methods) ޷૑ਗ, Parametric polymorphism ޷૑ਗ ١ ࣻ੘স੉ ೙ਃೠ ࠗ࠙ ٸޙী Java ӝ߈ test੄ migrationী ࠗ׸੉ ੓਺
  8. PHASE 1. BABY SITTER APP CHALLENGE: MVC ARCHITECTURE ▸ MVC:

    View ੿੄, Controller ௏٘, Business ۽૒, Model ࠗ࠙੉ ࢎ੉જѱ য਋۞૓ դ੢ ౸..
  9. MVC is not evil • Modelҗ Viewח ੌઙ੄ ۨҊ ࠶۟:

    Model(+ Domain) ҅கীࢲח ࠺ૉפझ ۽૒ਸ, View ח UI۽૒ਸ ઁҕ. • Controllerח ۨҊ ࠶۟੄ ઑ݀ਸ ׸׼. • Cח যڃ Viewܳ ࠁৈ઴ Ѫੋоܳ Ѿ੿೧ࢲ Modelীࢲ ߉਷ ؘ੉ఠܳ View۽ ֈѹષ. • ӒܻҊ ী۞ܳ যڌѱ ࠁৈ઴૑ܳ Ѿ੿೧ࢲ View۽ ֈѹષ
  10. ৵ Mobile MVCח աࢂо? • ݽ߄ੌ ജ҃੄ ޙઁ: ࠂ੟ೠ ࠺زӝ

    ୊ܻ, ۄ੉೐ ࢎ੉௿ ୊ܻ • iOS/উ٘۽੉٘੄ ӝࠄ ইఃఫ୊ ޙઁ: View - Controller ܻ࠙о গݒೞ׮. • Fat Activity: Activity-Fragmentী ցޖ ݆਷ ۽૒੉ ٜযр׮. • Unit Testܳ ٜ݅ӝо ݒ਋ ө׮܂׮. • Ӓ Ѿҗ == ୨୓੸ դҴ • Separation of Concern ੉ উ ؽ: য٣ী ޤо ੓ח૑ ࠄੋب ଺ӝо ൨ٜয ૗ • ೞաೞա੄ ௿ېझٜ੉ ցޖ ݆਷ ৉ೡਸ ׸׼ -> ਬ૑ࠁࣻ ਊ੉ࢿ, ࣻ੿ಞ੄ࢿ, о ةࢿ ١ ݆਷ ࠗ࠙ীࢲ ஂডೠ ௏٘о غߡܿ
  11. PHASE 1. BABY SITTER APP SOLUTION ▸ Franklin’s rule ▸

    ࢶఖҗ ૘઺: ઺ਃೞ૑ ঋ਷ ੌ਷ ݽف ನӝ ▸ Remove Innovation: ܻझ௼ܳ ୭؀ೠ ഥೖ, যڃ ࢜۽਍ दبب ೞ૑ ঋח׮ ▸ ࢲߡ੄ ࣻ੿/ࠛ೤ܻೠ API झಖ੄ ࣻ੿ب (ੌࠗ ߡӒо ੓ח ࠗ࠙ਸ ઁ৻ೞݶ) ನӝ ▸ әೞ૑ ঋ૑݅ ઺ਃೠ दрী Բળ൤ दр ై੗ ▸ ೱറ ֫਷ ੉੗੄ ӝࣿࠗ଻о ؼ оמࢿ੉ ੓ח ࠗ࠙਷ ઺р઺р ೧Ѿ ▸ ੌױ ా೤పझ౟ ನӝ(தࠁ٣ই੄ QA ഥࢎ۽ ೧Ѿ)ೞغ ઺р઺р ઱ਃ ۽૒ పझ౟ ҳഅ
  12. әೠ ੌ әೞ૑ ঋ਷ ੌ ઺ਃೠ ੌ ׼ো൤.. न ӝמ

    ҳഅ ߡӒ ࣻ੿ + জ উ੿ച MV-Presenter ੹ജ য়ېػ ۄ੉࠳۞ܻ тইఋӝ ઺ਃೞ ૑ ঋ਷ ੌ пઙ ഥ੄ ଵࢳ -> ݽٚ ੿۹޷౴ ࠛଵ ੉࢚ೠ ߸ࣻݺ, ݫࣗ٘ݺ ߸҃ ٜৈॳӝ ߸҃ ӝఋ झఋੌ ࣻ੿ Rx, DI ١ नӝࣿ بੑ Java -> Kotlin ߸ജ
  13. PHASE 1. BABY SITTER APP SOLUTION ▸ ঱য ߸ജ ▸

    Swift੄ ҃਋, नߡ੹ਵ۽ ߄Բ૑ ঋਸ ҃਋ ۄ੉࠳۞ܻо ز੘ೞ૑ ঋח ҃਋о Ԩ ੓য ݃੉Ӓۨ੉࣌੉ ೙ࣻ ▸ Kotlin਷ (Ѣ੄) 100% ೞਤ ഐജࢿਸ ઁҕೞӝ ٸޙী ࢲفܳ ೙ਃо হ਺ ▸ ؀ࠗ࠙੄ জٜ੉ Kotlinചܳ ੸ӓ੸ਵ۽ दبೞҊ ੓਺ীب 40% ࣻળਸ ֈ૑ ޅೞҊ ੓ח ੉ਬ ▸ Ӓ۞ա ഛҊೠ ݫܻ౟ח ੓਺ ▸ Ref: Kolin͹෰ᔭͫΝAndroidΧϜϯ΀ᶦ᭳ (https://speakerdeck.com/yanzm/kotlinfest) ▸ → नӝמ਷ Kotlinਵ۽ ੘ࢿೞغ ӝઓ ௏٘ח ࣗӓ੸ਵ۽, উ੿ࢿী ഛन੉ ੓ח ࠗ࠙݅ ࣻ੿
  14. PHASE 1. BABY SITTER APP SOLUTION ▸ উ੿ࢿ ޙઁ: ੸੿

    ӝࣿ۽ ೧Ѿ ▸ ޙઁо ߊࢤೞח ٜࠗ࠙੄ ҕా ୊ܻܳ ୶࢚ച ೧ࢲ ୊ܻೞب۾ ࣻ੿ ▸ eg. Callback ୊ܻܳ ୶࢚ചೠ ҕా ௿ېझܳ ੘ࢿ ▸ пઙ ৘৻/ী۞ ୊ܻܳ ੌҙغѱ ୊ܻ ▸ CountDownLatchܳ ੉ਊ೧ ࠂࣻ੄ async җ੿੄ ઙܐ ୊ܻب ੗زਵ۽..
  15. PHASE 1. BABY SITTER APP SOLUTION ▸ ҳઑ ޙઁ: MVP

    ଻ਊ ▸ 90֙؀ ઁউ, 2006֙ Martin Fowler੄ ࣗѐ۽ օܻ ঌ۰૗
 ଵઑ: GUI Architectures (https://martinfowler.com/eaaDev/uiArchs.html) ▸ Viewח ࠺ૉפझ ۽૒ী ҙ۲ػ ࠗ࠙ਸ ҙৈೞ૑ ޅೞب۾ ܻ࠙, Presenter۽ ֈӣ
  16. MVP੄ ੢੼ • Fat activity/fragment ߑ૑ • ੸੺ೠ ৉ೡ(responsibility)੄ ܻ࠙۽

    ੋ೧ ࣗझ оةࢿ + ಿ૕੉ ز߈ ࢚थ • ೒ۖಬ ੄ઓ੸ੋ UI ୊ܻח View ଃਵ۽ ܻ࠙೮ӝ ٸޙী Presenterח औѱ పझ౟ ੘ࢿ੉ оמ • Clean Architecture৬ 1:1 mapping оמ. CAܳ Ӓ؀۽ ଻ਊೞݶ ࢸ҅ ҙ۲ ֢۱ب ୭ࣗച
  17. PHASE 1. BABY SITTER APP Ҋҵ࠙ై੄ Ѿҗ ▸ 2017/12/31 नߡ੹

    ୹द! (ਗې ੌ੿ 2018/1/19) ▸ ୐ ઱ ௼ېदਯ 5%, Ӓ റ ૑Әө૑ 0.01% ޷݅ ▸ ୹द 1઱݅ী 1.5 ୹द ▸ CPO៭, “ࢤп೧ࠁפ ഥਗоੑ হ੉ח दఠ Ѩ࢝੉ উ غח ѱ ખ উ જ֎.. ীয࠺ূ࠺୊ۢ ࠺ഥਗ ݽ٘ب ખ ֍ ૑?“ -> 4दр݅ী ؀਽ ৮ܐ ▸ ӒܻҊ.. ▸ ࣻѐਘী Ѧ୛ࢲ ౥౥൤ kotlin ߸ജ ߂ MVP ੸ਊ ੘সਸ ૓೯, Ѿઁࠗ࠙ਸ ઁ৻ೞҊח Ѣ੄ ݽٚ ௏٘ kotlin ച ▸ ૑૑դ઱ী ݃૑݄ թ਷ Ѿઁ ࠗ࠙ө૑ Java ௏٘ 100% ઁѢ!
  18. PHASE II. ਭই੿ࠁ APP ౠ૚ ▸ ੌࠄ ਭই ੿ࠁ ҙ۲

    3ਤ ࢲ࠺झ ▸ Retention, ୓ܨ दр੉ ݒ਋ ֫Ҋ, ౟ې೗੉ ౠ੿दрী ૘઺غח ҃ೱ੉ ੓਺ ▸ ੉੹ ೐۽ં౟ܳ ೞݶࢲ ߄ׯ਷ ନ঻׮Ҋ ࢤп೮׮. Ӓ۞ա.. ▸ PO៭, “য٣оࢲ ࠁৈ઱ӝ ଃ ౹۰ࢲ ҟҊب উ ೞҊ ੓যਃ..”
  19. PHASE II. ਭই੿ࠁ APP PROBLEM: TOTAL CATASTROPHE ▸ Hybrid ഋకੋؘ

    Web-native োز੉ 
 ૑੷࠙ೞӝ Ӓ૑ হ਺ ▸ ࢸ࢚ о࢚ਵ۽ ࢲߡب PHP۽ ઁݧ؀۽ 
 ҳഅغয ੓਺ ▸ 2 off-shore engineers joined
 → ױӝ੸ਵۿ য়൤۰ ܻझ௼ ૐо
  20. PHASE II. ਭই੿ࠁ APP SOLUTION ▸ ੹ݶ ੤ѐߊ ▸ ࢲߡө૑

    ӝઓ ࣗझ ୓҅ܳ ৮੹൤ ߡܻҊ ׮द द੘ ▸ (ӝઓ ௏٘ ߬੉झо ই઱ ௼૑ ঋওҊ, জ ஶࣆ੉ ੹୓੸ਵ۽ ࣻ੿غ঻ӝ ٸޙী оמೠ ࢶ ఖ੉঻਺)
  21. PHASE II. ਭই੿ࠁ APP SOLUTION ▸ न ҳઑ بੑ: MVVM

    ▸ ৉द ݃౯ ౵਎۞੄ Presentation Domain Separation (PDS)о दୡ ▸ 2004֙ ࣗѐػ Presentation Model੉ ਗഋ (https://martinfowler.com/eaaDev/ PresentationModel.html ) ▸ Microsoft .Net Frameworkীࢲ ୊਺ ҳഅೣ ▸ ViewModel: Uni-directional Mediator & Self-contained system ▸ Presenter৬ ݒ਋ ਬࢎೞա, ViewModel਷ Viewܳ ઁযೞ૑ ঋ਺ ▸ Viewח ViewModelਸ ഐ୹ೞغ, Ѿҗח Callback / Observable ഋక۽ ߉਺
  22. PHASE II. ਭই੿ࠁ APP SOLUTION ▸ Reactive Extension (RxSwift /

    RxJava)੄ بੑ ▸ eg. API request -> response -> оҕ -> Local DB јन ഑਷ ాन पಁ द Local DB select -> UI јन ١١ ࠺زӝ੸ ਵ۽ ੉য૑ח ੌ۲੄ ױ҅ܳ ࢶഋ੸ਵ۽ ҳഅೡ ࣻ ੓ח ъ۱ೠ ࣻױਸ ઁҕ ▸ п ױ҅ ੘স੄ झா઴۞(~= झۨ٘) ૑੿੉ ਊ੉ ▸ Ayncೠ ୊ܻܳ ൒ܴী ٮۄ sequentialೞѱ ҳഅೡ ࣻ ੓ӝ ٸޙী, ▸ ௏٘ оةࢿ+ࢤ࢑ࢿ әѺ൤ ೱ࢚ (ױ Rx੄ ૑ध੉ হח ࢎۈীѱח য়൤۰ դ೧..) ▸ UI / Domain(Business) / Data ۽૒੄ ܻ࠙о ਊ੉೧૗ ▸ ী۞ ୊ܻо ए਑ ▸ ஂࣗ ୊ܻо ए਑ - App LifeCycleҗ औѱ োز оמ -> eg. ੹ചо য়Ѣա জਸ ࠺ഝࢿച दఆ ҃਋
  23. PHASE II. ਭই੿ࠁ APP SOLUTION ▸ Unit Test ੹ݶ بੑ

    ▸ CI৬ ো҅, QA হ੉ب ծ਷ ੢গਯ ࠁ੢
  24. PHASE II. ਭই੿ࠁ APP SOLUTION ▸ Dependency Injection - SWInject

    / Dagger ▸ Swift੄ ҃਋ annotation / DSL ઁডਵ۽ ޷۰ೠ DI ҳഅ਷ য۰਑ ▸ Android੄ ҃਋, ъ۱ೠ DI ҳഅ୓ ઓ੤ ▸ Dagger(Annotation ӝ߈), Koin(Kotlin DSL ӝ߈) ▸ Dagger੄ ੢੼: annotation ▸ Dagger੄ ױ੼: annotation ▸ ੄৻੄ ੢੼(?)ب..
  25. PHASE II. ਭই੿ࠁ APP Ѿҗ ▸ 1/15 ଱ࣻ, 3/2 2.0

    ୹द ▸ ղ஘ ӣী ؀۝੄ नӝמ ୶о: 4/24 2.5 ୹द ▸ ӝઓ Baby Sitter জب ߡ੹ স
  26. PHASE III. HR APP ౠ૚ ▸ ࠁਭࢎ ҙ۲ ҳੋ ࢲ࠺झ

    ઺ द੢੼ਬਯ 1ਤ ࢲ࠺झ ▸ ഥࢎ੄ ݒ୹੄ 90%о ૘઺ػ ࢲ࠺झ
  27. PHASE III. HR APP CHALLENGE ▸ জ ৻੸ੋ ਃੋٜ.. ▸

    ݽ߄ੌ ౱ әࢿ੢ - ౱੉ ц੗ӝ 8ݺ ӏݽ۽ әૐ. ݽ߄ੌ ؀਽ back-endө૑ ѐߊ. Үਭ ࠺ ਊ әૐ. ▸ ഥࢎ੄ ӝр ࢲ࠺झۄ ࣾоۅ ԡҊ रযೞח ࢎۈٜ੉ ݆਺..
  28. PHASE III. HR APP SOLUTION ▸ Clean Architecture ੹ݶ ੸ਊ

    ▸ DDD (ੌࠗ) بੑ ▸ Rx੄ Subject بੑ
  29. PHASE III. HR APP Ѿҗ ▸ 6/8 ࢜ߡ੹ ܾܻૉ ▸

    ഥࢎ੄ 3؀ ࢲ࠺झ੄ ܻ׏঴੉ ݽف ݃ޖܻ ؽ ▸ ౱ ࣇস ৮ܐ: ੉ઁח ҕ੢ ୓੤..
  30. PHASE IV. PRESENT & WHAT’S NEXT NEW CHALLENGE ▸ HR

    জ੄ ੹ݶ ѐಞ ▸ ޛۿ ӝઓ জٜ੄ ਬ૑ࠁࣻח ҅ࣘ ೞݶࢲ..
  31. PHASE IV. PRESENT & WHAT’S NEXT SOLUTION ▸ TDD۽ ૓೯!

    (Ӓېب ழߡܻ૑ח Ӓۧѱ ֫૑ח ঋणפ׮) ▸ View - ViewModel р੄ ాन ▸ ੉߮౟ ా૑ ࠗ࠙ ▸ iOS੄ ҃਋, ▸ Rx੄ subject ٜਸ ੉ਊ: PublishSubject, BehaviorRelay, etc. ▸ Driver / Signal۽ ੉߮౟ ࣻन - ੉߮౟ܳ ৈ۞ Ҕীࢲ ߉ਸ ࣻ ੓਺. ݫੋझۨ٘ ز੘ਸ ࠁ੢. ▸ Android੄ ҃਋, LiveData ࢎਊ
  32. PHASE IV. PRESENT & WHAT’S NEXT SOLUTION ▸ View -

    ViewModel р੄ ాन (Cont’d) ▸ UI ߸҃ ࠗ࠙ ▸ ViewModel੄ о੢ ௾ ޙઁо ੉ ࠗ࠙ ▸ Android੄ ҃਋, DataBinding: XML੄ UI ੿੄ী ੉߮౟ө૑ োѾ оמ ▸ iOS੄ ҃਋, RxBindingਸ ాೠ ਋ഥ ҳഅ
  33. PHASE IV. PRESENT & WHAT’S NEXT SOLUTION ▸ iOS /

    Android ੄ ܻ࠙ ▸ ݽ߄ੌ ѐߊীࢲ ాੌ੢ ੉ۿ(Unified Field)ח оמೠо? sweet temptation but.. ▸ ޛۿ domain logic/model੄ ࢚ഐ਍ਊ਷ ݒ਋ ਬਊ