소개
파이썬을 재미있게 학생들에게 가르치기 위해 매 학기마다 고민이었는데, 작년까지는 기존의 방법을 고수하다가 올해는 클코와 bkit의 도움으로 웹페이지 형태로 접근해 보았습니다.
단계별 미션을 통해 게임 리터러시를 자연스럽게 녹이며 , 개별 학습을 체크할 수 있도록 했습니다.
개인별 게임형 파이썬 학습 React 웹앱 — 문법 게임 + 미션 단계별 진행진행 방법
사용한 툴 : Claude code, bkit
1. Plan 문서 작성
프로젝트 설정 및 1단계 Phase 구성을 합니다.
빨간색과 녹색 화면이 있는 화면의 스크린샷
한국어 스크린샷
2. Design 문서 작성
/pdca design python-learning UI 구조, 컴포넌트 설계, 데이터 스키마, 화면 흐름을 상세하게 설계하겠습니다. 진행할까요?
한국어가 적힌 테이블
3. Do 단계 : React 프로젝트 생성 및 코드 작성 파이프 라인
작업 폴더 및 React 프로젝트 생성
타입 정의 핵심 로직 구현
Zustand 스토어와 학습 콘텐츠 데이터 작성
챕터별 학습 콘텐츠 데이터 작성
게임 컴포넌트 구현
페잊 컴포턴트 구현
App.tsx 구현
빌드 테스트 및 빌드
긴 시간 동안 Do Phase 진행함
4. 갭 분석
갭 분석 완료! 결과를 문서로 저장하고 상태를 업데이트합니다.
● bkit:gap-detector(Gap analysis: design doc vs implementation)
미구현 항목을 분석하여, 자동 수정 제안을 합니다.
주요 미구현 항목 (High Priority)
1. CodeRunner 컴포넌트 — code-run 타입 미구현
2. LevelUpModal — 레벨업 축하 팝업 없음
3. BadgeEarnedModal — 뱃지 획득 팝업 없음
한국어 앱 스크린샷
한국어 화면의 스크린샷
완성된 미션 웹페이지와 실습형 코드 실행기까지 구성된 UI입니다.
이해 과정에 대한 퀴즈로 수업을 마무리하는 과정까지 추가하였습니다.
한국어로 된 게임 스크린샷
5. 강의 교안 작성
mcp 연동을 통해 canva와 notion을 이용한 강의안을 자동 작성하도록 요청하였습니다.
한국어 웹사이트의 스크린샷
노션으로 자동 작성된 교안
gamma로
자동 작성된 교안
결과와 배운 점
강의 진행에 대한 기획은 구체적으로 세워져서 그런 지, plan부터 build까지 큰 어려움 없이 잘 구조화해주었습니다.
처음 plan단계에서 클코와 이야기를 나누며, 제안받은 구성과 진행 방향에 대해 구체화할 수
있었습니다.
- 현재는 1차시만 진행했는데, 웹페이지에 계속 나머지 2~10차시까지 시도해 볼 예정입니다.
- 미션에 대해 난이도별, 개인별 진행 과정을 교사가 체크 가능한 별도의 대시보드를 추후 추가할 예정입니다.
- DB로 학생들 진행상황을 날짜별, 차시별로 구분하여 운영할 계획입니다.
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
(내용 입력)
