Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

[์ž…๋ฌธํŽธ] UI ํ…Œ์ŠคํŠธ์™€ ํ•จ๊ป˜ ๋ฐฐ์šฐ๋Š” Jetpack Compose

๊ฐ„๋‹จํ•œ ์•ฑ์„ ๋งŒ๋“ค์–ด๋ณด๋ฉด์„œ UI ํ…Œ์ŠคํŠธ์˜ ๊ฐœ๋…์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Thumbnail

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

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

  • Jetpack Compose

  • UI Test ์ž‘์„ฑ

์•ˆ์ •์ ์ธ ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ์š”? ๐Ÿค”

์•ˆ์ •์ ์ธ ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์ž‘์„ฑ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๋งŽ์€ ํšŒ์‚ฌ๋“ค์ด ์„œ๋น„์Šค๋ฅผ ์•ˆ์ •์ ์œผ๋กœ ๊ฐœ๋ฐœํ•˜๊ธฐ ์œ„ํ•ด ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ๋„์ž…ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฌผ๋ก  ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•œ๋‹ค๊ณ  ํ•ด์„œ ์•ฑ์ด 100% ์™„๋ฒฝํ•˜๊ฒŒ ๋™์ž‘ํ•œ๋‹ค๊ณ  ๋ณด์žฅํ•  ์ˆ˜๋Š” ์—†์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ๋ฒ„๊ทธ๋‚˜ ์˜ค๋ฅ˜๋ฅผ ์‚ฌ์ „์— ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ์–ด ์•ฑ์˜ ์•ˆ์ •์„ฑ๊ณผ ์‹ ๋ขฐ์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.



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


์ด ๊ฐ•์˜์˜ ํŠน์ง•

๐Ÿ“Œ ํ•ต์‹ฌ๋งŒ ํ•™์Šต

  • Compose์˜ ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ์ง‘์ค‘์ ์œผ๋กœ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“Œ ์‹ค์Šต ์ค‘์‹ฌ

  • ๋ฐฐ์šด ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฐ”๋กœ ํ™œ์šฉํ•ด ์‹ค์ œ ์•ฑ์„ ๋งŒ๋“ค์–ด๋ณด๋ฉฐ ์‹ค์Šตํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“Œ UI ํ…Œ์ŠคํŠธ ์ž‘์„ฑ

  • ๊ฐœ๋ฐœํ•œ ์•ฑ์˜ UI๊ฐ€ ์˜๋„๋Œ€๋กœ ๋™์ž‘ํ•˜๋Š”์ง€ ๊ฒ€์ฆํ•˜๊ธฐ ์œ„ํ•ด UI ํ…Œ์ŠคํŠธ๋ฅผ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค.

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

Compose UI ํ…Œ์ŠคํŠธ๋ฅผ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ๋ถ„

๊ฐ„๋‹จํ•œ ํ™”๋ฉด ๊ฐœ๋ฐœ์€ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ, UI ํ…Œ์ŠคํŠธ๋ฅผ ํ†ตํ•ด ์•ฑ์˜ ์™„์„ฑ๋„๋ฅผ ๋†’์ด๊ณ  ์‹ถ์€ ๋ถ„

์•ˆ์ •์ ์ธ ์•ฑ ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ์žˆ๋Š” ๋ถ„
๊ฐœ๋ฐœํ•œ UI ์˜ ๋™์ž‘์„ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋กœ ๊ฒ€์ฆํ•˜๊ณ  ์‹ถ์€ ๋ถ„

Compose ๋ฅผ ์ฒ˜์Œ ๋ฐฐ์šฐ๋Š” ๋ถ„
Jetpack Compose์˜ ๊ธฐ์ดˆ๋ฅผ ๋ฐฐ์šฐ๊ณ  ์‹ค์Šต์„ ํ†ตํ•ด ์•ฑ ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•˜๊ณ  ์‹ถ์€ ๋ถ„

์ˆ˜๊ฐ• ํ›„์—๋Š”

  • Compose๋ฅผ ํ™œ์šฉํ•ด ๊ฐ„๋‹จํ•œ UI๋ฅผ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์•ˆ๋“œ๋กœ์ด๋“œ UI ํ…Œ์ŠคํŠธ์˜ ๊ฐœ๋…์„ ์ดํ•ดํ•˜๊ณ , ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


  • ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์ž‘์„ฑ์„ ํ†ตํ•ด ๊ฐœ๋ฐœ์ž๊ฐ€ ์˜๋„ํ•œ๋Œ€๋กœ ์•ฑ์ด ๋™์ž‘ํ•˜๋Š”์ง€ ๊ฒ€์ฆํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”.

๊ฐ„๋‹จํ•œ ์นด์šดํ„ฐ ์•ฑ์„ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค.

  • ๊ฐ„๋‹จํ•œ ์นด์šดํ„ฐ ์•ฑ์„ ๋งŒ๋“ค๋ฉฐ UI ํ…Œ์ŠคํŠธ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…์„ ์ตํ˜€๋ด…๋‹ˆ๋‹ค.

  • ๋ฒ„ํŠผ ํด๋ฆญ๊ณผ ์ƒํƒœ ๋ณ€ํ™”๋ฅผ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋กœ ๊ฒ€์ฆํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค.

๊ฐ„๋‹จํ•œ ์œ ์ €๊ด€๋ฆฌ ์•ฑ์„ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค.

  • ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๋Š” ์ƒํ™ฉ์„ ๊ฐ€์ •ํ•ด์„œ UI ํ…Œ์ŠคํŠธ๋ฅผ ์‹ค์Šตํ•ฉ๋‹ˆ๋‹ค.

  • ๋„คํŠธ์›Œํฌ ์‘๋‹ต๊ณผ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ์ถœ๋ ฅํ•˜๋Š” ํ™”๋ฉด์ด ์˜๋„๋Œ€๋กœ ๋™์ž‘ํ•˜๋Š”์ง€ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋กœ ํ™•์ธํ•ด๋ด…๋‹ˆ๋‹ค.

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

์‹ค์Šต ํ™˜๊ฒฝ

  • ์šด์˜ ์ฒด์ œ ๋ฐ ๋ฒ„์ „(OS): macOS (์œˆ๋„์šฐ ํ™˜๊ฒฝ๋„ ์ƒ๊ด€์—†์Šต๋‹ˆ๋‹ค.)

  • ์‚ฌ์šฉ ๋„๊ตฌ: Android Studio

ํ•™์Šต ์ž๋ฃŒ

  • ์†Œ์Šค์ฝ”๋“œ๋ฅผ ์••์ถ•ํŒŒ์ผ๋กœ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค!

์„ ์ˆ˜ ์ง€์‹ ๋ฐ ์œ ์˜์‚ฌํ•ญ

  • Kotlin, Java ๋“ฑ์˜ ํ”„๋กœ๊ทธ๋žจ ์–ธ์–ด ๊ฒฝํ—˜์ด ์žˆ์œผ๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค.

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

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

  • Compose๋ฅผ ํ™œ์šฉํ•œ UI ํ…Œ์ŠคํŠธ๊ฐ€ ์ฒ˜์Œ์ด์‹ ๋ถ„

  • Jetpack Compose ๋กœ UI ๊ฐœ๋ฐœํ•˜๋ฉด์„œ UI ํ…Œ์ŠคํŠธ๋กœ ์•ฑ ์•ˆ์ •์„ฑ์„ ์˜ฌ๋ฆฌ๊ณ  ์‹ถ์€ ๋ถ„

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

  • Kotlin, Java ๋“ฑ์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฒฝํ—˜

  • Android Studio ์„ค์น˜

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

์šฐ์—ฐํ•œ ๊ณ„๊ธฐ๋กœ ์•ˆ๋“œ๋กœ์ด๋“œ ๊ฐœ๋ฐœ์„ ๋ฐฐ์šฐ๊ฒŒ ๋˜์—ˆ๊ณ  ํ˜„์žฌ๊นŒ์ง€ ์•ฝ 4๋…„ ๊ฐ€๊นŒ์ด ์•ˆ๋“œ๋กœ์ด๋“œ ๊ฐœ๋ฐœ์„ ํ•ด์˜ค๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋™์•ˆ ์Œ“์•„์˜จ ๊ฒฝํ—˜๊ณผ ๋…ธํ•˜์šฐ๋ฅผ ๊ณต์œ ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

์ด๋ฉ”์ผ : tmfrl1590@gmail.com

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

์ „์ฒด

33๊ฐœ โˆ™ (2์‹œ๊ฐ„ 51๋ถ„)

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

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

1๊ฐœ

1.0

1๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

โ‚ฉ12,100