교사를 위한 바이브코딩 연수 안내

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>교사를 위한 바이브코딩 연수 안내</title>
<style>
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#152940;background:#fbfcff;font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif;line-height:1.6}.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;width:min(1080px,calc(100% - 32px));margin:auto;padding:20px 0}.brand{font-weight:950}.nav button,.cta{border:0;border-radius:999px;background:#175ed1;color:white;padding:12px 18px;font:inherit;font-weight:900;cursor:pointer}.nav button:focus-visible,.cta:focus-visible,.details button:focus-visible{outline:3px solid #f0a600;outline-offset:3px}.hero{padding:72px 16px 80px;background:linear-gradient(145deg,#eaf2ff,#fff7df);text-align:center}.hero div{width:min(760px,100%);margin:auto}.eyebrow{color:#175ed1;font-weight:900}.hero h1{margin:14px 0;font-size:clamp(40px,8vw,76px);line-height:1.05;letter-spacing:-.04em}.hero p{font-size:clamp(18px,3vw,24px);color:#53667a}.cta{display:inline-block;margin-top:18px;text-decoration:none}.section{width:min(980px,calc(100% - 32px));margin:70px auto}.section h2{font-size:clamp(30px,5vw,46px);margin-bottom:12px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{padding:24px;border:1px solid #dce4ee;border-radius:20px;background:#fff}.card span{color:#175ed1;font-weight:900}.card h3{margin:8px 0}.details{display:grid;gap:10px}.details button{width:100%;border:1px solid #dce4ee;border-radius:14px;background:#fff;padding:16px 18px;font:inherit;font-weight:900;text-align:left;cursor:pointer}.details p{display:none;margin:0;padding:4px 18px 18px;color:#53667a}.details div.open p{display:block}.status{margin:10px 0 0;color:#175ed1;font-weight:850}.notice{padding:26px;border-radius:20px;background:#eef8f1}.notice strong{display:block;font-size:22px}.notice p{margin-bottom:0}.footer{padding:36px 16px;background:#152940;color:#dce7f3;text-align:center}@media(max-width:720px){.cards{grid-template-columns:1fr}.hero{padding-top:48px}.nav span:last-child{display:none}}
</style>
</head>
<body>
<nav class="nav" aria-label="사이트 메뉴"><span class="brand">Vibe Teacher Lab</span><span>교사를 위한 10차시 오프라인 연수</span><button type="button" data-scroll>커리큘럼 보기</button></nav>
<header class="hero"><div><span class="eyebrow">AI 질문 경험에서 실제 공개까지</span><h1>내 수업을<br>작동하게 만드세요</h1><p>실제 HTML 사례를 바꾸고 AI 교육자료로 공개한 뒤 VibeClass에서 연수를 운영합니다.</p><a class="cta" href="#curriculum">커리큘럼 보기</a></div></header>
<main>
  <section class="section"><span class="eyebrow">연수 뒤 남는 결과</span><h2>설명이 아니라 공개 링크로 끝납니다</h2><div class="cards"><article class="card"><span>01</span><h3>작동하는 HTML</h3><p>선택과 피드백이 있는 수업자료를 직접 실행합니다.</p></article><article class="card"><span>02</span><h3>교사용 안내 사이트</h3><p>학생 정보를 받지 않는 공개 안내를 만듭니다.</p></article><article class="card"><span>03</span><h3>현장 연수 리허설</h3><p>강사 예시와 참가자 실습을 실제 세션으로 연결합니다.</p></article></div></section>
  <section class="section" id="curriculum"><span class="eyebrow">10차시 × 50분</span><h2>세 구간으로 완성합니다</h2><div class="details"><div><button type="button" aria-expanded="false">1–3차시 · 도구 선택과 첫 제작</button><p>안전선을 정하고 Canva AI와 Google AI Studio에서 첫 결과를 만듭니다.</p></div><div><button type="button" aria-expanded="false">4–8차시 · 근거·코드·사이트</button><p>Cowork, Claude Code, ChatGPT Work, Sites, Codex를 한 제작 흐름으로 연결합니다.</p></div><div><button type="button" aria-expanded="false">9–10차시 · 공개와 운영</button><p>AI 교육자료로 공개하고 VibeClass 20분 리허설을 진행합니다.</p></div></div><p class="status" aria-live="polite">구간을 선택하면 설명이 열립니다.</p></section>
  <section class="section notice"><strong>공개 범위</strong><p>이 사이트는 교사를 위한 연수 안내입니다. 학생 입력, 학생 개인정보, 외부 추적, 로그인을 요구하지 않습니다.</p></section>
</main>
<footer class="footer">노트북 · 최신 Chrome · Eduitit 계정 준비</footer>
<script>
const status=document.querySelector(".status");document.querySelector("[data-scroll]").addEventListener("click",()=>document.querySelector("#curriculum").scrollIntoView());document.querySelectorAll(".details button").forEach(button=>button.addEventListener("click",()=>{const open=button.parentElement.classList.toggle("open");button.setAttribute("aria-expanded",String(open));status.textContent=open?`${button.textContent} 설명을 열었습니다.`:`${button.textContent} 설명을 닫았습니다.`;}));
</script>
</body>
</html>