| <!DOCTYPE html> |
| <html lang="ko"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
| <title>유튜브 키워드 리서치 도구 | 경쟁이 적은 키워드 찾기</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Noto Sans KR', sans-serif; |
| background-color: #f8fafc; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #FF0000 0%, #FF8C00 100%); |
| } |
| |
| .keyword-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| |
| .competition-low { |
| background-color: #10b981; |
| } |
| |
| .competition-medium { |
| background-color: #f59e0b; |
| } |
| |
| .competition-high { |
| background-color: #ef4444; |
| } |
| |
| .search-volume-high { |
| color: #10b981; |
| } |
| |
| .search-volume-medium { |
| color: #f59e0b; |
| } |
| |
| .search-volume-low { |
| color: #ef4444; |
| } |
| |
| .tabs button.active { |
| background-color: white; |
| color: #ef4444; |
| border-bottom: 3px solid #ef4444; |
| } |
| |
| .progress-bar { |
| height: 6px; |
| border-radius: 3px; |
| background-color: #e5e7eb; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| border-radius: 3px; |
| background: linear-gradient(90deg, #3b82f6, #6366f1); |
| } |
| |
| .tooltip { |
| position: relative; |
| display: inline-block; |
| } |
| |
| .tooltip .tooltiptext { |
| visibility: hidden; |
| width: 220px; |
| background-color: #374151; |
| color: #fff; |
| text-align: center; |
| border-radius: 6px; |
| padding: 8px; |
| position: absolute; |
| z-index: 1; |
| bottom: 125%; |
| left: 50%; |
| transform: translateX(-50%); |
| opacity: 0; |
| transition: opacity 0.3s; |
| font-size: 14px; |
| } |
| |
| .tooltip:hover .tooltiptext { |
| visibility: visible; |
| opacity: 1; |
| } |
| |
| input:focus, textarea:focus { |
| outline: none; |
| box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); |
| } |
| </style> |
| </head> |
| <body> |
| <div class="min-h-screen"> |
| |
| <header class="gradient-bg text-white py-8 px-4 md:px-8"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h1 class="text-3xl md:text-4xl font-bold">유튜브 키워드 파워 툴</h1> |
| <p class="mt-2 text-red-100">경쟁이 적고 검색량이 높은 키워드로 순위를 차지하세요</p> |
| </div> |
| <div class="hidden md:flex items-center space-x-2 bg-white/10 py-2 px-4 rounded-full"> |
| <i class="fab fa-youtube text-red-500 text-2xl"></i> |
| <span class="font-semibold">유튜브 인증</span> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="max-w-6xl mx-auto px-4 md:px-8 py-8 -mt-8"> |
| |
| <div class="bg-white rounded-lg shadow-lg p-6 mb-8"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
| <div class="md:col-span-2"> |
| <label for="video-title" class="block text-lg font-semibold text-gray-800 mb-2"> |
| <i class="fas fa-heading mr-2 text-red-500"></i>동영상 제목 |
| </label> |
| <input |
| type="text" |
| id="video-title" |
| placeholder="동영상 제목을 입력하세요 (예: 완벽한 스크램블 에그 만드는 법)" |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-red-500 transition-colors duration-300" |
| /> |
| <div class="mt-1 text-sm text-gray-500">키워드 추천을 위해 주제 또는 제목을 입력하세요</div> |
| </div> |
|
|
| <div> |
| <label class="block text-lg font-semibold text-gray-800 mb-2"> |
| <i class="fas fa-filter mr-2 text-red-500"></i>필터 |
| </label> |
| <div class="flex space-x-2"> |
| <select id="country" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg"> |
| <option value="global">🌎 글로벌</option> |
| <option value="us">🇺🇸 미국</option> |
| <option value="uk">🇬🇧 영국</option> |
| <option value="ca">🇨🇦 캐나다</option> |
| <option value="au">🇦🇺 호주</option> |
| <option value="in">🇮🇳 인도</option> |
| </select> |
| <select id="language" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg"> |
| <option value="ko">한국어</option> |
| <option value="en">영어</option> |
| <option value="es">스페인어</option> |
| <option value="pt">포르투갈어</option> |
| <option value="hi">힌디어</option> |
| <option value="fr">프랑스어</option> |
| </select> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex space-x-4"> |
| <button |
| id="analyze-btn" |
| class="flex-1 bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-300 flex items-center justify-center" |
| > |
| <i class="fas fa-bolt mr-2"></i> 승리하는 키워드 찾기 |
| </button> |
| <button |
| id="advanced-btn" |
| class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 px-6 rounded-lg transition-colors duration-300 flex items-center justify-center" |
| > |
| <i class="fas fa-sliders-h mr-2"></i> 고급 설정 |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="results-section" class="hidden"> |
| |
| <div class="tabs flex mb-6 bg-gray-100 rounded-lg p-1"> |
| <button class="tab-btn active flex-1 py-3 px-4 rounded-lg font-semibold" data-tab="keywords"> |
| <i class="fas fa-key mr-2"></i> 키워드 |
| </button> |
| <button class="tab-btn flex-1 py-3 px-4 rounded-lg font-semibold" data-tab="analysis"> |
| <i class="fas fa-chart-bar mr-2"></i> 제목 분석 |
| </button> |
| <button class="tab-btn flex-1 py-3 px-4 rounded-lg font-semibold" data-tab="competitors"> |
| <i class="fas fa-users mr-2"></i> 경쟁자 분석 |
| </button> |
| </div> |
|
|
| |
| <div id="keywords-tab" class="tab-content"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-semibold text-gray-800">상위 키워드 기회</h3> |
| <div class="flex items-center space-x-2"> |
| <span class="text-sm text-gray-600">정렬 기준:</span> |
| <select id="sort-keywords" class="border border-gray-300 rounded-lg px-3 py-1"> |
| <option value="relevance">관련성</option> |
| <option value="volume">검색량</option> |
| <option value="competition">경쟁도</option> |
| <option value="score">기회 점수</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8" id="keywords-container"> |
| |
| </div> |
|
|
| <div class="flex justify-center mb-8"> |
| <button id="load-more" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-6 rounded-lg transition-colors duration-300"> |
| 더 많은 키워드 불러오기 |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="analysis-tab" class="tab-content hidden"> |
| <div class="bg-white rounded-lg shadow p-6 mb-8"> |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">제목 최적화 점수</h3> |
| <div class="flex items-center"> |
| <div class="text-5xl font-bold text-red-600 mr-4">87</div> |
| <div class="flex-1"> |
| <div class="progress-bar w-full mb-2"> |
| <div class="progress-fill" style="width: 87%"></div> |
| </div> |
| <p class="text-gray-600">제목이 잘 최적화되었습니다. CTR을 극대화하기 위해 약간의 개선을 제안합니다.</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <h4 class="text-lg font-semibold text-gray-800 mb-3">제목 강조</h4> |
| <ul class="space-y-2"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>시작 부분에 주요 키워드 포함</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>60자 이하로 전체 표시 가능</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2"></i> |
| <span>강력한 단어 추가 권장 ("쉬운", "비법", "최고" 등)</span> |
| </li> |
| </ul> |
| </div> |
|
|
| <div class="bg-white rounded-lg shadow p-6"> |
| <h4 class="text-lg font-semibold text-gray-800 mb-3">개선된 제목 제안</h4> |
| <ul class="space-y-3"> |
| <li class="p-3 bg-blue-50 rounded-lg border-l-4 border-blue-500"> |
| 스크램블 에그 비법 (프로 셰프 기술) |
| </li> |
| <li class="p-3 bg-gray-100 rounded-lg"> |
| 5분 만에 완벽한 스크램블 에그 (레스토랑보다 더 맛있게) |
| </li> |
| <li class="p-3 bg-gray-100 rounded-lg"> |
| 미슐랭 스타 셰프처럼 스크램블 에그 만드는 법 |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="competitors-tab" class="tab-content hidden"> |
| <div class="bg-white rounded-lg shadow p-6 mb-8"> |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">상위 영상</h3> |
| <p class="text-gray-600 mb-4">당신이 맞서야 할 상대입니다. 대상 키워드로 상위 5개 영상을 분석했습니다.</p> |
|
|
| <div class="space-y-4"> |
| <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50"> |
| <div class="flex items-start"> |
| <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center text-red-500 mr-4 flex-shrink-0"> |
| <i class="fas fa-trophy"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-semibold">완벽한 스크램블 에그 - 프로 셰프 비법</h4> |
| <div class="flex items-center text-sm text-gray-500 mt-1"> |
| <span class="mr-3">고메이 쿠킹</span> |
| <span><i class="fas fa-eye mr-1"></i> 240만 조회수</span> |
| </div> |
| </div> |
| <div class="text-right"> |
| <div class="text-xs bg-red-500 text-white px-2 py-1 rounded-full inline-block">97% 일치</div> |
| <div class="mt-2 flex items-center justify-end"> |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded mr-1">45% 시청률</span> |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded">8.2% CTR</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50"> |
| <div class="flex items-start"> |
| <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center text-amber-500 mr-4 flex-shrink-0"> |
| <i class="fas fa-award"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-semibold">언제나 완벽한 스크램블 에그 만드는 법</h4> |
| <div class="flex items-center text-sm text-gray-500 mt-1"> |
| <span class="mr-3">집에서 요리</span> |
| <span><i class="fas fa-eye mr-1"></i> 180만 조회수</span> |
| </div> |
| </div> |
| <div class="text-right"> |
| <div class="text-xs bg-amber-500 text-white px-2 py-1 rounded-full inline-block">89% 일치</div> |
| <div class="mt-2 flex items-center justify-end"> |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded mr-1">52% 시청률</span> |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded">7.5% CTR</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50"> |
| <div class="flex items-start"> |
| <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-500 mr-4 flex-shrink-0"> |
| <i class="fas fa-medal"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-semibold">스크램블 에그 최고의 방법 (10가지 방법 테스트)</h4> |
| <div class="flex items-center text-sm text-gray-500 mt-1"> |
| <span class="mr-3">푸드 사이언스</span> |
| <span><i class="fas fa-eye mr-1"></i> 120만 조회수</span> |
| </div> |
| </div> |
| <div class="text-right"> |
| <div class="text-xs bg-blue-500 text-white px-2 py-1 rounded-full inline-block">84% 일치</div> |
| <div class="mt-2 flex items-center justify-end"> |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded mr-1">61% 시청률</span> |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded">6.9% CTR</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-lg shadow p-6"> |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">경쟁자 분석 요약</h3> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="bg-red-50 p-4 rounded-lg"> |
| <div class="text-red-500 font-bold mb-1">평균 영상 길이</div> |
| <div class="text-2xl font-bold">7:24</div> |
| <div class="text-sm text-gray-600 mt-1">6-8분 길이의 영상이 적합</div> |
| </div> |
| <div class="bg-amber-50 p-4 rounded-lg"> |
| <div class="text-amber-500 font-bold mb-1">평균 CTR</div> |
| <div class="text-2xl font-bold">7.7%</div> |
| <div class="text-sm text-gray-600 mt-1">7% 이상의 CTR이 필요</div> |
| </div> |
| <div class="bg-green-50 p-4 rounded-lg"> |
| <div class="text-green-500 font-bold mb-1">평균 시청률</div> |
| <div class="text-2xl font-bold">53%</div> |
| <div class="text-sm text-gray-600 mt-1">55% 이상 목표</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="pro-tips" class="mt-12 bg-gradient-to-r from-red-50 to-amber-50 border border-red-100 rounded-lg p-6"> |
| <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> |
| <i class="fas fa-lightbulb text-yellow-500 mr-2"></i> 유튜브 SEO 성공 팁 |
| </h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="flex items-start"> |
| <div class="bg-red-500 text-white rounded-full p-2 mr-3 flex-shrink-0"> |
| <i class="fas fa-microphone-alt text-sm"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-1">키워드 자연스럽게 사용</h4> |
| <p class="text-gray-600 text-sm">제목, 설명의 첫 100자, 설명 첫 문장, 대본에 자연스럽게 키워드를 포함하세요.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-500 text-white rounded-full p-2 mr-3 flex-shrink-0"> |
| <i class="fas fa-user-clock text-sm"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-1">긴 영상이 더 효과적</h4> |
| <p class="text-gray-600 text-sm">시청자가 오래 머무는 영상을 유튜브가 선호합니다. 대부분의 주제에 대해 8-12분을 목표로 하세요.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-green-500 text-white rounded-full p-2 mr-3 flex-shrink-0"> |
| <i class="fas fa-clock text-sm"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-1">일정하게 업로드</h4> |
| <p class="text-gray-600 text-sm">주 1~2회 일정하게 업로드하면 유튜브가 당신을 적극적인 창작자로 인식합니다.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-purple-500 text-white rounded-full p-2 mr-3 flex-shrink-0"> |
| <i class="fas fa-chart-line text-sm"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-1">분석 및 최적화</h4> |
| <p class="text-gray-600 text-sm">업로드 후, 분석을 통해 시청자가 떠나는 지점을 확인하고 향후 콘텐츠를 개선하세요.</p> |
| </div> |
| </div> |
| </div> |
| <button class="mt-4 bg-white text-red-600 border border-red-200 hover:bg-red-50 font-semibold py-2 px-4 rounded-lg transition-colors duration-300 inline-flex items-center"> |
| <i class="fas fa-rocket mr-2"></i> 맞춤형 유튜브 SEO 계획 받기 |
| </button> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-900 text-gray-300 py-12 px-4"> |
| <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h4 class="text-white text-lg font-semibold mb-4">유튜브 키워드 파워 툴</h4> |
| <p class="text-sm">창작자가 경쟁이 적고 잠재력이 높은 키워드를 찾을 수 있도록 돕는 최고의 유튜브 키워드 리서치 도구입니다.</p> |
| </div> |
| <div> |
| <h4 class="text-white text-lg font-semibold mb-4">빠른 링크</h4> |
| <ul class="space-y-2 text-sm"> |
| <li><a href="#" class="hover:text-white transition-colors">홈</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">이용 방법</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">요금제</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">블로그</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-white text-lg font-semibold mb-4">자료</h4> |
| <ul class="space-y-2 text-sm"> |
| <li><a href="#" class="hover:text-white transition-colors">유튜브 SEO 가이드</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">키워드 리서치 팁</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">영상 순위 요소</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">성공 사례</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-white text-lg font-semibold mb-4">구독하기</h4> |
| <p class="text-sm mb-4">주간 유튜브 성장 팁과 키워드 업데이트를 받아보세요.</p> |
| <div class="flex"> |
| <input type="email" placeholder="이메일 주소" class="px-3 py-2 bg-gray-800 text-white rounded-l-lg focus:outline-none focus:ring-1 focus:ring-red-500 flex-1"/> |
| <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-r-lg"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="max-w-6xl mx-auto mt-8 pt-8 border-t border-gray-800 text-sm text-center"> |
| <p>© 2023 유튜브 키워드 파워 툴. 모든 권리 보유.</p> |
| </div> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| const keywordData = [ |
| { |
| keyword: "완벽한 스크램블 에그 만드는 법", |
| volume: 135000, |
| competition: 0.32, |
| score: 92, |
| cpr: 45, |
| trend: "상승", |
| ctr: 8.2, |
| variations: ["스크램블 에그 레시피", "스크램블 에그 최고 방법", "프로 스크램블 에그"] |
| }, |
| { |
| keyword: "부드러운 스크램블 에그", |
| volume: 82000, |
| competition: 0.18, |
| score: 95, |
| cpr: 32, |
| trend: "안정", |
| ctr: 8.5, |
| variations: ["부드러운 스크램블 에그 만드는 법", "부드러운 계란 레시피", "극강의 부드러움 스크램블 에그"] |
| }, |
| { |
| keyword: "셰프처럼 스크램블 에그", |
| volume: 48000, |
| competition: 0.12, |
| score: 98, |
| cpr: 28, |
| trend: "상승", |
| ctr: 9.1, |
| variations: ["셰프가 만드는 스크램블 에그", "프로 셰프 스크램블 에그", "레스토랑 스타일 스크램블 에그"] |
| }, |
| { |
| keyword: "쉬운 스크램블 에그 레시피", |
| volume: 67000, |
| competition: 0.25, |
| score: 89, |
| cpr: 41, |
| trend: "안정", |
| ctr: 7.5, |
| variations: ["간단한 스크램블 에그 레시피", "빠른 스크램블 에그", "재료 3가지 스크램블 에그"] |
| }, |
| { |
| keyword: "스크램블 에그 최고 기술", |
| volume: 39000, |
| competition: 0.15, |
| score: 96, |
| cpr: 26, |
| trend: "상승", |
| ctr: 8.8, |
| variations: ["스크램블 에그 과학적 방법", "완벽한 스크램블 에그 기술", "고든 램지 스크램블 에그"] |
| }, |
| { |
| keyword: "전자레인지 스크램블 에그", |
| volume: 104000, |
| competition: 0.45, |
| score: 76, |
| cpr: 58, |
| trend: "안정", |
| ctr: 6.2, |
| variations: ["전자레인지로 스크램블 에그 만드는 법", "전자레인지 계란 요리", "빠른 전자레인지 스크램블 에그"] |
| } |
| ]; |
| |
| |
| const analyzeBtn = document.getElementById('analyze-btn'); |
| const videoTitleInput = document.getElementById('video-title'); |
| const resultsSection = document.getElementById('results-section'); |
| const keywordsContainer = document.getElementById('keywords-container'); |
| const loadMoreBtn = document.getElementById('load-more'); |
| const tabBtns = document.querySelectorAll('.tab-btn'); |
| const tabContents = document.querySelectorAll('.tab-content'); |
| const sortSelect = document.getElementById('sort-keywords'); |
| |
| |
| let currentKeywords = []; |
| let displayedCount = 0; |
| const initialDisplayCount = 6; |
| const incrementDisplayCount = 3; |
| |
| |
| analyzeBtn.addEventListener('click', analyzeKeywords); |
| loadMoreBtn.addEventListener('click', loadMoreKeywords); |
| sortSelect.addEventListener('change', sortKeywords); |
| |
| tabBtns.forEach(btn => { |
| btn.addEventListener('click', () => { |
| const tabId = btn.getAttribute('data-tab'); |
| switchTab(tabId); |
| }); |
| }); |
| |
| |
| function analyzeKeywords() { |
| const title = videoTitleInput.value.trim(); |
| |
| if (!title) { |
| alert('키워드를 분석하려면 동영상 제목을 입력하세요'); |
| return; |
| } |
| |
| |
| analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> 분석 중...'; |
| analyzeBtn.disabled = true; |
| |
| |
| setTimeout(() => { |
| currentKeywords = getRelevantKeywords(title); |
| displayedCount = Math.min(initialDisplayCount, currentKeywords.length); |
| |
| displayKeywords(currentKeywords.slice(0, displayedCount)); |
| resultsSection.classList.remove('hidden'); |
| |
| |
| analyzeBtn.innerHTML = '<i class="fas fa-bolt mr-2"></i> 승리하는 키워드 찾기'; |
| analyzeBtn.disabled = false; |
| |
| |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); |
| }, 1500); |
| } |
| |
| function getRelevantKeywords(title) { |
| const lowercaseTitle = title.toLowerCase(); |
| |
| return keywordData |
| .map(kw => { |
| const relevance = lowercaseTitle.includes(kw.keyword.split(' ')[0]) ? kw.score + 5 : kw.score; |
| return { ...kw, relevance }; |
| }) |
| .sort((a, b) => b.score - a.score); |
| } |
| |
| function displayKeywords(keywords) { |
| keywordsContainer.innerHTML = ''; |
| |
| keywords.forEach(keyword => { |
| const card = document.createElement('div'); |
| card.className = 'keyword-card bg-white rounded-lg shadow p-6 transition-transform duration-300 hover:shadow-lg'; |
| |
| let competitionClass = 'competition-high'; |
| if (keyword.competition < 0.3) competitionClass = 'competition-low'; |
| else if (keyword.competition < 0.5) competitionClass = 'competition-medium'; |
| |
| let volumeClass = 'search-volume-low'; |
| if (keyword.volume > 80000) volumeClass = 'search-volume-high'; |
| else if (keyword.volume > 40000) volumeClass = 'search-volume-medium'; |
| |
| card.innerHTML = ` |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-lg font-semibold text-gray-800">${keyword.keyword}</h3> |
| <div class="flex items-center"> |
| <span class="text-sm font-semibold mr-2 ${volumeClass}">${formatNumber(keyword.volume)}</span> |
| <div class="tooltip cursor-pointer"> |
| <span class="text-xs px-2 py-1 rounded-full ${competitionClass} text-white">${getCompetitionText(keyword.competition)}</span> |
| <span class="tooltiptext"> |
| <div class="text-left"> |
| <div class="font-semibold mb-1">경쟁 분석:</div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span>검색량:</span> |
| <span>${formatNumber(keyword.volume)}</span> |
| </div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span>경쟁도:</span> |
| <span>${(keyword.competition * 100).toFixed(0)}/100</span> |
| </div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span>클릭 가능성:</span> |
| <span>${keyword.ctr.toFixed(1)}% CTR</span> |
| </div> |
| <div class="flex justify-between text-sm font-semibold mt-2"> |
| <span>기회 점수:</span> |
| <span>${keyword.score}/100</span> |
| </div> |
| </div> |
| </span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-center text-sm text-gray-500 mb-4"> |
| <span class="mr-3"><i class="fas fa-bullseye mr-1"></i> ${keyword.cpr}% 클릭 가능성</span> |
| <span> |
| <i class="fas ${keyword.trend === '상승' ? 'fa-arrow-up text-green-500' : 'fa-arrow-right text-gray-400'} mr-1"></i> |
| ${keyword.trend === '상승' ? '상승' : '안정'} 트렌드 |
| </span> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="text-xs text-gray-500 mb-1">기회 점수</div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-gradient-to-r from-blue-500 to-purple-600 h-2.5 rounded-full" style="width: ${keyword.score}%"></div> |
| </div> |
| </div> |
| |
| <div class="border-t pt-3"> |
| <h4 class="text-sm font-semibold text-gray-700 mb-2">관련 변형:</h4> |
| <ul class="space-y-1 text-sm text-gray-600"> |
| ${keyword.variations.slice(0, 3).map(variation => ` |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 text-xs mt-1 mr-2"></i> |
| <span>${variation}</span> |
| </li> |
| `).join('')} |
| </ul> |
| </div> |
| |
| <div class="flex justify-between mt-4"> |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-lg transition-colors"> |
| <i class="fas fa-plus mr-1"></i> 목록에 추가 |
| </button> |
| <button class="text-xs bg-blue-50 hover:bg-blue-100 text-blue-600 px-3 py-1 rounded-lg transition-colors"> |
| <i class="fas fa-share-alt mr-1"></i> 공유 |
| </button> |
| </div> |
| `; |
| |
| keywordsContainer.appendChild(card); |
| }); |
| |
| loadMoreBtn.classList.toggle('hidden', displayedCount >= currentKeywords.length); |
| } |
| |
| function loadMoreKeywords() { |
| const nextBatch = currentKeywords.slice(displayedCount, displayedCount + incrementDisplayCount); |
| displayKeywords([...document.querySelectorAll('.keyword-card'), ...nextBatch]); |
| displayedCount += incrementDisplayCount; |
| } |
| |
| function sortKeywords() { |
| const sortBy = sortSelect.value; |
| |
| switch(sortBy) { |
| case 'volume': |
| currentKeywords.sort((a, b) => b.volume - a.volume); |
| break; |
| case 'competition': |
| currentKeywords.sort((a, b) => a.competition - b.competition); |
| break; |
| case 'score': |
| currentKeywords.sort((a, b) => b.score - a.score); |
| break; |
| case 'relevance': |
| default: |
| currentKeywords.sort((a, b) => b.relevance - a.relevance); |
| break; |
| } |
| |
| displayedCount = Math.min(initialDisplayCount, currentKeywords.length); |
| displayKeywords(currentKeywords.slice(0, displayedCount)); |
| } |
| |
| function switchTab(tabId) { |
| tabBtns.forEach(btn => { |
| if (btn.getAttribute('data-tab') === tabId) { |
| btn.classList.add('active'); |
| } else { |
| btn.classList.remove('active'); |
| } |
| }); |
| |
| tabContents.forEach(content => { |
| if (content.id === `${tabId}-tab`) { |
| content.classList.remove('hidden'); |
| } else { |
| content.classList.add('hidden'); |
| } |
| }); |
| } |
| |
| function formatNumber(num) { |
| if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'; |
| if (num >= 1000) return (num / 1000).toFixed(1) + 'K'; |
| return num; |
| } |
| |
| function getCompetitionText(competition) { |
| if (competition < 0.3) return '낮음'; |
| if (competition < 0.5) return '중간'; |
| return '높음'; |
| } |
| </script> |
|
|
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px; position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;"> |
| Made with |
| <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite 로고" style="width: 16px; height: 16px; vertical-align: middle; display: inline-block; margin-right: 3px; filter: brightness(0) invert(1);"> |
| <a href="https://enzostvs-deepsite.hf.space" style="color: #fff; text-decoration: underline;" target="_blank">DeepSite</a> - |
| <a href="https://enzostvs-deepsite.hf.space?remix=Nomnom38/youtube-keyword-tool" style="color: #fff; text-decoration: underline;" target="_blank">🧬 리믹스</a> |
| </p> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=nkjoy/space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
