HTML CSS 자바스크립트 차이, 메모장으로 웹페이지 만들기

AI가 만든 코드를 메모장에 붙여 넣기만 해도 웹사이트가 열리는 시대입니다. 그래도 HTML CSS 자바스크립트 차이 정도는 알아야 결과물을 직접 고치고, AI에게도 정확하게 시킬 수 있습니다. 이 글은 세 가지가 각각 하는 일, 예제 코드로 직접 고쳐 보는 법, 메모장 파일이 왜 바로 웹페이지가 되는지를 순서대로 설명합니다.

최소한은 알아야 '딸깍'이 통한다

"코딩 몰라도 딸깍하면 AI가 다 해 준다"는 말은 반은 맞습니다. 마우스에 반응하는 3D 지구, 이름을 누르면 펼쳐지는 강의 목차 같은 화면도 AI가 만든 코드를 메모장에 한 번 붙여 넣어 만들 수 있습니다.

문제는 원리를 모른 채 딸깍만 할 때입니다. 남들이 만든 것과 비슷비슷한 결과물이 하나 더 나올 뿐이고, AI가 못 푸는 오류가 하나 생기면 "이거 오류 나", "왜 안 돼?", "똑같은 오류가 발생했어"만 반복하게 됩니다. 진짜 바이브 코딩은 아무것도 몰라도 되는 코딩이 아니라, 최소한은 알아야 딸깍이 통하는 코딩입니다.

웹사이트의 세 가지 재료

사용자 눈에 보이는 화면 부분을 프런트엔드라고 부릅니다. 프런트엔드를 만드는 재료가 HTML, CSS, 자바스크립트 세 가지입니다. 집에 빗대면 역할이 또렷해집니다.

HTML: 집의 뼈대와 설계도

"여기는 제목, 여기는 버튼, 여기는 이미지"처럼 웹페이지의 구조를 정합니다. 화면에 보여 주고 싶은 것들의 목록이라고 생각하면 됩니다.

CSS: 인테리어

글자색, 버튼 모양, 위치, 여백처럼 보이는 모습과 배치를 맡습니다. 예쁘고 쓰기 편하게 만드는 부분입니다.

자바스크립트: 스위치를 누르면 불이 켜지는 동작

버튼 클릭, 마우스 올림처럼 사용자 행동에 반응해 사이트를 실제로 움직이게 합니다.

실습 1: 예제 코드로 구조 살펴보기

아래는 세 재료가 모두 들어간 아주 짧은 예제입니다. 메모장에 붙여 넣고 "실습 3"의 방법대로 html 파일로 저장한 뒤 더블클릭하면 브라우저에서 열립니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>HTML 구조 예제</title>
  <style>
    body { font-family: sans-serif; }
    .box { padding: 20px; background: lightblue; border-radius: 8px; }
    button { margin-top: 10px; padding: 8px 16px; }
  </style>
</head>
<body>
  <div class="box">
    <h1>안녕하세요. 이건 HTML 구조 예제입니다</h1>
    <button onclick="showMessage()">클릭</button>
  </div>
  <script>
    function showMessage() {
      alert("버튼이 눌렸어요");
    }
  </script>
</body>
</html>

1. 저장한 파일을 브라우저에서 연다.
   • 확인: "안녕하세요. 이건 HTML 구조 예제입니다"라는 글자와 "클릭" 버튼이 보인다.
2. 같은 파일을 메모장으로 연다(파일을 마우스 오른쪽 버튼으로 누르고 "연결 프로그램 > 메모장").
   • 확인: 코드가 <head> 부분과 <body> 부분, 두 덩어리로 나뉘어 있다.
3. <head> 안의 <style> 부분을 찾는다.
   • 확인: 글꼴, 색, 박스 여백, 버튼 위치처럼 화면을 꾸미는 코드가 있다. 이것이 CSS 영역이다.
4. <body> 부분을 찾는다.
   • 확인: 화면에 보이는 글자와 버튼이 들어 있다. 이것이 HTML 영역이다.
5. <script> 부분을 찾는다.
   • 확인: 버튼을 눌렀을 때 "버튼이 눌렸어요" 팝업을 띄우는 코드가 있다. 이것이 자바스크립트 영역이다.

실습 2: 코드를 직접 고쳐 보기

고친 뒤에는 메모장에서 저장(Ctrl + S)하고, 브라우저에서 새로고침(F5)하면 바뀐 결과가 보입니다.

6. <h1> 안의 "안녕하세요"를 "생존 AI"처럼 다른 글자로 바꾼다.
   • 확인: 새로고침하면 제목 글자가 바뀌어 있다.
7. <style> 안 .box 줄의 색 이름 lightblue를 pink처럼 다른 색으로 바꿔 본다.
   • 확인: 박스 배경색이 바뀐다.
8. 같은 줄의 padding: 20px;을 padding: 50px;로 바꾼다.
   • 확인: 박스 안쪽 여백이 넓어져 박스가 커진다.
9. 같은 줄의 background 값을 yellow로 바꾼다.
   • 확인: 박스 배경이 노란색으로 바뀐다.
10. 화면의 "클릭" 버튼을 누른다.
    • 확인: "버튼이 눌렸어요"라는 팝업이 뜬다.
11. <script> 안의 "버튼이 눌렸어요"를 "구독, 좋아요, 알림 설정"으로 바꾸고 저장한 뒤 새로고침해 버튼을 다시 누른다.
    • 확인: 바뀐 문구가 팝업으로 뜬다.

이 정도는 왜 알아야 하나

원리를 모르면 "이거 바꿔 줘, 저거 수정해 줘" 하며 매번 AI를 중간에 끼워야 합니다. "박스 좀 더 키워 줘요. 한 30% 정도만" 같은 막연한 지시만 하게 되고, AI가 엉뚱한 곳을 고치기도 합니다. padding 숫자 하나를 직접 바꾸는 것과, AI에게 설명하고 확인하고 다시 고쳐 달라고 하는 것 중 어느 쪽이 빠른지는 분명합니다.

문법을 외울 필요는 없습니다. 어느 덩어리가 무슨 일을 하는지 알아보는 정도면 충분합니다.

메모장 파일이 왜 웹사이트가 되나

크롬 같은 웹 브라우저에는 HTML을 읽는 기능, CSS를 해석해 디자인을 입히는 기능, 자바스크립트를 실행하는 엔진이 처음부터 들어 있습니다. 브라우저가 코드를 화면으로 바꿔 주는 통역사 역할을 하는 셈입니다. 그래서 따로 설치할 것 없이 메모장으로 저장한 파일이 바로 웹페이지로 열립니다. 웹 개발이 진입장벽이 가장 낮은 개발 분야로 꼽히는 이유이기도 합니다.

실습 3: 메모장 저장 규칙

12. 메모장에서 "파일 > 다른 이름으로 저장"을 누르고, 아래쪽 "파일 형식"을 "텍스트 문서(*.txt)"에서 "모든 파일(*.*)"로 바꾼다.
    • 확인: 파일 형식 칸에 "모든 파일"이 보인다.
13. 파일 이름을 예제.html처럼 끝이 .html이 되게 적는다.
    • 확인: 파일 이름 칸이 .html로 끝난다.
14. "인코딩"을 UTF-8로 고른다.
    • 확인: 인코딩 칸에 UTF-8이 보인다. 이렇게 해야 한글이 깨지지 않는다.
15. 저장한 뒤 파일을 더블클릭한다.
    • 확인: 메모장이 아니라 브라우저에서 바로 열린다.

더블클릭했는데 메모장이 열리면 이름이 예제.html.txt처럼 txt로 저장된 경우입니다. 파일 형식을 "모든 파일"로 바꿨는지 다시 봅니다. 한글이 깨지면 인코딩이 UTF-8이 아닌 경우입니다. 파일 탐색기의 "보기" 메뉴에서 "파일 확장명"을 켜 두면 확장자를 바로 확인할 수 있습니다.

AI 시대의 바이브 코딩 순서

예전에는 문법을 외워 손으로 코드를 짜느라 첫 웹사이트까지 몇 달이 걸리기도 했습니다. 지금은 대략 이런 체감입니다(사람과 작업마다 다른 대략적인 예시입니다).

• AI에게 만들고 싶은 것을 말로 설명: 1분 안쪽
• 쇼핑몰 메인 페이지용 지시문 생성: 10초
• 그 지시문으로 웹사이트 생성 요청: 30초
• 코드 복사해서 붙여 넣고 저장: 30초
• 브라우저에서 확인: 10초
• 마음에 안 들면 다시 요청: 1분

이렇게 하면 첫 웹사이트를 10분 안팎에 띄울 수 있습니다. 장바구니나 고객 데이터베이스 연결처럼 할 일은 많지만, 그것도 요청으로 진행할 수 있습니다. 결국 차이는 아이디어를 얼마나 빨리 화면으로 옮기느냐에서 납니다.

비전공자가 살아남는 접근법은 세 단계입니다.

1. 개념은 최소한 알아 둔다.
2. 그 개념 공부조차 AI에게 시키고, 나온 코드를 보며 배운다.
3. 그렇게 익힌 기초로 필요한 걸 정확히 시킨다.

운전면허 비유와 태그 학습법

엔진은 몰라도 경고등은 알아야

자동차를 타려고 엔진 구조까지 알 필요는 없습니다. 그래도 기름 넣는 곳, 타이어 공기압 확인, 와이퍼 교체, 경고등 의미 정도는 알아야 운전을 제대로 합니다.

아무것도 모른 채 "이거 해 줘요. 저거 해 줘요. 오류 나요. 왜 안 돼요?"로만 지시하면 컴퓨터와 제대로 대화하는 게 아니고, 유지보수나 보안은 손대기 어렵습니다. 필요한 수준은 코드를 봤을 때 "이건 이렇게 동작하는구나" 하고 알아보는 정도입니다. 휴대폰에서 앱을 설치하고, 설정을 바꾸고, 알림을 끄고, 배경화면을 바꾸는 수준이면 충분합니다.

자주 쓰는 HTML 태그

웹사이트 부품마다 붙는 이름표를 태그라고 부릅니다. 태그를 알면 "이 코드는 이걸 위한 코드구나"가 보입니다. 처음엔 아래 정도만 눈에 익혀도 웬만한 코드의 뼈대가 읽힙니다.

실습 4: 태그 공부를 AI에게 시키기

16. AI 챗봇(챗GPT, 제미나이, 클로드 등)에 아래 요청을 그대로 입력한다.

HTML 언어에 사용되는 전체 태그, 즉 웹사이트를 구성하는 모든 부품 중에서 실제로 사용 빈도의 90%를 차지하는 태그들이 어떤 것들인지 알려줘. 그리고 그 태그들에 대해 쉬운 비유 하나, 언제 사용하는지, 간단한 예시 코드와 화면에서 어떻게 보이는지 설명해 줘.

17. 요청을 보내고 답을 읽는다.
    • 확인: 자주 쓰는 태그가 생각보다 많지 않다는 것을 알게 된다.

이렇게 기본 부품을 알아 두면 간단한 수정은 직접 하고, 어려운 작업은 AI에게 정확히 지시할 수 있습니다. 다른 프로그래밍 언어도 같은 방식으로 기본기를 쌓으면 AI를 그냥 쓰는 사람이 아니라 도구로 부리는 사람이 됩니다.

다음 단계: 배포와 백엔드

지금 만든 페이지는 내 컴퓨터에서만 열립니다. 다른 사람도 보게 하려면 배포가 필요하고, 회원 가입이나 데이터 저장을 하려면 데이터베이스와 백엔드가 필요합니다. 원래는 백엔드까지 만든 뒤 배포하는 게 정석이지만, 처음 배우는 사람은 Cloudflare Pages 같은 무료 배포 서비스로 HTML 파일 하나를 올려 보는 것부터 해 보면 흐름을 잡기 쉽습니다.