HTML, CSS, JavaScript는 각각 무슨 일을 하나요?

AI에게 “신청 페이지를 만들어줘”라고 부탁했더니 프로젝트 안에 파일이 여러 개 생깁니다.

index.html
style.css
script.js

이름만 봐서는 무엇을 어디에서 고쳐야 할지 알기 어려워요. 문구를 바꾸려면 어느 파일을 봐야 하는지, 버튼 색을 바꾸려면 어디를 고쳐야 하는지, 버튼을 눌러도 반응하지 않을 때는 무엇을 확인해야 하는지 막막합니다.

코드를 직접 외울 필요는 없어요. 다만 HTML, CSS, JavaScript가 각각 어떤 일을 맡는지 알면 AI에게 훨씬 정확하게 요청하고, AI가 고친 결과도 제대로 확인할 수 있습니다.

한 화면에도 세 종류의 일이 있어요

웹페이지에 참가 신청 버튼 하나가 있다고 생각해볼게요.

[ 참가 신청하기 ]

버튼 하나를 만드는 데도 서로 다른 세 가지 결정이 필요합니다.

1. 화면에 버튼이 있어야 합니다.
2. 버튼의 색과 크기를 정해야 합니다.
3. 버튼을 눌렀을 때 신청 창이 열려야 합니다.

이 일을 나눠 맡는 것이 HTML, CSS, JavaScript예요.

HTML       무엇이 있는가
CSS        어떻게 보이는가
JavaScript 무엇을 하는가

웹 프로젝트가 커져도 이 구분은 크게 달라지지 않습니다. 파일 이름과 만드는 도구가 달라질 뿐, 화면에는 여전히 내용과 모양과 동작이 필요해요.

HTML은 화면에 무엇이 있는지 정해요

HTML은 웹페이지의 내용과 구조를 적습니다.

제목, 설명, 이미지, 입력칸, 버튼처럼 화면에 어떤 요소가 있는지 HTML에서 정해요.

<h1>바이브코딩 워크숍</h1>
<p>AI와 함께 내 프로젝트를 시작해보세요.</p>
<button>참가 신청하기</button>

브라우저는 이 내용을 읽고 제목과 문장과 버튼을 화면에 놓습니다. 아직 예쁘게 꾸미지 않아도 무엇이 제목이고, 무엇이 설명이며, 무엇이 버튼인지는 알 수 있어요.

그래서 다음과 같은 요청은 주로 HTML과 관련됩니다.

• 제목을 “7월 바이브코딩 워크숍”으로 바꿔줘.
• 신청 폼에 연락처 입력칸을 추가해줘.
• 소개 문구 아래에 강사 사진을 넣어줘.
• 신청 버튼을 페이지 맨 아래에도 하나 더 만들어줘.

HTML은 단순히 글자를 나열하는 파일이 아니에요. 제목, 본문, 목록, 버튼처럼 각 내용이 어떤 역할인지도 함께 표시합니다. 이 구조가 잘 잡혀 있으면 브라우저뿐 아니라 검색엔진과 화면 읽기 도구도 페이지를 이해하기 쉬워져요.

CSS는 화면이 어떻게 보이는지 정해요

HTML만으로도 버튼은 화면에 나타납니다. 하지만 브라우저가 정한 기본 모양이라 밋밋해 보여요.

CSS는 HTML로 만든 요소의 색, 크기, 간격과 배치를 정합니다.

button {
  background: #2563eb;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
}

이 코드는 버튼 배경을 파란색으로 만들고, 글자를 흰색으로 바꾸고, 안쪽 여백과 둥근 모서리를 줍니다.

다음과 같은 요청은 주로 CSS와 관련돼요.

• 버튼을 파란색 대신 검은색으로 바꿔줘.
• 제목과 설명 사이의 간격을 조금 줄여줘.
• 모바일에서는 카드가 한 줄에 하나씩 보이게 해줘.
• 신청 버튼이 스크롤해도 화면 아래에 계속 보이게 해줘.

CSS를 고쳐도 버튼에 적힌 문구나 버튼을 눌렀을 때 실행되는 기능은 보통 달라지지 않습니다. 같은 내용과 기능을 유지하면서 겉모습만 바꿀 수 있어요.

그래서 AI가 디자인을 고치다가 기능까지 망가뜨리지 않게 하려면 이렇게 부탁할 수 있습니다.

버튼의 동작과 문구는 그대로 두고, CSS만 수정해서
모바일에서 화면 너비에 맞게 보여줘.

어떤 기술을 써야 하는지 몰라도 괜찮아요. “동작은 그대로 두고 모양만 바꿔줘”라고 구분해서 말할 수 있는 것만으로도 요청이 훨씬 정확해집니다.

JavaScript는 클릭한 뒤 무슨 일이 일어날지 정해요

HTML로 버튼을 만들고 CSS로 예쁘게 꾸며도, 누른 뒤 일어날 일을 연결하지 않았다면 아무 반응이 없을 수 있어요.

JavaScript는 웹페이지의 동작과 변화를 담당합니다.

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

button.addEventListener("click", () => {
  alert("신청이 시작됐어요!");
});

이 코드는 버튼이 클릭되는 것을 기다렸다가 안내창을 띄웁니다. 코드를 외우기보다 “JavaScript가 클릭을 알아채고 다음 행동을 실행한다”는 흐름만 이해하면 충분해요.

다음과 같은 요청은 주로 JavaScript와 관련됩니다.

• 버튼을 누르면 신청 창이 열리게 해줘.
• 필수 입력값이 비어 있으면 안내 문구를 보여줘.
• 메뉴 버튼을 누르면 모바일 메뉴가 펼쳐지게 해줘.
• 선택한 날짜에 따라 가능한 시간을 바꿔서 보여줘.

JavaScript는 화면에 있던 내용을 바꾸거나, 사용자의 입력을 확인하거나, 서버에 정보를 보내는 일도 할 수 있습니다. 다만 신청 정보를 새로고침한 뒤에도 보관하려면 JavaScript만으로는 부족할 수 있어요. 계속 남아야 하는 정보는 보통 애플리케이션 서버와 데이터베이스까지 연결해야 합니다.

세 가지가 함께 버튼 하나를 완성해요

참가 신청 버튼을 다시 보면 역할을 이렇게 나눌 수 있습니다.

HTML
“참가 신청하기”라는 버튼을 화면에 만든다.

CSS
버튼을 파란색으로 꾸미고 크기와 간격을 정한다.

JavaScript
버튼을 누르면 신청 창을 연다.

셋 중 하나가 잘못됐을 때 나타나는 문제도 달라요.

• 버튼 자체가 없다면 HTML을 확인합니다.
• 버튼은 있지만 모양이 이상하다면 CSS를 확인합니다.
• 버튼은 보이는데 눌러도 반응이 없다면 JavaScript를 확인합니다.

직접 문제를 고치지 않더라도 어느 역할에서 문제가 생겼는지 짐작할 수 있으면 AI와 대화하기 쉬워져요.

버튼은 화면에 잘 보이고 디자인도 그대로인데,
클릭해도 신청 창이 열리지 않아.
HTML과 CSS는 건드리지 말고 JavaScript 동작을 확인해줘.

“안 돼. 고쳐줘”보다 AI가 확인할 범위가 훨씬 선명합니다.

꼭 세 파일로 나눠야 하나요?

아니에요. HTML 한 파일 안에 CSS와 JavaScript를 함께 적을 수도 있습니다. 페이지가 작고 빠르게 아이디어를 확인할 때는 한 파일이 더 편할 때도 있어요.

하지만 화면과 기능이 늘어나면 한 파일이 금방 길어집니다. 소개 문구를 고치려다 버튼 동작을 건드리고, 모바일 디자인을 바꾸려다 다른 화면까지 영향을 줄 수 있어요. 그래서 보통은 역할에 따라 파일을 나눕니다.

index.html  내용과 구조
style.css   디자인과 배치
script.js   동작과 변화

이렇게 나누면 AI에게도 “style.css에서 모바일 디자인만 수정해줘”처럼 범위를 정해 부탁할 수 있습니다.

파일을 나눈다고 해서 서로 떨어져 동작하는 것은 아니에요. HTML이 CSS와 JavaScript 파일을 불러오고, 브라우저가 세 파일을 함께 읽어 하나의 화면으로 보여줍니다.

모든 웹페이지에 JavaScript가 필요한 건 아니에요

내용을 읽기만 하는 간단한 소개 페이지라면 HTML과 CSS만으로도 충분할 수 있습니다. 클릭에 반응하거나 화면 내용이 바뀌는 기능이 없다면 JavaScript가 꼭 필요하지 않아요.

반대로 신청 폼, 로그인, 장바구니처럼 사용자 행동에 따라 결과가 바뀌는 서비스에는 JavaScript가 중요합니다.

도구가 많다고 더 좋은 프로젝트가 되는 것은 아니에요. 필요한 기능에 맞는 만큼만 사용하는 것이 좋아요. AI가 간단한 페이지를 만들어달라는 요청에 복잡한 도구를 잔뜩 설치했다면 “이 기능에 정말 필요한 구성인지” 물어봐도 됩니다.

Next.js 프로젝트에서는 왜 이 세 파일이 잘 안 보이나요?

AI가 Next.js로 프로젝트를 만들면 index.html, style.css, script.js 대신 이런 파일을 볼 수 있어요.

app/page.tsx
app/layout.tsx
app/globals.css
components/Button.tsx

파일 이름이 달라져도 브라우저가 이해하는 기본 재료는 여전히 HTML, CSS, JavaScript예요. Next.js는 여러 화면과 기능을 관리하기 편하도록 코드를 나누고, 우리가 작성한 코드를 브라우저가 읽을 수 있는 형태로 준비해주는 도구입니다.

처음부터 이 모든 파일의 문법을 이해할 필요는 없어요. page.tsx를 보면서는 “화면의 내용과 동작이 함께 있구나”, globals.css를 보면서는 “전체 디자인 규칙이 있구나” 정도로 역할을 찾아가면 됩니다.

이어서 바이브코딩에서 자꾸 만나는 Next.js가 무엇이고 왜 사용하는지 살펴볼 수 있어요.

바이브코딩에서는 역할을 구분하는 것이 먼저예요

바이브코딩을 시작할 때 HTML과 CSS 문법을 전부 외울 필요는 없습니다. JavaScript 코드를 처음부터 직접 작성할 필요도 없어요. 그 일은 AI에게 부탁할 수 있습니다.

대신 다음 세 가지를 구분할 수 있으면 좋아요.

내용을 바꾸고 싶은가?
모양을 바꾸고 싶은가?
동작을 바꾸고 싶은가?

이 구분은 AI에게 더 정확하게 요청하고, 만들어진 결과를 확인하는 기준이 됩니다. 화면이 예상과 다를 때도 막연히 다시 만들어달라고 하기보다 어디가 다른지 설명할 수 있어요.

정리

• HTML은 화면에 무엇이 있는지 정합니다.
• CSS는 화면이 어떻게 보이는지 정합니다.
• JavaScript는 클릭과 입력 뒤에 무엇이 일어날지 정합니다.
• 세 가지를 한 파일에 작성할 수도 있지만, 프로젝트가 커지면 역할에 따라 나누는 편이 관리하기 쉽습니다.
• Next.js를 사용해도 브라우저가 받는 기본 재료는 HTML, CSS, JavaScript입니다.
• 바이브코딩 입문자는 문법을 외우기보다 내용·모양·동작을 구분하는 것부터 시작하면 됩니다.

AI가 만든 프로젝트를 열었을 때 파일 이름부터 외우려 하지 않아도 괜찮아요. 먼저 내가 바꾸고 싶은 것이 내용인지, 모양인지, 동작인지 생각해보세요. 그 질문 하나가 프로젝트를 읽고 AI에게 일을 맡기는 출발점이에요.