Season 01 - 12 사운드! 효과음! 게임의 귀가 열리는 순간!

🔊 Season 01 - 12 사운드! 효과음! 게임의 귀가 열리는 순간!

“눈으로만 보던 게임이, 드디어 귀로도 들리기 시작했다!”

코딩스타랩 교실. 오늘 아침, 딕은 교실 문을 발로 “쿵!” 하고 밀어 열었다.
“오늘은 소리다!!! 폭발음! 점프음! 버튼음! 다 넣자!!!”

세이는 귀를 막으며 말했다.
“너 목소리만으로도 이미 효과음이야…”

리온은 노트북을 가볍게 닫았다가 다시 열며 말했다.
“좋아. 오늘은 게임의 ‘귀’를 여는 날이야.”

칠판 위에 단어 세 개가 적혔다.
Sound, Effect, BGM

딕: “좋다… 이거다… 이 맛이지…”

세이: “이제 게임이… 시끄러워지는 건가?”

리온: “시끄러운 게 아니라, 살아나는 거지.”

🎧 1. 화면은 ‘눈’, 사운드는 ‘귀’

리온은 조용히 설명을 시작했다.
“지금까지 우리는 화면, 움직임, 점프, 중력, 애니메이션을 만들었어. 눈으로 보는 건 충분히 준비됐지.”

세이: “맞아. 이제 게임 화면만 보면… 어느 정도 이야기까지 느껴져.”

리온: “근데 똑같은 장면도, 소리가 들어가면 감정이 확 달라져.”

딕: “예를 들어?!”

리온: “점프할 때 아무 소리도 안 나면 그냥 ‘퐁’ 하고 올라갔다 내려오는 느낌인데, ‘뿅!’ 이런 효과음이 들어가면, 가볍고 즐거운 느낌이 나지.”

세이: “충돌할 때 ‘텅…’이냐 ‘쾅!’이냐에 따라, 위기감도 달라지고.”

리온: “그래서 오늘은 ‘효과음’이 게임의 감정을 어떻게 바꾸는지 직접 만들어볼 거야.”

🎵 2. 가장 기본적인 한 줄 — audio.play()

리온은 브라우저에서 쓸 수 있는 가장 단순한 코드부터 보여줬다.


const jumpSound = new Audio("jump.mp3");

document.addEventListener("keydown", (e) => {
  if (e.key === " ") {
    jumpSound.play();
  }
});

딕은 벌써 상상 속에서 소리를 듣고 있었다.
“점프할 때 ‘뿅!’… 충돌할 때 ‘꽝!’… 버튼 누를 때 ‘딸깍!’…”

세이: “근데 저 파일은 실제로 있어야겠지?”

리온: “물론. jump.mp3 같은 파일을 미리 준비해둬야 해. 우리가 지금 배우는 건 ‘언제, 어떤 타이밍에, 어떤 소리를 재생할지’라는 로직이야.”

딕: “그럼 나중에 진짜 파일 이름만 바꾸면 되는 거네?!”

리온: “맞아. 오늘은 게임 속 ‘사운드 자릿수’를 미리 만들어두는 거야.”

💥 3. 충돌에 ‘쿵!’, 점프에 ‘뿅!’을 붙이는 순간

“이제 진짜로 붙여보자.” 리온은 어제 쓰던 충돌 코드를 꺼내왔다.


const hitSound = new Audio("hit.mp3");
const jumpSound = new Audio("jump.mp3");

let y = 300;
let yVelocity = 0;
let gravity = 1;

document.addEventListener("keydown", (e) => {
  if (e.key === " ") {
    if (y === 300) {
      yVelocity = -15;
      jumpSound.currentTime = 0;
      jumpSound.play();
    }
  }
});

function update() {
  yVelocity += gravity;
  y += yVelocity;

  if (y > 300) {
    y = 300;
    yVelocity = 0;
    hitSound.currentTime = 0;
    hitSound.play();
  }

  box.style.top = y + "px";
  requestAnimationFrame(update);
}

update();

딕: “오오오!!! 점프할 때 ‘뿅!’ 떨어질 때 ‘쿵!’ 이런 거지?!”

세이: “생각만 해도 귀엽다… 소리만으로도 상황이 느껴져.”

리온: “여기서 중요한 건, play() 하기 전에 currentTime = 0;을 넣어서 연속해서 같은 소리가 잘 들리게 만드는 거야. 안 그러면, 이미 재생 중일 때는 소리가 안 날 수도 있어.”

딕: “와… 그거 진짜 중요하겠다. 난 버튼을 연타할 거니까!!!”

🎚 4. 효과음(SFX) vs 배경음악(BGM)

세이: “효과음 말고… 뒤에서 계속 깔리는 음악도 있잖아?”

리온: “좋은 질문이야. 게임 사운드는 크게 두 가지로 나눌 수 있어.”

효과음(SFX) — 점프, 충돌, 버튼, 아이템, 메뉴 이동 등
배경음악(BGM) — 스테이지 분위기, 감정 흐름

딕: “난 효과음 좋아! ‘뿅! 쾅! 팡! 찌지직!’”

세이: “난 BGM. 조용한 피아노면 잔잔하고, 드럼이 강하면 긴장되고… 게임의 ‘기분’을 바꾸잖아.”

리온: “그래서 보통 BGM은 한 번 재생하면 계속 반복(loop)하고, 효과음은 짧게 여러 번 재생되도록 만든다.”


const bgm = new Audio("bgm.mp3");
bgm.loop = true;
bgm.volume = 0.5;
bgm.play();

딕: “볼륨 0.5면… 반만 시끄러운 거지?”

세이: “넌 0.1로 해도 시끄러워.”

🔁 5. 너무 많이 울리지 않게 — 쿨타임과 필터

딕은 신났다. 키보드를 연타하면서 효과음을 폭발시키기 시작했다.
“뿅뿅뿅뿅뿅쾅쾅쾅쾅쾅!!! 으하하하하!!! 이게 인생이지!!!”

세이는 얼굴을 찡그렸다.
“귀가… 죽어간다…”

리온은 급히 코드에 ‘쿨타임’을 추가했다.


let lastHitTime = 0;
const HIT_COOLDOWN = 200; // ms

function playHitSound() {
  const now = Date.now();
  if (now - lastHitTime < HIT_COOLDOWN) return;
  lastHitTime = now;

  hitSound.currentTime = 0;
  hitSound.play();
}

“이렇게 하면, 충돌이 0.001초마다 일어나도 소리는 어느 정도 간격을 두고만 나게 할 수 있어.”

세이: “오… 훨씬 덜 시끄럽겠다.”

딕: “하지만… 난 여전히 시끄러운 걸 좋아해…”

리온: “괜찮아. 플레이어 귀도 소중해. 개발자는 재미와 피로 사이에서 균형을 잡아야 해.”

🎛 6. 뮤트 버튼과 볼륨 조절

세이: “가끔은 조용히 하고 싶을 수도 있잖아.”

리온: “그래서 옵션 메뉴에는 보통 ‘음악 끄기’, ‘효과음 끄기’ 같은 버튼이 있어.”


let sfxMuted = false;

function playSfx(sound) {
  if (sfxMuted) return;
  sound.currentTime = 0;
  sound.play();
}

muteButton.addEventListener("click", () => {
  sfxMuted = !sfxMuted;
});

딕: “그럼 나는 옵션에서 절대 뮤트 안 함!”

세이: “나는 가끔… 조용히 화면만 보고 싶을 때도 있을 것 같아.”

리온: “둘 다 중요해. 어떤 플레이어는 ‘귀’로 게임을 즐기고, 어떤 플레이어는 ‘눈’으로만 즐기기도 하거든.”

🎯 오늘의 정리 — 게임에 귀를 다는 법

효과음(SFX)은 행동과 사건에 붙는다 (점프, 충돌, 버튼 등)
BGM은 분위기와 감정을 만든다 (긴장, 평화, 열정 등)
Audio 객체와 play(), currentTime을 이해하기
연타 시에도 잘 들리게, 혹은 너무 시끄럽지 않게 쿨타임 조절
뮤트, 볼륨 조절은 플레이어를 위한 배려

수업이 끝날 무렵, 교실은 여전히 소리로 가득했다. 딕은 점프 소리와 충돌 소리를 번갈아 재생하며 춤을 췄다.
“뿅! 쿵! 뿅! 쿵! 쿵! 쾅!!! 이게 진짜 게임이지!!!!”

세이는 조용히 창밖을 보며 말했다.
“근데… 이상하다. 같은 화면인데, 소리가 있으니까 정말 ‘게임 속 세상’에 들어간 것 같아.”

리온은 미소를 지으며 노트북을 덮었다.
“그래. 오늘 우리는, 게임에 ‘귀’를 달아줬어.”

칠판에는 다음 문장이 적혔다.
“Season 01 - 13 점수! 콤보! 보상! — 게임이 계속되고 싶어지는 이유”

딕: “좋아!! 이제 점수다!!! 콤보 올리고 하이스코어 찍고!!!”

세이: “게임은 결국, 마음을 계속 움직이게 만드는 구조구나…”

리온: “그래. 다음 시간에는 ‘계속하고 싶어지는 이유’를 코드로 만들어보자.”

🌍 English Summary (≈500 words)

Season 01 - 12: “Sound, Effects, and Opening the Game’s Ears”
In this episode, the trio discovers how sound transforms a simple visual prototype into something that feels like a real game. Leon introduces JavaScript’s Audio object, showing how to attach jump sounds, collision effects, and background music to different game events. Dick goes wild, spamming keys and triggering endless sound bursts, while Leon adds cooldown logic and mute options to protect the player’s ears. Sei realizes that sound not only informs the player about what happens, but also changes the entire emotion of a scene — tension, comfort, excitement, or silliness. They distinguish between SFX (short, event-based sounds) and BGM (long, looping music that sets the mood), and learn how timing, repetition, and volume control are all part of thoughtful game design. By the end, their project no longer feels like silent code and moving shapes, but a living world that can be both seen and heard. MAKE · PLAY · DREAM.

#코딩스타랩 #사운드 #효과음 #BGM #게임오디오 #초등코딩 #중등코딩 #리온세이딕 #AudioAPI #게임디자인

Coding Star Lab

Season 01 - 12 사운드! 효과음! 게임의 귀가 열리는 순간!