\ud2b8\ub9ac M.D. – AI \ubc0f IoT \uae30\ubc18 \uc2a4\ub9c8\ud2b8 \uc218\ubaa9 \uad00\ub9ac \ud50c\ub7ab\ud3fc<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@400;700&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body { font-family: 'Noto Sans KR', sans-serif; }\n .chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 300px; max-height: 400px; }\n @media (min-width: 768px) { .chart-container { height: 350px; } }\n .tree-pin { transition: all 0.3s ease; }\n .tree-pin.selected { transform: scale(1.5); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5); }\n .nav-link { transition: color 0.3s; }\n .nav-link:hover { color: #16a34a; }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800\">\n\n <header class=\"bg-white\/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm\">\n <nav class=\"container mx-auto px-6 py-3 flex justify-between items-center\">\n <a href=\"#hero\" class=\"text-2xl font-bold text-green-700\">\ud83c\udf33 \ud2b8\ub9ac M.D.<\/a>\n <div class=\"hidden md:flex space-x-8\">\n <a href=\"#problem\" class=\"nav-link text-gray-600\">\ubb38\uc81c\uc810<\/a>\n <a href=\"#solution\" class=\"nav-link text-gray-600\">\uc194\ub8e8\uc158 \uccb4\ud5d8<\/a>\n <a href=\"#impact\" class=\"nav-link text-gray-600\">\uae30\ub300 \ud6a8\uacfc<\/a>\n <a href=\"#business\" class=\"nav-link text-gray-600\">\uc131\uc7a5 \uc804\ub7b5<\/a>\n <\/div>\n <\/nav>\n <\/header>\n\n <main>\n <section id=\"hero\" class=\"min-h-[60vh] flex items-center bg-green-50\">\n <div class=\"container mx-auto px-6 text-center\">\n <h1 class=\"text-4xl md:text-6xl font-bold text-gray-800 mb-4\">AI\uc640 IoT, \ub098\ubb34\ub97c \uc9c4\ub2e8\ud558\uace0 \ub3c4\uc2dc\ub97c \uc0b4\ub9ac\ub2e4<\/h1>\n <p class=\"text-lg md:text-xl text-gray-600 max-w-3xl mx-auto\">\n ‘\ud2b8\ub9ac M.D.’\ub294 \ub370\uc774\ud130\uc640 AI \uae30\uc220\uc744 \ud1b5\ud574 \ubcd1\ub4e4\uace0 \uc788\ub294 \ub3c4\uc2dc\uc758 \ub179\uc9c0 \uc778\ud504\ub77c\ub97c \uc608\uce21\ud558\uace0, \uc9c4\ub2e8\ud558\uba70, \uad00\ub9ac\ud558\ub294 \ucc28\uc138\ub300 \uc2a4\ub9c8\ud2b8 \uc218\ubaa9 \uad00\ub9ac \ud50c\ub7ab\ud3fc\uc785\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <\/section>\n\n <section id=\"problem\" class=\"py-16 md:py-24 bg-white\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">\uc6b0\ub9ac\uc758 \ub098\ubb34\ub4e4, \uc870\uc6a9\ud788 \ubcd1\ub4e4\uace0 \uc788\uc2b5\ub2c8\ub2e4<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">\ud604\uc7ac\uc758 \uc218\ubaa9 \uad00\ub9ac\ub294 \uba85\ud655\ud55c \ud55c\uacc4\uc5d0 \ubd80\ub52a\ud614\uc2b5\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-3 gap-8 text-center\">\n <div class=\"bg-gray-50 p-8 rounded-lg shadow-sm\">\n <div class=\"text-5xl mb-4\">\u26c8\ufe0f<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uc0ac\ud6c4\uc57d\ubc29\ubb38\uc2dd \uad00\ub9ac<\/h3>\n <p class=\"text-gray-600\">\ud0dc\ud48d, \uac00\ubb44 \ub4f1 \uc7ac\ud574\uac00 \ubc1c\uc0dd\ud55c \ud6c4\uc5d0\uc57c \ub300\uc751\ud558\ub294 \uc218\ub3d9\uc801 \ubc29\uc2dd\uc73c\ub85c, \ub354 \ud070 \ubcf5\uad6c \ube44\uc6a9\uacfc \uc548\uc804\uc0ac\uace0\ub97c \uc720\ubc1c\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"bg-gray-50 p-8 rounded-lg shadow-sm\">\n <div class=\"text-5xl mb-4\">\ud83d\udca7<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uc790\uc6d0 \ub0ad\ube44 \ubc0f \ube44\ud6a8\uc728<\/h3>\n <p class=\"text-gray-600\">\ud68d\uc77c\uc801\uc778 \uad00\uc218 \uacc4\ud68d\uc73c\ub85c \ubb3c\uacfc \uc778\ub825\uc774 \ub0ad\ube44\ub418\uba70, \ub370\uc774\ud130 \ubd80\uc7ac\ub294 \ube44\ud6a8\uc728\uc801\uc778 \uc911\ubcf5 \uc791\uc5c5\uc744 \ucd08\ub798\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"bg-gray-50 p-8 rounded-lg shadow-sm\">\n <div class=\"text-5xl mb-4\">\u2753<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uac1d\uad00\uc131 \ubd80\uc871\uacfc \ubd84\uc7c1<\/h3>\n <p class=\"text-gray-600\">\uad00\ub9ac\uc790\uc758 \uacbd\ud5d8\uc5d0\ub9cc \uc758\uc874\ud558\ub294 \uc9c4\ub2e8\uc740 \uac1d\uad00\uc131\uc774 \ubd80\uc871\ud558\uc5ec, \ucc45\uc784 \uc18c\uc7ac\uc5d0 \ub300\ud55c \ubd84\uc7c1\uc758 \uc6d0\uc778\uc774 \ub429\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"solution\" class=\"py-16 md:py-24 bg-gray-50\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">\ub098\ubb34\ub97c \uc704\ud55c \uc8fc\uce58\uc758, ‘\ud2b8\ub9ac M.D.’ \uc194\ub8e8\uc158 \uccb4\ud5d8<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">\n ‘\ud2b8\ub9ac M.D.’ \uc911\uc559 \uad00\uc81c \ud50c\ub7ab\ud3fc\uc744 \uc9c1\uc811 \uacbd\ud5d8\ud574\ubcf4\uc138\uc694. \uc9c0\ub3c4 \uc704\uc758 \ub098\ubb34 \ud540\uc744 \ud074\ub9ad\ud558\uc5ec \uc2e4\uc2dc\uac04 \uc0c1\ud0dc\ub97c \ud655\uc778\ud558\uace0, AI\uc758 \uc9c4\ub2e8\uc744 \ubc1b\uc544\ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <div class=\"bg-white p-4 sm:p-8 rounded-xl shadow-lg\">\n <div class=\"grid lg:grid-cols-5 gap-8\">\n <div class=\"lg:col-span-3\">\n <h3 class=\"font-bold text-xl mb-4 text-gray-700\">\ub2e8\uc9c0 \ub0b4 \uc218\ubaa9 \ubd84\ud3ec\ub3c4 (GIS)<\/h3>\n <div id=\"map-container\" class=\"relative w-full h-96 bg-green-100 rounded-lg border-2 border-green-200\">\n \n <\/div>\n <div class=\"flex justify-center space-x-4 mt-4 text-sm\">\n <span class=\"flex items-center\"><div class=\"w-3 h-3 rounded-full bg-green-500 mr-2\"><\/div>\uc815\uc0c1<\/span>\n <span class=\"flex items-center\"><div class=\"w-3 h-3 rounded-full bg-yellow-400 mr-2\"><\/div>\uad00\uc2ec<\/span>\n <span class=\"flex items-center\"><div class=\"w-3 h-3 rounded-full bg-red-500 mr-2\"><\/div>\uc704\ud5d8<\/span>\n <\/div>\n <\/div>\n <div id=\"dashboard-panel\" class=\"lg:col-span-2 bg-gray-50 p-6 rounded-lg\">\n <h3 class=\"font-bold text-xl mb-4 text-gray-700\">\uc218\ubaa9 \uc0c1\uc138 \uc815\ubcf4<\/h3>\n <div id=\"tree-details-placeholder\" class=\"text-gray-500 text-center py-10\">\uc9c0\ub3c4 \uc704\uc758 \ub098\ubb34 \ud540\uc744 \uc120\ud0dd\ud574\uc8fc\uc138\uc694.<\/div>\n <div id=\"tree-details\" class=\"hidden\">\n <h4 id=\"tree-name\" class=\"text-2xl font-bold text-green-700\"><\/h4>\n <div class=\"mt-4 space-y-3\">\n <div class=\"flex justify-between items-center bg-white p-3 rounded-md\">\n <span class=\"font-bold\">\uc0c1\ud0dc:<\/span>\n <span id=\"tree-status\" class=\"px-3 py-1 text-sm font-bold rounded-full\"><\/span>\n <\/div>\n <div class=\"flex justify-between items-center bg-white p-3 rounded-md\">\n <span class=\"font-bold\">\ud1a0\uc591 \uc218\ubd84:<\/span>\n <span id=\"tree-moisture\" class=\"font-bold text-lg\"><\/span>\n <\/div>\n <div class=\"flex justify-between items-center bg-white p-3 rounded-md\">\n <span class=\"font-bold\">\ud1a0\uc591 pH:<\/span>\n <span id=\"tree-ph\" class=\"font-bold text-lg\"><\/span>\n <\/div>\n <\/div>\n <div class=\"mt-6\">\n <h4 class=\"font-bold text-lg mb-2\">AI \uc9c4\ub2e8 \ubc0f \ucc98\ubc29<\/h4>\n <p id=\"ai-recommendation\" class=\"text-gray-600 bg-blue-50 border border-blue-200 p-4 rounded-md text-sm\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mt-8\">\n <h3 class=\"font-bold text-xl mb-4 text-gray-700 text-center\">\uc8fc\uac04 \ud1a0\uc591 \uc218\ubd84 \ubcc0\ud654\ub7c9<\/h3>\n <div class=\"chart-container\">\n <canvas id=\"moistureChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section id=\"impact\" class=\"py-16 md:py-24 bg-white\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">\ub354 \ud478\ub974\uace0, \ub354 \uc548\uc804\ud558\uba70, \ub354 \ud6a8\uc728\uc801\uc778 \ub3c4\uc2dc<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">‘\ud2b8\ub9ac M.D.’ \ub3c4\uc785\uc73c\ub85c \uc2e4\ud604\ub418\ub294 \uae0d\uc815\uc801\uc778 \ubcc0\ud654\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-8\">\n <div class=\"text-center p-6 bg-gray-50 rounded-lg\">\n <div class=\"text-5xl mb-4\">\ud83d\udee1\ufe0f<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uc0ac\uace0 \uc608\ubc29<\/h3>\n <p class=\"text-gray-600\">\uc774\uc0c1 \uc9d5\ud6c4\ub97c \uc120\uc81c\uc801\uc73c\ub85c \uac10\uc9c0\ud558\uc5ec \uc218\ubaa9 \uace0\uc0ac \ubc0f \uc548\uc804\uc0ac\uace0\ub97c \ud68d\uae30\uc801\uc73c\ub85c \uc904\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"text-center p-6 bg-gray-50 rounded-lg\">\n <div class=\"text-5xl mb-4\">\ud83d\udcb0<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uc790\uc6d0 \ucd5c\uc801\ud654<\/h3>\n <p class=\"text-gray-600\">\ub370\uc774\ud130 \uae30\ubc18 \uc815\ubc00 \uad00\uc218\ub85c \ubb3c \uc0ac\uc6a9\ub7c9\uacfc \uad00\ub9ac \uc778\ub825\uc744 30% \uc774\uc0c1 \uc808\uac10\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"text-center p-6 bg-gray-50 rounded-lg\">\n <div class=\"text-5xl mb-4\">\ud83d\udcc8<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uc5c5\ubb34 \ud6a8\uc728 \uadf9\ub300\ud654<\/h3>\n <p class=\"text-gray-600\">\uc9c4\ub2e8-\ucc98\ubc29-\uad6c\ub9e4\uc758 \uc6d0\uc2a4\ud1b1 \ud504\ub85c\uc138\uc2a4\ub85c \ud589\uc815 \uc5c5\ubb34 \ubd80\ub2f4\uc744 \ucd5c\uc18c\ud654\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"text-center p-6 bg-gray-50 rounded-lg\">\n <div class=\"text-5xl mb-4\">\ud83d\udcca<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\ub370\uc774\ud130 \uc790\uc0b0\ud654<\/h3>\n <p class=\"text-gray-600\">\ucd95\uc801\ub41c \ub370\uc774\ud130\ub294 \uc7a5\uae30\uc801\uc778 \ub179\uc9c0 \uad00\ub9ac \uacc4\ud68d \ubc0f \uc608\uc0b0 \uc218\ub9bd\uc758 \uc815\ud655\ub3c4\ub97c \ub192\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <div class=\"mt-12 grid md:grid-cols-2 gap-8 items-center\">\n <div class=\"text-center md:text-left\">\n <h3 class=\"text-2xl font-bold\">\uad6d\ub0b4 \uc870\uacbd \uad00\ub9ac \uc2dc\uc7a5\uc758 \uc0c8\ub85c\uc6b4 \uae30\ud68c<\/h3>\n <p class=\"mt-2 text-gray-600\">\uc5f0\uac04 \uc57d <span class=\"text-green-600 font-bold\">3\uc870 \uc6d0<\/span> \uaddc\ubaa8\uc758 \uad6d\ub0b4 \uc870\uacbd \uad00\ub9ac \uc2dc\uc7a5\uc740 \uc2a4\ub9c8\ud2b8 \uae30\uc220 \ub3c4\uc785 \ucd08\uae30 \ub2e8\uacc4\ub85c, ‘\ud2b8\ub9ac M.D.’\ub294 \ub192\uc740 \uc131\uc7a5 \uc7a0\uc7ac\ub825\uc744 \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc2a4\ub9c8\ud2b8 \uc2dc\ud2f0\uc640 ESG \uacbd\uc601 \ud2b8\ub80c\ub4dc\uc5d0 \ub530\ub77c \ub370\uc774\ud130 \uae30\ubc18\uc758 \uccb4\uacc4\uc801\uc778 \ub179\uc9c0 \uad00\ub9ac \uc218\uc694\ub294 \uacc4\uc18d\ud574\uc11c \uc99d\uac00\ud560 \uac83\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"chart-container h-64 md:h-80\">\n <canvas id=\"marketChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"business\" class=\"py-16 md:py-24 bg-gray-50\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">\uc131\uc7a5 \uc804\ub7b5 \ubc0f \ube44\uc988\ub2c8\uc2a4 \ubaa8\ub378<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">\ub2e8\uacc4\uc801 \uc131\uc7a5\uacfc \ub2e4\uac01\ud654\ub41c \uc218\uc775 \ubaa8\ub378\ub85c \uc2dc\uc7a5\uc744 \uc120\ub3c4\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"mb-12\">\n <h3 class=\"text-2xl font-bold text-center mb-8\">\uac1c\ubc1c \ub85c\ub4dc\ub9f5<\/h3>\n <div class=\"flex flex-col md:flex-row justify-center items-center\">\n <div class=\"flex-1 text-center p-4 m-2 bg-white rounded-lg shadow-sm\">\n <div class=\"font-bold text-green-600\">1\ub2e8\uacc4 (3\uac1c\uc6d4)<\/div>\n <div class=\"font-bold text-lg\">MVP \uace0\ub3c4\ud654<\/div>\n <p class=\"text-sm text-gray-600\">\ud504\ub85c\ud1a0\ud0c0\uc785 \uc548\uc815\ud654 \ubc0f \ud074\ub77c\uc6b0\ub4dc \ubc31\uc5d4\ub4dc \uad6c\ucd95<\/p>\n <\/div>\n <div class=\"text-2xl text-green-500 hidden md:block mx-4\">\u2192<\/div>\n <div class=\"flex-1 text-center p-4 m-2 bg-white rounded-lg shadow-sm\">\n <div class=\"font-bold text-green-600\">2\ub2e8\uacc4 (6\uac1c\uc6d4)<\/div>\n <div class=\"font-bold text-lg\">\ubca0\ud0c0 \ub7f0\uce6d<\/div>\n <p class=\"text-sm text-gray-600\">\uc2dc\uc81c\ud488 \uc81c\uc791, AI \uc5d4\uc9c4 \uc5f0\ub3d9, \ubca0\ud0c0 \uc11c\ube44\uc2a4 \uc6b4\uc601<\/p>\n <\/div>\n <div class=\"text-2xl text-green-500 hidden md:block mx-4\">\u2192<\/div>\n <div class=\"flex-1 text-center p-4 m-2 bg-white rounded-lg shadow-sm\">\n <div class=\"font-bold text-green-600\">3\ub2e8\uacc4 (12\uac1c\uc6d4~)<\/div>\n <div class=\"font-bold text-lg\">\uc815\uc2dd \ucd9c\uc2dc \ubc0f \ud655\uc7a5<\/div>\n <p class=\"text-sm text-gray-600\">SaaS \ubc0f \ud558\ub4dc\uc6e8\uc5b4 \ud310\ub9e4, \ubaa8\ubc14\uc77c \uc571 \ucd9c\uc2dc<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div class=\"order-2 md:order-1\">\n <h3 class=\"text-2xl font-bold text-center md:text-left mb-4\">\ub2e4\uac01\ud654\ub41c \uc218\uc775 \ubaa8\ub378<\/h3>\n <div class=\"space-y-4\">\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-green-500\">\n <h4 class=\"font-bold\">SaaS \uad6c\ub3c5\ub8cc (\uc8fc\ub825)<\/h4>\n <p class=\"text-sm text-gray-600\">\uad00\ub9ac \uc218\ubaa9 \uc218 \ubc0f \uc5f0\ub3d9 \uc7a5\ube44\uc5d0 \ub530\ub978 \uc6d4\/\uc5f0\uac04 \uad6c\ub3c5\ub8cc<\/p>\n <\/div>\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-yellow-500\">\n <h4 class=\"font-bold\">\ud558\ub4dc\uc6e8\uc5b4 \ud310\ub9e4\/\ub80c\ud0c8<\/h4>\n <p class=\"text-sm text-gray-600\">\uc2a4\ub9c8\ud2b8 \ud45c\ucc30 \ubc0f \uc9c4\ub2e8\uae30 \ud310\ub9e4 \ub610\ub294 \ub80c\ud0c8<\/p>\n <\/div>\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-blue-500\">\n <h4 class=\"font-bold\">\uac70\ub798 \uc218\uc218\ub8cc<\/h4>\n <p class=\"text-sm text-gray-600\">\ud50c\ub7ab\ud3fc \ub0b4 \uc790\uc7ac \uad6c\ub9e4 \uc911\uac1c \uc218\uc218\ub8cc<\/p>\n <\/div>\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-purple-500\">\n <h4 class=\"font-bold\">\ub370\uc774\ud130 \ubd84\uc11d \ucee8\uc124\ud305<\/h4>\n <p class=\"text-sm text-gray-600\">\ucd95\uc801\ub41c \ub370\uc774\ud130 \uae30\ubc18 \ud504\ub9ac\ubbf8\uc5c4 \ucee8\uc124\ud305 \uc11c\ube44\uc2a4<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"order-1 md:order-2 chart-container h-80\">\n <canvas id=\"revenueChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n \n <footer class=\"bg-gray-800 text-white py-8\">\n <div class=\"container mx-auto px-6 text-center\">\n <p class=\"text-2xl font-bold mb-2\">\ud83c\udf33 \ud2b8\ub9ac M.D.<\/p>\n <p>‘\ud2b8\ub9ac M.D.’\uc640 \ud568\uaed8 \uc9c0\uc18d\uac00\ub2a5\ud55c \ub179\uc0c9 \ub3c4\uc2dc\uc758 \ubbf8\ub798\ub97c \uc5f4\uc5b4\uac00\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n <p class=\"text-sm mt-4 text-gray-400\">© 2025 (\uc8fc)\ud55c\uc131\ub098\ubb34\uc885\ud569\ubcd1\uc6d0. All Rights Reserved.<\/p>\n <\/div>\n <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n const treeData = [\n { id: 1, name: '101\ub3d9 \uc55e \uc18c\ub098\ubb34', status: '\uc704\ud5d8', moisture: 15, ph: 5.2, x: 20, y: 30, history: [45, 42, 38, 30, 25, 20, 15] },\n { id: 2, name: '\ub180\uc774\ud130 \uc606 \ubc9a\ub098\ubb34', status: '\uad00\uc2ec', moisture: 28, ph: 6.1, x: 45, y: 60, history: [55, 52, 48, 40, 35, 30, 28] },\n { id: 3, name: '\uc815\ubb38 \uc606 \ub290\ud2f0\ub098\ubb34', status: '\uc815\uc0c1', moisture: 55, ph: 6.8, x: 75, y: 20, history: [60, 58, 55, 56, 54, 58, 55] },\n { id: 4, name: '\ud6c4\ubb38 \uc0b0\ucc45\ub85c \uc774\ud31d\ub098\ubb34', status: '\uc815\uc0c1', moisture: 62, ph: 6.5, x: 80, y: 75, history: [65, 63, 60, 61, 64, 63, 62] },\n { id: 5, name: '\uad00\ub9ac\uc0ac\ubb34\uc18c \uc55e \ub2e8\ud48d\ub098\ubb34', status: '\uad00\uc2ec', moisture: 32, ph: 5.8, x: 5, y: 80, history: [50, 45, 42, 38, 35, 33, 32] },\n ];\n\n const mapContainer = document.getElementById('map-container');\n const treeDetailsPlaceholder = document.getElementById('tree-details-placeholder');\n const treeDetailsPanel = document.getElementById('tree-details');\n\n const treeNameEl = document.getElementById('tree-name');\n const treeStatusEl = document.getElementById('tree-status');\n const treeMoistureEl = document.getElementById('tree-moisture');\n const treePhEl = document.getElementById('tree-ph');\n const aiRecommendationEl = document.getElementById('ai-recommendation');\n\n let selectedTreePin = null;\n\n treeData.forEach(tree => {\n const pin = document.createElement('div');\n pin.className = 'tree-pin absolute w-5 h-5 rounded-full cursor-pointer border-2 border-white';\n pin.style.left = `${tree.x}%`;\n pin.style.top = `${tree.y}%`;\n pin.style.transform = 'translate(-50%, -50%)';\n pin.dataset.id = tree.id;\n\n if (tree.status === '\uc815\uc0c1') pin.classList.add('bg-green-500');\n else if (tree.status === '\uad00\uc2ec') pin.classList.add('bg-yellow-400');\n else pin.classList.add('bg-red-500');\n\n pin.addEventListener('click', () => {\n updateDashboard(tree.id);\n if (selectedTreePin) {\n selectedTreePin.classList.remove('selected');\n }\n pin.classList.add('selected');\n selectedTreePin = pin;\n });\n mapContainer.appendChild(pin);\n });\n\n const statusClasses = {\n '\uc815\uc0c1': 'bg-green-100 text-green-800',\n '\uad00\uc2ec': 'bg-yellow-100 text-yellow-800',\n '\uc704\ud5d8': 'bg-red-100 text-red-800',\n };\n\n const recommendations = {\n '\uc815\uc0c1': '\ud604\uc7ac \uc0dd\uc721 \uc0c1\ud0dc\uac00 \uc591\ud638\ud569\ub2c8\ub2e4. \uc8fc\uae30\uc801\uc778 \ubaa8\ub2c8\ud130\ub9c1\uc744 \uc720\uc9c0\ud574\uc8fc\uc138\uc694.',\n '\uad00\uc2ec': '\ud1a0\uc591 \uc218\ubd84 \ubc0f \uc0b0\ub3c4 \uc800\ud558\uac00 \uad00\ucc30\ub429\ub2c8\ub2e4. \uc601\uc591\uc81c \ud22c\uc785\uc744 \uace0\ub824\ud558\uace0, \uad00\uc218 \uc8fc\uae30\ub97c \ub2e8\ucd95\ud560 \uac83\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4.',\n '\uc704\ud5d8': '\ud1a0\uc591 \uc218\ubd84\uc774 \uc2ec\uac01\ud558\uac8c \ubd80\uc871\ud569\ub2c8\ub2e4. \uc989\uc2dc \uad00\uc218\uac00 \ud544\uc694\ud558\uba70, \ubcd1\ud574\ucda9 \uac10\uc5fc \uc5ec\ubd80 \ud655\uc778\uc744 \uc704\ud574 \uc804\ubb38\uac00 \uc815\ubc00 \uc9c4\ub2e8\uc774 \uc2dc\uae09\ud569\ub2c8\ub2e4. \ud50c\ub7ab\ud3fc\uc744 \ud1b5\ud574 \\'\uae34\uae09 \ubc29\uc81c \uc11c\ube44\uc2a4\\'\ub97c \uc694\uccad\ud558\uc138\uc694.',\n };\n\n function updateDashboard(id) {\n const tree = treeData.find(t => t.id === id);\n if (!tree) return;\n\n treeDetailsPlaceholder.classList.add('hidden');\n treeDetailsPanel.classList.remove('hidden');\n\n treeNameEl.textContent = tree.name;\n treeMoistureEl.textContent = `${tree.moisture}%`;\n treePhEl.textContent = tree.ph;\n \n treeStatusEl.textContent = tree.status;\n treeStatusEl.className = `px-3 py-1 text-sm font-bold rounded-full ${statusClasses[tree.status]}`;\n \n aiRecommendationEl.textContent = recommendations[tree.status];\n\n updateMoistureChart(tree.history, tree.status);\n }\n \n let moistureChart, marketChart, revenueChart;\n\n function updateMoistureChart(data, status) {\n const statusColors = {\n '\uc815\uc0c1': 'rgba(22, 163, 74, 0.5)',\n '\uad00\uc2ec': 'rgba(250, 204, 21, 0.5)',\n '\uc704\ud5d8': 'rgba(239, 68, 68, 0.5)',\n };\n moistureChart.data.datasets[0].data = data;\n moistureChart.data.datasets[0].borderColor = statusColors[status].replace('0.5', '1');\n moistureChart.data.datasets[0].backgroundColor = statusColors[status];\n moistureChart.update();\n }\n\n const moistureCtx = document.getElementById('moistureChart').getContext('2d');\n moistureChart = new Chart(moistureCtx, {\n type: 'line',\n data: {\n labels: ['6\uc77c \uc804', '5\uc77c \uc804', '4\uc77c \uc804', '3\uc77c \uc804', '2\uc77c \uc804', '\uc5b4\uc81c', '\uc624\ub298'],\n datasets: [{\n label: '\ud1a0\uc591 \uc218\ubd84 (%)',\n data: [],\n fill: true,\n tension: 0.4,\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n max: 100\n }\n },\n plugins: {\n legend: {\n display: false\n }\n }\n }\n });\n \n const marketCtx = document.getElementById('marketChart').getContext('2d');\n marketChart = new Chart(marketCtx, {\n type: 'doughnut',\n data: {\n labels: ['\uae30\uc874 \uad00\ub9ac \uc2dc\uc7a5', '\uc2a4\ub9c8\ud2b8 \uad00\ub9ac \uc7a0\uc7ac \uc2dc\uc7a5'],\n datasets: [{\n data: [95, 5],\n backgroundColor: ['#d1d5db', '#16a34a'],\n borderColor: ['#f9fafb', '#f9fafb'],\n borderWidth: 4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n },\n title: {\n display: true,\n text: '\uad6d\ub0b4 \uc870\uacbd \uad00\ub9ac \uc2dc\uc7a5 \ud604\ud669'\n }\n }\n }\n });\n\n const revenueCtx = document.getElementById('revenueChart').getContext('2d');\n revenueChart = new Chart(revenueCtx, {\n type: 'bar',\n data: {\n labels: ['SaaS \uad6c\ub3c5\ub8cc', '\ud558\ub4dc\uc6e8\uc5b4', '\uac70\ub798 \uc218\uc218\ub8cc', '\ucee8\uc124\ud305'],\n datasets: [{\n label: '\uc608\uc0c1 \uc218\uc775 \ube44\uc911 (%)',\n data: [60, 25, 10, 5],\n backgroundColor: [\n 'rgba(22, 163, 74, 0.7)',\n 'rgba(250, 204, 21, 0.7)',\n 'rgba(59, 130, 246, 0.7)',\n 'rgba(147, 51, 234, 0.7)'\n ],\n borderColor: [\n 'rgba(22, 163, 74, 1)',\n 'rgba(250, 204, 21, 1)',\n 'rgba(59, 130, 246, 1)',\n 'rgba(147, 51, 234, 1)'\n ],\n borderWidth: 1\n }]\n },\n options: {\n indexAxis: 'y',\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: false\n },\n title: {\n display: true,\n text: '\uc218\uc775 \ubaa8\ub378\ubcc4 \uc608\uc0c1 \ube44\uc911'\n }\n },\n scales: {\n x: {\n beginAtZero: true,\n max: 100\n }\n }\n }\n });\n\n updateDashboard(1);\n const firstPin = document.querySelector('.tree-pin[data-id=\"1\"]');\n if(firstPin) {\n firstPin.classList.add('selected');\n selectedTreePin = firstPin;\n }\n\n});\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\ud2b8\ub9ac M.D. – AI \ubc0f IoT \uae30\ubc18 \uc2a4\ub9c8\ud2b8 \uc218\ubaa9 \uad00\ub9ac \ud50c\ub7ab\ud3fc \ud83c\udf33 \ud2b8\ub9ac M.D. \ubb38\uc81c\uc810 \uc194\ub8e8\uc158 \uccb4\ud5d8 \uae30\ub300 \ud6a8\uacfc \uc131\uc7a5 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3963","post","type-post","status-publish","format-standard","hentry","category-_"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"darius","author_link":"https:\/\/hstc.treecare.co.kr\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"\ud2b8\ub9ac M.D. – AI \ubc0f IoT \uae30\ubc18 \uc2a4\ub9c8\ud2b8 \uc218\ubaa9 \uad00\ub9ac \ud50c\ub7ab\ud3fc \ud83c\udf33 \ud2b8\ub9ac M.D. \ubb38\uc81c\uc810 \uc194\ub8e8\uc158 \uccb4\ud5d8 \uae30\ub300 \ud6a8\uacfc \uc131\uc7a5 […]","_links":{"self":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/3963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3963"}],"version-history":[{"count":1,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/3963\/revisions"}],"predecessor-version":[{"id":3964,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/3963\/revisions\/3964"}],"wp:attachment":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3963,"date":"2025-07-17T01:17:16","date_gmt":"2025-07-17T01:17:16","guid":{"rendered":"https:\/\/hstc.treecare.co.kr\/?p=3963"},"modified":"2025-07-17T01:17:16","modified_gmt":"2025-07-17T01:17:16","slug":"tree-md-project","status":"publish","type":"post","link":"https:\/\/hstc.treecare.co.kr\/?p=3963","title":{"rendered":"Tree MD Project"},"content":{"rendered":"\n\n\n\n \n \n \ud2b8\ub9ac M.D. – AI \ubc0f IoT \uae30\ubc18 \uc2a4\ub9c8\ud2b8 \uc218\ubaa9 \uad00\ub9ac \ud50c\ub7ab\ud3fc<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@400;700&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body { font-family: 'Noto Sans KR', sans-serif; }\n .chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 300px; max-height: 400px; }\n @media (min-width: 768px) { .chart-container { height: 350px; } }\n .tree-pin { transition: all 0.3s ease; }\n .tree-pin.selected { transform: scale(1.5); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5); }\n .nav-link { transition: color 0.3s; }\n .nav-link:hover { color: #16a34a; }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800\">\n\n <header class=\"bg-white\/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm\">\n <nav class=\"container mx-auto px-6 py-3 flex justify-between items-center\">\n <a href=\"#hero\" class=\"text-2xl font-bold text-green-700\">\ud83c\udf33 \ud2b8\ub9ac M.D.<\/a>\n <div class=\"hidden md:flex space-x-8\">\n <a href=\"#problem\" class=\"nav-link text-gray-600\">\ubb38\uc81c\uc810<\/a>\n <a href=\"#solution\" class=\"nav-link text-gray-600\">\uc194\ub8e8\uc158 \uccb4\ud5d8<\/a>\n <a href=\"#impact\" class=\"nav-link text-gray-600\">\uae30\ub300 \ud6a8\uacfc<\/a>\n <a href=\"#business\" class=\"nav-link text-gray-600\">\uc131\uc7a5 \uc804\ub7b5<\/a>\n <\/div>\n <\/nav>\n <\/header>\n\n <main>\n <section id=\"hero\" class=\"min-h-[60vh] flex items-center bg-green-50\">\n <div class=\"container mx-auto px-6 text-center\">\n <h1 class=\"text-4xl md:text-6xl font-bold text-gray-800 mb-4\">AI\uc640 IoT, \ub098\ubb34\ub97c \uc9c4\ub2e8\ud558\uace0 \ub3c4\uc2dc\ub97c \uc0b4\ub9ac\ub2e4<\/h1>\n <p class=\"text-lg md:text-xl text-gray-600 max-w-3xl mx-auto\">\n ‘\ud2b8\ub9ac M.D.’\ub294 \ub370\uc774\ud130\uc640 AI \uae30\uc220\uc744 \ud1b5\ud574 \ubcd1\ub4e4\uace0 \uc788\ub294 \ub3c4\uc2dc\uc758 \ub179\uc9c0 \uc778\ud504\ub77c\ub97c \uc608\uce21\ud558\uace0, \uc9c4\ub2e8\ud558\uba70, \uad00\ub9ac\ud558\ub294 \ucc28\uc138\ub300 \uc2a4\ub9c8\ud2b8 \uc218\ubaa9 \uad00\ub9ac \ud50c\ub7ab\ud3fc\uc785\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <\/section>\n\n <section id=\"problem\" class=\"py-16 md:py-24 bg-white\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">\uc6b0\ub9ac\uc758 \ub098\ubb34\ub4e4, \uc870\uc6a9\ud788 \ubcd1\ub4e4\uace0 \uc788\uc2b5\ub2c8\ub2e4<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">\ud604\uc7ac\uc758 \uc218\ubaa9 \uad00\ub9ac\ub294 \uba85\ud655\ud55c \ud55c\uacc4\uc5d0 \ubd80\ub52a\ud614\uc2b5\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-3 gap-8 text-center\">\n <div class=\"bg-gray-50 p-8 rounded-lg shadow-sm\">\n <div class=\"text-5xl mb-4\">\u26c8\ufe0f<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uc0ac\ud6c4\uc57d\ubc29\ubb38\uc2dd \uad00\ub9ac<\/h3>\n <p class=\"text-gray-600\">\ud0dc\ud48d, \uac00\ubb44 \ub4f1 \uc7ac\ud574\uac00 \ubc1c\uc0dd\ud55c \ud6c4\uc5d0\uc57c \ub300\uc751\ud558\ub294 \uc218\ub3d9\uc801 \ubc29\uc2dd\uc73c\ub85c, \ub354 \ud070 \ubcf5\uad6c \ube44\uc6a9\uacfc \uc548\uc804\uc0ac\uace0\ub97c \uc720\ubc1c\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"bg-gray-50 p-8 rounded-lg shadow-sm\">\n <div class=\"text-5xl mb-4\">\ud83d\udca7<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uc790\uc6d0 \ub0ad\ube44 \ubc0f \ube44\ud6a8\uc728<\/h3>\n <p class=\"text-gray-600\">\ud68d\uc77c\uc801\uc778 \uad00\uc218 \uacc4\ud68d\uc73c\ub85c \ubb3c\uacfc \uc778\ub825\uc774 \ub0ad\ube44\ub418\uba70, \ub370\uc774\ud130 \ubd80\uc7ac\ub294 \ube44\ud6a8\uc728\uc801\uc778 \uc911\ubcf5 \uc791\uc5c5\uc744 \ucd08\ub798\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"bg-gray-50 p-8 rounded-lg shadow-sm\">\n <div class=\"text-5xl mb-4\">\u2753<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uac1d\uad00\uc131 \ubd80\uc871\uacfc \ubd84\uc7c1<\/h3>\n <p class=\"text-gray-600\">\uad00\ub9ac\uc790\uc758 \uacbd\ud5d8\uc5d0\ub9cc \uc758\uc874\ud558\ub294 \uc9c4\ub2e8\uc740 \uac1d\uad00\uc131\uc774 \ubd80\uc871\ud558\uc5ec, \ucc45\uc784 \uc18c\uc7ac\uc5d0 \ub300\ud55c \ubd84\uc7c1\uc758 \uc6d0\uc778\uc774 \ub429\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"solution\" class=\"py-16 md:py-24 bg-gray-50\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">\ub098\ubb34\ub97c \uc704\ud55c \uc8fc\uce58\uc758, ‘\ud2b8\ub9ac M.D.’ \uc194\ub8e8\uc158 \uccb4\ud5d8<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">\n ‘\ud2b8\ub9ac M.D.’ \uc911\uc559 \uad00\uc81c \ud50c\ub7ab\ud3fc\uc744 \uc9c1\uc811 \uacbd\ud5d8\ud574\ubcf4\uc138\uc694. \uc9c0\ub3c4 \uc704\uc758 \ub098\ubb34 \ud540\uc744 \ud074\ub9ad\ud558\uc5ec \uc2e4\uc2dc\uac04 \uc0c1\ud0dc\ub97c \ud655\uc778\ud558\uace0, AI\uc758 \uc9c4\ub2e8\uc744 \ubc1b\uc544\ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <div class=\"bg-white p-4 sm:p-8 rounded-xl shadow-lg\">\n <div class=\"grid lg:grid-cols-5 gap-8\">\n <div class=\"lg:col-span-3\">\n <h3 class=\"font-bold text-xl mb-4 text-gray-700\">\ub2e8\uc9c0 \ub0b4 \uc218\ubaa9 \ubd84\ud3ec\ub3c4 (GIS)<\/h3>\n <div id=\"map-container\" class=\"relative w-full h-96 bg-green-100 rounded-lg border-2 border-green-200\">\n \n <\/div>\n <div class=\"flex justify-center space-x-4 mt-4 text-sm\">\n <span class=\"flex items-center\"><div class=\"w-3 h-3 rounded-full bg-green-500 mr-2\"><\/div>\uc815\uc0c1<\/span>\n <span class=\"flex items-center\"><div class=\"w-3 h-3 rounded-full bg-yellow-400 mr-2\"><\/div>\uad00\uc2ec<\/span>\n <span class=\"flex items-center\"><div class=\"w-3 h-3 rounded-full bg-red-500 mr-2\"><\/div>\uc704\ud5d8<\/span>\n <\/div>\n <\/div>\n <div id=\"dashboard-panel\" class=\"lg:col-span-2 bg-gray-50 p-6 rounded-lg\">\n <h3 class=\"font-bold text-xl mb-4 text-gray-700\">\uc218\ubaa9 \uc0c1\uc138 \uc815\ubcf4<\/h3>\n <div id=\"tree-details-placeholder\" class=\"text-gray-500 text-center py-10\">\uc9c0\ub3c4 \uc704\uc758 \ub098\ubb34 \ud540\uc744 \uc120\ud0dd\ud574\uc8fc\uc138\uc694.<\/div>\n <div id=\"tree-details\" class=\"hidden\">\n <h4 id=\"tree-name\" class=\"text-2xl font-bold text-green-700\"><\/h4>\n <div class=\"mt-4 space-y-3\">\n <div class=\"flex justify-between items-center bg-white p-3 rounded-md\">\n <span class=\"font-bold\">\uc0c1\ud0dc:<\/span>\n <span id=\"tree-status\" class=\"px-3 py-1 text-sm font-bold rounded-full\"><\/span>\n <\/div>\n <div class=\"flex justify-between items-center bg-white p-3 rounded-md\">\n <span class=\"font-bold\">\ud1a0\uc591 \uc218\ubd84:<\/span>\n <span id=\"tree-moisture\" class=\"font-bold text-lg\"><\/span>\n <\/div>\n <div class=\"flex justify-between items-center bg-white p-3 rounded-md\">\n <span class=\"font-bold\">\ud1a0\uc591 pH:<\/span>\n <span id=\"tree-ph\" class=\"font-bold text-lg\"><\/span>\n <\/div>\n <\/div>\n <div class=\"mt-6\">\n <h4 class=\"font-bold text-lg mb-2\">AI \uc9c4\ub2e8 \ubc0f \ucc98\ubc29<\/h4>\n <p id=\"ai-recommendation\" class=\"text-gray-600 bg-blue-50 border border-blue-200 p-4 rounded-md text-sm\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mt-8\">\n <h3 class=\"font-bold text-xl mb-4 text-gray-700 text-center\">\uc8fc\uac04 \ud1a0\uc591 \uc218\ubd84 \ubcc0\ud654\ub7c9<\/h3>\n <div class=\"chart-container\">\n <canvas id=\"moistureChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section id=\"impact\" class=\"py-16 md:py-24 bg-white\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">\ub354 \ud478\ub974\uace0, \ub354 \uc548\uc804\ud558\uba70, \ub354 \ud6a8\uc728\uc801\uc778 \ub3c4\uc2dc<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">‘\ud2b8\ub9ac M.D.’ \ub3c4\uc785\uc73c\ub85c \uc2e4\ud604\ub418\ub294 \uae0d\uc815\uc801\uc778 \ubcc0\ud654\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-8\">\n <div class=\"text-center p-6 bg-gray-50 rounded-lg\">\n <div class=\"text-5xl mb-4\">\ud83d\udee1\ufe0f<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uc0ac\uace0 \uc608\ubc29<\/h3>\n <p class=\"text-gray-600\">\uc774\uc0c1 \uc9d5\ud6c4\ub97c \uc120\uc81c\uc801\uc73c\ub85c \uac10\uc9c0\ud558\uc5ec \uc218\ubaa9 \uace0\uc0ac \ubc0f \uc548\uc804\uc0ac\uace0\ub97c \ud68d\uae30\uc801\uc73c\ub85c \uc904\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"text-center p-6 bg-gray-50 rounded-lg\">\n <div class=\"text-5xl mb-4\">\ud83d\udcb0<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uc790\uc6d0 \ucd5c\uc801\ud654<\/h3>\n <p class=\"text-gray-600\">\ub370\uc774\ud130 \uae30\ubc18 \uc815\ubc00 \uad00\uc218\ub85c \ubb3c \uc0ac\uc6a9\ub7c9\uacfc \uad00\ub9ac \uc778\ub825\uc744 30% \uc774\uc0c1 \uc808\uac10\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"text-center p-6 bg-gray-50 rounded-lg\">\n <div class=\"text-5xl mb-4\">\ud83d\udcc8<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uc5c5\ubb34 \ud6a8\uc728 \uadf9\ub300\ud654<\/h3>\n <p class=\"text-gray-600\">\uc9c4\ub2e8-\ucc98\ubc29-\uad6c\ub9e4\uc758 \uc6d0\uc2a4\ud1b1 \ud504\ub85c\uc138\uc2a4\ub85c \ud589\uc815 \uc5c5\ubb34 \ubd80\ub2f4\uc744 \ucd5c\uc18c\ud654\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"text-center p-6 bg-gray-50 rounded-lg\">\n <div class=\"text-5xl mb-4\">\ud83d\udcca<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\ub370\uc774\ud130 \uc790\uc0b0\ud654<\/h3>\n <p class=\"text-gray-600\">\ucd95\uc801\ub41c \ub370\uc774\ud130\ub294 \uc7a5\uae30\uc801\uc778 \ub179\uc9c0 \uad00\ub9ac \uacc4\ud68d \ubc0f \uc608\uc0b0 \uc218\ub9bd\uc758 \uc815\ud655\ub3c4\ub97c \ub192\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <div class=\"mt-12 grid md:grid-cols-2 gap-8 items-center\">\n <div class=\"text-center md:text-left\">\n <h3 class=\"text-2xl font-bold\">\uad6d\ub0b4 \uc870\uacbd \uad00\ub9ac \uc2dc\uc7a5\uc758 \uc0c8\ub85c\uc6b4 \uae30\ud68c<\/h3>\n <p class=\"mt-2 text-gray-600\">\uc5f0\uac04 \uc57d <span class=\"text-green-600 font-bold\">3\uc870 \uc6d0<\/span> \uaddc\ubaa8\uc758 \uad6d\ub0b4 \uc870\uacbd \uad00\ub9ac \uc2dc\uc7a5\uc740 \uc2a4\ub9c8\ud2b8 \uae30\uc220 \ub3c4\uc785 \ucd08\uae30 \ub2e8\uacc4\ub85c, ‘\ud2b8\ub9ac M.D.’\ub294 \ub192\uc740 \uc131\uc7a5 \uc7a0\uc7ac\ub825\uc744 \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc2a4\ub9c8\ud2b8 \uc2dc\ud2f0\uc640 ESG \uacbd\uc601 \ud2b8\ub80c\ub4dc\uc5d0 \ub530\ub77c \ub370\uc774\ud130 \uae30\ubc18\uc758 \uccb4\uacc4\uc801\uc778 \ub179\uc9c0 \uad00\ub9ac \uc218\uc694\ub294 \uacc4\uc18d\ud574\uc11c \uc99d\uac00\ud560 \uac83\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"chart-container h-64 md:h-80\">\n <canvas id=\"marketChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"business\" class=\"py-16 md:py-24 bg-gray-50\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">\uc131\uc7a5 \uc804\ub7b5 \ubc0f \ube44\uc988\ub2c8\uc2a4 \ubaa8\ub378<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">\ub2e8\uacc4\uc801 \uc131\uc7a5\uacfc \ub2e4\uac01\ud654\ub41c \uc218\uc775 \ubaa8\ub378\ub85c \uc2dc\uc7a5\uc744 \uc120\ub3c4\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"mb-12\">\n <h3 class=\"text-2xl font-bold text-center mb-8\">\uac1c\ubc1c \ub85c\ub4dc\ub9f5<\/h3>\n <div class=\"flex flex-col md:flex-row justify-center items-center\">\n <div class=\"flex-1 text-center p-4 m-2 bg-white rounded-lg shadow-sm\">\n <div class=\"font-bold text-green-600\">1\ub2e8\uacc4 (3\uac1c\uc6d4)<\/div>\n <div class=\"font-bold text-lg\">MVP \uace0\ub3c4\ud654<\/div>\n <p class=\"text-sm text-gray-600\">\ud504\ub85c\ud1a0\ud0c0\uc785 \uc548\uc815\ud654 \ubc0f \ud074\ub77c\uc6b0\ub4dc \ubc31\uc5d4\ub4dc \uad6c\ucd95<\/p>\n <\/div>\n <div class=\"text-2xl text-green-500 hidden md:block mx-4\">\u2192<\/div>\n <div class=\"flex-1 text-center p-4 m-2 bg-white rounded-lg shadow-sm\">\n <div class=\"font-bold text-green-600\">2\ub2e8\uacc4 (6\uac1c\uc6d4)<\/div>\n <div class=\"font-bold text-lg\">\ubca0\ud0c0 \ub7f0\uce6d<\/div>\n <p class=\"text-sm text-gray-600\">\uc2dc\uc81c\ud488 \uc81c\uc791, AI \uc5d4\uc9c4 \uc5f0\ub3d9, \ubca0\ud0c0 \uc11c\ube44\uc2a4 \uc6b4\uc601<\/p>\n <\/div>\n <div class=\"text-2xl text-green-500 hidden md:block mx-4\">\u2192<\/div>\n <div class=\"flex-1 text-center p-4 m-2 bg-white rounded-lg shadow-sm\">\n <div class=\"font-bold text-green-600\">3\ub2e8\uacc4 (12\uac1c\uc6d4~)<\/div>\n <div class=\"font-bold text-lg\">\uc815\uc2dd \ucd9c\uc2dc \ubc0f \ud655\uc7a5<\/div>\n <p class=\"text-sm text-gray-600\">SaaS \ubc0f \ud558\ub4dc\uc6e8\uc5b4 \ud310\ub9e4, \ubaa8\ubc14\uc77c \uc571 \ucd9c\uc2dc<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div class=\"order-2 md:order-1\">\n <h3 class=\"text-2xl font-bold text-center md:text-left mb-4\">\ub2e4\uac01\ud654\ub41c \uc218\uc775 \ubaa8\ub378<\/h3>\n <div class=\"space-y-4\">\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-green-500\">\n <h4 class=\"font-bold\">SaaS \uad6c\ub3c5\ub8cc (\uc8fc\ub825)<\/h4>\n <p class=\"text-sm text-gray-600\">\uad00\ub9ac \uc218\ubaa9 \uc218 \ubc0f \uc5f0\ub3d9 \uc7a5\ube44\uc5d0 \ub530\ub978 \uc6d4\/\uc5f0\uac04 \uad6c\ub3c5\ub8cc<\/p>\n <\/div>\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-yellow-500\">\n <h4 class=\"font-bold\">\ud558\ub4dc\uc6e8\uc5b4 \ud310\ub9e4\/\ub80c\ud0c8<\/h4>\n <p class=\"text-sm text-gray-600\">\uc2a4\ub9c8\ud2b8 \ud45c\ucc30 \ubc0f \uc9c4\ub2e8\uae30 \ud310\ub9e4 \ub610\ub294 \ub80c\ud0c8<\/p>\n <\/div>\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-blue-500\">\n <h4 class=\"font-bold\">\uac70\ub798 \uc218\uc218\ub8cc<\/h4>\n <p class=\"text-sm text-gray-600\">\ud50c\ub7ab\ud3fc \ub0b4 \uc790\uc7ac \uad6c\ub9e4 \uc911\uac1c \uc218\uc218\ub8cc<\/p>\n <\/div>\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-purple-500\">\n <h4 class=\"font-bold\">\ub370\uc774\ud130 \ubd84\uc11d \ucee8\uc124\ud305<\/h4>\n <p class=\"text-sm text-gray-600\">\ucd95\uc801\ub41c \ub370\uc774\ud130 \uae30\ubc18 \ud504\ub9ac\ubbf8\uc5c4 \ucee8\uc124\ud305 \uc11c\ube44\uc2a4<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"order-1 md:order-2 chart-container h-80\">\n <canvas id=\"revenueChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n \n <footer class=\"bg-gray-800 text-white py-8\">\n <div class=\"container mx-auto px-6 text-center\">\n <p class=\"text-2xl font-bold mb-2\">\ud83c\udf33 \ud2b8\ub9ac M.D.<\/p>\n <p>‘\ud2b8\ub9ac M.D.’\uc640 \ud568\uaed8 \uc9c0\uc18d\uac00\ub2a5\ud55c \ub179\uc0c9 \ub3c4\uc2dc\uc758 \ubbf8\ub798\ub97c \uc5f4\uc5b4\uac00\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n <p class=\"text-sm mt-4 text-gray-400\">© 2025 (\uc8fc)\ud55c\uc131\ub098\ubb34\uc885\ud569\ubcd1\uc6d0. All Rights Reserved.<\/p>\n <\/div>\n <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n const treeData = [\n { id: 1, name: '101\ub3d9 \uc55e \uc18c\ub098\ubb34', status: '\uc704\ud5d8', moisture: 15, ph: 5.2, x: 20, y: 30, history: [45, 42, 38, 30, 25, 20, 15] },\n { id: 2, name: '\ub180\uc774\ud130 \uc606 \ubc9a\ub098\ubb34', status: '\uad00\uc2ec', moisture: 28, ph: 6.1, x: 45, y: 60, history: [55, 52, 48, 40, 35, 30, 28] },\n { id: 3, name: '\uc815\ubb38 \uc606 \ub290\ud2f0\ub098\ubb34', status: '\uc815\uc0c1', moisture: 55, ph: 6.8, x: 75, y: 20, history: [60, 58, 55, 56, 54, 58, 55] },\n { id: 4, name: '\ud6c4\ubb38 \uc0b0\ucc45\ub85c \uc774\ud31d\ub098\ubb34', status: '\uc815\uc0c1', moisture: 62, ph: 6.5, x: 80, y: 75, history: [65, 63, 60, 61, 64, 63, 62] },\n { id: 5, name: '\uad00\ub9ac\uc0ac\ubb34\uc18c \uc55e \ub2e8\ud48d\ub098\ubb34', status: '\uad00\uc2ec', moisture: 32, ph: 5.8, x: 5, y: 80, history: [50, 45, 42, 38, 35, 33, 32] },\n ];\n\n const mapContainer = document.getElementById('map-container');\n const treeDetailsPlaceholder = document.getElementById('tree-details-placeholder');\n const treeDetailsPanel = document.getElementById('tree-details');\n\n const treeNameEl = document.getElementById('tree-name');\n const treeStatusEl = document.getElementById('tree-status');\n const treeMoistureEl = document.getElementById('tree-moisture');\n const treePhEl = document.getElementById('tree-ph');\n const aiRecommendationEl = document.getElementById('ai-recommendation');\n\n let selectedTreePin = null;\n\n treeData.forEach(tree => {\n const pin = document.createElement('div');\n pin.className = 'tree-pin absolute w-5 h-5 rounded-full cursor-pointer border-2 border-white';\n pin.style.left = `${tree.x}%`;\n pin.style.top = `${tree.y}%`;\n pin.style.transform = 'translate(-50%, -50%)';\n pin.dataset.id = tree.id;\n\n if (tree.status === '\uc815\uc0c1') pin.classList.add('bg-green-500');\n else if (tree.status === '\uad00\uc2ec') pin.classList.add('bg-yellow-400');\n else pin.classList.add('bg-red-500');\n\n pin.addEventListener('click', () => {\n updateDashboard(tree.id);\n if (selectedTreePin) {\n selectedTreePin.classList.remove('selected');\n }\n pin.classList.add('selected');\n selectedTreePin = pin;\n });\n mapContainer.appendChild(pin);\n });\n\n const statusClasses = {\n '\uc815\uc0c1': 'bg-green-100 text-green-800',\n '\uad00\uc2ec': 'bg-yellow-100 text-yellow-800',\n '\uc704\ud5d8': 'bg-red-100 text-red-800',\n };\n\n const recommendations = {\n '\uc815\uc0c1': '\ud604\uc7ac \uc0dd\uc721 \uc0c1\ud0dc\uac00 \uc591\ud638\ud569\ub2c8\ub2e4. \uc8fc\uae30\uc801\uc778 \ubaa8\ub2c8\ud130\ub9c1\uc744 \uc720\uc9c0\ud574\uc8fc\uc138\uc694.',\n '\uad00\uc2ec': '\ud1a0\uc591 \uc218\ubd84 \ubc0f \uc0b0\ub3c4 \uc800\ud558\uac00 \uad00\ucc30\ub429\ub2c8\ub2e4. \uc601\uc591\uc81c \ud22c\uc785\uc744 \uace0\ub824\ud558\uace0, \uad00\uc218 \uc8fc\uae30\ub97c \ub2e8\ucd95\ud560 \uac83\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4.',\n '\uc704\ud5d8': '\ud1a0\uc591 \uc218\ubd84\uc774 \uc2ec\uac01\ud558\uac8c \ubd80\uc871\ud569\ub2c8\ub2e4. \uc989\uc2dc \uad00\uc218\uac00 \ud544\uc694\ud558\uba70, \ubcd1\ud574\ucda9 \uac10\uc5fc \uc5ec\ubd80 \ud655\uc778\uc744 \uc704\ud574 \uc804\ubb38\uac00 \uc815\ubc00 \uc9c4\ub2e8\uc774 \uc2dc\uae09\ud569\ub2c8\ub2e4. \ud50c\ub7ab\ud3fc\uc744 \ud1b5\ud574 \\'\uae34\uae09 \ubc29\uc81c \uc11c\ube44\uc2a4\\'\ub97c \uc694\uccad\ud558\uc138\uc694.',\n };\n\n function updateDashboard(id) {\n const tree = treeData.find(t => t.id === id);\n if (!tree) return;\n\n treeDetailsPlaceholder.classList.add('hidden');\n treeDetailsPanel.classList.remove('hidden');\n\n treeNameEl.textContent = tree.name;\n treeMoistureEl.textContent = `${tree.moisture}%`;\n treePhEl.textContent = tree.ph;\n \n treeStatusEl.textContent = tree.status;\n treeStatusEl.className = `px-3 py-1 text-sm font-bold rounded-full ${statusClasses[tree.status]}`;\n \n aiRecommendationEl.textContent = recommendations[tree.status];\n\n updateMoistureChart(tree.history, tree.status);\n }\n \n let moistureChart, marketChart, revenueChart;\n\n function updateMoistureChart(data, status) {\n const statusColors = {\n '\uc815\uc0c1': 'rgba(22, 163, 74, 0.5)',\n '\uad00\uc2ec': 'rgba(250, 204, 21, 0.5)',\n '\uc704\ud5d8': 'rgba(239, 68, 68, 0.5)',\n };\n moistureChart.data.datasets[0].data = data;\n moistureChart.data.datasets[0].borderColor = statusColors[status].replace('0.5', '1');\n moistureChart.data.datasets[0].backgroundColor = statusColors[status];\n moistureChart.update();\n }\n\n const moistureCtx = document.getElementById('moistureChart').getContext('2d');\n moistureChart = new Chart(moistureCtx, {\n type: 'line',\n data: {\n labels: ['6\uc77c \uc804', '5\uc77c \uc804', '4\uc77c \uc804', '3\uc77c \uc804', '2\uc77c \uc804', '\uc5b4\uc81c', '\uc624\ub298'],\n datasets: [{\n label: '\ud1a0\uc591 \uc218\ubd84 (%)',\n data: [],\n fill: true,\n tension: 0.4,\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n max: 100\n }\n },\n plugins: {\n legend: {\n display: false\n }\n }\n }\n });\n \n const marketCtx = document.getElementById('marketChart').getContext('2d');\n marketChart = new Chart(marketCtx, {\n type: 'doughnut',\n data: {\n labels: ['\uae30\uc874 \uad00\ub9ac \uc2dc\uc7a5', '\uc2a4\ub9c8\ud2b8 \uad00\ub9ac \uc7a0\uc7ac \uc2dc\uc7a5'],\n datasets: [{\n data: [95, 5],\n backgroundColor: ['#d1d5db', '#16a34a'],\n borderColor: ['#f9fafb', '#f9fafb'],\n borderWidth: 4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n },\n title: {\n display: true,\n text: '\uad6d\ub0b4 \uc870\uacbd \uad00\ub9ac \uc2dc\uc7a5 \ud604\ud669'\n }\n }\n }\n });\n\n const revenueCtx = document.getElementById('revenueChart').getContext('2d');\n revenueChart = new Chart(revenueCtx, {\n type: 'bar',\n data: {\n labels: ['SaaS \uad6c\ub3c5\ub8cc', '\ud558\ub4dc\uc6e8\uc5b4', '\uac70\ub798 \uc218\uc218\ub8cc', '\ucee8\uc124\ud305'],\n datasets: [{\n label: '\uc608\uc0c1 \uc218\uc775 \ube44\uc911 (%)',\n data: [60, 25, 10, 5],\n backgroundColor: [\n 'rgba(22, 163, 74, 0.7)',\n 'rgba(250, 204, 21, 0.7)',\n 'rgba(59, 130, 246, 0.7)',\n 'rgba(147, 51, 234, 0.7)'\n ],\n borderColor: [\n 'rgba(22, 163, 74, 1)',\n 'rgba(250, 204, 21, 1)',\n 'rgba(59, 130, 246, 1)',\n 'rgba(147, 51, 234, 1)'\n ],\n borderWidth: 1\n }]\n },\n options: {\n indexAxis: 'y',\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: false\n },\n title: {\n display: true,\n text: '\uc218\uc775 \ubaa8\ub378\ubcc4 \uc608\uc0c1 \ube44\uc911'\n }\n },\n scales: {\n x: {\n beginAtZero: true,\n max: 100\n }\n }\n }\n });\n\n updateDashboard(1);\n const firstPin = document.querySelector('.tree-pin[data-id=\"1\"]');\n if(firstPin) {\n firstPin.classList.add('selected');\n selectedTreePin = firstPin;\n }\n\n});\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\ud2b8\ub9ac M.D. – AI \ubc0f IoT \uae30\ubc18 \uc2a4\ub9c8\ud2b8 \uc218\ubaa9 \uad00\ub9ac \ud50c\ub7ab\ud3fc \ud83c\udf33 \ud2b8\ub9ac M.D. \ubb38\uc81c\uc810 \uc194\ub8e8\uc158 \uccb4\ud5d8 \uae30\ub300 \ud6a8\uacfc \uc131\uc7a5 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3963","post","type-post","status-publish","format-standard","hentry","category-_"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"darius","author_link":"https:\/\/hstc.treecare.co.kr\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"\ud2b8\ub9ac M.D. – AI \ubc0f IoT \uae30\ubc18 \uc2a4\ub9c8\ud2b8 \uc218\ubaa9 \uad00\ub9ac \ud50c\ub7ab\ud3fc \ud83c\udf33 \ud2b8\ub9ac M.D. \ubb38\uc81c\uc810 \uc194\ub8e8\uc158 \uccb4\ud5d8 \uae30\ub300 \ud6a8\uacfc \uc131\uc7a5 […]","_links":{"self":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/3963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3963"}],"version-history":[{"count":1,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/3963\/revisions"}],"predecessor-version":[{"id":3964,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/3963\/revisions\/3964"}],"wp:attachment":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}