HTML5란? 웹에서 게임까지, 플러그인 없이 다 되는 시대

HTML5란?

HTML5는 웹페이지를 만드는 표준 언어인 HTML의 5번째 버전이다. 단순한 "버전업"이 아니라, 웹에서 할 수 있는 것들이 폭발적으로 늘어난 전환점이었다.

이전 HTML4 시절에는 웹에서 동영상을 보려면 Flash Player를 설치해야 했고, 게임을 하려면 Java Applet이 필요했다. 브라우저만으로는 텍스트와 이미지 배치 정도가 한계였다.

HTML5가 등장하면서 이 모든 것이 브라우저 자체에서 가능해졌다. 별도 플러그인 설치 없이, 동영상 재생, 게임 실행, 실시간 통신까지 웹 브라우저 하나로 모든 것을 처리할 수 있는 시대가 열린 것이다.

---

HTML5에서 추가된 핵심 기능들

1. Canvas API — 브라우저 위의 도화지

일반 HTML이 버튼, 텍스트, 이미지를 배치하는 것이라면, Canvas는 픽셀 단위로 자유롭게 그리는 도화지다.

게임에서 캐릭터를 움직이거나, 도형을 그리거나, 애니메이션을 60fps로 부드럽게 처리할 수 있다. HTML5 게임의 핵심이 되는 기능이다.

<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
  
  // 원 그리기
  ctx.beginPath();
  ctx.arc(400, 300, 50, 0, Math.PI * 2);
  ctx.fillStyle = '#FF6B35';
  ctx.fill();
  
  // 애니메이션 루프
  function gameLoop() {
    ctx.clearRect(0, 0, 800, 600);
    // 게임 로직 + 렌더링
    requestAnimationFrame(gameLoop);
  }
  gameLoop();
</script>

2. WebGL — 브라우저에서 3D 그래픽

Canvas가 2D라면, WebGL은 3D 그래픽을 가능하게 한다. GPU를 직접 활용하기 때문에 고성능 렌더링이 가능하다.

Three.js, Babylon.js 같은 3D 라이브러리의 기반 기술이며, Unity WebGL 빌드도 이 기술 위에서 동작한다.

3. Video / Audio — 플러그인 없는 미디어 재생

HTML5 이전에는 웹에서 영상을 보려면 Flash Player가 필수였다. 이제는 <video>, <audio> 태그 하나로 끝난다.

<!-- 이전: Flash Player 필요 -->
<object type="application/x-shockwave-flash" ...></object>

<!-- HTML5: 태그 하나면 끝 -->
<video src="movie.mp4" controls></video>
<audio src="music.mp3" controls></audio>

4. Web Audio API — 사운드 엔진

단순 재생을 넘어서 사운드를 프로그래밍으로 제어할 수 있다.

게임 효과음 생성, 실시간 오디오 합성, 주파수 분석 등이 가능하다. 외부 사운드 파일 없이도 코드만으로 효과음을 만들 수 있다.

const audioCtx = new AudioContext();
const oscillator = audioCtx.createOscillator();

// 'ting!' 효과음 생성
oscillator.type = 'sine';
oscillator.frequency.value = 880; // A5 음
oscillator.connect(audioCtx.destination);
oscillator.start();
oscillator.stop(audioCtx.currentTime + 0.1); // 0.1초 재생

5. LocalStorage — 브라우저 데이터 저장소

서버 없이 사용자의 브라우저에 데이터를 저장할 수 있다. 게임의 세이브 데이터, 설정값, 진행 상태 등을 저장하는 데 활용된다.

// 게임 데이터 저장
localStorage.setItem('highScore', '15000');
localStorage.setItem('currentStage', '12');

// 게임 데이터 불러오기
const highScore = localStorage.getItem('highScore'); // '15000'
const stage = localStorage.getItem('currentStage');   // '12'

6. WebSocket — 실시간 양방향 통신

HTTP는 요청-응답 방식이라 실시간 통신이 어렵다. WebSocket은 서버와 클라이언트가 항상 연결된 상태로 실시간 데이터를 주고받을 수 있다.

채팅, 멀티플레이어 게임, 실시간 알림 등에 사용된다.

const ws = new WebSocket('wss://game-server.example.com');

ws.onopen = () => {
  ws.send(JSON.stringify({ type: 'join', player: 'user1' }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // 실시간으로 다른 플레이어 위치 업데이트
};

7. Touch Events — 모바일 터치 인식

스마트폰의 터치, 스와이프, 멀티터치를 감지할 수 있다. 모바일 게임의 조작 입력을 처리하는 핵심 기능이다.

canvas.addEventListener('touchstart', (e) => {
  const touch = e.touches[0];
  // 터치 시작 좌표
  console.log(`X: ${touch.clientX}, Y: ${touch.clientY}`);
});

canvas.addEventListener('touchmove', (e) => {
  // 스와이프 추적
});

8. Geolocation — GPS 위치 정보

사용자의 현재 위치를 브라우저에서 직접 가져올 수 있다. 위치 기반 서비스나 AR 게임 등에 활용된다.

navigator.geolocation.getCurrentPosition((position) => {
  console.log(`위도: ${position.coords.latitude}`);
  console.log(`경도: ${position.coords.longitude}`);
});

---

HTML5 기능 총정리

기능 설명 활용 예시

Canvas API	2D 그래픽, 애니메이션	2D 게임, 차트, 그림판
WebGL	3D 그래픽 렌더링	3D 게임, 시뮬레이션
Video / Audio	미디어 재생	동영상 플레이어, 음악 앱
Web Audio API	사운드 제어, 합성	게임 효과음, 음악 도구
LocalStorage	클라이언트 데이터 저장	게임 세이브, 설정 저장
WebSocket	실시간 양방향 통신	채팅, 멀티플레이어
Touch Events	모바일 터치 입력	모바일 게임 조작
Geolocation	GPS 위치 정보	위치 기반 서비스, AR

---

HTML5 게임이란?

"HTML5 게임"이란 위의 기능들을 조합해서 별도 앱 설치 없이 브라우저에서 바로 돌아가는 게임을 말한다.

대표적인 HTML5 게임 프레임워크로는 다음이 있다:

• Phaser — 2D 게임에 가장 인기 있는 프레임워크
• PixiJS — 고성능 2D 렌더링 엔진
• Three.js — 3D 게임 및 시각화
• Babylon.js — 웹 기반 3D 게임 엔진

HTML5 게임의 장점

• 설치 불필요 — URL 클릭만으로 바로 플레이
• 크로스 플랫폼 — PC, 모바일, 태블릿 모두 동작
• 빠른 배포 — 앱스토어 심사 없이 웹 배포
• 접근성 — 누구나 링크 하나로 접근 가능

HTML5 게임의 실제 활용

최근 토스의 앱인토스(Apps in Toss) 같은 미니앱 플랫폼이 HTML5 게임의 대표적인 활용 사례다. 토스 앱 안의 웹뷰(브라우저)에서 HTML5 게임이 돌아가는 구조로, 별도 앱 설치 없이 3,000만 유저에게 게임을 제공할 수 있다.

중국의 위챗 미니게임도 같은 원리로, HTML5 기반 게임 생태계가 글로벌하게 성장하고 있다.

---

웹 개발자가 게임을 만들 수 있는 이유

React, Next.js, TypeScript로 웹 개발을 하고 있다면, 이미 HTML5 위에서 작업하고 있는 것이다.

일반 웹앱과 게임의 차이는 Canvas와 Web Audio API를 적극적으로 쓰는지 정도다. DOM 조작 대신 Canvas에 직접 그리고, 이벤트 핸들러로 터치 입력을 처리하고, requestAnimationFrame으로 게임 루프를 돌리면 게임이 된다.

// 일반 웹앱: DOM 조작
document.getElementById('button').addEventListener('click', handler);

// 게임: Canvas + 게임 루프
function gameLoop() {
  update();  // 게임 로직 (물리, 충돌, 점수)
  render();  // Canvas에 그리기
  requestAnimationFrame(gameLoop);  // 60fps 반복
}

기존 웹 개발 스킬(JavaScript, React, 상태관리, 이벤트 처리)이 게임 개발에 거의 그대로 적용되기 때문에, 웹 개발자라면 HTML5 게임 개발의 진입 장벽이 생각보다 낮다.

---

마무리

HTML5는 단순한 마크업 언어의 업데이트가 아니라, 웹을 애플리케이션 플랫폼으로 바꾼 혁신이었다. Canvas, WebGL, Web Audio, WebSocket 등의 API를 통해 네이티브 앱 못지않은 경험을 브라우저에서 제공할 수 있게 되었다.

특히 모바일 시대와 미니앱 생태계의 성장으로 HTML5 게임의 가치가 재조명되고 있다. 앱 설치라는 허들 없이 링크 하나로 게임을 즐길 수 있다는 것은, 개발자와 유저 모두에게 강력한 이점이다.

웹 개발 경험이 있다면, HTML5 게임 개발은 새로운 세계가 아니라 익숙한 기술의 확장이다.