HTML5로 만든 똥피하기 게임
웹 기술로 추억을 되살리다

Canvas + Web Audio + SVG 스프라이트 풀스택 구현기

📅 2026.06.08 👨‍💻 DevSnack
HTML5 Canvas Web Audio SVG 게임개발

🎮 지금 바로 플레이!

← → 방향키 또는 화면 터치로 이동 | 똥을 피해 오래 살아남으세요!

게임 로딩 중...

들어가며

어릴 적 즐기던 똥피하기 게임을 기억하시나요? 플래시 시절 유행했던 이 단순하면서도 중독성 있는 게임을 최신 HTML5 웹 기술로 재현해보았습니다. 이번 프로젝트는 단순한 복제를 넘어, Web Audio API를 활용한 사운드 효과, SVG 기반의 고품질 스프라이트, localStorage를 이용한 점수 저장, 그리고 PC와 모바일을 모두 지원하는 반응형 디자인까지 적용한 풀스택 웹 게임입니다.

✨ 핵심 기술 스택: HTML5 Canvas · Web Audio API · SVG (인라인 스프라이트) · Vanilla JavaScript · CSS3 반응형 디자인 · localStorage

게임 플레이 방법

기술적 특징

🎨

SVG 스프라이트

고품질 벡터 그래픽을 Canvas에서 렌더링하여 선명한 화질 제공

🔊

Web Audio API

외부 파일 없이 순수 코드로 생성한 사운드 이펙트

💾

점수 저장

localStorage 기반 최고 점수 기록 유지

📱

반응형 디자인

PC, 태블릿, 모바일 모든 환경에서 완벽 동작

1. 고품질 SVG 스프라이트 시스템

모든 게임 그래픽은 SVG(Scalable Vector Graphics)로 제작되었습니다. SVG를 사용함으로써 어떤 해상도에서도 픽셀 깨짐 없이 선명한 그래픽을 유지할 수 있습니다. SVG 문자열을 Blob과 URL.createObjectURL을 통해 Image 객체로 변환한 후, Canvas 2D Context의 drawImage()로 렌더링합니다. 

// SVG → Image 변환 과정
const svgBlob = new Blob([svgString], { type: 'image/svg+xml' });
const url = URL.createObjectURL(svgBlob);
const img = new Image();
img.onload = () => { /* Canvas에 drawImage() */ };
img.src = url;

똥 스프라이트는 그라데이션과 곡선을 활용한 3D 입체감 표현하였고, 플레이어 캐릭터는 귀여운 모자 쓴 캐릭터로 디자인하여 게임의 재미를 더했습니다.

2. Web Audio API를 활용한 사운드

외부 오디오 파일 없이 Web Audio API만으로 모든 사운드 효과를 생성했습니다. OscillatorNode와 GainNode를 조합하여 점프, 게임오버, 점수 획득 등 다양한 상황에 맞는 사운드를 합성합니다. 최신 브라우저의 오디오 정책(Autoplay Policy)을 고려하여 사용자 상호작용 시 AudioContext를 초기화합니다. 

// Web Audio 사운드 생성 예시
function playSound(frequency, duration, type = 'square') {
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.type = type;
  osc.frequency.value = frequency;
  gain.gain.value = 0.15;
  gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + duration);
  osc.connect(gain).connect(audioCtx.destination);
  osc.start();
  osc.stop(audioCtx.currentTime + duration);
}

3. 모바일 대응 터치 컨트롤

모바일 환경에서는 터치 이벤트를 통해 게임을 조작합니다. 화면을 왼쪽 절반과 오른쪽 절반으로 나누어 터치 위치에 따라 캐릭터가 이동합니다. 또한 touch-action: none CSS 속성으로 브라우저의 기본 스크롤/확대 동작을 방지하여 게임 플레이에 집중할 수 있도록 했습니다. 모든 컨트롤은 requestAnimationFrame 기반의 게임 루프와 통합되어 부드러운 조작감을 제공합니다.

4. 점수 저장 시스템

게임 점수는 브라우저의 localStorage에 저장됩니다. 게임 오버 시 현재 점수가 최고 기록보다 높으면 자동으로 갱신됩니다. 이를 통해 페이지를 새로고침해도 최고 점수가 유지됩니다.

5. 게임 루프와 난이도 곡선

게임은 requestAnimationFrame을 사용한 메인 루프로 구동됩니다. 시간이 지남에 따라 똥의 낙하 속도와 생성 빈도가 점진적으로 증가하여 자연스러운 난이도 곡선을 형성합니다. 충돌 감지는 AABB(Axis-Aligned Bounding Box) 방식을 사용하여 정확하면서도 가벼운 판정을 제공합니다.

개발 후기

이번 프로젝트는 AI의 도움을 받아 진행한 흥미로운 경험이었습니다. 단순한 게임 하나를 만들더라도 SVG 스프라이트 디자인, Web Audio 사운드 합성, Canvas 게임 루프, 모바일 터치 최적화, SEO 최적화 등 다양한 기술적 고려사항이 필요했습니다.

특히 SVG를 Canvas와 결합하는 방식과 Web Audio API로 사운드를 합성하는 과정이 가장 흥미로웠습니다. 외부 리소스 없이 순수 코드만으로 게임을 완성할 수 있다는 점이 HTML5 웹 기술의 매력입니다.

이 게임의 전체 소스 코드는 하나의 HTML 파일에 모두 담겨 있습니다. 블로그에 임베딩하여 바로 플레이할 수 있도록 설계되었으며, 구글 SEO 최적화를 위한 구조화 데이터(JSON-LD), Open Graph 태그 등을 포함하고 있어 블로그 게시물로도 완성도가 높습니다.

마치며

위에서 직접 게임을 플레이해보세요! 최고 점수에 도전해보시고, 친구들과 공유해보세요. 이 게임은 순수 HTML5 기술로 제작되어 모든 현대 브라우저에서 문제없이 동작합니다.

코드에 대한 질문이나 제안사항이 있다면 댓글로 남겨주세요. 감사합니다!


📖 관련 글