{"id":261,"date":"2026-01-07T14:30:00","date_gmt":"2026-01-07T05:30:00","guid":{"rendered":"https:\/\/hed-g.me\/?p=261"},"modified":"2025-11-25T14:48:56","modified_gmt":"2025-11-25T05:48:56","slug":"%e1%84%89%e1%85%a5%e1%86%bc%e1%84%82%e1%85%b3%e1%86%bc%e1%84%80%e1%85%aa-ux%e1%84%8b%e1%85%b4-%e1%84%80%e1%85%b2%e1%86%ab%e1%84%92%e1%85%a7%e1%86%bc","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=261","title":{"rendered":"\u1109\u1165\u11bc\u1102\u1173\u11bc\u1100\u116a UX\u110b\u1174 \u1100\u1172\u11ab\u1112\u1167\u11bc"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\ud504\ub860\ud2b8\uc5d4\ub4dc\uc758 \uc131\ub2a5\uacfc UX\ub294 \uade0\ud615\uc758 \ubb38\uc81c<\/h2>\n\n\n\n<p>\uc88b\uc740 UX\ub294 \ub2e8\uc21c\ud788 \ud654\ub824\ud55c \uc778\ud130\ub799\uc158\uc774 \uc544\ub2c8\ub77c \uc0ac\uc6a9\uc790\uac00 \uc790\uc5f0\uc2a4\ub7fd\uace0<br>\uc989\uac01\uc801\uc73c\ub85c \ubc18\uc751\ud558\ub294 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uacbd\ud5d8\ud558\uac8c \ub9cc\ub4dc\ub294 \uac83,<\/p>\n\n\n\n<p>CSS \uc560\ub2c8\uba54\uc774\uc158\uc744 \uacfc\ub3c4\ud558\uac8c \uc0ac\uc6a9\ud558\uba74 CPU \uc0ac\uc6a9\ub7c9\uc774 \ud3ed\ub4f1\ud558\uace0<br>\ubd80\ub4dc\ub7ec\uc6b4 \uc804\ud658 \ud6a8\uacfc\ub97c \uc704\ud574 JS \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud558\uba74 <br>\uba54\uc778 \uc2a4\ub808\ub4dc\uac00 \ub9c9\ud790 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p>\ubc18\ub300\ub85c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc81c\uac70\ud560\uc218\ub85d \uae30\uacc4\uc801\uc778 UI\ub85c \uccb4\uac10\ud558\uac8c \ub41c\ub2e4.<br>\uacb0\uad6d, \uc131\ub2a5\uacfc UX\ub294 \uade0\ud615\uc758 \ubb38\uc81c\ub2e4.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\uc560\ub2c8\uba54\uc774\uc158\uc774 UX\uc5d0 \uc8fc\ub294 \uc2e4\uc81c \ud6a8\uacfc<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><p>\ub9e5\ub77d \uc720\uc9c0(Context)<\/p>\uc0c8 \ud398\uc774\uc9c0\ub85c \uc804\ud658\ub420 \ub54c \ubd80\ub4dc\ub7ec\uc6b4 Fade \ud6a8\uacfc\uac00 \uc788\ub2e4\uba74 \uc0ac\uc6a9\uc790\ub294 \u201c\ud654\uba74\uc774 \ubc14\ub00c\uc5c8\ub2e4\u201d\ub97c \uc778\uc9c0\ud558\uba74\uc11c\ub3c4 \uc9d1\uc911\uc774 \ub04a\uae30\uc9c0 \uc54a\ub294\ub2e4.<br><\/li>\n\n\n\n<li><p>\ud53c\ub4dc\ubc31(Feedback)<\/p>\ud074\ub9ad \uc2dc \ubc84\ud2bc\uc774 \uc0b4\uc9dd \ub20c\ub9ac\ub294 Motion\uc740 \uc0ac\uc6a9\uc790\uc758 \uc561\uc158\uc774 \u201c\uc778\uc2dd\ub418\uc5c8\ub2e4\u201d\ub294 \uc2dc\uac01\uc801 \uc2e0\ud638\ub2e4.<br><\/li>\n\n\n\n<li><p>\uc8fc\uc758 \uc720\ub3c4(Attention)<\/p>\uc911\uc694 \uc694\uc18c(\uc54c\ub9bc, \uc624\ub958, \uac15\uc870 \uc601\uc5ed)\ub97c \uc2dc\uc120\uc774 \uc790\uc5f0\uc2a4\ub7fd\uac8c \ub530\ub77c\uac00\uac8c \ub9cc\ub4e0\ub2e4.<br><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\ube0c\ub77c\uc6b0\uc800 \ub80c\ub354\ub9c1 \ud30c\uc774\ud504\ub77c\uc778\uc5d0 \ub2f5\uc774 \uc788\ub2e4<\/h2>\n\n\n\n<p>\ube0c\ub77c\uc6b0\uc800\ub294 \ud654\uba74\uc744 \ub2e4\uc74c \ub2e8\uacc4\uc5d0 \uac70\uccd0 \uadf8\ub9b0\ub2e4.<\/p>\n\n\n\n<p>JavaScript \u2192 Style\/Layout \u2192 Paint \u2192 Composite<\/p>\n\n\n\n<p>\uc774\ub54c, Layout\uacfc Paint \ub2e8\uacc4\uc5d0\uc11c CPU \uc5f0\uc0b0\uc774 \ubb34\uac70\uc6cc\uc9c4\ub2e4.<br>\ub530\ub77c\uc11c \uc560\ub2c8\uba54\uc774\uc158\uc740 Layout \/ Paint \ub97c \ud53c\ud558\uace0 <br>Composite \ub2e8\uacc4\ub9cc \uc0ac\uc6a9\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">GPU \uac00\uc18d \uc560\ub2c8\uba54\uc774\uc158<\/h3>\n\n\n\n<p>\uac00\uc7a5 \uac00\ubcbc\uc6b4 \uc560\ub2c8\uba54\uc774\uc158\uc740 transform\uacfc opacity\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>transform: translate(), scale(), rotate()<\/li>\n\n\n\n<li>opacity: 0 \u2192 1<\/li>\n<\/ul>\n\n\n\n<p>\uc774 \uc18d\uc131\ub4e4\uc740 GPU\uc5d0\uc11c \ud569\uc131(Compositing)\ub9cc \uc218\ud589\ud558\ubbc0\ub85c <br><strong>Layout \/ Paint\ub97c \uac74\ub108\ub6f4\ub2e4<\/strong>.<\/p>\n\n\n\n<p>\u2192 \ub808\uc774\uc544\uc6c3 \uc7ac\uacc4\uc0b0\uc774 \uc5c6\uace0, \ucd08\ub2f9 60\ud504\ub808\uc784\uc744 \uc720\uc9c0\ud558\uae30 \uc27d\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.card {\n  transition: transform 0.3s ease, opacity 0.3s ease;\n}\n.card:hover {\n  transform: translateY(-4px);\n  opacity: 0.9;\n}<\/code><\/pre>\n\n\n\n<p>\uc791\uc740 \ucc28\uc774\uc9c0\ub9cc, CPU\uac00 \uc544\ub2cc GPU\uac00 \ucc98\ub9ac\ud558\uac8c \ud558\uba74 \uc804\ub825 \uc18c\ubaa8\ub3c4 \uc904\uace0,<br>\ubaa8\ubc14\uc77c \uae30\uae30\uc5d0\uc11c \ubd80\ub4dc\ub7fd\uac8c \ub3d9\uc791\ud55c\ub2e4.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Repaint \/ Reflow\ub97c \uc720\ubc1c\ud558\ub294 \uc18d\uc131 \ud53c\ud558\uae30<\/strong><\/h3>\n\n\n\n<p>\ub2e4\uc74c \uc18d\uc131\ub4e4\uc740 Layout, Paint \ub2e8\uacc4\ub97c \ub2e4\uc2dc \ub3cc\ub824 <strong>\uc131\ub2a5\uc744 \uc800\ud558\uc2dc\ud0a8\ub2e4.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>top \/ left \/ width \/ height \u2192 \ub808\uc774\uc544\uc6c3 \uc804\uccb4 \uc7ac\uacc4\uc0b0(Reflow)<\/li>\n\n\n\n<li>box-shadow, borderRadius \u2192 \ud53d\uc140 \ub2e4\uc2dc \uadf8\ub9bc(Paint)<\/li>\n\n\n\n<li>filter, backdrop-filter \u2192 GPU \ucc98\ub9ac \uac00\ub2a5\ud558\uc9c0\ub9cc \ube44\uc6a9 \ub192\uc74c<\/li>\n<\/ul>\n\n\n\n<p>*Chrome DevTools \u2192 Performance \ud0ed\uc5d0\uc11c \u201cPaint flashing\u201d\uc744 \ucf1c\uba74 <br>\uc5b4\ub5a4 \uc694\uc18c\uac00 \uc790\uc8fc \ub2e4\uc2dc \uadf8\ub824\uc9c0\ub294\uc9c0 \uc2dc\uac01\ud654\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>requestAnimationFrame\uc73c\ub85c JS \uc560\ub2c8\uba54\uc774\uc158 \uc81c\uc5b4<\/strong><\/h3>\n\n\n\n<p>setInterval\uc740 \ube0c\ub77c\uc6b0\uc800 \ud504\ub808\uc784\uacfc \ub3d9\uae30\ud654\ub418\uc9c0 \uc54a\uc544 \ub04a\uae40\uc774 \ubc1c\uc0dd\ud55c\ub2e4.<\/p>\n\n\n\n<p>\ubc18\uba74 requestAnimationFrame\uc740 <strong>\ube0c\ub77c\uc6b0\uc800\uc758 \ub9ac\ud398\uc778\ud2b8 \uc8fc\uae30(\ubcf4\ud1b5 60Hz)<\/strong> \uc5d0 \ub9de\ucdb0 \ucf5c\ubc31\uc744 \ud638\ucd9c\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function fadeIn(el) {\n  let opacity = 0;\n  function tick() {\n    opacity += 0.05;\n    el.style.opacity = opacity;\n    if (opacity &lt; 1) requestAnimationFrame(tick);\n  }\n  requestAnimationFrame(tick);\n}<\/code><\/pre>\n\n\n\n<p>\u2192 GPU \uae30\ubc18 CSS \uc560\ub2c8\uba54\uc774\uc158\uacfc \ud568\uaed8 \uc4f0\uba74 <strong>\ubd80\ub4dc\ub7fd\uace0 \uc790\uc5f0\uc2a4\ub7ec\uc6b4 UX<\/strong>\ub97c \uad6c\ud604\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc560\ub2c8\uba54\uc774\uc158\uacfc \uc811\uadfc\uc131(A11y)<\/h2>\n\n\n\n<p>\uc2dc\uac01\uc801 \ud6a8\uacfc\uac00 \ud56d\uc0c1 \uae0d\uc815\uc801\uc778 \uac83\uc740 \uc544\ub2c8\uace0,<br>\uc77c\ubd80 \uc0ac\uc6a9\uc790(\ud2b9\ud788 \uc5b4\uc9c0\ub7fc\uc99d, \ubbfc\uac10\ud55c \uc2dc\uac01 \ubc18\uc751\uc744 \uac00\uc9c4 \uc774\ub4e4)\ub294 <br><strong>\ubaa8\uc158\uc5d0 \ubd88\ud3b8\ud568<\/strong>\uc744 \ub290\ub080\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (prefers-reduced-motion: reduce) {\n  * {\n    animation: none !important;\n    transition: none !important;\n  }\n}<\/code><\/pre>\n\n\n\n<p>\u2192 \uc2dc\uc2a4\ud15c \uc124\uc815\uc5d0\uc11c \u201c\uc560\ub2c8\uba54\uc774\uc158 \uc904\uc774\uae30\u201d\ub97c \ucf20 \uc0ac\uc6a9\uc790\ub294 <br>\uc790\ub3d9\uc73c\ub85c \uc815\uc801\uc778 UI\ub97c \uacbd\ud5d8\ud55c\ub2e4.<\/p>\n\n\n\n<p><strong>\uc88b\uc740 UX\ub780, \ubaa8\ub4e0 \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc801\uc808\ud55c \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\ub294 \uac83<\/strong>\uc774\ub2e4.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc560\ub2c8\uba54\uc774\uc158 \ucd5c\uc801\ud654 \uc804\ub7b5<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>FPS \uc720\uc9c0 \u2192 transform \/ opacity \uc911\uc2ec \uc560\ub2c8\uba54\uc774\uc158<\/li>\n\n\n\n<li>CPU \ubd80\ud558 \uac10\uc18c \u2192 requestAnimationFrame, GPU \ub808\uc774\uc5b4 \ud65c\uc6a9<\/li>\n\n\n\n<li>UX \ud53c\ub85c\ub3c4 \uc644\ud654 \u2192 150~300ms \uc774\ub0b4 \uc804\ud658, Easing \uc790\uc5f0\uc2a4\ub7fd\uac8c.<\/li>\n\n\n\n<li>\uc811\uadfc\uc131 \ubcf4\uc7a5 \u2192 prefers-reduced-motion \uc9c0\uc6d0<\/li>\n\n\n\n<li>\ub9ac\uc18c\uc2a4 \uad00\ub9ac \u2192 \ube44\uac00\uc2dc \uc694 \uc560\ub2c8\uba54\uc774\uc158 \uc77c\uc2dc\uc815\uc9c0(IntersectionObserver)<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud504\ub860\ud2b8\uc5d4\ub4dc\uc758 \uc131\ub2a5\uacfc UX\ub294 \uade0\ud615\uc758 \ubb38\uc81c \uc88b\uc740 UX\ub294 \ub2e8\uc21c\ud788 \ud654\ub824\ud55c \uc778\ud130\ub799\uc158\uc774 \uc544\ub2c8\ub77c \uc0ac\uc6a9\uc790\uac00 \uc790\uc5f0\uc2a4\ub7fd\uace0\uc989\uac01\uc801\uc73c\ub85c \ubc18\uc751\ud558\ub294 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uacbd\ud5d8\ud558\uac8c \ub9cc\ub4dc\ub294 \uac83, CSS \uc560\ub2c8\uba54\uc774\uc158\uc744 \uacfc\ub3c4\ud558\uac8c \uc0ac\uc6a9\ud558\uba74 CPU \uc0ac\uc6a9\ub7c9\uc774 \ud3ed\ub4f1\ud558\uace0\ubd80\ub4dc\ub7ec\uc6b4 \uc804\ud658 \ud6a8\uacfc\ub97c \uc704\ud574 JS \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud558\uba74 \uba54\uc778 \uc2a4\ub808\ub4dc\uac00 \ub9c9\ud790 \uc218 \uc788\ub2e4. \ubc18\ub300\ub85c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc81c\uac70\ud560\uc218\ub85d \uae30\uacc4\uc801\uc778 UI\ub85c \uccb4\uac10\ud558\uac8c \ub41c\ub2e4.\uacb0\uad6d, \uc131\ub2a5\uacfc UX\ub294 \uade0\ud615\uc758 \ubb38\uc81c\ub2e4. &nbsp; \uc560\ub2c8\uba54\uc774\uc158\uc774 UX\uc5d0 \uc8fc\ub294 \uc2e4\uc81c \ud6a8\uacfc \ube0c\ub77c\uc6b0\uc800 \ub80c\ub354\ub9c1 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[53],"tags":[190,188,189],"class_list":["post-261","post","type-post","status-publish","format-standard","hentry","category-uiux","tag-a11y","tag-ux","tag-189"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=261"}],"version-history":[{"count":1,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/261\/revisions"}],"predecessor-version":[{"id":262,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/261\/revisions\/262"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}