{"id":45541,"date":"2021-11-09T00:29:37","date_gmt":"2021-11-08T15:29:37","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45541"},"modified":"2021-11-12T16:31:33","modified_gmt":"2021-11-12T07:31:33","slug":"layouts-in-jetpack-compose-%eb%a8%b8%ed%85%8c%eb%a6%ac%ec%96%bc-%ec%bb%b4%ed%8f%ac%eb%84%8c%ed%8a%b8","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45541","title":{"rendered":"Layouts in Jetpack Compose – \uba38\ud14c\ub9ac\uc5bc \ucef4\ud3ec\ub10c\ud2b8"},"content":{"rendered":"\n

\ucef4\ud3ec\uc988\uc5d0\ub294 \uc571\uc744 \ub9cc\ub4dc\ub294\ub370 \ud544\uc694\ud55c \uac1c\ubc1c\uc790\uac00 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uba38\ud14c\ub9ac\uc5bc \ucef4\ud3ec\ub10c\ud2b8 \ucef4\ud3ec\uc800\ube14\uc774 \ub538\ub824\uc788\ub2e4. \uac00\uc7a5 \ub192\uc740 \uc218\uc900\uc758 \ucef4\ud3ec\uc800\ube14\uc740 Scaffold<\/a>\ub2e4.<\/p>\n\n\n\n

Scaffold<\/h2>\n\n\n\n

Scaffold(\ubc1c\ud310)\ub294 \uae30\ucd08\uc801\uc778 \uba38\ud14c\ub9ac\uc5bc \ub514\uc790\uc778 \ub808\uc774\uc544\uc6c3 \uad6c\uc870\ub97c \uad6c\ud604\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc900\ub2e4. TopAppBar, BottomAppBar, FloatingActionButton \ubc0f Drawer\uc640 \uac19\uc740 \uac00\uc7a5 \uc77c\ubc18\uc801\uc778 \ucd5c\uc0c1\uc704 \uba38\ud14c\ub9ac\uc5bc \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub300\ud55c Slot\uc744 \uc81c\uacf5\ud55c\ub2e4. Scaffold\ub97c \uc0ac\uc6a9\ud558\uba74 \uc774\ub7ec\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \ubc30\uce58\ud558\uace0 \uc62c\ubc14\ub974\uac8c \ub3d9\uc791\ud558\ub3c4\ub85d \ud55c\ub2e4.<\/p>\n\n\n\n

\uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624\uc5d0\uc11c \uc0dd\uc131\ud55c \ud15c\ud50c\ub9bf\uc744 \uae30\ubc18\uc73c\ub85c, \uc0d8\ud50c \ucf54\ub4dc\ub97c \uc218\uc815\ud558\uc5ec Scaffold\ub97c \uc0ac\uc6a9\ud574\ubcf4\uc790. MainActivity.kt\ub97c \uc5f4\uace0 \ub354 \uc774\uc0c1 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc744 Greeting \ubc0f GreetingPreview \ucef4\ud3ec\uc800\ube14\uc744 \uc0ad\uc81c\ud558\uc790.<\/p>\n\n\n\n

LayoutsCodelab \ub77c\ub294 \uc774\ub984\uc73c\ub85c \uc0c8\ub85c\uc6b4 \ucef4\ud3ec\uc800\ube14\uc744 \uc0dd\uc131\ud558\uc5ec, \uc774 \ucf54\ub4dc\ub7a9\uc744 \ud1b5\ud574 \uc218\uc815\ud574\ubcf4\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n

class MainActivity : AppCompatActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContent {\n            LayoutsCodelabTheme {\n                LayoutsCodelab<\/strong>()\n            }\n        }\n    }\n}\n\n@Composable\nfun LayoutsCodelab<\/strong>() {\n    Text(text = \"Hi there!\")\n}\n\n@Preview\n@Composable\nfun LayoutsCodelabPreview<\/strong>() {\n    LayoutsCodelabTheme {\n        LayoutsCodelab<\/strong>()\n    }\n}<\/code><\/pre>\n\n\n\n
\ucef4\ud3ec\uc988 @Preview \uc560\ub178\ud14c\uc774\uc158\uc774 \ubd99\uc5b4\uc788\ub294 \ubbf8\ub9ac\ubcf4\uae30 \ud568\uc218\ub97c \uc0b4\ud3b4\ubcf4\uba74 LayoutCodelab\uc774 \ub2e4\uc74c\uacfc \uac19\uc774 \ub098\ud0c0\ub09c\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc608\uc81c\uc5d0 Scaffold \ucef4\ud3ec\uc800\ube14 \ucd94\uac00\ud558\uc5ec \uc804\ud615\uc801\uc778 \uba38\ud14c\ub9ac\uc5bc \ub514\uc790\uc778 \uad6c\uc870\ub97c \uac00\uc9c8 \uc218 \uc788\ub3c4\ub85d \ud558\uc790. Scaffold API\uc758 \ubaa8\ub4e0 \ub9e4\uac1c\ubcc0\uc218\ub294  @Composable (InnerPadding) -> Unit \ud0c0\uc785\uc758 content\ub97c \uc81c\uc678\ud558\uace0\ub294 \uc120\ud0dd\uc0ac\ud56d\uc774\ub2e4. \uc774 content \ub78c\ub2e4\uc2dd\uc758 \ub9e4\uac1c\ubcc0\uc218\ub294 padding\uc744 \ub9e4\uac1c\ubcc0\uc218\ub85c \ubc1b\ub294\ub370, \uc774\ub294 \ud654\uba74\uc5d0 \ub4e4\uc5b4\uac00\ub294 \uc544\uc774\ud15c\ub4e4\uc744 \uc801\uc808\ud558\uac8c \uc81c\ud55c\ud558\uae30 \uc704\ud574 \ucd5c\uc0c1\uc704 \ucef4\ud3ec\uc800\ube14\uc5d0 \uc801\uc6a9\ud558\ub294 \ud328\ub529\uc774\ub2e4. \uc77c\ub2e8 \uc774\ud574\ud558\uae30 \uc27d\ub3c4\ub85d \ub2e8\uc21c\ud558\uac8c \uc2dc\uc791\ud558\uae30 \uc704\ud574, Scaffold\ub97c \ub2e4\ub978 \uba38\ud14c\ub9ac\uc5bc \ucef4\ud3ec\ub10c\ud2b8 \uc5c6\uc774 \ucd94\uac00\ud574\ubcf4\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n
@Composable\nfun LayoutsCodelab() {\n\u00a0 \u00a0 Scaffold { innerPadding ->\n\u00a0 \u00a0 \u00a0 \u00a0 <\/strong>Text(text = \"Hi there!\", modifier = Modifier.padding(innerPadding))\n\u00a0 \u00a0 }<\/strong>\n}<\/code><\/pre>\n\n\n\n
\ubbf8\ub9ac\ubcf4\uae30\ub85c \ud655\uc778\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\ud654\uba74\uc5d0 \uba54\uc778 \ucee8\ud150\uce20\ub97c Column\uacfc \ud568\uaed8 \ub123\uae30\ub97c \uc6d0\ud558\uba74, Column\uc758 Modifier\ub97c \ub2e4\uc74c\uacfc \uac19\uc774 \uc801\uc6a9\ud558\uc790.<\/p>\n\n\n\n
@Composable\nfun LayoutsCodelab() {\n    Scaffold { innerPadding<\/strong> ->\n        Column(modifier = Modifier.padding(innerPadding))<\/strong> {\n            Text(text = \"Hi there!\")\n            Text(text = \"Thanks for going through the Layouts codelab\")\n        }\n    }\n}<\/code><\/pre>\n\n\n\n
\ubbf8\ub9ac\ubcf4\uae30\ub85c \ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\ucf54\ub4dc\uc758 \uc7ac\uc0ac\uc6a9\uc131\uacfc \ud14c\uc2a4\ud2b8 \uc6a9\uc774\uc131\uc744 \ub354 \uc88b\uac8c \ub9cc\ub4e4\uae30 \uc704\ud574\uc11c, \uc791\uc740 \ub2e8\uc704\ub85c \uad6c\uc870\ub97c \uc9dc\uc57c\ud55c\ub2e4. \uadf8\ub7ec\uae30 \uc704\ud574\uc11c\ub294 \ud654\uba74\uc758 \ucee8\ud150\uce20\uc640 \ud568\uaed8 \ub610 \ub2e4\ub978 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub97c \uc0dd\uc131\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
@Composable\nfun LayoutsCodelab() {\n    Scaffold { innerPadding ->\n        BodyContent(Modifier.padding(innerPadding))<\/strong>\n    }\n}\n\n@Composable\nfun BodyContent(modifier: Modifier = Modifier) {\n    Column(modifier = modifier) {\n        Text(text = \"Hi there!\")\n        Text(text = \"Thanks for going through the Layouts codelab\")\n    }\n}<\/strong><\/code><\/pre>\n\n\n\n
\uc548\ub4dc\ub85c\uc774\ub4dc\uc5d0\uc11c\ub294 \uc0c1\ub2e8 AppBar\uc5d0 \ud604\uc7ac \ud654\uba74, \ub124\ube44\uac8c\uc774\uc158, \uc561\uc158\uc5d0 \ub300\ud55c \uc815\ubcf4\ub97c \ubcf4\uc5ec\uc8fc\ub294 \uac83\uc774 \uc77c\ubc18\uc801\uc774\ub2e4. \uc608\uc81c\uc5d0 \uc774\ub7f0 \uc810\uc744 \uc9c0\uae08 \ucd94\uac00\ud574\ubcf4\uc790.<\/p>\n\n\n\n
TopAppBar<\/h2>\n\n\n\n
Scaffold\ub294 @Composable() -> Unit \ud0c0\uc785\uc758 topBar \ub9e4\uac1c\ubcc0\uc218\uc640 \ud568\uaed8 \uc0c1\ub2e8 AppBar\ub97c \uc704\ud55c slot\uc744 \uac00\uc9c0\uace0 \uc788\ub2e4. \uc774\uac83\uc774 \uc758\ubbf8\ud558\ub294 \uc810\uc740 \uc2ac\ub86f\uc5d0 \uc6b0\ub9ac\uac00 \uc6d0\ud558\ub294 \uc5b4\ub5a4 \ucef4\ud3ec\uc800\ube14\ub3c4 \ucc44\uc6cc \ub123\uc744 \uc218 \uc788\ub2e4\ub294 \uac83\uc774\ub2e4. \uc608\ub97c\ub4e4\uc5b4, h3 \uc2a4\ud0c0\uc77c\uc758 \ud14d\uc2a4\ud2b8\ub97c \ud3ec\ud568\ud558\uae38 \uc6d0\ud558\uba74 slot\uc5d0 Text\ub97c \uc0ac\uc6a9\ud558\uae30\ub9cc \ud558\uba74\ub41c\ub2e4. \ub2e4\uc74c \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n\n\n\n
@Composable\nfun LayoutsCodelab() {\n    Scaffold(\n        topBar = {\n            Text(\n                text = \"LayoutsCodelab\",\n                style = MaterialTheme.typography.h3\n            )<\/strong>\n        }\n    ) { innerPadding ->\n        BodyContent(Modifier.padding(innerPadding))\n    }\n}<\/code><\/pre>\n\n\n\n
\ubbf8\ub9ac\ubcf4\uae30\uc0c1\uc73c\ub85c\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \ub098\uc628\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uadf8\ub7ec\ub098 \ucef4\ud3ec\uc988\uc5d0\uc11c \ub300\ubd80\ubd84\uc758 \uba38\ud14c\ub9ac\uc5bc \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubcf4\uba74 \ud0c0\uc774\ud2c0, \ub124\ube44\uac8c\uc774\uc158 \uc544\uc774\ucf58 \ubc0f \uc561\uc158\uc744 \uc704\ud55c \uc2ac\ub86f\uc744 \uac16\ub294 TopAppBar \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub538\ub824\uc788\ub2e4. \ub610\ud55c, \uac01 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc0ac\uc6a9\ud560 \uc0c9\uc0c1\uacfc \uac19\uc774 \uba38\ud14c\ub9ac\uc5bc \uc2a4\ud399\uc5d0\uc11c \uad8c\uc7a5\ud558\ub294 \uc0ac\ud56d\uc5d0 \ub9de\uac8c \uc870\uc815\ub418\ub294 \uc77c\ubd80 \uae30\ubcf8\uac12\uc774 \ud568\uaed8 \uc81c\uacf5\ub41c\ub2e4.<\/p>\n\n\n\n
\ub2e4\uc74c slot API \ud328\ud134\uc744 \ubcf4\uba74, TopAppBar\uc758 title \uc2ac\ub86f\uc5d0 \ud654\uba74 \uc81c\ubaa9\uc744 \uac16\ub294 Text\ub97c \ubc30\uce58\ud558\uace0 \uc788\ub2e4.<\/p>\n\n\n\n
@Composable\nfun LayoutsCodelab() {\n    Scaffold(\n        topBar = {\n            TopAppBar(\n                title = {\n                    Text(text = \"LayoutsCodelab\")\n                }<\/strong>\n            )\n        }\n    ) { innerPadding ->\n        BodyContent(Modifier.padding(innerPadding))\n    }\n}<\/code><\/pre>\n\n\n\n
\ubbf8\ub9ac\ubcf4\uae30\uc5d0\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \ub098\uc628\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc0c1\ub2e8 AppBar\ub4e4\uc740 \ubcf4\ud1b5 action \ud56d\ubaa9\ub4e4\uc744 \uac16\ub294\ub2e4. \uc5ec\uae30 \ub098\uc624\ub294 \uc608\uc81c\uc5d0\uc11c, \ubb34\uc5b8\uac00 \ubc30\uc6e0\ub2e4\uace0 \uc0dd\uac01\uc774 \ub4e4 \ub54c, \ud0ed \ud560 \uc218 \uc788\ub294 \uc990\uaca8\ucc3e\uae30(favorite) \ubc84\ud2bc\uc744 \ucd94\uac00\ud574\ubcf4\uc790. \ucef4\ud3ec\uc988\ub294 \ub610\ud55c \uc6b0\ub9ac\uac00 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ubbf8\ub9ac \uc815\uc758\ub41c \uba38\ud14c\ub9ac\uc5bc \uc544\uc774\ucf58\uc744 \ud3ec\ud568\ud558\uace0 \uc788\ub294\ub370, \uc608\ub97c \ub4e4\uba74 \ub2eb\uae30(close), \uc990\uaca8\ucc3e\uae30(favorite) \ubc0f \uba54\ub274(menu) \uac00 \uc788\ub2e4.<\/p>\n\n\n\n
\uc0c1\ub2e8 AppBar\uc5d0 action \uc544\uc774\ud15c\ub4e4\uc744 \uc704\ud55c slot\uc740 actions \ub9e4\uac1c\ubcc0\uc218\ub85c \ubc1b\ub294\ub370, \uc774\ub294 \ub0b4\ubd80\uc801\uc73c\ub85c Row\ub97c \uc0ac\uc6a9\ud55c\ub2e4. \uadf8\ub798\uc11c \ub2e4\uc218\uc758 action\uc744 \uc218\ud3c9\uc801\uc73c\ub85c \ubc30\uce58\ud55c\ub2e4. \ubbf8\ub9ac \uc815\uc758\ub41c \uc544\uc774\ucf58\ub4e4\uc911 \ud558\ub098\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574, \uc6b0\ub9b0 IconButton \ucef4\ud3ec\uc800\ube14\uc5d0 \ub0b4\ubd80\uc5d0 Icon\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
@Composable\nfun LayoutsCodelab() {\n    Scaffold(\n        topBar = {\n            TopAppBar(\n                title = {\n                    Text(text = \"LayoutsCodelab\")\n                },\n                actions = {\n                    IconButton(onClick = { \/* doSomething() *\/ }) {\n                        Icon(Icons.Filled.Favorite, contentDescription = null)\n                    }\n                }<\/strong>\n            )\n        }\n    ) { innerPadding ->\n        BodyContent(Modifier.padding(innerPadding))\n    }\n}<\/code><\/pre>\n\n\n\n
\ubbf8\ub9ac\ubcf4\uae30\ub85c \ud655\uc778\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\ubcf4\ud1b5\uc758 \uacbd\uc6b0, action\ub4e4\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc0c1\ud0dc(state)\ub97c \uc218\uc815\ud55c\ub2e4. \uc0c1\ud0dc\uc5d0 \ub300\ud55c \ub354 \ub9ce\uc740 \uc815\ubcf4\ub294 Basics Compose codelab\uc5d0\uc11c \uc0c1\ud0dc\uad00\ub9ac\uc758 \uae30\ucd08\uc5d0 \ub300\ud574 \ubc30\uc6b8 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
Modifier \ubc30\uce58\ud558\uae30<\/h2>\n\n\n\n
\uc0c8\ub85c\uc6b4 \ucef4\ud3ec\uc800\ube14\uc744 \uc0dd\uc131\ud560 \ub54c\ub9c8\ub2e4, \uae30\ubcf8\uac12\uc744 \uac16\ub294 Modifier \ub9e4\uac1c\ubcc0\uc218\uc758 \uc0ac\uc6a9\uc740 \ucef4\ud3ec\uc800\ube14\uc744 \uc880 \ub354 \uc7ac\uc0ac\uc6a9\ud558\uae30 \uc88b\uc740 \ubc29\ubc95\uc774\ub2e4. \uc544\ub798\uc5d0 \ub098\uc62c BodyContent \ucef4\ud3ec\uc800\ube14\uc740 \uc774\ubbf8 Modifier\ub97c \ub9e4\uac1c\ubcc0\uc218\ub85c \ucde8\ud558\uace0 \uc788\ub2e4. \ub9cc\uc57d \ub354 \ub9ce\uc740 \uc5ec\ubc31\uc744 \uac16\ub3c4\ub85d padding\uac12\uc744 BodyContent\uc5d0 \ucd94\uac00\ud558\uace0 \uc2f6\ub2e4\uba74, padding\uc774 \ud3ec\ud568\ub41c Modifier\ub97c \uc5b4\ub514\uc5d0 \ubc30\uce58\ud574\uc57c \ud558\ub294\uac8c \uc88b\uc744\uae4c?<\/p>\n\n\n\n
\ub450\uac00\uc9c0 \uac00\ub2a5\uc131\uc744 \uace0\ub824\ud574\ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
  • 1. Modifier\ub97c \uc9c1\uc811\uc801\uc73c\ub85c \uc790\uc2dd \ucef4\ud3ec\uc800\ube14\uc5d0\ub9cc \uc801\uc6a9\ud558\uc5ec, BodyContent\uc5d0 \ub300\ud55c \ubaa8\ub4e0 \ud638\ucd9c\uc774 \ucd94\uac00\uc801\uc778 \uc5ec\ubc31\uc744 \uc801\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 \uac83<\/li><\/ul>\n\n\n\n
    @Composable\nfun BodyContent(modifier: Modifier = Modifier) {\n\u00a0 \u00a0 Column(modifier = modifier.padding(8.dp)<\/strong>) {\n\u00a0 \u00a0 \u00a0 \u00a0 Text(text = \"Hi there!\")\n\u00a0 \u00a0 \u00a0 \u00a0 Text(text = \"Thanks for going through the Layouts codelab\")\n\u00a0 \u00a0 }\n}<\/code><\/pre>\n\n\n\n
    • 2. \ucef4\ud3ec\uc800\ube14\uc744 \ud638\ucd9c\ud560 \ub54c Modifier\ub97c \uc801\uc6a9\ud558\uc5ec \ud544\uc694\ud560 \ub54c \ucd94\uac00\uc801\uc778 \uc5ec\ubc31\uc744 \ub354\ud558\ub294 \uac83<\/li><\/ul>\n\n\n\n
      @Composable\nfun LayoutsCodelab() {\n\u00a0 \u00a0 Scaffold(...) { innerPadding ->\n\u00a0 \u00a0 \u00a0 \u00a0 BodyContent(Modifier.padding(innerPadding).padding(8.dp)<\/strong>)\n\u00a0 \u00a0 }\n}<\/code><\/pre>\n\n\n\n
      \uc774\uac83\uc740 \uc804\uc801\uc73c\ub85c \ucef4\ud3ec\uc800\ube14 \ud615\uc2dd \ubc0f \uc720\uc988\ucf00\uc774\uc2a4\ub97c \ubcf4\uace0 \uacb0\uc815\ud560 \uc218 \uc788\ub2e4. Modifier\uac00 \ucef4\ud3ec\uc800\ube14\uc5d0 \ubcf8\uc9c8\uc801\uc778 \ubd80\ubd84\uc774\ub77c\uba74, \uc774\ub97c \uc548\ucabd\uc5d0 \ubc30\uce58\ud558\ub3c4\ub85d \ud558\uc790. \ub9cc\uc57d\uc5d0 \uadf8\uac8c \uc544\ub2c8\ub77c\uba74, \ubc16\uc5d0 \ubc30\uce58\ud558\uc790. \uc6b0\ub9ac\uc758 \uacbd\uc6b0 padding\uc774 BodyContent\ub97c \ud638\ucd9c\ud560 \ub54c\ub9c8\ub2e4 \ud56d\uc0c1 \uac15\uc81c\ub85c \uc801\uc6a9\ub418\uc9c0 \uc54a\uc744 \uc218 \uc788\uc73c\ubbc0\ub85c \ub450\ubc88\uc9f8 \uc635\uc158\uc744 \uc120\ud0dd\ud558\uc790. \uc774\uac74 \uc815\ub9d0 case-by-case\uc784\uc744 \uc720\uc758\ud558\uc790.<\/p>\n\n\n\n
      Modifier\ub294 \uc774\uc804\uc5d0 \ud638\ucd9c\ud55c Modifier \ud568\uc218\ub97c \ud1b5\ud574 \uccb4\uc774\ub2dd\uc744 \ud560 \uc218 \uc788\ub2e4. \uccb4\uc774\ub2dd\uc774 \ubd88\uac00\ub2a5\ud55c \uba54\uc11c\ub4dc\ub97c \ud638\ucd9c\ud588\uc744\ub54c\ub294 .then()\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \uc6b0\ub9ac \uc608\uc81c\uc5d0\uc11c\ub294 modifier\ub85c \uccb4\uc774\ub2dd\uc744 \uc2dc\uc791\ud558\ub294\ub370, \uc774\ub294 \uccb4\uc774\ub2dd\uc774 \ub9e4\uac1c\ubcc0\uc218\ub85c \uc804\ub2ec\ub41c modifier\uc5d0 \uacc4\uc18d\ud558\uc5ec \uccb4\uc774\ub2dd\ub418\ub294 \uac83\uc744 \uc758\ubbf8\ud55c\ub2e4.<\/p>\n\n\n\n
      \ub354 \ub9ce\uc740 \uc544\uc774\ucf58\ub4e4<\/h2>\n\n\n\n
       \uc774\uc804\uc5d0 \uc18c\uac1c\ud55c \uc544\uc774\ucf58\ub4e4\uc740 \uc81c\uc678\ud558\uace0, \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc0c8\ub85c\uc6b4 \uc758\uc874\uc131\uc744 \ucd94\uac00\ud558\ub294 \uac83\uc73c\ub85c \uc804\uccb4 \uba38\ud14c\ub9ac\uc5bc \uc544\uc774\ucf58 \ubaa9\ub85d\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \uc774 \uc544\uc774\ucf58\ub4e4\uc744 \uc2e4\ud5d8\ud574\ubcf4\uace0 \uc2f6\ub2e4\uba74, app\/build.gradle \ud30c\uc77c\uc744 \uc5f4\uc5b4\uc11c ui-material-icons-extended \uc758\uc874\uc131\uc744 \ucd94\uac00\ud55c\ub2e4.<\/p>\n\n\n\n
      dependencies {\n\u00a0 ...\n\u00a0 implementation \"androidx.compose.material:material-icons-extended:$compose_version\"\n}<\/code><\/pre>\n\n\n\n
      \uc774\uc81c \uc6d0\ud558\ub294 \ub9cc\ud07c TopAppBar\uc758 \uc544\uc774\ucf58\ub4e4\uc744 \uc5b4\uc11c \ubcc0\uacbd\ud574\ubcf4\ub3c4\ub85d \ud558\uc790!<\/p>\n\n\n\n
      \ucd94\uac00 \uc791\uc5c5<\/h2>\n\n\n\n
      Scaffold \ubc0f TopAppBar\ub294 \ub2e8\uc9c0 \uba38\ud14c\ub9ac\uc5bc \ub514\uc790\uc778\uc744 \uac16\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc704\ud574 \uc0ac\uc6a9\ub418\uc5b4\uc9c0\ub294 \ucef4\ud3ec\uc800\ube14\uc5d0 \ubd88\uacfc\ud558\ub2e4. BottomNavigation \ub610\ub294 BottomDrawer\uc640 \uac19\uc740 \ub2e4\ub978 \uba38\ud14c\ub9ac\uc5bc \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub300\ud574\uc11c\ub3c4 \ub3d9\uc77c\ud55c \uc791\uc5c5\uc744 \uc218\ud589\ud560 \uc218 \uc788\ub2e4. \uc5f0\uc2b5\uc73c\ub85c \uc9c0\uae08\uae4c\uc9c0 \uc6b0\ub9ac\uac00 \ud574\uc654\ub358 \uac89\uacfc \uac19\uc740 \ubc29\uc2dd\uc73c\ub85c \uc774\ub7ec\ud55c API\uacfc \ud568\uaed8 Scaffold\uc758 Slot\ub4e4\uc744 \ucc44\uc6cc\ubcf4\ub3c4\ub85d \ud558\uc790.<\/p>\n","protected":false},"excerpt":{"rendered":"
      \ucef4\ud3ec\uc988\uc5d0\ub294 \uc571\uc744 \ub9cc\ub4dc\ub294\ub370 \ud544\uc694\ud55c \uac1c\ubc1c\uc790\uac00 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uba38\ud14c\ub9ac\uc5bc \ucef4\ud3ec\ub10c\ud2b8 \ucef4\ud3ec\uc800\ube14\uc774 \ub538\ub824\uc788\ub2e4. \uac00\uc7a5 \ub192\uc740 \uc218\uc900\uc758 \ucef4\ud3ec\uc800\ube14\uc740 Scaffold\ub2e4. Scaffold Scaffold(\ubc1c\ud310)\ub294 \uae30\ucd08\uc801\uc778 \uba38\ud14c\ub9ac\uc5bc \ub514\uc790\uc778 \ub808\uc774\uc544\uc6c3 \uad6c\uc870\ub97c \uad6c\ud604\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc900\ub2e4. TopAppBar, BottomAppBar, FloatingActionButton \ubc0f Drawer\uc640 \uac19\uc740 \uac00\uc7a5 \uc77c\ubc18\uc801\uc778 \ucd5c\uc0c1\uc704 \uba38\ud14c\ub9ac\uc5bc \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub300\ud55c Slot\uc744 \uc81c\uacf5\ud55c\ub2e4. Scaffold\ub97c \uc0ac\uc6a9\ud558\uba74 \uc774\ub7ec\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \ubc30\uce58\ud558\uace0 \uc62c\ubc14\ub974\uac8c \ub3d9\uc791\ud558\ub3c4\ub85d \ud55c\ub2e4. […]<\/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\/45541"}],"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=45541"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45541\/revisions"}],"predecessor-version":[{"id":45550,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45541\/revisions\/45550"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}