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

[LV2] Jetpack Compose - UI์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜

๋” ์ด์ƒ ๋””์ž์ด๋„ˆ๋ถ„์—๊ฒŒ "์ด๊ฑด ๋ชจ๋ฐ”์ผ์—์„œ ์•ˆ ๋˜๋Š” ๊ฑฐ์˜ˆ์š”" ๋ผ๊ณ  ๋งํ•˜์ง€ ๋งˆ์„ธ์š”. Jetpack Compose๋กœ UI/์• ๋‹ˆ๋ฉ”์ด์…˜์„์„ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Thumbnail

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

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

  • Jetpack Compose๋กœ ๋‹ค์–‘ํ•œ UI ๊ตฌํ˜„ ๋ฐฉ๋ฒ•

  • Jetpack Compose๋กœ ๋‹ค์–‘ํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•

๋” ์ด์ƒ ๋””์ž์ด๋„ˆ ๋ถ„๋“ค์— ์š”์ฒญ์— "์ด๊ฑด ๋ชจ๋ฐ”์ผ์—์„œ ์•ˆ๋˜๋Š” ๊ฑฐ์—์š”" ๋ผ๊ณ  ๋งํ•˜์ง€ ๋งˆ์„ธ์š”.
Jetpack Compose๋ฅผ ์ด์šฉํ•˜๋ฉด ๊ทธ ์–ด๋–ค ๋‚œ์ด๋„์˜ ๋””์ž์ธ/์• ๋‹ˆ๋ฉ”์ด์…˜์ด๋ผ๋„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ•์˜๋ฅผ ํ†ตํ•ด ์•„๋ž˜์™€ ๊ฐ™์€ ๋‹ค์–‘ํ•œ ์˜ˆ์ œ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์„ ์—ฐ์Šตํ•ฉ๋‹ˆ๋‹ค.

1 - ๊ธฐ๋ณธ์ ์ธ UI ๋งŒ๋“ค๊ธฐ

๊ธฐ์ดˆ์ ์ธ UI/์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋งŒ๋“ค๋ฉด์„œ ์—ฐ์Šตํ•ฉ๋‹ˆ๋‹ค.

2 - ๊ธˆ์œต์•ฑ ์†Œ๋น„๋‚ด์—ญ ๋งŒ๋“ค๊ธฐ

๊ธˆ์œต์•ฑ์„ ๋”ฐ๋ผ๋งŒ๋“ค์–ด๋ณด๋ฉฐ ์‹ค์ „์ ์ธ ์˜ˆ์ œ๋ฅผ ์—ฐ์Šตํ•ฉ๋‹ˆ๋‹ค.

3 - ๋‹ฌ๋ ฅ์•ฑ ๋งŒ๋“ค๊ธฐ

๋‹ฌ๋ ฅ ์•ฑ์„ ๋งŒ๋“ค๋ฉฐ ๋™์ ์ธ ํ™”๋ฉด์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.
LazyColumn / LazyRow ์— ๋Œ€ํ•ด ๋” ์•Œ์•„๋ด…๋‹ˆ๋‹ค.

4 - ์‹œ๊ณ„์•ฑ(์Šคํ†ฑ์›Œ์น˜) ๋งŒ๋“ค๊ธฐ

์‹œ๊ณ„ ๋ชจ์–‘์„ ๋งŒ๋“ค๋ฉฐ ์ž์œ ์ž์žฌ๋กœ UI๋ฅผ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค.

Jetpack Compose ๋กœ ํ•˜๋Š” ์•ˆ๋“œ๋กœ์ด๋“œ ๊ฐœ๋ฐœ ์–ด๋–ค ๊ฒƒ์ด ๋‹ค๋ฅผ๊นŒ์š”?

์‹ค๋ฌด์—์„œ ์ด๋Ÿฐ ๊ฒƒ๋“ค์„ ๋А๊ผˆ์Šต๋‹ˆ๋‹ค.

  • ๋น ๋ฅธ ๊ฐœ๋ฐœ ์†๋„


  • ์ง๊ด€์ ์ธ ์ฝ”๋“œ ์ž‘์„ฑ

  • ๋‚œ์ด๋„ ์žˆ๋Š” ๋””์ž์ธ ๋ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ž์œ ์ž์žฌ๋กœ ๊ตฌํ˜„ ๊ฐ€๋Šฅ

๐Ÿ” ์–ด๋–ค ๋ถ„๋“ค์ด ์ˆ˜๊ฐ•ํ•˜์‹œ๋ฉด ์ข‹์„๊นŒ์š”?

์ด๋Ÿฐ ๋ถ„๋“ค์ด ์ˆ˜๊ฐ•ํ•˜์‹œ๋ฉด ๊ฐ€์žฅ ๋„์›€์ด ๋  ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒํ•˜๊ณ  ์ œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.

  1. Jetpack Compose UI๋ฅผ ๋น ๋ฅด๊ฒŒ ํ•™์Šตํ•˜๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž

  2. Jetpack Compose ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํšŒ์‚ฌ์— ์ž…์‚ฌ ์ „, ๋ฏธ๋ฆฌ ์˜ˆ์ œ๋ฅผ ์ž‘์„ฑํ•ด๋ณด๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž

  3. ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ๋งŒ๋“œ๋Š” ์ทจ์—…์ค€๋น„์ƒ๋ถ„๋“ค


๋˜ํ•œ ์•„๋ž˜์™€ ๊ฐ™์€ ๋ถ„๋“ค์—๊ฒŒ๋„ ๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • Jetpack Compose ๊ธฐ์ดˆ ์˜ˆ์ œ๋ฅผ ํ•ด๋ดค์ง€๋งŒ ์ข€ ๋” ์‹ค์ „์ ์ธ ์˜ˆ์ œ๋ฅผ ํ•ด๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„๋“ค

  • UI์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์•Œ๋ ค์ฃผ๋Š” ์นœ์ ˆํ•˜๊ฒŒ ์•Œ๋ ค์ฃผ๋Š” ์˜ˆ์ œ๊ฐ€ ์—†์–ด์„œ ์•„์‰ฌ์› ๋˜ ๋ถ„๋“ค

  • Jetpack Compose ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ ์ง์ „์— ๋น ๋ฅด๊ฒŒ ์Šคํ„ฐ๋””๊ฐ€ ํ•„์š”ํ•˜์‹  ๋ถ„๋“ค

๐Ÿคบ ๊ฐ•์˜ ์ˆ˜์ค€์€ ์–ด๋–ค๊ฐ€์š”?

์ œ๋ชฉ ๊ทธ๋Œ€๋กœ UI์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ค‘์ ์ ์œผ๋กœ ๋‹ค๋ฃจ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๋งŽ์ด ์“ฐ์ผ ๊ฒƒ ๊ฐ™์€ ์˜ˆ์ œ๋ฅผ ํ•™์Šตํ•˜๋ฉด์„œ ๋ณต์žกํ•œ UI๋„ ๊ตฌํ˜„ํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์„ ๋ชฉ์ ์œผ๋กœ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ
Jetpack Compose ์˜ˆ์ œ๋ฅผ ๋ช‡๊ฐœ ํ•ด๋ณด์‹œ๊ณ , UI๋ฅผ ์ข€ ๋” ์—ฐ์Šตํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„๋“ค์—๊ฒŒ ๊ฐ€์žฅ ์ ํ•ฉํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋˜ํ•œ ๊ฐ•์˜๊ฐ€ ๋น ๋ฅธ ์†๋„๋กœ ์ง„ํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ๊ฐ•์˜ ์Šคํƒ€์ผ์„ ํ™•์ธํ•ด์ฃผ์„ธ์š”!

โœ ์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ

Q. Jetpack Compose๋ฅผ ๋‹ค๋ฃจ๋Š”๋ฐ, ์•„ํ‚คํ…์ฒ˜๋„ ํ•จ๊ป˜ ๋‹ค๋ฃจ๋‚˜์š”?
A. ์•„ํ‚คํ…์ฒ˜๋Š” ํ•จ๊ป˜ ๋‹ค๋ฃจ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ ๊ฐ•์˜๋Š” UI/์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ค‘์ ์ ์œผ๋กœ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

Q. Jetpack Compose๊ฐ€ ์ฒ˜์Œ์ด์—์š”. ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•ด๋„ ์ข‹์„๊นŒ์š”?
A. ๊ธฐ๋ณธ์ ์ธ ์˜ˆ์ œ๋Š” ์ž‘์„ฑํ•ด๋ณด์‹  ๋ถ„๋“ค์ด ์ˆ˜๊ฐ•ํ•˜์‹ค ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๊ณ  ์ œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.
๋งŒ์•ฝ ์ฒ˜์Œ์ด์‹œ๋ผ๋ฉด [LV1] ๊ฐ•์˜๋ฅผ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

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

Q. ๊ฐ•์˜ ์ˆ˜๊ฐ• ์ˆœ์„œ๊ฐ€ ์žˆ๋‚˜์š”?
A. ์•„๋ž˜์˜ ์ˆœ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜์‹œ๊ธธ ๊ถŒ์žฅ๋“œ๋ฆฝ๋‹ˆ๋‹ค!

  • [LV1] Jetpack Compose - UI ์—ฐ์Šตํ•˜๊ธฐ (๋งํฌ)

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

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

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

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

  • ๋””์ž์ด๋„ˆ์˜ ์š”๊ตฌ์‚ฌํ•ญ์˜ ์–ด๋ ค์›€์„ ๊ฒช๋Š” Android ๊ฐœ๋ฐœ์ž

  • UI์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ง‘์ค‘์ ์œผ๋กœ ๊ณต๋ถ€ํ•ด๋ณด๊ณ  ์‹ถ์€ Android ๊ฐœ๋ฐœ์ž

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

  • Jetpack Compose ๊ธฐ์ดˆ ๋ฌธ๋ฒ•

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

7,598

๋ช…

์ˆ˜๊ฐ•์ƒ

416

๊ฐœ

์ˆ˜๊ฐ•ํ‰

1,360

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

12

๊ฐœ

๊ฐ•์˜

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

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

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

์ „์ฒด

49๊ฐœ โˆ™ (3์‹œ๊ฐ„ 44๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

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