Season 01 - 19 HUD! UI! 메뉴! 게임을 감싸는 화면들

🖥 Season 01 - 19 HUD! UI! 메뉴! 게임을 감싸는 화면들

“게임은 캐릭터만이 아니라, 캐릭터를 둘러싼 화면까지 함께 설계해야 완성이다.”

오늘은 세이가 먼저 말했다.
“리온, 우리 게임… 하고 있으면 재밌는데, 처음 들어가면 뭐가 뭔지 조금 헷갈려.”

딕: “맞아. 시작 버튼도 없고, 그냥 켜지면 바로 시작돼. 점수도 구석에 조그맣게 있고…”

리온은 고개를 끄덕이며 말했다.
“좋은 피드백이야. 오늘은 HUD·UI·메뉴, 즉 게임을 감싸는 화면들을 정리해보자.”

칠판에는 세 단어가 적혔다.
HUD / UI / MENU

🧭 1. HUD란 무엇인가? — 게임 위에 겹쳐진 정보

리온: “HUD는 Head-Up Display. 쉽게 말하면, 게임 화면 위에 겹쳐서 보여주는 정보야.”

점수(SCORE)
콤보(COMBO)
목숨/체력(♥)
일시정지 아이콘
스테이지 이름, 남은 시간

세이: “운전할 때 앞유리에 비치는 속도계 같은 느낌이네.”

딕: “그럼 우리 게임도 점수랑 콤보를 더 크게, 보기 좋게 올려야겠다!”

📊 2. HUD 기본 구조 만들기


<div id="hud">
  <div id="hud-score">SCORE: 0</div>
  <div id="hud-combo">COMBO: 0</div>
  <div id="hud-life">♥♥♥</div>
  <button id="btn-pause">II</button>
</div>


#hud {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 14px;
  color: #ffffff;
}

#hud-score, #hud-combo, #hud-life {
  padding: 6px 10px;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
}

#btn-pause {
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #ffffff;
  cursor: pointer;
}

세이: “이제 ‘어디를 봐야 하는지’가 한눈에 들어온다.”

딕: “점수 보면서 ‘이번엔 얼마까지 가나’ 보는 맛이 있지!”

🕹 3. 메인 메뉴 화면 — “게임이 시작되기 전의 첫인상”

리온: “게임을 켜면 바로 전투가 아니라, 대부분은 타이틀 화면이 먼저 나오지.”

게임 제목
START 버튼
OPTION/설정 버튼
HOW TO PLAY


<div id="screen-title">
  <h1>코딩스타랩 러너</h1>
  <button id="btn-start">START</button>
  <button id="btn-how">HOW TO PLAY</button>
</div>


#screen-title {
  position: fixed;
  inset: 0;
  background: linear-gradient(#071b33, #0f355f);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

세이: “이 화면만 잘 만들어도, ‘아 이 게임, 공 들였네’라는 느낌이 나.”

딕: “제목 화면에서 이미 설레기 시작하면 성공이지!”

⏸ 4. 일시정지(PAUSE)와 재개(RESUME)

딕: “근데… 엄마가 방 부르면 어떡해? 중간에 멈추고 싶을 때도 있잖아.”

리온: “그래서 필수 UI가 바로 일시정지야.”


let isPaused = false;

document.getElementById("btn-pause").addEventListener("click", () => {
  isPaused = !isPaused;
  togglePauseScreen(isPaused);
});

function gameLoop() {
  if (!isPaused) {
    update();
    render();
  }
  requestAnimationFrame(gameLoop);
}


<div id="screen-pause">
  <div class="panel">
    <p>PAUSED</p>
    <button id="btn-resume">RESUME</button>
  </div>
</div>

세이: “게임 안에서 쉬는 법도 알려주는 느낌이네.”

딕: “나를 위한 UI다… 고맙다 일시정지…”

🎚 5. 옵션(Options) — 플레이어를 존중하는 메뉴

리온: “OPTION 메뉴는 ‘이 게임을 자기 스타일로 맞추는 곳’이야.”

BGM 볼륨 / SFX 볼륨
난이도 선택 (EASY / NORMAL / HARD)
색약 모드, 진동 on/off (심화)


<label>
  BGM
  <input type="range" id="slider-bgm" min="0" max="100" value="50">
</label>
<label>
  SFX
  <input type="range" id="slider-sfx" min="0" max="100" value="70">
</label>

세이: “사람마다 듣기 좋은 소리 크기가 다르니까, 볼륨 조절은 진짜 기본 매너네.”

딕: “난 하드코어니까 난이도는 무조건 하드!”

세이: “우리는 NORMAL로 시작하자.”

🎯 오늘의 정리 — “게임을 싸고 있는 화면까지가 진짜 게임이다”

HUD는 게임 중 정보를 보여주는 투명한 계기판
타이틀 화면은 게임의 첫인상
일시정지와 옵션은 플레이어를 배려하는 기능
UI는 ‘쉽게 이해하고, 편하게 머물 수 있게’ 도와준다

세이: “이제 우리 게임, ‘겉모습’도 많이 갖춰졌네.”

딕: “맞아! 그냥 실험용 느낌이 아니라, 진짜 누가 해도 될 것 같은 완성도가 됐어!”

리온: “좋아. 이제 남은 건 Season 01 마지막 정리야. 다음 회차에서, 우리가 걸어온 길을 한 번에 정리해보자.”

🌍 English Summary (≈500 words)

Season 01 - 19: “HUD, UI, and Menus — The Screens That Wrap the Game”
In this episode, the trio steps outside the core action and focuses on the “frame” around the game: HUD, UI, and menus. Leon explains how HUD elements like score, combo, and life indicators help players understand what’s happening without breaking immersion. They design a title screen, pause menu, and options panel, realizing that good UI respects the player’s time, preferences, and comfort. By the end, their mini game no longer feels like a prototype; it has the structure and polish of a real, playable game. MAKE · PLAY · DREAM.

#코딩스타랩 #게임UI #HUD #메뉴디자인 #일시정지 #초등코딩 #중등코딩 #리온세이딕 #게임구조

Coding Star Lab

Season 01 - 19 HUD! UI! 메뉴! 게임을 감싸는 화면들