연관키워드 & 검색량 트렌드 분석

차트분석 작성
작성일 2025.02.11 13:41

2,642 조회
목록

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>키워드 검색 트렌드 분석</title>


<link href="bootstrap@5.3.0/dist/css/bootstrap.min.css"" TARGET="_blank" rel="nofollow">https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"" TARGET="_blank" rel="nofollow">https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
body {
background-color: #f8f9fa;
padding: 30px;
}
.container {
max-width: 700px;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.keywords {
font-weight: bold;
color: #007bff;
font-size: 1.1rem;
word-wrap: break-word;
text-align: left;
padding: 10px;
background: #eef7ff;
border-radius: 5px;
margin-top: 10px;
}
ul {
text-align: left;
}
</style>
</head>
<body>

<div class="container text-center">
<h2 class="mb-3"> 키워드 검색 트렌드 분석</h2>
<p class="text-muted">특정 키워드의 연관 검색어 및 트렌드 데이터를 분석합니다.</p>
<p class="text-muted">© 2025 차트이슈 | 모든 콘텐츠의 저작권은 차트이슈에 있습니다.</p>

<input type="text" id="keywordInput" class="form-control mb-3" placeholder="검색할 키워드를 입력하세요...">

<button class="btn btn-primary w-100 mt-2" onclick="fetchKeywordData()"> 키워드 분석</button>


<div class="loader mt-3" style="display: none;">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">검색 중...</span>
</div>
<p class="mt-2">키워드 분석 중...</p>
</div>

<div class="mt-3">
<h5> 관련 검색어:</h5>
<ul id="relatedKeywords" class="list-group"></ul>
</div>


<div style="width: 100%; max-width: 500px; margin: auto;">
<canvas id="trendChart"></canvas>
</div>

<button class="btn btn-success w-100 mt-2" onclick="copyToClipboard()"> 클립보드 복사</button>
<button class="btn btn-secondary w-100 mt-2" onclick="downloadTextFile()"> TXT 다운로드</button>
</div>

<script>
let trendChart = null;

function fetchKeywordData() {
const keyword = document.getElementById("keywordInput").value.trim();
const relatedKeywords = document.getElementById("relatedKeywords");
const loader = document.querySelector(".loader");

if (keyword === "") {
alert("키워드를 입력하세요.");
return;
}

loader.style.display = "block";
relatedKeywords.innerHTML = "";

// Google 검색 자동완성 API (JSONP 방식 사용)
const script = document.createElement("script");
const callbackName = "googleSuggestCallback";

script.src = `https://suggestqueries.google.com/complete/search?client=firefox&q=${encodeURIComponent(keyword)}&callback=${callbackName}`;
script.async = true;

window[callbackName] = function (data) {
document.body.removeChild(script);
const suggestions = data[1];

if (suggestions.length === 0) {
relatedKeywords.innerHTML = "<li class='list-group-item'>연관 검색어가 없습니다.</li>";
} else {
suggestions.forEach(suggestion => {
const li = document.createElement("li");
li.classList.add("list-group-item");
li.textContent = suggestion;
relatedKeywords.appendChild(li);
});
}
loader.style.display = "none";
generateTrendChart(keyword);
};

document.body.appendChild(script);
}

function generateTrendChart(keyword) {
const ctx = document.getElementById("trendChart").getContext("2d");

// 기존 차트 삭제 (자동 정리 기능)
if (trendChart !== null) {
trendChart.destroy();
}

// **대체 데이터 사용 (실제 Google Trends 데이터 대신)**
const fakeData = Array.from({ length: 10 }, () => Math.floor(Math.random() * 100));

trendChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["10일 전", "9일 전", "8일 전", "7일 전", "6일 전", "5일 전", "4일 전", "3일 전", "2일 전", "1일 전"],
datasets: [{
label: ` ${keyword} 검색 트렌드`,
data: fakeData,
borderColor: "blue",
backgroundColor: "rgba(0, 0, 255, 0.1)",
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: true, // 차트 비율 유지
scales: {
y: {
beginAtZero: true
}
}
}
});
}

function copyToClipboard() {
const relatedKeywords = document.getElementById("relatedKeywords").getElementsByTagName("li");
if (relatedKeywords.length === 0) {
alert("복사할 검색어가 없습니다.");
return;
}

let textToCopy = "";
for (let item of relatedKeywords) {
textToCopy += item.textContent + "\n";
}

navigator.clipboard.writeText(textToCopy)
.then(() => alert("검색어가 클립보드에 복사되었습니다!"))
.catch(() => alert("복사 실패! 수동으로 복사해주세요."));
}

function downloadTextFile() {
const relatedKeywords = document.getElementById("relatedKeywords").getElementsByTagName("li");

if (relatedKeywords.length === 0) {
alert("저장할 검색어가 없습니다.");
return;
}

let textToSave = "";
for (let item of relatedKeywords) {
textToSave += item.textContent + "\n";
}

const blob = new Blob([textToSave], { type: "text/plain" });
const a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = "keywords.txt";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
</script>

</body>
</html>