플러스프로젝트 배경
1) 문제점 - Canvas requestAnimationFrame에서 디바이스별 모니터 주사율 차이로 인한 게임 속도 편차를 delta-time 보정으로 해결 - OAuth 리다이렉트 URI 환경별(개발/운영) 동적 처리 및 CSRF 방지 state 파라미터 검증 로직 설계 - 모바일 터치 이벤트와 PC 키보드 이벤트를 동일 game loop에서 처리하는 입력 추상화 레이어 구현 - Prisma 커서
프로젝트 성과
Canvas 게임 루프 구현
requestAnimationFrame + delta-time 보정으로 60fps 기준 게임 루프를 설계하고 디바이스별 프레임레이트 편차를 보정하는 엔진 구조를 구현했습니다.
OAuth 2.0 소셜 인증 구현
카카오·구글 Authorization Code Flow를 Express 미들웨어로 처리하고, JWT HttpOnly Cookie 기반 인증 세션 구조를 설계했습니다.
모바일·PC 이중 입력 설계
TouchEvent·KeyboardEvent 이중 입력 핸들러를 custom hook으로 추상화하여 터치·키보드 두 환경에서 동일한 게임 조작성을 구현했습니다.
Prisma 커서 페이지네이션 구현
Prisma ORM 커서 기반 페이지네이션으로 팬 메시지 대량 조회 API를 설계하고, IntersectionObserver 무한 스크롤과 연동했습니다.
Framer Motion 인터랙션 구현
staggerChildren·AnimatePresence로 섹션 입장 애니메이션과 라우트 전환 효과를 구현하여 Figma 디자인 가이드를 코드로 재현했습니다.
핵심 기능
메인 랜딩 & 게임 진입
데뷔 기념 이벤트 랜딩 페이지로, 아티스트 컨셉에 맞는 비주얼과 게임 시작 버튼을 제공합니다
진행 단계
게임 엔진 설계
2025.03.
Canvas API requestAnimationFrame 기반 게임 루프, AABB 충돌 감지, delta-time 보정 로직을 설계하고 프로토타입을 검증했습니다.
프로젝트 상세
1) 포트폴리오 소개 케이팝 그룹 데뷔 기념 팬 이벤트용 횡스크롤 캐릭터 러닝 미니게임 웹사이트를 구현했습니다. React + TypeScript 기반의 Canvas API로 실시간 게임 루프를 설계하고, 소셜 로그인과 팬 메시지 저장 기능을 포함한 풀스택 시스템을 구축했습니다. 2) 작업 범위 - 메인 랜딩 & 게임 진입: 데뷔 기념 이벤트 랜딩 페이지로, 아티스트 컨셉에 맞는 비주얼과 게임 시작
