Funda.

지루한 CS 공부를 즐거운 습관으로 바꾸는
게이미피케이션 학습 플랫폼

Web21-Funda Project DemoSlide 01
Funda가 해결하려는 문제와 핵심 가치

CS 학습의 패러다임 전환

이론 중심의 휘발성 높은 학습 방식을 벗어나, 경험과 보상 중심의 지속 가능한 성장 구조로 재설계했습니다.

  • 원자적 커리큘럼: 방대한 로드맵을 최소 단위(Step)로 쪼개어 심리적 진입장벽을 획기적으로 낮추었습니다.
  • 몰입형 경쟁 학습: 실시간 배틀을 통해 동기 부여를 강화하고 실전 감각을 익힙니다.
  • 과학적 장기 기억: 에빙하우스 망각 곡선에 기반한 SM-2 알고리즘으로 효율적인 자동 복습을 제공합니다.
프로젝트 컨셉 이미지와 히어로 UI 스크린샷
Project Summary & Core ValueSlide 02
성장을 가속화하는 5가지 핵심 엔진

체계적 로드맵

4단계 계층 구조의 표준 커리큘럼 제공

게임형 퀴즈

다양한 유형으로 구조적 이해도 향상

실시간 배틀

최대 25인 동시 참여 몰입형 경쟁

랭킹 시스템

티어 기반의 확실한 성취감 부여

SM-2 자동 복습 (SRS)

개인별 망각 곡선을 분석하여 최적의 타이밍에 복습 문제를 제공, 장기 기억 형성을 극대화합니다.

로드맵 학습 경로 설계
→
게임형 퀴즈 몰입형 문제 풀이
→
실시간 배틀 경쟁 학습
랭킹/보상 성취 피드백
→
SM-2 복습 장기 기억 강화
학습 루프가 반복되며 지속적인 성장으로 연결됩니다.
Core Features OverviewSlide 03
이번 데모에서 보여줄 핵심 구현 범위

1. 실시간 배틀

방 생성부터 결과 정산까지 이어지는 완전한 MVP 플로우를 시연합니다.

  • 대기실 입장 및 실시간 참여자 동기화
  • 방장 권한 기반 게임 시작 제어
  • 타이머 기반 문제 진행 및 결과 노출

2. 프로필 기능

사용자 간 관계 형성과 학습 데이터를 시각화하여 제공합니다.

  • 팔로잉/팔로워 목록 실시간 확인
  • 즉각적인 반응의 팔로우/언팔로우 액션
  • 주요 학습 지표 통계 요약 노출

3. 3D 캐릭터 애니메이션

Three.js를 활용해 UI에 생동감과 몰입감을 부여합니다.

  • Blender 기반 GLB 에셋 파이프라인 구축
  • R3F 환경에서의 안정적인 렌더링
  • Morph Targets 기반 표정 제어 구현
Demo Scope & Key TasksSlide 04
실시간 배틀: 끊김 없는 멀티플레이 플로우

End-to-End Battle Process

  • 방 생성 및 대기: 호스트가 방을 생성하고 초대 링크를 공유하면, 참가자들이 실시간으로 대기실 목록에 동기화됩니다.
  • 게임 시작 및 진행: 방장이 게임을 시작하면 서버 스케줄러가 문제를 전송하고, 모든 클라이언트는 서버 기준 타이머로 동시에 진행합니다.
  • 결과 및 랭킹: 모든 문제가 종료되면 서버가 최종 스코어와 랭킹 정보를 브로드캐스트하여 실시간 결과 화면을 노출합니다.
실시간 배틀 전체 흐름도: 대기실부터 진행과 결과까지
Real-time Battle FlowSlide 05
실시간 배틀: 안정성을 위한 기술적 의사결정
Socket.IO 기반
상태 동기화		 방 입장/퇴장부터 게임 종료까지 모든 이벤트를 서버가 브로드캐스트하며 클라이언트의 상태를 일관되게 관리합니다.
서버 기준
타이머 설계		 클라이언트 시차 문제를 방지하기 위해, 문제 시작/종료 타임스탬프를 서버가 확정하여 전달하고 클라이언트는 이를 기준으로 카운트다운을 표시합니다.
상태 기반
요청 검증		 대기(Waiting), 진행(Playing), 종료(Finished) 등 각 상태에 따라 허용되는 요청을 엄격히 제한하여 비정상적인 접근을 차단합니다.
이탈 및 무효
처리 정책		 진행 중 새로고침/이탈 시 즉시 패널티를 적용하고 Leave 처리하며, 남은 인원이 1명 미만일 경우 Invalid 상태를 전파하여 게임을 조기 종료합니다.
Battle Technical DesignSlide 06
Troubleshooting: 공정한 배틀 시작 보장

Problem: 클라이언트 로딩 지연 이슈

네트워크 환경이나 기기 성능 차이로 인해 각 클라이언트의 문제 로딩 시점이 달라, 특정 유저의 타이머가 먼저 흘러가 불리하게 시작되는 문제가 발생했습니다.

핵심 문제: 시작 시점의 불일치로 인한 공정성 훼손

Solution: 준비 완료 핸드셰이크 도입

  1. 각 클라이언트는 리소스 로딩 후 battle:ready 이벤트를 서버로 전송합니다.
  2. 서버는 모든 참가자의 준비 완료 신호를 기다립니다 (Handshake).
  3. 모든 참가자가 Ready 상태가 되면, 서버가 일괄적으로 battle:start 이벤트를 브로드캐스트합니다.
  4. 모든 클라이언트가 동일한 서버 타임스탬프 기준으로 동시에 타이머를 시작합니다.
Battle TroubleshootingSlide 07
프로필 기능: 관계 형성 및 학습 통계

사용자 경험 강화 요소

  • 즉각적인 팔로우 반응: 팔로우/언팔로우 버튼 클릭 시 서버 요청과 동시에 UI 상태를 먼저 갱신(낙관적 업데이트)하여, 사용자에게 즉각적인 피드백을 제공합니다.
  • 학습 통계 요약: 누적 XP, 정답률 등 핵심 지표를 우선 노출하여 학습 성취를 한눈에 파악할 수 있도록 구성했습니다.
  • 확장성 고려: 향후 일간/주간 상세 분석 및 AI 튜터 연동을 고려하여 데이터 구조를 유연하게 설계했습니다.
프로필 화면과 팔로잉·팔로워 목록 캡처
Profile & Statistics FeaturesSlide 08
Three.js: 서비스에 생동감을 더하는 캐릭터
캐릭터 애니메이션 동작 화면

캐릭터 도입 목적 및 구현 범위

  • 서비스 분위기 강화: 정적인 학습 UI에 역동적인 3D 캐릭터를 배치하여 게이미피케이션 서비스로서의 몰입감과 생동감을 극대화합니다.
  • GLB 파이프라인 구축: Blender에서 제작한 모델링, 리깅, 애니메이션을 웹 환경에 최적화된 GLB 포맷으로 안정적으로 로드합니다.
  • 기본 인터랙션 구현: R3F(React Three Fiber) 환경에서 기본적인 대기 애니메이션 재생과 코드를 통한 표정 변화 제어를 구현했습니다.
3D Character AnimationSlide 09
Three.js: 렌더링 최적화 및 이슈 해결

핵심 기술적 의사결정

  • 1. R3F 렌더링 최적화 필요한 메쉬와 본(Bone)만 명시적으로 관리하여 런타임 부하 최소화
  • 2. 인스턴싱 충돌 해결 SkeletonUtils.clone으로 개별 캐릭터 인스턴스 독립화
  • 3. 프러스텀 컬링 보정 화면 경계에서 캐릭터 소멸 방지를 위한 렌더링 범위 강제 보정
  • 4. Morph Target 표정 제어 눈 깜빡임 등 미세 감정 표현을 코드로 정밀 제어하는 시스템 구축
  • * 하이브리드 전략: Rigify 제약을 베이킹 애니메이션과 실시간 본 제어 조합으로 극복
Blender 모델링·리깅
→
GLB 에셋 패키징
→
R3F 렌더링 구성
런타임 제어 애니·표정·상태
→
최적화 성능/메모리
모델링부터 런타임까지 이어지는 손실 최소 파이프라인
모델링부터 런타임 제어까지 데이터 손실 없는 에셋 파이프라인을 구축하여 개발 효율을 극대화했습니다.
Three.js Technical Deep DiveSlide 10

Q&A

여러분의 소중한 피드백으로 Funda는 더 성장합니다.

실시간 배틀 만족도

실시간 배틀이 재미있었는지
몰입감은 충분했는지

랭킹 재미 요소

랭킹이 동기부여에 도움이 되었는지
재미 요소가 충분했는지

Wrap-up & Future RoadmapSlide 11