{"id":14,"date":"2026-09-28T06:29:08","date_gmt":"2026-09-28T06:29:08","guid":{"rendered":"https:\/\/freeinsight.net\/?page_id=14"},"modified":"2026-10-01T04:09:30","modified_gmt":"2026-10-01T04:09:30","slug":"14-2","status":"publish","type":"page","link":"https:\/\/freeinsight.net\/","title":{"rendered":"\uc2a4\ucf00\uc904 \ub9c8\uc2a4\ud130 &#8211; \uc2e4\uc2dc\uac04 \uc790\ub3d9\ucc28 \uae38\ucc3e\uae30 \ubc0f \uc5ec\ud589 \ud50c\ub798\ub108"},"content":{"rendered":"\n<style>\n  \/* \u2605 \uae30\uc874 GeneratePress \uaf2c\ub9ac\ub9d0 \uc228\uae40 *\/\n  header, .site-header, .entry-header, .site-info { display: none !important; } \n  .autocomplete-list { position: absolute; top: 100%; left: 0; width: 100%; background: #ffffff; border: 1px solid #cbd5e1; border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); max-height: 200px; overflow-y: auto; z-index: 100; display: none; margin: 0; padding: 0; list-style: none; }\n  .autocomplete-item { padding: 10px 15px; font-size: 14px; color: #333; border-bottom: 1px solid #f1f5f9; cursor: pointer; }\n  .autocomplete-item:hover { background-color: #eff6ff; color: #2563eb; }\n  .autocomplete-item span { display: block; font-size: 12px; color: #64748b; margin-top: 3px; }\n  \n  .schedule-item { transition: box-shadow 0.2s; }\n  .drag-handle { cursor: grab; padding: 15px; margin: -15px; display: flex; align-items: center; justify-content: center; }\n  .drag-handle:active { cursor: grabbing; }\n\n  \/* \u2605 \ubaa8\ubc14\uc77c \uc0ac\uc9c4\ucca9 \uc800\uc7a5\uc744 \uc704\ud55c \ud31d\uc5c5(\ubaa8\ub2ec) \uc2a4\ud0c0\uc77c *\/\n  #image-modal {\n    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n    background: rgba(0,0,0,0.85); z-index: 9999; flex-direction: column; justify-content: center; align-items: center;\n    padding: 20px; box-sizing: border-box; backdrop-filter: blur(5px);\n  }\n  #captured-image {\n    max-width: 100%; max-height: 70vh; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.5);\n    \/* \ubaa8\ubc14\uc77c\uc5d0\uc11c \uae38\uac8c \ub204\ub97c \ub54c \uc120\ud0dd \uba54\ub274\uac00 \uc798 \ub728\ub3c4\ub85d \ud5c8\uc6a9 *\/\n    -webkit-user-select: auto; user-select: auto; -webkit-touch-callout: default;\n  }\n<\/style>\n\n<div style=\"display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; min-height: 100vh; background-color: #f3f4f6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; padding: 40px 20px; box-sizing: border-box;\">\n  \n  <div style=\"width: 100%; max-width: 400px; background: #ffffff; padding: 30px; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); box-sizing: border-box; display: flex; flex-direction: column;\">\n    <h2 style=\"text-align: center; margin-top: 0; margin-bottom: 25px; font-size: 24px; color: #1f2937;\">\uc2a4\ucf00\uc904 \ub9c8\uc2a4\ud130 \ud83d\ude97<\/h2>\n    \n    <div style=\"margin-bottom: 15px; position: relative;\">\n      <label style=\"display: block; font-size: 13px; color: #4b5563; margin-bottom: 8px; font-weight: 600;\">\ucd9c\ubc1c\uc9c0<\/label>\n      <div style=\"display: flex; gap: 8px;\">\n        <input type=\"text\" id=\"start-point\" onkeyup=\"searchKeyword(this, 'start-list')\" placeholder=\"\uc7a5\uc18c\ub098 \uc8fc\uc18c\ub97c \uc785\ub825\ud558\uc138\uc694\" style=\"flex: 1; padding: 14px; border: 1px solid #d1d5db; border-radius: 8px; box-sizing: border-box; font-size: 15px; outline: none;\">\n        <button onclick=\"getCurrentLocation()\" style=\"padding: 0 15px; background: #e2e8f0; color: #334155; border: none; border-radius: 8px; font-size: 13px; font-weight: bold; cursor: pointer; white-space: nowrap; transition: background 0.2s;\">\ud83d\udccd \ub0b4 \uc704\uce58<\/button>\n      <\/div>\n      <ul id=\"start-list\" class=\"autocomplete-list\"><\/ul>\n    <\/div>\n    \n    <div style=\"margin-bottom: 25px; position: relative;\">\n      <label style=\"display: block; font-size: 13px; color: #4b5563; margin-bottom: 8px; font-weight: 600;\">\ub3c4\ucc29\uc9c0<\/label>\n      <input type=\"text\" id=\"end-point\" onkeyup=\"searchKeyword(this, 'end-list')\" placeholder=\"\uc7a5\uc18c\ub098 \uc8fc\uc18c\ub97c \uc785\ub825\ud558\uc138\uc694\" style=\"width: 100%; padding: 14px; border: 1px solid #d1d5db; border-radius: 8px; box-sizing: border-box; font-size: 15px; outline: none;\">\n      <ul id=\"end-list\" class=\"autocomplete-list\"><\/ul>\n    <\/div>\n    \n    <button id=\"find-route-btn\" onclick=\"calculateRoute()\" style=\"width: 100%; padding: 15px; background: #2563eb; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; margin-bottom: 20px; transition: background 0.2s;\">\uc774\ub3d9 \uc2dc\uac04 \ud655\uc778<\/button>\n\n    <div id=\"result-info\" style=\"display: none; padding: 20px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 20px;\">\n      <h3 style=\"margin-top: 0; margin-bottom: 15px; font-size: 16px; color: #1e293b; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px;\">\ud83d\ude97 \uacbd\ub85c \ud655\uc778<\/h3>\n      <div id=\"result-content\" style=\"font-size: 14px; color: #475569; line-height: 1.8; margin-bottom: 15px;\"><\/div>\n      \n      <button onclick=\"addToSchedule()\" style=\"width: 100%; padding: 12px; background: #10b981; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: bold; cursor: pointer; margin-bottom: 15px;\">\u2795 \ub0b4 \uc2a4\ucf00\uc904\uc5d0 \ucd94\uac00\ud558\uae30<\/button>\n      \n      <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 8px;\">\n        <button onclick=\"searchNaver('\uc219\uc18c')\" style=\"padding: 10px; background: #e2e8f0; color: #334155; border: none; border-radius: 8px; font-size: 13px; font-weight: bold; cursor: pointer;\">\ud83c\udfe8 \uc219\uc18c \ucc3e\uae30<\/button>\n        <button onclick=\"searchNaver('\uc8fc\ucc28\uc7a5')\" style=\"padding: 10px; background: #e2e8f0; color: #334155; border: none; border-radius: 8px; font-size: 13px; font-weight: bold; cursor: pointer;\">\ud83c\udd7f\ufe0f \uc8fc\ubcc0 \uc8fc\ucc28\uc7a5<\/button>\n        <button id=\"ai-btn\" onclick=\"getAIRecommendations('food')\" style=\"padding: 10px; background: #8b5cf6; color: white; border: none; border-radius: 8px; font-size: 13px; font-weight: bold; cursor: pointer;\">\ud83e\udd58 \ub9db\uc9d1 AI<\/button>\n        <button id=\"ai-kids-btn\" onclick=\"getAIRecommendations('kids')\" style=\"padding: 10px; background: #f59e0b; color: white; border: none; border-radius: 8px; font-size: 13px; font-weight: bold; cursor: pointer;\">\ud83c\udfa1 \uac00\uc871 \ub098\ub4e4\uc774 AI<\/button>\n      <\/div>\n\n      <div id=\"ai-result\" style=\"display: none; margin-top: 15px; padding: 15px; background: #ffffff; border: 1px solid #c4b5fd; border-radius: 8px; font-size: 13px;\"><\/div>\n    <\/div>\n    \n    <p style=\"font-size: 11px; color: #cbd5e1; text-align: center; margin-top: auto; padding-top: 20px;\">T\ub9f5 \ubc0f AI \uae30\ubc18 \uc2e4\uc2dc\uac04 \uc790\ub3d9\ucc28 \uae38\ucc3e\uae30, \uc18c\uc694 \uc2dc\uac04, \uac00\uc871 \ub098\ub4e4\uc774 \uc2a4\ucf00\uc904 \ud50c\ub798\ub108<\/p>\n  <\/div>\n\n  <div style=\"width: 100%; max-width: 500px; background: #ffffff; padding: 30px; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); box-sizing: border-box; min-height: 400px; display: flex; flex-direction: column;\">\n    \n    <div id=\"capture-area\" style=\"background: #ffffff; padding: 15px; margin: -15px; border-radius: 16px;\">\n      <h2 style=\"margin-top: 0; margin-bottom: 5px; font-size: 22px; color: #1f2937;\">\ud83d\udccb \ub098\uc758 \uc5ec\ud589 \uc2a4\ucf00\uc904<\/h2>\n      <p style=\"margin-top: 0; margin-bottom: 25px; font-size: 13px; color: #64748b;\">\uc6b0\uce21\uc758 \u2195 \uc544\uc774\ucf58\uc744 \uc7a1\uace0 \ub04c\uba74 \uc21c\uc11c\uac00 \ubcc0\uacbd\ub429\ub2c8\ub2e4.<\/p>\n      <div id=\"schedule-container\">\n        <div style=\"text-align: center; color: #94a3b8; margin-top: 80px; font-size: 14px;\">\uc544\uc9c1 \ucd94\uac00\ub41c \uc2a4\ucf00\uc904\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.<\/div>\n      <\/div>\n    <\/div>\n\n    <div style=\"margin-top: 20px; display: flex; flex-direction: column; gap: 10px;\">\n      <button onclick=\"downloadImage()\" style=\"width: 100%; padding: 15px; background: #0f172a; color: #ffffff; border: none; border-radius: 8px; font-size: 15px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.05);\">\ud83d\udcf8 \uc2a4\ucf00\uc904\ud45c \uc774\ubbf8\uc9c0\ub85c \uc800\uc7a5\ud558\uae30<\/button>\n      <button onclick=\"shareKakao()\" style=\"width: 100%; padding: 15px; background: #fee500; color: #000000; border: none; border-radius: 8px; font-size: 15px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.05);\">\ud83d\udcac \uce74\uce74\uc624\ud1a1\uc73c\ub85c \ub0b4 \uc2a4\ucf00\uc904 \uacf5\uc720\ud558\uae30<\/button>\n    <\/div>\n  <\/div>\n\n  <div style=\"width: 100%; text-align: center; padding-top: 30px; padding-bottom: 10px; color: #94a3b8; font-size: 13px;\">\n    \u00a9 2026 \uc2a4\ucf00\uc904 \ub9c8\uc2a4\ud130 | \uc624\ub958 \uc81c\ubcf4 \ubc0f \ubb38\uc758 : \n    <a href=\"mailto:outliers@kakao.com\" style=\"color: #64748b; text-decoration: underline; font-weight: bold;\">outliers@kakao.com<\/a>\n  <\/div>\n<\/div>\n\n<!-- \u2605 \ubaa8\ubc14\uc77c \uc0ac\uc9c4\ucca9 \uc800\uc7a5\uc744 \uc704\ud55c \ud31d\uc5c5(\ubaa8\ub2ec) HTML \ucd94\uac00 -->\n<div id=\"image-modal\">\n  <div style=\"color: white; margin-bottom: 20px; font-size: 16px; text-align: center; line-height: 1.6;\">\n    \ud83d\udcf8 <strong>\uc2a4\ucf00\uc904 \ucea1\ucc98 \uc644\ub8cc!<\/strong><br>\n    \uc544\ub798 \uc774\ubbf8\uc9c0\ub97c <strong style=\"color: #fbbf24;\">\uae38\uac8c \ub20c\ub7ec\uc11c<\/strong><br>\n    <strong>[\uc0ac\uc9c4 \uc571\uc5d0 \uc800\uc7a5]<\/strong>\uc744 \uc120\ud0dd\ud574\uc8fc\uc138\uc694.\n  <\/div>\n  <img decoding=\"async\" id=\"captured-image\" src=\"\" alt=\"\uc2a4\ucf00\uc904 \ucea1\ucc98 \uc774\ubbf8\uc9c0\">\n  <button onclick=\"document.getElementById('image-modal').style.display='none'\" style=\"margin-top: 25px; padding: 12px 30px; background: #ef4444; color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: bold; cursor: pointer;\">\ub2eb\uae30 \u2715<\/button>\n<\/div>\n\n<!-- \uac01\uc885 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc2a4\ud06c\ub9bd\ud2b8 -->\n<script src=\"https:\/\/code.jquery.com\/jquery-3.2.1.min.js\"><\/script>\n<script src=\"https:\/\/t1.kakaocdn.net\/kakao_js_sdk\/2.7.2\/kakao.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sortablejs@latest\/Sortable.min.js\"><\/script>\n\n<script>\n  var appKey = \"eH3Phl6dqj8IGoaq1Swsn9tLHPAn2Hw99GbumiiV\"; \n  var geminiApiKey = \"AQ.Ab8RN6IVesyUNGmBnJkD_G8Jzzl55on1IEPcerYL0m-drmdy_w\"; \n  var kakaoJsKey = \"ebf43c315bce9be2ade50117fa378592\"; \n\n  var currentRouteData = null; \n  var scheduleList = [];       \n  var timer; \n\n  function getCurrentLocation() {\n    var startInput = document.getElementById(\"start-point\");\n    startInput.value = \"\uc704\uce58 \ucc3e\ub294 \uc911...\";\n    if (navigator.geolocation) {\n      navigator.geolocation.getCurrentPosition(function(position) {\n        var lat = position.coords.latitude;\n        var lon = position.coords.longitude;\n        $.ajax({\n          method: \"GET\",\n          url: \"https:\/\/apis.openapi.sk.com\/tmap\/geo\/reversegeocoding?version=1&format=json\",\n          headers: { \"appKey\": appKey },\n          data: { \"lat\": lat, \"lon\": lon, \"coordType\": \"WGS84GEO\", \"addressType\": \"A10\" },\n          success: function(response) {\n            if(response.addressInfo) startInput.value = response.addressInfo.fullAddress;\n            else startInput.value = \"\";\n          },\n          error: function() { startInput.value = \"\"; alert(\"\uc704\uce58 \ubcc0\ud658 \uc2e4\ud328\"); }\n        });\n      }, function() { startInput.value = \"\"; alert(\"\uc704\uce58 \uad8c\ud55c\uc744 \ud5c8\uc6a9\ud574\uc8fc\uc138\uc694!\"); });\n    } else { alert(\"GPS\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uae30\uae30\uc785\ub2c8\ub2e4.\"); }\n  }\n\n  function searchKeyword(inputElement, listId) {\n    var keyword = inputElement.value;\n    var listElement = document.getElementById(listId);\n    if (!keyword.trim()) { listElement.style.display = \"none\"; return; }\n    clearTimeout(timer);\n    timer = setTimeout(function() {\n      $.ajax({\n        method: \"GET\",\n        url: \"https:\/\/apis.openapi.sk.com\/tmap\/pois?version=1&format=json\",\n        headers: { \"appKey\": appKey },\n        data: { \"searchKeyword\" : keyword, \"resCoordType\" : \"EPSG3857\", \"reqCoordType\" : \"WGS84GEO\", \"count\" : 5 },\n        success: function(response) {\n          listElement.innerHTML = \"\"; \n          if(response.searchPoiInfo && response.searchPoiInfo.pois.poi.length > 0) {\n            response.searchPoiInfo.pois.poi.forEach(function(poi) {\n              var fullAddress = poi.upperAddrName + \" \" + poi.middleAddrName + \" \" + poi.lowerAddrName;\n              var li = document.createElement(\"li\");\n              li.className = \"autocomplete-item\";\n              li.innerHTML = `<strong>${poi.name}<\/strong><span>${fullAddress}<\/span>`;\n              li.onclick = function() { inputElement.value = poi.name; listElement.style.display = \"none\"; };\n              listElement.appendChild(li);\n            });\n            listElement.style.display = \"block\"; \n          } else { listElement.style.display = \"none\"; }\n        },\n        error: function() { listElement.style.display = \"none\"; }\n      });\n    }, 300); \n  }\n\n  document.addEventListener(\"click\", function(e) {\n    if(e.target.id !== \"start-point\") document.getElementById(\"start-list\").style.display = \"none\";\n    if(e.target.id !== \"end-point\") document.getElementById(\"end-list\").style.display = \"none\";\n  });\n\n  function getPoi(keyword) {\n    return new Promise(function(resolve, reject) {\n      $.ajax({\n        method: \"GET\",\n        url: \"https:\/\/apis.openapi.sk.com\/tmap\/pois?version=1&format=json\",\n        headers: { \"appKey\": appKey },\n        data: { \"searchKeyword\" : keyword, \"resCoordType\" : \"EPSG3857\", \"reqCoordType\" : \"WGS84GEO\", \"count\" : 1 },\n        success: function(response) {\n          if(response.searchPoiInfo && response.searchPoiInfo.pois.poi.length > 0) {\n            var poi = response.searchPoiInfo.pois.poi[0];\n            var area = (poi.middleAddrName + \" \" + poi.lowerAddrName).trim();\n            resolve({ name: poi.name, lon: poi.frontLon, lat: poi.frontLat, addressArea: area });\n          } else {\n            alert(\"'\" + keyword + \"' \uac80\uc0c9 \uacb0\uacfc\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.\");\n            reject();\n          }\n        },\n        error: function() { reject(); }\n      });\n    });\n  }\n\n  async function calculateRoute() {\n    var startKeyword = document.getElementById(\"start-point\").value;\n    var endKeyword = document.getElementById(\"end-point\").value;\n    var btn = document.getElementById(\"find-route-btn\");\n    if(!startKeyword || !endKeyword) { alert(\"\ucd9c\ubc1c\uc9c0\uc640 \ub3c4\ucc29\uc9c0\ub97c \uc785\ub825\ud574\uc8fc\uc138\uc694.\"); return; }\n    btn.innerText = \"\uacc4\uc0b0 \uc911...\"; btn.style.background = \"#94a3b8\";\n\n    try {\n      var startData = await getPoi(startKeyword);\n      var endData = await getPoi(endKeyword);\n\n      $.ajax({\n        method: \"POST\",\n        url: \"https:\/\/apis.openapi.sk.com\/tmap\/routes?version=1&format=json\",\n        headers: { \"appKey\": appKey },\n        data: { \"startX\" : startData.lon, \"startY\" : startData.lat, \"endX\" : endData.lon, \"endY\" : endData.lat, \"reqCoordType\" : \"EPSG3857\", \"resCoordType\" : \"EPSG3857\", \"searchOption\" : \"0\" },\n        success: function(response) {\n          var props = response.features[0].properties;\n          var distanceKm = (props.totalDistance \/ 1000).toFixed(1);\n          var totalMinutes = Math.round(props.totalTime \/ 60);\n          var hours = Math.floor(totalMinutes \/ 60);\n          var minutes = totalMinutes % 60;\n          var timeText = hours > 0 ? hours + \"\uc2dc\uac04 \" + minutes + \"\ubd84\" : minutes + \"\ubd84\";\n          var taxiFare = props.taxiFare ? props.taxiFare.toLocaleString() + \"\uc6d0\" : \"\uc815\ubcf4 \uc5c6\uc74c\";\n\n          currentRouteData = {\n            start: startData.name, end: endData.name, endAddressArea: endData.addressArea,\n            time: timeText, distance: distanceKm, taxi: taxiFare,\n            rawMinutes: totalMinutes, rawDistance: parseFloat(distanceKm)\n          };\n\n          document.getElementById(\"result-content\").innerHTML = `<div><strong>\u23f1\ufe0f \uc18c\uc694 \uc2dc\uac04 :<\/strong> <span style=\"color: #2563eb; font-weight: bold; font-size: 16px;\">${timeText}<\/span><\/div>\n                      <div style=\"margin-top: 5px;\"><strong>\ud83d\udccf \uc774\ub3d9 \uac70\ub9ac :<\/strong> ${distanceKm}km<\/div>\n                      <div style=\"margin-top: 5px;\"><strong>\ud83d\ude95 \uc608\uc0c1 \ud0dd\uc2dc\ube44 :<\/strong> ${taxiFare}<\/div>`;\n          document.getElementById(\"result-info\").style.display = \"block\";\n          document.getElementById(\"ai-result\").style.display = \"none\"; \n          btn.innerText = \"\uc774\ub3d9 \uc2dc\uac04 \ud655\uc778\"; btn.style.background = \"#2563eb\";\n        },\n        error: function() { alert(\"\uacbd\ub85c \ud0d0\uc0c9 \uc11c\ubc84 \uc624\ub958\"); btn.innerText = \"\uc774\ub3d9 \uc2dc\uac04 \ud655\uc778\"; btn.style.background = \"#2563eb\"; }\n      });\n    } catch(e) { btn.innerText = \"\uc774\ub3d9 \uc2dc\uac04 \ud655\uc778\"; btn.style.background = \"#2563eb\"; }\n  }\n\n  function searchNaver(type) {\n    if(!currentRouteData) return;\n    var searchLocation = currentRouteData.endAddressArea ? currentRouteData.endAddressArea : currentRouteData.end;\n    window.open(\"https:\/\/map.naver.com\/v5\/search\/\" + encodeURIComponent(searchLocation + \" \" + type), \"_blank\");\n  }\n\n  async function getAIRecommendations(type) {\n    if(!currentRouteData) return;\n    var targetArea = currentRouteData.endAddressArea ? currentRouteData.endAddressArea : currentRouteData.end;\n    var promptText = \"\";\n    var btn, btnOriginText, btnOriginColor;\n\n    if (type === 'food') {\n      promptText = targetArea + \" \uc8fc\ubcc0\uc758 \ud604\uc9c0\uc778 \ucc10 \ub9db\uc9d1 3\uacf3\uc744 \ucd94\ucc9c\ud574\uc8fc\uace0, \ucd94\ucc9c \uc774\uc720\ub97c 1\uc904\uc529 \uac04\uacb0\ud558\uac8c \uc801\uc5b4\uc918. \uc2dd\ub2f9 \uc774\ub984\uc740 \uc591\ucabd\uc5d0 **\ub97c \ubd99\uc5ec\uc11c \uac15\uc870\ud574\uc918. HTML \ud0dc\uadf8 \uc5c6\uc774 \uc21c\uc218 \ud14d\uc2a4\ud2b8\ub9cc \uc918.\";\n      btn = document.getElementById(\"ai-btn\");\n      btnOriginText = \"\ud83e\udd58 \ub9db\uc9d1 AI\"; btnOriginColor = \"#8b5cf6\";\n    } else {\n      promptText = targetArea + \" \uc8fc\ubcc0\uc5d0 \ucd08\ub4f1\ud559\uad50 \uace0\ud559\ub144 \uc544\uc774\uc640 \ud568\uaed8 \uac00\uc871\uc774 \uac00\uae30 \uc88b\uc740 \uba85\uc18c\ub098 \uccb4\ud5d8 \uacf5\uac04 3\uacf3\uc744 \ucd94\ucc9c\ud574\uc8fc\uace0, \ucd94\ucc9c \uc774\uc720\ub97c 1\uc904\uc529 \uc801\uc5b4\uc918. \uc7a5\uc18c \uc774\ub984\uc740 \uc591\ucabd\uc5d0 **\ub97c \ubd99\uc5ec\uc11c \uac15\uc870\ud574\uc918. HTML \ud0dc\uadf8 \uc5c6\uc774 \ud14d\uc2a4\ud2b8\ub9cc \uc918.\";\n      btn = document.getElementById(\"ai-kids-btn\");\n      btnOriginText = \"\ud83c\udfa1 \uac00\uc871 \ub098\ub4e4\uc774 AI\"; btnOriginColor = \"#f59e0b\";\n    }\n\n    var aiResultDiv = document.getElementById(\"ai-result\");\n    aiResultDiv.style.display = \"block\";\n    aiResultDiv.style.borderColor = btnOriginColor;\n    aiResultDiv.innerHTML = `<div style='text-align:center; padding: 15px; color:#64748b; font-weight:bold;'>\ud83e\udd16 \uc090\ub9ac\uc090\ub9ac... \uad6c\uae00 AI\uac00 ${type==='food'?'\ub9db\uc9d1\uc744':'\ub098\ub4e4\uc774 \uc7a5\uc18c\ub97c'} \ub4a4\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4...<\/div>`;\n    btn.style.background = \"#94a3b8\"; btn.innerText = \"\uac80\uc0c9 \uc911...\";\n\n    try {\n      var url = \"https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-3.8-flash:generateContent?key=\" + geminiApiKey;\n      var response = await fetch(url, {\n        method: \"POST\", headers: { \"Content-Type\": \"application\/json\" },\n        body: JSON.stringify({ contents: [{ parts: [{ text: promptText }] }] })\n      });\n      var data = await response.json();\n      \n      if(data.error) {\n        aiResultDiv.innerHTML = \"<div style='color:#ef4444;'>\u274c \uac80\uc0c9 \uc2e4\ud328: \" + data.error.message + \"<\/div>\";\n      } else {\n        var aiText = data.candidates[0].content.parts[0].text;\n        var formattedText = aiText.replace(\/\\*\\*(.*?)\\*\\*\/g, `<strong style=\"color:${btnOriginColor}; font-size:15px;\">$1<\/strong>`).replace(\/\\n\/g, '<br>');\n        aiResultDiv.innerHTML = \"<div style='line-height:1.6; color:#334155;'>\" + formattedText + \"<\/div>\";\n      }\n    } catch (error) {\n      aiResultDiv.innerHTML = \"<div style='color:#ef4444;'>\ud1b5\uc2e0 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.<\/div>\";\n    }\n    btn.style.background = btnOriginColor; btn.innerText = btnOriginText;\n  }\n\n  function addToSchedule() {\n    if(!currentRouteData) return;\n    var defaultName = \"\uacbd\ub85c \" + (scheduleList.length + 1);\n    var routeName = prompt(\"\uc774 \uc2a4\ucf00\uc904\uc758 \uc774\ub984\uc744 \uc815\ud574\uc8fc\uc138\uc694!\\n(\uc608: 1\uc77c\ucc28 \uc774\ub3d9, \uc219\uc18c \uac00\ub294 \uae38 \ub4f1)\", defaultName);\n    if(routeName === null) return; \n    if(routeName.trim() === \"\") routeName = defaultName; \n    \n    scheduleList.push({ \n      name: routeName, start: currentRouteData.start, end: currentRouteData.end, \n      time: currentRouteData.time, distance: currentRouteData.distance, \n      rawMinutes: currentRouteData.rawMinutes, rawDistance: currentRouteData.rawDistance\n    });\n    \n    renderSchedule();\n    document.getElementById(\"result-info\").style.display = \"none\";\n    document.getElementById(\"start-point\").value = \"\";\n    document.getElementById(\"end-point\").value = \"\";\n  }\n\n  function setAsNextStart(index) {\n    var nextStartLocation = scheduleList[index].end;\n    document.getElementById(\"start-point\").value = nextStartLocation;\n    document.getElementById(\"end-point\").value = \"\";\n    window.scrollTo({ top: 0, behavior: 'smooth' });\n  }\n\n  function renderSchedule() {\n    var container = document.getElementById(\"schedule-container\");\n    if(scheduleList.length === 0) { \n      container.innerHTML = `<div style=\"text-align: center; color: #94a3b8; margin-top: 80px; font-size: 14px;\">\uc544\uc9c1 \ucd94\uac00\ub41c \uc2a4\ucf00\uc904\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.<\/div>`; return; \n    }\n    \n    var html = `<div id=\"sortable-list\">`;\n    var totalMinutes = 0; var totalDistance = 0;\n\n    scheduleList.forEach(function(item, index) {\n      totalMinutes += item.rawMinutes; totalDistance += item.rawDistance;\n      \n      html += `<div class=\"schedule-item\" style=\"background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; margin-bottom: 15px; position: relative;\">\n          <h4 style=\"margin: 0 0 12px 0; color: #1e293b; font-size: 16px; padding-right: 25px;\"><span style=\"background:#2563eb; color:white; border-radius:50%; width:22px; height:22px; display:inline-block; text-align:center; line-height:22px; margin-right:6px; font-size:12px;\">${index + 1}<\/span>${item.name}<\/h4>\n          <div style=\"font-size:13px; color:#475569; margin-bottom:6px;\"><strong>\ud83d\udccd \ucd9c\ubc1c :<\/strong> ${item.start}<\/div>\n          <div style=\"font-size:13px; color:#475569; margin-bottom:6px;\"><strong>\ud83c\udfc1 \ub3c4\ucc29 :<\/strong> ${item.end}<\/div>\n          \n          <div style=\"display:flex; justify-content:space-between; align-items:center; margin-top:10px;\">\n            <div style=\"font-size:13px; color:#2563eb; background:#eff6ff; display:inline-block; padding:4px 8px; border-radius:4px;\"><strong>\u23f1\ufe0f ${item.time}<\/strong> (${item.distance}km)<\/div>\n            <button onclick=\"setAsNextStart(${index})\" style=\"background:#e2e8f0; color:#334155; border:none; padding:6px 12px; border-radius:6px; font-size:12px; font-weight:bold; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.05);\">\ud83d\udd04 \ub2e4\uc74c \ucd9c\ubc1c\uc9c0\ub85c<\/button>\n          <\/div>\n          \n          <div class=\"drag-handle\" style=\"position:absolute; top:40%; right:15px; color:#cbd5e1; font-size: 24px;\">\u2195\ufe0f<\/div>\n          <button onclick=\"removeSchedule(${index})\" style=\"position:absolute; top:10px; right:12px; background:none; border:none; color:#ef4444; font-size: 14px; cursor:pointer; font-weight:bold; padding:5px;\">\u2715<\/button>\n        <\/div>`;\n    });\n    \n    html += `<\/div>`;\n\n    var tHours = Math.floor(totalMinutes \/ 60); var tMins = totalMinutes % 60;\n    var tTimeText = tHours > 0 ? tHours + \"\uc2dc\uac04 \" + tMins + \"\ubd84\" : tMins + \"\ubd84\";\n\n    html += `\n      <div style=\"margin-top: 25px; border-top: 2px dashed #cbd5e1; display: flex; justify-content: space-between; align-items: center; background: #eff6ff; padding: 20px; border-radius: 12px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);\">\n        <strong style=\"font-size: 16px; color: #1e293b;\">\ud569\uacc4 \uc18c\uc694 \ud83c\udfc1<\/strong>\n        <div style=\"text-align: right;\">\n          <div style=\"font-size: 18px; font-weight: bold; color: #2563eb;\">\u23f1\ufe0f ${tTimeText}<\/div>\n          <div style=\"font-size: 14px; color: #475569; margin-top: 4px;\">\ud83d\udccf \ucd1d ${totalDistance.toFixed(1)}km \uc774\ub3d9<\/div>\n        <\/div>\n      <\/div>\n    `;\n    container.innerHTML = html;\n\n    var sortableList = document.getElementById('sortable-list');\n    if (sortableList) {\n      new Sortable(sortableList, {\n        animation: 150,\n        handle: '.drag-handle',\n        onEnd: function (evt) {\n          var draggedItem = scheduleList.splice(evt.oldIndex, 1)[0];\n          scheduleList.splice(evt.newIndex, 0, draggedItem);\n          renderSchedule();\n        }\n      });\n    }\n  }\n\n  function removeSchedule(index) {\n    if(confirm(\"\uc774 \uacbd\ub85c\ub97c \uc0ad\uc81c\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?\")) { scheduleList.splice(index, 1); renderSchedule(); }\n  }\n\n  \/\/ \u2605 \ubaa8\ubc14\uc77c\/PC \uc2a4\ub9c8\ud2b8 \ubd84\uae30 \ucc98\ub9ac \ub2e4\uc6b4\ub85c\ub4dc \uae30\ub2a5\n  function downloadImage() {\n    if(scheduleList.length === 0) { alert(\"\uc800\uc7a5\ud560 \uc2a4\ucf00\uc904\uc774 \uc5c6\uc2b5\ub2c8\ub2e4!\"); return; }\n    \n    \/\/ \ubaa8\ubc14\uc77c \uae30\uae30\uc778\uc9c0 \ud310\ubcc4\n    var isMobile = \/iPhone|iPad|iPod|Android\/i.test(navigator.userAgent);\n    var captureArea = document.getElementById(\"capture-area\");\n    \n    html2canvas(captureArea, { scale: 2, backgroundColor: \"#ffffff\" }).then(function(canvas) {\n      if (isMobile) {\n        \/\/ \ubaa8\ubc14\uc77c: \ud31d\uc5c5 \ub744\uc6b0\uace0 \uc774\ubbf8\uc9c0 \ubcf4\uc5ec\uc918\uc11c \uae38\uac8c \ub20c\ub7ec \uac24\ub7ec\ub9ac \uc800\uc7a5 \uc720\ub3c4\n        var imgUrl = canvas.toDataURL(\"image\/png\");\n        document.getElementById('captured-image').src = imgUrl;\n        document.getElementById('image-modal').style.display = 'flex';\n      } else {\n        \/\/ PC: \uc6d0\ud074\ub9ad \ud30c\uc77c \ub2e4\uc6b4\ub85c\ub4dc\n        var link = document.createElement('a');\n        link.download = '\ub098\uc758_\uc5ec\ud589\uc2a4\ucf00\uc904.png';\n        link.href = canvas.toDataURL(\"image\/png\");\n        link.click();\n      }\n    });\n  }\n\n  function shareKakao() {\n    if (Kakao.isInitialized()) Kakao.cleanup(); \n    Kakao.init(kakaoJsKey);\n\n    var shareText = \"\ud83d\ude97 [\uc2a4\ucf00\uc904 \ub9c8\uc2a4\ud130] \ub098\uc758 \uc5ec\ud589 \uc77c\uc815\\n\\n\";\n    var totalMins = 0; var totalDist = 0;\n\n    scheduleList.forEach(function(item, index) {\n      shareText += (index + 1) + \". \" + item.start + \" \u2794 \" + item.end + \"\\n\";\n      totalMins += item.rawMinutes; totalDist += item.rawDistance;\n    });\n\n    var tHours = Math.floor(totalMins \/ 60); var tMins = totalMins % 60;\n    shareText += \"\\n\ud83c\udfc1 \ucd1d \uc18c\uc694 \uc2dc\uac04: \" + (tHours > 0 ? tHours + \"\uc2dc\uac04 \" + tMins + \"\ubd84\" : tMins + \"\ubd84\") + \" (\" + totalDist.toFixed(1) + \"km)\";\n\n    Kakao.Share.sendDefault({\n      objectType: 'text', text: shareText,\n      link: { mobileWebUrl: window.location.href, webUrl: window.location.href },\n      buttonTitle: '\ub098\ub3c4 \uc2a4\ucf00\uc904\ub7ec \uc368\ubcf4\uae30'\n    });\n  }\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\uc2a4\ucf00\uc904 \ub9c8\uc2a4\ud130 \ud83d\ude97 \ucd9c\ubc1c\uc9c0 \ud83d\udccd \ub0b4 \uc704\uce58 \ub3c4\ucc29\uc9c0 \uc774\ub3d9 \uc2dc\uac04 \ud655\uc778 \ud83d\ude97 \uacbd\ub85c \ud655\uc778 \u2795 \ub0b4 \uc2a4\ucf00\uc904\uc5d0 \ucd94\uac00\ud558\uae30 \ud83c\udfe8 \uc219\uc18c \ucc3e\uae30 \ud83c\udd7f\ufe0f \uc8fc\ubcc0 \uc8fc\ucc28\uc7a5 \ud83e\udd58 \ub9db\uc9d1 AI \ud83c\udfa1 \uac00\uc871 \ub098\ub4e4\uc774 AI T\ub9f5 \ubc0f AI \uae30\ubc18 \uc2e4\uc2dc\uac04 \uc790\ub3d9\ucc28 \uae38\ucc3e\uae30, \uc18c\uc694 \uc2dc\uac04, \uac00\uc871 \ub098\ub4e4\uc774 \uc2a4\ucf00\uc904 \ud50c\ub798\ub108 \ud83d\udccb \ub098\uc758 \uc5ec\ud589 \uc2a4\ucf00\uc904 \uc6b0\uce21\uc758 \u2195 \uc544\uc774\ucf58\uc744 \uc7a1\uace0 \ub04c\uba74 \uc21c\uc11c\uac00 \ubcc0\uacbd\ub429\ub2c8\ub2e4. &#8230; <a title=\"\uc2a4\ucf00\uc904 \ub9c8\uc2a4\ud130 &#8211; \uc2e4\uc2dc\uac04 \uc790\ub3d9\ucc28 \uae38\ucc3e\uae30 \ubc0f \uc5ec\ud589 \ud50c\ub798\ub108\" class=\"read-more\" href=\"https:\/\/freeinsight.net\/\" aria-label=\"\uc2a4\ucf00\uc904 \ub9c8\uc2a4\ud130 &#8211; \uc2e4\uc2dc\uac04 \uc790\ub3d9\ucc28 \uae38\ucc3e\uae30 \ubc0f \uc5ec\ud589 \ud50c\ub798\ub108\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/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-14","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/freeinsight.net\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freeinsight.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freeinsight.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freeinsight.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freeinsight.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":38,"href":"https:\/\/freeinsight.net\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":57,"href":"https:\/\/freeinsight.net\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/57"}],"wp:attachment":[{"href":"https:\/\/freeinsight.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}