Upgrade to Pro — share decks privately, control downloads, hide ads and more …

우리모두 삽질한다

우리모두 삽질한다

"DEVFEST 23 Songdo"에서 발표한 "우리모두 삽질한다" 발표 자료입니다.

pluulove (노현석)

December 10, 2023
Tweet

More Decks by pluulove (노현석)

Other Decks in Programming

Transcript

  1. Incheon/Songdo
    ਋ܻݽف ࢗ૕ೠ׮
    Pluu

    KakaoBank

    View full-size slide

  2. উ֞ೞࣁਃ!!
    PLUU

    KakaoBank

    Android App Developer

    GDE for Android

    View full-size slide

  3. • ড 4֙р੄ ܻ݃ੋ٘. ࢗ૕ ா੉झ ҕਬ

    • ޙઁ੄ ೧Ѿ ߂ ߑೱ ١ э੉ Ҋ޹ೡ ష೗

    • ઱ҙ੸ੋ ࠙ࢳ੉޲۽ ੿׹੉ ইש

    • ੉ग ೧Ѿ ߑߨ X, ੿ഛೠ ҳഅ ࣗѐ X
    য়ט ࢗ૕ ߊ಴ח…

    View full-size slide

  4. Index
    1. ೐۽೙ ੹ജ গפݫ੉࣌

    2. ੉޷૑ ച૕ ੷ೞ അ࢚

    3. UI పझ౟ ~ ੉޷૑

    4. ੗োझ۞਍ ઁझ୊

    5. ߈ࠂ ౵ੌ ࢤࢿ ೒۞Ӓੋ ઁ੘

    View full-size slide

  5. Incheon/Songdo
    Case 1.

    ೐۽೙ ੹ജ গפݫ੉࣌

    View full-size slide

  6. ୹୊ : https://www.youtube.com/watch?v=fFau-nCmXcs
    গפݫ੉࣌ ݽण
    ੉ଃੑפ׮.

    View full-size slide

  7. ೙ࣻ ਃѤ

    • ৽ଃ ੉޷૑ח ೦࢚ ਤী ֢୹
    ࢠ೒ ݽण

    View full-size slide

  8. Ҋ޹1. UI ࢸ҅
    • ױੌ Viewীࢲ ૒੽ ۪؊݂

    • Custom ViewGroup + ImageView 2ѐ
    ੉޷૑о ೞաੋ ҃਋о ׮ࣻ
    • Composeח Modifier#layout, Modifier#offset

    View full-size slide

  9. Ҋ޹2. ౠ੿ ੉޷૑ܳ ݢ੷ Ӓܻӝ
    • Draw ҙ۲ ೣࣻীࢲ Ӓܻח ࣽࢲܳ ઑ੿

    • Z୷ ࣻ੿ (z, translationZ)

    • View#bringToFront()

    ==> ਋ࢶࣽਤܳ ઑ੿ೞח द੼੉ ೙ਃ

    View full-size slide

  10. Ҋ޹3. সؘ੉౟ / ࠭ ௿ܼ
    • ؘ੉ఠ সؘ੉౟द

    • যו ࠭ ӝળਵ۽ ߄ੋ٬

    • 1ѐ ↔ 2ѐ ߸҃द ز੘

    • ௿ܼद যו ೐۽೙੉ ݫੋੋо?

    • ࣘࢿী ٮۄ ߸҃ ೙ਃ (৘: Z୷)

    View full-size slide

  11. Incheon/Songdo
    Case 2.

    ੉޷૑ ച૕ ੷ೞ അ࢚

    View full-size slide

  12. QA౱੄ ઁࠁ
    ೐۽೙ী׮о ࢎ૓ਵ۽ ࢸ੿ೞݶ

    উ٘݅ ೐۽೙ ࢎ૓੉ ٣ѱ ൒ܻѱ ࠁ੉Ѣٚৈ

    ೠߣ ഛੋ ࠗఌ٘۰ৈ
    QA౱ c______.b____
    pluu.pluu
    żźża ٯ൤ ׮ܲѤ হਸబؘ ೠߣࠅѱਃ
    ֖

    ઁ ই੉ਬ ࢎ૓੉ Ӓېب 1000x1000਷ ֈחؘ…
    QA౱ c______.b____

    View full-size slide

  13. ੉޷૑о ࡸৗणפ׮?!
    7979-01-12345
    ੌࠗ ೐۽೙ ࢎ૓੉

    ൒ܻѱ աয়ח അ࢚ ߊѼ

    View full-size slide

  14. 1333 x 1333 (1 : 1)
    1125 x 2000 (0.5 : 1)
    2000 x 1125 (1.7 : 1)
    ੉޷૑ ୹୊ : https://m.post.naver.com/my/series/detail.naver?
    seriesNo=637119&memberNo=51071215&prevVolumeNo=30582870
    ੉޷૑ܳ ۽٘ೞݶ?

    View ௼ӝ = 150dp

    View full-size slide

  15. పझ౟ ௏٘
    Glide.with(this)
    .load(/** Image */)
    .circleCrop()
    .into(/** ImageView */)
    android:layout_width="150dp"
    android:layout_height="150dp" />
    पઁ ௏٘৬ 100% زੌೞ૑ ঋणפ׮.

    View full-size slide

  16. Ѿҗ

    View ௼ӝ = 150dp
    ࢠ೒ ੉޷૑

    • 1333 x 1333 (1 : 1)

    • 1125 x 2000 (0.5 : 1)

    • 2000 x 1125 (1.7 : 1)

    View full-size slide

  17. ѐ߹ ੉޷૑ ݽण
    ੌࠗ ੉޷૑о ࢶݺೞ૑ ঋ਺
    1333 x 1333 (1 : 1) 1125 x 2000 (0.5 : 1) 2000 x 1125 (1.7 : 1)

    View full-size slide

  18. circleCrop API
    Glide

    View full-size slide

  19. CENTER_INSIDE API
    Glide

    View full-size slide

  20. circleCrop API
    Original Scale
    Crop
    Result
    ӝળ ௼ӝࠁ׮ эѢա ੘਷ ࢎ੉ૉ۽ Scale୊ܻೠ റ ୊ܻ

    View full-size slide

  21. Glide੄ crop API
    • optionalCenterCrop

    • centerCrop

    • optionalCircleCrop

    • circleCrop

    View full-size slide

  22. optionalCircleCrop API
    Glide

    View full-size slide

  23. CENTER_OUTSIDE API
    Glide
    • Upscale ૑ਗ

    View full-size slide

  24. optionalCircleCrop API
    Original Scale & Crop Result
    ӝળ ௼ӝࠁ׮ эѢա ௾ ࢎ੉ૉ۽ Scale୊ܻೠ റ ୊ܻ

    View full-size slide

  25. circleCrop
    optionalCircleCrop

    View full-size slide

  26. circleCrop optionalCircleCrop
    Downscale݅ оמೞৈ

    ࣗ࠺غח ܻࣗझܳ

    ୭؀ೠ ੸ѱ ࢎਊ
    Upscaleب ೲਊೞ޲۽

    ੉޷૑ ಿ૕ਸ ࠁ੢ оמ.

    ؊ ݆਷ ݫݽܻܳ ࣗ࠺

    View full-size slide

  27. ࣻ੿ ࠁҊ
    pluu.pluu
    c______.b____੄ ԝԝೣਵ۽ ࣻ੿ೠ ݽण

    ࣁ۽оӟ-о۽оӟ-੿ࢎпഋ-੘਷੿ࢎпഋ










    ܖ


    QA౱ c______.b____

    View full-size slide

  28. • ز੘੉ ੉࢚ೡ ٺ …. ҕध ޙࢲܳ ׮द ୓௼

    • ઱ࢳب ׮द ࢓ಝࠁ੗

    • (ଵҊ) Glide۽ ࠛ۞য়ח ੉޷૑੄ ઙഫ࠺о ௼׮ݶ, optionalCircleCrop()о ೙ࣻ

    • https://pluu.github.io/blog/android/glide/2022/11/20/glide-circlecrop/
    TIP. Glide

    View full-size slide

  29. Incheon/Songdo
    Case 3.

    UI పझ౟ ~ ੉޷૑

    View full-size slide

  30. పझ౟ ೖۄ޷٘
    ੉޷૑ ୹୊ : https://developer.android.com/training/testing/fundamentals

    View full-size slide

  31. Fake ઱ੑ
    • Mock/Spy

    • Test Fake ё୓

    View full-size slide

  32. • पઁ ٣߄੉झ ഑਷ Emulator పझ౟

    • पઁ ز੘җ ਬࢎࢿ੉ ֫਺

    • ٣߄੉झ ࢚కী ৔ೱ ߉਺

    • ֎౟ਕ௼, ױ݈ ੿ࠁ ١

    • ੌࠗ పझ౟ח ੘ࢿदী ࢿҕೡ ࣻ ੓૑݅,
    ৻ࠗ ৔ೱ(ؘ੉ఠ ࢏ઁ ١)ਵ۽ पಁೡ ഛ
    ܫ੉ ਫ਼੤੸ਵ۽ ઓ੤
    UI Testীࢲ Fake੄ ೙ਃࢿ
    Fake

    View full-size slide

  33. Storage
    ੉޷૑ ֢୹ ߑध
    Request
    Response

    View full-size slide

  34. ೐ܖ೐ܖ ղ ҅ઝ
    PlaceHolder/Errorо ઓ੤ೠ׮ݶ

    ֎౟ਕ௼ ࢚ടী ҙ۲ হ੉

    ೦࢚ যڃ ੉޷૑ܳ ֢୹ оמ
    ২࣌ ੉޷૑

    View full-size slide

  35. • PlaceHolder/Error ੉޷૑ ா੉झо হח ҃਋

    • ࠂࣻ ੉޷૑ ੹୓ ۽٘غয ୭ઙ ചݶ੉ ֢୹غח ҃਋

    • ࠛ߸ೠ ੉޷૑ੋо?

    • दр੉ ૑դ റীب పझ౟ח ࢿҕ೧ঠೣ

    • ѐߊ ࢲߡীࢲח औѱ ࢎۄ૕ ࣻ ੓਺
    ೙ࣻ ੉޷૑

    View full-size slide

  36. э਷ Ѿҗܳ ٜ݅۰ݶ?

    Network = LET/5G + Wifi
    Device

    Network O
    Emulator

    Network O
    Device

    Network X

    View full-size slide

  37. • पઁ ֎౟ਕ௼ ాन হ੉ పझ౟

    • (Optional) য়೐ۄੋ ݽ٘ పझ౟
    పझ౟ ࢿҕܫ ৢܻח ߑߨ?!

    View full-size slide

  38. పझ౟ ࢿҕܫ ৢܻח ߑߨ?!
    Storage
    ৻ࠗ ੷੢ࣗীח ޷੽Ӕೞݶࢲ

    ੉޷૑ ಴द

    View full-size slide

  39. Glide рۚೠ ز੘
    ӝࠄ ઁҕغח Model Loader

    Bitmap, Drawable, String, Uri, File, Drawable Resource ID, URL,

    Byte[], Object
    Glide Registry
    Model Loader Decoding
    Storage

    View full-size slide

  40. Glide ೧Ѿߨ
    Glide Registry
    Model Loader Decoding
    ӝࠄ ઁҕೞח Loaderࠁ׮

    ࢶ೯ ୊ܻೞח Custom Loader ١۾
    Custom

    Model Loader
    Storage

    View full-size slide

  41. ੉޷૑ о۽଻ӝ
    Remote Local asset
    SAMPLE

    View full-size slide

  42. • ೞ٘ਝয : పझ౟ ੢࠺ झ௼ܽ ௼ӝ, ֎౟ਕ௼ оמ ৈࠗ

    • ࣗ೐౟ਝয : ੉޷૑ ۄ੉࠳۞ܻо UI పझ౟ী ੸೤ೠ૑ ৈࠗ

    • झషܻ૑ : ৻ࠗ ੷੢ࣗ੄ ੉޷૑ܳ ۽٘ೞח ҃਋, ೧׼ URL੉ ೦࢚ ਬബೠ૑ ৈࠗ
    ੿ܻ. UI పझ౟੄ Ҋ۰ ࢎ೦

    View full-size slide

  43. Case 4.

    ੗োझ۞਍ ઁझ୊
    Incheon/Songdo

    View full-size slide

  44. ೐ܖ೐ܖ ղ ҅ઝ
    ੑ୹Әా੢

    ࣁ੉೐߅झ

    ੿ӝ৘Ә

    ੗ਬ੸Ә

    ೠ׳੸Ә

    ·

    ·

    ؀୹

    mini

    ѐੋࢎস੗

    View full-size slide

  45. ਘәా੢ ž
    123,456,789ਗ
    · · ·
    ஠٘ ੉୓
    ࣁ੉೐߅झ 1,234,567ਗ

    View full-size slide

  46. ਘәా੢ ž
    Әঘࠁӝ
    · · ·
    ஠٘ ੉୓
    ࣁ੉೐߅झ Әঘࠁӝ
    ਖ਼ঘ ࠁ੐ ೧ઁ

    View full-size slide

  47. ਘәా੢ ž
    · · ·
    ஠٘ ੉୓
    ࣁ੉೐߅झ Әঘࠁӝ
    Әঘࠁӝ
    ઁझ୊ ز੘

    View full-size slide

  48. ਘәా੢ ž
    · · ·
    ஠٘ ੉୓
    ࣁ੉೐߅झ Әঘࠁӝ
    Әঘࠁӝ
    ઁझ୊ ز੘
    123,4

    View full-size slide

  49. ਘәా੢ ž
    · · ·
    ஠٘ ੉୓
    ࣁ੉೐߅झ Әঘࠁӝ
    Әঘࠁӝ
    ઁझ୊ ز੘
    123,456,789ਗ

    View full-size slide

  50. ۨ੉ইਓ ҳઑ
    ਘәా੢ ž
    · · ·
    ஠٘ ੉୓
    ࣁ੉೐߅झ
    ImageView
    Button
    TextView
    पઁ ҳઑ৬ 100% زੌೞ૑ ঋणפ׮.
    Әঘࠁӝ
    Әঘࠁӝ

    View full-size slide

  51. ઁझ୊ оמ ৔৉ ࢶ੿
    ਘәా੢ ž
    · · ·
    ஠٘ ੉୓
    ࣁ੉೐߅झ
    पઁ ҳઑ৬ 100% زੌೞ૑ ঋणפ׮.
    Әঘࠁӝ
    Әঘࠁӝ

    View full-size slide

  52. ೐ܖ೐ܖ ղ ҅ઝ
    ਘәా੢ ž
    · · ·
    ஠٘ ੉୓
    ࣁ੉೐߅झ
    ࢎਊ੗݃׮ ׮ܲ ఠ஖
    ઝ → ਋ ઁझ୊ח

    ࢎਊ੗݃׮ ୭ୡ ఠ஖ द੘ ૑੼੉ ઑӘঀ ׮ܴ

    1. ೧׼ ৔৉ ߄۽ ਤ

    2. ೧׼ ৔৉ࠁ׮ ৽ଃীࢲ द੘
    Әঘࠁӝ
    1
    2
    Әঘࠁӝ

    View full-size slide

  53. ೐ܖ೐ܖ ղ ҅ઝ
    ਘәా੢ ž
    · · ·
    ஠٘ ੉୓
    ࣁ੉೐߅झ
    ࢎਊ੗݃׮ ׮ܲ ఠ஖
    ઝ → ਋ ઁझ୊ח

    ࢎਊ੗݃׮ ୭ୡ ఠ஖ द੘ ૑੼੉ ઑӘঀ ׮ܴ

    1. ೧׼ ৔৉ ߄۽ ਤ

    2. ೧׼ ৔৉ࠁ׮ ৽ଃীࢲ द੘
    ఠ஖ೞӝী

    ੸੺ೠ ௼ӝੋо?
    Әঘࠁӝ
    Әঘࠁӝ

    View full-size slide

  54. ೐ܖ೐ܖ ղ ҅ઝ
    ਘәా੢ ž
    · · ·
    ஠٘ ੉୓
    ࣁ੉೐߅झ
    ఠ஖ೞӝী

    ੸੺ೠ ௼ӝੋо?
    ӂ੢ ఠ஖ ௼ӝ
    Material 3 : ఠ஖ ߂ ನੋఠ : 48px x 48px

    • https://m3.material.io/foundations/accessible-design/
    accessibility-basics

    Apple HIG : 44 x 44pt

    • https://developer.apple.com/design/human-interface-
    guidelines/accessibility#Buttons-and-controls
    Әঘࠁӝ
    Әঘࠁӝ

    View full-size slide

  55. ࠁా
    য۰਑ য۰਑
    ࠁా
    ए਑
    ࠁా
    য۰਑
    ৽ࣚ
    ए਑ ए਑
    নࣚ য়ܲࣚ

    View full-size slide

  56. ఠ஖ ৔৉
    ਘәా੢ ž
    · · ·
    ஠٘ ੉୓
    ࣁ੉೐߅झ Әঘࠁӝ
    Әঘࠁӝ
    पઁ ҳઑ৬ 100% زੌೞ૑ ঋणפ׮.

    View full-size slide

  57. ఠ஖ ৔৉
    ਘәా੢ ž
    · · ·
    ஠٘ ੉୓
    ࣁ੉೐߅झ Әঘࠁӝ
    Әঘࠁӝ
    123,456,789ਗ
    पઁ ҳઑ৬ 100% زੌೞ૑ ঋणפ׮.

    View full-size slide

  58. ఠ஖ ৔৉
    ਘәా੢ ž
    · · ·
    ஠٘ ੉୓
    ࣁ੉೐߅झ Әঘࠁӝ
    Әঘࠁӝ
    पઁ ҳઑ৬ 100% زੌೞ૑ ঋणפ׮.
    123,456,789ਗ

    View full-size slide

  59. ਘәా੢ ž
    · · ·
    ੉୓
    ࣁ੉೐߅झ Әঘࠁӝ
    Әঘࠁӝ
    123,4
    ஠٘
    ਘәా੢ ž
    · · ·
    ੉୓
    ࣁ੉೐߅झ Әঘࠁӝ
    Әঘࠁӝ
    123,456,789ਗ
    ஠٘
    ѐࢶ ߡ੹

    View full-size slide

  60. TIP. ఠ஖ ৔৉ ഛࠁ
    1. Padding ࢎਊ

    2. TouchDelegate/HitRect ઑ೤ (ৈ۞࠙੄ दрਸ ࡐ঒ਸ ࣻ ੓਺)

    3. ఠ஖ ৔৉ ഛ੢ਸ SPEC-OUT

    4. ӝఋ
    ଵҊ ੗ܐ

    > [ࢗ૕] ߡౡ੄ ௿ܼ ఠ஖ ৔৉ ழझథ ೧ࠁӝ

    > TouchDelegate/HitRect ~ ઁೠػ ߧਤ۽ ఠ஖ ੉߮౟ ٜ݅ӝ

    View full-size slide

  61. Case 5.

    ߈ࠂ ౵ੌ ࢤࢿ

    ೒۞Ӓੋ ઁ੘
    Incheon/Songdo

    View full-size slide

  62. • ೐۽ં౟੄ ؀ӏݽച + ழझథ

    • Android Studio ѐߊ ҕా੄ ೠ҅

    • ߈ࠂ ੘স + ӝࠄ ҳࢿ ജ҃
    ೒۞Ӓੋ੄ ೙ਃࢿ

    View full-size slide

  63. IDE৬ ҙ۲ػ ӝৈೠ ӝמٜ
    • Plugin

    • Feature Module ࢤࢿ

    • Sample Feature Module ࢤࢿ

    • Activity/Fragment ࢤࢿ

    • Custom Live Templates

    • Custom File Templates

    • Custom Lint
    ୭Ӕ ୶о

    View full-size slide

  64. Single App Module

    data/domain ਬޖ
    Module

    View full-size slide

  65. UI Domain Data
    Layered Architecture

    ҅க ױਤ ݽٕ

    View full-size slide

  66. Features Module

    ੘਷ ೖ୛ ݽٕ۽ ܻ࠙
    UI Domain Data

    View full-size slide

  67. Common Features Module

    ೖ୛ٜب ҕా੉ ઓ੤
    UI
    Feature UI
    Common
    Domain Data

    View full-size slide

  68. UI
    Feature UI
    Common
    Domain Data Sample
    Sample apps Development

    ೙ਃೠ ӝמ݅ਵ۽ ҳࢿػ ࢠ೒ জ

    View full-size slide

  69. UI
    Feature UI
    Common
    Domain Data Sample
    ࠽٘ दр਷

    ଵઑೞח Moduleࣻী ৔ೱ

    - Gradle Task
    Sample apps Development

    ೙ਃೠ ӝמ݅ਵ۽ ҳࢿػ ࢠ೒ জ

    View full-size slide

  70. UI
    Feature UI
    Common
    Domain Data Sample
    ೐۽ં౟݃׮ ҳࢿ

    ೐۽ં౟ by ೐۽ં౟

    View full-size slide

  71. UI
    Feature UI
    Common
    Data Sample
    ೐۽ં౟݃׮ ҳࢿ

    ೐۽ં౟ by ೐۽ં౟

    View full-size slide

  72. Module݃׮ ೙ਃೠ ର੉
    UI
    Feature UI
    Common
    Domain Data Sample
    App
    Android

    Application
    Android Library
    Core
    Java/Kotlin Library

    or

    Android Library
    Android

    Application
    ѐߊदী

    ݆਷ ੘স + ߈ࠂ
    ୭ୡ

    ӝࠄ ࢤࢿ

    View full-size slide

  73. ߈ࠂਸ ೒۞Ӓੋਵ۽ ؀୓
    UI
    Feature UI
    Common
    Domain Data Sample
    App
    Android

    Application
    Android Library
    Core
    Java/Kotlin Library

    or

    Android Library
    Android

    Application
    - Application

    - Library

    - Sample
    Module
    - ӝࠄ(మ೒݁) ௏٘
    UI

    View full-size slide

  74. • ׮ࣻ੄ ౵ੌਸ ٜ݅ ࣻ ੓ਵ޲۽ ಞܻ

    • դ੉بח য۰਍ ಞ

    • ଵҊೡ ੗ܐ ࠗ઒

    • ASী ҙ۲ؼࣻ۾, সؘ੉౟ द ࣻ੿ ߓನ ೙ਃ

    • рױೠ ӝמٜ਷ File Template, Live Template ӂ੢
    TIP. ೒۞Ӓੋ ઁ੘?!

    View full-size slide

  75. ؊ ੗ࣁೠ ղਊ

    - AS ࢸ੿

    - ೒۞Ӓੋ ઁ੘

    Re:Android Studio ࢸ੿ ࢓ಝࠁӝ ߂ ࢤ࢑ࢿ ৢܻӝ

    https://speakerdeck.com/pluu/re-android-studio-seoljeong-salpyeobogi-mic-saengsanseong-olrigi

    View full-size slide

  76. хࢎ೤פ׮!!
    Pluu

    KakaoBank

    Android App Developer

    GDE for Android

    View full-size slide