{"id":1912,"date":"2026-06-26T13:48:33","date_gmt":"2026-06-26T13:48:33","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=1912"},"modified":"2026-06-26T14:02:46","modified_gmt":"2026-06-26T14:02:46","slug":"figma-01","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/figma-01\/","title":{"rendered":"\ud53c\uadf8\ub9c8 \ub514\uc790\uc778 \ud1a0\ud070"},"content":{"rendered":"<h2>1. \ub514\uc790\uc778 \ud1a0\ud070<\/h2>\n<h3>1.1 \uc774\ub7f0 \uacbd\ud5d8\uc774 \uc788\ub294\uac00?<\/h3>\n<p>\ub514\uc790\uc778 \uc791\uc5c5\uc744 \ud558\ub2e4 \ubcf4\uba74 \uc774\ub7f0 \uc0c1\ud669\uc774 \uc790\uc8fc \uc0dd\uae34\ub2e4.<\/p>\n<blockquote>\n<p>\uac1c\ubc1c\uc790: &quot;\ubc84\ud2bc \uc0c9\uc774 \ud53c\uadf8\ub9c8\ub791 \ub2e4\ub978\ub370\uc694?&quot;<br \/>\n\ub514\uc790\uc774\ub108: &quot;\uc544, \uc81c\uac00 \uc4f4 \ud30c\ub780\uc0c9\uc774 <code>#2563EB<\/code>\uc778\ub370 \ud639\uc2dc <code>#1D4ED8<\/code> \uc4f0\uc168\ub098\uc694?&quot;<br \/>\n\uac1c\ubc1c\uc790: &quot;&#8230; \ube44\uc2b7\ud574 \ubcf4\uc5ec\uc11c \uadf8\ub0e5 \uc37c\uc5b4\uc694.&quot;<\/p>\n<\/blockquote>\n<p>\ub610\ub294 \uc774\ub7f0 \uc0c1\ud669\ub3c4 \uc788\ub2e4.<\/p>\n<blockquote>\n<p>\ub514\uc790\uc774\ub108: &quot;\ube0c\ub79c\ub4dc \uceec\ub7ec\uac00 \ubc14\ub00c\uc5c8\uc5b4\uc694. \ud30c\ub780\uc0c9 \u2192 \ubcf4\ub77c\uc0c9\uc73c\ub85c\uc694.&quot;<br \/>\n\uac1c\ubc1c\uc790: &quot;\ud53c\uadf8\ub9c8\uc5d0 \ud30c\ub780\uc0c9\uc774 \uc4f0\uc778 \uacf3\uc774 87\uad70\ub370\ub124\uc694. \ub2e4 \ucc3e\uc544\uc11c \ubc14\uafd4\uc57c \ud574\uc694?&quot;<\/p>\n<\/blockquote>\n<p>\uc774 \ub450 \uac00\uc9c0 \ubb38\uc81c\ub97c \ud55c \ubc88\uc5d0 \ud574\uacb0\ud558\ub294 \uac83\uc774 <strong>\ub514\uc790\uc778 \ud1a0\ud070<\/strong>\uc774\ub2e4.<\/p>\n<hr>\n<h3>1.2 \ub514\uc790\uc778 \ud1a0\ud070\uc774\ub780?<\/h3>\n<p>\uc27d\uac8c \ub9d0\ud558\uba74 <strong>&quot;\uc0c9\uc0c1, \ud06c\uae30, \uac04\uaca9 \uac19\uc740 \ub514\uc790\uc778 \uac12\uc5d0 \uc774\ub984\uc744 \ubd99\uc5ec\ub193\uc740 \uac83&quot;<\/strong>\uc774\ub2e4.<\/p>\n<p>\uc608\ub97c \ub4e4\uc5b4 \ubc84\ud2bc \uc0c9\uc0c1\uc744 \uc774\ub807\uac8c \uc815\uc758\ud55c\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.krds.go.kr\/resources\/img\/guide\/contents\/style\/token_visual.png\" alt=\"\ub514\uc790\uc778 \ud1a0\ud070 \uc608\uc2dc\" title=\"\ub514\uc790\uc778 \ud1a0\ud070 \uc608\uc2dc\"><\/p>\n<pre><code>\ubc84\ud2bc \ubc30\uacbd\uc0c9 = \ube0c\ub79c\ub4dc \uba54\uc778 \uc0c9\uc0c1\n\ube0c\ub79c\ub4dc \uba54\uc778 \uc0c9\uc0c1 = #2563EB\n<\/code><\/pre>\n<blockquote>\n<p>[!TIP]<\/p>\n<p><strong>\ucc38\uace0\uc0ac\uc774\ud2b81: KRD<\/strong> <strong><a href=\"https:\/\/www.krds.go.kr\/html\/site\/style\/style_07.html\">KRD<\/a><\/strong><\/p>\n<p><strong>\ucc38\uace0\uc0ac\uc774\ud2b82: \uc544\ud2c0\ub77c\uc2dc\uc548<\/strong> <strong><a href=\"https:\/\/atlassian.design\/foundations\/tokens\">atlassian<\/a><\/strong><\/p>\n<\/blockquote>\n<p>\uc774\ub807\uac8c \ud558\uba74 \ub098\uc911\uc5d0 \ube0c\ub79c\ub4dc \uc0c9\uc0c1\uc744 <code>#7C3AED<\/code>(\ubcf4\ub77c\uc0c9)\ub85c \ubc14\uafb8\uace0 \uc2f6\uc744 \ub54c <strong>\ud55c \uacf3\ub9cc \uc218\uc815\ud558\uba74<\/strong> \ubc84\ud2bc, \ub9c1\ud06c, \ubc30\uc9c0 \ub4f1 \uc5f0\uacb0\ub41c \ubaa8\ub4e0 \uc694\uc18c\uac00 \ub3d9\uc2dc\uc5d0 \ubc14\ub010\ub2e4.<\/p>\n<blockquote>\n<p>[!INFO]<\/p>\n<ul>\n<li>\n<p>\uac12(<code>#2563EB<\/code>)\uc5d0 \uc774\ub984(<code>\ube0c\ub79c\ub4dc \uba54\uc778 \uc0c9\uc0c1<\/code>)\uc744 \ubd99\uc778 \uac83\uc774 \ud1a0\ud070\uc774\ub2e4.<\/p>\n<\/li>\n<li>\n<p>\ub514\uc790\uc774\ub108\uc640 \uac1c\ubc1c\uc790\uac00 <strong>\uac19\uc740 \uc774\ub984<\/strong>\uc744 \uacf5\uc720\ud558\uba74 \uc624\ud574\uac00 \uc0ac\ub77c\uc9c4\ub2e4.<\/p>\n<\/li>\n<li>\n<p>Figma\uc5d0\uc11c \uc218\uc815\ud558\uba74 \ucf54\ub4dc\uae4c\uc9c0 \uc790\ub3d9\uc73c\ub85c \ubc14\ub00c\ub294 \uc5f0\uacb0 \uace0\ub9ac\uac00 \ub41c\ub2e4.<\/p>\n<\/li>\n<\/ul>\n<\/blockquote>\n<hr>\n<h3>1.3 \ud1a0\ud070\uc774 \uc5c6\uc73c\uba74 \uc5b4\ub5a4 \uc77c\uc774 \uc0dd\uae30\ub294\uac00?<\/h3>\n<p><strong>\uc0c1\ud669 1: \uc0c9\uc0c1 \uac12\uc744 \uc9c1\uc811 \uc4f0\ub294 \uacbd\uc6b0<\/strong><\/p>\n<pre><code>\ubc84\ud2bc \ubc30\uacbd   \u2192  #2563EB  (\uc9c1\uc811 \uc785\ub825)\n\ud5e4\ub354 \ubc30\uacbd   \u2192  #2563EB  (\uc9c1\uc811 \uc785\ub825)\n\ub9c1\ud06c \uc0c9\uc0c1   \u2192  #2563EB  (\uc9c1\uc811 \uc785\ub825)\n\uac15\uc870 \ud14d\uc2a4\ud2b8 \u2192  #2563EB  (\uc9c1\uc811 \uc785\ub825)\n<\/code><\/pre>\n<p>\ube0c\ub79c\ub4dc \uc0c9\uc0c1\uc774 \ubc14\ub00c\uba74 \uc704 4\uacf3\uc744 <strong>\ubaa8\ub450 \ucc3e\uc544\uc11c \uc77c\uc77c\uc774 \ubc14\uafd4\uc57c \ud55c\ub2e4.<\/strong><br \/>\n\uc2e4\uc81c \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \uc774\ub7f0 \uac12\uc774 \uc218\uc2ed~\uc218\ubc31 \uad70\ub370\uc5d0 \ud37c\uc838 \uc788\ub2e4.<\/p>\n<p><strong>\uc0c1\ud669 2: \ud1a0\ud070\uc744 \uc4f0\ub294 \uacbd\uc6b0<\/strong><\/p>\n<pre><code>\ubc84\ud2bc \ubc30\uacbd   \u2192  {color.primary}  (\ud1a0\ud070 \ucc38\uc870)\n\ud5e4\ub354 \ubc30\uacbd   \u2192  {color.primary}  (\ud1a0\ud070 \ucc38\uc870)\n\ub9c1\ud06c \uc0c9\uc0c1   \u2192  {color.primary}  (\ud1a0\ud070 \ucc38\uc870)\n\uac15\uc870 \ud14d\uc2a4\ud2b8 \u2192  {color.primary}  (\ud1a0\ud070 \ucc38\uc870)\n\ncolor.primary = #2563EB  \u2190 \uc5ec\uae30 1\uacf3\ub9cc \ubc14\uafb8\uba74 \ub05d\n<\/code><\/pre>\n<hr>\n<h3>1.4 \ud1a0\ud070\uc758 3\ub2e8\uacc4 \uad6c\uc870<\/h3>\n<p>\ud1a0\ud070\uc744 \ucc98\uc74c \ubcf4\uba74 &quot;\uc65c \uc774\ub807\uac8c \ub098\ub220\ub193\uc558\uc9c0?&quot;\ub77c\ub294 \uc0dd\uac01\uc774 \ub4dc\ub294 \uac8c \uc815\uc0c1\uc774\ub2e4.<br \/>\n\ud55c \ub2e8\uacc4\uc529 \uc774\ud574\ud574\ubcf4\uc790.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.krds.go.kr\/resources\/img\/guide\/contents\/style\/token_level_01.png\" alt=\"\ub514\uc790\uc778 \ud1a0\ud070 \ub808\ubca8 \uc608\uc2dc\" title=\"\ub514\uc790\uc778 \ud1a0\ud070 \ub808\ubca8 \uc608\uc2dc\"><\/p>\n<p><strong>\ub2e8\uacc4 1 \u2014 Primitive (\uc6d0\uc7ac\ub8cc)<\/strong><\/p>\n<p>\ube0c\ub79c\ub4dc\uac00 \uac00\uc9c4 \ubaa8\ub4e0 \uc0c9\uc0c1\u00b7\ud06c\uae30 \uac12\uc744 \uadf8\ub0e5 \ub098\uc5f4\ud55c\ub2e4.<br \/>\n\uc694\ub9ac \uc7ac\ub8cc\ud1b5\uc5d0 \uc7ac\ub8cc\ub97c \ubcf4\uad00\ud558\ub294 \uac83\uacfc \uac19\ub2e4.<\/p>\n<pre><code>blue-50  = #EFF6FF\nblue-100 = #DBEAFE\n  ...\nblue-600 = #2563EB   \u2190 \uadf8\ub0e5 \uc774 \uc0c9\uc774 \uc874\uc7ac\ud55c\ub2e4\ub294 \uc0ac\uc2e4\ub9cc \uae30\ub85d\nblue-700 = #1D4ED8\n<\/code><\/pre>\n<blockquote>\n<p>\u26a0\ufe0f <strong>Primitive\ub294 UI\uc5d0 \uc9c1\uc811 \uc5f0\uacb0\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/strong><br \/>\n&quot;\ud30c\ub780\uc0c9&quot;\uc774\ub77c\ub294 \uc0ac\uc2e4\ub9cc \uae30\ub85d\ud558\ub294 \ub2e8\uacc4\uc774\ub2e4. \uc5b4\ub514\uc5d0 \uc4f0\uc774\ub294\uc9c0\ub294 \uc544\uc9c1 \uc815\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n<\/blockquote>\n<p><strong>\ub2e8\uacc4 2 \u2014 Semantic (\uc6a9\ub3c4 \ubd80\uc5ec)<\/strong><\/p>\n<p>Primitive \uac12\uc5d0 <strong>&quot;\uc5b4\ub514\uc5d0 \uc4f0\uc778\ub2e4&quot;\ub294 \uc758\ubbf8<\/strong>\ub97c \ubd99\uc774\ub294 \ub2e8\uacc4\uc774\ub2e4.<\/p>\n<pre><code>color.primary       = {blue-600}    \u2190 &quot;\ube0c\ub79c\ub4dc \uba54\uc778 \uc0c9&quot;\ncolor.primary.hover = {blue-700}    \u2190 &quot;\ud638\ubc84 \uc2dc \uc0c9&quot;\ncolor.text.primary  = {gray-900}    \u2190 &quot;\uae30\ubcf8 \ud14d\uc2a4\ud2b8 \uc0c9&quot;\ncolor.bg.default    = {white}       \u2190 &quot;\uae30\ubcf8 \ubc30\uacbd\uc0c9&quot;\n<\/code><\/pre>\n<p><strong>\ub2e8\uacc4 3 \u2014 Component (\ucef4\ud3ec\ub10c\ud2b8 \uc804\uc6a9)<\/strong><\/p>\n<p>\ud2b9\uc815 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c\ub9cc \uc4f0\ub294 \uac12\uc744 Semantic\uc744 \ucc38\uc870\ud574\uc11c \uc815\uc758\ud55c\ub2e4.<\/p>\n<pre><code>button.bg.default  = {color.primary}        \u2190 \ubc84\ud2bc \ubc30\uacbd\nbutton.bg.hover    = {color.primary.hover}  \u2190 \ubc84\ud2bc \ud638\ubc84 \ubc30\uacbd\ninput.border       = {color.border.default} \u2190 \uc778\ud48b \ud14c\ub450\ub9ac\n<\/code><\/pre>\n<p><strong>\uc65c \uc774\ub807\uac8c 3\ub2e8\uacc4\ub85c \ub098\ub204\ub294\uac00?<\/strong><\/p>\n<p>\ub2e4\ud06c\ubaa8\ub4dc\ub97c \uc0dd\uac01\ud574\ubcf4\uba74 \ubc14\ub85c \uc774\ud574\uac00 \ub41c\ub2e4.<\/p>\n<pre><code>\ub77c\uc774\ud2b8 \ubaa8\ub4dc:  color.bg.default = {white}    \u2192 #FFFFFF\n\ub2e4\ud06c \ubaa8\ub4dc:    color.bg.default = {gray-900} \u2192 #0F172A\n<\/code><\/pre>\n<p>Semantic \ud1a0\ud070 \uac12\ub9cc \uad50\uccb4\ud588\ub294\ub370, \uc774 \ud1a0\ud070\uc744 \ucc38\uc870\ud558\uace0 \uc788\ub294 <strong>\ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8<\/strong>\uac00 \ub3d9\uc2dc\uc5d0 \ubc14\ub010\ub2e4.<br \/>\n\ucef4\ud3ec\ub10c\ud2b8\ub97c \ud558\ub098\uc529 \uc218\uc815\ud560 \ud544\uc694\uac00 \uc5c6\ub2e4.<\/p>\n<hr>\n<h3>1.5 \ud1a0\ud070\uc5d0 \ub2f4\uc744 \uc218 \uc788\ub294 \uac83\ub4e4<\/h3>\n<p>\uc0c9\uc0c1\ub9cc \ud1a0\ud070\uc73c\ub85c \ub9cc\ub4dc\ub294 \uac8c \uc544\ub2c8\ub2e4.<\/p>\n<table>\n<thead>\n<tr>\n<th>\uc885\ub958<\/th>\n<th>\uc608\uc2dc \uc774\ub984<\/th>\n<th>\uc608\uc2dc \uac12<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\uc0c9\uc0c1<\/td>\n<td><code>color.primary<\/code><\/td>\n<td><code>#2563EB<\/code><\/td>\n<\/tr>\n<tr>\n<td>\uae00\uc790 \ud06c\uae30<\/td>\n<td><code>font.size.md<\/code><\/td>\n<td><code>16<\/code><\/td>\n<\/tr>\n<tr>\n<td>\uae00\uc790 \ub450\uaed8<\/td>\n<td><code>font.weight.bold<\/code><\/td>\n<td><code>700<\/code><\/td>\n<\/tr>\n<tr>\n<td>\uc904 \uac04\uaca9<\/td>\n<td><code>font.lineHeight.normal<\/code><\/td>\n<td><code>1.5<\/code><\/td>\n<\/tr>\n<tr>\n<td>\uc5ec\ubc31<\/td>\n<td><code>spacing.4<\/code><\/td>\n<td><code>16<\/code><\/td>\n<\/tr>\n<tr>\n<td>\ubaa8\uc11c\ub9ac \ub465\uae00\uae30<\/td>\n<td><code>radius.md<\/code><\/td>\n<td><code>8<\/code><\/td>\n<\/tr>\n<tr>\n<td>\uadf8\ub9bc\uc790<\/td>\n<td><code>shadow.md<\/code><\/td>\n<td><code>0 4px 12px rgba(0,0,0,0.1)<\/code><\/td>\n<\/tr>\n<tr>\n<td>\uc804\ud658 \uc18d\ub3c4<\/td>\n<td><code>duration.fast<\/code><\/td>\n<td><code>150<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h3>1.6 \uc774\ub984 \uc9d3\ub294 \ubc29\ubc95<\/h3>\n<p>\ud1a0\ud070 \uc774\ub984\uc740 \uac1c\ubc1c\uc790\uac00 \ucf54\ub4dc\uc5d0\uc11c <strong>\uadf8\ub300\ub85c<\/strong> \uc0ac\uc6a9\ud558\uae30 \ub54c\ubb38\uc5d0 \uaddc\uce59\uc744 \ubbf8\ub9ac \ud569\uc758\ud574\uc57c \ud55c\ub2e4.<\/p>\n<p>[KRDS ](<a href=\"https:\/\/www.krds.go.kr\/html\/site\/utility\/utility_03.html\">https:\/\/www.krds.go.kr\/html\/site\/utility\/utility_03.html<\/a>)<\/p>\n<p><strong>\uad8c\uc7a5 \ud615\uc2dd:<\/strong> <code>\uce74\ud14c\uace0\ub9ac \/ \uc6a9\ub3c4 \/ \uc0c1\ud0dc<\/code><\/p>\n<pre><code>color \/ primary \/ default\ncolor \/ primary \/ hover\ncolor \/ text \/ secondary\nspacing \/ button \/ paddingX\n<\/code><\/pre>\n<p><strong>\uc88b\uc740 \uc774\ub984 vs \ub098\uc05c \uc774\ub984:<\/strong><\/p>\n<table>\n<thead>\n<tr>\n<th>\u2705 \uc88b\uc740 \uc774\ub984<\/th>\n<th>\u274c \ub098\uc05c \uc774\ub984<\/th>\n<th>\ub098\uc05c \uc774\uc720<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>color\/primary<\/code><\/td>\n<td><code>blue-color<\/code><\/td>\n<td>\uc0c9\uc0c1 \uc774\ub984\uc774 \ub4e4\uc5b4\uac00\uba74 \uc0c9\uc774 \ubc14\ub014 \ub54c \uc774\ub984\uc774 \ud2c0\ub824\uc9c4\ub2e4<\/td>\n<\/tr>\n<tr>\n<td><code>color\/text\/secondary<\/code><\/td>\n<td><code>gray-500-text<\/code><\/td>\n<td>\uac12(gray-500)\uc774 \uc774\ub984\uc5d0 \ub4e4\uc5b4\uac00 \uc788\ub2e4<\/td>\n<\/tr>\n<tr>\n<td><code>spacing\/4<\/code><\/td>\n<td><code>padding-16px<\/code><\/td>\n<td>\ub2e8\uc704(px)\uac00 \ub4e4\uc5b4\uac00\uba74 \ub2e8\uc704 \ubcc0\uacbd \uc2dc \uc774\ub984\ub3c4 \ubc14\uafd4\uc57c \ud55c\ub2e4<\/td>\n<\/tr>\n<tr>\n<td><code>color\/danger<\/code><\/td>\n<td><code>red<\/code><\/td>\n<td>\uc6a9\ub3c4\uac00 \uc5c6\uace0 \uc0c9\uc0c1\ub9cc \ud45c\ud604\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<blockquote>\n<p>\ud83d\udca1 <strong>\ud575\uc2ec \uaddc\uce59<\/strong><br \/>\n\uc774\ub984\uc5d0 <strong>\uc2e4\uc81c \uac12\uc774\ub098 \uc0c9\uc0c1\uba85<\/strong>\uc744 \ub123\uc9c0 \uc54a\ub294\ub2e4.<br \/>\n&quot;\uc5b4\ub514\uc5d0, \uc5b4\ub5a4 \uc0c1\ud669\uc5d0 \uc4f0\uc778\ub2e4&quot;\ub294 \uc758\ubbf8\ub9cc \ub2f4\ub294\ub2e4.<\/p>\n<\/blockquote>\n<hr>\n<h2>2. 2\uc7a5. Figma Variables\ub85c \ud1a0\ud070 \ub9cc\ub4e4\uae30<\/h2>\n<p>Figma\uc5d0\uc11c \ud1a0\ud070\uc744 \uc9c1\uc811 \ub9cc\ub4e4 \uc218 \uc788\ub294 \uae30\ub2a5\uc774 Variables\uc774\ub2e4.<br \/>\n2023\ub144\uc5d0 \ucd94\uac00\ub41c \uae30\ub2a5\uc73c\ub85c, \ubcc4\ub3c4 \ud50c\ub7ec\uadf8\uc778 \uc5c6\uc774\ub3c4 \uae30\ubcf8 \ud1a0\ud070 \uc2dc\uc2a4\ud15c\uc744 \uad6c\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n<blockquote>\n<p>\u26a0\ufe0f <strong>\uc2dc\uc791 \uc804 \ud655\uc778<\/strong><\/p>\n<ul>\n<li>\n<p>Figma \uacc4\uc815\uc774 \uc788\uc73c\uba74 \ubb34\ub8cc\ub85c \uc0ac\uc6a9 \uac00\ub2a5\ud558\ub2e4.<\/p>\n<\/li>\n<li>\n<p>Variables \ud328\ub110 \uc5f4\uae30: \uc6b0\uce21 \uc0c1\ub2e8 \uba54\ub274 \u2192 <code>Local variables<\/code> \ud074\ub9ad<\/p>\n<\/li>\n<li>\n<p>\ub2e8\ucd95\ud0a4: <code>Option+Ctrl+L<\/code> (Mac) \/ <code>Alt+Ctrl+L<\/code> (Win)<\/p>\n<\/li>\n<\/ul>\n<\/blockquote>\n<hr>\n<h3>2.1 Variables \ud328\ub110 \uc0b4\ud3b4\ubcf4\uae30<\/h3>\n<p>Variables \ud328\ub110\uc744 \ucc98\uc74c \uc5f4\uba74 \uc544\ubb34\uac83\ub3c4 \uc5c6\ub2e4. \uc5ec\uae30\uc11c \ud1a0\ud070\uc744 \uc9c1\uc811 \ub9cc\ub4e0\ub2e4.<\/p>\n<p><strong>\uc800\uc7a5\ud560 \uc218 \uc788\ub294 \uac12\uc758 \uc885\ub958:<\/strong><\/p>\n<table>\n<thead>\n<tr>\n<th>\ud0c0\uc785<\/th>\n<th>\uc800\uc7a5\ud558\ub294 \uac83<\/th>\n<th>\uc8fc\ub85c \uc4f0\ub294 \uacf3<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Color<\/td>\n<td>\uc0c9\uc0c1<\/td>\n<td>\ubc30\uacbd\uc0c9, \uae00\uc790\uc0c9, \ud14c\ub450\ub9ac\uc0c9<\/td>\n<\/tr>\n<tr>\n<td>Number<\/td>\n<td>\uc22b\uc790 (\ub2e8\uc704 \uc5c6\uc774)<\/td>\n<td>\uc5ec\ubc31, \uae00\uc790 \ud06c\uae30, \ubaa8\uc11c\ub9ac \ub465\uae00\uae30<\/td>\n<\/tr>\n<tr>\n<td>String<\/td>\n<td>\uae00\uc790<\/td>\n<td>\ud3f0\ud2b8 \uc774\ub984<\/td>\n<\/tr>\n<tr>\n<td>Boolean<\/td>\n<td>\ucf1c\uc9d0\/\uaebc\uc9d0<\/td>\n<td>\uc694\uc18c\uc758 \ud45c\uc2dc \uc5ec\ubd80<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>\ud328\ub110 \uc6a9\uc5b4 \uc815\ub9ac:<\/strong><\/p>\n<ul>\n<li>\n<p><strong>Collection<\/strong> \u2014 \ud1a0\ud070\uc744 \ub2f4\ub294 \ud3f4\ub354. <code>Primitives<\/code>, <code>Semantic<\/code> \uac19\uc740 \ud070 \ubb36\uc74c\uc774\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>Group<\/strong> \u2014 Collection \uc548\uc5d0\uc11c \uc774\ub984\uc5d0 <code>\/<\/code>\ub97c \uc4f0\uba74 \uc790\ub3d9\uc73c\ub85c \ud3f4\ub354\ucc98\ub7fc \ubb36\uc778\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>Variable<\/strong> \u2014 \uc2e4\uc81c \uc774\ub984-\uac12 \ud55c \uc30d\uc774\ub2e4. \uc6b0\ub9ac\uac00 \ub9cc\ub4dc\ub294 \ud1a0\ud070 \ud558\ub098\ud558\ub098\uc774\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>Mode<\/strong> \u2014 \uac19\uc740 \ud1a0\ud070\uc5d0 \ub2e4\ub978 \uac12\uc744 \uc9c0\uc815\ud558\ub294 \uae30\ub2a5\uc774\ub2e4. \ub77c\uc774\ud2b8\/\ub2e4\ud06c \ubaa8\ub4dc\uc5d0 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3>2.2 Primitives Collection \ub9cc\ub4e4\uae30<\/h3>\n<p><strong>Collection \uc0dd\uc131:<\/strong><\/p>\n<ol>\n<li>Variables \ud328\ub110 \u2192 <code>+ New collection<\/code> \ud074\ub9ad<\/li>\n<li>\uc774\ub984\uc744 <code>Primitives<\/code>\ub85c \uc785\ub825\ud55c\ub2e4.<\/li>\n<\/ol>\n<p><strong>\uccab \ubc88\uc9f8 Variable \ucd94\uac00:<\/strong><\/p>\n<ol>\n<li><code>+ Add variable<\/code> \ud074\ub9ad<\/li>\n<li>\ud0c0\uc785: <code>Color<\/code> \uc120\ud0dd<\/li>\n<li>\uc774\ub984: <code>color\/blue\/600<\/code> \uc785\ub825 (\uc2ac\ub798\uc2dc\uac00 \ud3f4\ub354\ucc98\ub7fc \ubb36\uc5b4\uc900\ub2e4)<\/li>\n<li>\uac12: <code>#2563EB<\/code> \uc785\ub825<\/li>\n<\/ol>\n<p>\uc774 \uacfc\uc815\uc744 \ubc18\ubcf5\ud574\uc11c \uc544\ub798 \uc0c9\uc0c1\ub4e4\uc744 \ubaa8\ub450 \ub9cc\ub4e0\ub2e4.<\/p>\n<p><strong>Blue \ud314\ub808\ud2b8:<\/strong><\/p>\n<pre><code>color\/blue\/50    \u2192  #EFF6FF  (\uc544\uc8fc \uc5f0\ud55c \ud30c\ub791)\ncolor\/blue\/100   \u2192  #DBEAFE\ncolor\/blue\/200   \u2192  #BFDBFE\ncolor\/blue\/300   \u2192  #93C5FD\ncolor\/blue\/400   \u2192  #60A5FA\ncolor\/blue\/500   \u2192  #3B82F6\ncolor\/blue\/600   \u2192  #2563EB  \u2190 \ub77c\uc774\ud2b8 \ubaa8\ub4dc \uba54\uc778 \uc0c9\uc73c\ub85c \uc4f8 \uae30\uc900\ncolor\/blue\/700   \u2192  #1D4ED8\ncolor\/blue\/800   \u2192  #1E40AF\ncolor\/blue\/900   \u2192  #1E3A8A  (\uc544\uc8fc \uc9c4\ud55c \ud30c\ub791)\n<\/code><\/pre>\n<p><strong>Gray \ud314\ub808\ud2b8 (\ubc30\uacbd\u00b7\ud14d\uc2a4\ud2b8\uc5d0 \uc0ac\uc6a9):<\/strong><\/p>\n<pre><code>color\/gray\/50    \u2192  #F8FAFC  (\uac70\uc758 \ud770\uc0c9)\ncolor\/gray\/100   \u2192  #F1F5F9\ncolor\/gray\/200   \u2192  #E2E8F0\ncolor\/gray\/300   \u2192  #CBD5E1\ncolor\/gray\/400   \u2192  #94A3B8\ncolor\/gray\/500   \u2192  #64748B\ncolor\/gray\/600   \u2192  #475569\ncolor\/gray\/700   \u2192  #334155\ncolor\/gray\/800   \u2192  #1E293B\ncolor\/gray\/900   \u2192  #0F172A  (\uac70\uc758 \uac80\uc815)\n<\/code><\/pre>\n<p><strong>\ud770\uc0c9\u00b7\uac80\uc815:<\/strong><\/p>\n<pre><code>color\/white  \u2192  #FFFFFF\ncolor\/black  \u2192  #000000\n<\/code><\/pre>\n<p><strong>\uc5ec\ubc31 \uc2a4\ucf00\uc77c (Number \ud0c0\uc785\uc73c\ub85c \ucd94\uac00):<\/strong><\/p>\n<blockquote>\n<p>Number \ud0c0\uc785\uc740 \uc22b\uc790\ub9cc \uc785\ub825\ud55c\ub2e4. <code>16px<\/code>\uc774 \uc544\ub2c8\ub77c <code>16<\/code>\uc774\ub2e4.<br \/>\n\ub2e8\uc704\ub294 \uac1c\ubc1c\uc790\uac00 \ucf54\ub4dc\ub85c \ubcc0\ud658\ud560 \ub54c \ubd99\uc778\ub2e4.<\/p>\n<\/blockquote>\n<pre><code>spacing\/1   \u2192  4\nspacing\/2   \u2192  8\nspacing\/3   \u2192  12\nspacing\/4   \u2192  16\nspacing\/5   \u2192  20\nspacing\/6   \u2192  24\nspacing\/8   \u2192  32\nspacing\/10  \u2192  40\nspacing\/12  \u2192  48\nspacing\/16  \u2192  64\n<\/code><\/pre>\n<p><strong>\ubaa8\uc11c\ub9ac \ub465\uae00\uae30 (Number \ud0c0\uc785):<\/strong><\/p>\n<pre><code>radius\/none  \u2192  0\nradius\/sm    \u2192  4\nradius\/md    \u2192  8    \u2190 \ubc84\ud2bc\uc5d0 \uc8fc\ub85c \uc0ac\uc6a9\nradius\/lg    \u2192  12   \u2190 \uce74\ub4dc\uc5d0 \uc8fc\ub85c \uc0ac\uc6a9\nradius\/xl    \u2192  16\nradius\/full  \u2192  9999 \u2190 \uc644\uc804\ud788 \ub465\uadfc \uc54c\uc57d \ubaa8\uc591\n<\/code><\/pre>\n<p><strong>\uae00\uc790 \uad00\ub828 (Number + String \ud0c0\uc785 \ud63c\uc6a9):<\/strong><\/p>\n<pre><code>\/\/ \uae00\uc790 \ud06c\uae30 (Number)\nfont\/size\/xs   \u2192  12\nfont\/size\/sm   \u2192  14\nfont\/size\/md   \u2192  16  \u2190 \ubcf8\ubb38 \uae30\ubcf8 \ud06c\uae30\nfont\/size\/lg   \u2192  18\nfont\/size\/xl   \u2192  20\nfont\/size\/2xl  \u2192  24\nfont\/size\/3xl  \u2192  30\n\n\/\/ \uae00\uc790 \ub450\uaed8 (Number)\nfont\/weight\/regular   \u2192  400  \u2190 \uc77c\ubc18\nfont\/weight\/medium    \u2192  500\nfont\/weight\/semibold  \u2192  600\nfont\/weight\/bold      \u2192  700  \u2190 \uad75\uac8c\n\n\/\/ \uc904 \uac04\uaca9 (Number, \ube44\uc728\ub85c \uc785\ub825)\nfont\/lineHeight\/tight   \u2192  1.25  \u2190 \uc81c\ubaa9\uc5d0 \uc8fc\ub85c \uc0ac\uc6a9\nfont\/lineHeight\/normal  \u2192  1.5   \u2190 \ubcf8\ubb38 \uae30\ubcf8\nfont\/lineHeight\/loose   \u2192  1.75  \u2190 \uac00\ub3c5\uc131 \ub192\uc77c \ub54c\n\n\/\/ \ud3f0\ud2b8 \uc774\ub984 (String)\nfont\/family\/sans  \u2192  Pretendard, sans-serif\nfont\/family\/mono  \u2192  JetBrains Mono, monospace\n<\/code><\/pre>\n<hr>\n<h3>2.3 Semantic Collection \ub9cc\ub4e4\uae30<\/h3>\n<p>\uc774\uc81c Primitive \uac12\ub4e4\uc5d0 <strong>&quot;\uc5b4\ub514\uc5d0 \uc4f0\uc778\ub2e4&quot;\ub294 \uc758\ubbf8<\/strong>\ub97c \ubd99\uc778\ub2e4.<\/p>\n<p><strong>Collection \uc0dd\uc131 + Mode \ucd94\uac00:<\/strong><\/p>\n<ol>\n<li><code>+ New collection<\/code> \u2192 \uc774\ub984: <code>Semantic<\/code><\/li>\n<li>\uc6b0\uce21 \uc0c1\ub2e8 <code>Edit modes<\/code> \ud074\ub9ad<\/li>\n<li>\uae30\ubcf8 Mode \uc774\ub984 \u2192 <code>Light<\/code>\ub85c \ubcc0\uacbd<\/li>\n<li><code>+ Add mode<\/code> \u2192 <code>Dark<\/code> \ucd94\uac00<\/li>\n<\/ol>\n<p>\uc774\ub807\uac8c \ud558\uba74 \uac19\uc740 \ud1a0\ud070\uc774 \ub77c\uc774\ud2b8\/\ub2e4\ud06c \ub450 \uac00\uc9c0 \uac12\uc744 \uac00\uc9c8 \uc218 \uc788\ub2e4.<\/p>\n<p><strong>Variable\uc5d0 \ub2e4\ub978 Variable \ucc38\uc870\ud558\ub294 \ubc29\ubc95:<\/strong><\/p>\n<p>\uac12\uc744 \uc9c1\uc811 \uc785\ub825\ud558\ub294 \ub300\uc2e0 Primitive Variable\uc744 \ucc38\uc870\ud560 \uc218 \uc788\ub2e4.<\/p>\n<ol>\n<li>Variable \uac12 \uc785\ub825\ub780 \uc6b0\uce21\uc758 <code>\u25c6<\/code> (\uc721\uba74\uccb4 \uc544\uc774\ucf58) \ud074\ub9ad<\/li>\n<li>Primitives Collection\uc758 Variable \ubaa9\ub85d\uc774 \ub72c\ub2e4<\/li>\n<li>\uc6d0\ud558\ub294 Variable \ud074\ub9ad \u2192 \ucc38\uc870 \uc5f0\uacb0 \uc644\ub8cc<\/li>\n<\/ol>\n<blockquote>\n<p>\ud83d\udca1 <strong>\uc65c \uc9c1\uc811 \uac12\uc744 \uc785\ub825\ud558\uc9c0 \uc54a\ub294\uac00?<\/strong><br \/>\n<code>#2563EB<\/code>\ub97c \uc9c1\uc811 \uc785\ub825\ud558\uba74 \ub098\uc911\uc5d0 \uc0c9\uc774 \ubc14\ub00c\uc5b4\ub3c4 \uc5ec\uae30\ub294 \uc548 \ubc14\ub010\ub2e4.<br \/>\nPrimitive Variable\uc744 \ucc38\uc870\ud558\uba74 Primitive \uac12\ub9cc \ubc14\uafd4\ub3c4 \uc5ec\uae30\uae4c\uc9c0 \uc790\ub3d9\uc73c\ub85c \ubc14\ub010\ub2e4.<\/p>\n<\/blockquote>\n<p><strong>\uceec\ub7ec Semantic \ud1a0\ud070 (Light \/ Dark \uac12 \ub3d9\uc2dc \uc124\uc815):<\/strong><\/p>\n<table>\n<thead>\n<tr>\n<th>\ud1a0\ud070 \uc774\ub984<\/th>\n<th>Light \uac12<\/th>\n<th>Dark \uac12<\/th>\n<th>\uc5b4\ub514\uc5d0 \uc4f0\ub294\uac00<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>color\/bg\/default<\/code><\/td>\n<td><code>{color\/white}<\/code><\/td>\n<td><code>{color\/gray\/900}<\/code><\/td>\n<td>\ud398\uc774\uc9c0 \uae30\ubcf8 \ubc30\uacbd<\/td>\n<\/tr>\n<tr>\n<td><code>color\/bg\/subtle<\/code><\/td>\n<td><code>{color\/gray\/50}<\/code><\/td>\n<td><code>{color\/gray\/800}<\/code><\/td>\n<td>\uad6c\ubd84 \uc601\uc5ed \ubc30\uacbd<\/td>\n<\/tr>\n<tr>\n<td><code>color\/bg\/elevated<\/code><\/td>\n<td><code>{color\/white}<\/code><\/td>\n<td><code>{color\/gray\/800}<\/code><\/td>\n<td>\uce74\ub4dc\u00b7\ubaa8\ub2ec \ubc30\uacbd<\/td>\n<\/tr>\n<tr>\n<td><code>color\/text\/primary<\/code><\/td>\n<td><code>{color\/gray\/900}<\/code><\/td>\n<td><code>{color\/white}<\/code><\/td>\n<td>\ubcf8\ubb38 \uc8fc\uc694 \ud14d\uc2a4\ud2b8<\/td>\n<\/tr>\n<tr>\n<td><code>color\/text\/secondary<\/code><\/td>\n<td><code>{color\/gray\/600}<\/code><\/td>\n<td><code>{color\/gray\/400}<\/code><\/td>\n<td>\uc124\uba85\u00b7\ubd80\uc81c\ubaa9 \ud14d\uc2a4\ud2b8<\/td>\n<\/tr>\n<tr>\n<td><code>color\/text\/disabled<\/code><\/td>\n<td><code>{color\/gray\/300}<\/code><\/td>\n<td><code>{color\/gray\/600}<\/code><\/td>\n<td>\ube44\ud65c\uc131 \ud14d\uc2a4\ud2b8<\/td>\n<\/tr>\n<tr>\n<td><code>color\/border\/default<\/code><\/td>\n<td><code>{color\/gray\/200}<\/code><\/td>\n<td><code>{color\/gray\/700}<\/code><\/td>\n<td>\uae30\ubcf8 \ud14c\ub450\ub9ac<\/td>\n<\/tr>\n<tr>\n<td><code>color\/border\/strong<\/code><\/td>\n<td><code>{color\/gray\/400}<\/code><\/td>\n<td><code>{color\/gray\/500}<\/code><\/td>\n<td>\uac15\uc870 \ud14c\ub450\ub9ac<\/td>\n<\/tr>\n<tr>\n<td><code>color\/primary<\/code><\/td>\n<td><code>{color\/blue\/600}<\/code><\/td>\n<td><code>{color\/blue\/400}<\/code><\/td>\n<td>\ubc84\ud2bc\u00b7\ub9c1\ud06c \ub4f1 \uba54\uc778 \uc0c9<\/td>\n<\/tr>\n<tr>\n<td><code>color\/primary\/hover<\/code><\/td>\n<td><code>{color\/blue\/700}<\/code><\/td>\n<td><code>{color\/blue\/300}<\/code><\/td>\n<td>\ub9c8\uc6b0\uc2a4 \uc62c\ub838\uc744 \ub54c<\/td>\n<\/tr>\n<tr>\n<td><code>color\/primary\/subtle<\/code><\/td>\n<td><code>{color\/blue\/50}<\/code><\/td>\n<td><code>{color\/blue\/900}<\/code><\/td>\n<td>\ubc30\uc9c0\u00b7\ud0dc\uadf8 \ubc30\uacbd<\/td>\n<\/tr>\n<tr>\n<td><code>color\/danger<\/code><\/td>\n<td><code>{color\/red\/600}<\/code><\/td>\n<td><code>{color\/red\/400}<\/code><\/td>\n<td>\uc5d0\ub7ec\u00b7\uc0ad\uc81c<\/td>\n<\/tr>\n<tr>\n<td><code>color\/success<\/code><\/td>\n<td><code>{color\/green\/600}<\/code><\/td>\n<td><code>{color\/green\/400}<\/code><\/td>\n<td>\uc131\uacf5\u00b7\uc644\ub8cc<\/td>\n<\/tr>\n<tr>\n<td><code>color\/warning<\/code><\/td>\n<td><code>{color\/yellow\/500}<\/code><\/td>\n<td><code>{color\/yellow\/400}<\/code><\/td>\n<td>\uacbd\uace0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<blockquote>\n<p>\ud83d\udca1 <strong>\uc774\ub984\uc5d0 \uc0c9\uc0c1\uba85\uc744 \ub123\uc73c\uba74 \uc548 \ub418\ub294 \uc774\uc720<\/strong><br \/>\n<code>color\/blue<\/code>\ub77c\uace0 \uc774\ub984 \uc9c0\uc73c\uba74 \ub2e4\ud06c\ubaa8\ub4dc\uc5d0\uc11c \uac12\uc774 \uc5f0\ud55c \ud30c\ub791\uc73c\ub85c \ubc14\ub00c\uc5b4\ub3c4 \uc774\ub984\uc740 \uc5ec\uc804\ud788 <code>blue<\/code>\ub2e4.<br \/>\n\ud63c\ub780\uc2a4\ub7fd\ub2e4. <code>color\/primary<\/code>\ucc98\ub7fc <strong>\uc6a9\ub3c4 \uc911\uc2ec<\/strong>\uc73c\ub85c \uc774\ub984\uc744 \uc9d3\ub294\ub2e4.<\/p>\n<\/blockquote>\n<hr>\n<h3>2.4 \ub77c\uc774\ud2b8\/\ub2e4\ud06c \ubaa8\ub4dc \uc804\ud658 \ud655\uc778\ud558\uae30<\/h3>\n<p>\uc774\uc81c Mode\ub97c \uc804\ud658\ud574\uc11c \ud1a0\ud070\uc774 \uc798 \ub3d9\uc791\ud558\ub294\uc9c0 \ud655\uc778\ud55c\ub2e4.<\/p>\n<p><strong>\ud504\ub808\uc784\uc5d0 Mode \uc801\uc6a9\ud558\ub294 \ubc29\ubc95:<\/strong><\/p>\n<ol>\n<li>\ucd5c\uc0c1\uc704 \ud504\ub808\uc784 \uc120\ud0dd<\/li>\n<li>\uc6b0\uce21 \ud328\ub110 <code>Layer<\/code> \uc139\uc158 \uc544\ub798 <code>Mode<\/code> \ub4dc\ub86d\ub2e4\uc6b4 \ud074\ub9ad<\/li>\n<li><code>Light<\/code> \ub610\ub294 <code>Dark<\/code> \uc120\ud0dd<\/li>\n<\/ol>\n<p>\ud504\ub808\uc784 \uc548\uc5d0 Semantic \ud1a0\ud070\uc774 \uc5f0\uacb0\ub41c \uc694\uc18c\uac00 \uc788\ub2e4\uba74 Mode\ub97c \ubc14\uafb8\ub294 \uc21c\uac04 \ubaa8\ub4e0 \uc0c9\uc774 \ud55c \ubc88\uc5d0 \ubc14\ub010\ub2e4.<\/p>\n<blockquote>\n<p>\ud83d\udd0d <strong>\uc2e4\uc2b5 \uacfc\uc81c<\/strong><\/p>\n<ol>\n<li>\ubc30\uacbd\uc5d0 <code>color\/bg\/default<\/code>\ub97c \uc5f0\uacb0\ud55c \ud504\ub808\uc784\uc744 \ub9cc\ub4e0\ub2e4.<\/li>\n<li>\uadf8 \uc548\uc5d0 \ud14d\uc2a4\ud2b8\ub97c \ub123\uace0 <code>color\/text\/primary<\/code>\ub97c \uc5f0\uacb0\ud55c\ub2e4.<\/li>\n<li>Mode\ub97c Light \u2194 Dark\ub85c \uc804\ud658\ud558\uba70 \uc790\ub3d9\uc73c\ub85c \ubc14\ub00c\ub294\uc9c0 \ud655\uc778\ud55c\ub2e4.<\/li>\n<\/ol>\n<\/blockquote>\n<hr>\n<h3>2.5 Component Collection \ub9cc\ub4e4\uae30<\/h3>\n<p>\ucef4\ud3ec\ub10c\ud2b8\ub9c8\ub2e4 \uc804\uc6a9 \ud1a0\ud070\uc744 \ub9cc\ub4e4\uc5b4\ub450\uba74 \ub098\uc911\uc5d0 \ub514\uc790\uc778\uc744 \uc218\uc815\ud560 \ub54c \ud6e8\uc52c \ud3b8\ud558\ub2e4.<br \/>\nComponent \ud1a0\ud070\uc740 Semantic \ud1a0\ud070\uc744 \ucc38\uc870\ud55c\ub2e4. Primitive\ub97c \uc9c1\uc811 \ucc38\uc870\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n<blockquote>\n<p>\u2753 <strong>\uc65c Semantic\uc744 \uac70\uccd0\uc57c \ud558\ub294\uac00?<\/strong><br \/>\n\ubc84\ud2bc \ubc30\uacbd\uc744 <code>{color\/blue\/600}<\/code>\uc73c\ub85c \uc9c1\uc811 \uc5f0\uacb0\ud558\uba74 \ub2e4\ud06c\ubaa8\ub4dc\uc5d0\uc11c \uc0c9\uc774 \uc548 \ubc14\ub010\ub2e4.<br \/>\n<code>{color\/primary}<\/code>\ub85c \uc5f0\uacb0\ud558\uba74 Mode \uc804\ud658\ub9cc\uc73c\ub85c \ub2e4\ud06c\ubaa8\ub4dc \ub300\uc751\uc774 \ub05d\ub09c\ub2e4.<\/p>\n<\/blockquote>\n<p><strong>Button \ud1a0\ud070 \uc608\uc2dc:<\/strong><\/p>\n<pre><code>button\/bg\/default       \u2192  {color\/primary}         \ubc84\ud2bc \uae30\ubcf8 \ubc30\uacbd\nbutton\/bg\/hover         \u2192  {color\/primary\/hover}    \ub9c8\uc6b0\uc2a4 \uc62c\ub838\uc744 \ub54c\nbutton\/bg\/disabled      \u2192  {color\/bg\/subtle}        \ube44\ud65c\uc131 \ubc84\ud2bc \ubc30\uacbd\nbutton\/text\/default     \u2192  {color\/white}            \ubc84\ud2bc \uae00\uc790\uc0c9\nbutton\/text\/disabled    \u2192  {color\/text\/disabled}    \ube44\ud65c\uc131 \ubc84\ud2bc \uae00\uc790\nbutton\/radius           \u2192  {radius\/md}              \ubc84\ud2bc \ubaa8\uc11c\ub9ac \ub465\uae00\uae30\nbutton\/paddingX         \u2192  {spacing\/4}              \ubc84\ud2bc \uc88c\uc6b0 \uc5ec\ubc31\nbutton\/paddingY         \u2192  {spacing\/2}              \ubc84\ud2bc \uc704\uc544\ub798 \uc5ec\ubc31\n<\/code><\/pre>\n<p><strong>Input \ud1a0\ud070 \uc608\uc2dc:<\/strong><\/p>\n<pre><code>input\/bg\/default        \u2192  {color\/bg\/default}       \uc778\ud48b \ubc30\uacbd\ninput\/border\/default    \u2192  {color\/border\/default}   \uae30\ubcf8 \ud14c\ub450\ub9ac\ninput\/border\/focused    \u2192  {color\/primary}          \ud3ec\ucee4\uc2a4 \uc2dc \ud14c\ub450\ub9ac\ninput\/border\/error      \u2192  {color\/danger}           \uc5d0\ub7ec \uc2dc \ud14c\ub450\ub9ac\ninput\/text\/default      \u2192  {color\/text\/primary}     \uc785\ub825 \ud14d\uc2a4\ud2b8 \uc0c9\ninput\/text\/placeholder  \u2192  {color\/text\/secondary}   \ud50c\ub808\uc774\uc2a4\ud640\ub354 \uc0c9\ninput\/radius            \u2192  {radius\/sm}              \uc778\ud48b \ubaa8\uc11c\ub9ac\n<\/code><\/pre>\n<hr>\n<h3>2.6 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 Variable \uc5f0\uacb0\ud558\uae30<\/h3>\n<p>\ud1a0\ud070\uc744 \ub9cc\ub4e4\uc5c8\uc73c\uba74 \uc774\uc81c \uc2e4\uc81c \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc5f0\uacb0\ud55c\ub2e4.<\/p>\n<p><strong>\uc0c9\uc0c1 \uc5f0\uacb0 \ubc29\ubc95:<\/strong><\/p>\n<ol>\n<li>\uc0c9\uc744 \ubc14\uafc0 \ub808\uc774\uc5b4 \uc120\ud0dd<\/li>\n<li>Fill (\ub610\ub294 \ud14d\uc2a4\ud2b8 \uc0c9) \ud074\ub9ad<\/li>\n<li>\uc0c9\uc0c1 \ud53c\ucee4 \uc88c\uce21 \ud558\ub2e8 <code>Libraries<\/code> \ud0ed \ud074\ub9ad<\/li>\n<li>\uc6d0\ud558\ub294 Variable \uac80\uc0c9 \ud6c4 \ud074\ub9ad<\/li>\n<\/ol>\n<p><strong>Auto Layout \uc5ec\ubc31 \uc5f0\uacb0 \ubc29\ubc95:<\/strong><\/p>\n<ol>\n<li>Auto Layout\uc774 \uc801\uc6a9\ub41c \ud504\ub808\uc784 \uc120\ud0dd<\/li>\n<li>\uc6b0\uce21 \ud328\ub110\uc5d0\uc11c Gap, Padding \uc22b\uc790 \uc606 <code>\u25c6<\/code> \uc544\uc774\ucf58 \ud074\ub9ad<\/li>\n<li>Spacing Variable \uc120\ud0dd<\/li>\n<\/ol>\n<p><strong>\ubaa8\uc11c\ub9ac \ub465\uae00\uae30 \uc5f0\uacb0 \ubc29\ubc95:<\/strong><\/p>\n<ol>\n<li>\uc694\uc18c \uc120\ud0dd \u2192 Corner radius \uac12 \ud074\ub9ad<\/li>\n<li><code>\u25c6<\/code> \uc544\uc774\ucf58 \u2192 Radius Variable \uc120\ud0dd<\/li>\n<\/ol>\n<blockquote>\n<p>\u26a0\ufe0f <strong>\uc5f0\uacb0\uc774 \ub04a\uae30\ub294 \uacbd\uc6b0<\/strong><br \/>\nVariable\uc774 \uc5f0\uacb0\ub41c \uc0c1\ud0dc\uc5d0\uc11c \uac12\uc744 <strong>\uc9c1\uc811 \uc218\uc815\ud558\uba74<\/strong> \uc5f0\uacb0\uc774 \ub04a\uc5b4\uc9c4\ub2e4.<br \/>\n\uac12\uc744 \ubc14\uafb8\uace0 \uc2f6\uc744 \ub54c\ub294 Primitive Collection\uc758 \uc6d0\ub798 \uac12\uc744 \uc218\uc815\ud574\uc57c \ud55c\ub2e4.<\/p>\n<\/blockquote>\n<hr>\n<h2>3. 3\uc7a5. \ubb34\ub8cc \ud50c\ub7ec\uadf8\uc778\uc73c\ub85c \ud1a0\ud070 \uc0dd\uc131\u00b7\ub0b4\ubcf4\ub0b4\uae30<\/h2>\n<p>2\uc7a5\uc5d0\uc11c Figma Variables\ub85c \ud1a0\ud070\uc744 \uc9c1\uc811 \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \ubc30\uc6e0\ub2e4.<br \/>\n\uc774\ubc88 \uc7a5\uc5d0\uc11c\ub294 \ub450 \uac00\uc9c0 \ubb34\ub8cc \ud50c\ub7ec\uadf8\uc778\uc73c\ub85c \uc791\uc5c5 \uc18d\ub3c4\ub97c \ub192\uc774\ub294 \ubc29\ubc95\uc744 \ub2e4\ub8ec\ub2e4.<\/p>\n<table>\n<thead>\n<tr>\n<th>\ud50c\ub7ec\uadf8\uc778<\/th>\n<th>\uc5ed\ud560<\/th>\n<th>\ubc29\ud5a5<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Tailwind Tokens<\/strong><\/td>\n<td>Tailwind \uae30\ubcf8 \ud1a0\ud070 \uc2a4\ucf00\uc77c\uc744 Figma Variables\ub85c \uc790\ub3d9 \uc0dd\uc131<\/td>\n<td>Tailwind \u2192 Figma<\/td>\n<\/tr>\n<tr>\n<td><strong>Figma to JSON Exporter<\/strong><\/td>\n<td>\uc644\uc131\ub41c Variables\ub97c JSON \ud30c\uc77c\ub85c \ub0b4\ubcf4\ub0b4\uae30<\/td>\n<td>Figma \u2192 JSON (\uac1c\ubc1c\uc790 \uc804\ub2ec\uc6a9)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<blockquote>\n<p>\ud83d\udca1 <strong>\ub450 \ud50c\ub7ec\uadf8\uc778\uc758 \uad00\uacc4<\/strong><br \/>\nTailwind Tokens\ub85c <strong>Primitive \ud1a0\ud070\uc744 \ube60\ub974\uac8c \uc138\ud305<\/strong>\ud558\uace0,<br \/>\nFigma to JSON Exporter\ub85c <strong>\uc644\uc131\ub41c \ud1a0\ud070\uc744 \uac1c\ubc1c\uc790\uc5d0\uac8c \uc804\ub2ec<\/strong>\ud558\ub294 \ud750\ub984\uc73c\ub85c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n<\/blockquote>\n<hr>\n<h3>3.1 Tailwind Tokens \u2014 Primitive \ud1a0\ud070 \uc790\ub3d9 \uc0dd\uc131<\/h3>\n<h4>3.1.1. \uc774 \ud50c\ub7ec\uadf8\uc778\uc774 \ud558\ub294 \uc77c<\/h4>\n<p>Tailwind CSS\ub294 \uc0c9\uc0c1\u00b7\uc5ec\ubc31\u00b7\ud0c0\uc774\ud3ec\uadf8\ub798\ud53c \ub4f1\uc758 \uae30\ubcf8 \uc2a4\ucf00\uc77c\uc774 \uc774\ubbf8 \uc798 \uc815\uc758\ub418\uc5b4 \uc788\ub2e4.<br \/>\n\uc774 \ud50c\ub7ec\uadf8\uc778\uc740 \uadf8 Tailwind \uae30\ubcf8\uac12\uc744 \ud074\ub9ad \ud55c \ubc88\uc73c\ub85c Figma Variables\uc5d0 \uc0dd\uc131\ud574\uc900\ub2e4.<\/p>\n<p>2\uc7a5\uc5d0\uc11c Blue \ud314\ub808\ud2b8\ub97c \ud55c \uc904\uc529 \uc9c1\uc811 \uc785\ub825\ud588\ub358 \uac83\uc744 \uae30\uc5b5\ud558\ub294\uac00?<br \/>\nTailwind Tokens\ub97c \uc4f0\uba74 \uadf8 \uc791\uc5c5\uc744 \uc790\ub3d9\uc73c\ub85c \ucc98\ub9ac\ud55c\ub2e4.<\/p>\n<blockquote>\n<p>\ud83d\udd17 <strong>\uc124\uce58 \ub9c1\ud06c<\/strong><br \/>\nFigma Community \u2192 <code>Tailwind Tokens - Create Tailwind CSS Variables &amp; Styles<\/code><br \/>\n<a href=\"https:\/\/www.figma.com\/community\/plugin\/1513618945140968492\">https:\/\/www.figma.com\/community\/plugin\/1513618945140968492<\/a><\/p>\n<\/blockquote>\n<h4>3.1.2. \uc124\uce58 \ubc0f \uc2e4\ud589<\/h4>\n<ol>\n<li>\uc704 \ub9c1\ud06c \uc811\uc18d \u2192 <code>Open in Figma<\/code> \ud074\ub9ad \u2192 \uc124\uce58<\/li>\n<li>Figma \ud30c\uc77c \uc5f4\uae30 \u2192 \uc6b0\uce21 \ud558\ub2e8 \ud50c\ub7ec\uadf8\uc778 \uc544\uc774\ucf58(\u2b21) \ub610\ub294<br \/>\n\uba54\ub274 \u2192 <code>Plugins<\/code> \u2192 <code>Tailwind Tokens<\/code> \uc2e4\ud589<\/li>\n<\/ol>\n<h4>3.1.3. \ud1a0\ud070 \uc0dd\uc131 \ubc29\ubc95<\/h4>\n<ol>\n<li>\ud50c\ub7ec\uadf8\uc778 \ud328\ub110\uc5d0\uc11c \uc0dd\uc131\ud560 \ud1a0\ud070 \uce74\ud14c\uace0\ub9ac\ub97c \uc120\ud0dd\ud55c\ub2e4.<\/li>\n<\/ol>\n<pre><code>\u2705 Colors       (\uc0c9\uc0c1 \uc2a4\ucf00\uc77c \uc804\uccb4)\n\u2705 Spacing      (\uc5ec\ubc31 \uc2a4\ucf00\uc77c)\n\u2705 Border Radius (\ubaa8\uc11c\ub9ac \ub465\uae00\uae30)\n\u2705 Typography   (\uae00\uc790 \ud06c\uae30\u00b7\ub450\uaed8\u00b7\uc904 \uac04\uaca9)\n\u2610 Shadows      (\ud544\uc694 \uc2dc \uc120\ud0dd)\n<\/code><\/pre>\n<ol start=\"2\">\n<li><code>Generate<\/code> \ud074\ub9ad \u2192 Figma Variables\uc5d0 Collection\uc774 \uc790\ub3d9 \uc0dd\uc131\ub41c\ub2e4.<\/li>\n<li>Variables \ud328\ub110\uc744 \uc5f4\uba74 <code>Tailwind CSS<\/code> Collection \uc548\uc5d0 \ud1a0\ud070\uc774 \ucc44\uc6cc\uc9c4 \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/li>\n<\/ol>\n<h4>3.1.4. \uc0dd\uc131\ub41c \uacb0\uacfc \uc608\uc2dc<\/h4>\n<pre><code>Collection: Tailwind CSS\n\u251c\u2500\u2500 colors\/\n\u2502   \u251c\u2500\u2500 blue\/50   \u2192  #EFF6FF\n\u2502   \u251c\u2500\u2500 blue\/100  \u2192  #DBEAFE\n\u2502   \u2502   ...\n\u2502   \u2514\u2500\u2500 blue\/900  \u2192  #1E3A8A\n\u251c\u2500\u2500 spacing\/\n\u2502   \u251c\u2500\u2500 1  \u2192  4\n\u2502   \u251c\u2500\u2500 2  \u2192  8\n\u2502   \u2502   ...\n\u2502   \u2514\u2500\u2500 16 \u2192  64\n\u2514\u2500\u2500 borderRadius\/\n    \u251c\u2500\u2500 sm  \u2192  2\n    \u251c\u2500\u2500 md  \u2192  6\n    \u2514\u2500\u2500 lg  \u2192  8\n<\/code><\/pre>\n<h4>3.1.5. \uc0dd\uc131 \ud6c4 \ud560 \uc77c<\/h4>\n<p>Tailwind Tokens\ub294 <strong>Primitive(\uc6d0\uc7ac\ub8cc) \uc5ed\ud560\uc758 \ud1a0\ud070<\/strong>\uc744 \uc790\ub3d9\uc73c\ub85c \ub9cc\ub4e4\uc5b4\uc900\ub2e4.<br \/>\n\uc774\ud6c4\uc5d0\ub294 2\uc7a5\uc5d0\uc11c \ubc30\uc6b4 \uac83\ucc98\ub7fc Semantic Collection\uc744 \uc9c1\uc811 \ucd94\uac00\ud558\uace0<br \/>\nTailwind Tokens\uac00 \ub9cc\ub4e0 \uac12\uc744 \ucc38\uc870(<code>\u25c6<\/code> \uc544\uc774\ucf58)\ud574\uc11c \uc5f0\uacb0\ud55c\ub2e4.<\/p>\n<blockquote>\n<p>\u26a0\ufe0f <strong>Tailwind \uc2a4\ucf00\uc77c\uacfc \ube0c\ub79c\ub4dc \uc2a4\ucf00\uc77c\uc774 \ub2e4\ub97c \ub54c<\/strong><br \/>\nTailwind \uae30\ubcf8 \ud30c\ub780\uc0c9(<code>blue\/600 = #2563EB<\/code>)\uc774 \ube0c\ub79c\ub4dc \uc0c9\uacfc \ub2e4\ub974\ub2e4\uba74<br \/>\n\uc0dd\uc131\ub41c Variable \uac12\uc744 \uc9c1\uc811 \uc218\uc815\ud558\uba74 \ub41c\ub2e4.<br \/>\n\uc2a4\ucf00\uc77c \uad6c\uc870(50~900)\ub294 \uadf8\ub300\ub85c \uc7ac\ud65c\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n<\/blockquote>\n<hr>\n<h3>3.2 JSON\uc774 \ubb34\uc5c7\uc778\uac00?<\/h3>\n<p>\uac1c\ubc1c\uc790\uc5d0\uac8c \ud1a0\ud070\uc744 \uc804\ub2ec\ud560 \ub54c \uc0ac\uc6a9\ud558\ub294 \ud30c\uc77c \ud615\uc2dd\uc774\ub2e4.<br \/>\nJSON\uc740 \uba54\ubaa8\uc7a5\uc73c\ub85c \uc5f4 \uc218 \uc788\ub294 \ud14d\uc2a4\ud2b8 \ud30c\uc77c\uc774\uace0, \uc544\ub798\ucc98\ub7fc \uc0dd\uacbc\ub2e4.<\/p>\n<pre><code class=\"language-json\">{\n  &quot;color&quot;: {\n    &quot;primary&quot;: {\n      &quot;value&quot;: &quot;#2563EB&quot;,\n      &quot;type&quot;: &quot;color&quot;,\n      &quot;description&quot;: &quot;\ubc84\ud2bc\u00b7\ub9c1\ud06c \ub4f1 \uba54\uc778 \ube0c\ub79c\ub4dc \uc0c9\uc0c1&quot;\n    }\n  },\n  &quot;spacing&quot;: {\n    &quot;4&quot;: {\n      &quot;value&quot;: &quot;16&quot;,\n      &quot;type&quot;: &quot;dimension&quot;\n    }\n  }\n}\n<\/code><\/pre>\n<p>\uac01 \ud56d\ubaa9\uc758 \uc758\ubbf8:<\/p>\n<ul>\n<li>\n<p><code>&quot;color\/primary&quot;<\/code> \u2014 \ud1a0\ud070 \uc774\ub984<\/p>\n<\/li>\n<li>\n<p><code>&quot;value&quot;<\/code> \u2014 \uc2e4\uc81c \uac12<\/p>\n<\/li>\n<li>\n<p><code>&quot;type&quot;<\/code> \u2014 \uac12\uc758 \uc885\ub958 (\uc0c9\uc0c1\uc778\uc9c0, \ud06c\uae30\uc778\uc9c0 \ub4f1)<\/p>\n<\/li>\n<li>\n<p><code>&quot;description&quot;<\/code> \u2014 \uc774 \ud1a0\ud070\uc744 \uc5b4\ub5bb\uac8c \uc4f0\ub294\uc9c0 \uc124\uba85 (\uac1c\ubc1c\uc790\uac00 \uc77d\ub294\ub2e4)<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\ud83d\udca1 <strong><code>description<\/code>\uc740 \uaf2d \ucc44\uc6b4\ub2e4<\/strong><br \/>\n\uac1c\ubc1c\uc790\ub294 \uc774 \uc124\uba85\uc744 \ubcf4\uace0 \ud1a0\ud070\uc744 \uc5b4\ub514\uc5d0 \uc368\uc57c \ud560\uc9c0 \ud310\ub2e8\ud55c\ub2e4.<br \/>\n\uc608: <code>&quot;\ubc84\ud2bc \ud638\ubc84 \uc2dc \ubc30\uacbd\uc0c9. \ud074\ub9ad \uac00\ub2a5\ud55c \uc694\uc18c\uc5d0\ub9cc \uc0ac\uc6a9\ud55c\ub2e4.&quot;<\/code><\/p>\n<\/blockquote>\n<hr>\n<h3>3.3 Figma to JSON Exporter \u2014 \ud1a0\ud070 \ud30c\uc77c \ub0b4\ubcf4\ub0b4\uae30<\/h3>\n<h4>3.3.1. \uc774 \ud50c\ub7ec\uadf8\uc778\uc774 \ud558\ub294 \uc77c<\/h4>\n<p>Figma\uc5d0\uc11c \ub9cc\ub4e0 Variables(\ud1a0\ud070)\ub97c JSON \ud30c\uc77c\ub85c \ubcc0\ud658\ud574\uc900\ub2e4.<br \/>\n\uac1c\ubc1c\uc790\ub294 \uc774 JSON \ud30c\uc77c\uc744 \ubc1b\uc544\uc11c CSS\u00b7JS \ucf54\ub4dc\ub85c \ubcc0\ud658\ud55c\ub2e4.<\/p>\n<blockquote>\n<p>\ud83d\udd17 <strong>\uc124\uce58 \ub9c1\ud06c<\/strong><br \/>\nFigma Community \u2192 <code>Figma to JSON Exporter<\/code><br \/>\n<a href=\"https:\/\/www.figma.com\/community\/plugin\/1510358539626018288\">https:\/\/www.figma.com\/community\/plugin\/1510358539626018288<\/a><\/p>\n<\/blockquote>\n<h4>3.3.2. \uc124\uce58 \ubc0f \uc2e4\ud589<\/h4>\n<ol>\n<li>\uc704 \ub9c1\ud06c \u2192 <code>Open in Figma<\/code> \u2192 \uc124\uce58<\/li>\n<li><code>Plugins<\/code> \uba54\ub274 \u2192 <code>Figma to JSON Exporter<\/code> \uc2e4\ud589<\/li>\n<\/ol>\n<h4>3.3.3. \ub0b4\ubcf4\ub0b4\uae30 \ubc29\ubc95<\/h4>\n<ol>\n<li>\ud50c\ub7ec\uadf8\uc778 \uc2e4\ud589 \ud6c4 \ub0b4\ubcf4\ub0bc \ubc94\uc704 \uc120\ud0dd (\uc804\uccb4 \ud30c\uc77c \ub610\ub294 \uc120\ud0dd\ud55c \ud504\ub808\uc784)<\/li>\n<li><code>Export<\/code> \ud074\ub9ad<\/li>\n<li>JSON \ud30c\uc77c\uc774 \ub2e4\uc6b4\ub85c\ub4dc\ub41c\ub2e4.<\/li>\n<li>\ub2e4\uc6b4\ub85c\ub4dc\ub41c \ud30c\uc77c\uc744 \uac1c\ubc1c\uc790\uc5d0\uac8c \uc804\ub2ec\ud55c\ub2e4.<\/li>\n<\/ol>\n<h4>3.3.4. \ub0b4\ubcf4\ub0b8 JSON \ud30c\uc77c \uc608\uc2dc<\/h4>\n<pre><code class=\"language-json\">{\n  &quot;variables&quot;: {\n    &quot;color\/primary&quot;: {\n      &quot;value&quot;: &quot;#2563EB&quot;,\n      &quot;type&quot;: &quot;COLOR&quot;,\n      &quot;collection&quot;: &quot;Semantic&quot;\n    },\n    &quot;spacing\/4&quot;: {\n      &quot;value&quot;: 16,\n      &quot;type&quot;: &quot;FLOAT&quot;,\n      &quot;collection&quot;: &quot;Primitives&quot;\n    }\n  }\n}\n<\/code><\/pre>\n<blockquote>\n<p>\u26a0\ufe0f <strong>\uac1c\ubc1c\uc790\uc5d0\uac8c \uc54c\ub824\uc904 \uac83<\/strong><br \/>\n\uc774 \ud50c\ub7ec\uadf8\uc778\uc774 \ucd9c\ub825\ud558\ub294 JSON\uc740 Figma \ub0b4\ubd80 \ub370\uc774\ud130 \uad6c\uc870 \ud615\uc2dd\uc774\ub2e4.<br \/>\nW3C \ud45c\uc900(<code>$value<\/code>, <code>$type<\/code>) \ud615\uc2dd\uacfc \uad6c\uc870\uac00 \ub2e4\ub97c \uc218 \uc788\uc73c\ubbc0\ub85c<br \/>\n\uac1c\ubc1c\uc790\uac00 \ubcc0\ud658 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ubcc4\ub3c4\ub85c \uc791\uc131\ud574\uc57c \ud560 \uc218 \uc788\ub2e4.<br \/>\n\uc774 \uc810\uc744 \ud578\ub4dc\uc624\ud504 \uc2dc \ubbf8\ub9ac \uacf5\uc720\ud55c\ub2e4.<\/p>\n<\/blockquote>\n<hr>\n<h2>4. 4\uc7a5. \ud578\ub4dc\uc624\ud504 \uc900\ube44<\/h2>\n<p>\ud578\ub4dc\uc624\ud504\ub294 \ub514\uc790\uc774\ub108\uac00 \ub9cc\ub4e0 \uacb0\uacfc\ubb3c\uc744 \uac1c\ubc1c\uc790\uc5d0\uac8c \uacf5\uc2dd\uc73c\ub85c \uc804\ub2ec\ud558\ub294 \uacfc\uc815\uc774\ub2e4.<br \/>\n\ud1a0\ud070\uc774 \uc798 \uc815\ub9ac\ub418\uc5b4 \uc788\uc73c\uba74 \ud578\ub4dc\uc624\ud504\uac00 \ud6e8\uc52c \ube60\ub974\uace0 \uc624\ub958\uac00 \uc904\uc5b4\ub4e0\ub2e4.<\/p>\n<hr>\n<h3>4.1 \uc804\ub2ec \uc804 \uc810\uac80 \uccb4\ud06c\ub9ac\uc2a4\ud2b8<\/h3>\n<p><strong>\ud1a0\ud070 \uad6c\uc870 \uc810\uac80:<\/strong><\/p>\n<ul>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> Primitive \u2192 Semantic \u2192 Component \uc5f0\uacb0\uc774 \uc911\uac04\uc5d0 \ub04a\uae30\uc9c0 \uc54a\uc558\ub294\uac00?<\/p>\n<\/li>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> Semantic \ud1a0\ud070 \uc774\ub984\uc5d0 \uc0c9\uc0c1\uba85\uc774\ub098 \uc218\uce58\uac00 \ub4e4\uc5b4\uac00\uc9c0 \uc54a\uc558\ub294\uac00? (\uc608: <code>blue<\/code>, <code>16px<\/code> \uae08\uc9c0)<\/p>\n<\/li>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8 \uc18d\uc131\uc5d0 Variable\uc774 \uc5f0\uacb0\ub418\uc5b4 \uc788\ub294\uac00? (\uc9c1\uc811 \uc785\ub825\ud55c \uc0c9\uc0c1\uc774 \ub0a8\uc544\uc788\uc9c0 \uc54a\uc740\uac00?)<\/p>\n<\/li>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> \uc4f0\uc774\uc9c0 \uc54a\ub294 Primitive \ud1a0\ud070\uc744 \uc0ad\uc81c\ud588\ub294\uac00?<\/p>\n<\/li>\n<\/ul>\n<p><strong>Mode(\ud14c\ub9c8) \uc810\uac80:<\/strong><\/p>\n<ul>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> Light\uc640 Dark \ub450 Mode \ubaa8\ub450 \uac12\uc774 \ucc44\uc6cc\uc838 \uc788\ub294\uac00?<\/p>\n<\/li>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> Mode\ub97c \uc804\ud658\ud588\uc744 \ub54c \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc62c\ubc14\ub974\uac8c \ubc14\ub00c\ub294\uac00?<\/p>\n<\/li>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> \ud770\uc0c9\u00b7\uac80\uc815\ucc98\ub7fc \ubaa8\ub4dc\uc5d0 \uc0c1\uad00\uc5c6\uc774 \uace0\uc815\ub418\uc5b4\uc57c \ud560 \uac12\uc740 Primitive\uc5d0\ub9cc \uc788\ub294\uac00?<\/p>\n<\/li>\n<\/ul>\n<p><strong>\uc774\ub984 \uc810\uac80:<\/strong><\/p>\n<ul>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> \uac1c\ubc1c\uc790\uc640 \uc0ac\uc804\uc5d0 \ud569\uc758\ud55c \ub124\uc774\ubc0d \uaddc\uce59\uc744 \ub530\ub974\uace0 \uc788\ub294\uac00?<\/p>\n<\/li>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> \uac19\uc740 \uc758\ubbf8\uc778\ub370 \uc774\ub984\uc774 \ub2e4\ub978 \ud1a0\ud070\uc774 \uc5c6\ub294\uac00?<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3>4.2 \uc124\uba85(<code>$description<\/code>) \uc791\uc131\ud558\uae30<\/h3>\n<p>\ubaa8\ub4e0 Semantic\u00b7Component \ud1a0\ud070\uc5d0 \uc124\uba85\uc744 \ucd94\uac00\ud55c\ub2e4.<br \/>\n\uac1c\ubc1c\uc790\ub294 \uc774 \uc124\uba85\uc744 \ubcf4\uace0 &quot;\uc774 \ud1a0\ud070\uc744 \uc5b4\ub514\uc5d0 \uc368\uc57c \ud558\ub294\uc9c0&quot; \ud310\ub2e8\ud55c\ub2e4.<\/p>\n<p><strong>\uc5b4\ub5bb\uac8c \uc4f0\uba74 \uc88b\uc740\uac00:<\/strong><\/p>\n<table>\n<thead>\n<tr>\n<th>\ud1a0\ud070 \uc885\ub958<\/th>\n<th>\uc124\uba85\uc5d0 \ub2f4\uc744 \ub0b4\uc6a9<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\uc0c9\uc0c1<\/td>\n<td>\uc5b4\ub5a4 \ucef4\ud3ec\ub10c\ud2b8\uc758, \uc5b4\ub5a4 \uc0c1\ud0dc\uc5d0 \uc0ac\uc6a9\ud558\ub294\uac00<\/td>\n<\/tr>\n<tr>\n<td>\uc5ec\ubc31<\/td>\n<td>\uc5b4\ub290 \uc704\uce58\uc758 \uae30\ubcf8 \uac04\uaca9\uc778\uac00<\/td>\n<\/tr>\n<tr>\n<td>\ubaa8\uc11c\ub9ac<\/td>\n<td>\uc5b4\ub5a4 \ud06c\uae30 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc0ac\uc6a9\ud558\ub294\uac00<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>\uc608\uc2dc:<\/strong><\/p>\n<pre><code>button\/bg\/hover\n\u2192 \uc124\uba85: &quot;\ubc84\ud2bc\uc5d0 \ub9c8\uc6b0\uc2a4\ub97c \uc62c\ub838\uc744 \ub54c \ubc30\uacbd\uc0c9. \ud074\ub9ad \uac00\ub2a5\ud55c \ubc84\ud2bc \uc694\uc18c\uc5d0\ub9cc \uc0ac\uc6a9\ud55c\ub2e4.&quot;\n\ncolor\/danger\n\u2192 \uc124\uba85: &quot;\uc5d0\ub7ec \uba54\uc2dc\uc9c0, \uc0ad\uc81c \ubc84\ud2bc, \ud544\uc218 \uc785\ub825 \ud45c\uc2dc\uc5d0 \uc0ac\uc6a9\ud55c\ub2e4.&quot;\n\nspacing\/4\n\u2192 \uc124\uba85: &quot;16px. \ucef4\ud3ec\ub10c\ud2b8 \ub0b4\ubd80 \ud328\ub529\uc758 \uae30\ubcf8 \ub2e8\uc704\uc774\ub2e4.&quot;\n<\/code><\/pre>\n<hr>\n<h3>4.3 \uac1c\ubc1c\uc790\uc5d0\uac8c \uc804\ub2ec\ud560 \ud30c\uc77c \ubaa9\ub85d<\/h3>\n<table>\n<thead>\n<tr>\n<th>\uc804\ub2ec\ubb3c<\/th>\n<th>\ud615\uc2dd<\/th>\n<th>\ub0b4\uc6a9<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\ud1a0\ud070 JSON<\/td>\n<td><code>.json<\/code><\/td>\n<td>Figma to JSON Exporter\ub85c \ub0b4\ubcf4\ub0b8 \ud30c\uc77c<\/td>\n<\/tr>\n<tr>\n<td>\ud1a0\ud070 \ubb38\uc11c<\/td>\n<td>Notion \/ \uc2a4\ud504\ub808\ub4dc\uc2dc\ud2b8<\/td>\n<td>\ud1a0\ud070 \uc774\ub984\u00b7\uac12\u00b7\uc6a9\ub3c4 \ud45c<\/td>\n<\/tr>\n<tr>\n<td>Figma \ud30c\uc77c \ub9c1\ud06c<\/td>\n<td>URL<\/td>\n<td>\ubcf4\uae30(View) \uad8c\ud55c\uc73c\ub85c \uacf5\uc720<\/td>\n<\/tr>\n<tr>\n<td>\ub124\uc774\ubc0d \uaddc\uce59<\/td>\n<td>\ubb38\uc11c<\/td>\n<td>\ud300\uc5d0\uc11c \ud569\uc758\ud55c \uaddc\uce59<\/td>\n<\/tr>\n<tr>\n<td>\uc9c0\uc6d0 \ud14c\ub9c8 \ubaa9\ub85d<\/td>\n<td>\ubb38\uc11c<\/td>\n<td>Light, Dark \ub4f1 \uc5b4\ub5a4 Mode\uac00 \uc788\ub294\uc9c0<\/td>\n<\/tr>\n<tr>\n<td>\ubcc0\uacbd \uc774\ub825<\/td>\n<td>GitHub PR<\/td>\n<td>\ubb34\uc5c7\uc744 \uc65c \ubc14\uafe8\ub294\uc9c0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h3>4.4 \ud1a0\ud070\uc744 \ubc14\uafc0 \ub54c \uc8fc\uc758\ud560 \uac83\ub4e4<\/h3>\n<p>\ud578\ub4dc\uc624\ud504 \ud6c4\uc5d0\ub3c4 \ud1a0\ud070\uc744 \uc218\uc815\ud558\ub294 \uc77c\uc774 \uc0dd\uae34\ub2e4. \uc885\ub958\uc5d0 \ub530\ub77c \uc704\ud5d8\ub3c4\uac00 \ub2e4\ub974\ub2e4.<\/p>\n<table>\n<thead>\n<tr>\n<th>\ubcc0\uacbd \uc885\ub958<\/th>\n<th align=\"center\">\uc704\ud5d8\ub3c4<\/th>\n<th>\ucc98\ub9ac \ubc29\ubc95<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\uac12\ub9cc \ubc14\uafc8 (\uc0c9\uc0c1, \uc218\uce58)<\/td>\n<td align=\"center\">\ub0ae\uc74c<\/td>\n<td>GitHub PR\ub85c \ubcc0\uacbd \ub0b4\uc6a9 \uc54c\ub9ac\uae30<\/td>\n<\/tr>\n<tr>\n<td>\ud1a0\ud070 \ucd94\uac00<\/td>\n<td align=\"center\">\ub0ae\uc74c<\/td>\n<td>GitHub PR\ub85c \uc804\ub2ec<\/td>\n<\/tr>\n<tr>\n<td><strong>\ud1a0\ud070 \uc774\ub984 \ubcc0\uacbd<\/strong><\/td>\n<td align=\"center\">\ud83d\udd34 \ub192\uc74c<\/td>\n<td><strong>\uac1c\ubc1c\uc790\uc640 \ubc18\ub4dc\uc2dc \uc0ac\uc804 \ud611\uc758<\/strong> \u2014 \ucf54\ub4dc\uc5d0\uc11c \uc0ac\uc6a9 \uc911\uc778 \uc774\ub984\uc774 \ubc14\ub00c\uba74 \uc624\ub958\uac00 \ub09c\ub2e4<\/td>\n<\/tr>\n<tr>\n<td><strong>\ud1a0\ud070 \uc0ad\uc81c<\/strong><\/td>\n<td align=\"center\">\ud83d\udd34 \ub192\uc74c<\/td>\n<td><strong>\uac1c\ubc1c\uc790\uc640 \ubc18\ub4dc\uc2dc \uc0ac\uc804 \ud611\uc758<\/strong> \u2014 \ucf54\ub4dc\uc5d0\uc11c \ucc38\uc870 \uc911\uc778 \ud1a0\ud070\uc774 \uc0ac\ub77c\uc9c0\uba74 \uc624\ub958\uac00 \ub09c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h2>5. \ubd80\ub85d. \ucc38\uace0 \uc790\ub8cc &amp; \uccb4\ud06c\ub9ac\uc2a4\ud2b8<\/h2>\n<h3>5.1. \uacf5\uc2dd \ucc38\uace0 \uc790\ub8cc<\/h3>\n<table>\n<thead>\n<tr>\n<th>\uc790\ub8cc<\/th>\n<th>URL<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>W3C \ub514\uc790\uc778 \ud1a0\ud070 \ud45c\uc900<\/td>\n<td><a href=\"https:\/\/design-tokens.github.io\/community-group\/format\/\">https:\/\/design-tokens.github.io\/community-group\/format\/<\/a><\/td>\n<\/tr>\n<tr>\n<td>Figma Variables \uacf5\uc2dd \ubb38\uc11c<\/td>\n<td><a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/15339657135383\">https:\/\/help.figma.com\/hc\/en-us\/articles\/15339657135383<\/a><\/td>\n<\/tr>\n<tr>\n<td>Tailwind Tokens \ud50c\ub7ec\uadf8\uc778<\/td>\n<td><a href=\"https:\/\/www.figma.com\/community\/plugin\/1513618945140968492\">https:\/\/www.figma.com\/community\/plugin\/1513618945140968492<\/a><\/td>\n<\/tr>\n<tr>\n<td>Figma to JSON Exporter \ud50c\ub7ec\uadf8\uc778<\/td>\n<td><a href=\"https:\/\/www.figma.com\/community\/plugin\/1510358539626018288\">https:\/\/www.figma.com\/community\/plugin\/1510358539626018288<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h3>5.2. \ud578\ub4dc\uc624\ud504 \uc804 \ucd5c\uc885 \uccb4\ud06c\ub9ac\uc2a4\ud2b8<\/h3>\n<p><strong>\ud1a0\ud070 \uc124\uacc4<\/strong><\/p>\n<ul>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> Primitive \uceec\ub7ec \uc2a4\ucf00\uc77c \uc644\uc131 (Gray, Primary \ucd5c\uc18c 2\uc885)<\/p>\n<\/li>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> Semantic \ud1a0\ud070 \uc804\uccb4\uc5d0 Light\/Dark \uac12 \ubaa8\ub450 \uc785\ub825<\/p>\n<\/li>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> Component \ud1a0\ud070 \uc8fc\uc694 \ucef4\ud3ec\ub10c\ud2b8 \uc644\uc131 (\ubc84\ud2bc, \uc778\ud48b, \uce74\ub4dc)<\/p>\n<\/li>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> \ubaa8\ub4e0 Semantic\u00b7Component \ud1a0\ud070\uc5d0 <code>description<\/code> \uc791\uc131<\/p>\n<\/li>\n<\/ul>\n<p><strong>Figma \ud30c\uc77c<\/strong><\/p>\n<ul>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> \ucef4\ud3ec\ub10c\ud2b8 \uc804\uccb4\uc5d0 Variable \uc5f0\uacb0 \uc644\ub8cc<\/p>\n<\/li>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> Light\/Dark Mode \uc804\ud658 \uc815\uc0c1 \ub3d9\uc791 \ud655\uc778<\/p>\n<\/li>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> \uc4f0\uc9c0 \uc54a\ub294 \ub85c\uceec \uc2a4\ud0c0\uc77c \uc0ad\uc81c<\/p>\n<\/li>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> \ub808\uc774\uc5b4 \uc774\ub984 \uc815\ub9ac \uc644\ub8cc<\/p>\n<\/li>\n<\/ul>\n<p><strong>\uc804\ub2ec \ud30c\uc77c<\/strong><\/p>\n<ul>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> Token Studio JSON \ub0b4\ubcf4\ub0b4\uae30 \uc644\ub8cc<\/p>\n<\/li>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> GitHub \ub610\ub294 \uacf5\uc720 \ub4dc\ub77c\uc774\ube0c\uc5d0 \uc5c5\ub85c\ub4dc<\/p>\n<\/li>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> \ud1a0\ud070 \ubb38\uc11c \ucd5c\uc2e0 \uc0c1\ud0dc \uc720\uc9c0<\/p>\n<\/li>\n<li>\n<p><input disabled=\"\" type=\"checkbox\"> \uac1c\ubc1c\uc790\uc640 \ud0a5\uc624\ud504 \ubbf8\ud305 \uc77c\uc815 \uc7a1\uae30<\/p>\n<\/li>\n<\/ul>\n<hr>\n<h3>5.3. \uc790\uc8fc \ubb3b\ub294 \uc9c8\ubb38<\/h3>\n<p><strong>Q. Local Styles\uc640 Variables \uc911 \ubb34\uc5c7\uc744 \uc368\uc57c \ud558\ub294\uac00?<\/strong><br \/>\n\uc0c8 \ud504\ub85c\uc81d\ud2b8\ub77c\uba74 Variables\ub97c \uc0ac\uc6a9\ud55c\ub2e4. Variables\uac00 \ucf54\ub4dc \uc5f0\ub3d9\uc5d0 \uc720\ub9ac\ud558\uace0 Mode \uae30\ub2a5\ub3c4 \uc788\ub2e4.<br \/>\n\uae30\uc874 \ud504\ub85c\uc81d\ud2b8\ub294 \uc0c8\ub85c \ub9cc\ub4dc\ub294 \ucef4\ud3ec\ub10c\ud2b8\ubd80\ud130 Variables\ub85c \uc810\uc9c4\uc801\uc73c\ub85c \uc804\ud658\ud55c\ub2e4.<\/p>\n<p><strong>Q. \ud1a0\ud070\uc774 \ub108\ubb34 \ub9ce\uc544\uc9c0\uba74 \uc5b4\ub5bb\uac8c \uad00\ub9ac\ud558\ub294\uac00?<\/strong><br \/>\n\uc2e4\uc81c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc4f0\uc774\uc9c0 \uc54a\ub294 \ud1a0\ud070\uc744 \uc6b0\uc120 \uc815\ub9ac\ud55c\ub2e4.<br \/>\nFigma \uac80\uc0c9(<code>Ctrl+F<\/code> \ub610\ub294 <code>Cmd+F<\/code>)\uc73c\ub85c \ud2b9\uc815 Variable\uc774 \uc5b4\ub514\uc5d0 \uc4f0\uc774\ub294\uc9c0 \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n<p><strong>Q. \ub514\uc790\uc774\ub108 \ud63c\uc790 \ud1a0\ud070\uc744 \ub9cc\ub4e4\uc5b4\uc57c \ud558\ub294\uac00?<\/strong><br \/>\n\ub124\uc774\ubc0d \uaddc\uce59\uacfc \ub2e8\uc704 \uccb4\uacc4\ub294 \ubc18\ub4dc\uc2dc \uac1c\ubc1c\uc790\uc640 \ud568\uaed8 \uc815\ud55c\ub2e4.<br \/>\n\ub514\uc790\uc774\ub108 \ud63c\uc790 \ub9cc\ub4e0 \uc774\ub984\uc744 \ub098\uc911\uc5d0 \ubc14\uafb8\uba74 \ucf54\ub4dc\uae4c\uc9c0 \uc218\uc815\ud574\uc57c \ud558\ubbc0\ub85c \ucc98\uc74c\uc5d0 \uac19\uc774 \ub17c\uc758\ud558\ub294 \uac83\uc774 \ud6e8\uc52c \ub0ab\ub2e4.<\/p>\n<p><strong>Q. \uc9c0\uae08 \uc9c4\ud589 \uc911\uc778 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc911\uac04\uc5d0 \ub3c4\uc785\ud560 \uc218 \uc788\ub294\uac00?<\/strong><br \/>\n\uac00\ub2a5\ud558\ub2e4. \uc804\uccb4\ub97c \ud55c \ubc88\uc5d0 \ubc14\uafb8\ub824 \ud558\uc9c0 \ub9d0\uace0, \uc0c8\ub85c \ub9cc\ub4dc\ub294 \ucef4\ud3ec\ub10c\ud2b8\ubd80\ud130 \ud1a0\ud070\uc744 \uc801\uc6a9\ud558\uba74\uc11c \uc11c\uc11c\ud788 \uc804\ud658\ud55c\ub2e4.<\/p>\n<hr>\n<blockquote>\n<p><strong>\ub514\uc790\uc778 \ud1a0\ud070\uc740 \ub514\uc790\uc774\ub108\uc640 \uac1c\ubc1c\uc790\uac00 \ucc98\uc74c\uc73c\ub85c \uac19\uc740 \uc5b8\uc5b4\ub97c \uc4f0\uac8c \ud574\uc8fc\ub294 \ub3c4\uad6c\uc774\ub2e4.<\/strong><br \/>\n\ucc98\uc74c\uc5d4 \uc124\uc815\uc774 \ubc88\uac70\ub86d\uac8c \ub290\uaef4\uc9c0\uc9c0\ub9cc, \ud55c \ubc88 \uc798 \ub9cc\ub4e4\uc5b4\ub450\uba74 \ube0c\ub79c\ub4dc \uc0c9\uc0c1\uc774 \ubc14\ub00c\uc5b4\ub3c4<br \/>\nPrimitive \uac12 \ud558\ub098\ub9cc \uc218\uc815\ud558\uace0 \ub05d\ub0bc \uc218 \uc788\ub2e4.<\/p>\n<\/blockquote>\n<h2>6. \ud53c\uadf8\ub9c8 \ud1a0\ud070 \uc0dd\uc131 \ud50c\ub7ec\uadf8\uc778<\/h2>\n<p><a href=\"https:\/\/www.figma.com\/community\/plugin\/1513618945140968492\/tailwind-tokens-create-tailwind-css-variables-styles\"><br \/>\n\ud14c\uc77c\uc708\ub4dc<\/a><\/p>\n<p><a href=\"https:\/\/www.figma.com\/community\/plugin\/1324042632793671850\/easy-color-and-token-generator-2-0\"><br \/>\nEasy Color and token generator 2.0<\/a><\/p>\n<p><a href=\"https:\/\/www.figma.com\/community\/plugin\/1520709447715571667\/supa-design-tokens\"><br \/>\nSupa Design Tokens<\/a><\/p>\n<h2>6. \ud53c\uadf8\ub9c8 \uae30\ud0c0 \ud50c\ub7ec\uadf8\uc778<\/h2>\n<p>Json \uc744 \ub514\uc790\uc778\uc73c\ub85c<br \/>\n<a href=\"https:\/\/www.figma.com\/community\/plugin\/1396123287818850149\/json-to-figma-import\">JSON to Figma Import<\/a><br \/>\n<a href=\"https:\/\/www.figma.com\/community\/plugin\/1510358539626018288\/figma-to-json-exporter\">Figma to JSON Exporter<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. \ub514\uc790\uc778 \ud1a0\ud070 1.1 \uc774\ub7f0 \uacbd\ud5d8\uc774 \uc788\ub294\uac00? \ub514\uc790\uc778 \uc791\uc5c5\uc744 \ud558\ub2e4 \ubcf4\uba74 \uc774\ub7f0 \uc0c1\ud669\uc774 \uc790\uc8fc \uc0dd\uae34\ub2e4. \uac1c\ubc1c\uc790: &quot;\ubc84\ud2bc \uc0c9\uc774 \ud53c\uadf8\ub9c8\ub791 \ub2e4\ub978\ub370\uc694?&quot; \ub514\uc790\uc774\ub108: &quot;\uc544, \uc81c\uac00 \uc4f4 \ud30c\ub780\uc0c9\uc774 #2563EB\uc778\ub370 \ud639\uc2dc #1D4ED8 \uc4f0\uc168\ub098\uc694?&quot; \uac1c\ubc1c\uc790: &quot;&#8230; \ube44\uc2b7\ud574 \ubcf4\uc5ec\uc11c \uadf8\ub0e5 \uc37c\uc5b4\uc694.&quot; \ub610\ub294 \uc774\ub7f0 \uc0c1\ud669\ub3c4 \uc788\ub2e4. \ub514\uc790\uc774\ub108: &quot;\ube0c\ub79c\ub4dc \uceec\ub7ec\uac00 \ubc14\ub00c\uc5c8\uc5b4\uc694. \ud30c\ub780\uc0c9 \u2192 \ubcf4\ub77c\uc0c9\uc73c\ub85c\uc694.&quot; \uac1c\ubc1c\uc790: &quot;\ud53c\uadf8\ub9c8\uc5d0 \ud30c\ub780\uc0c9\uc774 \uc4f0\uc778 \uacf3\uc774 87\uad70\ub370\ub124\uc694. \ub2e4 \ucc3e\uc544\uc11c \ubc14\uafd4\uc57c &#8230; <a title=\"\ud53c\uadf8\ub9c8 \ub514\uc790\uc778 \ud1a0\ud070\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/figma-01\/\" aria-label=\"\ud53c\uadf8\ub9c8 \ub514\uc790\uc778 \ud1a0\ud070\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-1912","post","type-post","status-publish","format-standard","hentry","category-creative-figma"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts\/1912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/comments?post=1912"}],"version-history":[{"count":1,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts\/1912\/revisions"}],"predecessor-version":[{"id":2183,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts\/1912\/revisions\/2183"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/media?parent=1912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/categories?post=1912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/tags?post=1912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}