{"id":11899,"date":"2026-06-26T23:39:52","date_gmt":"2026-06-26T23:39:52","guid":{"rendered":"https:\/\/h9988.cbox.kr\/?p=11899"},"modified":"2026-06-27T10:31:34","modified_gmt":"2026-06-27T10:31:34","slug":"%eb%ac%b4%ec%9e%ac%ec%b9%a0%ec%8b%9c","status":"publish","type":"post","link":"https:\/\/h9988.cbox.kr\/?p=11899","title":{"rendered":"[\ubb34\uc7ac\uce60\uc2dc]"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\ubb34\uc7ac\uce60\uc2dc: \uc7ac\uc0b0 \uc5c6\uc774 \ubca0\ud478\ub294 \ud48d\uc694\uc758 \uc5f0\uae08\uc220<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n    <script src=\"https:\/\/cdn.plot.ly\/plotly-2.27.0.min.js\"><\/script>\n    <!-- \n    \ud314\ub808\ud2b8 \uc120\ud0dd: \"Energetic & Playful\"\n    - \uc8fc\uc0c9\uc0c1: #4F46E5 (\uc778\ub514\uace0)\n    - \ubcf4\uc870\uc0c9\uc0c1: #06B6D4 (\uc2dc\uc548)\n    - \uac15\uc870\uc0c9\uc0c1: #F59E0B (\uc570\ubc84)\n    - \ubc30\uacbd\uc0c9: #F8FAFC (\uc2ac\ub808\uc774\ud2b8 50)\n    - \ud14d\uc2a4\ud2b8: #1E293B (\uc2ac\ub808\uc774\ud2b8 800)\n    -->\n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Pretendard:wght@300;400;600;700&display=swap');\n        body { font-family: 'Pretendard', sans-serif; background-color: #F8FAFC; color: #1E293B; }\n        .chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 350px; max-height: 400px; }\n        .gradient-text { background: linear-gradient(90deg, #4F46E5, #06B6D4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\n    <\/style>\n\n\n\n    <!-- \n    \uae30\uc220\uc801 \ud655\uc778:\n    - SVG \uc0ac\uc6a9 \uc548 \ud568.\n    - Mermaid JS \uc0ac\uc6a9 \uc548 \ud568.\n    - \ubaa8\ub4e0 \ucc28\ud2b8\ub294 Canvas \ub80c\ub354\ub9c1 \uc0ac\uc6a9.\n    - 16\uc790 \uc774\uc0c1\uc758 \ub77c\ubca8\uc740 \ubc30\uc5f4\ub85c \ub798\ud551 \ucc98\ub9ac\ud568.\n    - \ubaa8\ub4e0 Chart.js \uc778\uc2a4\ud134\uc2a4\uc5d0 \ud234\ud301 \ucf5c\ubc31 \uc124\uc815 \uc801\uc6a9.\n    -->\n\n    <!--\n    \ub0b4\ub7ec\ud2f0\ube0c \uacc4\ud68d:\n    1. \ub3c4\uc785\ubd80: \"\ub9c8\uc74c\uc758 \ube48\uace4\" - \uad6c\ub3c4\uc790\uc640 \ubd80\ucc98\ub2d8\uc758 \ub300\ud654\ub97c \ud1b5\ud55c \uc8fc\uc81c \uc124\uc815.\n    2. \ub370\uc774\ud130 \uac1c\uc694: \"\ubca0\ud482\uc758 7\uac00\uc9c0 \ucc28\uc6d0\" - \uce74\ud14c\uace0\ub9ac\ubcc4 \ud575\uc2ec \uc9c0\ud45c \uc81c\uc2dc.\n    3. \ubd84\uc11d: \"\ub0b4\uc801 \ub178\ub825\uacfc \uc678\uc801 \uc601\ud5a5\ub825\" - \ucc28\ud2b8\ub97c \ud1b5\ud55c \uac01 \ud589\uc704\uc758 \uac00\uce58 \ube44\uad50.\n    4. \ud504\ub85c\uc138\uc2a4: \"\uc2b5\uad00\uc5d0\uc11c \uc6b4\uba85\uc73c\ub85c\" - \uc2e4\ucc9c\uc774 \ud589\uc6b4\uc73c\ub85c \ubcc0\ud558\ub294 \uacfc\uc815\uc744 HTML \uad6c\uc870\ub85c \uc2dc\uac01\ud654.\n    -->\n\n    <!--\n    \uc2dc\uac01\ud654 \uc120\ud0dd \uc774\uc720:\n    - 7\uac00\uc9c0 \uc9c0\ud45c -> \ubaa9\ud45c: \uc815\ubcf4 \uc804\ub2ec -> \uc120\ud0dd: \ub300\ud615 \uc2a4\ud0ef \uce74\ub4dc (HTML\/Tailwind).\n    - \ub2e4\uba74\uc801 \uac00\uce58 -> \ubaa9\ud45c: \uad00\uacc4 \ud30c\uc545 -> \uc120\ud0dd: \ub808\uc774\ub354 \ucc28\ud2b8 (Chart.js) -> \uc131\uaca9\uc758 \uade0\ud615\uc744 \ubcf4\uc5ec\uc8fc\uae30\uc5d0 \ucd5c\uc801.\n    - \ub178\ub825 \ub300 \uc601\ud5a5\ub825 -> \ubaa9\ud45c: \ube44\uad50 -> \uc120\ud0dd: \uc2a4\ud0dd \ubc14 \ucc28\ud2b8 (Chart.js) -> \uad6c\uc131 \uc694\uc18c \ubd84\ud574\uc5d0 \uc720\ub9ac.\n    -->\n\n    <nav class=\"sticky top-0 bg-white\/80 backdrop-blur-md shadow-sm z-50 py-4 px-6\">\n        <div class=\"max-w-7xl mx-auto flex justify-between items-center\">\n            <span class=\"font-bold text-xl gradient-text\">\ubb34\uc7ac\uce60\uc2dc (\u7121\u8ca1\u4e03\u65bd)<\/span>\n            <div class=\"hidden md:flex space-x-6 text-sm font-medium\">\n                <a href=\"#intro\" class=\"hover:text-indigo-600 transition\">\ub3c4\uc785<\/a>\n                <a href=\"#dimensions\" class=\"hover:text-indigo-600 transition\">7\uac00\uc9c0 \ucc28\uc6d0<\/a>\n                <a href=\"#analysis\" class=\"hover:text-indigo-600 transition\">\ub370\uc774\ud130 \ubd84\uc11d<\/a>\n                <a href=\"#habit\" class=\"hover:text-indigo-600 transition\">\uc2e4\ucc9c \ud504\ub85c\uc138\uc2a4<\/a>\n            <\/div>\n        <\/div>\n    <\/nav>\n\n    <header id=\"intro\" class=\"pt-20 pb-12 px-6\">\n        <div class=\"max-w-4xl mx-auto text-center\">\n            <h1 class=\"text-4xl md:text-6xl font-extrabold mb-6 tracking-tight\">\uc7ac\uc0b0 \uc5c6\uc774 <span class=\"text-indigo-600\">\ubca0\ud478\ub294<\/span> \uc5f0\uae08\uc220<\/h1>\n            <p class=\"text-lg text-slate-600 leading-relaxed mb-4\">\n                &#8220;\uc800\ub294 \uc544\ubb34\uac83\ub3c4 \uac00\uc9c4 \uac8c \uc5c6\ub294 \ube48\ud138\ud130\ub9ac\uc778\ub370 \ubb34\uc5c7\uc744 \uc900\ub2e8 \ub9d0\uc785\ub2c8\uae4c?&#8221; <br>\n                \uc11d\uac00\ubaa8\ub2c8 \ubd80\ucc98\ub2d8\uc740 \ub2f5\ud558\uc168\uc2b5\ub2c8\ub2e4. \uc7ac\uc0b0\uc774 \uc5c6\ub354\ub77c\ub3c4 \ub204\uad6c\ub098 \ubca0\ud480 \uc218 \uc788\ub294 \uc77c\uacf1 \uac00\uc9c0\uac00 \uc788\ub2e4\uace0.\n            <\/p>\n            <p class=\"text-slate-500\">\uc9c4\uc815\ud55c \ud48d\uc694\ub294 \ubb3c\uc9c8\uc801 \uc790\ubcf8\uc774 \uc544\ub2c8\ub77c \uc6b0\ub9ac\uc758 \uc874\uc7ac, \uc5b8\uc5b4, \uadf8\ub9ac\uace0 \uc815\uc2e0\uc5d0\uc11c \uc2dc\uc791\ub429\ub2c8\ub2e4.<\/p>\n        <\/div>\n    <\/header>\n\n    <main class=\"max-w-7xl mx-auto px-6 pb-24\">\n        \n        <section id=\"dimensions\" class=\"mb-20\">\n            <div class=\"mb-10 text-center\">\n                <h2 class=\"text-3xl font-bold mb-4\">\uc874\uc7ac\uc758 7\uac00\uc9c0 \ucc28\uc6d0<\/h2>\n                <p class=\"text-slate-500 max-w-2xl mx-auto\">\uc774 7\uac00\uc9c0 \ud589\uc704\ub294 \uc790\ubcf8\uc774 \uc804\ud600 \ub4e4\uc9c0 \uc54a\uc9c0\ub9cc, \ubb34\ud55c\ud55c \uc0ac\ud68c\uc801\u00b7\uc601\uc801 \uac00\uce58\ub97c \ucc3d\ucd9c\ud569\ub2c8\ub2e4.<\/p>\n            <\/div>\n            \n            <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\n                <div class=\"bg-white p-6 rounded-2xl shadow-md border border-slate-100 flex flex-col items-center text-center transition hover:-translate-y-1\">\n                    <div class=\"w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 font-bold mb-4\">01<\/div>\n                    <h3 class=\"font-bold text-lg mb-2\">\ud654\uc548\uc2dc (\u548c\u9854\u65bd)<\/h3>\n                    <p class=\"text-xs text-slate-500 italic mb-3\">\ubbf8\uc18c\uc758 \ub098\ub214<\/p>\n                    <p class=\"text-sm text-slate-600\">\ubc1d\uace0 \ubd80\ub4dc\ub7ec\uc6b4 \ud45c\uc815\uc73c\ub85c \ud0c0\uc778\uc758 \ub9c8\uc74c\uc744 \ub179\uc774\ub294 \uc5bc\uad74\uc758 \ubcf4\uc2dc\uc785\ub2c8\ub2e4.<\/p>\n                <\/div>\n                <div class=\"bg-white p-6 rounded-2xl shadow-md border border-slate-100 flex flex-col items-center text-center transition hover:-translate-y-1\">\n                    <div class=\"w-12 h-12 bg-cyan-100 rounded-full flex items-center justify-center text-cyan-600 font-bold mb-4\">02<\/div>\n                    <h3 class=\"font-bold text-lg mb-2\">\uc5b8\uc2dc (\u8a00\u65bd)<\/h3>\n                    <p class=\"text-xs text-slate-500 italic mb-3\">\ub9d0\uc758 \ub098\ub214<\/p>\n                    <p class=\"text-sm text-slate-600\">\uce6d\ucc2c, \uc704\ub85c, \uaca9\ub824\uc758 \ub530\ub73b\ud55c \ub9d0\uc744 \ud1b5\ud574 \uc804\ud558\ub294 \ub9d0\uc758 \ubcf4\uc2dc\uc785\ub2c8\ub2e4.<\/p>\n                <\/div>\n                <div class=\"bg-white p-6 rounded-2xl shadow-md border border-slate-100 flex flex-col items-center text-center transition hover:-translate-y-1\">\n                    <div class=\"w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center text-amber-600 font-bold mb-4\">03<\/div>\n                    <h3 class=\"font-bold text-lg mb-2\">\uc2ec\uc2dc (\u5fc3\u65bd)<\/h3>\n                    <p class=\"text-xs text-slate-500 italic mb-3\">\ub9c8\uc74c\uc758 \ub098\ub214<\/p>\n                    <p class=\"text-sm text-slate-600\">\uc9c4\uc2ec \uc5b4\ub9b0 \ub530\ub73b\ud55c \ub9c8\uc74c\uc73c\ub85c \uc0c1\ub300\uc758 \uc601\ud63c\uc744 \uc548\uc544\uc8fc\ub294 \ubcf4\uc2dc\uc785\ub2c8\ub2e4.<\/p>\n                <\/div>\n                <div class=\"bg-white p-6 rounded-2xl shadow-md border border-slate-100 flex flex-col items-center text-center transition hover:-translate-y-1\">\n                    <div class=\"w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 font-bold mb-4\">04<\/div>\n                    <h3 class=\"font-bold text-lg mb-2\">\uc548\uc2dc (\u773c\u65bd)<\/h3>\n                    <p class=\"text-xs text-slate-500 italic mb-3\">\ub208\ube5b\uc758 \ub098\ub214<\/p>\n                    <p class=\"text-sm text-slate-600\">\ud638\uc758\ub97c \ub2f4\uc740 \ubd80\ub4dc\ub7ec\uc6b4 \ub208\uae38\ub85c \uc0ac\ub78c\uc744 \ub300\ud558\ub294 \ub208\uc758 \ubcf4\uc2dc\uc785\ub2c8\ub2e4.<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 mt-6\">\n                <div class=\"bg-white p-6 rounded-2xl shadow-md border border-slate-100 flex flex-col items-center text-center transition hover:-translate-y-1\">\n                    <div class=\"w-12 h-12 bg-cyan-100 rounded-full flex items-center justify-center text-cyan-600 font-bold mb-4\">05<\/div>\n                    <h3 class=\"font-bold text-lg mb-2\">\uc2e0\uc2dc (\u8eab\u65bd)<\/h3>\n                    <p class=\"text-xs text-slate-500 italic mb-3\">\ubab8\uc758 \ub098\ub214<\/p>\n                    <p class=\"text-sm text-slate-600\">\ub0a8\uc758 \uc9d0\uc744 \ub4e4\uc5b4\uc8fc\uac70\ub098 \ubab8\uc18c \uc77c\uc744 \ub3d5\ub294 \ud589\ub3d9\uc758 \ubcf4\uc2dc\uc785\ub2c8\ub2e4.<\/p>\n                <\/div>\n                <div class=\"bg-white p-6 rounded-2xl shadow-md border border-slate-100 flex flex-col items-center text-center transition hover:-translate-y-1\">\n                    <div class=\"w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center text-amber-600 font-bold mb-4\">06<\/div>\n                    <h3 class=\"font-bold text-lg mb-2\">\uc88c\uc2dc (\u5ea7\u65bd)<\/h3>\n                    <p class=\"text-xs text-slate-500 italic mb-3\">\uc790\ub9ac\uc758 \ub098\ub214<\/p>\n                    <p class=\"text-sm text-slate-600\">\ub54c\uc640 \uc7a5\uc18c\uc5d0 \ub9de\uac8c \uc790\ub9ac\ub97c \uc591\ubcf4\ud558\uace0 \ubc30\ub824\ud558\ub294 \uacf5\uac04\uc758 \ubcf4\uc2dc\uc785\ub2c8\ub2e4.<\/p>\n                <\/div>\n                <div class=\"bg-white p-6 rounded-2xl shadow-md border border-slate-100 flex flex-col items-center text-center transition hover:-translate-y-1\">\n                    <div class=\"w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 font-bold mb-4\">07<\/div>\n                    <h3 class=\"font-bold text-lg mb-2\">\ucc30\uc2dc (\u5bdf\u65bd)<\/h3>\n                    <p class=\"text-xs text-slate-500 italic mb-3\">\ucc30\ub098\uc758 \ub098\ub214<\/p>\n                    <p class=\"text-sm text-slate-600\">\ubb3b\uc9c0 \uc54a\uc544\ub3c4 \uc0c1\ub300\uc758 \ub9c8\uc74c\uc744 \ud5e4\uc544\ub824 \ubbf8\ub9ac \ub3c4\uc640\uc8fc\ub294 \ud1b5\ucc30\uc758 \ubcf4\uc2dc\uc785\ub2c8\ub2e4.<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"analysis\" class=\"mb-20 grid grid-cols-1 md:grid-cols-2 gap-12\">\n            <div class=\"bg-white p-8 rounded-3xl shadow-xl\">\n                <h3 class=\"text-2xl font-bold mb-2\">\ubca0\ud482\uc758 \uade0\ud615 \ud504\ub85c\ud544<\/h3>\n                <p class=\"text-slate-500 mb-6 text-sm\">\uc2e0\uccb4, \uc5b8\uc5b4, \uc2dc\uac01, \uac10\uc815, \ud1b5\ucc30 \ub4f1 \uc778\uac04\uc758 5\ub300 \uc8fc\uc694 \ub2a5\ub825\uc5d0 \uac78\uce5c \ubca0\ud482\uc758 \uc870\ud654\ub97c \uc2dc\uac01\ud654\ud569\ub2c8\ub2e4.<\/p>\n                <div class=\"chart-container\">\n                    <canvas id=\"radarChart\"><\/canvas>\n                <\/div>\n                <div class=\"mt-6 text-sm text-slate-600 italic\">\n                    \ud575\uc2ec \uc694\uc57d: \ub300\ubd80\ubd84\uc758 \ubcf4\uc2dc\uac00 \ube44\ubb3c\uc9c8\uc801 \uad00\uacc4 \ub9fa\uae30\uc5d0 \uc9d1\uc911\ub418\uc5b4 \uc788\uc73c\uba70, \uc774\ub294 \uc6b0\ub9ac\uc758 &#8216;\uc874\uc7ac&#8217; \uc790\uccb4\uac00 \uac00\uc7a5 \ud070 \uc790\uc0b0\uc784\uc744 \uc2dc\uc0ac\ud569\ub2c8\ub2e4.\n                <\/div>\n            <\/div>\n\n            <div class=\"bg-white p-8 rounded-3xl shadow-xl\">\n                <h3 class=\"text-2xl font-bold mb-2\">\ub0b4\uc801 \ub178\ub825 vs \uc678\uc801 \uc601\ud5a5\ub825<\/h3>\n                <p class=\"text-slate-500 mb-6 text-sm\">\uac01 \ubcf4\uc2dc\ub97c \uc2e4\ud589\ud558\uae30 \uc704\ud574 \ud544\uc694\ud55c \ub0b4\uba74\uc758 \uc758\uc9c0\uc640 \uadf8\uc5d0 \ub530\ub978 \uad00\uacc4\uc758 \ubcc0\ud654(\uc601\ud5a5\ub825)\ub97c \ube44\uad50\ud569\ub2c8\ub2e4.<\/p>\n                <div class=\"chart-container\">\n                    <canvas id=\"stackedBarChart\"><\/canvas>\n                <\/div>\n                <div class=\"mt-6 text-sm text-slate-600 italic\">\n                    \ud575\uc2ec \uc694\uc57d: \uc0c1\ub300\uc758 \ub9c8\uc74c\uc744 \ud5e4\uc544\ub9ac\ub294 &#8216;\ucc30\uc2dc&#8217;\ub294 \uac00\uc7a5 \ub192\uc740 \uc778\uc9c0\uc801 \ub178\ub825\uc744 \uc694\ud558\uc9c0\ub9cc, \uad00\uacc4\uc5d0 \uac00\uc7a5 \uae4a\uc740 \uc601\ud5a5\uc744 \ubbf8\uce69\ub2c8\ub2e4.\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"habit\" class=\"mb-20\">\n            <div class=\"bg-indigo-900 rounded-[3rem] p-8 md:p-16 text-white relative overflow-hidden\">\n                <div class=\"relative z-10\">\n                    <h2 class=\"text-3xl md:text-4xl font-bold mb-8 text-center\">\ud589\ub3d9\uc5d0\uc11c \uc6b4\uba85\uc73c\ub85c<\/h2>\n                    <p class=\"text-indigo-200 text-center max-w-2xl mx-auto mb-16\">\ubd80\ucc98\ub2d8\uc740 \ubcc0\ud654\uac00 \uc774\ubca4\ud2b8\uac00 \uc544\ub2c8\ub77c \uc2dc\ud000\uc2a4(\uacfc\uc815)\ub77c\uace0 \uac00\ub974\uce58\uc168\uc2b5\ub2c8\ub2e4. \ub2e8\uc21c\ud55c \ub098\ub214\uc774 \uc5b4\ub5bb\uac8c &#8216;\ud589\uc6b4&#8217;\uc73c\ub85c \uc9c4\ud654\ud558\ub294\uc9c0 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n                    \n                    <div class=\"flex flex-col md:flex-row items-center justify-between space-y-12 md:space-y-0 md:space-x-4\">\n                        <div class=\"flex flex-col items-center text-center max-w-[200px]\">\n                            <div class=\"w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center text-2xl font-bold mb-4 shadow-lg border-4 border-indigo-400\">1<\/div>\n                            <h4 class=\"font-bold mb-2\">\uc2e4\ucc9c (Practice)<\/h4>\n                            <p class=\"text-xs text-indigo-300\">\ub9e4\uc77c 7\uac00\uc9c0 \uc911 \ud558\ub098\ub97c \uc758\uc2dd\uc801\uc73c\ub85c \uc120\ud0dd\ud558\uc5ec \ud589\ud569\ub2c8\ub2e4.<\/p>\n                        <\/div>\n                        <div class=\"hidden md:block flex-1 h-0.5 bg-indigo-700\"><\/div>\n                        <div class=\"flex flex-col items-center text-center max-w-[200px]\">\n                            <div class=\"w-16 h-16 bg-cyan-500 rounded-full flex items-center justify-center text-2xl font-bold mb-4 shadow-lg border-4 border-cyan-400\">2<\/div>\n                            <h4 class=\"font-bold mb-2\">\uc2b5\uad00 (Habit)<\/h4>\n                            <p class=\"text-xs text-cyan-300\">\ub098\ub214\uc774 \ub178\ub825 \uc5c6\uc774\ub3c4 \ub098\uc624\ub294 \uc815\uccb4\uc131\uc758 \uc77c\ubd80\uac00 \ub429\ub2c8\ub2e4.<\/p>\n                        <\/div>\n                        <div class=\"hidden md:block flex-1 h-0.5 bg-indigo-700\"><\/div>\n                        <div class=\"flex flex-col items-center text-center max-w-[200px]\">\n                            <div class=\"w-16 h-16 bg-amber-500 rounded-full flex items-center justify-center text-2xl font-bold mb-4 shadow-lg border-4 border-amber-400\">3<\/div>\n                            <h4 class=\"font-bold mb-2\">\ud589\uc6b4 (Fortune)<\/h4>\n                            <p class=\"text-xs text-amber-200\">\uc138\uc0c1\uc774 \ub2f9\uc2e0\uc758 \uc9c4\ub3d9\uc5d0 \ubc18\uc751\ud558\uc5ec &#8216;\uc6b4&#8217;\uc744 \uac00\uc838\ub2e4\uc90d\ub2c8\ub2e4.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section class=\"text-center max-w-3xl mx-auto\">\n            <h2 class=\"text-3xl font-bold mb-6\">\uc624\ub298\ubd80\ud130 \uc2dc\uc791\ud558\uc138\uc694<\/h2>\n            <p class=\"text-lg text-slate-600 mb-8 leading-relaxed\">\n                \ubca0\ud480\uae30 \uc704\ud574 \ud1b5\uc7a5 \uc794\uace0\ub97c \ud655\uc778\ud560 \ud544\uc694\ub294 \uc5c6\uc2b5\ub2c8\ub2e4. \uc624\ub298 \ub9cc\ub098\ub294 \ub204\uad70\uac00\uc5d0\uac8c \ubbf8\uc18c\ub97c \uac74\ub124\uac70\ub098, \uc9c4\uc2ec \uc5b4\ub9b0 \uaca9\ub824 \ud55c\ub9c8\ub514\ub97c \ub0a8\uaca8\ubcf4\uc138\uc694. \ub2f9\uc2e0\uc758 \uc0b6\uc5d0 \ud48d\uc694\uc758 \uc5f0\uae08\uc220\uc774 \uc2dc\uc791\ub420 \uac83\uc785\ub2c8\ub2e4.\n            <\/p>\n            <button class=\"bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-10 rounded-full shadow-lg transition transform hover:scale-105 active:scale-95\">\n                \uc2e4\ucc9c \uac00\uc774\ub4dc \ub2e4\uc6b4\ub85c\ub4dc\n            <\/button>\n        <\/section>\n\n    <\/main>\n\n    <footer class=\"bg-slate-900 text-slate-400 py-12 px-6\">\n        <div class=\"max-w-7xl mx-auto flex flex-col md:row justify-between items-center text-sm\">\n            <p>\u00a9 2024 \uc9c0\ud61c\uc758 \uc232. \ubd80\ucc98\ub2d8\uc758 \ubb34\uc7ac\uce60\uc2dc \uac00\ub974\uce68\uc5d0 \uc601\uac10\uc744 \ubc1b\uc558\uc2b5\ub2c8\ub2e4.<\/p>\n            <div class=\"mt-4 md:mt-0 space-x-6\">\n                <span>\ud314\ub808\ud2b8: Energetic &amp; Playful<\/span>\n                <span>\ub80c\ub354\ub9c1: Canvas API<\/span>\n            <\/div>\n        <\/div>\n    <\/footer>\n\n    <script>\n        const tooltipConfig = {\n            callbacks: {\n                title: function(tooltipItems) {\n                    const item = tooltipItems[0];\n                    let label = item.chart.data.labels[item.dataIndex];\n                    if (Array.isArray(label)) {\n                        return label.join(' ');\n                    } else {\n                        return label;\n                    }\n                }\n            }\n        };\n\n        const radarCtx = document.getElementById('radarChart').getContext('2d');\n        new Chart(radarCtx, {\n            type: 'radar',\n            data: {\n                labels: [\n                    '\uc5bc\uad74 \ud45c\uc815 (\ud654\uc548)',\n                    '\uc5b8\uc5b4\uc758 \ud488\uaca9 (\uc5b8)',\n                    ['\uae4a\uc740 \ub9c8\uc74c', '(\uc2ec\uc2dc)'],\n                    '\uc2dc\uac01\uc801 \ud638\uc758 (\uc548)',\n                    '\uc2e0\uccb4\uc801 \ub3c4\uc6c0 (\uc2e0)',\n                    '\uacf5\uac04 \ubc30\ub824 (\uc88c)',\n                    ['\ud1b5\ucc30\uc801', '\ud5e4\uc544\ub9bc (\ucc30)']\n                ],\n                datasets: [{\n                    label: '\uc0ac\ud68c\uc801 \uac00\uce58 \uc810\uc218',\n                    data: [90, 85, 95, 80, 70, 65, 100],\n                    backgroundColor: 'rgba(79, 70, 229, 0.2)',\n                    borderColor: '#4F46E5',\n                    pointBackgroundColor: '#4F46E5',\n                    borderWidth: 3\n                }]\n            },\n            options: {\n                maintainAspectRatio: false,\n                scales: {\n                    r: {\n                        beginAtZero: true,\n                        max: 100,\n                        ticks: { display: false }\n                    }\n                },\n                plugins: {\n                    legend: { display: false },\n                    tooltip: tooltipConfig\n                }\n            }\n        });\n\n        const stackedBarCtx = document.getElementById('stackedBarChart').getContext('2d');\n        new Chart(stackedBarCtx, {\n            type: 'bar',\n            data: {\n                labels: [\n                    ['\ud654\uc548\uc2dc', '(\ubbf8\uc18c)'],\n                    ['\uc5b8\uc2dc', '(\ub9d0\uc500)'],\n                    ['\uc2ec\uc2dc', '(\ub9c8\uc74c)'],\n                    ['\uc548\uc2dc', '(\ub208\ube5b)'],\n                    ['\uc2e0\uc2dc', '(\ud589\ub3d9)'],\n                    ['\uc88c\uc2dc', '(\uc591\ubcf4)'],\n                    ['\ucc30\uc2dc', '(\ud5e4\uc544\ub9bc)']\n                ],\n                datasets: [\n                    {\n                        label: '\ub0b4\uc801 \ub178\ub825\ub3c4',\n                        data: [40, 50, 70, 30, 80, 45, 95],\n                        backgroundColor: '#4F46E5'\n                    },\n                    {\n                        label: '\uc678\uc801 \uc601\ud5a5\ub825',\n                        data: [80, 85, 90, 75, 60, 65, 100],\n                        backgroundColor: '#06B6D4'\n                    }\n                ]\n            },\n            options: {\n                maintainAspectRatio: false,\n                indexAxis: 'y',\n                scales: {\n                    x: {\n                        stacked: true,\n                        grid: { display: false }\n                    },\n                    y: {\n                        stacked: true,\n                        grid: { display: false }\n                    }\n                },\n                plugins: {\n                    legend: { position: 'bottom' },\n                    tooltip: tooltipConfig\n                }\n            }\n        });\n    <\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-284cb36c\"><h2 class=\"uagb-heading-text\"><strong>\ud83c\udf39\uc7ac\uc0b0\uc774 \uc5c6\uc5b4\ub3c4 \uc904 \uc218 \uc788\ub294 7\uac00\uc9c0\ud83c\udf39<\/strong><\/h2><\/div>\n\n\n\n<p class=\"has-black-color has-text-color has-background has-link-color wp-elements-5128377fc241f3e99f533e06fe6b56d2 wp-block-paragraph\" style=\"background-color:#f0f1f2\"><strong>\uc5b4\ub5a4 \uc774\uac00 \uc11d\uac00\ubaa8\ub2c8\ub97c \ucc3e\uc544\uac00 \ud638\uc18c\ub97c \ud558\uc600\ub2e4.<\/strong><\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-background has-link-color wp-elements-d187103450b3d947d6f48867e7ddee04 wp-block-paragraph\" style=\"background-color:#f1f2f2\"><strong>&#8220;\uc800\ub294 \ud558\ub294 \uc77c\ub9c8\ub2e4 \uc81c\ub300\ub85c \ub418\ub294 \uc77c\uc774 \uc5c6\uc73c\ub2c8 \uc774 \ubb34\uc2a8 \uc774\uc720\uc785\ub2c8\uae4c?&#8221;<\/strong><\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-background has-link-color wp-elements-804310454414beb06625ad23d7d40cb7 wp-block-paragraph\" style=\"background-color:#f0f4f8\"><strong>&#8220;\uadf8\uac83\uc740 \ub124\uac00 \ub0a8\uc5d0\uac8c \ubca0\ud480\uc9c0 \uc54a\uc558\uae30 \ub54c\ubb38\uc774\ub2c8\ub77c&#8221;<\/strong><\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-background has-link-color wp-elements-8e6b657e1b47477a2ee4d312e8c19ea4 wp-block-paragraph\" style=\"background-color:#d9e4ec\"><strong>&#8220;\uc800\ub294 \uc544\ubb34 \uac83\ub3c4 \uac00\uc9c4 \uac8c \uc5c6\ub294 \ube48 \ud138\ud138\uc774\uc785\ub2c8\ub2e4.<\/strong><\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-background has-link-color wp-elements-a803bb1ded54e4800f1b5100749a8f4d wp-block-paragraph\" style=\"background-color:#d9e4ec\"><strong>&nbsp;\ub0a8\uc5d0\uac8c \uc904 \uac83\uc774 \uc788\uc5b4\uc57c \uc8fc\uc9c0 \ubb58 \uc900\ub2e8 \ub9d0\uc785\ub2c8\uae4c?&#8221;<\/strong><\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-background has-link-color wp-elements-1dd4322de8de68a545d20fc583499b6e wp-block-paragraph\" style=\"background-color:#d9e4ec\"><strong>&#8220;\uadf8\ub807\uc9c0 \uc54a\ub290\ub2c8\ub77c.<\/strong><\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-background has-link-color wp-elements-976be7d147e65d319817a33a93dbe8c5 wp-block-paragraph\" style=\"background-color:#d9e4ec\"><strong>&nbsp;\uc544\ubb34\ub9ac \uc7ac\uc0b0\uc774 \uc5c6\ub354\ub77c\ub3c4 \uc904 \uc218 \uc788\ub294 \uc77c\uacf1 \uac00\uc9c0\ub294 \ub204\uad6c\ub098 \ub2e4 \uc788\ub294 \uac83\uc774\ub2e4.&#8221;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\uccab\uc9f8\ub294 \u548c\u9854\u65bd<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5bc\uad74\uc5d0 \ud654\uc0c9\uc744 \ub760\uace0 \ubd80\ub4dc\ub7fd\uace0 \uc815\ub2e4\uc6b4 \uc5bc\uad74\ub85c \ub0a8\uc744 \ub300\ud558\ub294 \uac83\uc774\uc694.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\ub458\uc9f8\ub294 \u8a00\u65bd<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub9d0\ub85c\uc368 \uc5bc\ub9c8\ub4e0\uc9c0 \ubca0\ud480 \uc218 \uc788\uc73c\ub2c8 \uc0ac\ub791\uc758 \ub9d0, \uce6d\ucc2c\uc758 \ub9d0, \uc704\ub85c\uc758 \ub9d0, \uaca9\ub824\uc758 \ub9d0, \uc591\ubcf4\uc758 \ub9d0, \ubd80\ub4dc\ub7ec\uc6b4 \ub9d0 \ub4f1\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\uc14b\uc9f8\ub294 \u5fc3\u65bd<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub9c8\uc74c\uc758 \ubb38\uc744 \uc5f4\uace0 \ub530\ub73b\ud55c \ub9c8\uc74c\uc744 \uc8fc\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\ub137\uc9f8\ub294 \u773c\u65bd<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud638\uc758\ub97c \ub2f4\uc740 \ub208\uc73c\ub85c \uc0ac\ub78c\uc744 \ubcf4\ub294 \uac83\ucc98\ub7fc \ub208\uc73c\ub85c \ubca0\ud478\ub294 \uac83\uc774\uc694.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\ub2e4\uc12f\uc9f8\ub294 \u8eab\u65bd<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubab8\uc73c\ub85c \ub54c\uc6b0\ub294 \uac83\uc73c\ub85c \ub0a8\uc758 \uc9d0\uc744 \ub4e4\uc5b4\uc900\ub2e4\uac70\ub098 \uc77c\uc744 \ub3d5\ub294 \uac83\uc774\uc694.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\uc5ec\uc12f\uc9f8\ub294 \u5ea7\u65bd<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub54c\uc640 \uc7a5\uc18c\uc5d0 \ub9de\uac8c \uc790\ub9ac\ub97c \ub0b4\uc8fc\uc5b4 \uc591\ubcf4\ud558\ub294 \uac83\uc774\uace0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\uc77c\uacf1\uc9f8\ub294 \u5bdf\u65bd<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uad73\uc774 \ubb3b\uc9c0 \uc54a\uace0 \uc0c1\ub300\uc758 \ub9c8\uc74c\uc744 \ud5e4\uc544\ub824 \uc54c\uc544\uc11c \ub3c4\uc640\uc8fc\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong><em>&#8220;\ub124\uac00 \uc774 \uc77c\uacf1 \uac00\uc9c0\ub97c \ud589\ud558\uc5ec \uc2b5\uad00\uc774 \ubd99\uc73c\uba74 \ub108\uc5d0\uac8c \ud589\uc6b4\uc774 \ub530\ub974\ub9ac\ub77c.&#8221;<\/em><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ubb34\uc7ac\uce60\uc2dc: \uc7ac\uc0b0 \uc5c6\uc774 \ubca0\ud478\ub294 \ud48d\uc694\uc758 \uc5f0\uae08\uc220 \ubb34\uc7ac\uce60\uc2dc (\u7121\u8ca1\u4e03\u65bd) \ub3c4\uc785 7\uac00\uc9c0 \ucc28\uc6d0 \ub370\uc774\ud130 \ubd84\uc11d \uc2e4\ucc9c \ud504\ub85c\uc138\uc2a4 \uc7ac\uc0b0 \uc5c6\uc774 \ubca0\ud478\ub294 \uc5f0\uae08\uc220 &#8220;\uc800\ub294 \uc544\ubb34\uac83\ub3c4 \uac00\uc9c4 \uac8c \uc5c6\ub294 \ube48\ud138\ud130\ub9ac\uc778\ub370 \ubb34\uc5c7\uc744 \uc900\ub2e8 \ub9d0\uc785\ub2c8\uae4c?&#8221; \uc11d\uac00\ubaa8\ub2c8 \ubd80\ucc98\ub2d8\uc740 \ub2f5\ud558\uc168\uc2b5\ub2c8\ub2e4. \uc7ac\uc0b0\uc774 \uc5c6\ub354\ub77c\ub3c4 \ub204\uad6c\ub098 \ubca0\ud480 \uc218 \uc788\ub294 \uc77c\uacf1 \uac00\uc9c0\uac00 \uc788\ub2e4\uace0. \uc9c4\uc815\ud55c \ud48d\uc694\ub294 \ubb3c\uc9c8\uc801 \uc790\ubcf8\uc774 \uc544\ub2c8\ub77c \uc6b0\ub9ac\uc758 \uc874\uc7ac, \uc5b8\uc5b4, \uadf8\ub9ac\uace0 \uc815\uc2e0\uc5d0\uc11c \uc2dc\uc791\ub429\ub2c8\ub2e4. \uc874\uc7ac\uc758 7\uac00\uc9c0 \ucc28\uc6d0 \uc774 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":11900,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_uag_custom_page_level_css":"","pgc_sgb_lightbox_settings":"","fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[24],"tags":[],"class_list":["post-11899","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-24"],"views":20,"uagb_featured_image_src":{"full":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/06\/\ubb34\uc7ac\uce60\uc2dc.png",1536,1024,false],"thumbnail":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/06\/\ubb34\uc7ac\uce60\uc2dc-150x150.png",150,150,true],"medium":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/06\/\ubb34\uc7ac\uce60\uc2dc-300x200.png",300,200,true],"medium_large":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/06\/\ubb34\uc7ac\uce60\uc2dc-768x512.png",768,512,true],"large":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/06\/\ubb34\uc7ac\uce60\uc2dc-1024x683.png",1024,683,true],"1536x1536":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/06\/\ubb34\uc7ac\uce60\uc2dc.png",1536,1024,false],"2048x2048":["https:\/\/h9988.cbox.kr\/wp-content\/uploads\/2026\/06\/\ubb34\uc7ac\uce60\uc2dc.png",1536,1024,false]},"uagb_author_info":{"display_name":"ds1avz10","author_link":"https:\/\/h9988.cbox.kr\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"\ubb34\uc7ac\uce60\uc2dc: \uc7ac\uc0b0 \uc5c6\uc774 \ubca0\ud478\ub294 \ud48d\uc694\uc758 \uc5f0\uae08\uc220 \ubb34\uc7ac\uce60\uc2dc (\u7121\u8ca1\u4e03\u65bd) \ub3c4\uc785 7\uac00\uc9c0 \ucc28\uc6d0 \ub370\uc774\ud130 \ubd84\uc11d \uc2e4\ucc9c \ud504\ub85c\uc138\uc2a4 \uc7ac\uc0b0 \uc5c6\uc774 \ubca0\ud478\ub294 \uc5f0\uae08\uc220 &#8220;\uc800\ub294 \uc544\ubb34\uac83\ub3c4 \uac00\uc9c4 \uac8c \uc5c6\ub294 \ube48\ud138\ud130\ub9ac\uc778\ub370 \ubb34\uc5c7\uc744 \uc900\ub2e8 \ub9d0\uc785\ub2c8\uae4c?&#8221; \uc11d\uac00\ubaa8\ub2c8 \ubd80\ucc98\ub2d8\uc740 \ub2f5\ud558\uc168\uc2b5\ub2c8\ub2e4. \uc7ac\uc0b0\uc774 \uc5c6\ub354\ub77c\ub3c4 \ub204\uad6c\ub098 \ubca0\ud480 \uc218 \uc788\ub294 \uc77c\uacf1 \uac00\uc9c0\uac00 \uc788\ub2e4\uace0. \uc9c4\uc815\ud55c \ud48d\uc694\ub294 \ubb3c\uc9c8\uc801 \uc790\ubcf8\uc774 \uc544\ub2c8\ub77c \uc6b0\ub9ac\uc758 \uc874\uc7ac, \uc5b8\uc5b4, \uadf8\ub9ac\uace0 \uc815\uc2e0\uc5d0\uc11c \uc2dc\uc791\ub429\ub2c8\ub2e4. \uc874\uc7ac\uc758 7\uac00\uc9c0 \ucc28\uc6d0 \uc774&hellip;","_links":{"self":[{"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/posts\/11899","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11899"}],"version-history":[{"count":8,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/posts\/11899\/revisions"}],"predecessor-version":[{"id":11913,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/posts\/11899\/revisions\/11913"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=\/wp\/v2\/media\/11900"}],"wp:attachment":[{"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/h9988.cbox.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}