Season 01 - 18 표정! 눈! 입! 캐릭터 얼굴 만들기

🙂 Season 01 - 18 표정! 눈! 입! 캐릭터 얼굴 만들기

“이제는 박스가 아니다. 눈과 입이 생기는 순간, 주인공이 된다.”

코딩스타랩 교실. 오늘은 딕이 정말 진지한 얼굴로 말했다.
“리온, 우리 파란 박스… 이제 얼굴 만들어주자. 이 정도면 이름도 있어야 하는 거 아니야?”

세이: “맞아. 점프도 하고, 콤보도 쌓고, 소리도 내고, 감정도 표현하는데… 얼굴만 없네. 뭔가… 미안해진다.”

리온은 웃으며 칠판에 크게 썼다.
eyes, mouth, face, expression

“좋아. 오늘은 이 친구에게 진짜 얼굴을 달아주는 날이야.”

👀 1. 눈은 ‘방향’과 ‘상태’를 동시에 보여준다

리온: “눈은 캐릭터가 어디를 보는지, 어떤 상태인지 동시에 알려줘.”

동그랗게 뜬 눈 → 놀람, 긴장
살짝 내려간 눈 → 피곤, 멍…
웃는 눈모양 → 기쁨, 만족
한쪽 눈만 크게 → 당황, 실수

세이: “게임하면서 캐릭터 눈만 봐도 ‘지금 위험한 상황인지’ 알 수 있을 것 같아.”

리온: “그래서 눈은 단순 그래픽이 아니라 정보야.”

딕: “일단 왕크고 동그란 눈으로 가자!!”

🧱 2. HTML + CSS로 얼굴 틀 만들기

리온은 기본 구조부터 만들었다.


<div id="player">
  <div class="face">
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="mouth"></div>
  </div>
</div>


#player {
  width: 80px;
  height: 80px;
  background: #4EA5FF;
  border-radius: 12px;
  position: absolute;
}

.face {
  position: relative;
  width: 100%;
  height: 100%;
}

.eye {
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 22px;
}

.eye.left { left: 18px; }
.eye.right { right: 18px; }

.mouth {
  width: 32px;
  height: 18px;
  border-radius: 0 0 18px 18px;
  border-bottom: 4px solid #ffffff;
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
}

딕: “우와! 이거 완전 귀여운 얼굴이네!!”

세이: “입이 웃고 있어서… 보는 사람도 같이 웃게 된다.”

😆 3. 상태별 표정 정의하기 — 기쁨·놀람·위험·피곤

리온은 “표정 상태(state)”를 코드로 정리했다.


const FACE = {
  NORMAL: "normal",
  HAPPY: "happy",
  SCARED: "scared",
  HIT: "hit",
  TIRED: "tired"
};

let faceState = FACE.NORMAL;

function setFace(state) {
  faceState = state;
  updateFace();
}

그리고 CSS 클래스를 이용해 표정 변화를 줬다.


#player.happy .mouth {
  border-bottom-width: 5px;
  width: 36px;
}

#player.scared .eye {
  height: 18px;
}

#player.hit .mouth {
  border-bottom: none;
  border-top: 4px solid #ffffff;
}

#player.tired .eye {
  height: 6px;
}


function updateFace() {
  const p = document.getElementById("player");
  p.classList.remove("happy","scared","hit","tired");

  if (faceState === FACE.HAPPY) p.classList.add("happy");
  if (faceState === FACE.SCARED) p.classList.add("scared");
  if (faceState === FACE.HIT) p.classList.add("hit");
  if (faceState === FACE.TIRED) p.classList.add("tired");
}

딕: “와… 똑같은 박스인데, 표정만 바꿔도 완전 다른 애 같아!”

세이: “이제 진짜로 이 캐릭터랑 함께 게임하는 느낌이네.”

⚡ 4. 게임 상황과 표정 연결하기

리온: “표정을 진짜로 살리려면, 상황마다 자동으로 바뀌게 해야 해.”

점프 시작 → HAPPY
장애물 가까움 → SCARED
충돌 → HIT
오래 플레이 → TIRED


function onJump() {
  setFace(FACE.HAPPY);
}

function onNearObstacle() {
  setFace(FACE.SCARED);
}

function onHit() {
  setFace(FACE.HIT);
}

let playTime = 0;
function updatePlayTime(dt) {
  playTime += dt;
  if (playTime > 60000 && faceState === FACE.NORMAL) {
    setFace(FACE.TIRED);
  }
}

세이: “같은 게임인데… 캐릭터 표정만으로도 감정이 따라간다.”

딕: “맞아. 내가 잘하고 있을 때는 기뻐하고, 위험하면 같이 겁먹고!”

🎯 오늘의 정리 — “얼굴이 생기는 순간, 이야기가 시작된다”

눈과 입은 정보이자 감정이다
표정 상태를 코드로 관리하면 확장하기 쉽다
게임 상황(점프, 위험, 실패)에 따라 표정을 자동으로 바꾼다
캐릭터는 이제 도형이 아니라 ‘함께 모험하는 친구’가 된다

딕: “이제 진짜 이 친구 이름도 지어줘야 할 것 같아.”

세이: “그래. 우리만 부르는 코드명이 아니라, 게임 안에서 모두가 부르는 이름.”

리온: “좋아. 그건 Season 01의 마지막에서 정하자. 오늘은 여기까지—— 얼굴을 가진 첫 주인공 탄생.”

🌍 English Summary (≈500 words)

Season 01 - 18: “Face, Eyes, Mouth — Giving the Character a Real Expression”
In this episode, the trio finally gives their blue box character a real face. Leon explains that emotion in games begins with context and behavior, and facial features are the final layer of expression. They build a simple HTML/CSS face with two eyes and a mouth, then design multiple expression states like HAPPY, SCARED, HIT, and TIRED. By connecting these states to in-game events—jumping, near-miss situations, collisions, and long play time—the character starts to feel alive and reactive. The players no longer see a plain box, but a companion that shares their tension, joy, and frustration. MAKE · PLAY · DREAM.

#코딩스타랩 #캐릭터표정 #눈과입 #게임감정 #초등코딩 #중등코딩 #리온세이딕 #캐릭터디자인 #표정애니메이션

Coding Star Lab

Season 01 - 18 표정! 눈! 입! 캐릭터 얼굴 만들기