{"id":2847,"date":"2025-08-18T10:23:24","date_gmt":"2025-08-18T01:23:24","guid":{"rendered":"http:\/\/jbgmna.com\/?page_id=2847"},"modified":"2025-08-18T10:26:03","modified_gmt":"2025-08-18T01:26:03","slug":"%ec%9a%b0%ec%88%98%ec%a0%9c%ed%92%88-%ed%98%81%ec%8b%a0%ec%a0%9c%ed%92%88","status":"publish","type":"page","link":"http:\/\/jbgmna.com\/?page_id=2847","title":{"rendered":"\uc6b0\uc218\uc81c\ud488 \ud601\uc2e0\uc81c\ud488"},"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 \uc911\uc18c\uc911\uacac\uae30\uc5c5\uc744 \uc704\ud55c \uc778\ud130\ub799\ud2f0\ube0c \uc870\ub2ec\uc5c5\ubb34 \uac00\uc774\ub4dc<\/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 rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n <!-- Chosen Palette: Calm Neutrals with a Trustworthy Blue Accent -->\r\n <!-- Application Structure Plan: A task-oriented, single-page dashboard design. The structure prioritizes user goals: first, understanding the main platforms through an interactive side-by-side comparison, then exploring required certifications with a filterable grid, visualizing the overall process with a chart, and finally getting actionable tips. This non-linear structure is more intuitive for users who need to quickly find specific information rather than reading a linear document. Navigation is facilitated by a sticky header for quick jumps between these thematic sections. -->\r\n <!-- Visualization & Content Choices: 1. Platform Info -> Goal: Compare -> Method: Interactive two-column layout -> Interaction: JS toggles detailed views on click -> Justification: Allows quick high-level comparison and optional deep-dive without cluttering the UI. 2. Certification List -> Goal: Organize\/Inform -> Method: Filterable card grid -> Interaction: JS filters cards by type (Business\/Product) -> Justification: Visually more engaging than a table and allows users to focus on the certification type relevant to them. 3. Process Overview -> Goal: Inform\/Change -> Method: Chart.js Horizontal Bar Chart -> Interaction: Static visual aid -> Justification: Simplifies the complex multi-step procurement journey into an easily digestible visual timeline. 4. Tips -> Goal: Inform -> Method: Numbered list in cards -> Justification: Clear, scannable format for actionable advice. All visuals are implemented using HTML\/CSS\/Canvas via Chart.js, confirming no SVG\/Mermaid usage. -->\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: #f8f9fa;\r\n }\r\n .nav-link {\r\n transition: color 0.3s, border-bottom-color 0.3s;\r\n }\r\n .nav-link:hover {\r\n color: #2563eb;\r\n }\r\n .active-link {\r\n color: #2563eb;\r\n border-bottom: 2px solid #2563eb;\r\n }\r\n .content-section {\r\n display: none;\r\n }\r\n .content-section.active {\r\n display: block;\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: 300px;\r\n max-height: 400px;\r\n }\r\n @media (min-width: 768px) {\r\n .chart-container {\r\n height: 350px;\r\n }\r\n }\r\n .details {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.5s ease-out;\r\n }\r\n .footer-logo-text {\r\n color: #ffc107;\r\n font-weight: 700;\r\n }\r\n .footer-company-name {\r\n font-size: 1.5rem;\r\n color: #ffffff;\r\n font-weight: 500;\r\n }\r\n .footer-company-info {\r\n font-size: 0.875rem;\r\n color: #a0a8b4;\r\n font-weight: 400;\r\n }\r\n .footer-contact-info {\r\n font-size: 0.875rem;\r\n color: #a0a8b4;\r\n }\r\n .footer-contact-info a {\r\n color: #a0c3ff;\r\n text-decoration: none;\r\n }\r\n .footer-contact-info a:hover {\r\n text-decoration: underline;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-50 text-gray-800\">\r\n\r\n <header class=\"bg-white\/80 backdrop-blur-md shadow-sm sticky top-0 z-50\">\r\n <nav class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex items-center justify-between h-16\">\r\n <div class=\"flex-shrink-0\">\r\n <!-- Updated the title text as requested by the user -->\r\n <h1 class=\"text-xl md:text-2xl font-bold text-blue-600\">\ube44\uc790\uc7a1\ucf54\ub9ac\uc544 \uc870\ub2ec\uc5c5\ubb34<\/h1>\r\n <\/div>\r\n <div class=\"hidden md:block\">\r\n <div class=\"ml-10 flex items-baseline space-x-4\">\r\n <a href=\"#intro\" class=\"nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-700\">\uc18c\uac1c<\/a>\r\n <a href=\"#platforms\" class=\"nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-700\">\ud50c\ub7ab\ud3fc \ube44\uad50<\/a>\r\n <a href=\"#certs\" class=\"nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-700\">\ud575\uc2ec \uc778\uc99d<\/a>\r\n <a href=\"#process\" class=\"nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-700\">\uc804\uccb4 \ud504\ub85c\uc138\uc2a4<\/a>\r\n <a href=\"#tips\" class=\"nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-700\">\uc131\uacf5 \ud301<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"md:hidden\">\r\n <button id=\"mobile-menu-button\" class=\"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-700 hover:bg-gray-100 focus:outline-none\">\r\n <svg class=\"h-6 w-6\" stroke=\"currentColor\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"><\/path>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n <div id=\"mobile-menu\" class=\"md:hidden hidden\">\r\n <div class=\"px-2 pt-2 pb-3 space-y-1 sm:px-3\">\r\n <a href=\"#intro\" class=\"nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-700\">\uc18c\uac1c<\/a>\r\n <a href=\"#platforms\" class=\"nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-700\">\ud50c\ub7ab\ud3fc \ube44\uad50<\/a>\r\n <a href=\"#certs\" class=\"nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-700\">\ud575\uc2ec \uc778\uc99d<\/a>\r\n <a href=\"#process\" class=\"nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-700\">\uc804\uccb4 \ud504\ub85c\uc138\uc2a4<\/a>\r\n <a href=\"#tips\" class=\"nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-700\">\uc131\uacf5 \ud301<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <main class=\"container mx-auto p-4 sm:p-6 lg:p-8\">\r\n \r\n <section id=\"intro\" class=\"my-12 scroll-mt-20\">\r\n <div class=\"text-center bg-white p-8 rounded-xl shadow-lg border border-gray-200\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold mb-4 text-gray-900\">\uc911\uc18c\uc911\uacac\uae30\uc5c5\uc744 \uc704\ud55c \uc870\ub2ec\uc5c5\ubb34 \uc644\uc804 \uc815\ubcf5<\/h2>\r\n <p class=\"max-w-3xl mx-auto text-lg text-gray-600\">\r\n \uacf5\uacf5\uc870\ub2ec\uc740 \uc548\uc815\uc801\uc778 \ub9e4\ucd9c \ud655\ubcf4\uc640 \uae30\uc5c5 \uc131\uc7a5\uc758 \ud575\uc2ec \uae30\ud68c\uc785\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \ubcf5\uc7a1\ud55c \uaddc\uc815\uacfc \uc808\ucc28\ub85c \ub9ce\uc740 \uae30\uc5c5\uc774 \uc5b4\ub824\uc6c0\uc744 \uacaa\uc2b5\ub2c8\ub2e4.\r\n '\uc870\ub2ec\uc5c5\ubb34 \ub0b4\ube44\uac8c\uc774\ud130'\ub294 \ub098\ub77c\uc7a5\ud130, \ubca4\ucc98\ub098\ub77c \ub4f1 \ud575\uc2ec \ud50c\ub7ab\ud3fc \uc815\ubcf4\ubd80\ud130 \ud544\uc218 \uc778\uc99d, \uc131\uacf5 \ud301\uae4c\uc9c0, \uc5ec\ub7ec\ubd84\uc758 \uc131\uacf5\uc801\uc778 \uacf5\uacf5\uc2dc\uc7a5 \uc9c4\ucd9c\uc744 \uc704\ud55c \ubaa8\ub4e0 \uc815\ubcf4\ub97c \uc778\ud130\ub799\ud2f0\ube0c\ud558\uac8c \uc81c\uacf5\ud569\ub2c8\ub2e4.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"platforms\" class=\"my-16 scroll-mt-20\">\r\n <div class=\"text-center mb-12\">\r\n <h2 class=\"text-3xl font-bold tracking-tight text-gray-900\">\ud575\uc2ec \ud50c\ub7ab\ud3fc \ube44\uad50: \ub098\ub77c\uc7a5\ud130 vs \ubca4\ucc98\ub098\ub77c<\/h2>\r\n <p class=\"mt-4 text-lg text-gray-600\">\uc6b0\ub9ac \ud68c\uc0ac\uc5d0 \uac00\uc7a5 \uc801\ud569\ud55c \ud50c\ub7ab\ud3fc\uc740 \ubb34\uc5c7\uc77c\uae4c\uc694? \uac01 \ud50c\ub7ab\ud3fc\uc758 \ud2b9\uc9d5\uc744 \ud55c\ub208\uc5d0 \ube44\uad50\ud558\uace0 \uc0c1\uc138 \uc808\ucc28\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694.<\/p>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\r\n <div id=\"nara-card\" class=\"bg-white p-8 rounded-xl shadow-lg border border-gray-200 transform hover:-translate-y-1 transition-transform duration-300\">\r\n <h3 class=\"text-2xl font-bold mb-4 text-center text-blue-700\">\ub098\ub77c\uc7a5\ud130 (\uc885\ud569\uc1fc\ud551\ubab0)<\/h3>\r\n <p class=\"text-gray-600 mb-6\">\ubaa8\ub4e0 \uacf5\uacf5\uae30\uad00\uc774 \uc774\uc6a9\ud558\ub294 \uad6d\uac00 \uc885\ud569 \uc804\uc790\uc870\ub2ec \uc2dc\uc2a4\ud15c\uc73c\ub85c, \uc548\uc815\uc801\uc778 \ub300\uaddc\ubaa8 \uc2dc\uc7a5\uc5d0 \uc9c4\ucd9c\ud560 \uc218 \uc788\ub294 \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 \ud1b5\ub85c\uc785\ub2c8\ub2e4.<\/p>\r\n <ul class=\"space-y-2 text-left mb-6\">\r\n <li class=\"flex items-start\"><span class=\"text-blue-500 font-bold mr-2\">\u2714<\/span> <strong>\uc8fc\uc694 \ub300\uc0c1:<\/strong> \ubaa8\ub4e0 \uc911\uc18c\u00b7\uc911\uacac\uae30\uc5c5<\/li>\r\n <li class=\"flex items-start\"><span class=\"text-blue-500 font-bold mr-2\">\u2714<\/span> <strong>\ud575\uc2ec \uae30\ub2a5:<\/strong> \ub2e4\uc218\uacf5\uae09\uc790\uacc4\uc57d(MAS), \uc785\ucc30, \uacc4\uc57d \uad00\ub9ac<\/li>\r\n <li class=\"flex items-start\"><span class=\"text-blue-500 font-bold mr-2\">\u2714<\/span> <strong>\uae30\ub300 \ud6a8\uacfc:<\/strong> \uc548\uc815\uc801 \ud310\ub85c \ud655\ubcf4, \ub9e4\ucd9c \uc99d\ub300<\/li>\r\n <\/ul>\r\n <button onclick=\"toggleDetails('nara-details')\" class=\"w-full bg-blue-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors\">\uc0c1\uc138 \uc808\ucc28 \ubcf4\uae30<\/button>\r\n <div id=\"nara-details\" class=\"details mt-4 text-left\">\r\n <ol class=\"list-decimal list-inside space-y-2 text-gray-700 border-t pt-4\">\r\n <li><strong>\ud68c\uc6d0 \ub4f1\ub85d \ubc0f \uc9c0\ubb38 \ubcf4\uc548 \ud1a0\ud070 \ub4f1\ub85d:<\/strong> \ub098\ub77c\uc7a5\ud130\uc5d0 \uc0ac\uc5c5\uc790 \uc815\ubcf4\ub85c \ud68c\uc6d0\uac00\uc785 \ud6c4, \uc9c0\ubb38 \ubcf4\uc548 \ud1a0\ud070\uc744 \ub4f1\ub85d\ud558\uc5ec \uc804\uc790 \uc785\ucc30\uc744 \uc704\ud55c \uae30\ucd08\ub97c \ub9c8\ub828\ud569\ub2c8\ub2e4.<\/li>\r\n <li><strong>\uacf5\uae09 \ubb3c\ud488 \ub4f1\ub85d:<\/strong> \uc81c\uc870 \ub610\ub294 \uc720\ud1b5\ud558\ub294 \uc81c\ud488 \uc815\ubcf4\ub97c \ub4f1\ub85d\ud558\uace0, \ud574\ub2f9 \uc81c\ud488\uc774 \ub098\ub77c\uc7a5\ud130 \ub4f1\ub85d \uae30\uc900\uc5d0 \ubd80\ud569\ud558\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4.<\/li>\r\n <li><strong>\ub2e4\uc218\uacf5\uae09\uc790\uacc4\uc57d (MAS) \uccb4\uacb0:<\/strong> 2\uac1c \uc774\uc0c1\uc758 \uc5c5\uccb4\uac00 \ucc38\uc5ec\ud558\ub294 \ub2e4\uc218\uacf5\uae09\uc790\uacc4\uc57d\uc744 \ud1b5\ud574 \uacf5\uacf5\uae30\uad00\uc5d0 \uc81c\ud488\uc744 \uc9c1\uc811 \uacf5\uae09\ud560 \uc218 \uc788\ub294 \uc790\uaca9\uc744 \ud68d\ub4dd\ud569\ub2c8\ub2e4.<\/li>\r\n <\/ol>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"venture-card\" class=\"bg-white p-8 rounded-xl shadow-lg border border-gray-200 transform hover:-translate-y-1 transition-transform duration-300\">\r\n <h3 class=\"text-2xl font-bold mb-4 text-center text-green-700\">\ubca4\ucc98\ub098\ub77c (\ud601\uc2e0\u00b7\ubca4\ucc98 \uc804\uc6a9)<\/h3>\r\n <p class=\"text-gray-600 mb-6\">\uae30\uc220\ub825\uc740 \uc6b0\uc218\ud558\uc9c0\ub9cc \uc778\uc9c0\ub3c4\uac00 \ub0ae\uc740 \ubca4\ucc98\u00b7\ucc3d\uc5c5\uae30\uc5c5\uc758 \ud601\uc2e0 \uc81c\ud488\uc744 \uc704\ud55c \uc804\uc6a9 \uc1fc\ud551\ubab0\ub85c, \uae30\uc220 \uac00\uce58\ub97c \uc778\uc815\ubc1b\uc744 \uc218 \uc788\ub294 \uae30\ud68c\uc785\ub2c8\ub2e4.<\/p>\r\n <ul class=\"space-y-2 text-left mb-6\">\r\n <li class=\"flex items-start\"><span class=\"text-green-500 font-bold mr-2\">\u2714<\/span> <strong>\uc8fc\uc694 \ub300\uc0c1:<\/strong> \uae30\uc220 \uae30\ubc18 \ubca4\ucc98\u00b7\ucc3d\uc5c5\uae30\uc5c5<\/li>\r\n <li class=\"flex items-start\"><span class=\"text-green-500 font-bold mr-2\">\u2714<\/span> <strong>\ud575\uc2ec \uae30\ub2a5:<\/strong> \ud601\uc2e0\uc131\u00b7\uae30\uc220\ub825 \uc911\uc2ec \uc2ec\uc0ac, \uc218\uc758\uacc4\uc57d \uc9c0\uc6d0<\/li>\r\n <li class=\"flex items-start\"><span class=\"text-green-500 font-bold mr-2\">\u2714<\/span> <strong>\uae30\ub300 \ud6a8\uacfc:<\/strong> \uacbd\uc7c1 \uc644\ud654, \uacf5\uc2e0\ub825 \uc788\ub294 \ud64d\ubcf4<\/li>\r\n <\/ul>\r\n <button onclick=\"toggleDetails('venture-details')\" class=\"w-full bg-green-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-green-700 transition-colors\">\uc0c1\uc138 \uc808\ucc28 \ubcf4\uae30<\/button>\r\n <div id=\"venture-details\" class=\"details mt-4 text-left\">\r\n <ol class=\"list-decimal list-inside space-y-2 text-gray-700 border-t pt-4\">\r\n <li><strong>\uc0c1\ud488 \ub4f1\ub85d \uc2e0\uccad:<\/strong> \ubca4\ucc98\ub098\ub77c \ud648\ud398\uc774\uc9c0\ub97c \ud1b5\ud574 \uc0c1\ud488 \ub4f1\ub85d\uc744 \uc2e0\uccad\ud558\uace0, \uc81c\ud488\uc758 \ud601\uc2e0\uc131\uc744 \uc99d\uba85\ud560 \uc11c\ub958\ub97c \uc81c\ucd9c\ud569\ub2c8\ub2e4.<\/li>\r\n <li><strong>\uc2ec\uc0ac \ubc0f \ud3c9\uac00:<\/strong> \uc870\ub2ec\uccad\uc758 \uc804\ubb38 \uc2ec\uc0ac\ub97c \uac70\uccd0 \uc81c\ud488\uc758 \ud601\uc2e0\uc131\uacfc \uae30\uc220\ub825\uc744 \uac1d\uad00\uc801\uc73c\ub85c \ud3c9\uac00\ubc1b\uc2b5\ub2c8\ub2e4.<\/li>\r\n <li><strong>\ub4f1\ub85d \uc644\ub8cc \ubc0f \ud310\ub9e4:<\/strong> \uc2ec\uc0ac \ud1b5\uacfc \uc2dc \ubca4\ucc98\ub098\ub77c \uc1fc\ud551\ubab0\uc5d0 \uc0c1\ud488\uc774 \ub4f1\ub85d\ub418\uc5b4 \uacf5\uacf5\uae30\uad00\uc5d0 \ud310\ub9e4\ud560 \uc218 \uc788\ub294 \uc790\uaca9\uc744 \uc5bb\uc2b5\ub2c8\ub2e4.<\/li>\r\n <\/ol>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n <section id=\"certs\" class=\"my-16 scroll-mt-20\">\r\n <div class=\"text-center mb-12\">\r\n <h2 class=\"text-3xl font-bold tracking-tight text-gray-900\">\uacf5\uacf5\uc870\ub2ec \ud544\uc218 \ud575\uc2ec \uc778\uc99d<\/h2>\r\n <p class=\"mt-4 text-lg text-gray-600\">\uc870\ub2ec \uc2dc\uc7a5\uc758 \uacbd\uc7c1\ub825\uc744 \ub192\uc5ec\uc8fc\ub294 \uc8fc\uc694 \uc778\uc99d\ub4e4\uc744 \ud655\uc778\ud574\ubcf4\uc138\uc694. \ud544\ud130\ub97c \ud1b5\ud574 \uc6d0\ud558\ub294 \uc778\uc99d \uc720\ud615\ub9cc \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n <div id=\"cert-filters\" class=\"mt-6 flex justify-center space-x-2\">\r\n <button data-filter=\"all\" class=\"filter-btn bg-blue-600 text-white py-2 px-4 rounded-lg font-semibold\">\uc804\uccb4 \ubcf4\uae30<\/button>\r\n <button data-filter=\"management\" class=\"filter-btn bg-white text-gray-700 py-2 px-4 rounded-lg font-semibold border border-gray-300 hover:bg-gray-100\">\uacbd\uc601 \uad00\ub828 \uc778\uc99d<\/button>\r\n <button data-filter=\"product\" class=\"filter-btn bg-white text-gray-700 py-2 px-4 rounded-lg font-semibold border border-gray-300 hover:bg-gray-100\">\uc81c\ud488 \uad00\ub828 \uc778\uc99d<\/button>\r\n <\/div>\r\n <\/div>\r\n <div id=\"cert-grid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6\">\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"process\" class=\"my-16 scroll-mt-20\">\r\n <div class=\"text-center mb-12\">\r\n <h2 class=\"text-3xl font-bold tracking-tight text-gray-900\">\uacf5\uacf5\uc870\ub2ec \uc804\uccb4 \ud504\ub85c\uc138\uc2a4 \uc2dc\uac01\ud654<\/h2>\r\n <p class=\"mt-4 text-lg text-gray-600\">\ubcf5\uc7a1\ud55c \uc870\ub2ec \uacfc\uc815\uc744 \ud55c\ub208\uc5d0 \ud30c\uc545\ud560 \uc218 \uc788\ub3c4\ub85d \uc8fc\uc694 \ub2e8\uacc4\ub97c \uc2dc\uac01\ud654\ud588\uc2b5\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-lg border border-gray-200\">\r\n <div class=\"chart-container\">\r\n <canvas id=\"processChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"tips\" class=\"my-16 scroll-mt-20\">\r\n <div class=\"text-center mb-12\">\r\n <h2 class=\"text-3xl font-bold tracking-tight text-gray-900\">\uc131\uacf5\uc801\uc778 \uc870\ub2ec\uc744 \uc704\ud55c 4\uac00\uc9c0 \ud575\uc2ec \ud301<\/h2>\r\n <p class=\"mt-4 text-lg text-gray-600\">\uacbd\uc7c1\uc5d0\uc11c \uc55e\uc11c\ub098\uac00\uae30 \uc704\ud574 \ubc18\ub4dc\uc2dc \uae30\uc5b5\ud574\uc57c \ud560 \uc804\ubb38\uac00\uc758 \uc870\uc5b8\uc785\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n <div class=\"bg-white p-6 rounded-lg shadow-md border border-gray-200\">\r\n <div class=\"flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4 text-2xl font-bold\">1<\/div>\r\n <h3 class=\"text-lg font-semibold mb-2\">\ucd5c\uc2e0 \uaddc\uc815 \ud655\uc778<\/h3>\r\n <p class=\"text-gray-600\">\uc870\ub2ec \uaddc\uc815 \ubc0f \uc2dc\ud589\ub839\uc740 \uc218\uc2dc\ub85c \ubcc0\uacbd\ub429\ub2c8\ub2e4. \ub098\ub77c\uc7a5\ud130 \uacf5\uc9c0\uc0ac\ud56d\uc744 \uc8fc\uae30\uc801\uc73c\ub85c \ud655\uc778\ud558\uc5ec \ucd5c\uc2e0 \uc815\ubcf4\ub97c \ub193\uce58\uc9c0 \ub9c8\uc138\uc694.<\/p>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-lg shadow-md border border-gray-200\">\r\n <div class=\"flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4 text-2xl font-bold\">2<\/div>\r\n <h3 class=\"text-lg font-semibold mb-2\">\ucee8\uc124\ud305 \uc801\uadf9 \ud65c\uc6a9<\/h3>\r\n <p class=\"text-gray-600\">\uc870\ub2ec\uccad \ubc0f \uc911\uc18c\uae30\uc5c5 \uc9c0\uc6d0 \uae30\uad00\uc758 \ubb34\ub8cc \ucee8\uc124\ud305\uc744 \ud65c\uc6a9\ud558\uba74 \ucd08\uae30 \uc2dc\ud589\ucc29\uc624\ub97c \ud06c\uac8c \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-lg shadow-md border border-gray-200\">\r\n <div class=\"flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4 text-2xl font-bold\">3<\/div>\r\n <h3 class=\"text-lg font-semibold mb-2\">\ub9e4\ub825\uc801\uc778 \uc81c\uc548\uc11c<\/h3>\r\n <p class=\"text-gray-600\">\uc81c\ud488 \uc2a4\ud399 \ub098\uc5f4\uc744 \ub118\uc5b4, \uacf5\uacf5\uae30\uad00\uc758 \ubb38\uc81c\ub97c \uc5b4\ub5bb\uac8c \ud574\uacb0\ud560 \uc218 \uc788\ub294\uc9c0 \uad6c\uccb4\uc801\uc778 \uac00\uce58\ub97c \uc81c\uc548\uc11c\uc5d0 \ub2f4\uc544\ub0b4\uc138\uc694.<\/p>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-lg shadow-md border border-gray-200\">\r\n <div class=\"flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4 text-2xl font-bold\">4<\/div>\r\n <h3 class=\"text-lg font-semibold mb-2\">\uc9c0\uc18d\uc801\uc778 \uc0ac\ud6c4\uad00\ub9ac<\/h3>\r\n <p class=\"text-gray-600\">\ub0a9\ud488\uc774 \ub05d\uc774 \uc544\ub2d9\ub2c8\ub2e4. \uafb8\uc900\ud55c \uc720\uc9c0\ubcf4\uc218\uc640 \uace0\uac1d \uc9c0\uc6d0\uc744 \ud1b5\ud574 \uae30\uad00\uacfc\uc758 \uc2e0\ub8b0\ub97c \uc313\ub294 \uac83\uc774 \uc7a5\uae30\uc801\uc778 \uc131\uacf5\uc758 \uc5f4\uc1e0\uc785\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n \r\n <footer class=\"bg-slate-800 text-white mt-16 rounded-t-2xl\">\r\n <div class=\"container mx-auto px-8 py-10\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-start\">\r\n <div class=\"flex flex-col space-y-2\">\r\n <div>\r\n <span class=\"footer-logo-text text-yellow-400\">VisaJobKorea<\/span>\r\n <\/div>\r\n <h3 class=\"footer-company-name text-white\">\ube44\uc790\uc7a1\ucf54\ub9ac\uc544\ud589\uc815\uc0ac\ubb34\uc18c<\/h3>\r\n <p class=\"footer-company-info text-gray-400\">\ud589\uc815\uc0ac\uc758 \uc804\ubb38\uc801\uc778 \uc9c0\uc2dd\uc73c\ub85c \ub3d5\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <div class=\"text-left md:text-right space-y-2\">\r\n <div class=\"footer-contact-info\">\r\n <p>\uc8fc\uc18c: \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 <\/div>\r\n <!-- Updated the contact information based on user request -->\r\n <div class=\"footer-contact-info\">\r\n <p>\uc804\ud654\ubc88\ud638: 010-6584-0070<\/p>\r\n <\/div>\r\n <div class=\"footer-contact-info\">\r\n <p>\ud329\uc2a4\ubc88\ud638: 031-624-2738<\/p>\r\n <\/div>\r\n <div class=\"footer-contact-info\">\r\n <p>\uba54\uc77c: jirunpeople@naver.com<\/p>\r\n <\/div>\r\n <div class=\"footer-contact-info\">\r\n <p>\ud648\ud398\uc774\uc9c0: <a href=\"http:\/\/www.jbgmna.com\" target=\"_blank\">www.jbgmna.com<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-8 border-t border-gray-700 pt-8 text-center\">\r\n <p class=\"text-gray-500 text-sm\">© 2024 \ube44\uc790\uc7a1\ucf54\ub9ac\uc544\ud589\uc815\uc0ac\ubb34\uc18c. All Rights Reserved.<\/p>\r\n <p class=\"text-gray-500 text-sm mt-1\">\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 <\/div>\r\n <\/footer>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n \r\n const certData = [\r\n { name: '\ubca4\ucc98\uae30\uc5c5 \ud655\uc778', type: 'management', desc: '\uae30\uc220\uc131 \ubc0f \uc131\uc7a5\uc131\uc774 \ub192\uc740 \uae30\uc5c5\uc744 \uc778\uc99d\ud558\uc5ec \uc815\ucc45\uc790\uae08, \uc138\uc81c \ud61c\ud0dd \ub4f1\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4.' },\r\n { name: '\uc774\ub178\ube44\uc988', type: 'management', desc: '\uae30\uc220 \uc6b0\uc704\ub97c \ubc14\ud0d5\uc73c\ub85c \uacbd\uc7c1\ub825\uc744 \ud655\ubcf4\ud55c \uae30\uc220\ud601\uc2e0\ud615 \uc911\uc18c\uae30\uc5c5\uc744 \ubc1c\uad74\ud558\uc5ec \uc9c0\uc6d0\ud569\ub2c8\ub2e4.' },\r\n { name: '\uba54\uc778\ube44\uc988', type: 'management', desc: '\ub9c8\ucf00\ud305, \uc870\uc9c1\uad00\ub9ac \ub4f1 \ube44\uc988\ub2c8\uc2a4 \ud601\uc2e0\uc744 \ud1b5\ud574 \uc0c8\ub85c\uc6b4 \uc131\uc7a5 \ub3d9\ub825\uc744 \ud655\ubcf4\ud55c \uacbd\uc601\ud601\uc2e0\ud615 \uc911\uc18c\uae30\uc5c5\uc744 \uc778\uc99d\ud569\ub2c8\ub2e4.' },\r\n { name: '\uc131\ub2a5\uc778\uc99d (EPC)', type: 'product', desc: '\uc911\uc18c\uae30\uc5c5\uc758 \uae30\uc220\uac1c\ubc1c \uc81c\ud488 \uc911 \uc131\ub2a5\uc774 \uc6b0\uc218\ud55c \uc81c\ud488\uc5d0 \ubd80\uc5ec\ud558\uc5ec \uacf5\uacf5\uae30\uad00 \uc6b0\uc120\uad6c\ub9e4 \ub300\uc0c1\uc774 \ub418\ub3c4\ub85d \ud569\ub2c8\ub2e4.' },\r\n { name: '\uc6b0\uc218\uc81c\ud488 \uc9c0\uc815', type: 'product', desc: '\uae30\uc220\ub825, \ud488\uc9c8, \uacf5\uacf5\uc131 \ub4f1\uc744 \uc885\ud569\uc801\uc73c\ub85c \ud3c9\uac00\ud558\uc5ec \uc6b0\uc218 \uc870\ub2ec \ubb3c\ud488\uc73c\ub85c \uc9c0\uc815, \uc218\uc758\uacc4\uc57d \ub4f1\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4.' },\r\n { name: '\ud601\uc2e0\uc81c\ud488 \uc9c0\uc815', type: 'product', desc: '\ud601\uc2e0\uc131\uc774 \ub6f0\uc5b4\ub09c \uc81c\ud488\uc744 \uc120\uc815\ud558\uc5ec 3\ub144\uac04 \uacf5\uacf5\uae30\uad00\uc758 \uc120\ub3c4 \uad6c\ub9e4\ub97c \uc720\ub3c4\ud558\uace0 \ud310\ub85c\ub97c \uc9c0\uc6d0\ud569\ub2c8\ub2e4.' }\r\n ];\r\n\r\n const certGrid = document.getElementById('cert-grid');\r\n const filterButtons = document.querySelectorAll('.filter-btn');\r\n\r\n function renderCerts(filter = 'all') {\r\n certGrid.innerHTML = '';\r\n const filteredData = filter === 'all' ? certData : certData.filter(cert => cert.type === filter);\r\n \r\n filteredData.forEach(cert => {\r\n const card = document.createElement('div');\r\n card.className = `cert-card bg-white p-6 rounded-lg shadow-md border border-gray-200 transition-all duration-300`;\r\n card.dataset.type = cert.type;\r\n \r\n let iconHtml = '';\r\n if(cert.type === 'management'){\r\n iconHtml = `<div class=\"w-12 h-12 flex items-center justify-center rounded-full bg-purple-100 text-purple-600 mb-4 text-2xl\">\ud83c\udfe2<\/div>`;\r\n } else {\r\n iconHtml = `<div class=\"w-12 h-12 flex items-center justify-center rounded-full bg-teal-100 text-teal-600 mb-4 text-2xl\">\ud83d\udce6<\/div>`;\r\n }\r\n\r\n card.innerHTML = `\r\n ${iconHtml}\r\n <h3 class=\"text-xl font-bold mb-2\">${cert.name}<\/h3>\r\n <p class=\"text-gray-600\">${cert.desc}<\/p>\r\n `;\r\n certGrid.appendChild(card);\r\n });\r\n }\r\n\r\n filterButtons.forEach(button => {\r\n button.addEventListener('click', () => {\r\n const filter = button.dataset.filter;\r\n \r\n filterButtons.forEach(btn => {\r\n btn.classList.remove('bg-blue-600', 'text-white');\r\n btn.classList.add('bg-white', 'text-gray-700');\r\n });\r\n \r\n button.classList.add('bg-blue-600', 'text-white');\r\n button.classList.remove('bg-white', 'text-gray-700');\r\n\r\n renderCerts(filter);\r\n });\r\n });\r\n\r\n renderCerts();\r\n\r\n const processChartCtx = document.getElementById('processChart').getContext('2d');\r\n const processChart = new Chart(processChartCtx, {\r\n type: 'bar',\r\n data: {\r\n labels: ['1. \uae30\uc5c5\/\uc81c\ud488 \uc900\ube44 (\uc778\uc99d \ub4f1)', '2. \uc870\ub2ec \ud50c\ub7ab\ud3fc \ub4f1\ub85d', '3. \uc785\ucc30\/\uacc4\uc57d \ucc38\uc5ec', '4. \uacc4\uc57d \uc774\ud589 (\ub0a9\ud488)', '5. \ub300\uae08 \uccad\uad6c \ubc0f \uc0ac\ud6c4\uad00\ub9ac'],\r\n datasets: [{\r\n label: '\uc870\ub2ec \ud504\ub85c\uc138\uc2a4',\r\n data: [20, 40, 60, 80, 100],\r\n backgroundColor: [\r\n 'rgba(59, 130, 246, 0.7)',\r\n 'rgba(34, 197, 94, 0.7)',\r\n 'rgba(234, 179, 8, 0.7)',\r\n 'rgba(249, 115, 22, 0.7)',\r\n 'rgba(239, 68, 68, 0.7)'\r\n ],\r\n borderColor: [\r\n 'rgba(59, 130, 246, 1)',\r\n 'rgba(34, 197, 94, 1)',\r\n 'rgba(234, 179, 8, 1)',\r\n 'rgba(249, 115, 22, 1)',\r\n 'rgba(239, 68, 68, 1)'\r\n ],\r\n borderWidth: 1,\r\n borderRadius: 5,\r\n borderSkipped: false,\r\n }]\r\n },\r\n options: {\r\n indexAxis: 'y',\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n display: false\r\n },\r\n tooltip: {\r\n enabled: false\r\n }\r\n },\r\n scales: {\r\n x: {\r\n display: false,\r\n max: 100\r\n },\r\n y: {\r\n grid: {\r\n display: false\r\n },\r\n ticks: {\r\n font: {\r\n size: 14,\r\n weight: 'bold'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n });\r\n\r\n const mobileMenuButton = document.getElementById('mobile-menu-button');\r\n const mobileMenu = document.getElementById('mobile-menu');\r\n mobileMenuButton.addEventListener('click', () => {\r\n mobileMenu.classList.toggle('hidden');\r\n });\r\n \r\n const navLinks = document.querySelectorAll('.nav-link');\r\n const sections = document.querySelectorAll('main section');\r\n\r\n const observerOptions = {\r\n root: null,\r\n rootMargin: '0px',\r\n threshold: 0.5\r\n };\r\n\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const id = entry.target.getAttribute('id');\r\n navLinks.forEach(link => {\r\n link.classList.remove('active-link');\r\n if (link.getAttribute('href') === `#${id}`) {\r\n link.classList.add('active-link');\r\n }\r\n });\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n sections.forEach(section => {\r\n observer.observe(section);\r\n });\r\n\r\n navLinks.forEach(link => {\r\n link.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n const targetId = link.getAttribute('href');\r\n document.querySelector(targetId).scrollIntoView({\r\n behavior: 'smooth'\r\n });\r\n if (mobileMenu.classList.contains('hidden') === false) {\r\n mobileMenu.classList.add('hidden');\r\n }\r\n });\r\n });\r\n });\r\n\r\n function toggleDetails(elementId) {\r\n const element = document.getElementById(elementId);\r\n if (element.style.maxHeight) {\r\n element.style.maxHeight = null;\r\n } else {\r\n element.style.maxHeight = element.scrollHeight + \"px\";\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>\uc911\uc18c\uc911\uacac\uae30\uc5c5\uc744 \uc704\ud55c \uc778\ud130\ub799\ud2f0\ube0c \uc870\ub2ec\uc5c5\ubb34 \uac00\uc774\ub4dc \ube44\uc790\uc7a1\ucf54\ub9ac\uc544 \uc870\ub2ec\uc5c5\ubb34 \uc18c\uac1c \ud50c\ub7ab\ud3fc \ube44\uad50 \ud575\uc2ec \uc778\uc99d \uc804\uccb4 \ud504\ub85c\uc138\uc2a4 \uc131\uacf5 \ud301 \uc18c\uac1c \ud50c\ub7ab\ud3fc \ube44\uad50 \ud575\uc2ec \uc778\uc99d \uc804\uccb4 \ud504\ub85c\uc138\uc2a4 \uc131\uacf5 \ud301 \uc911\uc18c\uc911\uacac\uae30\uc5c5\uc744 \uc704\ud55c \uc870\ub2ec\uc5c5\ubb34 \uc644\uc804 \uc815\ubcf5 …<\/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-2847","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/jbgmna.com\/index.php?rest_route=\/wp\/v2\/pages\/2847","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=2847"}],"version-history":[{"count":7,"href":"http:\/\/jbgmna.com\/index.php?rest_route=\/wp\/v2\/pages\/2847\/revisions"}],"predecessor-version":[{"id":2854,"href":"http:\/\/jbgmna.com\/index.php?rest_route=\/wp\/v2\/pages\/2847\/revisions\/2854"}],"wp:attachment":[{"href":"http:\/\/jbgmna.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}