๊นจ์•Œ ๊ฐœ๋… ๐Ÿ“‘ 132

[Android] App layout - Custom layouts

#1 ๊ฐœ์š” ๋งž์ถค ๋ ˆ์ด์•„์›ƒ | Jetpack Compose | Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋งž์ถค ๋ ˆ์ด์•„์›ƒ ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜์„ธ์š”. Compose์—์„œ UI ์š”์†Œ๋Š” ํ˜ธ์ถœ๋  ๋•Œ UI ์š”์†Œdeveloper.android.com์œ„ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋‚˜๋งŒ์˜ ์–ธ์–ด๋กœ ์ •๋ฆฌํ–ˆ๋‹ค. #2 ์ •ํ™•ํžˆ '๋ฌด์—‡'์„ ์ปค์Šคํ…€ํ•˜๋Š”๊ฐ€?๊ฒŒ์‹œ๊ธ€ [Android] App layout - ๊ธฐ์ดˆ์— ์žˆ๋Š” ๋„์‹๋„๋‹ค. ์ด ๋„์‹๋„๋Š” Layout ๋‚ด๋ถ€์  ๋™์ž‘ ๊ธฐ์ œ๋ฅผ ํ‘œํ˜„ํ•˜๊ณ  ์žˆ๋‹ค. Layout์„ ์ปค์Šคํ…€ํ•œ๋‹ค๋Š” ๊ฑด ์œ„ ๋„์‹๋„์—์„œ ์ฃผํ™ฉ์ƒ‰ ๋„ค๋ชจ ๋ฐ ํŒŒ๋ž€์ƒ‰ ๋„ค๋ชจ ์•ˆ์˜ ๋‚ด์šฉ์„ ์˜ค๋ฒ„๋ผ์ด๋“œํ•˜๋Š” ๊ฒƒ์ด๋‹ค. #3 Modifier.layout()#..

[Android] UI architecture - Phase์™€ State

#1 ์ด์ „ ๊ฒŒ์‹œ๊ธ€ [Android] UI architecture - Phases#1 ๊ฐœ์š” Jetpack Compose ๋‹จ๊ณ„  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. Jetpack Compose ๋‹จ๊ณ„ ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜kenel.tistory.com์œ„ ๊ฒŒ์‹œ๊ธ€์—์„œ ์ด์–ด์ง„๋‹ค. #2 State [Android] Jetpack Compose - State ๊ธฐ์ดˆ#1 ๊ฐœ์š” ์ƒํƒœ ๋ฐ Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ƒํƒœ ๋ฐ Jetpack Compose ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค..

[Android] UI architecture - Phases

#1 ๊ฐœ์š” Jetpack Compose ๋‹จ๊ณ„  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. Jetpack Compose ๋‹จ๊ณ„ ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜์„ธ์š”. ๋Œ€๋ถ€๋ถ„์˜ ๋‹ค๋ฅธ UI ๋„๊ตฌ ํ‚คํŠธ์™€ ๋งˆ์ฐฌ๊ฐ€developer.android.com์œ„ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋‚˜์˜ ์–ธ์–ด๋กœ ์ •๋ฆฌํ–ˆ๋‹ค. #2 Compose Runtime์˜ 3๋‹จ๊ณ„#2-1 ๋„์‹๋„Jetpack Compose๊ฐ€ UI๋ฅผ ๊ทธ๋ ค๋‚ด๋Š” ๊ณผ์ •์˜ ๋„์‹๋„. Layout ๋‹จ๊ณ„๋Š” ์ด ๋‹จ๊ณ„๋Š” ์ธก์ •(measurement)๊ณผ ๋ฐฐ์น˜(placement)๋ผ๋Š” ๋‘ ๊ฐ€์ง€์˜ ํ•˜์œ„ ๋‹จ๊ณ„๋กœ ๊ตฌ์„ฑ๋œ๋‹ค. ๊ฐ ๋‹จ๊ณ„์— ๋Œ€ํ•œ ๊ฐ„๋ฝํ•œ ์„ค๋ช…์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. 1. Composition: '๋ฌด์—‡'(W..

[Android] App layout - ๊ธฐ์ดˆ

#1 ๊ฐœ์š” Compose ๋ ˆ์ด์•„์›ƒ ๊ธฐ๋ณธ์‚ฌํ•ญ  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. Compose ๋ ˆ์ด์•„์›ƒ ๊ธฐ๋ณธ์‚ฌํ•ญ ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜์„ธ์š”. Jetpack Compose๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•ฑ์˜developer.android.com์œ„ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋‚˜์˜ ์–ธ์–ด๋กœ ์ •๋ฆฌํ–ˆ๋‹ค. #2 ๊ธฐ๋ณธ ์ปดํฌ์ €๋ธ” [Android] Jetpack Compose - Layout, Arrangement, Alignment#1 Layout#1-1 ๊ฐœ์š” Compose ๋ ˆ์ด์•„์›ƒ ๊ธฐ๋ณธ์‚ฌํ•ญ  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Tr..

[Android] Pointer input - Nested Scroll

#1 ์ด์ „ ๊ฒŒ์‹œ๊ธ€ [Android] Pointer input - Scroll#1 ๊ฐœ์š” ์Šคํฌ๋กค  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์Šคํฌ๋กค ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜์„ธkenel.tistory.com์Šคํฌ๋กค์— ๋Œ€ํ•ด ๋‹ค๋ฃฌ ์œ„ ๊ฒŒ์‹œ๊ธ€์—์„œ๋ถ€ํ„ฐ ์ด์–ด์ง„๋‹ค. #2 ์ค‘์ฒฉ(Nested) ์Šคํฌ๋กค#2-1 ๊ฐœ์š”์ค‘์ฒฉ(Nested) ์Šคํฌ๋กค์ด๋ž€, ๋ง ๊ทธ๋Œ€๋กœ ๊ฐ™์€ ๋ฐฉํ–ฅ(์ˆ˜์ง ๋˜๋Š” ์ˆ˜ํ‰)์œผ๋กœ ์Šคํฌ๋กค ํ•˜๋Š” ์ปจํ…Œ์ด๋„ˆ 2๊ฐœ๊ฐ€ ๋ถ€๋ชจ-์ž์‹ ๊ด€๊ณ„๋ฅผ ํ˜•์„ฑํ•œ ๊ฒƒ์„ ๋œปํ•œ๋‹ค. ์ฆ‰ verticalScroll()์ด ์ ์šฉ๋œ Column() ์†์— ๋‹ค์‹œ verticalScroll()์ด ์ ์šฉ๋œ Column()..

[Android] Pointer input - Scroll

#1 ๊ฐœ์š” ์Šคํฌ๋กค  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์Šคํฌ๋กค ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜์„ธ์š”. ์ฐธ๊ณ : ํ•ญ๋ชฉ ๋ชฉ๋ก์„ ํ‘œ์‹œํ•˜๋ ค๋ฉด ์ด๋Ÿฌํ•œ API ๋Œ€์‹ developer.android.com์œ„ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋‚˜์˜ ์–ธ์–ด๋กœ ์ •๋ฆฌํ–ˆ๋‹ค. #2 ์Šคํฌ๋กค'๋˜๋Š”' Modifier#2-1 Modifier.verticalScroll()fun Modifier.verticalScroll( state: ScrollState, enabled: Boolean = true, flingBehavior: FlingBehavior? = null, reverseScroll..

[Android] Pointer input - Gesture

#1 ๊ฐœ์š”#1-1 ์ด์ „ ๊ฒŒ์‹œ๊ธ€ [Android] Pointer input - PointerInputChange, PointerEvent#1 ๊ฐœ์š” ๋™์ž‘ ์ดํ•ดํ•˜๊ธฐ  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋™์ž‘ ์ดํ•ดํ•˜๊ธฐ ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €kenel.tistory.com์œ„์˜ ๊ฒŒ์‹œ๊ธ€์—์„œ ์ด์–ด์ง„๋‹ค. ํ•ด๋‹น ๊ฒŒ์‹œ๊ธ€์—์„œ ๋จผ์ € PointerInputChange ๋ฐ PointerEvent์— ๋Œ€ํ•œ ์ดํ•ด๋ฅผ ํ•ด์•ผ ๋ณธ ๊ฒŒ์‹œ๊ธ€์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค. #1-2 ๊ณต์‹ ๋ฌธ์„œ ๋™์ž‘ ์ดํ•ดํ•˜๊ธฐ  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Tran..

[Android] Pointer input - AwaitPointerEventScope()์˜ ๋ฉ”์†Œ๋“œ๋“ค

#1 ๊ฐœ์š”#1-1 ์ด์ „ ๊ฒŒ์‹œ๊ธ€ [Android] Pointer input - PointerInputChange, PointerEvent#1 ๊ฐœ์š” ๋™์ž‘ ์ดํ•ดํ•˜๊ธฐ  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋™์ž‘ ์ดํ•ดํ•˜๊ธฐ ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €kenel.tistory.com์œ„ ๊ฒŒ์‹œ๊ธ€์—์„œ AwaitPointerEventScope()์˜ ๊ฐ€์žฅ ๋Œ€ํ‘œ์ ์ธ ๋ฉ”์†Œ๋“œ์ธ awaitPointerEvent()์— ๋Œ€ํ•ด ๊ฐ„๋‹จํžˆ ์„ค๋ช…ํ–ˆ๋‹ค. ๋ณธ ๊ฒŒ์‹œ๊ธ€์—์„  awaitPointerEvent()๋ฅผ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ๋ฉ”์†Œ๋“œ๋“ค์„ ์„ค๋ช…ํ•œ๋‹ค. #1-2 ๊ณต์‹ ๋ฌธ์„œ AwaitPointerEventScope  | ..

[Android] Pointer input - PointerInputChange, PointerEvent

#1 ๊ฐœ์š” ๋™์ž‘ ์ดํ•ดํ•˜๊ธฐ  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋™์ž‘ ์ดํ•ดํ•˜๊ธฐ ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜์„ธ์š”. ์ดํ•ดํ•ด์•ผ ํ•  ๋ช‡ ๊ฐ€์ง€ ์šฉ์–ด์™€ ๊ฐœ๋…์ด ์žˆdeveloper.android.com์œ„ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋‚˜์˜ ์–ธ์–ด๋กœ ์ •๋ฆฌํ•˜๊ณ , ์ƒ˜ํ”Œ ์•ฑ์„ ๋งŒ๋“ค์–ด๋ดค๋‹ค. #2 Pointer#2-1 ํฌ์ธํ„ฐ๋Š” ํ•˜๋“œ์›จ์–ด๋‹คํ™”๋ฉด์˜ ํŠน์ • ์ขŒํ‘œ๋ฅผ ์ฐ์„(point) ์ˆ˜ ์žˆ๋Š” ์‚ฌ๋ฌผ(ํ•˜๋“œ์›จ์–ด)์„ ์˜๋ฏธํ•œ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋ก  ์†๊ฐ€๋ฝ์„ ์˜๋ฏธํ•œ๋‹ค. ํ˜น์€ ๊ฐค๋Ÿญ์‹œ์˜ SํŽœ์ด ํ•ด๋‹น๋œ๋‹ค. ํ‚ค๋ณด๋“œ๋Š” ํ„ฐ์น˜ ์Šคํฌ๋ฆฐ์˜ ์–ด๋А ์ขŒํ‘œ๋ฅผ ๊ฐ€๋ฆฌํ‚ฌ(point) ์ˆ˜ ์—†์œผ๋ฏ€๋กœ ํฌ์ธํ„ฐ๊ฐ€ ์•„๋‹ˆ๋‹ค. #2-2 PointerTypepacka..

์ผ๋ก  ๋จธ์Šคํฌ์˜ ์‚ฌ๊ณ ๋ฒ•๊ณผ ์ถฉ๊ณ 

#1 1์›์น™ ์‚ฌ๊ณ ๋ฒ•#1-1 ์ •์˜์ง ์ผˆ๋Ÿฌ: ์ผ๋ก  ๋จธ์Šคํฌ๋Š” "๊ทธ๊ฒŒ ์ •๋ง(really) ์ œ์ผ ์ค‘์š”ํ•œ ๊ฑฐ์•ผ?"๋ผ๊ณ  ๋Š์ž„์—†์ด ์งˆ๋ฌธํ•˜๋ฉฐ, ๊ทธ ์งˆ๋ฌธ์˜ ๊ณผ์ •์—์„œ ๋ชจ๋“  ๊ฐ€์ •, ํ™•์‹ , ํŽธ๊ฒฌ์„ ๋ฒ„๋ ธ์Šต๋‹ˆ๋‹ค (์˜คํ”ˆ ๋งˆ์ธ๋“œ). ์šฐ๋ฆฌ๊ฐ€ ๊ฐ€์ง„ ์ƒ๊ฐ์˜ 99%๋Š” ํŽธ๊ฒฌ์„ ์ง€ํ‚ค๋ ค๋Š” ๋ณ€๋ช…์— ๋ถˆ๊ณผํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ์ค‘ 98%๋Š” ์•„์˜ˆ ํ‹€๋ ธ์„ ๊ฑฐ๊ณ ์š”. ์ƒ๊ฐ์˜ ๋ฒ”์œ„๋ฅผ ๋„“ํ˜€์•ผ ์ƒˆ๋กœ์šด ๊ฑธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.1์›์น™ ์‚ฌ๊ณ ๋ฒ•(First principles thinking)์€ ๋จผ์ € ๋ชจ๋“  ํ˜„์ƒ์„ ์ชผ๊ฐœ์„œ, ๊ทธ ์†์˜ ๋‚ด์žฌ๋œ ๋ณธ์งˆ์„ ์ฐพ๋Š” ์‚ฌ๊ณ ๋ฒ•์ด๋‹ค. ๊ทธ๋ฆฌ๊ณค "์ง„์งœ(really)?"๋ฅผ ๋๊นŒ์ง€ ๋ฌผ์–ด์„œ ์ •๋ง๋กœ ๋งž๋Š” ์‚ฌ์‹ค์ด๋‚˜ ๋…ผ๋ฆฌ๋ฅผ ํ•˜๋‚˜ํ•˜๋‚˜ ๋ฐํ˜€๋‚ธ๋‹ค. ๊ทธ ํ•˜๋‚˜ํ•˜๋‚˜๋ฅผ ๊ธฐ๋ฐ˜(๋ณธ์งˆ) ์œ„์— ์ฐจ๊ณก์ฐจ๊ณก ์Œ“์•„ ์˜ฌ๋ฆฐ๋‹ค.  ์ผ๋ก ์€ ๋ฌผ๋ฆฌํ•™์˜ ๊ธฐ๋ณธ ์›์น™์„, ์–ด๋–ค ํ˜„์ƒ์— ๋‚ด์žฌ๋œ ๋ณธ์งˆ๋กœ์„œ ๋‘๊ณ  ์ƒ๊ฐํ•˜๋Š” ..