HTML5로의 이행 - 3부

작성자: 데이비드 갈레아노, 던컨 텝스 (David Galeano, Duncan Tebbs)
작성일: 2013년 3월 7일

이 글은 3 부작 중 제 3 부로, 크리테리온에서 일했던 노련한 콘솔 개발자들이 HTML5 개발로의 대세 변화와 관련된 다양한 특징을 논한 글이다. 1 부1 와 2 부2도 놓치지 말자.

본 시리즈의 마지막 3 부에서는 HTML5 의 특징과 게임에 관련된 기능성 및 인터페이스에 대해 더 자세히 알아보고, 리소스 로딩과 보안 문제 등 중요한 이슈에 대응하는 전략을 살펴볼 것이다. 또한 HTML5 의 모바일 기기 적용에 대한 개략적 소개에 이어, 결론에서는 개발자들이 고급 게임 개발을 위해 HTML5 에 관심을 가져야 하는 이유에 대해 논하고자 한다.

네트워킹 – 웹소켓

웹소켓(WebSocket)3 API 는 브라우저와 서버 간에 영구적인 양방향 커뮤니케이션을 허용한다. 웹소켓 연결은 표준 HTTP 연결로 시작되어 새로운 프로토콜로 업그레이드되며, 이때 웹소켓 연결은 어떤 프록시나 방화벽에서도 사용 가능하다. 이 API 는 사용법도 간단해서 콜백(callback) 두세 번이면 쉽게 양방향 커뮤니케이션을 할 수 있다.

웹소켓 연결은 트랜스포트 메커니즘으로 TCP 를 사용하기 때문에 더욱 신뢰할만한데, 메시지는 반드시 보낸 순서대로 전달된다. (물론 연결이 끊어진 경우는 예외이다).

다른 종류의 TCP 연결들은 브라우저나 서버, 또는 트리 간의 인터넷 노드가 지연(latency) 문제를 해결하지 않고 대역폭을 최적화할 경우에 문제가 발생한다는 것이 발견되었다. 일부 클라이언트나 서버는 네이글 알고리즘(Nagle's algorithm)4을 사용하여 패킷당 전송하는 데이터의 양을 최대화하기 때문에 지연의 원인이 된다.

웹소켓 API 는 한 브라우저에서 다른 브라우저로 직접 연결되는 것을 허용하지않는다. 항상 웹소켓 서버를 통해 연결해야 한다.

사양을 정의하는 과정이 길고 복잡했던 탓에, 결과적으로 여러 브라우저가 각기 다른 버전의 프로토콜을 지원하게 되었고 일부는 버전이 바뀌기도 했다. 이는 서버에 연결을 시도하는 모든 클라이언트를 관리하려면 몇 가지 버전의 프로토콜을 지원해야 한다는 것을 의미한다.

터뷸렌즈에서는 게임 온라인 인프라스트럭처 부분에서 클라이언트들이 서로 커뮤니케이션할 수 있도록 멀티플레이어 서버를 제공한다. 이는 스코어 러시(Score Rush)의 멀티플레이어 버전5에서 활용되었는데, 싱글 세션에서 플레이어 네 명까지 동기화가 가능하다.

 웹소켓을 지원하지 않는 브라우저도 있기 때문에, 다른 메커니즘을 사용하는 비슷한 API 를 수행하는 SockJS 6 와 같은 에뮬레이션 라이브러리도 있다. 이들 메커니즘은 일반적으로 서버 쪽의 특정 지원이 필요하고, 웹소켓을 사용하는 경우에 비하면 여러 다른 폴백(fallback)의 지연 현상이 더 많이 나타날 수 있다. 터뷸렌즈의 플러그인은 이 API 를 네이티브로 지원하지 않는 브라우저를 위해 웹소켓을 지원하고 있다.

오디오

오디오 요소(The Audio Element)

오디오(audio)7 요소는 사운드 파일의 로딩과 플레이를 지원한다. HTML 표준에 이 특성이 더해진 덕분에 게임에서 플러그인을 사용하지 않고도 좋은 사운드를 낼 수 있게 되었다. 그러나 초창기 실행 시 품질 문제로 기본적인 활용밖에 하지 못하는 것이 현실이다. 예를 들어 파이어폭스는 loop 프로퍼티를 지원하지 않기 때문에, 사운드가 끝나고 다시 시작하기 위해서는 이벤트들을 통한 코드가 필요했다. 이렇게 하더라도 플레이백 끝 부분의 공백과 재시작은 쉽게 감지할 수 있었다.

대안으로 같은 소스 파일에서 두 개의 오디오 오브젝트를 생성하여 하나가 포즈상태로 대기하다가 다른 하나가 끝나면 최대한 빨리 플레이를 시작하도록 하는 방법도 있다. 이렇게 두 개의 사운드로 ‘핑-퐁’을 하면 하나만 재시작하는 것보다는  낫지만, 코드가 복잡해져서 복잡한 사운드 장면이 들어가는 게임에서는 리소스 낭비의 원인이 될 수도 있다. 또 다른 방법으로 동시에 몇 개의 사운드를 플레이하는 것은 더듬는 소리가 나서 품질에 문제가 생겼다. 이러한 문제는 점차 개선되었지만 구 버전의 브라우저들에서는 여전히 문제가 되고 있다.

표준 파일 포맷이 지원되지 않는 브라우저가 많기 때문에 새로운 API 를 사용하는데 어려움이 있다. 인터넷 익스플로러는 MP3 파일만 지원하고, 사파리는 Wav 와 MP3 파일, 파이어폭스는 Wav 와 Ogg 파일만 지원한다. 크롬에서는 유일하게 이 세 파일 형식 모두를 지원하고 있다. 이는 현실적으로 사운드 파일이 모든 브라우저에서 실행되도록 하려면 MP3 와 Ogg 형식, 둘 다로 인코딩이 되어야한다는 것을 의미한다.

웹 오디오(Web Audio)

웹 오디오(Web Audio)8 API 는 보다 고품질의 사운드 지원을 제공한다. 기본적으로 OpenAL 9 종류에 기반하고 있어 사운드 소스, 3D 사운드, 필터와 복잡한 채널을 처리할 때 정확한 시간으로 플레이백이 가능하다. 이는 오디오 요소에 비하면 게임에 훨씬 더 적합한 솔루션이지만, 작성할 때 크롬에서만 지원이 된다는 것이 단점이다.

웹 오디오 API 는 OpenAL 와는 달리 아직까지는 관련된 3D 사운드 소스가 지원되지 않기 때문에, 주변 청자들을 따라가기 위해서 끊임없는 소스 로케이션의 업데이트가 필요하다.

터뷸렌즈에서는 OpenAL 사양에 근접한 수준의 3D 사운드 API 를 개발하였으며, 이는 웹 오디오(Web Audio), 오디오 요소(audio element) 등 몇몇 다른 백엔드(backend)에서 실행이 가능하다. 또한 브라우저에서 이 둘이 지원되지 않을 때는 우리의 플러그인이 직접 API 를 실행하게 되어 있다.

※ 자세한 내용은 첨부(PDF)화일을 참고하시기 바랍니다.