HTML, CSS, JavaScript — AI와 함께 처음부터 이해하기

지난 글에서 바이브 코딩이 뭔지 알아봤어요. 이번엔 한 단계 더 들어가 볼게요.

AI에게 "웹사이트 만들어줘"라고 하면 코드가 나오는데, 그 코드가 대체 뭔지 모르면 답답하잖아요. 전부 외울 필요는 없지만, 큰 그림을 이해하면 AI와의 대화가 훨씬 수월해져요.

---

웹의 세 기둥

웹사이트를 만드는 코드는 크게 세 종류예요.

디자이너에게 익숙한 비유로 바꾸면:

• HTML = Figma의 레이어 구조 (프레임, 텍스트, 이미지 배치)
• CSS = Figma의 오른쪽 패널 (색상, 폰트, 여백, 정렬)
• JavaScript = Figma의 프로토타입 인터랙션 (클릭하면 뭔가 일어나는 것)

---

HTML — 구조를 잡는 뼈대

HTML은 **태그(tag)**로 이루어져 있어요. 태그는 <> 안에 이름을 쓰고, 닫을 때는 </>를 써요.

<h1>큰 제목</h1>
<p>문단 텍스트입니다.</p>
<button>클릭하세요</button>

자주 보게 될 태그들:

핵심은 **"태그 = 역할"**이에요. <button>이라고 쓰면 "이건 버튼이야"라고 브라우저에게 알려주는 거예요.

AI에게 이렇게 물어보세요

"이 HTML 코드에서 각 태그가 무슨 역할을 하는지 한 줄씩 설명해줘."

AI가 생성한 코드를 다시 AI에게 설명해 달라고 하는 거예요. 이게 바이브 코딩에서 배우는 방법이에요.

---

CSS — 눈에 보이는 모든 것

CSS는 디자이너에게 가장 친숙한 영역이에요. Figma에서 하는 거의 모든 작업이 CSS와 대응돼요.

.card {
  background-color: #18181b;    /* 배경색 */
  border: 1px solid #27272a;   /* 테두리 */
  padding: 20px;               /* 안쪽 여백 */
  margin-bottom: 16px;         /* 아래쪽 바깥 여백 */
  font-size: 14px;             /* 글자 크기 */
  color: #d4d4d8;              /* 글자 색 */
}

Figma ↔ CSS 대응표

Auto Layout = Flexbox라는 것만 기억하세요. Figma에서 Auto Layout을 쓸 줄 알면, CSS Flexbox의 개념을 이미 알고 있는 거예요.

Tailwind CSS — 디자이너 친화적 CSS

요즘 AI가 생성하는 코드에서 이런 걸 자주 볼 거예요:

<div class="bg-zinc-900 border border-zinc-800 p-5 mb-4 text-sm text-zinc-300">
  카드 내용
</div>

이건 Tailwind CSS라는 건데, CSS를 별도 파일에 쓰는 대신 클래스 이름으로 바로 스타일을 적용하는 방식이에요.

패턴이 보이죠? bg = background, p = padding, m = margin, t = top, b = bottom. 약어 규칙만 알면 금방 읽을 수 있어요.

---

JavaScript — 움직임을 만드는 힘

JavaScript(줄여서 JS)는 "뭔가 일어나게" 만드는 언어예요.

• 버튼을 클릭하면 메뉴가 열린다
• 스크롤하면 애니메이션이 재생된다
• 서버에서 데이터를 가져와서 화면에 보여준다

솔직히, 바이브 코딩 초반에는 JS를 깊이 이해할 필요 없어요. AI가 잘 처리해주거든요. 하지만 자주 보이는 패턴 두 가지만 알아두면 좋아요.

패턴 1: 이벤트 핸들러

function handleClick() {
  alert("버튼이 클릭되었어요!");
}

function은 "동작을 정의한다"는 뜻이에요. handleClick은 이름이고, { } 안이 실제로 실행될 내용이에요.

패턴 2: 상태 (State)

const [count, setCount] = useState(0);
// count = 현재 값 (0부터 시작)
// setCount = 값을 바꾸는 함수

이건 React라는 프레임워크에서 쓰는 패턴인데, "화면에 보이는 데이터를 관리"하는 거예요. setCount(1)을 하면 화면에 1이 표시되는 식이죠.

---

AI와 함께 배우는 실전 팁

1. 코드를 받으면 바로 질문하기

AI가 코드를 생성하면, 이해 안 되는 부분을 바로 물어보세요:

"이 코드에서 className이랑 class는 뭐가 달라?"
"useState가 정확히 뭘 하는 건지 쉽게 설명해줘."
"이 flex gap-4가 Figma에서 어떤 설정이랑 같아?"

2. 하나씩 바꿔보기

AI가 만든 코드에서 숫자를 하나 바꿔보세요:

• p-5를 p-10으로 → 패딩이 커짐
• text-sm을 text-2xl로 → 글자가 커짐
• bg-zinc-900을 bg-red-500으로 → 배경이 빨간색으로

직접 바꾸고 결과를 보면, 코드와 화면의 관계가 몸에 익어요.

3. Figma 시안을 말로 설명하는 연습

내가 만든 Figma 시안을 AI에게 설명하는 연습을 해보세요. 이게 곧 프롬프트 실력이에요:

"카드 컴포넌트를 만들어줘.
- 배경: #18181b
- 테두리: 1px #27272a
- 패딩: 위아래 24px, 좌우 20px
- 제목: 16px, 볼드, 흰색
- 설명: 14px, #a1a1aa
- 호버 시 테두리가 #52525b로 변경"

이렇게 구체적으로 설명할수록, AI는 정확한 코드를 만들어줘요.

---

정리

전부 외울 필요 없어요. AI와 대화하면서 자연스럽게 익히는 거예요. 다음 글에서는 AI와의 대화를 더 잘하는 방법, 프롬프트의 기술을 다뤄볼게요.

다음 글에서 만나요!