🪵 7. 효율적인 사운드 관리를 위한 싱글톤 패턴 적용기: 게임 사운드 시스템 최적화

게임 개발 중 사운드 관리 시스템을 구현하면서 마주친 도전 과제들과 이를 해결하기 위한 접근 방법을 공유하고자 합니다.

1. 직면한 문제들

1.1. 브라우저의 자동 재생 정책

브라우저들은 사용자 경험 보호를 위해 엄격한 자동 재생 정책을 적용합니다. 특히, 사용자가 명시적으로 상호작용하지 않으면 오디오 재생이 차단됩니다. 이는 게임 진입 시 필요한 사운드의 자동 재생이 불가능한 문제가 발생했습니다.

1.2. 중복 인스턴스 생성

여러 컴포넌트에서 독립적으로 Audio 객체를 관리하면 중복된 인스턴스 생성으로 인해 메모리 낭비가 발생합니다. 이 문제는 성능 저하로 이어집니다.

// ❌ 잘못된 구현 예시: 각 컴포넌트가 동일한 사운드를 개별 관리
const Component = () => {
  const audio = new Audio(soundFile); // 컴포넌트마다 새로운 Audio 객체 생성

  const playSound = () => {
    audio.play().catch(console.error);
  };
};

1.3. 코드 재사용성과 유지보수성 문제

개별적으로 Audio 객체를 생성하고 관리하는 코드는 중복이 많아지고, 확장성이 부족합니다. 예컨대 새로운 사운드를 추가할 때마다 각 컴포넌트에서 수정이 필요합니다.

2. 해결 방안: 싱글톤 패턴 적용

2.1. SoundManager 클래스 설계

SoundManager는 싱글톤 패턴을 사용해 모든 컴포넌트에서 동일한 인스턴스를 공유합니다.

// ✅ SoundManager 클래스: 싱글톤 패턴 기반
export class SoundManager {
  private static instance: SoundManager;
  private audioMap: Map<string, HTMLAudioElement> = new Map();

  private constructor() {}  // 외부에서 인스턴스 생성 방지

  static getInstance(): SoundManager {
    if (!SoundManager.instance) {
      SoundManager.instance = new SoundManager();
    }
    return SoundManager.instance;
  }
}

이를 통해 사운드 관리를 중앙화해 중복 객체 생성을 방지합니다.

2.2. 효율적인 사운드 프리로딩

사운드를 미리 로드하여 재생 시 지연을 줄입니다.

// ✅ 사운드 프리로딩 메소드
preloadSound(id: string, src: string): void {
  if (!this.audioMap.has(id)) {
    const audio = new Audio(src);
    audio.load();  // 사운드 파일 미리 로드, 재생 지연 최소화
    this.audioMap.set(id, audio);
  }
}

어차피 자동 재생이 되지 않으니 미리 사운드가 나오는 컴포넌트가 마운트 시 미리 넣어놓을 수 있는 기능을 활용해 미리 사운드를 불러옵니다.

2.3. 자동 재생 정책 명시 및 에러 처리

사용자가 명시적으로 상호작용하기 전에는 사운드 자동 재생이 차단됩니다. 이를 명시하기 위해 오류를 식별하고 사용자에게 명확히 알립니다.

// ✅ 자동 재생 정책 우회 및 에러 처리
async playSound(id: string, volume = 1): Promise<void> {
  const audio = this.audioMap.get(id);
  if (!audio) {
    console.warn(`사운드 ID(${id})를 찾을 수 없습니다.`);
    return;
  }

  try {
    audio.volume = volume;
    await audio.play();  // 사용자 상호작용 없을 경우 실패 가능
    audio.currentTime = 0;  // 재생 완료 후 처음으로 되감기
  } catch (error) {
    if (error instanceof Error) {
      if (error.name === 'NotAllowedError') {
        console.info('브라우저 정책에 의해 사운드 자동 재생이 차단되었습니다.');
      } else {
        console.error(`사운드 재생 오류: ${error.message}`);
      }
    }
  }
}

3. 구현의 장점

3.1. 메모리 효율성

• 싱글톤 패턴으로 Audio 객체 재사용
• 사운드 리소스의 중복 로딩 방지

3.2. 실행 시간 최적화

• 사운드 프리로딩으로 재생 지연 최소화
• 효율적인 메모리 캐싱

3.3. 에러 처리 강화

• 브라우저 자동 재생 정책 대응
• 사운드 재생 실패에 대한 응답을 사용자 or 개발자에게 알림 - 우아한 처리

4. 실제 사용 예시

4.1. 사운드 ID와 리소스 매핑

사운드를 관리하기 위한 ID와 경로를 상수로 정의합니다. 어떤 ID가 오는지에 대한 명시를 하고, 관리 일관성을 유지합니다.

// 사운드 ID 정의
export const SOUND_IDS = {
  ENTRY: 'entry',
  BUTTON_CLICK: 'button_click',
} as const;

export const SOUND_PATHS = {
  [SOUND_IDS.ENTRY]: '/sounds/entry-sound.mp3',
  [SOUND_IDS.BUTTON_CLICK]: '/sounds/button-click.mp3',
};

4.2. 컴포넌트에서의 프리로딩

컴포넌트가 로드될 때, 필요한 사운드를 미리 로드합니다.

import { SoundManager } from './SoundManager';
import { SOUND_IDS, SOUND_PATHS } from './constants';

const GameEntryComponent = () => {
  useEffect(() => {
    const soundManager = SoundManager.getInstance();
    soundManager.preloadSound(SOUND_IDS.ENTRY, SOUND_PATHS[SOUND_IDS.ENTRY]);
  }, []);

  const handlePlayerJoin = () => {
    const soundManager = SoundManager.getInstance();
    void soundManager.playSound(SOUND_IDS.ENTRY, 0.8); // 볼륨 조정 포함
  };

  return <button onClick={handlePlayerJoin}>Join Game</button>;
};

4.3. 동적 사운드 로딩

동적으로 새로운 사운드를 추가하고 재생할 수 있는 유연성을 제공합니다.

const handleDynamicSound = (id: string, path: string) => {
  const soundManager = SoundManager.getInstance();
  soundManager.preloadSound(id, path);
  void soundManager.playSound(id, 1.0);
};

<button
  onClick={() =>
    handleDynamicSound('dynamic_alert', '/sounds/dynamic-alert.mp3')
  }
>
  Play Alert
</button>;

---

이러한 구현을 통해 효율적이고 안정적인 사운드 시스템을 구축할 수 있었습니다. 싱글톤 패턴의 적용으로 리소스 관리가 용이해졌고, 브라우저의 제약사항도 적절히 처리할 수 있게 되었습니다.