[비개발자 사고법 01강] HTML이 뭐냐고요? 웹페이지의 '뼈대'입니다

왜 자꾸 'AI에게 끌려다니는' 느낌이 들까

바이브 코딩이 처음 유행했을 때, "회사 홈페이지 하나 만들어 줘"라고 한 적이 있습니다. 만들어지긴 했어요. 그런데 사람들 이름과 연락처를 받는 칸이, 정작 신청하는 칸과 나란히 있어야 하는데 제목 바로 밑에 가 있는 겁니다. 뭔가 이상한 건 알겠는데, 어떻게 고쳐 달라고 말해야 할지를 모르는 것 — 이게 비개발자가 부딪히는 진짜 벽입니다.

김지백 강사에 따르면, 이제는 코드를 직접 '짜는' 시대가 아닙니다. 코드는 AI가 짜 줍니다. 우리가 할 일은 AI에게 제대로 시키는 '사장님'의 역할이에요. 그런데 사장님이 자기 가게가 어떻게 생겼는지, 안에서 쓰는 단어가 뭔지 모르면 직원에게 뭘 시킬 수 있을까요? 그래서 오늘 딱 두 가지를 챙깁니다 — ① AI에게 제대로 일을 시키는 법, ② AI가 한 대답을 알아듣고 받아치는 법. 이 둘이 되면 코드를 몰라도 도전할 수 있는 전제 조건이 갖춰집니다.

HTML은 웹페이지의 '뼈대'입니다

집을 지을 때 가장 먼저 세우는 게 뭔가요? 벽지도 페인트도 아닌, 기둥과 골조 — 뼈대입니다. 웹페이지도 똑같아요. 화면에 보이는 제목, 사진, 버튼, 글자… 이 모든 것을 '여기엔 이게 들어간다'고 자리를 잡아 세우는 뼈대가 바로 HTML입니다.

그래서 HTML만으로 만든 페이지는 솔직히 좀 밋밋합니다. 검은 글씨에 배경 꾸밈 하나 없는, 뼈대만 덩그러니 선 상태죠. 하지만 괜찮습니다. 뼈대가 튼튼해야 그 위에 예쁜 옷을 입힐 수 있으니까요. 색을 칠하고 디자인을 입히는 일은 다음 편의 주인공(CSS)이 맡습니다. 오늘은 그 뼈대부터 확실히 잡습니다.

태그(tag) — '이건 제목, 이건 사진'이라고 붙이는 이름표

그럼 뼈대는 무엇으로 세울까요? 바로 태그(tag)입니다. 태그는 어렵게 생각할 것 없어요. "이 부분은 제목이야", "이건 사진이야", "이건 버튼이야"라고 알려주는 이름표(라벨)입니다. 택배 상자에 '깨지는 물건', '식품'이라고 라벨을 붙이듯, 화면의 각 덩어리에 정체를 적어 붙이는 거죠.

이름표가 붙어 있으니 브라우저도, AI도 "아, 여긴 제목이구나, 여긴 입력 칸이구나" 하고 알아봅니다. 그래서 나중에 "제목을 더 크게", "이 버튼을 위로"처럼 부위를 콕 집어 지시할 수 있게 됩니다. 태그라는 이름표가 있어야 '어디를'이 통하는 셈입니다.

머리(head)와 몸(body) — 차곡차곡 쌓는 구조

HTML 뼈대는 크게 두 부분으로 나뉩니다. 머리(head)와 몸(body)이에요. 머리는 화면에 직접 보이지는 않지만 페이지의 이름·설정 같은 정보가 담기는 곳이고, 몸은 우리가 실제로 눈으로 보는 내용 — 제목, 글, 사진, 버튼이 들어가는 곳입니다.

그래서 AI가 "머리 부분과 몸 부분 영역을 따로 나눠서 짰습니다"라고 답해도, 이제는 외계어가 아니죠. "아, 안 보이는 설정과 보이는 화면을 구분해서 만들었구나" 하고 알아듣게 됩니다. 뼈대는 이렇게 머리와 몸이라는 큰 칸을 잡고, 그 안에 태그들을 위에서 아래로 차곡차곡 쌓아 완성됩니다.

폼(form) — 사용자가 직접 입력하는 모든 칸

뼈대에서 빼놓을 수 없는 블록이 하나 더 있습니다. 폼(form)이에요. 회원가입 때 이름을 적는 칸, 검색할 때 글자를 치는 칸처럼 사용자가 무언가를 직접 입력하는 모든 부분을 폼이라고 부릅니다.

이름 칸, 비밀번호 칸, 마지막에 누르는 버튼, 동의할 때 체크하는 네모칸, 여러 개 중 하나 고르는 선택 목록 — 전부 폼 식구들입니다. 맨 처음 이야기한 그 홈페이지, "신청 칸이 엉뚱한 데 있다"던 문제도 사실은 이 폼을 어디에 둘지의 문제였던 거죠. 폼이라는 단어를 알면 "이름·연락처 받는 폼을 제목 아래가 아니라 맨 밑으로 옮겨 줘"처럼 정확히 지시할 수 있습니다.

막연한 지시 vs 사장님처럼 지시 — 한 문장 차이

이제 오늘 배운 단어를 합쳐 봅시다. 같은 AI에게 같은 일을 시켜도, 결과는 하늘과 땅 차이가 납니다. 그 차이는 실력이 아니라 지시의 구체성에서 갈립니다.