학습 게임 개발 지원 스킬

한국어 노래를 활용한 인터랙티브 언어 학습 게임 개발을 위한 Claude Code 스킬입니다.

🎯 이 스킬이 하는 일

개발자가 언어 학습 게임을 쉽고 빠르게 만들 수 있도록 돕습니다:

✅ 즉시 실행 가능한 게임 코드 - HTML/CSS/JavaScript
✅ 데이터 구조 템플릿 - 노래, 가사, 어휘 JSON 스키마
✅ 재사용 가능한 컴포넌트 - 빈칸 채우기, 플래시카드, 매칭 등
✅ 교육 설계 가이드 - 효과적인 학습 메커니즘
✅ 베스트 프랙티스 - 코드 품질, 성능, 접근성

🎮 제공하는 게임 유형

게임	설명	학습 효과	난이도
가사 빈칸 채우기	노래 들으며 빈칸 맞추기	어휘, 듣기	⭐⭐⭐
어휘 플래시카드	단어 카드 뒤집기	어휘 암기	⭐
순서 맞추기	가사 라인 재배열	문맥 이해	⭐⭐
번역 매칭	한영 매칭	번역 능력	⭐⭐
듣기 퀴즈	받아쓰기	듣기, 쓰기	⭐⭐⭐⭐

🚀 빠른 시작

Claude Code에서 요청

한국어 노래로 학습 게임 만들고 싶어

또는

가사 빈칸 채우기 게임 코드 생성해줘

즉시 받을 수 있는 것

완전히 작동하는 HTML 게임
샘플 데이터 JSON 파일
통합 가이드
커스터마이징 팁

📁 파일 구조

.claude/skills/learning-game-builder/
├── SKILL.md                    # 스킬 정의
├── README.md                   # 이 파일
├── templates/                  # 게임 템플릿
│   ├── fill-in-blank-template.html
│   └── flashcard-template.html
├── examples/                   # 예제 데이터
│   └── sample-song-data.json
└── docs/                       # 문서
    ├── quick-start-guide.md
    └── data-structure-guide.md

💡 사용 예시

예시 1: 빈칸 채우기 게임

요청:

초급 학습자용 가사 빈칸 채우기 게임 만들어줘

받는 것:

fill-in-blank-template.html (즉시 실행 가능)
sample-song-data.json (샘플 데이터)
통합 방법 설명

예시 2: 내 노래로 데이터 생성

요청:

이 가사로 학습 데이터 만들어줘:
안녕하세요 친구들
오늘도 좋은 날

받는 것:

가사 분석 결과
주요 어휘 추출 (안녕하세요, 친구, 오늘, 좋은, 날)
빈칸 제안
완성된 JSON 데이터

예시 3: 플래시카드 생성

요청:

노래 속 어휘로 플래시카드 만들어줘

받는 것:

flashcard-template.html
어휘 데이터 JSON
사용 방법 가이드

🛠️ 기술 스택

프론트엔드: HTML5, CSS3, Vanilla JavaScript
스타일링: Tailwind CSS (CDN)
데이터: JSON
저장소: LocalStorage (선택사항)
오디오: HTML5 Audio API (선택사항)

📖 문서

빠른 시작 가이드 - 5분 만에 첫 게임 만들기
데이터 구조 가이드 - JSON 스키마 및 데이터 관리
전체 기획안 - 프로젝트 컨셉 및 로드맵

🎓 학습 효과

이 스킬로 만든 게임은 다음 학습 원리를 적용합니다:

맥락 학습 - 문장 속에서 단어 습득
멀티모달 - 시각 + 청각 + 운동 결합
즉각 피드백 - 실시간 정답 확인
간격 반복 - 복습 스케줄링
게임화 - 동기부여 및 참여 증가

🌟 주요 특징

개발자 친화적

의존성 최소화 (CDN 사용)
깔끔한 코드 구조
상세한 주석
쉬운 커스터마이징

사용자 친화적

반응형 디자인 (모바일/데스크톱)
직관적인 UI/UX
부드러운 애니메이션
접근성 고려

교육적 효과

학습 이론 기반 설계
난이도 조절 가능
진도 추적
즉각적인 피드백

🔧 커스터마이징

색상 변경

/* Tailwind 클래스 오버라이드 */
.bg-blue-600 { background-color: #your-color !important; }

게임 규칙 수정

// JavaScript 변수 조정
let hintsAllowed = 5;  // 힌트 개수
let timeLimit = 120;   // 제한 시간(초)

데이터 추가

// 새 노래 추가
{
  "title": "My Song",
  "artist": "Artist",
  "lyrics": [ /* ... */ ]
}

📦 배포

GitHub Pages

git push origin main
# Settings > Pages > Deploy

Netlify / Vercel

# Drag & drop 또는 CLI 사용
netlify deploy
vercel

🤝 활용 시나리오

교육자

수업용 학습 자료 제작
학생 과제 제공
평가 도구

학습자

자기주도 학습
복습 도구
재미있는 연습

개발자

포트폴리오 프로젝트
에듀테크 스타트업
오픈소스 기여

⚖️ 저작권 주의사항

노래 가사 사용 시:

✅ 교육 목적 fair use 검토
✅ 출처 명시
✅ 비상업적 사용
⚠️ 상업적 사용 시 라이선스 필요

🆘 도움말

스킬이 활성화되지 않을 때

Claude Code에서 명확하게 요청:
"learning-game-builder 스킬 사용해서 게임 만들어줘"

게임이 작동하지 않을 때

브라우저 콘솔 확인 (F12)
데이터 JSON 형식 검증
파일 경로 확인

추가 기능이 필요할 때

"게임에 타이머 기능 추가해줘"
"점수 시스템 만들어줘"
"모바일 터치 지원 추가해줘"

📈 로드맵

현재 지원 (v1.0)

✅ 가사 빈칸 채우기
✅ 어휘 플래시카드
✅ 데이터 구조 가이드

향후 계획

⬜ 순서 맞추기 게임
⬜ 번역 매칭 게임
⬜ 음성 인식 통합
⬜ 백엔드 API 연동
⬜ 다국어 지원

🙏 기여

이 스킬을 사용해서 멋진 게임을 만드셨나요? 피드백과 개선 제안을 환영합니다!

📜 라이선스

이 스킬과 템플릿은 교육 목적으로 자유롭게 사용 가능합니다. 상업적 사용 시 별도 라이선스가 필요할 수 있습니다.

지금 바로 시작하세요!

Claude Code에서:

한국어 학습 게임 만들어줘