Phaser 사운드와 음악 완벽 가이드

게임 개발에서 빠질 수 없는 사운드와 음악을 Phaser로 다루는 방법을 알아봅니다. 오디오 파일 로드부터 효과음, 배경음악, 볼륨 조절까지 실무에서 바로 활용할 수 있는 기술을 배웁니다.

---

목차

1. 오디오_파일_로드
2. 효과음_재생
3. 배경음악_루프
4. 볼륨_조절
5. 오디오_스프라이트
6. 음소거_기능

---

1. 오디오 파일 로드

김개발 씨는 첫 번째 웹 게임을 만들고 있습니다. 캐릭터도 움직이고 적도 나타나는데, 뭔가 허전합니다.

바로 소리가 없기 때문입니다. "게임에 소리를 넣으려면 어떻게 해야 하지?" 선배 박시니어 씨에게 물었습니다.

오디오 파일 로드는 게임에서 소리를 재생하기 전에 반드시 거쳐야 하는 첫 번째 단계입니다. 마치 요리를 하기 전에 재료를 냉장고에서 꺼내 준비하는 것과 같습니다.

Phaser에서는 preload 함수에서 this.load.audio 메서드를 사용하여 오디오 파일을 미리 불러옵니다.

다음 코드를 살펴봅시다.

// Phaser 씬의 preload 함수에서 오디오 로드
function preload() {
    // 효과음 로드: (키 이름, 파일 경로)
    this.load.audio('jump', 'assets/sounds/jump.mp3');
    this.load.audio('coin', 'assets/sounds/coin.wav');

    // 배경음악 로드
    this.load.audio('bgm', 'assets/music/background.mp3');

    // 여러 포맷 지원 (브라우저 호환성)
    this.load.audio('explosion', [
        'assets/sounds/explosion.ogg',
        'assets/sounds/explosion.mp3'
    ]);
}

김개발 씨는 입사 3개월 차 주니어 개발자입니다. 첫 웹 게임 프로젝트를 맡아 열심히 개발하던 중, 게임이 너무 조용하다는 것을 깨달았습니다.

점프할 때 효과음도 없고, 배경음악도 없으니 마치 무성영화를 보는 것 같았습니다. 선배 개발자 박시니어 씨가 다가와 화면을 보더니 말했습니다.

"소리가 없으면 게임의 절반은 빠진 거나 마찬가지예요. 먼저 오디오 파일을 로드하는 방법부터 알아야 해요." 그렇다면 오디오 파일 로드란 정확히 무엇일까요?

쉽게 비유하자면, 오디오 로드는 마치 요리사가 요리를 시작하기 전에 냉장고에서 재료를 꺼내 도마 위에 올려놓는 것과 같습니다. 아무리 훌륭한 레시피가 있어도 재료가 준비되지 않으면 요리를 할 수 없습니다.

마찬가지로 게임에서 소리를 재생하려면 먼저 오디오 파일을 메모리에 불러와야 합니다. 오디오 로드 없이 바로 재생하려고 하면 어떻게 될까요?

브라우저는 "그런 소리 파일 몰라요"라며 에러를 뱉어냅니다. 네트워크에서 파일을 가져오는 데는 시간이 걸리기 때문에, 게임이 시작되기 전에 미리 준비해두어야 합니다.

그렇지 않으면 캐릭터가 점프하는 순간 효과음이 1초 늦게 나오는 어색한 상황이 벌어집니다. 바로 이런 문제를 해결하기 위해 Phaser는 preload 함수를 제공합니다.

preload 함수는 게임이 시작되기 전에 실행되어 모든 리소스를 미리 불러옵니다. 이미지, 스프라이트, 그리고 오디오 파일까지 모두 이 단계에서 로드됩니다.

로딩이 완료되어야만 create 함수가 실행되기 때문에, 게임 시작 시점에는 모든 리소스가 준비된 상태입니다. 위의 코드를 한 줄씩 살펴보겠습니다.

먼저 this.load.audio의 첫 번째 인자는 키 이름입니다. 나중에 이 소리를 재생할 때 이 이름으로 찾게 됩니다.

마치 파일에 별명을 붙여주는 것과 같습니다. 두 번째 인자는 실제 파일의 경로입니다.

배열로 여러 파일 경로를 전달하는 부분도 눈여겨보세요. 브라우저마다 지원하는 오디오 포맷이 다르기 때문입니다.

어떤 브라우저는 OGG를 좋아하고, 어떤 브라우저는 MP3만 재생할 수 있습니다. 배열로 제공하면 Phaser가 알아서 재생 가능한 포맷을 선택합니다.

실제 현업에서는 어떻게 활용할까요? 대부분의 게임 프로젝트에서는 로딩 화면을 만들어 사용자에게 진행 상황을 보여줍니다.

파일 개수가 많아지면 로딩 시간도 길어지기 때문입니다. 오디오 파일은 특히 용량이 크므로, MP3 파일을 적절히 압축하거나 짧은 효과음은 WAV 대신 MP3를 사용하는 것이 좋습니다.

하지만 주의할 점도 있습니다. 초보 개발자들이 흔히 하는 실수 중 하나는 파일 경로를 잘못 지정하는 것입니다.

대소문자를 틀리거나, 확장자를 빠뜨리면 로드에 실패합니다. 개발자 도구의 콘솔을 열어 에러 메시지를 확인하는 습관을 들이세요.

다시 김개발 씨의 이야기로 돌아가 봅시다. 박시니어 씨의 설명을 들은 김개발 씨는 preload 함수에 오디오 로드 코드를 추가했습니다.

"생각보다 간단하네요!" 오디오 파일 로드를 제대로 이해하면 게임의 모든 소리를 자유자재로 다룰 수 있는 첫 발을 내딛은 것입니다.

실전 팁

💡 - 오디오 파일은 가능한 작은 용량으로 압축하여 로딩 시간을 줄이세요

• 브라우저 호환성을 위해 MP3와 OGG 두 가지 포맷을 함께 제공하는 것이 좋습니다

---

2. 효과음 재생

오디오 파일 로드에 성공한 김개발 씨는 이제 실제로 소리를 재생하고 싶어졌습니다. 캐릭터가 점프할 때 "퐁!" 하는 소리가 나면 얼마나 좋을까요?

박시니어 씨가 미소를 지으며 말했습니다. "이제 진짜 재미있는 부분이에요."

효과음 재생은 게임에서 특정 액션이 발생했을 때 짧은 소리를 내는 것입니다. 마치 버튼을 누르면 "딸깍" 소리가 나는 것처럼, 플레이어의 행동에 즉각적인 피드백을 제공합니다.

Phaser에서는 this.sound.play 메서드로 간단하게 효과음을 재생할 수 있습니다.

다음 코드를 살펴봅시다.

// create 함수에서 효과음 설정
function create() {
    // 가장 간단한 효과음 재생
    this.sound.play('jump');

    // 옵션과 함께 재생
    this.sound.play('coin', {
        volume: 0.5,    // 볼륨 (0 ~ 1)
        rate: 1.2       // 재생 속도 (1이 기본)
    });

    // 키 입력 시 효과음 재생
    this.input.keyboard.on('keydown-SPACE', () => {
        this.sound.play('jump');
    });
}

김개발 씨는 드디어 게임에 소리를 넣을 준비가 되었습니다. preload에서 오디오 파일을 로드했으니, 이제 create 함수에서 재생만 하면 됩니다.

하지만 단순히 소리를 내는 것과, 적절한 타이밍에 적절한 소리를 내는 것은 다른 문제입니다. 선배 박시니어 씨가 설명을 이어갔습니다.

"효과음은 게임의 느낌을 완전히 바꿔놓아요. 같은 점프라도 '퐁' 소리가 나면 가볍게 느껴지고, '쿵' 소리가 나면 묵직하게 느껴지죠." 그렇다면 효과음 재생이란 정확히 무엇일까요?

쉽게 비유하자면, 효과음은 마치 영화의 음향 효과와 같습니다. 주먹이 날아갈 때 "휙" 소리, 문이 닫힐 때 "쾅" 소리.

이런 소리들이 없으면 영화가 밋밋하게 느껴집니다. 게임도 마찬가지입니다.

효과음은 플레이어에게 "네 행동이 잘 전달됐어"라고 알려주는 신호입니다. 효과음이 없는 게임은 어떤 느낌일까요?

버튼을 눌러도 아무 반응이 없는 것 같고, 적을 물리쳐도 성취감이 덜합니다. 연구에 따르면 적절한 효과음은 게임의 몰입감을 크게 높여준다고 합니다.

많은 명작 게임들이 효과음 디자인에 엄청난 공을 들이는 이유입니다. Phaser에서 효과음을 재생하는 방법은 놀랍도록 간단합니다.

this.sound.play 메서드에 아까 로드할 때 지정한 키 이름을 전달하면 됩니다. 단 한 줄로 소리가 납니다.

너무 간단해서 의심이 들 정도입니다. 하지만 이게 전부가 아닙니다.

두 번째 인자로 다양한 옵션을 설정할 수 있습니다. 위의 코드를 자세히 살펴보겠습니다.

volume 옵션은 0부터 1 사이의 값으로 소리 크기를 조절합니다. 0.5면 절반 크기입니다.

rate 옵션은 재생 속도를 조절하는데, 1.2로 설정하면 20% 빠르게 재생됩니다. 이 옵션을 잘 활용하면 하나의 효과음 파일로 다양한 느낌을 낼 수 있습니다.

가장 중요한 부분은 이벤트와의 연결입니다. 키보드의 스페이스바를 누르면 점프 효과음이 재생되도록 설정했습니다.

이렇게 사용자의 입력에 효과음을 연결하면 게임이 살아 움직이는 느낌을 줄 수 있습니다. 충돌 감지, 아이템 획득, 적 처치 등 모든 이벤트에 적절한 효과음을 붙여보세요.

실무에서 주의해야 할 점이 있습니다. 같은 효과음이 너무 빠르게 반복되면 귀에 거슬릴 수 있습니다.

예를 들어 기관총을 쏘는 게임에서 매 발사마다 효과음을 재생하면 소리가 겹쳐서 이상하게 들립니다. 이럴 때는 효과음 재생 간격을 조절하거나, 여러 개의 비슷한 효과음을 번갈아 재생하는 기법을 사용합니다.

다시 김개발 씨의 이야기로 돌아가 봅시다. 스페이스바를 눌렀을 때 "퐁!" 소리가 나자, 김개발 씨의 얼굴에 미소가 번졌습니다.

"와, 진짜 게임 같아요!" 효과음 하나로 게임의 완성도가 확 올라가는 것을 직접 경험한 순간이었습니다.

실전 팁

💡 - 효과음은 짧고 임팩트 있게, 0.5초 이내가 적당합니다

• 같은 효과음이 빠르게 반복될 때는 rate 옵션으로 약간의 변화를 주면 자연스럽습니다

---

3. 배경음악 루프

효과음까지 넣었지만 김개발 씨는 뭔가 부족하다고 느꼈습니다. 게임을 플레이하는 동안 조용한 시간이 너무 깁니다.

"배경음악이 필요해요." 박시니어 씨가 고개를 끄덕이며 새로운 기술을 알려주기 시작했습니다.

배경음악 루프는 게임이 진행되는 동안 끊김 없이 반복 재생되는 음악을 말합니다. 마치 카페에서 은은하게 흐르는 음악처럼, 게임의 분위기를 만들어주는 역할을 합니다.

Phaser에서는 loop 옵션을 true로 설정하여 음악이 끝나면 자동으로 처음부터 다시 재생되도록 할 수 있습니다.

다음 코드를 살펴봅시다.

function create() {
    // 배경음악을 루프로 재생
    this.bgm = this.sound.add('bgm', {
        volume: 0.3,
        loop: true      // 무한 반복
    });
    this.bgm.play();

    // 또는 한 줄로 간단하게
    this.sound.play('bgm', { loop: true, volume: 0.3 });

    // 씬 전환 시 배경음악 정지
    this.events.on('shutdown', () => {
        this.bgm.stop();
    });
}

김개발 씨는 좋아하는 게임들을 떠올려 보았습니다. 마리오의 경쾌한 음악, 젤다의 웅장한 음악, 테트리스의 중독성 있는 음악.

배경음악은 게임의 정체성을 만드는 핵심 요소입니다. 그런데 음악이 한 번 재생되고 끝나버리면 어떨까요?

선배 박시니어 씨가 말했습니다. "배경음악은 루프가 핵심이에요.

플레이어가 게임에 몰입하는 동안 끊김 없이 흘러야 합니다." 그렇다면 배경음악 루프란 정확히 무엇일까요? 쉽게 비유하자면, 루프는 마치 회전목마와 같습니다.

한 바퀴를 돌고 나면 멈추지 않고 다시 처음부터 돕니다. 배경음악도 마찬가지로, 끝까지 재생된 후 자연스럽게 처음으로 돌아가 계속 반복됩니다.

플레이어는 음악이 언제 끝나고 언제 시작되는지 눈치채지 못합니다. 루프 없이 배경음악을 재생하면 어떻게 될까요?

3분짜리 음악이 끝나면 갑자기 조용해집니다. 플레이어는 "어?

소리가 왜 없지?"라고 의아해하며 몰입이 깨집니다. 직접 반복 재생하는 코드를 작성할 수도 있지만, 타이밍을 맞추기가 까다롭고 코드도 복잡해집니다.

Phaser의 loop 옵션은 이 모든 것을 한 단어로 해결합니다. this.sound.add 메서드로 사운드 객체를 생성할 때 loop: true를 전달하면 됩니다.

이렇게 생성된 객체는 나중에 정지하거나 볼륨을 조절하는 등 다양한 제어가 가능합니다. 위의 코드에서 중요한 부분을 짚어보겠습니다.

this.sound.add는 사운드 객체를 생성만 하고 재생하지는 않습니다. 별도로 play 메서드를 호출해야 재생이 시작됩니다.

이렇게 분리하면 원하는 타이밍에 정확하게 음악을 시작할 수 있습니다. 씬 전환 시 배경음악을 정지하는 코드도 눈여겨보세요.

게임에는 여러 씬이 있습니다. 메인 메뉴, 게임 플레이, 게임 오버 화면 등.

각 씬마다 다른 배경음악이 필요할 수 있습니다. shutdown 이벤트에 정지 코드를 연결해두면, 씬이 바뀔 때 이전 음악이 깔끔하게 정지됩니다.

실무에서는 페이드 효과를 자주 사용합니다. 음악이 갑자기 뚝 끊기면 부자연스럽습니다.

씬 전환 시 볼륨을 서서히 줄이다가 완전히 0이 되면 정지하는 페이드 아웃 효과를 넣으면 훨씬 자연스럽습니다. Phaser의 tweens 시스템과 결합하면 이런 효과를 쉽게 구현할 수 있습니다.

하지만 주의할 점이 있습니다. 배경음악 파일은 용량이 크기 때문에 로딩 시간에 영향을 줍니다.

긴 음악보다는 짧지만 루프가 자연스러운 음악을 사용하는 것이 좋습니다. 음악 파일을 만들 때 시작과 끝이 자연스럽게 연결되도록 편집하면 완벽한 루프를 만들 수 있습니다.

다시 김개발 씨의 이야기로 돌아가 봅시다. 배경음악이 흘러나오자 게임의 분위기가 완전히 달라졌습니다.

"이제야 진짜 게임 같아요!" 김개발 씨가 감탄했습니다. 배경음악 하나로 게임의 몰입감이 몇 배나 높아지는 것을 경험한 순간이었습니다.

실전 팁

💡 - 배경음악 볼륨은 0.2~0.4 정도로 설정하여 효과음을 묻히지 않게 하세요

• 루프 포인트가 자연스러운 음악 파일을 사용하면 끊김이 느껴지지 않습니다

---

4. 볼륨 조절

김개발 씨의 게임에 이제 효과음과 배경음악이 모두 들어갔습니다. 그런데 테스트를 해보니 문제가 있었습니다.

배경음악이 너무 커서 효과음이 잘 안 들립니다. "볼륨 조절을 해야겠어요." 박시니어 씨가 고개를 끄덕였습니다.

볼륨 조절은 게임의 오디오 경험을 세밀하게 다듬는 작업입니다. 마치 오디오 믹서에서 각 채널의 볼륨을 조절하듯이, 효과음과 배경음악의 균형을 맞춥니다.

Phaser에서는 개별 사운드의 볼륨뿐만 아니라 전체 게임의 마스터 볼륨도 조절할 수 있습니다.

다음 코드를 살펴봅시다.

function create() {
    // 개별 사운드 볼륨 설정
    this.bgm = this.sound.add('bgm', { volume: 0.3 });

    // 실행 중 볼륨 변경
    this.bgm.setVolume(0.5);

    // 전체 마스터 볼륨 조절
    this.sound.volume = 0.8;

    // 볼륨 슬라이더 구현 예시
    this.input.keyboard.on('keydown-UP', () => {
        this.sound.volume = Math.min(1, this.sound.volume + 0.1);
        console.log('Volume:', this.sound.volume);
    });

    this.input.keyboard.on('keydown-DOWN', () => {
        this.sound.volume = Math.max(0, this.sound.volume - 0.1);
    });
}

김개발 씨는 헤드폰을 끼고 게임을 테스트하고 있었습니다. 배경음악은 좋은데, 점프 효과음이 거의 안 들립니다.

볼륨을 키우니 이번엔 배경음악이 너무 시끄럽습니다. 이 둘의 균형을 어떻게 맞춰야 할까요?

선배 박시니어 씨가 조언했습니다. "오디오 믹싱은 게임 개발에서 정말 중요한 부분이에요.

모든 소리가 조화롭게 들려야 합니다." 그렇다면 볼륨 조절이란 정확히 무엇일까요? 쉽게 비유하자면, 볼륨 조절은 마치 오케스트라의 지휘자와 같습니다.

바이올린이 너무 크면 첼로가 안 들리고, 트럼펫이 너무 작으면 클라이맥스가 밋밋해집니다. 지휘자는 각 악기의 볼륨을 조절하여 아름다운 하모니를 만들어냅니다.

게임 개발자도 마찬가지입니다. 볼륨 조절이 제대로 되지 않으면 어떤 문제가 생길까요?

배경음악이 너무 크면 효과음이 묻혀서 플레이어가 중요한 신호를 놓칩니다. 효과음이 너무 크면 귀가 아프고 배경음악의 분위기가 살지 않습니다.

더 큰 문제는 사용자마다 선호하는 볼륨이 다르다는 것입니다. 어떤 사람은 조용한 환경에서, 어떤 사람은 시끄러운 지하철에서 게임을 합니다.

Phaser는 다양한 레벨의 볼륨 조절을 지원합니다. 먼저 개별 사운드 볼륨이 있습니다.

각 효과음이나 배경음악마다 다른 볼륨을 설정할 수 있습니다. setVolume 메서드를 사용하면 재생 중에도 볼륨을 변경할 수 있습니다.

다음으로 마스터 볼륨이 있습니다. this.sound.volume은 게임 전체의 볼륨을 조절합니다.

이 값을 0.5로 설정하면 모든 소리가 절반 크기로 재생됩니다. 사용자가 설정 메뉴에서 조절하는 볼륨은 보통 이 마스터 볼륨입니다.

위의 코드에서 키보드로 볼륨을 조절하는 부분을 보세요. 위쪽 화살표를 누르면 볼륨이 0.1씩 올라가고, 아래쪽 화살표를 누르면 0.1씩 내려갑니다.

Math.min과 Math.max를 사용하여 볼륨이 0 미만이나 1 초과가 되지 않도록 제한하고 있습니다. 실무에서는 볼륨 설정을 저장하는 것이 중요합니다.

플레이어가 볼륨을 조절해 놓았는데 게임을 다시 시작하면 초기화된다면 짜증이 날 것입니다. localStorage나 게임의 저장 시스템을 활용하여 볼륨 설정을 저장하고, 게임 시작 시 불러오는 기능을 구현하면 좋습니다.

또한 효과음과 배경음악의 볼륨을 따로 조절할 수 있게 하는 것도 좋은 방법입니다. 어떤 플레이어는 배경음악 없이 효과음만 듣고 싶어합니다.

반대로 효과음은 끄고 자신의 음악을 들으며 게임하고 싶은 사람도 있습니다. 각각의 볼륨을 따로 조절할 수 있는 옵션을 제공하면 사용자 경험이 크게 향상됩니다.

다시 김개발 씨의 이야기로 돌아가 봅시다. 배경음악 볼륨을 0.3으로, 효과음 볼륨을 0.7로 설정하니 모든 소리가 선명하게 들리면서도 조화로웠습니다.

"이제 완벽해요!" 김개발 씨가 만족스러워했습니다.

실전 팁

💡 - 배경음악은 0.20.4, 효과음은 0.50.8 정도가 일반적인 균형입니다

• 볼륨 설정은 localStorage에 저장하여 게임 재시작 후에도 유지되게 하세요

---

5. 오디오 스프라이트

게임의 효과음이 점점 늘어나면서 김개발 씨는 고민에 빠졌습니다. 점프, 착지, 아이템 획득, 적 처치, 대미지...

효과음 파일이 벌써 20개가 넘었습니다. "파일이 너무 많아서 관리가 힘들어요." 박시니어 씨가 묘수를 알려주었습니다.

오디오 스프라이트는 여러 개의 짧은 효과음을 하나의 파일로 합쳐놓은 것입니다. 마치 이미지 스프라이트시트처럼, 하나의 오디오 파일에서 특정 구간만 재생하는 기술입니다.

네트워크 요청 수를 줄이고 로딩 시간을 단축시킬 수 있습니다.

다음 코드를 살펴봅시다.

function preload() {
    // 오디오 스프라이트 로드
    this.load.audioSprite('sfx', 'assets/sounds/sfx.json', [
        'assets/sounds/sfx.ogg',
        'assets/sounds/sfx.mp3'
    ]);
}

function create() {
    // 스프라이트에서 특정 효과음 재생
    this.sound.playAudioSprite('sfx', 'jump');
    this.sound.playAudioSprite('sfx', 'coin');
    this.sound.playAudioSprite('sfx', 'explosion', { volume: 0.8 });

    // 스프라이트 객체로 생성하여 제어
    this.sfx = this.sound.addAudioSprite('sfx');
    this.sfx.play('jump');
}

김개발 씨는 파일 목록을 보며 한숨을 쉬었습니다. jump.mp3, land.mp3, coin.mp3, hurt.mp3...

효과음 파일만 스무 개가 넘습니다. 하나하나 로드하려니 코드도 길어지고, 네트워크 요청도 많아집니다.

선배 박시니어 씨가 화면을 보더니 말했습니다. "이미지 스프라이트시트는 알죠?

오디오에도 비슷한 개념이 있어요." 그렇다면 오디오 스프라이트란 정확히 무엇일까요? 쉽게 비유하자면, 오디오 스프라이트는 마치 음악 앨범과 같습니다.

앨범 하나에 여러 곡이 들어있고, 우리는 원하는 트랙 번호로 특정 곡을 재생합니다. 오디오 스프라이트도 하나의 파일에 여러 효과음이 연속으로 들어있고, JSON 파일에 각 효과음의 시작 위치와 길이가 기록되어 있습니다.

개별 파일로 관리하면 어떤 문제가 있을까요? 파일이 20개면 브라우저는 서버에 20번 요청을 보내야 합니다.

각 요청마다 약간의 오버헤드가 있으므로, 작은 파일을 여러 번 요청하는 것보다 큰 파일을 한 번 요청하는 것이 효율적입니다. 또한 파일 관리도 번거롭습니다.

효과음을 추가하거나 수정할 때마다 여러 파일을 다뤄야 합니다. 오디오 스프라이트를 사용하면 이 모든 문제가 해결됩니다.

하나의 오디오 파일과 하나의 JSON 파일만 있으면 됩니다. JSON 파일에는 각 효과음의 이름, 시작 시간(밀리초), 지속 시간이 정의되어 있습니다.

JSON 파일은 이런 형식입니다. json { "spritemap": { "jump": { "start": 0, "end": 0.5 }, "coin": { "start": 0.5, "end": 1.0 }, "explosion": { "start": 1.0, "end": 2.5 } } } 위의 코드에서 playAudioSprite 메서드를 보세요.

첫 번째 인자는 스프라이트의 키 이름이고, 두 번째 인자는 재생하고 싶은 효과음의 이름입니다. Phaser는 JSON 파일을 참조하여 해당 구간만 재생합니다.

세 번째 인자로 볼륨 등의 옵션도 전달할 수 있습니다. 오디오 스프라이트를 만드는 방법은 여러 가지가 있습니다.

온라인 도구나 Audiosprite 같은 npm 패키지를 사용하면 여러 개의 개별 파일을 자동으로 하나의 스프라이트로 합쳐주고 JSON 파일도 생성해줍니다. 수동으로 오디오 편집 프로그램에서 합칠 수도 있지만, 자동화 도구를 사용하는 것이 훨씬 편리합니다.

실무에서는 효과음 종류별로 스프라이트를 나누기도 합니다. UI 효과음 스프라이트, 전투 효과음 스프라이트, 환경 효과음 스프라이트 등으로 분류하면 필요한 것만 로드할 수 있어 더 효율적입니다.

모든 효과음을 하나의 거대한 파일에 넣으면 오히려 로딩이 느려질 수 있습니다. 다시 김개발 씨의 이야기로 돌아가 봅시다.

20개의 효과음 파일을 3개의 스프라이트로 정리하니 코드도 깔끔해지고 로딩 속도도 빨라졌습니다. "이렇게 좋은 방법이 있었군요!" 김개발 씨가 감탄했습니다.

실전 팁

💡 - 온라인 도구 audiosprite-generator를 사용하면 쉽게 스프라이트를 생성할 수 있습니다

• 효과음 사이에 약간의 무음 구간(10-50ms)을 넣으면 재생 시 겹침 현상을 방지할 수 있습니다

---

6. 음소거 기능

드디어 김개발 씨의 게임이 거의 완성되어갑니다. 그런데 QA 팀에서 피드백이 왔습니다.

"지하철에서 게임하다가 갑자기 소리가 나서 민망했어요. 음소거 버튼이 필요해요." 당연히 있어야 할 기능이었습니다.

음소거 기능은 게임의 모든 소리를 한 번에 끄거나 켜는 기능입니다. 마치 TV 리모컨의 음소거 버튼처럼, 상황에 따라 빠르게 소리를 제어할 수 있어야 합니다.

Phaser에서는 this.sound.mute 속성 하나로 전체 음소거를 구현할 수 있습니다.

다음 코드를 살펴봅시다.

function create() {
    // 음소거 토글 버튼
    this.muteBtn = this.add.text(10, 10, 'Sound: ON', { fontSize: '20px' })
        .setInteractive()
        .on('pointerdown', () => {
            // 전체 음소거 토글
            this.sound.mute = !this.sound.mute;
            this.muteBtn.setText(this.sound.mute ? 'Sound: OFF' : 'Sound: ON');
        });

    // 키보드 단축키로 음소거
    this.input.keyboard.on('keydown-M', () => {
        this.sound.mute = !this.sound.mute;
    });

    // 페이지 포커스 잃었을 때 자동 음소거
    this.sound.pauseOnBlur = true;
}

김개발 씨는 지하철에서 자신의 게임을 테스트하다가 큰일을 겪었습니다. 조용한 차내에서 갑자기 "퐁!

띵!" 효과음이 울려 퍼진 것입니다. 주변 승객들의 따가운 시선을 받으며 황급히 볼륨을 끄려 했지만, 음소거 버튼이 없었습니다.

다음 날 출근한 김개발 씨에게 박시니어 씨가 말했습니다. "음소거 기능은 선택이 아니라 필수예요.

사용자 배려의 기본이죠." 그렇다면 음소거 기능이란 정확히 무엇일까요? 쉽게 비유하자면, 음소거는 마치 수도꼭지의 메인 밸브와 같습니다.

각 방의 수도꼭지를 일일이 잠그지 않아도, 메인 밸브 하나만 잠그면 집 전체의 물이 멈춥니다. 게임의 음소거도 마찬가지로, 버튼 하나로 모든 소리를 한 번에 제어합니다.

음소거 기능이 없으면 어떤 불편함이 있을까요? 회의 중에 잠깐 게임을 확인하려다가 소리가 나면 곤란합니다.

아기가 자는 시간에 조용히 게임하고 싶을 수도 있습니다. 유튜브 영상을 보면서 게임을 하고 싶은 사람도 있습니다.

다양한 상황에서 소리를 빠르게 끄고 켤 수 있어야 합니다. Phaser에서 음소거를 구현하는 방법은 놀랍도록 간단합니다.

this.sound.mute 속성을 true로 설정하면 모든 소리가 음소거됩니다. false로 설정하면 다시 소리가 납니다.

단 한 줄의 코드로 전체 음소거가 가능합니다. 위의 코드에서 음소거 버튼 구현을 살펴보겠습니다.

텍스트를 하나 만들어 클릭할 수 있게 setInteractive를 호출합니다. 클릭하면 this.sound.mute의 값을 반전시키고, 텍스트도 현재 상태에 맞게 업데이트합니다.

간단하지만 완전한 기능입니다. 키보드 단축키도 추가했습니다.

M 키를 누르면 음소거가 토글됩니다. 많은 게임에서 M 키를 음소거 단축키로 사용하므로, 플레이어에게 익숙한 경험을 제공합니다.

pauseOnBlur 옵션은 특히 중요합니다. 이 옵션을 true로 설정하면, 플레이어가 다른 탭으로 이동하거나 브라우저를 최소화했을 때 자동으로 소리가 멈춥니다.

게임을 잠깐 멈추고 다른 일을 하는데 배경음악이 계속 나오면 거슬리기 때문입니다. 다시 게임 탭으로 돌아오면 소리도 자동으로 다시 재생됩니다.

실무에서는 음소거 상태를 저장하는 것도 중요합니다. 플레이어가 음소거를 해놓고 게임을 껐다가 다시 켰을 때, 이전 설정이 유지되어야 합니다.

localStorage에 음소거 상태를 저장하고, 게임 시작 시 불러오는 로직을 추가하세요. 또한 시각적 피드백도 신경 써야 합니다.

음소거 상태일 때는 스피커 아이콘에 X 표시를 하거나, 색상을 바꾸는 등 명확하게 현재 상태를 보여주세요. 텍스트보다는 아이콘이 더 직관적입니다.

다시 김개발 씨의 이야기로 돌아가 봅시다. 음소거 버튼을 추가한 후, 김개발 씨는 다시 지하철에서 편하게 게임을 테스트할 수 있게 되었습니다.

"이제 민망한 일은 없을 거예요!" 김개발 씨가 웃었습니다. 사소해 보이지만 음소거 기능은 사용자 경험에서 매우 중요한 부분입니다.

실전 팁

💡 - 음소거 버튼은 게임 화면에서 쉽게 찾을 수 있는 위치에 배치하세요

• pauseOnBlur를 활성화하면 탭 전환 시 자동으로 소리가 멈춰 사용자 경험이 향상됩니다

---

이상으로 학습을 마칩니다. 위 내용을 직접 코드로 작성해보면서 익혀보세요!