웹게임 개발 기초: 연출·VFX·에셋·유료 팩

웹게임의 손맛은 그래픽 품질보다 입력 하나에 돌아오는 작은 반응을 몇 겹 쌓느냐에서 갈린다. VFX(시각 효과)는 파티클 수에 상한을 걸고 이미지를 한 장으로 묶으면 브라우저에서도 버틴다. 에셋은 라이선스 이름부터 읽고, 유료 팩은 웹이 원본 파일을 그대로 내려보낸다는 점이 약관에 걸리지 않는지 확인한다.

01 연출은 입력 하나에 반응을 여러 겹 얹는 일이다

GDC Europe 2012 발표 "Juice It or Lose It" 은 단순한 게임에 파티클 같은 작은 효과를 하나씩 더해, 같은 게임이 훨씬 즐거워지는 과정을 무대에서 보여 줬다. 효과 하나하나는 단순해도 겹치면 같은 조작이 전혀 다르게 느껴진다. 제목의 주스(juice)가 바로 이런 연출이다.

Phaser 는 이 재료 상당수를 기본으로 준다. 카메라에 흔들림·번쩍임·페이드·줌 같은 시간 효과가 있고, 이미 돌고 있는 효과는 force 를 넘기지 않는 한 끊기지 않는다. 덕분에 공격을 연타해도 흔들림이 매번 처음부터 다시 걸리지 않는다.

웹이라서 붙는 제약은 소리다. 브라우저는 클릭·탭·키 입력이 있기 전에는 소리 나는 재생을 막고, Web Audio 의 start() 도 같은 규칙을 따른다. 타이틀 화면의 시작 버튼으로 첫 입력을 받아 두면 첫 타격부터 효과음이 제대로 난다.

02 VFX 는 입자 수와 드로 콜이 예산이다

Phaser 3.60부터 this.add.particles() 가 이미터(입자를 뿜는 객체)를 바로 돌려준다. lifespan 은 입자 수명(밀리초)이고, maxAliveParticles 는 동시에 살아 있는 입자 수를 묶는다. 상한에 닿으면 한 입자가 사라져야 다음 입자가 나온다.

// 'flares' 아틀라스를 미리 load 해 둔 장면(Scene) 안에서
const sparks = this.add.particles(400, 300, 'flares', {
  frame: 'red',
  angle: { min: -30, max: 30 },
  speed: 150,
  lifespan: 400,          // 밀리초
  maxAliveParticles: 80,  // 동시에 살아 있는 입자 상한
});

PixiJS v8 의 ParticleContainer 는 수십만 개가 넘는 입자를 그린다고 소개하지만, 자식·이벤트·필터를 쓸 수 없고 API 도 아직 실험 단계다. 엔진과 별개로 MDN 이 권하는 방향은 하나다. 드로 콜(GPU 에 그리기를 맡기는 호출)을 적고 크게 묶고, 그러려면 여러 이미지를 한 장에 모은 텍스처 아틀라스를 쓴다. 아틀라스 한 변은 MDN 이 최소 한도로 든 4,096픽셀 안에 두는 편이 안전하다. 내 데스크톱에서 16k 텍스처가 열린다고 다른 기기에서도 열리지는 않는다.

03 무료 에셋은 라이선스 이름이 곧 조건이다

같은 무료라도 라이선스마다 할 일이 다르다. OpenGameArt FAQ 를 기준으로 추리면 아래와 같고, 모두 상업 게임에 쓸 수 있다.

라이선스	크레딧	더 지킬 것
CC0	필요 없음	없음
CC-BY	필요	바꾼 부분 표시, DRM 걸린 배포 불가
CC-BY-SA	필요	2차 저작물도 같은 라이선스로 공개
GPL	OGA 는 필요로 본다	비공개 프로젝트는 영향부터 확인

Kenney 에셋은 전부 CC0 라서 상업 프로젝트에도 크레딧 없이 쓸 수 있다. 다만 Kenney 로고는 쓰지 말라고 적어 두었다. itch.io 는 라이선스를 강제하지 않는다. 제작자가 메타데이터에서 고르거나 설명란에 직접 쓰는 방식이라, 아무것도 안 적힌 팩은 쓰기 전에 제작자에게 묻는 편이 낫다.

04 유료 팩은 웹에서 원본이 보인다는 점까지 따진다

Unity 에셋 스토어 EULA(최종 사용자 사용권 계약)는 에셋을 제품 안에 넣어 함께 배포하도록 허락한다. 조건은 그 에셋이 제품의 상당 부분을 차지하지 않는 것이다. Unity 엔진에서만 쓰라는 문구는 없지만, 에셋 자체를 팔거나 재배포하는 일은 막는다.

걸리는 곳은 웹의 구조다. 웹게임은 이미지·소리·모델 파일을 브라우저가 받아 쓰므로, 개발자 도구의 네트워크 탭만 열어도 원본이 보인다. GameDevHQ Filebase 약관은 3D 모델을 남이 내려받을 수 있는 열린 형식으로 두지 말라고 적고, Unity·Unreal 은 이 처리를 알아서 한다고 덧붙인다. 웹에서는 이 부분을 직접 챙겨야 하니, 유료 팩을 사기 전에 약관에서 '웹'·'추출' 관련 조항부터 찾는다.

05 처음이라면 도형과 CC0 팩으로 시작한다

작은 웹게임을 처음 만든다면 이 순서가 덜 헤맨다.

도형만으로 조작을 만들고, 흔들림·파티클·효과음을 하나씩 켜며 차이를 본다.
화면은 CC0 팩으로 채워 라이선스 걱정 없이 빠르게 돌린다.
받은 에셋마다 출처·라이선스·크레딧 문구를 한 파일에 적어 둔다.
이미터마다 동시 입자 상한을 먼저 정한 뒤 효과를 키운다.
유료 팩은 웹 배포와 추출 조항을 확인하고 나서 산다.

유료 팩은 게임이 재미있다는 확신이 선 뒤에 사도 늦지 않다. 손맛은 그림보다 반응에서 나오므로, 도형만으로 즐겁지 않은 게임은 비싼 팩을 입혀도 크게 달라지지 않는다. 팩을 고를 때도 그림보다 약관을 먼저 끝까지 읽어 두면 출시 직전에 에셋을 갈아엎는 일을 피할 수 있다.