<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2026 바이브코딩 도구 선택 지도</title>
<style>
:root{color-scheme:light;--ink:#14233b;--muted:#52627a;--line:#d9e2ef;--blue:#1769e0;--pale:#eef5ff;--safe:#eaf8f0}*{box-sizing:border-box}body{margin:0;background:#f6f8fc;color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif;line-height:1.55}.wrap{width:min(920px,calc(100% - 32px));margin:0 auto;padding:40px 0 64px}header{max-width:680px}small{font-weight:800;color:var(--blue)}h1{font-size:clamp(30px,6vw,52px);line-height:1.12;margin:10px 0}p{color:var(--muted)}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}button{min-height:64px;border:1px solid var(--line);border-radius:16px;background:white;color:var(--ink);font:inherit;font-weight:800;padding:14px;cursor:pointer}button:hover,button:focus-visible,button[aria-pressed=true]{border-color:var(--blue);outline:3px solid #bcd7ff;background:var(--pale)}.result{border-radius:24px;background:white;border:1px solid var(--line);padding:24px;box-shadow:0 16px 50px rgba(31,61,104,.08)}.result h2{margin:4px 0 8px;font-size:28px}.tag{display:inline-block;background:var(--pale);color:var(--blue);border-radius:999px;padding:6px 10px;font-size:14px;font-weight:800}.safe{margin-top:20px;padding:18px;border-radius:16px;background:var(--safe)}.safe strong{display:block}.safe ul{margin:8px 0 0;padding-left:22px}.done{margin-top:20px;font-weight:800;color:#167249}@media(max-width:680px){.choices{grid-template-columns:1fr}.wrap{padding-top:24px}}
</style>
</head>
<body>
<main class="wrap">
<header>
<small>실제 사례 · 1차시</small>
<h1>무엇을 만들고 싶은가요?</h1>
<p>도구 이름부터 고르지 않습니다. 수업이 끝난 뒤 남길 결과 하나를 고르세요.</p>
</header>
<div class="choices" role="group" aria-label="만들 결과 선택">
<button type="button" data-kind="visual">한 장 시각 자료</button>
<button type="button" data-kind="html">작동하는 HTML</button>
<button type="button" data-kind="site">교사용 안내 사이트</button>
</div>
<section class="result" aria-live="polite">
<span class="tag" id="tool">첫 도구를 골라 보세요</span>
<h2 id="title">결과를 선택하면 시작점이 보입니다.</h2>
<p id="why">이번 연수에서는 도구를 많이 쓰는 것보다 결과에 맞는 도구 하나를 제대로 쓰는 것이 목표입니다.</p>
<div class="safe">
<strong>어떤 결과에도 지키는 안전선</strong>
<ul><li>학생 실명·사진·연락처를 넣지 않기</li><li>공개할 대상 한 명만 정하기</li><li>AI 결과를 직접 실행하고 사실 확인하기</li></ul>
</div>
<p class="done" id="done">선택 전</p>
</section>
</main>
<script>
const choices={visual:["Canva AI","수업 시작 카드처럼 한눈에 읽는 편집 가능한 시각 자료에 알맞습니다."],html:["Google AI Studio","선택·피드백처럼 브라우저에서 바로 작동하는 시제품에 알맞습니다."],site:["ChatGPT Sites","교사가 읽는 연수 소개·자료 안내를 공개하는 사이트에 알맞습니다."]};
document.querySelectorAll("button").forEach((button)=>button.addEventListener("click",()=>{document.querySelectorAll("button").forEach((item)=>item.setAttribute("aria-pressed","false"));button.setAttribute("aria-pressed","true");const value=choices[button.dataset.kind];document.querySelector("#tool").textContent=value[0];document.querySelector("#title").textContent=button.textContent+"부터 시작합니다.";document.querySelector("#why").textContent=value[1];document.querySelector("#done").textContent="결과 하나 · 도구 하나 선택 완료";}));
</script>
</body>
</html>