JavaScript란? 버튼을 누르면 왜 화면이 움직일까?

JavaScript가 웹페이지에 행동과 반응을 더하는 원리, 이벤트와 DOM의 역할을 이해하고 간단한 기능을 AI에게 요청할 수 있습니다.

UI & WEB · 완전 초보자를 위한 AI 웹서비스 만들기

HTML과 CSS까지 이해했다면 이제 웹페이지가 ‘보이는 것’은 어느 정도 설명할 수 있습니다. HTML이 글, 버튼, 입력창 같은 구조를 만들고 CSS가 색상과 크기, 배치를 정해주기 때문입니다.

그런데 실제 웹서비스는 화면만 예쁘다고 끝나지 않습니다. 버튼을 눌렀을 때 다른 화면이 열리고, 검색어를 입력하면 결과가 나타나고, 메뉴를 누르면 펼쳐지는 것처럼 사용자의 행동에 반응해야 합니다. 이때 가장 자주 만나는 언어가 JavaScript입니다.

MathGenix 같은 웹서비스를 만들 때도 마찬가지였습니다. 사용자가 문제 생성 버튼을 눌렀는데 아무 일도 일어나지 않는다면 서비스라고 부르기 어렵습니다. ‘사용자가 무엇을 했을 때 화면이 어떻게 반응할 것인가’를 연결하는 과정이 필요합니다.

오늘의 목표

JavaScript가 웹페이지에서 어떤 역할을 하는지 이해합니다.
HTML·CSS·JavaScript의 차이를 한 번에 구분합니다.
버튼 클릭 같은 ‘이벤트’가 무엇인지 이해합니다.
AI에게 간단한 JavaScript 기능을 요청할 수 있습니다.

01. HTML, CSS, JavaScript를 집으로 비유해봅시다

처음 웹을 배우면 세 가지 이름이 한꺼번에 나와서 헷갈립니다. 가장 쉽게 집을 만드는 과정으로 생각해보면 됩니다.

HTML = 방, 문, 창문처럼 집의 구조를 만드는 것
CSS = 벽지, 색상, 가구 배치처럼 집을 꾸미는 것
JavaScript = 스위치를 누르면 불이 켜지고, 버튼을 누르면 문이 열리게 만드는 것

즉 JavaScript는 웹페이지에 ‘행동’과 ‘반응’을 더해주는 역할을 합니다. MDN도 JavaScript를 웹페이지에 상호작용과 동적인 기능을 추가하는 프로그래밍 언어로 설명합니다.

02. 버튼을 눌렀는데 반응한다는 뜻

웹페이지에서는 사용자가 무언가를 합니다. 버튼을 클릭하고, 키보드를 누르고, 검색창에 글자를 입력하고, 마우스를 올립니다. 이런 일을 개발에서는 ‘이벤트(event)’라고 부릅니다.

예를 들어 ‘문제 생성’ 버튼을 눌렀다고 해봅시다. 브라우저는 ‘버튼이 클릭되었다’는 사건을 알게 되고, JavaScript는 그 사건이 발생했을 때 어떤 코드를 실행할지 정할 수 있습니다.

이것이 JavaScript를 이해하는 가장 쉬운 출발점입니다. 처음부터 변수나 함수 이름을 외우기보다 ‘사용자가 행동하면 어떤 반응을 일으키는 언어’라고 이해하면 됩니다.

03. 아주 작은 예제로 직접 확인하기

아래처럼 버튼 하나가 있다고 가정해보겠습니다.

<button id="helloBtn">눌러보세요</button>

HTML만 있으면 버튼은 화면에 보이지만, 눌러도 아무 반응이 없습니다. 여기에 JavaScript를 연결하면 버튼을 눌렀을 때 메시지를 띄울 수 있습니다.

const button = document.querySelector("#helloBtn");

button.addEventListener("click", function () {
  alert("버튼을 눌렀습니다!");
});

이 코드를 지금 당장 외울 필요는 없습니다. 중요한 것은 ‘버튼을 찾는다 → 클릭을 기다린다 → 클릭되면 메시지를 띄운다’라는 흐름을 읽을 수 있는 것입니다.

04. DOM이라는 말이 나오면 겁먹지 마세요

JavaScript를 검색하다 보면 곧 DOM이라는 말을 만나게 됩니다. DOM은 Document Object Model의 약자로, 브라우저가 HTML 문서를 프로그램이 다룰 수 있는 구조로 표현한 것입니다.

초보자 기준으로는 ‘JavaScript가 화면의 버튼, 글자, 이미지 등을 찾아서 바꾸거나 움직일 수 있게 해주는 연결 구조’ 정도로 이해해도 충분합니다.

위 예제의 document.querySelector()가 바로 HTML에서 특정 요소를 찾아오는 대표적인 방법입니다. JavaScript는 이런 DOM 기능을 이용해 글자를 바꾸거나, 새로운 내용을 추가하거나, 버튼을 숨기는 등의 일을 할 수 있습니다.

05. MathGenix에서는 JavaScript가 어디에 필요할까?

문제 생성 버튼 클릭 처리
사용자가 선택한 학년·단원 값을 읽기
로딩 중이라는 표시 보여주기
생성 결과가 도착하면 화면에 표시하기
메뉴를 열고 닫거나 탭을 전환하기
입력값이 비어 있을 때 사용자에게 알려주기

물론 실제 서비스에서는 JavaScript만으로 모든 기능을 처리하지 않습니다. 서버와 API, 데이터베이스가 함께 동작합니다. 하지만 사용자가 보는 화면과 뒤쪽 기능을 이어주는 중요한 연결점 중 하나가 JavaScript입니다.

06. AI 시대에는 JavaScript를 어떻게 배워야 할까?

이 시리즈의 목표는 JavaScript 문법책을 처음부터 끝까지 외우는 것이 아닙니다. AI가 코드를 작성해줄 수 있는 시대에는 ‘내가 원하는 동작을 정확하게 설명하고, AI가 만든 코드가 어떤 역할을 하는지 대략 읽을 수 있는 능력’이 매우 중요합니다.

예를 들어 ChatGPT나 Codex에 이렇게 요청할 수 있습니다.

HTML에 ‘문제 생성’ 버튼이 있습니다. 버튼을 누르면 ‘문제를 생성하고 있습니다’라는 문구가 나타나고, 2초 뒤 ‘완료되었습니다’로 바뀌게 해주세요. JavaScript를 처음 보는 사람도 이해할 수 있도록 코드마다 설명을 붙여주세요.

이렇게 요청하면 단순히 ‘JavaScript 코드를 짜줘’라고 하는 것보다 내가 원하는 결과가 훨씬 분명해집니다.

07. 초보자가 가장 많이 헷갈리는 것

Java와 JavaScript는 같은 건가요?

아닙니다. 이름이 비슷하지만 서로 다른 프로그래밍 언어입니다. 웹페이지의 상호작용을 배우는 지금 단계에서는 JavaScript에만 집중하면 됩니다.

JavaScript를 알아야만 AI 코딩을 할 수 있나요?

처음부터 능숙할 필요는 없습니다. 다만 HTML, CSS, JavaScript가 각각 어떤 역할을 하는지 알면 AI가 만들어준 코드를 이해하고 수정 요청하기가 훨씬 쉬워집니다.

버튼을 눌렀는데 아무 반응이 없으면 어디를 봐야 하나요?

HTML에서 버튼을 제대로 만들었는지, JavaScript가 실제 페이지에 연결되어 있는지, 코드에 오류가 없는지를 차례대로 확인해야 합니다. 브라우저 개발자 도구의 Console에서 오류 메시지를 확인하는 것도 중요한 방법입니다.

08. AI에게 오류를 물어볼 때 이렇게 하세요

‘버튼이 안 돼요’라고만 하면 AI도 원인을 찾기 어렵습니다. 다음 정보를 함께 주는 습관을 들이면 좋습니다.

원래 기대한 동작: 버튼을 누르면 무엇이 되어야 하는지
현재 상황: 눌러도 아무 일도 없는지, 다른 메시지가 나오는지
관련 HTML과 JavaScript 코드
브라우저 Console에 표시된 오류 메시지
가능하면 화면 캡처

09. 이번 글에서 꼭 기억할 것

HTML은 웹페이지의 구조를 만듭니다.
CSS는 그 구조의 보이는 모습을 꾸밉니다.
JavaScript는 클릭·입력 같은 행동에 반응하도록 만듭니다.
이벤트는 사용자가 클릭하거나 입력하는 것처럼 브라우저에서 발생하는 사건입니다.
AI에게 코드를 요청할 때는 ‘어떤 행동을 하면 어떤 결과가 나와야 하는지’를 구체적으로 설명합니다.

ONE LINE TAKEAWAY

JavaScript는 정적인 웹페이지를 ‘사용자의 행동에 반응하는 서비스’로 바꾸는 언어입니다.

NEXT IN SERIES

STEP 011 — UI란? 사용자가 실제로 보고 누르는 화면은 어떻게 설계할까?

참고 자료

MDN Web Docs — JavaScript가 뭔가요?
MDN Web Docs — JavaScript 기본 / 상호작용 추가
MDN Web Docs — Introduction to events
MDN Web Docs — Document Object Model (DOM)