<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>내 수업 앱 선택 실습 요청문</title>
<style>
:root { color-scheme: light; font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: #172b4d; background: #f2f5ff; }
* { box-sizing: border-box; }
body { margin: 0; }
button, textarea { font: inherit; }
button { cursor: pointer; min-height: 48px; border: 0; border-radius: 12px; background: #4263eb; color: white; font-weight: 800; padding: 0 18px; }
:focus-visible { outline: 4px solid #172b4d; outline-offset: 3px; }
main { max-width: 1120px; margin: 0 auto; padding: clamp(18px, 4vw, 44px); }
header { padding: 28px; border-radius: 26px; color: white; background: #233d8e; }
header p:first-child { margin: 0 0 8px; color: #ffe28a; font-size: 13px; font-weight: 900; letter-spacing: .12em; }
h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.05em; }
header p:last-child { max-width: 750px; line-height: 1.6; color: #e5eaff; }
.notice { margin: 18px 0; padding: 16px 20px; border-radius: 16px; background: #fff6d9; line-height: 1.6; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
article { padding: 22px; border-radius: 22px; background: white; box-shadow: 0 14px 30px #193d8b10; }
article:nth-child(5) { grid-column: 1 / -1; }
.number { display: inline-block; padding: 5px 10px; border-radius: 999px; background: #e9efff; color: #3151c7; font-size: 13px; font-weight: 900; }
h2 { margin: 10px 0 6px; font-size: 25px; letter-spacing: -.03em; }
.purpose { margin: 0 0 15px; color: #536684; }
textarea { display: block; width: 100%; min-height: 300px; padding: 15px; resize: vertical; border: 2px solid #d4def5; border-radius: 13px; background: #f9fbff; color: #172b4d; line-height: 1.6; }
.copy-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.copy-row span { color: #3151c7; font-weight: 700; }
.test { margin-top: 19px; padding-top: 13px; border-top: 1px solid #e7ebf5; }
.test h3 { margin: 0 0 8px; font-size: 16px; }
.test ul { padding-left: 20px; margin: 0; line-height: 1.7; }
.next { margin: 12px 0 0; color: #3b527d; }
.method { margin-top: 20px; padding: 24px; border-radius: 22px; background: #e4ebff; }
.method h2 { margin-top: 0; }
.method ol { line-height: 1.8; padding-left: 22px; }
@media (max-width: 780px) { .grid { grid-template-columns: 1fr; } article:nth-child(5) { grid-column: auto; } }
</style>
</head>
<body>
<main>
<header><p>ANYANG TEACHER MAKER LAB · 선택 실습</p><h1>내 수업 앱, 하나 골라 만들기</h1><p>아래 다섯 가지는 완성 앱이 아니라 제작을 시작할 요청문입니다. 한 가지만 고르고, AI가 만든 결과를 직접 눌러 확인하세요.</p></header>
<p class="notice"><strong>실습 기준</strong> 실제 학생 이름·성적·상담 내용·API 키는 넣지 않습니다. 먼저 핵심 버튼 하나를 완성하고, 빈 입력을 확인한 뒤 동료가 링크를 열어 실행하게 합니다.</p>
<div class="grid">
<article><span class="number">01 · 입문</span><h2>우주 탐사 수업 타이머</h2><p class="purpose">모둠 활동의 시작과 마무리</p><textarea readonly aria-label="우주 탐사 수업 타이머 요청문">초등 교실 전자칠판용 “우주 탐사 타이머” 웹앱을 만들어줘. 짙은 남색 우주 배경에 민트·노랑 행성과 작은 로켓을 배치하고, 남은 시간은 화면 중앙에 아주 크게 보여줘. 교사가 분·초를 설정하고 시작·일시정지·다시 시작을 누르게 해줘. 시간이 줄면 로켓이 목적지로 천천히 이동하고, 끝나면 “탐사 완료!”와 짧은 별빛 효과를 보여줘. 소리는 기본 꺼짐, 켰을 때 종료 순간 부드러운 종소리만 나게 해줘. 전체 화면과 움직임 줄이기를 지원하고, 정지 중에는 시간이 줄지 않게 해줘. 외부 API·로그인·저장 없이 브라우저에서 작동하게 해줘.</textarea><div class="copy-row"><button type="button">요청문 복사</button><span role="status" aria-live="polite"></span></div><div class="test"><h3>직접 확인</h3><ul><li>일시정지하면 시간이 멈춥니다.</li><li>종료하면 0에서 정지합니다.</li></ul></div><p class="next"><strong>더 만들기</strong> 남은 시간이 적으면 색과 문구로 함께 알려줘.</p></article>
<article><span class="number">02 · 기본</span><h2>알록달록 모둠 편성기</h2><p class="purpose">활동을 시작하기 전 모둠 나누기</p><textarea readonly aria-label="알록달록 모둠 편성기 요청문">초등 교실용 “우리 반 모둠 편성기” 웹앱을 만들어줘. 크림색 배경에 코랄·민트·라벤더·노랑 모둠 카드를 정렬하고, 이름표가 섞인 뒤 각 카드에 들어가는 애니메이션을 넣어줘. 가상학생 01~12를 예시로 쓰고, 쉼표·줄바꿈 명단과 모둠 수를 입력하게 해줘. 모든 학생을 중복이나 누락 없이 배정하고 모둠별 인원 차이는 1명 이하로 해줘. 결과 이름은 크게, 명단 편집은 작게 보여줘. 소리는 기본 꺼짐, 켜면 배치할 때 작은 톡 소리와 완료음을 넣어줘. 다시 편성·결과 복사·전체 화면을 제공하고 빈 명단, 중복 이름, 학생 수보다 많은 모둠 수는 안내해줘. 외부 API·로그인·저장 없이 작동하게 해줘.</textarea><div class="copy-row"><button type="button">요청문 복사</button><span role="status" aria-live="polite"></span></div><div class="test"><h3>직접 확인</h3><ul><li>11명을 3모둠으로 나누면 4·4·3명입니다.</li><li>빠지거나 겹친 이름이 없습니다.</li></ul></div><p class="next"><strong>더 만들기</strong> 특정 학생의 모둠을 고정하고 나머지만 다시 섞어줘.</p></article>
<article><span class="number">03 · 기본</span><h2>뒤집어 맞히는 복습 카드</h2><p class="purpose">배운 개념과 뜻을 연결하는 복습</p><textarea readonly aria-label="뒤집어 맞히는 복습 카드 요청문">초등 수업용 “짝꿍 개념 카드” 웹앱을 만들어줘. 버터 노랑 배경에 파랑·코랄 카드와 둥근 한글 글꼴로 보드게임처럼 꾸며줘. 교사가 개념과 설명을 한 쌍씩 입력하면 카드가 섞여 나오게 해줘. 기본 예시는 “삼각형|변이 3개인 다각형”, “사각형|변이 4개인 다각형”, “오각형|변이 5개인 다각형”으로 해줘. 두 장을 누르면 부드럽게 뒤집히고, 짝이 맞으면 작은 별 효과와 함께 유지, 틀리면 읽을 시간을 준 뒤 다시 닫아줘. 소리는 기본 꺼짐, 켜면 정답에만 짧고 밝은 소리를 내줘. 정답 쌍 수·다시 하기·큰 카드·전체 화면을 제공해줘. 같은 카드 두 번 클릭과 세 번째 카드 연속 클릭을 막고 외부 API·로그인 없이 작동하게 해줘.</textarea><div class="copy-row"><button type="button">요청문 복사</button><span role="status" aria-live="polite"></span></div><div class="test"><h3>직접 확인</h3><ul><li>같은 카드를 두 번 눌러도 정답 처리되지 않습니다.</li><li>모든 짝을 맞히면 완료가 보입니다.</li></ul></div><p class="next"><strong>더 만들기</strong> 카드를 누르면 개념을 읽어주는 음성 버튼을 추가해줘.</p></article>
<article><span class="number">04 · 입문</span><h2>이야기 씨앗 뽑기</h2><p class="purpose">글쓰기 첫 문장이 막힐 때</p><textarea readonly aria-label="이야기 씨앗 뽑기 요청문">초등 글쓰기 수업용 “이야기 씨앗 뽑기” 웹앱을 만들어줘. 아이보리 종이 배경에 코랄·민트·라벤더 책갈피 카드를 나란히 놓고 손으로 붙인 스티커 같은 포인트를 넣어줘. 인물·장소·사건 카드가 각각 한 장씩 돌아가다가 펼쳐지게 해줘. 기본 예시는 인물 “길 잃은 로봇, 소심한 용, 호기심 많은 탐정”, 장소 “구름 도서관, 바닷속 우체국, 비밀 정원”, 사건 “편지가 도착했다, 시간이 멈췄다, 문이 열렸다”로 해줘. 교사가 목록을 바꾸고 마음에 드는 카드는 잠근 채 나머지만 다시 뽑게 해줘. 결과 복사와 전체 화면을 제공해줘. 소리는 기본 꺼짐, 켜면 카드가 펼쳐질 때 짧은 종이 소리와 완료음을 넣어줘. 이야기는 학생이 직접 쓰도록 완성된 글은 생성하지 말고 외부 API 없이 작동하게 해줘.</textarea><div class="copy-row"><button type="button">요청문 복사</button><span role="status" aria-live="polite"></span></div><div class="test"><h3>직접 확인</h3><ul><li>인물 카드를 잠그면 다시 뽑아도 유지됩니다.</li><li>빈 목록에는 입력 안내가 나옵니다.</li></ul></div><p class="next"><strong>더 만들기</strong> 뽑은 세 단어로 첫 문장을 적는 작은 메모칸을 추가해줘.</p></article>
<article><span class="number">05 · 기본</span><h2>수업 마무리 출구 티켓</h2><p class="purpose">배운 점과 남은 질문을 정리하기</p><textarea readonly aria-label="수업 마무리 출구 티켓 요청문">초등 수업 마무리용 “오늘의 배움 티켓” 웹앱을 만들어줘. 연한 하늘색 배경에 노랑·민트·라벤더 기차표 모양 카드를 배치하고, 진한 남색 큰 글자로 질문을 보여줘. 질문은 “오늘 알게 된 것”, “아직 궁금한 것”, “다음에 해보고 싶은 것”으로 해줘. 한 기기에서 학생 한 명이 세 답을 쓰고 “티켓 완성”을 누르면 답이 담긴 한 장의 티켓으로 펼쳐지게 해줘. 소리는 기본 꺼짐, 켜면 완성 순간 작은 도장 소리를 내줘. 교사가 질문을 바꿀 수 있고 수정·새 티켓·인쇄 버튼을 제공해줘. 빈 답에는 안내하고 새 티켓은 입력을 지우기 전에 확인해줘. 자동 수집이나 다른 기기와 공유하지 않는 개인 작성용으로 만들고, 로그인·외부 API·영구저장 없이 작동하게 해줘.</textarea><div class="copy-row"><button type="button">요청문 복사</button><span role="status" aria-live="polite"></span></div><div class="test"><h3>직접 확인</h3><ul><li>쓴 답이 완성 티켓에 그대로 표시됩니다.</li><li>새 티켓을 취소하면 쓴 답이 유지됩니다.</li></ul></div><p class="next"><strong>더 만들기</strong> 인쇄할 때 배경 장식은 줄이고 답변이 잘 읽히게 해줘.</p></article>
</div>
<section class="method"><h2>만든 뒤에는 이렇게 확인하세요</h2><ol><li>핵심 버튼을 한 번 눌러 결과를 봅니다.</li><li>빈 입력이나 잘못된 입력을 하나 넣어 안내가 나오는지 확인합니다.</li><li>문제가 있으면 “무엇을 눌렀는지 → 실제 결과 → 원하는 결과” 순서로 한 문제만 고쳐 달라고 요청합니다.</li><li>공유 범위를 확인하고 동료 계정에서 링크를 열어 직접 실행합니다.</li></ol></section>
</main>
<script>
document.querySelectorAll('.copy-row').forEach(row => {
const button = row.querySelector('button');
const text = row.previousElementSibling;
const status = row.querySelector('span');
button.addEventListener('click', async () => {
text.select();
status.textContent = '요청문을 선택했어요. 복사를 확인하고 있습니다.';
try {
await Promise.race([
navigator.clipboard.writeText(text.value),
new Promise((_, reject) => setTimeout(() => reject(new Error('clipboard timeout')), 800)),
]);
status.textContent = '복사했어요.';
} catch (_) {
status.textContent = '요청문을 선택했어요. 직접 복사해 주세요.';
}
});
});
</script>
</body>
</html>