{"id":45506,"date":"2021-11-07T18:56:55","date_gmt":"2021-11-07T09:56:55","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45506"},"modified":"2021-11-12T16:33:09","modified_gmt":"2021-11-12T07:33:09","slug":"jetpack-compose-basics-%ec%95%b1-%ec%8a%a4%ed%83%80%ec%9d%bc%eb%a7%81-%eb%b0%8f-%ed%85%8c%eb%a7%88-%ec%a0%81%ec%9a%a9","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45506","title":{"rendered":"Jetpack Compose basics – \uc571 \uc2a4\ud0c0\uc77c\ub9c1 \ubc0f \ud14c\ub9c8 \uc801\uc6a9"},"content":{"rendered":"\n

\uc9c0\uae08\uae4c\uc9c0\ub294 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\uc5d0 \uc5b4\ub5a0\ud55c \uc2a4\ud0c0\uc77c\ub3c4 \uc801\uc6a9\ud558\uc9c0 \uc54a\uc558\uace0, \ub2e4\ud06c\ubaa8\ub4dc \uc9c0\uc6d0\uc744 \ud3ec\ud568\ud558\ub294 \uc801\ub2f9\ud55c \uae30\ubcf8\uac12\uc73c\ub85c\ub9cc \ucf54\ub4dc\ub97c \uc791\uc131\ud588\ub2e4. BasicsCodelabTheme\uacfc MaterialTheme\uc744 \ub0b4\ubd80\ub97c \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n\n\n\n

ui\/Theme.kt \ud30c\uc77c\uc744 \uc5f4\uc5b4\ubcf4\uba74 BasicsCodelabTheme\uc774 MaterialTheme\uc744 \uc0ac\uc6a9\ud558\uc5ec \uad6c\ud604\ud55c \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n

@Composable
fun BasicsCodelabTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = typography,
        shapes = shapes,
        content = content
    )
}<\/code><\/pre>\n\n\n\n
MaterialTheme\uc740 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub85c \uba38\ud14c\ub9ac\uc5bc \ub514\uc790\uc778 \uac00\uc774\ub4dc<\/a>\ub85c\ubd80\ud130 \uc2a4\ud0c0\uc77c\ub9c1 \uc6d0\uce59\ub4e4\uc744 \ubc18\uc601\ud558\uace0 \uc788\ub2e4. \ud574\ub2f9 \uc2a4\ud0c0\uc77c \uc815\ubcf4\ub294 \ucf58\ud150\uce20 \ub0b4\ubd80\uc5d0 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc5d0\uac8c \ud3ed\ud3ec\uc218 \ud615\uc2dd\uc73c\ub85c \uc0c1\uc704\uc5d0\uc11c \ud558\uc704\ub85c \uc801\uc6a9\ub418\uba70, \uc815\ubcf4\ub97c \uc77d\uace0 \uc2a4\uc2a4\ub85c \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud560 \uc218 \uc788\ub2e4. \uc774\ubbf8 \uc571\uc5d0\uc11c \uc0ac\uc6a9\ud558\uace0 \uc788\uc9c0\ub9cc, BasicsCodelabTheme\uc744 \uc0ac\uc6a9\ud558\ub294 \ud615\ud0dc\ub97c \ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
BasicsCodelabTheme {\n    MyApp()\n}<\/code><\/pre>\n\n\n\n
BasicsCodelabTheme\uc740 MaterialTheme\uc744 \ub0b4\ubd80\uc801\uc73c\ub85c \uc0c1\uc18d\ud558\uae30 \ub54c\ubb38\uc5d0, MyApp \uc740 \ud14c\ub9c8\uc5d0 \uc815\uc758\ub41c \uc18d\uc131\ub4e4\ub85c \uc2a4\ud0c0\uc77c\ub9c1 \ub41c\ub2e4. \ud558\uc704 \ucef4\ud3ec\uc800\ube14\uc740 MaterialTheme\uc73c\ub85c\ubd80\ud130 colors, typography \uadf8\ub9ac\uace0 shapes \uc18d\uc131\uc744 \uac00\uc838\uc62c \uc218 \uc788\ub2e4. \uc774 \uc18d\uc131\ub4e4\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud14d\uc2a4\ud2b8\uc5d0 \ud5e4\ub354 \uc2a4\ud0c0\uc77c \uc911 \ud558\ub098\ub97c \uc801\uc6a9\ud558\uc790.<\/p>\n\n\n\n
Column(modifier = Modifier.weight(1f)) {\n    Text(text = \"Hello, \")\n    Text(text = name, style = MaterialTheme.typography.h4<\/strong>)\n}<\/code><\/pre>\n\n\n\n
\uc704 \uc608\uc81c\uc5d0 \uc788\ub294 Text \ucef4\ud3ec\uc800\ube14\uc740 \uc0c8\ub85c\uc6b4 TextStyle\uc744 \uc801\uc6a9\ud588\ub2e4. \uc790\uc2e0\ub9cc\uc758 TextStyle\uc744 \ub9cc\ub4e4\uac70\ub098 MaterialTheme.typography\uc5d0 \uc774\ubbf8 \uc815\uc758\ub41c \uc2a4\ud0c0\uc77c\uc744 \uac00\uc838\uc62c \uc218\ub3c4 \uc788\ub2e4. \uc774\ub7f0 \ubc29\uc2dd\uc740 h1-h6, body1, body2, caption, subtitle1 \ub4f1\uacfc \uac19\uc740 \uba38\ud14c\ub9ac\uc5bc\ub85c \uc815\uc758\ub41c \ud14d\uc2a4\ud2b8 \uc2a4\ud0c0\uc77c\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uac8c \ud574\uc900\ub2e4. \uc608\uc81c\uc5d0\uc11c\ub3c4 \uc815\uc758\ub41c h4 \uc2a4\ud0c0\uc77c\uc744 \uc0ac\uc6a9\ud588\ub2e4.<\/p>\n\n\n\n
\uc774\uc81c \ube4c\ub4dc\ud558\uba74 \uc0c8\ub86d\uac8c \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c \ud14d\uc2a4\ud2b8\ub97c \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc77c\ubc18\uc801\uc73c\ub85c MaterialTheme\uc548\uc5d0 \uc788\ub294 \uc0c9\uc0c1, \ubaa8\uc591 \ubc0f \ud3f0\ud2b8 \uc2a4\ud0c0\uc77c\uc744 \uc0ac\uc6a9\ud558\ub294\uac8c \uc88b\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \ud558\ub4dc \ucf54\ub529\ub41c \uc0c9\uc0c1\uc744 \uc0ac\uc6a9\ud55c\ub2e4\uba74 \ub2e4\ud06c\ubaa8\ub4dc\ub97c \uad6c\ud604\ud558\uae30 \ud798\ub4e4\uace0, \uc624\ub958\uac00 \ubc1c\uc0dd\ud558\uae30 \uc27d\ub2e4.<\/p>\n\n\n\n
\ud558\uc9c0\ub9cc \ub54c\ub54c\ub85c \uc120\ud0dd\ud55c \uc0c9\uc0c1 \ubc0f \ud3f0\ud2b8 \uc2a4\ud0c0\uc77c\uc5d0\uc11c \ubc97\uc5b4\ub098\uc57c\ud560 \ub54c\ub3c4 \uc788\ub2e4. \uc774\ub7f0 \uc0c1\ud669\uc5d0\uc11c\ub294 \uc0c8\ub86d\uac8c \uc804\ubd80 \ub2e4 \ub9cc\ub4dc\ub294 \uac83\ubcf4\ub2e4\ub294 \uae30\uc874 \ud14c\ub9c8\ub85c\ubd80\ud130 \ud544\uc694\ud55c \ubd80\ubd84\ub9cc \ubc14\uafb8\ub294 \uac83\uc774 \ub354 \ub098\uc740 \uc120\ud0dd\uc774 \ub41c\ub2e4.<\/p>\n\n\n\n
\uc774\ub97c \uc704\ud574 copy\ub77c\ub294 \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc815\uc758\ub41c \uc2a4\ud0c0\uc77c\uc744 \uc218\uc815\ud560 \uc218 \uc788\ub2e4. \uc22b\uc790\uc5d0 extra bold\ub97c \uc801\uc6a9\ud574\ubcf4\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n
Text(\n    text = name,\n    style = MaterialTheme.typography.h4.copy(\n        fontWeight = FontWeight.ExtraBold\n    )\n)<\/code><\/pre>\n\n\n\n
\uc774 \ubc29\uc2dd\uc740 \ud3f0\ud2b8\ub97c \ubcc0\uacbd\ud558\uac70\ub098 h4\uc758 \ub2e4\ub978 \uc18d\uc131\uc744 \ubcc0\uacbd\ud558\ub294 \uac83\uacfc \uac19\uc740 \uc791\uc5c5\uc744 \ud560 \ub54c \uc88b\ub2e4.<\/p>\n\n\n\n
\uc774\uc81c preview \uc708\ub3c4\uc6b0\ub97c \ud1b5\ud574 \uacb0\uacfc\ub97c \uc0b4\ud3b4\ubcf4\uc790<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc571 \ud14c\ub9c8 \ubcc0\uacbd\ud558\uae30<\/h2>\n\n\n\n
\ud604\uc7ac \ud14c\ub9c8\uc640 \uad00\ub828\ub41c \ubaa8\ub4e0 \uac83\ub4e4\uc740 ui \ud3f4\ub354\ub0b4\uc758 \ud30c\uc77c\uc5d0\uc11c \ucc3e\uc744 \uc218 \uc788\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc9c0\uae08\uae4c\uc9c0 \uc0ac\uc6a9\ud574 \uc628 \uae30\ubcf8 \uc0c9\uc0c1\ub4e4\uc740 Color.kt\uc5d0 \uc815\uc758 \ub418\uc5b4\uc788\ub2e4. <\/p>\n\n\n\n
\uc0c8\ub85c\uc6b4 \uc0c9\uc0c1\uc744 Color.kt\uc5d0 \ucd94\uac00 \ud574\ubcf4\uc790.<\/p>\n\n\n\n
val Navy = Color(0xFF073042)
val Blue = Color(0xFF4285F4)
val LightBlue = Color(0xFFD7EFFE)
val Chartreuse = Color(0xFFEFF7CF)<\/code><\/pre>\n\n\n\n
\uc774\uc81c \uc704 4\uac00\uc9c0 \uc0c9\uc0c1\uc744 Theme.kt\uc5d0 \uc788\ub294 MaterialTheme\uc758 \ud314\ub808\ud2b8\uc5d0 \uc801\uc6a9\ud558\uc790.<\/p>\n\n\n\n
private val LightColorPalette = lightColors(
    surface = Blue,
    onSurface = Color.White,
    primary = LightBlue,
    onPrimary = Navy
)<\/code><\/pre>\n\n\n\n
\ub9cc\uc57d MainActivity.kt\ub85c \ub3cc\uc544\uac00\uc11c preview\ub97c \ub2e4\uc2dc \ub9ac\ud504\ub808\uc2dc \ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \uc0c8 \uc0c9\uc0c1\uc774 \uc801\uc6a9\ub41c \uac83 \ud654\uba74\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\ud558\uc9c0\ub9cc \uc544\uc9c1 \ub2e4\ud06c\ubaa8\ub4dc\uc6a9 \uc0c9\uc0c1\uc744 \uc218\uc815\ud558\uc9c0 \uc54a\uc558\ub2e4. \ub2e4\ud06c\ubaa8\ub4dc\uc6a9 \uc0c9\uc0c1\uc744 \uc218\uc815\ud558\uae30 \uc804\uc5d0 \uc774\ub97c \uc704\ud55c preview\ub97c \uc124\uc815\ud574\ubcf4\uc790. @Preview\uc560\ub178\ud14c\uc774\uc158\uc758 uiMode \ub9e4\uac1c\ubcc0\uc218\uc5d0 UI_MODE_NIGHT_YES\ub97c \ucd94\uac00\ud558\uc790.<\/p>\n\n\n\n
@Preview(\n\u00a0 \u00a0 showBackground = true,\n\u00a0 \u00a0 widthDp = 320,\n\u00a0 \u00a0 uiMode = UI_MODE_NIGHT_YES,\n\u00a0 \u00a0 name = \"DefaultPreviewDark\"\n)<\/strong>\n@Preview(showBackground = true, widthDp = 320)\n@Composable\nfun DefaultPreview() {\n\u00a0 \u00a0 BasicsCodelabTheme {\n\u00a0 \u00a0 \u00a0 \u00a0 Greetings()\n\u00a0 \u00a0 }\n}<\/code><\/pre>\n\n\n\n
\ud558\ub098\uc758 Composable \ud568\uc218\uc5d0 \ub2e4\uc218\uc758 \uac01\uae30 \ub2e4\ub978 @Preview\ub97c \ucd94\uac00\ud558\uc5ec \ud655\uc778\ud560 \uc218 \uc788\ub2e4. \ub2e4\ud06c\ubaa8\ub4dc\uc6a9 @Preview \ucd94\uac00\ud558\uace0 \ub098\uba74 DefaultPreviewDark\uac00 preview\uc5d0 \ub098\ud0c0\ub09c\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Theme.kt\uc5d0\uc11c \ub2e4\ud06c\ubaa8\ub4dc\uc6a9 \uceec\ub7ec\ub97c \uc815\uc758\ud558\uc790.<\/p>\n\n\n\n
private val DarkColorPalette = darkColors(
    surface = Blue,
    onSurface = Navy,
    primary = Navy,
    onPrimary = Chartreuse
)<\/code><\/pre>\n\n\n\n
\uc774\uc81c \uc571\uc5d0 \ud14c\ub9c8 \ubc0f \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c \uac83\uc744 \ud655\uc778\ud558\uc790.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\ucd5c\uc885\uc801\uc778 Theme.kt \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
private val DarkColorPalette = darkColors(
    surface = Blue,
    onSurface = Navy,
    primary = Navy,
    onPrimary = Chartreuse
)

private val LightColorPalette = lightColors(
    surface = Blue,
    onSurface = Color.White,
    primary = LightBlue,
    onPrimary = Navy
)

@Composable
fun BasicsCodelabTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = typography,
        shapes = shapes,
        content = content
    )
}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\uc9c0\uae08\uae4c\uc9c0\ub294 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\uc5d0 \uc5b4\ub5a0\ud55c \uc2a4\ud0c0\uc77c\ub3c4 \uc801\uc6a9\ud558\uc9c0 \uc54a\uc558\uace0, \ub2e4\ud06c\ubaa8\ub4dc \uc9c0\uc6d0\uc744 \ud3ec\ud568\ud558\ub294 \uc801\ub2f9\ud55c \uae30\ubcf8\uac12\uc73c\ub85c\ub9cc \ucf54\ub4dc\ub97c \uc791\uc131\ud588\ub2e4. BasicsCodelabTheme\uacfc MaterialTheme\uc744 \ub0b4\ubd80\ub97c \uc0b4\ud3b4\ubcf4\uc790. ui\/Theme.kt \ud30c\uc77c\uc744 \uc5f4\uc5b4\ubcf4\uba74 BasicsCodelabTheme\uc774 MaterialTheme\uc744 \uc0ac\uc6a9\ud558\uc5ec \uad6c\ud604\ud55c \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4. MaterialTheme\uc740 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub85c \uba38\ud14c\ub9ac\uc5bc \ub514\uc790\uc778 \uac00\uc774\ub4dc\ub85c\ubd80\ud130 \uc2a4\ud0c0\uc77c\ub9c1 \uc6d0\uce59\ub4e4\uc744 \ubc18\uc601\ud558\uace0 \uc788\ub2e4. \ud574\ub2f9 \uc2a4\ud0c0\uc77c \uc815\ubcf4\ub294 \ucf58\ud150\uce20 \ub0b4\ubd80\uc5d0 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc5d0\uac8c \ud3ed\ud3ec\uc218 \ud615\uc2dd\uc73c\ub85c \uc0c1\uc704\uc5d0\uc11c \ud558\uc704\ub85c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[38],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45506"}],"collection":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=45506"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45506\/revisions"}],"predecessor-version":[{"id":45512,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45506\/revisions\/45512"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45506"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45506"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}