Frontend
CodeQuest — GitHub 코드 기반 AI 코딩 퀴즈 플랫폼
2026.03.16·4분 소요·1회 조회
CodeQuest란?
CodeQuest는 GitHub의 실제 코드를 기반으로 AI가 코딩 퀴즈를 생성해주는 웹 플랫폼입니다. 단순한 알고리즘 문제가 아닌, 실제 프로젝트 코드를 읽고 이해하는 능력을 기를 수 있습니다.
주요 기능
4가지 코드 소스
- GitHub Trending — 트렌딩 레포에서 코드를 가져와 퀴즈 생성
- 내 GitHub 레포 — 본인 레포 코드로 학습
- URL 직접 입력 — GitHub URL만 붙여넣으면 바로 코드 로드
- 빠른 퀴즈 — GitHub 없이 AI가 직접 코드를 만들어 문제 생성
6가지 퀴즈 유형
| 유형 | 설명 |
|---|---|
| 코드 설명 | 주어진 코드가 무엇을 하는지 설명 |
| 빈칸 채우기 | 코드의 빠진 부분을 완성 |
| 직접 코딩 | 주어진 조건에 맞는 코드 직접 작성 |
| 버그 찾기 | 코드에서 버그를 찾아 수정 |
| 코드 리뷰 | 코드의 문제점과 개선점 제시 |
| 출력 예측 | 코드의 실행 결과를 예측 |
AI 채점 시스템
제출 즉시 AI가 채점하고 피드백을 제공합니다. 정답 해설과 함께 어떤 부분이 부족한지 구체적으로 알려줍니다. 3단계 힌트 시스템도 있어서 막힐 때 도움을 받을 수 있습니다 (힌트 사용 시 감점 적용).
범용 AI 커넥터
OpenAI, Claude, Gemini, Ollama 등 어떤 AI API든 연결할 수 있습니다. 설정에서 프리셋을 선택하거나, 커스텀 API 엔드포인트를 직접 입력하면 됩니다.
GitHub Gist 동기화
설정과 풀이 기록을 GitHub Gist에 자동 저장합니다. 30초마다 자동 동기화되어 다른 기기에서도 이어서 풀 수 있습니다.
기술 스택
- Vite + React 18 + TypeScript
- Tailwind CSS — 스타일링
- Monaco Editor — VS Code와 동일한 코드 에디터
- Zustand — 상태 관리 (localStorage 퍼시스트)
- Radix UI — 접근성 높은 UI 컴포넌트
- Framer Motion — 애니메이션
- GitHub Pages — 무료 배포
사용 방법
- CodeQuest에 접속
- Settings에서 AI API 설정 (OpenAI, Claude 등)
- GitHub Token 입력 (선택 — 내 레포 탐색 + 높은 API 한도)
- Explore에서 트렌딩 레포 탐색하거나, 내 레포에서 코드 선택
- 퀴즈 유형과 난이도를 선택하고 풀기 시작!
프로젝트 단위 퀴즈
단일 파일이 아닌, 여러 파일을 선택해서 프로젝트 전체를 이해하는 퀴즈도 지원합니다. 실제 개발 환경에서 코드를 읽는 능력을 기르기에 효과적입니다.
멀티 퀴즈 시리즈
하나의 코드 소스에서 여러 문제를 연속으로 풀 수 있습니다. 같은 코드를 다양한 관점에서 분석하면서 깊이 있는 학습이 가능합니다.
GitHub: INIRU/CodeQuest Live Demo: iniru.github.io/CodeQuest