Season 01 - 04 이벤트는 반응이야!

Season 01 - 04 이벤트는 반응이야! — 코딩스타랩 미션4

🎹 Season 01 - 04 이벤트는 반응이야!

“세이의 키보드 모험 — 세상은 반응으로 움직인다”

어느 날, 코딩스타랩 교실에 피아노 소리가 울렸다. 아니, 정확히 말하면 피아노 같은 “딱” “딱” 하는 소리였다.
그건 바로 ‘세이의 키보드 실험’이었다.

지난 미션에서 반복의 리듬을 배웠던 아이들은 여전히 들뜬 상태였다. 딕은 아직도 반짝이는 불빛을 보며 신나했고, 리온은 반복 속 규칙을 찾으며 만족스러운 미소를 지었다. 그런데 세이는 뭔가 심각한 얼굴이었다.

“리온, 딕. 오늘은 내가 실험을 해볼게.” 세이가 말했다.
“이번에는… 내가 누르면, 화면이 반응하게 하고 싶어.”

딕이 물었다.
“그게 뭐야? 지난번엔 우리가 화면을 움직였잖아.” 세이가 고개를 저었다.
“이번에는 반대로. 내가 ‘행동’을 하면, 코드가 ‘대답’을 하는 거지.”

리온은 눈을 반짝이며 말했다.
“아, 그게 이벤트야.”

🧭 1. 이벤트 — ‘무언가 일어나는 순간’

세이는 손가락을 키보드 위에 올리며 물었다.
“근데 이벤트가 뭐야?”

리온이 설명했다.
“이벤트는 어떤 일이 일어났을 때 코드를 실행하는 거야. 예를 들어 버튼 클릭, 키보드 입력, 마우스 움직임, 화면 로딩… 이런 순간들.”

딕은 고개를 갸웃했다.
“그럼 이벤트는 ‘계기’ 같은 거네?”

세이가 맞장구쳤다.
“응! 내가 행동하면, 그걸 보고 코드가 반응하는 거야.”

리온은 간단한 코드를 보여줬다.

딕이 버튼을 눌렀다. “Hello!” 라는 팝업이 떴다.

딕은 소리쳤다.
“우와! 내가 누르니까 바로 반응해!”

세이는 진지하게 말했다.
“그래. 세상은 ‘반응’으로 움직이니까.”

🎹 2. 세이의 키보드 실험

세이는 키보드를 세게 눌러보았다. “딱.” 키보드의 작은 소리가 조용한 교실에 울렸다.

“이걸… 화면에서도 보여줄 수 있을까?” 세이는 궁금했다.

리온이 키보드 이벤트 예시를 보여줬다.


document.addEventListener("keydown", function(event) {
  console.log("키 눌림: " + event.key);
});

세이가 키를 눌렀다.
“a” 콘솔에 ‘키 눌림: a’가 출력되었다.

세이의 표정이 밝아졌다.
“나의 행동이… 코드로 기록되는 거구나!”

딕이 말했다.
“완전 마술이다! 내가 누르면, 코드가 듣고 있어.”

리온이 덧붙였다.
“이벤트는 행동을 감지하고 반응하는 시스템이야. 그래서 인터랙티브한 모든 프로그램이 이벤트로 만들어져.”

✨ 3. 화면에 반응을 직접 보여주기

세이는 단순히 콘솔에 기록되는 것만으로는 만족하지 않았다.
“화면이 직접 반응해야 재밌지!”

그래서 이런 코드를 작성했다.


키를 눌러보세요!

딕이 “S” 키를 눌렀다. 화면에는 즉시 “입력된 키: s” 라고 나타났다.

딕: “세이야! 네 이름 첫 글자다!” 세이는 얼굴을 붉히며 말했다.
“…우연이야.”

하지만 세이는 속으로 생각했다. “이건 나만의 피아노야.”

🌈 4. addEventListener — 세련된 방식

리온은 중얼거렸다.
“onclick처럼 HTML에 직접 쓰는 방식도 있지만… 진짜 개발자들은 addEventListener를 더 많이 써.”

딕이 물었다.
“왜?”

리온이 설명했다.
“여러 이벤트를 동시에 붙일 수도 있고, 코드가 더 깔끔해져.”


const box = document.getElementById('box');

box.addEventListener("click", function() {
  box.style.background = "skyblue";
});

세이는 놀라며 말했다.
“우와! 상자를 누르면 색이 바뀌는 거네!”

딕은 상자를 다섯 번 눌렀다. 상자는 파랗게 변했다.

“이건… 미술과 코딩의 만남이야!” 세이가 흥분한 목소리로 말했다.

🧩 5. 이벤트는 마음과 비슷하다

잠시 쉬는 시간, 세이는 창밖을 바라보며 말했다.
“코드는 우리 마음이랑 비슷해.”

딕: “마음이랑?” 세이: “응. 누가 나를 부르면 반응하잖아. 누르면 웃고, 놀라면 깜짝하고…”

리온은 조용히 덧붙였다.
“그래. 이벤트는 ‘마음의 흔들림’ 같아. 행동이 먼저 일어나고… 그 다음에 반응하는 거지.”

세이는 고개를 끄덕였다.
“오늘의 코딩은… 마음을 읽는 연습이었어.”

🎯 오늘의 미션 정리

이벤트는 ‘어떤 일이 일어나는 순간’
onclick: 클릭 이벤트
onkeydown: 키보드 입력 이벤트
addEventListener: 가장 세련된 이벤트 방식
세상은 ‘반응’으로 움직인다 — 입력 → 반응의 연결

오늘 실험을 마치며 세이는 말했다.
“내가 누르는 모든 키는, 세상에 대한 작고 정확한 질문이야.”

리온은 미소 지었다.
“그렇다면 다음 미션은… 그 질문에 더 큰 반응을 만들어보는 거겠지?”

다음 미션 — Season 01 - 05 | 조건은 갈림길이야!

🌍 English Summary (≈500 words)

Season 01 - 04: “Events Are Reactions — Sei’s Keyboard Adventure”
In this mission, Sei discovers the core concept of events — moments when something happens and code reacts. Leon explains that clicking, typing, and moving the mouse are all “triggers” that can execute functions. Sei experiments with keyboard input, realizing that every key press becomes a reaction on the screen. The kids learn the difference between onclick, onkeydown, and the more advanced addEventListener. Through playful exploration, they understand that coding is not a one-way command but a two-way interaction — action and response. Sei finally understands that events are like emotions: someone touches you, and you respond. MAKE · PLAY · DREAM.

#코딩스타랩 #코딩교육 #리온세이딕 #초등코딩 #자바스크립트이벤트 #onclick #addEventListener #코딩놀이 #HelloUniverse #세이의키보드모험

Coding Star Lab

Season 01 - 04 이벤트는 반응이야!