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

[LV1] Jetpack Compose - UI ์—ฐ์Šตํ•˜๊ธฐ

XML๋งŒ์œผ๋กœ ํ•˜๋Š” ์•ˆ๋“œ๋กœ์ด๋“œ ๊ฐœ๋ฐœ์„ ๋ฒ—์–ด๋‚˜, Jetpack Compose๋ฅผ ๋„์ž…ํ•ด๋ณผ๊นŒ์š”?

Thumbnail

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

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

  • Jetpack Compose ์‚ฌ์šฉ๋ฒ•

  • Jetpack Compose ์žฅ์ 

 ๊ณ„ํš๋งŒ ํ•˜๊ณ  ์žˆ๋˜ Jetpack Compose, 
์ด๋ฒˆ์— ํ•œ๋ฒˆ ํ•จ๊ป˜ ๋ฐฐ์›Œ๋ณผ๊นŒ์š”?

JetPack Compose์˜ ์žฅ์ , ์•Œ๊ณ  ๊ณ„์‹ ๊ฐ€์š”?

๊ธฐ์กด XML์„ ์ด์šฉํ•ด์„œ ์•„๋ž˜์™€ ๊ฐ™์€ ํ™”๋ฉด์„ ๋งŒ๋“ค์–ด๋‹ฌ๋ผ๋Š” ์š”๊ตฌ์‚ฌํ•ญ์ด ์žˆ์„ ๋•Œ ์–ด๋–ค ์ƒ๊ฐ์ด ๋จผ์ € ๋“œ์‹œ๋‚˜์š”? (์•„๋ž˜์˜ ์•ฑ์€ ๋ชจ๋‘ ์ง์ ‘ ๊ฐ•์˜์—์„œ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค.)

"๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ฐพ์•„๋ด์•ผ๊ฒ ๋‹ค."
"์ปค์Šคํ…€๋ทฐ๋กœ ๋งŒ๋“ค๋ ค๋ฉด ๋ณต์žกํ•˜๊ฒ ๋Š”๋ฐ?" 
ํ•˜๋Š” ์ƒ๊ฐ์ด ์šฐ์„ ์ ์œผ๋กœ ๋“ค์ง€๋Š” ์•Š๋‚˜์š”? 
๊ทธ๋ ‡๋‹ค๋ฉด Jetpack Compose ๋„์ž…์„ ๊ฒ€ํ† ํ•ด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

์—ฌ์ „ํžˆ Compose์˜ ์žฅ์ ์„ ๋Š๋ผ๊ธฐ ์–ด๋ ค์šฐ์‹ ๊ฐ€์š”?

๊ทธ๋ ‡๋‹ค๋ฉด ์ด๋Ÿฐ ์•ฑ์€ ์–ด๋– ์‹ ๊ฐ€์š”?

์ด๋Ÿฐ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋˜ํ•œ Compose๋ฅผ ์ด์šฉํ•˜๋ฉด ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 
๋ชจ๋‘ ๊ฐ•์˜์—์„œ ์ง์ ‘ ํ•ด๋ณผ ์ˆ˜ ์žˆ๋„๋ก ์•Œ๋ ค๋“œ๋ฆด๊ฒŒ์š”!


์ง์ ‘ ๊ฒฝํ—˜ํ•œ JetPack Compose์˜
์œ ์šฉํ•จ์„
์ „ํ•ด๋“œ๋ ค์š”.

Jetpack Compose๋Š” ์•ˆ๋“œ๋กœ์ด๋“œ์—์„œ ์ ์€ ์ฝ”๋“œ๋กœ UI ๊ฐœ๋ฐœ์„ ๊ฐ€์†ํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ๋„๊ตฌ์ž…๋‹ˆ๋‹ค.

โ€œ(โ€ฆ) ๋„ค์ดํ‹ฐ๋ธŒ Android UI๋ฅผ ๋นŒ๋“œํ•˜๊ธฐ ์œ„ํ•œ ์ตœ์‹  ๋„๊ตฌ ํ‚คํŠธ์ž…๋‹ˆ๋‹ค. Jetpack Compose๋Š” ๋” ์ ์€ ์ˆ˜์˜ ์ฝ”๋“œ, ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ, ์ง๊ด€์ ์ธ Kotlin API๋กœ Android์—์„œ์˜ UI ๊ฐœ๋ฐœ์„ ๊ฐ„์†Œํ™”ํ•˜๊ณ  ๊ฐ€์†ํ™”ํ•ฉ๋‹ˆ๋‹ค.โ€ (๊ตฌ๊ธ€ ๊ณต์‹ ๋ฌธ์„œ)

์‚ฌ๋‚ด์—์„œ ๋ณต์žกํ•œ UI๋ฅผ ๋งŒ๋“œ๋Š” ํ”„๋กœ์ ํŠธ๊ฐ€ ์žˆ์–ด, ์ ๊ทน์ ์œผ๋กœ Jetpack Compose์„ ์Šคํ„ฐ๋””ํ•˜๊ณ  ๋„์ž…ํ•ด๋ดค์Šต๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ ๋„์ž…ํ•ด ๋ณด๋‹ˆ UI ์ž‘์„ฑ์— ์ฝ”๋“œ๊ฐ€ ์ƒ๋‹นํžˆ ์ค„์–ด๋“œ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์—ˆ๊ณ , UI์™€ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ์—ฐ๊ฒฐํ•˜๋Š” ๊ณผ์ •์—์„œ ํ”ผ๋กœ๋„๊ฐ€ ์ค„์–ด๋“œ๋Š” ๊ฒƒ์„ ๋Š๋‚„ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ์ ์œผ๋กœ, ๊ธฐ์กด XML๋งŒ ์‚ฌ์šฉํ•˜์—ฌ ์•ˆ๋“œ๋กœ์ด๋“œ ํ™”๋ฉด์„ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ์ƒ์‚ฐ์„ฑ ๋˜ํ•œ ๋†’์•„์ง„ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ์ฃ .

๊ทธ๋ž˜์„œ, ์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค!

๊ธฐ์กด ์•ˆ๋“œ๋กœ์ด๋“œ(XML)๋กœ ์•ฑ ๊ฐœ๋ฐœ์„ ํ•ด๋ณด์…จ๊ณ , Compose ๋„์ž…์„ ๊ฒ€ํ†  ์ค‘์ด์‹  ๋ถ„๋“ค

Jetpack Compose๊ฐ€ ์–ด๋–ค ๊ฑด์ง€, ์‹ค์ œ ์žฅ์ ์€ ๋ฌด์—‡์ธ์ง€ ๊ถ๊ธˆํ•˜์‹  ๋ถ„๋“ค

์•ˆ๋“œ๋กœ์ด๋“œ ๊ฐœ๋ฐœ์ž๋กœ ์ทจ์—…์„ ์ค€๋น„ํ•˜์‹œ๋Š” ๋ถ„๋“ค (์š”์ฆ˜ ์ฑ„์šฉ ๊ณต๊ณ ์— Compose๊ฐ€ ๋งŽ์ด ์–ธ๊ธ‰๋ฉ๋‹ˆ๋‹ค!)

โœ‹ ์ž ๊น! ์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜๋Š” ๋งž์ง€ ์•Š์•„์š”.

  • ์•ˆ๋“œ๋กœ์ด๋“œ ์•ฑ ๊ฐœ๋ฐœ์ด ์ฒ˜์Œ์ด์‹  ๋ถ„๋“ค : ์ฝ”ํ‹€๋ฆฐ ๋˜๋Š” ์™•์ดˆ๋ณด ์•ˆ๋“œ๋กœ์ด๋“œ ๊ฐ•์˜๋ฅผ ์ถ”์ฒœํ•ด๋“œ๋ ค์š”.
  • ์ด๋ฏธ Compose๋กœ ๊ฐœ๋ฐœ์„ ์–ด๋Š ์ •๋„ ํ•ด ๋ณด์•˜๊ณ , ์‹ฌํ™” ๊ณผ์ •์„ ์›ํ•˜์‹œ๋Š” ๋ถ„๋“ค : ์‹ฌํ™” ๊ณผ์ •์€ ๋‹ค์Œ ๊ฐ•์˜๋กœ ์ค€๋น„ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์‰ฌ์šด ๊ฒƒ๋ถ€ํ„ฐ ์ฐจ๊ทผ์ฐจ๊ทผ 
Jetpack Compose ๊ธฐ์ดˆ ์™„์„ฑ

์‰ฌ์šด ์˜ˆ์ œ๋ถ€ํ„ฐ ์กฐ๊ธˆ์”ฉ ๋‚œ์ด๋„๋ฅผ ๋†’์—ฌ๊ฐ€๋ฉฐ, Jetpack Compose์— ์ต์ˆ™ํ•ด์งˆ ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์„น์…˜ 1 - ๊ฐ„๋‹จํ•œ ๋ ˆ์ด์•„์›ƒ ์‚ดํŽด๋ณด๊ธฐ

Jetpack Compose์˜ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ๋“ค์„ ์‹ค์Šตํ•ด๋ณด๋ฉฐ ์›Œ๋ฐ์—…์„ ํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 2 - ์ด๋ ฅ์„œ ์•ฑ ๋งŒ๋“ค๊ธฐ

์ด์ „ ์„น์…˜์—์„œ ๋ฐฐ์šด ๋‚ด์šฉ์„ ๋ฐ”ํƒ•์œผ๋กœ ๊ฐ„๋‹จํ•œ ์ด๋ ฅ์„œ ์•ฑ์„ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค.

์„น์…˜ 3 - ์ฃผ์‚ฌ์œ„ ์•ฑ ๋งŒ๋“ค๊ธฐ

์ฃผ์‚ฌ์œ„ ์ˆซ์ž๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค ๋‚˜ํƒ€๋‚˜๋Š” ํ™”๋ฉด์„ ์ด๋ฏธ์ง€๊ฐ€ ์•„๋‹Œ ์ฝ”๋“œ๋กœ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•ด๋ด…๋‹ˆ๋‹ค.

์„น์…˜ 4 - ๊ทธ๋ž˜ํ”„ ์•ฑ ๋งŒ๋“ค๊ธฐ

์‹ค์Šต์„ ํ†ตํ•ด ๋‹ค์–‘ํ•œ ๊ทธ๋ž˜ํ”„๋ฅผ ์‰ฝ๊ฒŒ ๋งŒ๋“œ๋Š” ์•ฑ์„ ์ œ์ž‘ํ•ด๋ด…๋‹ˆ๋‹ค.

์„น์…˜ 5 - ๋‹ฌ๋ ฅ ์•ฑ ๋งŒ๋“ค๊ธฐ

๊ธฐ์กด XML์—์„œ ๋งŒ๋“ค๊ธฐ ์–ด๋ ค์› ๋˜ ๋‹ฌ๋ ฅ ํ™”๋ฉด์„ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•ด๋ด…๋‹ˆ๋‹ค.

์„น์…˜ 6 - Theme 

ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ์‹œ ์ฒ˜์Œ ๋งŒ๋“ค์–ด์ง€๋Š” Theme๊ฐ€ ์–ด๋–ค ๊ฒƒ์ธ์ง€ ์‚ดํŽด๋ณด๊ณ  ์ปค์Šคํ…€ํ•ด๋ด…๋‹ˆ๋‹ค.

์„น์…˜ 7 - ์ฟ ํŒก ๋ฉ”์ธ ํ™”๋ฉด ๋งŒ๋“ค๊ธฐ

์ฟ ํŒก ๋ฉ”์ธ ํ™”๋ฉด๊ณผ ์œ ์‚ฌํ•œ ํ™”๋ฉด์„ ๋งŒ๋“ค์–ด๋ณด๋ฉด์„œ Scroll๊ณผ Pager์— ๋Œ€ํ•ด์„œ ์‹ค์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 8 - ํฌ์ผ“๋ชฌ ์นด๋“œ ๋งŒ๋“ค๊ธฐ

์นด๋“œ๊ฐ€ ๋’ค์ง‘ํžˆ๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์‹ค์Šตํ•ด๋ณด๋ฉฐ, Compose์—์„œ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ตฌํ˜„๋˜๋Š” ๊ฒƒ์„ ์‹ค์Šตํ•ด๋ด…๋‹ˆ๋‹ค.

์„น์…˜ 9 - Compose ์‚ฌ์šฉ ์•ฝ๊ฐ„์˜ ํŒ (๋ณด๋„ˆ์Šค!)

Compose๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ ํ—ท๊ฐˆ๋ฆด ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„๊ณผ XML๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ด…๋‹ˆ๋‹ค.


Q&A ๐Ÿ’ฌ

Q. ์„ ์ˆ˜ ์ง€์‹์ด ํ•„์š”ํ•œ๊ฐ€์š”?

๋„ค. ๊ธฐ์กด XML์„ ์ด์šฉํ•˜์—ฌ RecyclerView ์ •๋„๋Š” ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๋ถ„์ด ์ˆ˜๊ฐ•ํ•˜์‹œ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์ฝ”ํ‹€๋ฆฐ ๋ฌธ๋ฒ•์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ์ง€์‹์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

Q. ์–ด๋Š ์ •๋„์˜ ์ˆ˜์ค€๊นŒ์ง€ Compose๋ฅผ ๋‹ค๋ฃจ๋‚˜์š”?

์ฃผ๋กœ ๊ธฐ์ดˆ์ ์ธ UI ์ค‘์‹ฌ์œผ๋กœ ๊ฐ•์˜๊ฐ€ ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค.

Q. LV1 ์ดํ›„ LV2, LV3๋„ ์žˆ๋‚˜์š”?

  • [LV1] Jetpack Compose - UI ์—ฐ์Šตํ•˜๊ธฐ (ํ˜„์žฌ ๊ฐ•์˜)

  • [LV2] Jetpack Compose - UI์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜ (๋งํฌ)

  • [LV3] Jetpack Compose - ๊ทธ๋Ÿด ๋“ฏํ•œ ๋‹ค์ด์–ดํŠธ ์•ฑ ๋งŒ๋“ค๊ธฐ (๋งํฌ)

Q. ๊ฐ•์˜ ์Šคํƒ€์ผ์€ ์–ด๋–ค๊ฐ€์š”?

์ƒ๋‹น์ˆ˜์˜ ์ˆ˜์—…์„ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋กœ ์„ค์ •ํ•ด๋‘์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ˆ˜์—…์„ ํ™•์ธํ•ด๋ณด์‹  ๋‹ค์Œ ๊ฐ•์˜ ์Šคํƒ€์ผ์ด ๋งž๋Š”์ง€ ํ™•์ธํ•ด๋ณด์‹  ํ›„ ์ˆ˜๊ฐ•ํ•˜์‹œ๊ธฐ๋ฅผ ๊ถŒ์žฅ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

Q. ๊ตฌ๊ธ€ ๊ณต์‹ ๋ฌธ์„œ๊ฐ€ ์žˆ๋Š”๋ฐ ์™œ ๊ฐ•์˜๋ฅผ ๋“ค์–ด์•ผ ํ•˜๋‚˜์š”?

๊ฐœ์ธ์ ์œผ๋กœ ๊ตฌ๊ธ€ ๊ณต์‹ ๋ฌธ์„œ๋Š” ์•Œ๊ณ  ๋ณด๋ฉด ์ž˜ ์„ค๋ช…๋˜์–ด ์žˆ์ง€๋งŒ, ์ž…๋ฌธ์ž ์ž…์žฅ์—์„œ๋Š” ์นœ์ ˆํ•˜์ง€ ์•Š๋‹ค๊ณ  ๋Š๊ปด์งˆ ๋•Œ๊ฐ€ ๋งŽ์•˜์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ฐ•์˜์—์„œ๋Š” Jetpack Compose ์ž…๋ฌธ์ž ์ž…์žฅ์—์„œ ๋‹จ๊ณ„์ ์œผ๋กœ ์‰ฝ๊ฒŒ ์„ค๋ช…๋“œ๋ฆฌ๋ ค๊ณ  ๋…ธ๋ ฅํ–ˆ์Šต๋‹ˆ๋‹ค.

๋‚ด์šฉ์„ ์ถฉ๋ถ„ํžˆ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก 
์†Œ์Šค ์ฝ”๋“œ ๋ฐ ๋…ธ์…˜ ์ž๋ฃŒ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค!

์„น์…˜0 ๊ฐ•์˜์†Œ๊ฐœ - ๊ฐ•์˜์ž๋ฃŒ ๋งํฌ์— ๋…ธ์…˜์œผ๋กœ ๋ณด๊ธฐ ์ข‹๊ฒŒ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ •๋ฆฌํ•˜์˜€์Šต๋‹ˆ๋‹ค.

ํ•จ๊ป˜ ๋ณด๋ฉด ์ข‹์€ ๊ฐ•์˜ ๐Ÿ“บ

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

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

  • Jetpack Compose๋ฅผ ๋ฐฐ์›Œ๋ณด๋ ค๊ณ  ์ƒ๊ฐ๋งŒ ํ–ˆ๋˜ ๋ถ„

  • Jetpack Compose๋Š” ์–ด๋–ค ๊ฒƒ์ธ์ง€ ๊ถ๊ธˆํ•˜์‹ ๋ถ„

  • ์•ˆ๋“œ๋กœ์ด๋“œ ๊ฐœ๋ฐœ์ž๋กœ ์ทจ์—… ์ค€๋น„ํ•˜์‹œ๋Š” ๋ถ„

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

  • ๊ธฐ์กด XML๋กœ ์•ˆ๋“œ๋กœ์ด๋“œ ๊ฐœ๋ฐœ์„ ํ•ด๋ณธ ๊ฒฝํ—˜

์•ˆ๋…•ํ•˜์„ธ์š”
๊ฐœ๋ณต์น˜๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค.

7,444

๋ช…

์ˆ˜๊ฐ•์ƒ

398

๊ฐœ

์ˆ˜๊ฐ•ํ‰

1,355

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

12

๊ฐœ

๊ฐ•์˜

2015๋…„ ์Šคํƒ€ํŠธ์—… ์ฐฝ์—…์„ ๊ณ„๊ธฐ๋กœ ๋‹ค์–‘ํ•œ ๊ฐœ๋ฐœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

ํ˜„์žฌ๋Š” ํ‰๋ฒ”ํ•œ ์ง์žฅ์ธ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค

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

์ „์ฒด

70๊ฐœ โˆ™ (7์‹œ๊ฐ„ 3๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

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