간단 순서 :

아래 코드를 복사 > 메모장 붙여넣기 > 아무이름.html 저장 > 열기
> 원하는 내용 수정 > 프롬프트 생성 > 프롬프트 복사 > AI에 붙여넣기 > 엔터

<!doctype html>

<head>

<style>

body{font-family:Inter, "Noto Sans KR", system-ui, -apple-system, Arial; margin:20px; background:#f7f9fc; color:#0b1220}

.container{max-width:1100px;margin:0 auto;background:#fff;padding:22px;border-radius:10px;box-shadow:0 6px 20px rgba(12,18,30,0.06)}

h1{font-size:20px;margin-bottom:6px}

label{display:block;margin-top:12px;font-weight:600}

input[type="text"], textarea, select{width:100%;padding:10px;border:1px solid #e1e6ee;border-radius:6px;margin-top:6px;box-sizing:border-box}

.two-col{display:grid;grid-template-columns:1fr 360px;gap:18px}

.small{font-size:13px;color:#556674}

.meta{background:#fbfdff;padding:12px;border-radius:8px;border:1px solid #eef6ff}

.btn{display:inline-block;margin-top:10px;padding:8px 12px;border-radius:8px;border:0;background:#0b74de;color:#fff;font-weight:700;cursor:pointer}

pre{background:#0b1220;color:#e6eefc;padding:12px;border-radius:6px;overflow:auto}

.hint{font-size:13px;color:#6b7785;margin-top:6px}

.chip{background:#eef6ff;padding:6px 10px;border-radius:999px;font-size:13px;color:#0b74de;margin-right:6px}

.col{background:#fbfdff;padding:12px;border-radius:8px;border:1px solid #eef6ff}

footer{margin-top:18px;font-size:13px;color:#7b8794}

.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.copyOk{display:inline-block;margin-left:8px;color:green;font-weight:700}

</style>

</head>

<body>

<p class="small">입력 후 '프롬프트 생성'을 누르면 오른쪽 박스에 완성된 프롬프트가 나옵니다. 복사 버튼으로 클립보드에 복사하세요.</p>

<div>

</div>

</div>

<div style="margin-top:12px" class="small">사용 팁: 생성된 프롬프트를 AI에 붙여넣으면, AI가 BODY 내부 HTML 코드만 출력하도록 지시합니다. (농담: AI가 머뭇거리지 않게 '돌려 말하지 마라'고 부탁하세요.)</div>

</div>

<div>

<div class="hint">이 프롬프트는 AI에게 'BODY 내부 코드만 출력'하도록 강제합니다. 수정 후 사용하세요.</div>

</div>

</div>

템플릿 제작: 직접적이고 실용적인 결과를 목표로 설계했습니다. (작동 안하면 연락 주세요 — 농담이지만 진짜예요.)

</footer>

</div>

function escapeHTML(s){ return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }

document.getElementById('generateBtn').addEventListener('click', function(){

const hub = document.getElementById('hub').value.trim();

const audience = document.getElementById('audience').value.trim();

const goals = document.getElementById('goals').value.trim();

const title = document.getElementById('title').value.trim();

const keywords = document.getElementById('keywords').value.trim();

const wordcount = document.getElementById('wordcount').value.trim();

const tone = document.getElementById('tone').value.trim();

const color = document.getElementById('color').value.trim();

const extra = document.getElementById('extra').value.trim();

const includeTrends = document.getElementById('includeTrends').checked;

const eeat = document.getElementById('eeat').checked;

// 요약 미리보기

const preview = `제목 예시: ${title}\n핵심 키워드: ${keywords}\n목표: ${goals}\n톤: ${tone}`;

document.getElementById('preview').textContent = preview;

// 긴 프롬프트 구성

document.getElementById('aiPrompt').value = prompt;

document.getElementById('copyStatus').style.display = 'none';

});

document.getElementById('copyBtn').addEventListener('click', function(){

const text = document.getElementById('aiPrompt').value;

if(!text) return;

navigator.clipboard.writeText(text).then(function(){

const s = document.getElementById('copyStatus'); s.style.display='inline-block';

setTimeout(()=>s.style.display='none',2000);

}, function(){

alert('복사에 실패했습니다. 텍스트를 수동으로 선택해 복사하세요.');

});

</script>

</body>

</html>

예시

프롬프트 생성기 — 고급 블로그 템플릿 (2025 트렌드 반영)

입력 후 '프롬프트 생성'을 누르면 오른쪽 박스에 완성된 프롬프트가 나옵니다. 복사 버튼으로 클립보드에 복사하세요.

메인 주제 / HUB 타깃 독자 (짧게) 목표 (핵심 목표) 제목 예시(초안) 키워드 (콤마로 구분) 목표 단어 수 톤/스타일 전체 테마 컬러 (HEX) 추가 요구 (짧게) 출력 옵션

2025 최신 트렌드 반영
E-E-A-T 요소 포함

사용 팁: 생성된 프롬프트를 AI에 붙여넣으면, AI가 BODY 내부 HTML 코드만 출력하도록 지시합니다. (농담: AI가 머뭇거리지 않게 '돌려 말하지 마라'고 부탁하세요.)

완성된 AI 프롬프트

이 프롬프트는 AI에게 'BODY 내부 코드만 출력'하도록 강제합니다. 수정 후 사용하세요.

프롬프트 미리보기 (요약)

프롬프트 생성기 — 고급 블로그 템플릿 (2025 트렌드 반영)

프롬프트 생성기 — 고급 블로그 템플릿 (2025 트렌드 반영)

댓글 쓰기