์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 

[iOS] Swift Modern Collection View & MVVM ํŒจํ„ด ๊ฐ€์ด๋“œ

MVVM ํŒจํ„ด๊ณผ Modern Collection View๋ฅผ ์‚ฌ์šฉํ•ด ๋„คํŠธ์›Œํ‚น์„ ๊ตฌํ˜„ํ•˜๊ณ , ๋‹ค์–‘ํ•˜๊ณ  ๋™์ ์ธ Collection View๋ฅผ ์ž์œ ์ž์žฌ๋กœ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[๋ชจ๋ฐ”์ผ ์•ฑ ๊ฐœ๋ฐœ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • Modern Collection View(Diffable Datasource + Compositional Layout)๋ฅผ ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‹ฌํ™”๊นŒ์ง€ ๋ฐฐ์›Œ๋ณผ ๊ฑฐ์˜ˆ์š”.

  • MVVM ํŒจํ„ด์„ ์‚ฌ์šฉํ•ด์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค.

  • Snapkit, Kingisher, RxSwift ๋ฅผ ์‚ฌ์šฉํ•ด๋ณผ ์ˆ˜ ์žˆ์–ด์š”.

  • ๋‹ค์–‘ํ•œ ํ˜•ํƒœ์˜ Collection View๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์–ด์š”.

Swift iOS UI, ์ œ๋Œ€๋กœ ๋‹ค๋ฃจ๋Š” ํ•ต์‹ฌ ๊ธฐ์ˆ ! ๐Ÿ“ฒ

iOS Swift ๋ ˆ์ด์•„์›ƒ ๊ตฌํ˜„์„ ์œ„ํ•œ
MVVM ํŒจํ„ด + ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ™œ์šฉ

์‚ฌ์ง„๊ณผ ๊ฐ™์€ ์•ฑ์˜ ๋ ˆ์ด์•„์›ƒ์€ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ• ๊นŒ์š”? ์Šคํฌ๋กค์„ ๋‚ด๋ฆฌ๋ฉด ๋” ๋‹ค์–‘ํ•œ ๋ ˆ์ด์•„์›ƒ์ด ์žˆ์„ ๊ฒƒ์ด๊ณ  ์ˆœ์„œ ๋˜ํ•œ API์— ๋”ฐ๋ผ ๋ฐ”๋€” ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Compositional Layout๊ณผ Diffable Datasource๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด Table View ์•ˆ์— ์—ฌ๋Ÿฌ ์ปฌ๋ ‰์…˜ ๋ทฐ(Collection View)๋ฅผ ์ง‘์–ด๋„ฃ์„ ํ•„์š” ์—†์ด ์—ฌ๋Ÿฌ ๋ ˆ์ด์•„์›ƒ์„ ํ•˜๋‚˜์˜ ์ฝœ๋ ‰์…˜ ๋ทฐ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ณธ ๊ฐ•์˜๋Š” Compositional Layout๊ณผ Diffable Datasource๋ฅผ ์‚ฌ์šฉํ•œ Modern Collection View๋ฅผ ํ˜„์—…์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งˆ์Šคํ„ฐํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ์‹ฌํ™” ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌํ˜„ํ•˜๋ฉด์„œ Snapkit, RxSwift ๋“ฑ ํ˜„์—…์— ๋งŽ์ด ์“ฐ์ด๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉํ•ด MVVM ํŒจํ„ด์„ ๊ตฌํ˜„ํ•ด ๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์˜คํ”ˆ API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ง์ ‘ ๋„คํŠธ์›Œํ‚น์„ ๊ตฌํ˜„ํ•˜์—ฌ ๋ฐ์ดํ„ฐ ๊ฐ’๋“ค์„ ์ปฌ๋ ‰์…˜ ๋ทฐ์— ๊ทธ๋ฆฌ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 ๋ ˆ์ด์•„์›ƒ ๊ตฌํ˜„์— ํ•„์š”ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ ์šฉํ•˜๊ณ , MVVM ํŒจํ„ด์„ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ•˜๋Š”์ง€ ์ง์ ‘ ๊ฒฝํ—˜ํ•ด๋ณด์„ธ์š”!

 
 
 
 
 

โœ… 
Modern Collection View๋ฅผ ๋งˆ์Šคํ„ฐํ•ด ๋‹ค์–‘ํ•œ UI๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

โœ… 
๊ธฐ์ดˆ โ†’ ์‹ฌํ™” โ†’ ์‘์šฉ์œผ๋กœ ๊ณผ์ •์„ ๋‚˜๋ˆ  ๋‹จ๊ณ„๋ณ„๋กœ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โœ… 
์‘์šฉ ๋‹จ๊ณ„์—์„œ๋Š” ๊ณต์šฉ API๋ฅผ ์‚ฌ์šฉํ•ด ์ง์ ‘ ๋„คํŠธ์›Œํฌ๋ฅผ ๊ตฌํ˜„ํ•˜๊ณ  ์กฐ๊ธˆ ๋” ๋ณต์žกํ•œ UI๋ฅผ ๋‹ค๋ค„๋ณผ ๊ฑฐ์˜ˆ์š”.

โœ… 
SnapKit, Kingfisher, Rxswift, RxAlamofire๋ฅผ ์‚ฌ์šฉํ•ด ์‘์šฉ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌํ˜„ํ•˜๊ฒŒ ๋ผ์š”.

โœ… 
MVVM ํŒจํ„ด์œผ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌํ˜„ํ•ด๋ณผ ๊ฑฐ์˜ˆ์š”.

โœ… 
๊ตฌ๊ธ€๋ง์œผ๋กœ ์ฐพ์„ ์ˆ˜ ์žˆ๋Š” ๋‚ด์šฉ๋ณด๋‹ค ๋” ๊นŠ์ด์žˆ๋Š” ํ•™์Šต์„ ํ•  ์ˆ˜ ์žˆ์–ด์š”!


๊ฐ•์˜๋Š” ์ด๋ ‡๊ฒŒ ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค ๐Ÿ“š

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ด์š”

  • Swift์™€ UIKit์„ ๋‹ค๋ค„๋ณด์‹  ๋ถ„ 
  • ๋‹ค์–‘ํ•œ ์ปฌ๋ ‰์…˜ ๋ทฐ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐ ์–ด๋ ค์›€์ด ์žˆ์œผ์‹  ๋ถ„ 
  • ๋ชจ๋˜ ์ปฌ๋ ‰์…˜ ๋ทฐ๋ฅผ ์‚ฌ์šฉํ•ด ์ƒˆ๋กœ์šด ๋ฐฉ์‹์œผ๋กœ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌํ˜„ํ•ด๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„ 

4๋…„์ฐจ ์Šคํƒ€ํŠธ์—… ๋ชจ๋ฐ”์ผ iOS ๊ฐœ๋ฐœ์ž, ๋ค๋ฒจ๋กœํผ์ž…๋‹ˆ๋‹ค ๐Ÿ˜ƒ
์—ฌ๋Ÿฌ๋ถ„๊ป˜ ๋ชจ๋ฐ”์ผ ์•ฑ ๊ฐœ๋ฐœ์— ํ•„์š”ํ•œ ํŒจํ„ด & ๋ผ์ด๋ธŒ๋ฒ„๋ฆฌ ํ™œ์šฉ๋ฒ•์„ ์ „ํ•ด๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

1. ๊ธฐ์ดˆ Modern Collection View ์‚ฌ์šฉ๋ฒ•

  • ์ด ๊ฐ•์˜์—์„œ๋Š” Compositional Layout์„ ํ™œ์šฉํ•œ ๋ ˆ์ด์•„์›ƒ ๊ตฌํ˜„๊ณผ Diffable Datasource๋ฅผ ํ†ตํ•œ ๋ฐ์ดํ„ฐ์™€ ์…€ ๊ด€๋ฆฌ ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šฐ๋ฉฐ, ๊ฐ„๋‹จํ•œ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ๊ธฐ์ดˆ์ ์ธ ์‚ฌ์šฉ ์›๋ฆฌ๋ฅผ ์ตํž ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋ณต์žกํ•œ ๋ ˆ์ด์•„์›ƒ๊ณผ ๋™์  ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ๋ฅผ ์†์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ์ˆ ์„ ์Šต๋“ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
  • ๋˜ํ•œ, SnapKit์„ ์‚ฌ์šฉํ•œ ๋ ˆ์ด์•„์›ƒ ๊ตฌ์„ฑ๊ณผ Kingfisher๋ฅผ ํ™œ์šฉํ•œ ์ด๋ฏธ์ง€ ๋กœ๋”ฉ์„ ๋‹ค๋ฃจ์–ด, ์‹ค๋ฌด์—์„œ ํ”ํžˆ ์‚ฌ์šฉ๋˜๋Š” ๊ธฐ๋Šฅ๋“ค์„ ์ตํžˆ๊ณ , ์ด๋ฅผ ์‘์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

2. ๊ธฐ์ดˆ Modern Collection View ์‹ค์Šต

  • ์ด ๊ฐ•์˜์—์„œ๋Š” ๊ธฐ์ดˆ์—์„œ ๋ฐฐ์šด ๋‚ด์šฉ์„ ํ† ๋Œ€๋กœ ๋” ๋‹ค์–‘ํ•œ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌํ˜„ํ•ด ๋ณด๋ฉฐ, Compositional Layout๊ณผ Diffable Datasource์˜ ์‹ค์ „ ์‘์šฉ์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋‹จ์ˆœํ•œ ์˜ˆ์ œ๋ฅผ ๋„˜์–ด์„œ ๋ณต์žกํ•œ ํ™”๋ฉด ๊ตฌ์„ฑ๊ณผ ๋™์  ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ๋ฅผ ๋”์šฑ ๋Šฅ์ˆ™ํ•˜๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๋Šฅ๋ ฅ์„ ํ‚ค์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
 

3. MVVM + Network ๊ตฌํ˜„

  • ์ด ๊ฐ•์˜์—์„œ๋Š” Swift Package Manager(SPM)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ์„ค์ •ํ•˜๊ณ , RxSwift๋ฅผ ํ™œ์šฉํ•œ MVVM ํŒจํ„ด(Input-Output)๊ณผ ๋„คํŠธ์›Œํฌ ๊ตฌํ˜„์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค. ๋˜ํ•œ, ์˜คํ”ˆ API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ง์ ‘ ๋„คํŠธ์›Œํ‚น์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์‹ค๋ฌด์—์„œ ํ•„์š”ํ•œ ๋„คํŠธ์›Œํ‚น๊ณผ ๋ฐ˜์‘ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ๋ณด๋‹ค ํšจ์œจ์ ์œผ๋กœ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

4. Modern Collection View ์‹ฌํ™”

  • ์ด ๊ฐ•์˜์—์„œ๋Š” ๊ตฌํ˜„๋œ MVVM ํ”„๋กœ์ ํŠธ์— Modern Collection View๋ฅผ ์ ์šฉํ•˜์—ฌ ๋‹ค์–‘ํ•œ ๋ ˆ์ด์•„์›ƒ์„ ๋™์ ์œผ๋กœ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋ณต์žกํ•œ ๋ฐ์ดํ„ฐ์™€ UI ๊ตฌ์„ฑ๋„ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๊ณ , ์‹ค๋ฌด์—์„œ ๋ฐ”๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ๋ฅผ ์ตํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“ข ์ˆ˜๊ฐ• ์ „ ๊ผญ ํ™•์ธํ•ด์ฃผ์„ธ์š”.

  • ๊ธฐ๋ณธ์ ์ธ Swift ๋ฌธ๋ฒ•๊ณผ UIKit์„ ๋‹ค๋ค„๋ณธ ๊ฒฝํ—˜์ด ์žˆ์œผ์…”์•ผ ํ•ด์š”. ์ด ๊ฐ•์˜์—์„œ๋Š” ๊ด€๋ จ ๋‚ด์šฉ์— ๋Œ€ํ•œ ๋””ํ…Œ์ผํ•œ ์„ค๋ช…์„ ๋‹ค๋ฃจ์ง€ ์•Š์•„์š”.
  • ์šด์˜์ฒด์ œ๋กœ๋Š” macOS๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ, ์‹ค์Šต์„ ์œ„ํ•ด Xcode ๋ฒ„์ „ 13 ์ด์ƒ์„ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • Swift Collection View UI๋ฅผ ์ž์œ ์ž์žฌ๋กœ ๋‹ค๋ฃจ๊ณ  ์‹ถ์€ ๋ถ„

  • ํ•œ ๋‹จ๊ณ„ ๋‚˜์•„๊ฐ„ Collection View๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์€ ๋ถ„

  • ๋‹ค์–‘ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • MVVM ํŒจํ„ด์— ์ต์ˆ™ํ•˜์ง€ ์•Š์€ ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • Swift

  • UIKit

์•ˆ๋…•ํ•˜์„ธ์š”
๋ค๋ฒจ๋กœํผ์ž…๋‹ˆ๋‹ค.

342

๋ช…

์ˆ˜๊ฐ•์ƒ

17

๊ฐœ

์ˆ˜๊ฐ•ํ‰

23

๊ฐœ

๋‹ต๋ณ€

4.5

์ 

๊ฐ•์˜ ํ‰์ 

4

๊ฐœ

๊ฐ•์˜

6๋…„์ฐจ iOS ๊ฐœ๋ฐœ์ž ๋ค๋ฒจ๋กœํผ์ž…๋‹ˆ๋‹ค

ํ˜„์—…์—์„œ ๋ฐ”๋กœ ์‚ฌ์šฉํ• ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜

์ดˆ์ค‘๊ธ‰ ๋ ˆ๋ฒจ์—๊ฒŒ ํ•„์š”ํ•œ ๊ฐ•์˜๋ฅผ ๋งŒ๋“ค๊ฒ ์Šต๋‹ˆ๋‹ค

 

 

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

54๊ฐœ โˆ™ (7์‹œ๊ฐ„ 33๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!