MISSIONCY (코드이썬) - 교육용 게임 기반 코딩 학습 플랫폼

---

1. 프로젝트 소개

MISSIONCY(미션 코드이썬)는 초·중·고 학생들이 프로그래밍을 게임처럼 즐기며 배울 수 있도록 설계된 교육용 코딩 학습 플랫폼입니다.
Cocos Creator 기반의 2D 게임 환경에서 학생이 직접 Python 코드를 작성하여 캐릭터를 조작하고, 스테이지를 클리어하며 자연스럽게 프로그래밍 사고력을 키울 수 있습니다. 교사와 관리자를 위한 종합 관리 시스템을 통해 학교·학급 단위의 체계적인 코딩 교육 운영이 가능합니다.

2. 프로젝트 개요

항목	내용
프로젝트명	MISSIONCY (코드이썬)
유형	교육용 게임 기반 코딩 학습 플랫폼 (B2B/B2G)
대상 사용자	초·중·고 학생, 교사(학급 관리자), 사업 관리자, 시스템 관리자
배포 환경	Docker 컨테이너 기반 클라우드 배포

기술 스택

구분	기술
Backend	Java , Spring Boot , Spring Security, JPA/Hibernate, QueryDSL
Frontend	TypeScript, SvelteKit , Svelte , Tailwind CSS , DaisyUI
Game Engine	Cocos Creator
Database	MySQL
인증	JWT (Access/Refresh Token)
인프라	Docker, GitHub Actions CI/CD, GHCR

주요 아키텍처 특징

• 도메인 주도 설계(DDD): 17개 도메인 모듈로 분리된 백엔드 구조
• 표준화된 API 응답: RsData 래퍼를 통한 일관된 응답 형식
• Request-Scoped 컨텍스트: Rq 빈을 통한 인증 정보·쿠키·요청 컨텍스트 관리
• Type-Safe API 통신: OpenAPI 스키마 자동 생성 → 프론트엔드 타입 자동 동기화
• 게임-웹 하이브리드: Cocos Creator 게임 엔진과 SvelteKit 웹 프레임워크의 실시간 통신

---

핵심 기능

게임 기반 코딩 학습

• 스테이지 기반 학습 시스템: 난이도별(Easy/Normal/Hard) 다단계 스테이지 구성
• 실시간 Python 코드 실행: 브라우저 내 Pyodide(Web Worker) / Brython 이중 런타임으로 서버 부하 없이 코드 실행
• 프레임 기반 애니메이션: 학생이 작성한 Python 코드의 실행 결과를 30FPS 프레임 단위로 게임 엔진에 전달하여 시각적 피드백 제공
• 코드 에디터: Ace Editor 기반, Python 구문 강조·자동완성·자동 괄호 닫기 지원
• 가이드 시스템: 스테이지별 학습 가이드, 코드 명령어 가이드 제공

게임 콘텐츠 & 보상 시스템

• 캐릭터 커스터마이징: 캐릭터 유형 선택, 장비·아이템 장착
• 인게임 상점: 젬(Gem) 재화로 캐릭터 아이템·프로필 아이콘 구매
• 업적 시스템: 조건 달성 시 업적 해금, 보상(경험치·젬) 지급
• 랭킹 시스템: 학생 간 경쟁을 통한 학습 동기 부여
• 도감(Encyclopedia): 학습한 코드 명령어·개념 참조 라이브러리

3 교육 관리 시스템 (Admin Panel)

• 4단계 역할 기반 접근 제어:
• 학생(MEMBER) → 학급 관리자(CLASSADMIN) → 시스템 관리자(SYSTEMADMIN) → 슈퍼 관리자(SUPERADMIN)
• 사업 관리: 교육 프로그램 등록·관리, 참여 학교·관리자 배정
• 학교·학급 관리: 학교 등록, 학급 생성(개별/일괄), 학생 배정, 맵 잠금 해제 설정
• 계정 관리: 시스템 관리자·학급 관리자·학생 계정 CRUD, 일괄 계정 생성
• 학습 진도 추적: 학급별 학생 학습 현황 모니터링
• 데이터 내보내기: CSV/Excel 형식으로 관리자·학생 목록 다운로드
• 대시보드 & 통계: 운영 현황 대시보드, 통계 분석 (슈퍼 관리자 전용)
• 교육 자료실: Toast UI Editor 기반 교육 자료 작성·관리

4 인증 & 보안

• JWT 이중 토큰 인증: Access Token(1시간) + Refresh Token 자동 갱신
• 토큰 버전 관리: 동시 로그인 방지를 위한 Token Versioning
• HttpOnly Secure Cookie: XSS 방지를 위한 쿠키 기반 토큰 저장
• 역할 기반 API 접근 제어: @PreAuthorize 어노테이션 기반 메서드 레벨 보안

---

프로젝트 성과

교육 현장 적용

• 학교·학급 단위 프로그램 운영 체계 구축
• 사업(프로그램) → 학교 → 학급 → 학생 단위의 계층적 교육 관리 구조 확립
• 학급별 맵 잠금 해제 기능으로 교사 주도의 커리큘럼 설계 지원

시스템 운영 효율화

• 학생·관리자 계정 일괄 생성 기능으로 대규모 사용자 온보딩 간소화
• CSV/Excel 데이터 내보내기를 통한 행정 업무 연계
• 역할 기반 4단계 권한 체계로 다수 관리자의 안전한 운영 지원

학습 효과 극대화

• 게임 메카닉(보상·업적·랭킹)을 활용한 학습 동기 부여 시스템 구현
• 서버 부하 없는 브라우저 내 Python 실행으로 즉각적인 코드 피드백 제공
• 스테이지별 난이도 조절과 가이드 시스템으로 자기 주도 학습 지원

---

기술적 의의

브라우저 내 Python 실행 환경 구현

서버 리소스를 소모하지 않고 클라이언트 브라우저에서 Python 코드를 안전하게 실행하기 위해 Pyodide(WebAssembly 기반)와 Brython 이중 런타임을 구현했습니다. Pyodide는 Web Worker에서 격리 실행되어 메인 스레드 블로킹 없이 20초 타임아웃과 함께 안전한 코드 실행을 보장합니다.

게임 엔진-웹 프레임워크 실시간 통신

Cocos Creator 게임 엔진과 SvelteKit 웹 프레임워크 간의 실시간 데이터 통신을 window 레벨 인터페이스SendInitData, SetVolume, boot)로 구현했습니다. 학생이 작성한 Python 코드의 실행 결과가 프레임 단위로 게임 엔진에 전달되어, 코드 → 시각적 결과의 즉각적인 피드백 루프를 제공합니다.

OpenAPI 기반 End-to-End 타입 안전성

백엔드의 SpringDoc OpenAPI 스키마를 기반으로 openapi-typescript가 프론트엔드 타입을 자동 생성하고, openapi-fetch가 이를 사용하여 타입 안전한 API 호출을 보장합니다. 백엔드 API 변경 시 프론트엔드 타입이 자동 동기화되어 런타임 에러를 사전에 방지합니다.

Java 21 Virtual Threads 활용

Spring Boot 3.2의 Virtual Threads 지원을 활성화하여, 전통적인 플랫폼 스레드 대비 높은 동시성을 확보했습니다. 다수의 학생이 동시에 접속하는 교육 환경에서 효율적인 요청 처리가 가능합니다.

JWT Token Versioning을 통한 동시 로그인 제어

JWT 페이로드에 tokenVersion을 포함하고, 로그인 시 DB에 버전을 갱신하는 방식으로 동일 계정의 다중 디바이스 로그인을 감지합니다. 다른 디바이스에서 로그인 시 기존 세션을 자동 만료 처리하여 공용 기기 환경의 교육 현장에서 계정 보안을 강화했습니다.

도메인 주도 설계와 표준화된 응답 구조

17개 비즈니스 도메인을 독립 모듈로 분리하고, 모든 API 응답을 RsData 래퍼로 표준화하여 프론트엔드에서 일관된 에러 처리와 데이터 바인딩이 가능합니다. QueryDSL을 활용한 타입 안전 쿼리와 @BatchSize(100) 배치 페칭으로 N+1 문제를 방지했습니다.

컨테이너 기반 배포 자동화

Multi-stage Docker 빌드(GraalVM JDK 21 기반)와 GitHub Actions CI/CD 파이프라인을 통해 코드 푸시 → 이미지 빌드 → GHCR 등록 → 운영 서버 배포까지 자동화된 배포 프로세스를 구축했습니다.

화면 구성

화면	설명
메인 (로그인/회원가입)	영상 배경의 로그인 화면, 캐릭터 선택
게임 스테이지 선택	난이도별 스테이지 목록, 잠금/해금 상태 표시
게임 플레이	Cocos 게임 캔버스 + Python 코드 에디터 분할 화면
캐릭터 상태	인벤토리, 장착 아이템, 프로필 관리
인게임 상점	젬 재화로 아이템 구매
업적 & 랭킹	업적 현황, 전체 랭킹
관리자 대시보드	운영 현황 통계
사업 관리	교육 프로그램 CRUD
학교·학급 관리	학교 등록, 학급 생성·학생 배정
학습 진도	학급별 학생 학습 현황
교육 자료실	Markdown 에디터 기반 자료 관리

---