{"id":2855,"date":"2025-08-18T10:27:39","date_gmt":"2025-08-18T01:27:39","guid":{"rendered":"http:\/\/jbgmna.com\/?page_id=2855"},"modified":"2025-08-18T10:28:30","modified_gmt":"2025-08-18T01:28:30","slug":"%ea%b3%b5%ec%9e%a5%eb%93%b1%eb%a1%9d-%ea%b0%80%ec%84%a4%ea%b1%b4%ec%b6%95%eb%ac%bc","status":"publish","type":"page","link":"http:\/\/jbgmna.com\/?page_id=2855","title":{"rendered":"\uacf5\uc7a5\ub4f1\ub85d \uac00\uc124\uac74\ucd95\ubb3c"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n \uacf5\uc7a5\ub4f1\ub85d \ubc0f \uac00\uc124\uac74\ucd95\ubb3c\ucd95\uc870 \uc2e0\uace0 \uc548\ub0b4<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\r\n <!-- Chosen Palette: Calm Neutrals (Slate, Zinc, Stone) -->\r\n <!-- Application Structure Plan: A two-tab single-page application (SPA) structure was chosen to clearly separate the two main topics: 'Factory Registration' and 'Temporary Building Construction'. This allows users to focus on one topic at a time without being overwhelmed. The user flow is designed to be intuitive: select a main topic via tabs, then explore its details through interactive, card-based sections (Overview, Requirements, Process, etc.). This structure is superior to a long scrolling page as it provides better context and navigation for users seeking specific administrative information. -->\r\n <!-- Visualization & Content Choices: \r\n - Report Info: Process steps for both topics. -> Goal: Clarify complex procedures. -> Viz\/Method: Interactive step-by-step flow diagrams using HTML\/CSS\/JS. -> Interaction: Clicking a step reveals details. -> Justification: Visually guides users through the process, making it less intimidating than a text list. -> Library: Vanilla JS.\r\n - Report Info: Benefits of each procedure. -> Goal: Highlight advantages. -> Viz\/Method: Icon-based feature cards. -> Interaction: Hover effects to draw attention. -> Justification: Icons provide quick visual cues, making benefits easily scannable. -> Library: Tailwind CSS for styling.\r\n - Report Info: Key differences (period, target, law). -> Goal: Enable quick comparison. -> Viz\/Method: Bar chart. -> Interaction: Tooltips on hover provide exact data. -> Justification: A chart offers a much faster and clearer comparison than reading separate text sections. -> Library: Chart.js.\r\n - Report Info: Required documents. -> Goal: Provide a clear checklist. -> Viz\/Method: Interactive list. -> Interaction: Clicking an item could show a sample or more info. -> Justification: An interactive checklist feels more engaging and manageable for users. -> Library: Vanilla JS.\r\n -->\r\n <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\r\n <style>\r\n body {\r\n font-family: 'Noto Sans KR', sans-serif;\r\n background-color: #f8fafc; \/* slate-50 *\/\r\n }\r\n .tab-active {\r\n border-color: #3b82f6; \/* blue-500 *\/\r\n color: #3b82f6;\r\n font-weight: 700;\r\n background-color: #eff6ff; \/* blue-50 *\/\r\n }\r\n .tab-inactive {\r\n border-color: transparent;\r\n color: #475569; \/* slate-600 *\/\r\n }\r\n .step-item {\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n }\r\n .step-item:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);\r\n }\r\n .step-connector::after {\r\n content: '\u2192';\r\n color: #94a3b8; \/* slate-400 *\/\r\n font-size: 1.5rem;\r\n margin: 0 0.5rem;\r\n }\r\n .step-item:last-child .step-connector::after {\r\n content: '';\r\n }\r\n .chart-container {\r\n position: relative;\r\n width: 100%;\r\n max-width: 800px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n height: 400px;\r\n max-height: 50vh;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-800\">\r\n\r\n <div class=\"container mx-auto p-4 sm:p-6 lg:p-8\">\r\n\r\n <header class=\"text-center mb-10\">\r\n <h1 class=\"text-3xl sm:text-4xl font-bold text-slate-900\">\uacf5\uc7a5\ub4f1\ub85d \ubc0f \uac00\uc124\uac74\ucd95\ubb3c\ucd95\uc870 \uc2e0\uace0<\/h1>\r\n <p class=\"mt-3 text-lg text-slate-600\">\ubcf5\uc7a1\ud55c \uc778\ud5c8\uac00 \uc808\ucc28, \ud575\uc2ec\ub9cc \ubaa8\uc544 \ud55c\ub208\uc5d0 \ud655\uc778\ud558\uc138\uc694.<\/p>\r\n <\/header>\r\n\r\n <div class=\"w-full max-w-4xl mx-auto\">\r\n <div class=\"flex justify-center border-b border-slate-200 mb-8\">\r\n <button id=\"tab-factory\" class=\"py-3 px-6 border-b-2 text-lg transition-colors duration-300 tab-active\">\ud83c\udfed \uacf5\uc7a5\ub4f1\ub85d<\/button>\r\n <button id=\"tab-temporary\" class=\"py-3 px-6 border-b-2 text-lg transition-colors duration-300 tab-inactive\">\ud83c\udfd7\ufe0f \uac00\uc124\uac74\ucd95\ubb3c<\/button>\r\n <\/div>\r\n\r\n <main id=\"content-factory\" class=\"space-y-12\">\r\n <!-- \uacf5\uc7a5\ub4f1\ub85d \ucf58\ud150\uce20 -->\r\n <\/main>\r\n\r\n <main id=\"content-temporary\" class=\"hidden space-y-12\">\r\n <!-- \uac00\uc124\uac74\ucd95\ubb3c \ucf58\ud150\uce20 -->\r\n <\/main>\r\n \r\n <section id=\"comparison-section\" class=\"mt-16 bg-white p-6 rounded-xl shadow-md\">\r\n <h2 class=\"text-2xl font-bold text-center mb-6 text-slate-800\">\ud575\uc2ec \ube44\uad50: \uacf5\uc7a5\ub4f1\ub85d vs \uac00\uc124\uac74\ucd95\ubb3c<\/h2>\r\n <p class=\"text-center text-slate-600 mb-8\">\ub450 \uc81c\ub3c4\uc758 \uac00\uc7a5 \ud070 \ucc28\uc774\uc810\uc744 \ucc28\ud2b8\ub97c \ud1b5\ud574 \uc9c1\uad00\uc801\uc73c\ub85c \ube44\uad50\ud574 \ubcf4\uc138\uc694. \uac01 \ud56d\ubaa9\uc5d0 \ub9c8\uc6b0\uc2a4\ub97c \uc62c\ub9ac\uba74 \uc0c1\uc138 \uc815\ubcf4\ub97c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n <div class=\"chart-container\">\r\n <canvas id=\"comparisonChart\"><\/canvas>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/div>\r\n\r\n <footer class=\"mt-16 border-t border-slate-200 pt-8 text-center\">\r\n <div class=\"max-w-2xl mx-auto bg-white p-8 rounded-xl shadow-lg\">\r\n <h3 class=\"text-xl font-bold text-slate-800\">\ube44\uc790\uc7a1\ucf54\ub9ac\uc544\ud589\uc815\uc0ac\uc0ac\ubb34\uc18c<\/h3>\r\n <p class=\"mt-4 text-slate-600\">\r\n \ubcf5\uc7a1\ud55c \ubc95\uaddc\uc640 \uc808\ucc28, \uc804\ubb38\uac00\uc640 \ud568\uaed8\ud558\uba74 \uc2dc\uac04\uacfc \ube44\uc6a9\uc744 \uc808\uc57d\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>\r\n \uc815\ud655\ud55c \uc0ac\uc804 \uac80\ud1a0\ub85c \uc131\uacf5\uc801\uc778 \uc0ac\uc5c5 \uc2dc\uc791\uc744 \ub3c4\uc640\ub4dc\ub9bd\ub2c8\ub2e4.\r\n <\/p>\r\n <div class=\"mt-6 text-left grid grid-cols-1 sm:grid-cols-2 gap-4 text-slate-700\">\r\n <p><strong>\uc8fc\uc18c:<\/strong> \uacbd\uae30\ub3c4 \uace0\uc591\uc2dc \uc77c\uc0b0\ub3d9\uad6c \uc7a5\ud56d\ub3d9 895-1 \uc6b0\uc2e0\ud504\ub77c\uc790 505-2\ud638<\/p>\r\n <p><strong>\uc804\ud654:<\/strong> 010-6584-0070<\/p>\r\n <p><strong>\ud329\uc2a4:<\/strong> 031-624-2738<\/p>\r\n <p><strong>\uba54\uc77c:<\/strong> jirunpeople@naver.com<\/p>\r\n <p class=\"sm:col-span-2\"><strong>\ud648\ud398\uc774\uc9c0:<\/strong> <a href=\"http:\/\/www.jbgmna.com\" target=\"_blank\" class=\"text-blue-500 hover:underline\">www.jbgmna.com<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-center text-slate-500 text-sm mt-8\">\r\n <p>© 2024 \ube44\uc790\uc7a1\ucf54\ub9ac\uc544\ud589\uc815\uc0ac\uc0ac\ubb34\uc18c. All Rights Reserved.<\/p>\r\n <p class=\"mt-2\">\ubcf8 \ud398\uc774\uc9c0\uc758 \ub0b4\uc6a9\uc740 \uc815\ubcf4 \uc81c\uacf5\uc744 \ubaa9\uc801\uc73c\ub85c \ud558\uba70, \ubc95\uc801 \ud6a8\ub825\uc744 \uac16\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc815\ud655\ud55c \ub0b4\uc6a9\uc740 \uad00\ub828 \ubc95\uaddc\ub97c \ud655\uc778\ud558\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <\/footer>\r\n\r\n <\/div>\r\n\r\n <script>\r\n const factoryContent = `\r\n <section>\r\n <h2 class=\"text-2xl font-bold mb-2 text-slate-800\">\uacf5\uc7a5\ub4f1\ub85d \uc778\ud5c8\uac00\ub780?<\/h2>\r\n <p class=\"text-slate-600\">\uc81c\uc870\uc5c5\uc744 \uc6b4\uc601\ud558\uae30 \uc704\ud574 \uacf5\uc7a5 \uac74\ucd95\ubb3c\uacfc \uc2dc\uc124\uc744 \ubc95\uc801\uc73c\ub85c \uc778\uc815\ubc1b\ub294 \ud544\uc218 \uc808\ucc28\uc785\ub2c8\ub2e4. 500\u33a1 \uc774\uc0c1\uc758 \uacf5\uc7a5\uc740 \uc758\ubb34\uc774\uba70, \uadf8 \ubbf8\ub9cc\uc774\ub77c\ub3c4 \uc815\ubd80 \uc9c0\uc6d0 \ud61c\ud0dd\uc744 \uc704\ud574 \ub4f1\ub85d\ud558\ub294 \uac83\uc774 \uc720\ub9ac\ud569\ub2c8\ub2e4. \uc774 \uc808\ucc28\ub97c \ud1b5\ud574 \uc0ac\uc5c5\uc758 \uc2e0\ub8b0\ub3c4\ub97c \ub192\uc774\uace0 \ub2e4\uc591\ud55c \uc815\ucc45\uc801 \uc9c0\uc6d0\uc758 \uae30\ud68c\ub97c \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n <\/section>\r\n <section>\r\n <h2 class=\"text-2xl font-bold mb-4 text-slate-800\">\uc9c4\ud589 \uc808\ucc28 \ud55c\ub208\uc5d0 \ubcf4\uae30<\/h2>\r\n <div class=\"flex flex-wrap justify-center items-center gap-y-4\">\r\n <div class=\"step-item bg-white p-4 rounded-lg shadow-md w-40 text-center\"><strong>1. \uc124\ub9bd \uc2b9\uc778 \uc2e0\uccad<\/strong><div class=\"step-connector\"><\/div><\/div>\r\n <div class=\"step-item bg-white p-4 rounded-lg shadow-md w-40 text-center\"><strong>2. \uad00\uacc4\ubd80\uc11c \ud611\uc758<\/strong><div class=\"step-connector\"><\/div><\/div>\r\n <div class=\"step-item bg-white p-4 rounded-lg shadow-md w-40 text-center\"><strong>3. \uc2b9\uc778\uc11c \ubc1c\uae09<\/strong><div class=\"step-connector\"><\/div><\/div>\r\n <div class=\"step-item bg-white p-4 rounded-lg shadow-md w-40 text-center\"><strong>4. \uc644\ub8cc \uc2e0\uace0<\/strong><div class=\"step-connector\"><\/div><\/div>\r\n <div class=\"step-item bg-white p-4 rounded-lg shadow-md w-40 text-center\"><strong>5. \ub4f1\ub85d\uc99d \ubc1c\uae09<\/strong><div class=\"step-connector\"><\/div><\/div>\r\n <\/div>\r\n <\/section>\r\n <section>\r\n <h2 class=\"text-2xl font-bold mb-4 text-slate-800\">\ud575\uc2ec \uc900\ube44\uc694\uac74<\/h2>\r\n <ul class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <li class=\"bg-white p-4 rounded-lg shadow-sm\">\u2714\ufe0f <strong>\uc0ac\uc5c5\uacc4\ud68d\uc11c:<\/strong> \uc0dd\uc0b0 \uc81c\ud488, \uc2dc\uc124 \ud604\ud669 \ub4f1 \ud3ec\ud568<\/li>\r\n <li class=\"bg-white p-4 rounded-lg shadow-sm\">\u2714\ufe0f <strong>\uac74\ucd95\ubb3c \uad00\ub828 \uc11c\ub958:<\/strong> \uac74\ucd95\ubb3c\ub300\uc7a5 \ub4f1<\/li>\r\n <li class=\"bg-white p-4 rounded-lg shadow-sm\">\u2714\ufe0f <strong>\ud1a0\uc9c0 \uc0ac\uc6a9\uad8c \uc99d\uba85:<\/strong> \ub4f1\uae30\ubd80\ub4f1\ubcf8, \uc784\ub300\ucc28\uacc4\uc57d\uc11c \ub4f1<\/li>\r\n <li class=\"bg-white p-4 rounded-lg shadow-sm\">\u2714\ufe0f <strong>\uae30\ud0c0 \uc758\uc81c\ucc98\ub9ac \uc11c\ub958:<\/strong> \uad00\ub828 \uc778\ud5c8\uac00 \uc77c\uad04 \ucc98\ub9ac\uc6a9<\/li>\r\n <\/ul>\r\n <\/section>\r\n <section>\r\n <h2 class=\"text-2xl font-bold mb-4 text-slate-800\">\uc8fc\uc694 \ud61c\ud0dd \ubc0f \uc804\ubb38\uac00 Tip<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-blue-50 p-6 rounded-lg border-l-4 border-blue-500\">\r\n <h3 class=\"font-bold text-lg text-blue-800 mb-2\">\ub2e4\uc591\ud55c \uc815\ubd80 \uc9c0\uc6d0 \ud61c\ud0dd<\/h3>\r\n <p class=\"text-blue-700\">\uc815\ucc45\uc790\uae08, \uae30\uc220\uac1c\ubc1c, \uc778\ub825 \uc9c0\uc6d0 \ub4f1 \uc911\uc18c\uae30\uc5c5 \uc9c0\uc6d0 \uc0ac\uc5c5\uc758 \uae30\ubcf8 \uc790\uaca9\uc744 \uac16\ucd94\uac8c \ub429\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <div class=\"bg-green-50 p-6 rounded-lg border-l-4 border-green-500\">\r\n <h3 class=\"font-bold text-lg text-green-800 mb-2\">\ub300\uc678 \uc2e0\ub8b0\ub3c4 \uc0c1\uc2b9<\/h3>\r\n <p class=\"text-green-700\">\uad00\uacf5\uc11c\ub098 \ub300\uae30\uc5c5 \uc785\ucc30, \ub0a9\ud488 \uc2dc \uacf5\uc7a5\ub4f1\ub85d\uc99d\uc740 \ud544\uc218 \uc694\uac74\uc73c\ub85c \uc791\uc6a9\ud558\uc5ec \uc0ac\uc5c5 \uae30\ud68c\ub97c \ud655\ub300\ud569\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <div class=\"bg-amber-50 p-6 rounded-lg border-l-4 border-amber-500 md:col-span-2\">\r\n <h3 class=\"font-bold text-lg text-amber-800 mb-2\">\uc804\ubb38\uac00 Tip: \uc758\uc81c\ucc98\ub9ac\ub97c \ud65c\uc6a9\ud558\uc138\uc694!<\/h3>\r\n <p class=\"text-amber-700\">\uacf5\uc7a5\uc124\ub9bd \uc2b9\uc778 \uc2dc \uac74\ucd95\ud5c8\uac00 \ub4f1 \ubcf5\uc7a1\ud55c \uc778\ud5c8\uac00\ub97c \ud55c \ubc88\uc5d0 \ucc98\ub9ac\ud558\ub294 '\uc758\uc81c\ucc98\ub9ac' \uc81c\ub3c4\ub97c \ud65c\uc6a9\ud558\uba74, \uc2dc\uac04\uacfc \ube44\uc6a9\uc744 \ud68d\uae30\uc801\uc73c\ub85c \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ucd08\uae30 \ub2e8\uacc4\ubd80\ud130 \uc804\ubb38\uac00\uc640 \uc0c1\ub2f4\ud558\uc5ec \ucd5c\uc801\uc758 \uc804\ub7b5\uc744 \uc218\ub9bd\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n `;\r\n\r\n const temporaryContent = `\r\n <section>\r\n <h2 class=\"text-2xl font-bold mb-2 text-slate-800\">\uac00\uc124\uac74\ucd95\ubb3c \ucd95\uc870\uc2e0\uace0\ub780?<\/h2>\r\n <p class=\"text-slate-600\">\uc784\uc2dc \ucc3d\uace0, \uacf5\uc0ac\uc6a9 \uc0ac\ubb34\uc2e4 \ub4f1 \ud55c\uc2dc\uc801 \uc0ac\uc6a9\uc744 \ubaa9\uc801\uc73c\ub85c \uc9d3\ub294 \uac74\ucd95\ubb3c\uc744 \uc124\uce58\ud558\uae30 \uc804, \ubc95\uc801 \uae30\uc900\uc5d0 \ub530\ub77c \uad00\ud560 \uc9c0\uc790\uccb4\uc5d0 \uc2e0\uace0\ud558\ub294 \uc808\ucc28\uc785\ub2c8\ub2e4. \uc77c\ubc18 \uac74\ucd95\ubb3c\uc5d0 \ube44\ud574 \uc808\ucc28\uac00 \uac04\uc18c\ud558\uc9c0\ub9cc, \uc815\ud574\uc9c4 \uc874\uce58\uae30\uac04\uacfc \uc6a9\ub3c4 \uc81c\ud55c\uc744 \ubc18\ub4dc\uc2dc \uc900\uc218\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\r\n <\/section>\r\n <section>\r\n <h2 class=\"text-2xl font-bold mb-4 text-slate-800\">\uc9c4\ud589 \uc808\ucc28 \ud55c\ub208\uc5d0 \ubcf4\uae30<\/h2>\r\n <div class=\"flex flex-wrap justify-center items-center gap-y-4\">\r\n <div class=\"step-item bg-white p-4 rounded-lg shadow-md w-40 text-center\"><strong>1. \ucd95\uc870 \uc2e0\uace0<\/strong><div class=\"step-connector\"><\/div><\/div>\r\n <div class=\"step-item bg-white p-4 rounded-lg shadow-md w-40 text-center\"><strong>2. \uac80\ud1a0 \ubc0f \ud604\uc9c0\uc870\uc0ac<\/strong><div class=\"step-connector\"><\/div><\/div>\r\n <div class=\"step-item bg-white p-4 rounded-lg shadow-md w-40 text-center\"><strong>3. \uc2e0\uace0 \uc218\ub9ac (\ud544\uc99d \ubc1c\uae09)<\/strong><div class=\"step-connector\"><\/div><\/div>\r\n <div class=\"step-item bg-white p-4 rounded-lg shadow-md w-40 text-center\"><strong>4. \ucc29\uacf5<\/strong><div class=\"step-connector\"><\/div><\/div>\r\n <\/div>\r\n <\/section>\r\n <section>\r\n <h2 class=\"text-2xl font-bold mb-4 text-slate-800\">\ud575\uc2ec \uc900\ube44\uc694\uac74<\/h2>\r\n <ul class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <li class=\"bg-white p-4 rounded-lg shadow-sm\">\u2714\ufe0f <strong>\uac00\uc124\uac74\ucd95\ubb3c \ucd95\uc870\uc2e0\uace0\uc11c<\/strong><\/li>\r\n <li class=\"bg-white p-4 rounded-lg shadow-sm\">\u2714\ufe0f <strong>\ubc30\uce58\ub3c4 \ubc0f \ud3c9\uba74\ub3c4<\/strong><\/li>\r\n <li class=\"bg-white p-4 rounded-lg shadow-sm\">\u2714\ufe0f <strong>\ub300\uc9c0\uc0ac\uc6a9\uc2b9\ub099\uc11c (\ud0c0\uc778 \uc18c\uc720 \ud1a0\uc9c0\uc778 \uacbd\uc6b0)<\/strong><\/li>\r\n <\/ul>\r\n <\/section>\r\n <section>\r\n <h2 class=\"text-2xl font-bold mb-4 text-slate-800\">\ud575\uc2ec \uc8fc\uc758\uc0ac\ud56d \ubc0f \uc804\ubb38\uac00 Tip<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-red-50 p-6 rounded-lg border-l-4 border-red-500\">\r\n <h3 class=\"font-bold text-lg text-red-800 mb-2\">\uc874\uce58\uae30\uac04 3\ub144, \uc5f0\uc7a5\uc2e0\uace0 \ud544\uc218!<\/h3>\r\n <p class=\"text-red-700\">\uc6d0\uce59\uc801\uc73c\ub85c \uc874\uce58\uae30\uac04\uc740 3\ub144\uc774\uba70, \ub9cc\ub8cc 14\uc77c \uc804\uae4c\uc9c0 \uc5f0\uc7a5 \uc2e0\uace0\ub97c \ud558\uc9c0 \uc54a\uc73c\uba74 \uc774\ud589\uac15\uc81c\uae08\uc774 \ubd80\uacfc\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <div class=\"bg-sky-50 p-6 rounded-lg border-l-4 border-sky-500\">\r\n <h3 class=\"font-bold text-lg text-sky-800 mb-2\">\uc6a9\ub3c4 \ubc0f \uae30\uc900 \uc900\uc218<\/h3>\r\n <p class=\"text-sky-700\">\ubd84\uc591 \ubaa9\uc801, \uc8fc\uac70\uc6a9 \uc0ac\uc6a9\uc740 \ubd88\uac00\ud558\uba70 \ucca0\uadfc\ucf58\ud06c\ub9ac\ud2b8\uc870\uac00 \uc544\ub2c8\uc5b4\uc57c \ud558\ub294 \ub4f1 \uc124\uce58 \uae30\uc900\uc744 \ubc18\ub4dc\uc2dc \uc9c0\ucf1c\uc57c \ud569\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <div class=\"bg-amber-50 p-6 rounded-lg border-l-4 border-amber-500 md:col-span-2\">\r\n <h3 class=\"font-bold text-lg text-amber-800 mb-2\">\uc804\ubb38\uac00 Tip: \uc628\ub77c\uc778\uc73c\ub85c \uac04\ud3b8\ud558\uac8c!<\/h3>\r\n <p class=\"text-amber-700\">'\uc815\ubd8024' \ub610\ub294 '\uc138\uc6c0\ud130'\ub97c \ud1b5\ud574 \uc628\ub77c\uc778\uc73c\ub85c \uac04\ud3b8\ud558\uac8c \uc2e0\uace0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \ud1a0\uc9c0\uc758 \uc6a9\ub3c4\ub098 \uac74\ucd95\ubb3c\uc758 \uaddc\ubaa8\uc5d0 \ub530\ub77c \ucd94\uac00 \uc11c\ub958\ub098 \uac80\ud1a0\uac00 \ud544\uc694\ud560 \uc218 \uc788\uc73c\ub2c8, \uc2e0\uace0 \uc804 \uc804\ubb38\uac00\uc640 \uc0c1\ub2f4\ud558\uc5ec \ub204\ub77d \uc5c6\uc774 \uc900\ube44\ud558\ub294 \uac83\uc774 \uc548\uc804\ud569\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n `;\r\n\r\n const tabFactory = document.getElementById('tab-factory');\r\n const tabTemporary = document.getElementById('tab-temporary');\r\n const contentFactory = document.getElementById('content-factory');\r\n const contentTemporary = document.getElementById('content-temporary');\r\n\r\n contentFactory.innerHTML = factoryContent;\r\n contentTemporary.innerHTML = temporaryContent;\r\n\r\n tabFactory.addEventListener('click', () => {\r\n tabFactory.classList.add('tab-active');\r\n tabFactory.classList.remove('tab-inactive');\r\n tabTemporary.classList.add('tab-inactive');\r\n tabTemporary.classList.remove('tab-active');\r\n\r\n contentFactory.classList.remove('hidden');\r\n contentTemporary.classList.add('hidden');\r\n });\r\n\r\n tabTemporary.addEventListener('click', () => {\r\n tabTemporary.classList.add('tab-active');\r\n tabTemporary.classList.remove('tab-inactive');\r\n tabFactory.classList.add('tab-inactive');\r\n tabFactory.classList.remove('tab-active');\r\n\r\n contentTemporary.classList.remove('hidden');\r\n contentFactory.classList.add('hidden');\r\n });\r\n\r\n const ctx = document.getElementById('comparisonChart').getContext('2d');\r\n const comparisonChart = new Chart(ctx, {\r\n type: 'bar',\r\n data: {\r\n labels: ['\uc874\uce58\uae30\uac04', '\uc8fc\uc694 \ubaa9\uc801', '\uad00\ub828 \ubc95\uaddc'],\r\n datasets: [{\r\n label: '\uacf5\uc7a5\ub4f1\ub85d',\r\n data: [30, 30, 30],\r\n backgroundColor: 'rgba(59, 130, 246, 0.7)',\r\n borderColor: 'rgba(59, 130, 246, 1)',\r\n borderWidth: 1\r\n }, {\r\n label: '\uac00\uc124\uac74\ucd95\ubb3c',\r\n data: [3, 10, 20],\r\n backgroundColor: 'rgba(14, 165, 233, 0.7)',\r\n borderColor: 'rgba(14, 165, 233, 1)',\r\n borderWidth: 1\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n position: 'top',\r\n },\r\n tooltip: {\r\n callbacks: {\r\n label: function(context) {\r\n const label = context.dataset.label || '';\r\n const index = context.dataIndex;\r\n let valueText = '';\r\n if (label === '\uacf5\uc7a5\ub4f1\ub85d') {\r\n if(index === 0) valueText = '\uc601\uad6c\uc801 (\ud3d0\uc5c5 \uc2dc\uae4c\uc9c0)';\r\n if(index === 1) valueText = '\uc81c\uc870\uc5c5 \uc601\uc704';\r\n if(index === 2) valueText = '\uc0b0\uc5c5\uc9d1\uc801\ubc95';\r\n } else {\r\n if(index === 0) valueText = '\ucd5c\ub300 3\ub144 (\uc5f0\uc7a5 \uac00\ub2a5)';\r\n if(index === 1) valueText = '\uc784\uc2dc \uc0ac\uc6a9';\r\n if(index === 2) valueText = '\uac74\ucd95\ubc95';\r\n }\r\n return `${label}: ${valueText}`;\r\n }\r\n }\r\n }\r\n },\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n ticks: {\r\n display: false\r\n }\r\n },\r\n x: {\r\n ticks: {\r\n font: {\r\n size: 14,\r\n weight: '500'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\uacf5\uc7a5\ub4f1\ub85d \ubc0f \uac00\uc124\uac74\ucd95\ubb3c\ucd95\uc870 \uc2e0\uace0 \uc548\ub0b4 \uacf5\uc7a5\ub4f1\ub85d \ubc0f \uac00\uc124\uac74\ucd95\ubb3c\ucd95\uc870 \uc2e0\uace0 \ubcf5\uc7a1\ud55c \uc778\ud5c8\uac00 \uc808\ucc28, \ud575\uc2ec\ub9cc \ubaa8\uc544 \ud55c\ub208\uc5d0 \ud655\uc778\ud558\uc138\uc694. \ud83c\udfed \uacf5\uc7a5\ub4f1\ub85d \ud83c\udfd7\ufe0f \uac00\uc124\uac74\ucd95\ubb3c \ud575\uc2ec \ube44\uad50: \uacf5\uc7a5\ub4f1\ub85d vs \uac00\uc124\uac74\ucd95\ubb3c \ub450 \uc81c\ub3c4\uc758 \uac00\uc7a5 \ud070 \ucc28\uc774\uc810\uc744 …<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2855","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/jbgmna.com\/index.php?rest_route=\/wp\/v2\/pages\/2855","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jbgmna.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/jbgmna.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/jbgmna.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jbgmna.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2855"}],"version-history":[{"count":4,"href":"http:\/\/jbgmna.com\/index.php?rest_route=\/wp\/v2\/pages\/2855\/revisions"}],"predecessor-version":[{"id":2859,"href":"http:\/\/jbgmna.com\/index.php?rest_route=\/wp\/v2\/pages\/2855\/revisions\/2859"}],"wp:attachment":[{"href":"http:\/\/jbgmna.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}