1. HTML, CSS, JavaScript 다시 보기

앞에서 웹 페이지가 세 가지로 나뉜다고 했습니다. HTML은 뼈대, CSS는 꾸미기, JavaScript는 움직임입니다. 이 셋은 한 파일 안에 같이 적을 수도 있고, 따로따로 파일로 떼어 둘 수도 있습니다.

<!-- 한 파일에 다 넣은 모습 -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <style>
      h1 { color: tomato; }   /* CSS */
    </style>
  </head>
  <body>
    <h1>안녕하세요</h1>      <!-- HTML -->
    <script>
      console.log("열렸습니다");  /* JavaScript */
    </script>
  </body>
</html>

이렇게 <style>과 <script> 안에 CSS와 JS를 같이 적으면 파일 하나로 끝납니다. 반대로 다음처럼 셋을 나눌 수도 있습니다.

<!-- index.html: 뼈대만 두고, 나머지는 불러오기 -->
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>안녕하세요</h1>
  <script src="app.js"></script>
</body>

이때 style.css와 app.js는 별도 파일로 존재하고, HTML이 href와 src로 그 파일들을 불러옵니다. 결과 화면은 두 방식 모두 똑같습니다. 다른 건 "한 덩어리냐, 여러 파일이냐"뿐입니다.

2. 합치기와 나누기, 무엇이 다른가

두 방식은 각각 잘 맞는 상황이 다릅니다.

• 합치기가 좋을 때: 완성된 결과물을 누군가에게 통째로 건넬 때입니다. 파일 하나만 보내면 받는 사람이 더블 클릭만으로 엽니다. 보고서, 발표 슬라이드, 작은 도구처럼 "한 번 만들어 건네면 끝"인 결과물에 어울립니다.

• 나누기가 좋을 때: 만들어 가는 도중, 특히 AI와 함께 계속 고쳐 나갈 때입니다. 이게 바이브 코딩에서 특히 중요합니다.

2.1 합쳐도 따라오지 않는 것들

여기서 한 가지 짚어둘 게 있습니다. "합친다"고 해서 정말 모든 것이 파일 하나로 빨려 들어가는 건 아닙니다. CSS와 JavaScript는 <style>, <script> 안에 넣어 합칠 수 있습니다. 하지만 이미지, 폰트, 동영상 같은 파일은 그대로 바깥에 남습니다. HTML은 <img src="logo.png" />처럼 그 파일이 어디 있는지 가리킬 뿐, 그림 자체를 코드 안으로 끌어안지는 않기 때문입니다.

그래서 이미지가 들어간 결과물을 통째로 건넬 때는, .html 파일과 함께 이미지 파일들도 같이 보내야 합니다. HTML 하나만 보내면 받는 쪽에서는 그림이 깨져 보입니다.

3. 바이브 코딩에서는 나누는 편이 좋다

AI에게 "이 부분 색만 바꿔줘" 하고 부탁하는 상황을 생각해 봅시다. 모든 코드가 한 파일에 들어 있으면, AI는 그 색 하나를 고치려고 파일 전체를 처음부터 끝까지 다시 읽어야 합니다. 파일이 길수록 읽는 양이 늘고, 느려지고, 엉뚱한 곳을 건드릴 여지도 커집니다.

파일을 역할별로 나눠 두면 AI는 고칠 파일 하나만 열면 됩니다. 꾸미기를 바꾸려면 style.css만, 움직임을 바꾸려면 app.js만 보면 됩니다. 사람이 읽기에도 그렇습니다. "이 페이지 스타일이 어디 있더라" 하고 찾을 때, 파일 이름만 보고 바로 짚을 수 있습니다.

규모가 조금만 커져도 차이는 분명해집니다. HTML 한 파일에 수백 줄짜리 CSS와 JS까지 뒤섞여 있으면, 사람도 AI도 길을 잃습니다. 그래서 만들어 가는 동안에는 나누고, 다 만든 결과물을 통째로 건넬 일이 생기면 그때 합친다고 기억하면 깔끔합니다.

4. 나누면 따라오는 숙제, 경로

파일을 나누는 순간 새로운 질문이 하나 생깁니다. 나눠 둔 파일들이 서로를 어떻게 찾느냐는 것입니다.

앞의 예에서 index.html은 href="style.css", src="app.js"라고 적어 다른 파일을 불러왔습니다. 이때 적은 style.css, app.js 같은 값이 바로 경로입니다. 파일이 같은 폴더에 있으면 이름만 적으면 되지만, 폴더가 나뉘어 있으면 길을 정확히 짚어줘야 합니다. 이걸 잘못 적으면 CSS가 적용되지 않거나 이미지가 깨집니다.

바이브 코딩에서 가장 자주 막히는 지점이 바로 여기입니다. 다음 장에서 이 경로를 제대로 짚어 보겠습니다.