{"id":475,"date":"2025-07-20T06:05:47","date_gmt":"2025-07-20T15:05:47","guid":{"rendered":"https:\/\/pixelline.co.kr\/blog\/?p=475"},"modified":"2025-07-20T06:05:48","modified_gmt":"2025-07-20T15:05:48","slug":"%eb%94%94%ec%9e%90%ec%9d%b8-%ec%8b%9c%ec%8a%a4%ed%85%9c-2025-%ed%86%a0%ed%81%b0%c2%b7figma%ec%97%90%ec%84%9c-%ec%bd%94%eb%93%9c%ea%b9%8c%ec%a7%80-%ec%9e%90%eb%8f%99%ed%99%94-%ec%99%84%ec%a0%84","status":"publish","type":"post","link":"https:\/\/pixelline.co.kr\/blog\/%eb%94%94%ec%9e%90%ec%9d%b8-%ec%8b%9c%ec%8a%a4%ed%85%9c-2025-%ed%86%a0%ed%81%b0%c2%b7figma%ec%97%90%ec%84%9c-%ec%bd%94%eb%93%9c%ea%b9%8c%ec%a7%80-%ec%9e%90%eb%8f%99%ed%99%94-%ec%99%84%ec%a0%84\/","title":{"rendered":"\ub514\uc790\uc778 \uc2dc\uc2a4\ud15c 2025: \ud1a0\ud070\u00b7Figma\uc5d0\uc11c \ucf54\ub4dc\uae4c\uc9c0 \uc790\ub3d9\ud654 \uc644\uc804 \uc815\ubcf5"},"content":{"rendered":"\n<p>&#8216;\uc0c9\uae54 \ud558\ub098 \ubc14\uafb8\ub824\ub2e4 \uc804 \ud398\uc774\uc9c0\uac00 \uae68\uc838 \ubc84\ub9b0 \uacbd\ud5d8&#8217; \uc788\uc73c\uc2e0\uac00\uc694? \ud1a0\ud070 \uae30\ubc18 \u2018\ub514\uc790\uc778 \uc2dc\uc2a4\ud15c 2025\u2019\ub294 \uc774\ub7f0 \ubb38\uc81c\ub97c \u2018\ud55c \uc904 \uc218\uc815 \u2192 \uc804 \uc0ac\uc774\ud2b8 \ubc18\uc601\u2019\uc73c\ub85c \ud574\uacb0\ud569\ub2c8\ub2e4. \uc774\ubc88 \uae00\uc5d0\uc11c\ub294 Figma \ub514\uc790\uc778 \ud1a0\ud070 \uc791\uc131\ubd80\ud130 Style Dictionary \u00b7 Tailwind \u00b7 Storybook \uc790\ub3d9\ud654\uae4c\uc9c0, \ud648\ud398\uc774\uc9c0 \uc81c\uc791 \ud604\uc7a5\uc5d0\uc11c \ubc14\ub85c \uc368\uba39\uc744 \uc218 \uc788\ub294 \uc2e4\uc804 \uc808\ucc28\ub97c \ucc28\uadfc\ucc28\uadfc \uc124\uba85\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ubaa9\ucc28<\/h2>\n\n\n\n<ol>\n<li><a href=\"#why\">\uc65c \ub514\uc790\uc778 \uc2dc\uc2a4\ud15c\uc774 \ud544\uc694\ud55c\uac00?<\/a><\/li>\n\n\n\n<li><a href=\"#token\">1\ub2e8\uacc4: \uceec\ub7ec\u00b7\ud0c0\uc774\ud3ec \u2018\ud1a0\ud070\u2019 \ub9cc\ub4e4\uae30<\/a><\/li>\n\n\n\n<li><a href=\"#figma\">2\ub2e8\uacc4: Figma \ud50c\ub7ec\uadf8\uc778 \uc790\ub3d9 \ub3d9\uae30\ud654<\/a><\/li>\n\n\n\n<li><a href=\"#build\">3\ub2e8\uacc4: Style Dictionary \ube4c\ub4dc \ud30c\uc774\ud504\ub77c\uc778<\/a><\/li>\n\n\n\n<li><a href=\"#story\">4\ub2e8\uacc4: Storybook\u00b7Tailwind \ud1b5\ud569<\/a><\/li>\n\n\n\n<li><a href=\"#govern\">\uc6b4\uc601\u00b7\uac70\ubc84\ub10c\uc2a4 \ubca0\uc2a4\ud2b8 \ud504\ub799\ud2f0\uc2a4<\/a><\/li>\n\n\n\n<li><a href=\"#guide\">\uc2e4\uc804 \ud65c\uc6a9 \uac00\uc774\ub4dc<\/a><\/li>\n\n\n\n<li><a href=\"#faq\">FAQ<\/a><\/li>\n\n\n\n<li><a href=\"#conclusion\">\ub9fa\uc74c\ub9d0<\/a><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why\">\uc65c \ub514\uc790\uc778 \uc2dc\uc2a4\ud15c\uc774 \ud544\uc694\ud55c\uac00?<\/h2>\n\n\n\n<p>\u00b7 UI \uc77c\uad00\uc131 \u2191 \u2192 \ube0c\ub79c\ub4dc \uc2e0\ub8b0 \u00b7 \uc804\ud658\uc728 \uc0c1\uc2b9<br>\u00b7 \uac1c\ubc1c\u00b7\ub514\uc790\uc778 \uc7ac\uc791\uc5c5 \u2193 \u2192 \uc2dc\uac04 30\u2009% \uc808\uac10<br>\u00b7 \uc2e0\uc785 \uc628\ubcf4\ub529 \uc18d\ub3c4 \u2191 \u2192 \ud3c9\uade0 3\uc8fc \u2192 1\uc8fc \ub2e8\ucd95<br>\uad6c\uae00\u00b7\uc5d0\uc5b4\ube44\uc564\ube44\ub294 \ub514\uc790\uc778 \uc2dc\uc2a4\ud15c \ub3c4\uc785 \ud6c4 \ubc30\ud3ec \uc8fc\uae30\uac00 \ub450 \ubc30 \ube68\ub77c\uc84c\ub2e4\uace0 \uacf5\uac1c\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"token\">1\ub2e8\uacc4: \uceec\ub7ec\u00b7\ud0c0\uc774\ud3ec \u2018\ud1a0\ud070\u2019 \ub9cc\ub4e4\uae30<\/h2>\n\n\n\n<p>\u2018\ud1a0\ud070\u2019\uc740 \ub514\uc790\uc778 \uc18d\uc131\uc744 \ubcc0\uc218\ucc98\ub7fc \uad00\ub9ac\ud558\ub294 \uac1c\ub150\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<ul>\n<li>\uceec\ub7ec: brand-primary-500, gray-100 \ub4f1 \ub124\uc774\ubc0d<\/li>\n\n\n\n<li>\ud0c0\uc774\ud3ec: font-body-lg, font-heading-xl<\/li>\n\n\n\n<li>\uacf5\uac1c \ud3ec\ub9f7: JSON \/ YAML<\/li>\n<\/ul>\n\n\n\n<p>\ucd5c\uc18c \ub2e8\uc704\ub9cc \ud1a0\ud070\uc73c\ub85c \ub9cc\ub4e4\uace0 \ub098\uba38\uc9c0\ub294 \ud30c\uc0dd\uac12\uc73c\ub85c \uacc4\uc0b0\ud558\uba74 \uc720\uc9c0\ubcf4\uc218\uac00 \uc27d\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"630\" src=\"https:\/\/pixelline.co.kr\/blog\/wp-content\/uploads\/2025\/07\/2103-900x630.jpg\" alt=\"1\ub2e8\uacc4: \uceec\ub7ec\u00b7\ud0c0\uc774\ud3ec \u2018\ud1a0\ud070\u2019 \ub9cc\ub4e4\uae30\" class=\"wp-image-484\" srcset=\"https:\/\/pixelline.co.kr\/blog\/wp-content\/uploads\/2025\/07\/2103-900x630.jpg 900w, https:\/\/pixelline.co.kr\/blog\/wp-content\/uploads\/2025\/07\/2103-510x357.jpg 510w, https:\/\/pixelline.co.kr\/blog\/wp-content\/uploads\/2025\/07\/2103-768x538.jpg 768w, https:\/\/pixelline.co.kr\/blog\/wp-content\/uploads\/2025\/07\/2103.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"figma\">2\ub2e8\uacc4: Figma \ud50c\ub7ec\uadf8\uc778 \uc790\ub3d9 \ub3d9\uae30\ud654<\/h2>\n\n\n\n<p>Figma Tokens \u00b7 Token Studio \ud50c\ub7ec\uadf8\uc778\uc73c\ub85c JSON \ud1a0\ud070 \ud30c\uc77c\uc744 \ubd88\ub7ec\uc624\uba74 \uc0c9\u00b7\ud3f0\ud2b8 \uc2a4\ud0c0\uc77c\uc774 \uc790\ub3d9 \uc0dd\uc131\ub429\ub2c8\ub2e4.<br>\u00b7 \ubcc0\uacbd \u2192 GitHub Actions PR \u2192 \ub514\uc790\uc774\ub108 \ud655\uc778 \u2192 Merge \u2192 Figma \uc790\ub3d9 \uc5c5\ub370\uc774\ud2b8 \ud750\ub984\uc73c\ub85c \ud1b5\ud569\ud558\uc138\uc694.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"build\">3\ub2e8\uacc4: Style Dictionary \ube4c\ub4dc \ud30c\uc774\ud504\ub77c\uc778<\/h2>\n\n\n\n<p>Style Dictionary\ub294 \ud1a0\ud070 JSON\uc744 iOS\u00b7Android\u00b7CSS\u00b7Tailwind \ubcc0\uc218\ub85c \ubcc0\ud658\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ package.json \uc2a4\ud06c\ub9bd\ud2b8\n\"build:tokens\": \"style-dictionary build --config sd.config.cjs\"\n<\/pre>\n\n\n\n<p>CI\uc5d0\uc11c \u2018\ud1a0\ud070 PR \u2192 \ube4c\ub4dc \u2192 npm \ud328\ud0a4\uc9c0 publish\u2019 \uc790\ub3d9 \ubc30\ud3ec\ub97c \uc124\uc815\ud558\uba74 \ud504\ub7f0\ud2b8\uc5d4\ub4dc\u00b7\uc571\uc774 \ub3d9\uc2dc\uc5d0 \ucd5c\uc2e0 \uc2a4\ud0c0\uc77c\uc744 \ubc1b\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"story\">4\ub2e8\uacc4: Storybook\u00b7Tailwind \ud1b5\ud569<\/h2>\n\n\n\n<p>Storybook Docs \uc560\ub4dc\uc628\uc73c\ub85c \u2018\ucef4\ud3ec\ub10c\ud2b8\u00b7\ud1a0\ud070 \ud45c\u2019\ub97c \uc790\ub3d9 \uc0dd\uc131\ud558\uba74 \ub514\uc790\uc774\ub108\u00b7\uac1c\ubc1c\uc790\uac00 \ub3d9\uc77c \ubb38\uc11c\ub97c \ubcf4\uba74\uc11c \ud611\uc5c5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>Tailwind v3.4\ub294 <code>tailwind.config.js<\/code>\uc5d0\uc11c design-tokens \ud50c\ub7ec\uadf8\uc778\uc744 \ubd88\ub7ec\uc640 \ud1a0\ud070\uc744 \uc720\ud2f8\ub9ac\ud2f0 \ud074\ub798\uc2a4\ub85c \ubcc0\ud658\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"630\" src=\"https:\/\/pixelline.co.kr\/blog\/wp-content\/uploads\/2025\/07\/2104-900x630.jpg\" alt=\"4\ub2e8\uacc4: Storybook\u00b7Tailwind \ud1b5\ud569\" class=\"wp-image-485\" srcset=\"https:\/\/pixelline.co.kr\/blog\/wp-content\/uploads\/2025\/07\/2104-900x630.jpg 900w, https:\/\/pixelline.co.kr\/blog\/wp-content\/uploads\/2025\/07\/2104-510x357.jpg 510w, https:\/\/pixelline.co.kr\/blog\/wp-content\/uploads\/2025\/07\/2104-768x538.jpg 768w, https:\/\/pixelline.co.kr\/blog\/wp-content\/uploads\/2025\/07\/2104.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"govern\">\uc6b4\uc601\u00b7\uac70\ubc84\ub10c\uc2a4 \ubca0\uc2a4\ud2b8 \ud504\ub799\ud2f0\uc2a4<\/h2>\n\n\n\n<p>\u00b7 \uc8fc\uac04 \ub514\uc790\uc778 \uc2dc\uc2a4\ud15c \uc2a4\ud0e0\ub4dc\uc5c5(30\ubd84)\uc73c\ub85c \ubcc0\uacbd \ub17c\uc758<br>\u00b7 \ubc84\uc804 \uc815\ucc45: MAJOR = \ub514\uc790\uc778 \uac1c\ud3b8, MINOR = \ud1a0\ud070 \ucd94\uac00, PATCH = \ubc84\uadf8<br>\u00b7 Lint \uaddc\uce59: stylelint + eslint-plugin-tokens\ub85c \ud1a0\ud070 \uc678 \uac12 \uc0ac\uc6a9 \uae08\uc9c0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"guide\">\uc2e4\uc804 \ud65c\uc6a9 \uac00\uc774\ub4dc<\/h2>\n\n\n\n<ol>\n<li>\ube0c\ub79c\ub4dc \uceec\ub7ec\u00b7\ud3f0\ud2b8 \uc815\uc758 \u2192 \ud1a0\ud070 JSON \uc791\uc131<\/li>\n\n\n\n<li>Token Studio\ub85c Figma \uc5f0\ub3d9 \u00b7 \ub3d9\uae30\ud654 \ud14c\uc2a4\ud2b8<\/li>\n\n\n\n<li>Style Dictionary \ube4c\ub4dc \u2192 CSS\u2006\/\u2006Tailwind \ubcc0\uc218 \uc0dd\uc131<\/li>\n\n\n\n<li>Storybook Docs \uc560\ub4dc\uc628\uc73c\ub85c UI \uce74\ud0c8\ub85c\uadf8 \uc81c\uc791<\/li>\n\n\n\n<li>CI \ud30c\uc774\ud504\ub77c\uc778 \uc790\ub3d9 \ubc30\ud3ec + \uc8fc\uac04 \uac70\ubc84\ub10c\uc2a4 \ud68c\uc758<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">FAQ<\/h2>\n\n\n\n<ul>\n<li><strong>Q \ud1a0\ud070 \ub124\uc774\ubc0d\uc774 \ud5f7\uac08\ub824\uc694.<\/strong><br>A 3\ub2e8(\uce74\ud14c\uace0\ub9ac-\uc5ed\ud560-\uac12) \uaddc\uce59\uc744 \uc9c0\ud0a4\uba74 \ud63c\ub780\uc744 \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>Q Figma \ud50c\ub7ec\uadf8\uc778\uc740 \uc720\ub8cc\uc778\uac00\uc694?<\/strong><br>A Token Studio\ub294 \uae30\ubcf8 \uae30\ub2a5 \ubb34\ub8cc, \uc9c4\ub2e8\u00b7\ubc84\uc804 \uad00\ub9ac \ud504\ub85c \uae30\ub2a5\uc740 \uc720\ub8cc\uc785\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>Q \ub514\uc790\uc778 \uc2dc\uc2a4\ud15c\uc774 \ubb34\uac70\uc6cc\uc9c0\uc9c0 \uc54a\ub098\uc694?<\/strong><br>A \ud1a0\ud070 + \ubaa8\ub4c8\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub85c \u2018\ud544\uc694 \uc2dc \ub85c\ub4dc\u2019 \uad6c\uc870\ub97c \ucc44\ud0dd\ud558\uba74 \ubc88\ub4e4 \ud06c\uae30\ub97c \uc720\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>Q \ub514\uc790\uc774\ub108\u00b7\uac1c\ubc1c\uc790 \ud611\uc5c5 \ud301\uc774 \uc788\ub098\uc694?<\/strong><br>A Storybook Docs\ub97c \u2018\ub2e8\uc77c \uc9c4\uc2e4 \uc18c\uc2a4(single source of truth)\u2019\ub85c \uc0bc\uc544 PR\ub9c8\ub2e4 \uc2a4\ub0c5\uc20f\uc744 \ubcf4\uc5ec \uc8fc\uc138\uc694.<\/li>\n\n\n\n<li><strong>Q \uc791\uc740 \ud300\ub3c4 \ud544\uc694\ud560\uae4c\uc694?<\/strong><br>A 3\uc778 \uc2a4\ud0c0\ud2b8\uc5c5\ub3c4 \ud1a0\ud070\u00b7Storybook\ub9cc \uad6c\ucd95\ud574 \ub450\uba74 \ucd94\ud6c4 \uc7ac\uc124\uacc4 \ube44\uc6a9\uc744 40\u2009% \uc808\uac10\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">\ub9fa\uc74c\ub9d0<\/h2>\n\n\n\n<p>\ud1a0\ud070 \uae30\ubc18 \u2018\ub514\uc790\uc778 \uc2dc\uc2a4\ud15c 2025\u2019\ub294 \ube0c\ub79c\ub4dc \uc77c\uad00\uc131\u00b7\ubc30\ud3ec \uc18d\ub3c4\u00b7\uac1c\ubc1c \ube44\uc6a9\uc744 \ub3d9\uc2dc\uc5d0 \uac1c\uc120\ud569\ub2c8\ub2e4. \uc774\ubc88 \uac00\uc774\ub4dc\ub97c \ub530\ub77c \uc791\uc740 \ud1a0\ud070 \uc138\ud2b8\ubd80\ud130 \uc2dc\uc791\ud574 \ubcf4\uc138\uc694. \uc804\ubb38 \ucee8\uc124\ud305\u00b7\uc790\ub3d9\ud654 \uc2a4\ud06c\ub9bd\ud2b8\uac00 \ud544\uc694\ud558\ub2e4\uba74 <a href=\"\/index.html#inquiry\">\uc0c1\ub2f4 \ubb38\uc758<\/a>, \uc2e4\uc81c \uad6c\ucd95 \uc0ac\ub840\ub294 <a href=\"\/index.html#projects\">\ud3ec\ud2b8\ud3f4\ub9ac\uc624<\/a>\uc5d0\uc11c \ud655\uc778\ud558\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud1a0\ud070 \uae30\ubc18 \ub514\uc790\uc778 \uc2dc\uc2a4\ud15c, Figma \ud50c\ub7ec\uadf8\uc778, Style Dictionary\ub85c \ucf54\ub4dc \uc790\ub3d9\ud654\uae4c\uc9c0\u20142025\ub144\ud615 \ub514\uc790\uc778 \uc2dc\uc2a4\ud15c \uad6c\ucd95\u00b7\uc6b4\uc601 \ubc29\ubc95\uc744 \ub2e8\uacc4\ubcc4\ub85c \uc54c\ub824\ub4dc\ub9bd\ub2c8\ub2e4.<\/p>\n","protected":false},"author":1,"featured_media":483,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[239,231,238,240,233,236,180,235,99,232,234,90,237,241,46],"_links":{"self":[{"href":"https:\/\/pixelline.co.kr\/blog\/wp-json\/wp\/v2\/posts\/475"}],"collection":[{"href":"https:\/\/pixelline.co.kr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelline.co.kr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelline.co.kr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelline.co.kr\/blog\/wp-json\/wp\/v2\/comments?post=475"}],"version-history":[{"count":1,"href":"https:\/\/pixelline.co.kr\/blog\/wp-json\/wp\/v2\/posts\/475\/revisions"}],"predecessor-version":[{"id":486,"href":"https:\/\/pixelline.co.kr\/blog\/wp-json\/wp\/v2\/posts\/475\/revisions\/486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelline.co.kr\/blog\/wp-json\/wp\/v2\/media\/483"}],"wp:attachment":[{"href":"https:\/\/pixelline.co.kr\/blog\/wp-json\/wp\/v2\/media?parent=475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelline.co.kr\/blog\/wp-json\/wp\/v2\/categories?post=475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelline.co.kr\/blog\/wp-json\/wp\/v2\/tags?post=475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}