{"id":1078,"date":"2026-06-26T13:41:00","date_gmt":"2026-06-26T13:41:00","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=1078"},"modified":"2026-06-26T14:02:46","modified_gmt":"2026-06-26T14:02:46","slug":"%eb%aa%a8%eb%b0%94%ec%9d%bc%eb%94%94%ec%9e%90%ec%9d%b8%eb%b2%84%ed%8a%bc","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=1078","title":{"rendered":"\ubaa8\ubc14\uc77c\ub514\uc790\uc778\ubc84\ud2bc"},"content":{"rendered":"<h1>\ubaa8\ubc14\uc77c \ub514\uc790\uc778 &#8211; \ubc84\ud2bc<\/h1>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/intro-1.jpg\" alt=\"\ubc84\ud2bc \uc18c\uac1c\"><\/p>\n<p>\ubc84\ud2bc(Button)\uc740 \uc0ac\uc6a9\uc790\uac00 \ub370\uc774\ud130\ub97c \uc804\uc1a1\ud558\uac70\ub098 \uae30\ub2a5\uc744 \uc2e4\ud589\ud558\ub3c4\ub85d \ud558\ub294 <strong>\uba85\ub839 \ucee8\ud2b8\ub864<\/strong>(imperative control)\uc785\ub2c8\ub2e4. \ubc84\ud2bc\uc758 \uac00\uc7a5 \ud070 \ud2b9\uc9d5\uc740 \uc0ac\uc6a9\uc790\uac00 \ud130\uce58\ud588\uc744 \ub54c \uc989\uac01\uc801\uc73c\ub85c \uba85\ub839\uc744 \uc2e4\ud589\uc2dc\ud0a4\ub294 \uc810\uc785\ub2c8\ub2e4.<\/p>\n<hr>\n<h2>\ubc84\ud2bc\uc758 \ud2b9\uc9d5<\/h2>\n<h3>\ubc84\ud2bc\uc740 \uc5b4\ud3ec\ub358\uc2a4(Affordance)\uac00 \uc788\uc5b4\uc57c \ud55c\ub2e4<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/affordance.png\" alt=\"\uc5b4\ud3ec\ub358\uc2a4\"><\/p>\n<p>\ubc84\ud2bc\uc740 \ub2e4\ub978 \ucee8\ud2b8\ub864\uacfc \ub2ec\ub9ac \ub204\ub974\ub294 \ud589\uc704\ub97c \uc720\ubc1c\ud558\ub294 \ud2b9\uc9d5(\uc5b4\ud3ec\ub358\uc2a4)\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \ud14d\uc2a4\ud2b8 \ud544\ub4dc \uac19\uc740 \uc785\ub825 \ucee8\ud2b8\ub864\ub85c \uc815\ubcf4\ub97c \uc785\ub825\ud558\uace0 \uc120\ud0dd \ucee8\ud2b8\ub864\ub85c \ud56d\ubaa9\uc744 \uc120\ud0dd\ud55c \ud6c4 \ubc84\ud2bc\uc744 \ub204\ub974\uba74 \uc785\ub825 \ub370\uc774\ud130\uac00 \uc804\uc1a1\ub418\uac70\ub098 \uc2e4\ud589 \ud30c\uc77c\uc774 \uad6c\ub3d9\ub429\ub2c8\ub2e4.<\/p>\n<p>\ud604\uc7ac\ub294 \ubc84\ud2bc\uc758 \uc2dc\uac01\uc801\uc778 \ud6a8\uacfc\ubcf4\ub2e4\ub294 <strong>\uceec\ub7ec\uc640 \ub808\uc774\ube14\uacfc \uc815\uad50\ud55c \uc0c1\ud638\uc791\uc6a9 \ub514\uc790\uc778<\/strong>\uc73c\ub85c \ubc84\ud2bc\uc758 \ud615\ud0dc\uac00 \ubcc0\uacbd\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n<h3>\ubc84\ud2bc\uc740 \uc2e4\uc81c \uc138\uacc4\uc758 \uba54\ud0c0\ud3ec(Metaphor)\uac00 \uc801\uc6a9\ub418\uc5c8\ub2e4<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/metapo.png\" alt=\"\uba54\ud0c0\ud3ec\"><\/p>\n<p>\uba54\ud0c0\ud3ec\uac00 \uc801\uc6a9\ub418\uba74 \ud559\uc2b5 \uc5c6\uc774\ub3c4 UI \uc694\uc18c\uc758 \uae30\ub2a5\uacfc \uac1c\ub150\uc744 \uc774\ud574\ud558\uc5ec \uc9c1\uad00\uc801\uc73c\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc624\ub514\uc624, \uc138\ud0c1\uae30, \ud154\ub808\ube44\uc804 \ub9ac\ubaa8\ucee8\uc758 \ubb3c\ub9ac\uc801\uc778 \ubc84\ud2bc\uc744 \uac00\uc0c1\uc758 \ubaa8\ubc14\uc77c \ud654\uba74\uc5d0 \ub3d9\uc77c\ud558\uac8c \uc870\uc791\ub418\ub3c4\ub85d \uad6c\ud604\ub429\ub2c8\ub2e4.<\/p>\n<h3>\ubc84\ud2bc\uc740 \ucf58\ud150\uce20\uc640 \uad6c\ubd84\ub418\uc5b4\uc57c \ud55c\ub2e4<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/content-sep.png\" alt=\"\ucf58\ud150\uce20\uc640 \uad6c\ubd84\"><\/p>\n<p>\ubc84\ud2bc\uacfc \ucf58\ud150\uce20\uac00 \uac19\uc774 \uc788\uc744 \ub54c \ubc84\ud2bc\uc744 \ubcf4\uace0 \uc2e4\ud589 \uac00\ub2a5\ud568\uc744 \ud55c\ub208\uc5d0 \uc54c\uc544\ubcfc \uc218 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4. \ubc84\ud2bc\uc5d0 \uc0ac\uc6a9\ud55c \uc0c9\uacfc \uc2a4\ud0c0\uc77c\uc744 \ucf58\ud150\uce20\uc5d0 \uc0ac\uc6a9\ud558\uba74 \uc0ac\uc6a9\uc790\ub294 \ud63c\ub780\uc2a4\ub7ec\uc6cc \ud569\ub2c8\ub2e4.<\/p>\n<blockquote>\n<p><strong>Tip<\/strong>: UI \ucee8\ud2b8\ub864\uc740 \uc0ac\uc6a9\uc790\uac00 \ucf58\ud150\uce20\ub97c \uc774\ud574\ud558\uace0 \uc0c1\ud638\uc791\uc6a9 \ud560 \uc218 \uc788\uac8c \ud574\uc8fc\ub294 \uc218\ub2e8\uc77c \ubfd0\uc785\ub2c8\ub2e4. \ucf58\ud150\uce20\uac00 \uc6b0\uc120(Content First)\uc774 \ub418\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n<h3>\ubc84\ud2bc\uc740 \uc804\ud658\uc728\uacfc \uc9c1\uc811\uc801\uc73c\ub85c \uc5f0\uad00\uc131\uc774 \uc788\ub2e4<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/cta.png\" alt=\"CTA \ubc84\ud2bc\"><\/p>\n<p>\uc804\ud658\uc744 \uc720\ub3c4\ud558\ub294 \ud398\uc774\uc9c0(landing page)\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 \ubc84\ud2bc\uc744 <strong>CTA \ubc84\ud2bc(Call to Action button)<\/strong>\uc774\ub77c\uace0 \ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \ud2b9\uc815 \ud589\ub3d9\uc744 \ucde8\ud558\uac8c \ud558\ub824\uba74 \uc124\ub4dd\ub825 \uc788\ub294 CTA \ubc84\ud2bc\uc744 \ub514\uc790\uc778\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n<hr>\n<h2>\ubc84\ud2bc\uc758 \uad6c\uc870<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/structure.png\" alt=\"\ubc84\ud2bc \uad6c\uc870\"><\/p>\n<p>\ud14d\uc2a4\ud2b8\ub85c \ub41c \ubc84\ud2bc \ub808\uc774\ube14\uacfc \ub808\uc774\ube14\uc744 \uac10\uc2f8\ub294 \uc9c1\uc0ac\uac01\ud615 \ucee8\ud14c\uc774\ub108\uac00 \ubc84\ud2bc\uc758 \ucd5c\uc18c\ud55c\uc758 \uc694\uc18c\uc785\ub2c8\ub2e4.<\/p>\n<h3>1. \ubc84\ud2bc \ub808\uc774\ube14(Button Label)<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/label.png\" alt=\"\ubc84\ud2bc \ub808\uc774\ube14\"><\/p>\n<p>\ubc84\ud2bc \ub808\uc774\ube14\uc740 \ubc84\ud2bc\uc744 \ub204\ub97c \ub54c \uc2e4\ud589\ub418\ub294 \uba85\ub839\uc5d0 \ub300\ud574 \ub098\ud0c0\ub0c5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \ub808\uc774\ube14\ub9cc \ubcf4\uace0\ub3c4 \ubb34\uc5c7\uc774 \uc2e4\ud589\ub420\uc9c0 \uc54c\uc544\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<h3>2. \ucee8\ud14c\uc774\ub108(Container)<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/container.png\" alt=\"\ucee8\ud14c\uc774\ub108\"><\/p>\n<p>\ubc84\ud2bc \ub808\uc774\ube14\uc744 \uac10\uc2f8\ub294 \uc9c1\uc0ac\uac01\ud615\uc758 \uc2dc\uac01\uc801\uc778 \uc694\uc18c\uc785\ub2c8\ub2e4. \uc0c9\uc774 \ucc44\uc6cc\uc9c4 \uc9c1\uc0ac\uac01\ud615\uc740 \ubb3c\ub9ac\uc801\uc778 \uae30\uae30\uc758 \ubc84\ud2bc \ud615\ud0dc\ub97c \uc5f0\uc0c1\uc2dc\ud0b5\ub2c8\ub2e4.<\/p>\n<h3>3. \uc544\uc774\ucf58(Icon)<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/icon-element.png\" alt=\"\uc544\uc774\ucf58\"><\/p>\n<p>\uc544\uc774\ucf58\uc740 \uadf8 \uc790\uccb4\ub85c \ub808\uc774\ube14\uc774 \ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\uc774\ucf58 \ub2e8\ub3c5\uc73c\ub85c \uc0ac\uc6a9\ud558\uba74 \uc544\uc774\ucf58 \ubc84\ud2bc\uc774 \ub429\ub2c8\ub2e4.<\/p>\n<h3>4. \uc544\uc6c3\ub77c\uc778(Outline)<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/outline.png\" alt=\"\uc544\uc6c3\ub77c\uc778\"><\/p>\n<p>\ubc84\ud2bc\uc758 \ucee8\ud14c\uc774\ub108\uc5d0 \uc0c9\uc744 \ucc44\uc6b0\uc9c0 \uc54a\uace0 \uc544\uc6c3\ub77c\uc778\uc5d0\ub9cc \uc0c9\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uace0\uc2a4\ud2b8 \ubc84\ud2bc(ghost button)\uacfc \uc544\uc6c3\ub77c\uc778 \ubc84\ud2bc(outline button)\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h3>5. \ub77c\uc6b4\ub4dc(Round)<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/round.png\" alt=\"\ub77c\uc6b4\ub4dc\"><\/p>\n<p>\ubc84\ud2bc \ucee8\ud14c\uc774\ub108\uc758 \ubaa8\uc11c\ub9ac \ubd80\ubd84\uc5d0 \ub77c\uc6b4\ub4dc\ub97c \uc8fc\ub294 \uac83\uc785\ub2c8\ub2e4. \ube0c\ub79c\ub4dc\uc758 \ucf58\uc149\ud2b8\uc5d0 \ub530\ub77c \ub77c\uc6b4\ub4dc\uc758 \ud06c\uae30\ub97c \uc870\uc808\ud574\uc11c \uc801\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h3>6. \uadf8\ub9bc\uc790(Shadow)<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/shadow.png\" alt=\"\uadf8\ub9bc\uc790\"><\/p>\n<p>\uadf8\ub9bc\uc790\ub294 \ubc84\ud2bc\uc758 \uc5b4\ud3ec\ub358\uc2a4\ub97c \ub192\uc77c \uc218 \uc788\ub294 \uadf8\ub798\ud53d \uc694\uc18c\uc785\ub2c8\ub2e4. \uc8fc\ub85c \ucee8\ud14c\uc774\ub108 \ubc84\ud2bc\uc774\ub098 CTA \ubc84\ud2bc\uc5d0 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<hr>\n<h2>\ubc84\ud2bc\uc758 \uc720\ud615<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/btn-types.png\" alt=\"\ubc84\ud2bc \uc720\ud615\"><\/p>\n<ul>\n<li><strong>\uc194\ub9ac\ub4dc \ubc84\ud2bc(Solid Button)<\/strong> : \uac00\uc7a5 \uc77c\ubc18\uc801\uc778 \ud615\ud0dc. \uc9c1\uc0ac\uac01\ud615 \ucee8\ud14c\uc774\ub108\uc5d0 \uc561\uc158\uc744 \uc758\ubbf8\ud558\ub294 \uc0c9\uc774 \ucc44\uc6cc\uc838 \uc788\uace0 \ub808\uc774\ube14\uc740 \ud770\uc0c9<\/li>\n<li><strong>\uace0\uc2a4\ud2b8 \ubc84\ud2bc(Ghost Button)<\/strong> : \ud770\uc0c9 \ubc30\uacbd\uc5d0 \ub808\uc774\ube14\uacfc \uc544\uc6c3\ub77c\uc778\uc73c\ub85c \ub41c \ubc84\ud2bc. \ucee8\ud14c\uc774\ub108 \ubc84\ud2bc\ubcf4\ub2e4 \uc911\uc694\ub3c4\uac00 \ub5a8\uc5b4\uc9c0\ub294 \uc561\uc158\uc5d0 \uc0ac\uc6a9<\/li>\n<li><strong>\uc544\uc6c3\ub77c\uc778 \ubc84\ud2bc(Outline Button)<\/strong> : \ud14d\uc2a4\ud2b8 \ub808\uc774\ube14\uc744 \uc544\uc6c3\ub77c\uc778\uc73c\ub85c \uac10\uc2fc \uad6c\uc870. \uace0\uc2a4\ud2b8 \ubc84\ud2bc\ubcf4\ub2e4 \uc911\uc694\ub3c4\uac00 \ub5a8\uc5b4\uc9c4 \ubc84\ud2bc\uc5d0 \uc0ac\uc6a9<\/li>\n<li><strong>\ubc1d\uc740 \uc194\ub9ac\ub4dc \ubc84\ud2bc(Light Solid Button)<\/strong> : \ubc1d\uc740 \ud68c\uc0c9 \ubc30\uacbd\uc5d0 \uc561\uc158 \uc0c9 \ud14d\uc2a4\ud2b8<\/li>\n<li><strong>\ud14d\uc2a4\ud2b8 \ubc84\ud2bc(Text Button)<\/strong> : \ucee8\ud14c\uc774\ub108\ub098 \uc544\uc6c3\ub77c\uc778 \uc5c6\uc774 \ud14d\uc2a4\ud2b8 \ub808\uc774\ube14\ub9cc \uc788\ub294 \ubc84\ud2bc<\/li>\n<li><strong>\uc544\uc774\ucf58 \ubc84\ud2bc(Icon Button)<\/strong> : \ub808\uc774\ube14 \uc5c6\uc774 \uc544\uc774\ucf58\ub9cc \uc0ac\uc6a9\ub41c \ubc84\ud2bc. \ud234\ubc14\uc640 \ub0b4\ube44\uac8c\uc774\uc158 \ubc14\uc5d0\uc11c \uc0ac\uc6a9<\/li>\n<\/ul>\n<h3>\ud30c\uad34\uc801\uc778 \ubc84\ud2bc(Destructive Button)<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/destructive.png\" alt=\"\ud30c\uad34\uc801\uc778 \ubc84\ud2bc\"><\/p>\n<p>\uc601\uad6c\uc801\uc73c\ub85c \ub370\uc774\ud130\ub97c \uc9c0\uc6b0\ub294 \uc791\uc5c5\uc5d0 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc624\ub958\ub97c \ub098\ud0c0\ub0b4\ub294 <strong>\ubd89\uc740\uc0c9<\/strong>\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc2e4\uc218\uc778\uc9c0 \ud55c\ubc88 \ub354 \uc0dd\uac01\ud560 \uc218 \uc788\uac8c \ud569\ub2c8\ub2e4.<\/p>\n<blockquote>\n<p><strong>Warning<\/strong>: \ub808\uc774\ube14\uc740 &lt;\ud655\uc778&gt;\uac19\uc774 \uc911\ub9bd\uc801\uc778 \ud45c\ud604\ubcf4\ub2e4\ub294 \uc0ac\uc6a9\uc790\uac00 \uc218\ud589\ud558\ub824\ub294 \uc791\uc5c5\uc778 &lt;\uc0ad\uc81c&gt; \ub610\ub294 &lt;\uc0ad\uc81c\ud558\uae30&gt;\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n<hr>\n<h2>\ubc84\ud2bc\uc758 \uc2dc\uac01\uc801 \uacc4\uce35\uad6c\uc870(Hierarchy)<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/hierarchy.png\" alt=\"\ubc84\ud2bc \uacc4\uce35\uad6c\uc870\"><\/p>\n<p>\ubc84\ud2bc\uc740 \ud06c\uac8c 3\uac00\uc9c0 \uc815\ub3c4\uc758 \uc2dc\uac01\uc801 \uacc4\uce35\uc744 \uac00\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h3>\uae30\ubcf8 \ubc84\ud2bc(Primary Button)<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/primary-1.jpg\" alt=\"\uae30\ubcf8 \ubc84\ud2bc\"><\/p>\n<p>\uac00\uc7a5 \uc911\uc694\ud55c \uc561\uc158\uc5d0 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. <strong>\uc194\ub9ac\ub4dc \ubc84\ud2bc<\/strong>\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \ube0c\ub79c\ub4dc \uc0c9\uc0c1\uc744 \uc0ac\uc6a9\ud558\uc5ec \uac00\uc7a5 \ub208\uc5d0 \ub744\uac8c \ub514\uc790\uc778\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<blockquote>\n<p><strong>Info<\/strong>: \uae30\ubcf8 \ubc84\ud2bc\uc740 \ud654\uba74\ub2f9 \ud558\ub098\ub9cc \uc788\ub294 \uac8c \uc88b\uc2b5\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n<h3>\ubcf4\uc870 \ubc84\ud2bc(Secondary Button)<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/secondary-1.jpg\" alt=\"\ubcf4\uc870 \ubc84\ud2bc\"><\/p>\n<p>\ubc84\ud2bc \uc911 \uac00\uc7a5 \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub294 \ubc84\ud2bc\uc785\ub2c8\ub2e4. Default \ubc84\ud2bc\uc774\ub77c\uace0\ub3c4 \ud569\ub2c8\ub2e4. \uace0\uc2a4\ud2b8 \ubc84\ud2bc\uc774\ub098 \uc544\uc6c3\ub77c\uc778 \ubc84\ud2bc \ub610\ub294 \ubc1d\uc740 \uc194\ub9ac\ub4dc \ubc84\ud2bc\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<h3>\ubd80\uac00 \ubc84\ud2bc(Tertiary Button)<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/tertiary-1.jpg\" alt=\"\ubd80\uac00 \ubc84\ud2bc\"><\/p>\n<p>\ud55c \ud654\uba74\uc5d0 \ub9ce\uc740 \ubc84\ud2bc\uc744 \ubc30\uce58\ud574\uc57c \ud560 \uacbd\uc6b0 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. <strong>\ud14d\uc2a4\ud2b8 \ubc84\ud2bc<\/strong>\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<hr>\n<h2>\ubc84\ud2bc \ub514\uc790\uc778 \uc6d0\uce59<\/h2>\n<h3>\uae30\ubcf8 \ubc84\ud2bc\uc740 \ud55c \ud654\uba74\uc5d0 \ud558\ub098\ub9cc \uc788\uc5b4\uc57c \ud55c\ub2e4<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/one-primary.png\" alt=\"\ud55c \ud654\uba74\uc5d0 \ud558\ub098\uc758 \uae30\ubcf8 \ubc84\ud2bc\"><\/p>\n<p>\uae30\ubcf8 \ubc84\ud2bc\uc774 \uc5ec\ub7ec \uac1c \uc788\uc73c\uba74 \ucf58\ud150\uce20\uc758 \uc9d1\uc911\ub3c4\uac00 \ub5a8\uc5b4\uc9c0\uace0 \uc77d\uae30\ub97c \ubc29\ud574\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h3>\uc120\ud0dd \ucee8\ud2b8\ub864\uacfc \ubc84\ud2bc\uc758 \uc2dc\uac01\uc801 \uacc4\uce35 \uad6c\uc870\ub294 \uba85\ud655\ud574\uc57c \ud55c\ub2e4<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/select-vs-btn.png\" alt=\"\uc120\ud0dd \ucee8\ud2b8\ub864\uacfc \ubc84\ud2bc\"><\/p>\n<p>\ubc84\ud2bc\uc774 \uac19\uc774 \uc788\ub2e4\uba74 \ubc84\ud2bc\uc774 \uc2dc\uac01\uc801\uc73c\ub85c \ub354 \uac15\uc870\ub418\uc5b4\uc57c \ud569\ub2c8\ub2e4. \uae30\ub2a5\uc774 \ub2e4\ub978 \ucee8\ud2b8\ub864\uacfc \ubc84\ud2bc\uc758 \uc2dc\uac01\uc801\uc778 \uc911\uc694\ub3c4\ub294 \ub2ec\ub77c\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<h3>\uacbd\uace0\ucc3d(Alert)\uc5d0\uc11c \uae30\ubcf8 \ubc84\ud2bc\uc740 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294\ub2e4<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/alert.png\" alt=\"\uacbd\uace0\ucc3d \ubc84\ud2bc\"><\/p>\n<p>\uacbd\uace0\ucc3d\uc5d0\uc11c\ub294 \uae30\ubcf8 \ubc84\ud2bc(Primary Button)\ubcf4\ub2e4 <strong>\ud14d\uc2a4\ud2b8 \ubc84\ud2bc<\/strong>\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<hr>\n<h2>\ubc84\ud2bc\uc758 \uc0c1\ud0dc(State)<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/btn-state.png\" alt=\"\ubc84\ud2bc \uc0c1\ud0dc\"><\/p>\n<p>\ubc84\ud2bc\uc740 \ub2e4\uc591\ud55c \uc0c1\ud0dc\ub97c \uac00\uc9d1\ub2c8\ub2e4:<\/p>\n<ul>\n<li><strong>\uae30\ubcf8 \uc0c1\ud0dc(Default\/Normal)<\/strong> : \ud65c\uc131\ud654\ub418\uc5b4 \uc788\uace0 \uc0ac\uc6a9\uc790\uac00 \ud0ed\ud560 \uc218 \uc788\ub294 \uc0c1\ud0dc<\/li>\n<li><strong>\ud3ec\ucee4\uc2a4 \uc0c1\ud0dc(Focus)<\/strong> : \uc811\uadfc\uc131\uc744 \uc704\ud55c \uc0c1\ud0dc<\/li>\n<li><strong>\ud638\ubc84 \uc0c1\ud0dc(Hover)<\/strong> : \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac04 \uc0c1\ud0dc (\ub370\uc2a4\ud06c\ud1b1)<\/li>\n<li><strong>\ud65c\uc131 \uc0c1\ud0dc(Active\/Pressed)<\/strong> : \uc0ac\uc6a9\uc790\uac00 \ubc84\ud2bc\uc744 \ub204\ub974\uace0 \uc788\ub294 \uc0c1\ud0dc<\/li>\n<li><strong>\ub85c\ub529 \uc0c1\ud0dc(Loading\/Progress)<\/strong> : \uc791\uc5c5\uc774 \uc9c4\ud589 \uc911\uc778 \uc0c1\ud0dc<\/li>\n<li><strong>\ube44\ud65c\uc131 \uc0c1\ud0dc(Disabled)<\/strong> : \uc0ac\uc6a9\ud560 \uc218 \uc5c6\ub294 \uc0c1\ud0dc<\/li>\n<\/ul>\n<h3>\ube44\ud65c\uc131 \uc0c1\ud0dc(Disabled)<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/disabled.png\" alt=\"\ube44\ud65c\uc131 \ubc84\ud2bc\"><\/p>\n<p>\ube44\ud65c\uc131 \ubc84\ud2bc\uc740 \uc0ac\uc6a9\uc790\uac00 \ud604\uc7ac \ud0ed\ud560 \uc218 \uc5c6\uc74c\uc744 \uc2dc\uac01\uc801\uc73c\ub85c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4. \ud22c\uba85\ub3c4\ub97c \ub0ae\ucd94\uac70\ub098 \ud68c\uc0c9\uc73c\ub85c \ucc98\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n<hr>\n<h2>\ubc84\ud2bc\uc758 \ud06c\uae30<\/h2>\n<ul>\n<li><strong>\uc560\ud50c<\/strong> : 44\ud53d\uc140 \uae30\ubcf8, 30\ud53d\uc140\uacfc 50\ud53d\uc140 3\uac00\uc9c0 \ud06c\uae30<\/li>\n<li><strong>\uc548\ub4dc\ub85c\uc774\ub4dc<\/strong> : 36px \uae30\uc900, 36px, 48px, 56px(\ud50c\ub85c\ud305 \ubc84\ud2bc) 3\uac00\uc9c0 \ud06c\uae30<\/li>\n<li><strong>\ub9c8\uc774\ud06c\ub85c\uc18c\ud504\ud2b8<\/strong> : 30px, 40px, 50px \uad8c\uc7a5<\/li>\n<\/ul>\n<hr>\n<h2>\uc5c4\uc9c0 \uc874(Thumb Zone)\uacfc \ubc84\ud2bc\uc758 \uc704\uce58<\/h2>\n<p>\uc2a4\ub9c8\ud2b8\ud3f0\uc758 \uc804\uccb4 \uc0c1\ud638\uc791\uc6a9 \uc911 <strong>75%\ub97c \uc5c4\uc9c0\uc190\uac00\ub77d<\/strong>\uc774 \ub3c4\ub9e1\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ud654\uba74 \uc0c1\ub2e8\uc740 \uc5c4\uc9c0\uc190\uac00\ub77d\uc774 \ub2ff\uae30 \uc5b4\ub835\uace0 \ud558\ub2e8\uc740 \ud3b8\ud558\uac8c \ub2ff\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<blockquote>\n<p><strong>Info<\/strong>: \ud654\uba74\uc758 \uac00\uc7a5 \uc911\uc694\ud55c \ubc84\ud2bc\uc740 \uc5c4\uc9c0\uc190\uac00\ub77d\uc73c\ub85c \ud3b8\ud558\uac8c \ud130\uce58\ud560 \uc218 \uc788\ub294 \ud654\uba74\uc758 \ud558\ub2e8 \uc911\uc559\uc774 \uac00\uc7a5 \uc88b\uc2b5\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n<ul>\n<li>\uc911\uc694\ud55c \ubc84\ud2bc(\uae30\ubcf8 \ubc84\ud2bc, \uae0d\uc815\uc801\uc778 \ubc84\ud2bc)\uc740 \ud654\uba74 <strong>\ud558\ub2e8<\/strong>, <strong>\uc624\ub978\ucabd<\/strong>\uc5d0 \ubc30\uce58<\/li>\n<li>\ud30c\uad34\uc801\uc778\/\ubd80\uc815\uc801\uc778 \uc561\uc158 \ubc84\ud2bc\uc740 \uc5c4\uc9c0\uc190\uac00\ub77d\uc774 \ub2ff\uae30 \uc5b4\ub824\uc6b4 \ud654\uba74 <strong>\uc0c1\ub2e8<\/strong>\uc5d0 \ubc30\uce58<\/li>\n<\/ul>\n<hr>\n<h2>\ubc84\ud2bc \ub808\uc774\ube14<\/h2>\n<p>\ubc84\ud2bc\uc758 \ub808\uc774\ube14\uc740 <strong>\uba85\ud655\ud558\uace0 \uc608\uce21 \uac00\ub2a5<\/strong>\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<ul>\n<li>\ub3d9\uc791(action)\uacfc \uad00\ub828\uc774 \uc5c6\ub294 &quot;OK&quot;, &quot;\uc608&quot;, &quot;\uc544\ub2c8\uc624&quot; \uac19\uc740 \uc77c\ubc18\uc801\uc778 \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uba74 \uc548 \ub429\ub2c8\ub2e4.<\/li>\n<li><strong>&lt;\uba85\uc0ac&gt; + &lt;\ub3d9\uc0ac&gt;<\/strong> \ud615\uc2dd\uc744 \uc0ac\uc6a9\ud558\uc138\uc694. (\uc608: &quot;\uc0ac\uc9c4 \uc0ad\uc81c&quot;, &quot;\uc7a5\ubc14\uad6c\ub2c8 \ub2f4\uae30&quot;)<\/li>\n<li>\ubc84\ud2bc\uc5d0 \uc0ac\uc6a9\ud55c \uc0c9\uc744 \ucf58\ud150\uce20\uc5d0 \uc801\uc6a9\ud558\uba74 \uc0ac\uc6a9\uc790\ub294 \ud63c\ub780\uc2a4\ub7ec\uc6cc\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<blockquote>\n<p><strong>Warning<\/strong>: \ubc84\ud2bc\uc758 \uc0c9\uc740 \uc811\uadfc\uc131\uc744 \uace0\ub824\ud558\uc5ec \ub514\uc790\uc778\ud569\ub2c8\ub2e4. \uc0c9 \ub300\ube44\ub294 \ucd5c\uc18c 3.0, \ucd5c\ub300 4.5 \uc774\uc0c1\uc774\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>\ubaa8\ubc14\uc77c \ub514\uc790\uc778 &#8211; \ubc84\ud2bc \ubc84\ud2bc(Button)\uc740 \uc0ac\uc6a9\uc790\uac00 \ub370\uc774\ud130\ub97c \uc804\uc1a1\ud558\uac70\ub098 \uae30\ub2a5\uc744 \uc2e4\ud589\ud558\ub3c4\ub85d \ud558\ub294 \uba85\ub839 \ucee8\ud2b8\ub864(imperative control)\uc785\ub2c8\ub2e4. \ubc84\ud2bc\uc758 \uac00\uc7a5 \ud070 \ud2b9\uc9d5\uc740 \uc0ac\uc6a9\uc790\uac00 \ud130\uce58\ud588\uc744 \ub54c \uc989\uac01\uc801\uc73c\ub85c \uba85\ub839\uc744 \uc2e4\ud589\uc2dc\ud0a4\ub294 \uc810\uc785\ub2c8\ub2e4. \ubc84\ud2bc\uc758 \ud2b9\uc9d5 \ubc84\ud2bc\uc740 \uc5b4\ud3ec\ub358\uc2a4(Affordance)\uac00 \uc788\uc5b4\uc57c \ud55c\ub2e4 \ubc84\ud2bc\uc740 \ub2e4\ub978 \ucee8\ud2b8\ub864\uacfc \ub2ec\ub9ac \ub204\ub974\ub294 \ud589\uc704\ub97c \uc720\ubc1c\ud558\ub294 \ud2b9\uc9d5(\uc5b4\ud3ec\ub358\uc2a4)\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \ud14d\uc2a4\ud2b8 \ud544\ub4dc \uac19\uc740 \uc785\ub825 \ucee8\ud2b8\ub864\ub85c \uc815\ubcf4\ub97c \uc785\ub825\ud558\uace0 \uc120\ud0dd \ucee8\ud2b8\ub864\ub85c \ud56d\ubaa9\uc744 \uc120\ud0dd\ud55c \ud6c4 \ubc84\ud2bc\uc744 \ub204\ub974\uba74 &#8230; <a title=\"\ubaa8\ubc14\uc77c\ub514\uc790\uc778\ubc84\ud2bc\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=1078\" aria-label=\"\ubaa8\ubc14\uc77c\ub514\uc790\uc778\ubc84\ud2bc\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":[26],"tags":[],"class_list":["post-1078","post","type-post","status-publish","format-standard","hentry","category-html-css-ui"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/1078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1078"}],"version-history":[{"count":2,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/1078\/revisions"}],"predecessor-version":[{"id":2199,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/1078\/revisions\/2199"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}