튜토리얼

RSS로 구독하기

웹 게임을 만드는 실전 가이드. 각 튜토리얼은 독립적으로 완성되어 있고, 복사해서 바로 붙여넣을 수 있는 코드를 담고 있습니다.

시작하기

• Canvas 2D 게임 루프 기초 — 탄탄한 게임 루프 토대를 만들기
• 게임 개발자를 위한 WebGL 기초 — GPU 렌더링 기초
• WebGPU 시작하기 — 다음 세대를 위한 최신 GPU API

물리

• 웹 게임을 위한 게임 물리 — Rapier, Cannon-es, Ammo.js, Matter.js, Planck.js 등 비교

입력 & 컨트롤

• 게임 입력 처리 (키보드, 마우스, 터치, 게임패드) — 기기 전반에 걸친 통합 입력
• 웹 게임을 위한 Gamepad API — 콘솔급 컨트롤러 지원
• FPS 게임을 위한 Pointer Lock — 마우스 시점 카메라 컨트롤

그래픽 & 렌더링

• 반응형 게임 캔버스 — 픽셀 단위로 정확한 스케일링
• 픽셀 아트 렌더링 — 선명한 레트로 그래픽
• 게임 속 텍스트 렌더링 — 간단한 라벨부터 대화 시스템까지

오디오

• 게임을 위한 Web Audio API — 효과음, 음악, 공간 음향
• 게임 오디오를 위한 Tone.js — 합성 사운드와 동적 음악

데이터 & 저장

• IndexedDB로 저장하고 불러오기 — 영구적인 게임 저장
• 스트리밍 에셋 로딩 — 점진적으로 로드하고 더 빨리 플레이하기

성능 & 최적화

• 빠르게 로드되는 웹 게임 출시하기 — 실용적인 성능 체크리스트
• 게임 로직을 위한 Web Workers — 무거운 연산을 분리하기
• Wasm 스레드 활성화 (SharedArrayBuffer) — 교차 출처 격리 설정

네트워킹

• WebSocket 멀티플레이어 기초 — 실시간 멀티플레이어 패턴

모바일 & 플랫폼

• 모바일 친화적인 웹 게임 — 터치, 성능, 반응형 디자인
• 오프라인 게임을 위한 PWA — 어디서나 설치하고 플레이하기
• 게임 캐싱을 위한 service worker — 재방문 시 즉시 로드
• Iframe 임베드 모범 사례 — 어디에나 임베드할 수 있는 게임 만들기

VR/XR

• VR 게임을 위한 WebXR 기초 — 브라우저에서 즐기는 VR 경험

분석 & 모니터링

• 웹 게임을 위한 분석 — 중요한 지표를 추적하기

도구 & 워크플로

• 에이전트형 AI 코드 도구 — Claude Code, Cursor, GitHub Copilot 익히기