우리는 웹 개발자가 아니더라도, AI를 통한 '웹 개발'로 HTML을 다양한 형태로 활용할 수 있습니다. 이 강의를 통해 HTML이 무엇인지, 어떤 역할을 하는지, 그리고 왜 바이브 코딩에서 HTML이 중요한지를 알아보겠습니다.

1. 왜 바이브 코딩에 HTML인가

얼마 전 개발자들 사이에서 "AI에게 줄 문서, 이제 마크다운 말고 HTML로 쓰자"는 이야기가 한바탕 오갔습니다. 시작은 앤트로픽 클로드 코드 팀의 타리크 시히파르(Thariq Shihipar)가 X(트위터)에 올린 한마디였습니다.

HTML is the new markdown. I've stopped writing markdown files for almost everything and switched to using Claude Code to generate HTML for me.

HTML이 새로운 마크다운이다. 나는 거의 모든 일에서 마크다운 파일 쓰기를 그만두고, 클로드 코드로 HTML을 만들게 했다.

— 타리크 시히파르, 원문 트윗

여기에 오픈AI 창립 멤버이자 테슬라 AI를 이끌었던 안드레 카파시(Andrej Karpathy)가 비슷한 팁을 더했습니다.

at the end of your query ask your LLM to "structure your response as HTML", then view the generated file in your browser.

질문 끝에 "응답을 HTML로 구성해줘"라고 덧붙인 다음, 만들어진 파일을 브라우저에서 열어 보라. 정말 잘 된다.

— 안드레 카파시, 원문 트윗

LLM 분야에서 유명한 사이먼 윌리슨(Simon Willison)도 자기 습관을 다시 돌아봤습니다.

I've been defaulting to asking for most things in Markdown since the GPT-4 days, when the 8,192 token limit meant that Markdown's token-efficiency over HTML was extremely worthwhile.

GPT-4 시절부터 나는 대부분을 마크다운으로 요청하는 걸 기본값으로 삼아 왔다. 8,192토큰 제한이 있던 그 시절에는 HTML보다 토큰을 아끼는 마크다운이 큰 가치가 있었기 때문이다.

— 사이먼 윌리슨, 원문 글

조금 과한 표현이긴 하지만, 곱씹어 보면 일리가 있는 말입니다.

물론 반론도 만만치 않습니다. 마크다운을 만든 존 그루버(John Gruber)는 애초에 이런 철학으로 마크다운을 설계했습니다.

The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions.

마크다운 문서는 태그나 서식 명령으로 도배된 것처럼 보이지 않고, 평범한 텍스트 그대로도 읽고 펴낼 수 있어야 한다.

— 존 그루버, 마크다운 창시자 · 원문

이 논쟁에서 반대편에 선 커티스 리덕스(Kurtis Redux)는 「The Unreasonable Ineffectiveness of HTML」이라는 글로 받아쳤습니다. HTML은 토큰을 몇 배씩 더 쓰고, 깃(Git) 변경 내역을 지저분하게 만들며, 무엇보다 원본 코드가 사람 눈에 읽기 힘들다는 것입니다.

HTML is only readable after rendering; its raw source is inherently hostile to human eyes.

HTML은 렌더링한 뒤에야 읽을 수 있다. 그 원본 코드 자체는 사람 눈에 본질적으로 적대적이다.

— 커티스 리덕스, 「The Unreasonable Ineffectiveness of HTML」 · 원문

정답은 결국 "상황에 따라 다르다"입니다. AI에게 넣는 입력이나 깃에서 오래 관리할 문서는 마크다운이 여전히 편하고, 사람이 최종적으로 보고 만질 결과물은 HTML이 괜찮습니다. 저는 AI에게 다시 시킬 문서라면 마크다운으로, 사람에게 전달할 문서라면 PDF나 HWPX 파일보다 HTML로 만드는 걸 선호합니다. 마크다운은 이전 시리즈에서 다뤘으니, 이번에는 HTML을 집중적으로 다루려고 합니다.

그렇다면 HTML이 결과물로서 강한 이유는 뭘까요. 여러분이 누군가에게 카카오톡으로 마크다운 문서로 파일을 보냈다고 상상해볼게요. 표만 보더라도 |와 같은 것으로 구분된 날것의 텍스트가 보이겠죠. 보기도 쉽지 않습니다. 인쇄하긴 또 어떤가요? 랜더링해주는 도구를 한 번 거쳐야 인쇄를 할 수 있습니다. 문서 형태로 제대로 보기 위해서는 Notion 같은 환경이 필요합니다.

반면 HTML 파일은 다릅니다. .html 파일 하나를 더블 클릭하면 브라우저가 곧바로 열어서, 작성자가 의도한 모습 그대로 보여줍니다. 별도의 프로그램도, 인터넷 연결도 필요 없습니다. 휴대폰으로 보내도, 5년 뒤에 열어도 똑같이 보입니다. 세상 모든 컴퓨터에 브라우저가 깔려 있으니까요. 확장성, 범용성, 호환성 등 대부분 HTML은 마크다운보다 강력합니다.

1.1 HTML이 뭔가요

HTML은 HyperText Markup Language의 줄임말입니다. 이름이 어렵지만, 하는 일은 단순합니다. 웹 페이지의 뼈대를 잡는 언어입니다.

집을 짓는다고 생각해 봅시다. 먼저 기둥과 벽, 방의 위치를 잡는 골조 공사가 있습니다. 그다음 벽지를 바르고 색을 칠하는 인테리어가 있고, 마지막으로 조명 스위치를 누르면 불이 켜지는 전기 공사가 있습니다.

웹 페이지도 똑같이 세 가지로 나뉩니다.

위 그림에서 HTML은 캐릭터의 조각들이 각진 네모로 흩어져 있습니다. 구성 요소만 있을 뿐입니다. CSS는 이 조각들을 제자리에 배치하고 색과 크기를 입혀 예쁜 캐릭터로 만듭니다. JavaScript는 그 캐릭터를 움직이게 하고, 클릭하면 반응하게 합니다.

2. HTML로 할 수 있는 일

많은 분이 HTML을 "웹사이트 만들 때나 쓰는 것"으로만 생각합니다. 하지만 HTML은 브라우저만 있으면 어디서나 열리는 만능 결과물 포맷에 가깝습니다. AI와 함께라면 다음 같은 것들을 빠르게 만들 수 있습니다.

• 문서와 보고서: 마크다운으로 쓴 글을 HTML로 바꾸면, 받는 사람이 더블 클릭만으로 깔끔하게 정돈된 문서를 봅니다. 목차, 표, 강조가 작성자 의도대로 보입니다.
• 발표용 슬라이드: HTML로 슬라이드 덱을 만들 수 있습니다. 화살표 키로 넘기는 발표 자료를 파일 하나로 만들어 공유하면, 파워포인트 없이도 어디서나 열립니다.
• 이미지 압축 같은 작은 도구: 브라우저 안에서 이미지를 줄이고 압축하는 도구를 HTML 파일 하나로 만들 수 있습니다. 서버에 올릴 필요도 없고, 내 사진이 외부로 새어 나갈 걱정도 없습니다. 모든 처리가 내 브라우저 안에서 끝납니다.
• 대시보드와 계산기: 숫자를 입력하면 결과가 바뀌는 계산기, 데이터를 그래프로 보여주는 간단한 대시보드도 HTML 한 파일로 충분합니다.
• 랜딩 페이지와 포트폴리오: 제품 소개 페이지나 나를 소개하는 한 장짜리 페이지를 만들어 그대로 인터넷에 올릴 수 있습니다.

이 모든 것의 공통점은 결과물이 .html 파일 하나라는 점입니다. 누구에게 보내도 똑같이 열리고, 인터넷에 올리면 바로 웹사이트가 됩니다.

3. 바이브 코더가 HTML을 알아야 하는 이유

다음과 같은 상황을 가정해볼 수 있습니다.

1. 사내에 연말 통계 보고서를 배포하고 싶다.
2. 간단한 랜딩 페이지를 만들고 싶은데 내가 가지고 있는 이미지를 어떻게 넣는지 모르겠다.
3. 사내에 배포할 앱을 만들고 싶다. 무엇부터 어떻게 하는지 모르겠다.
4. HTML만 만들어달라고 했는데 확장자가 .html 뿐만 아니라 .js나 .css인 파일도 만들어준다. 왜 그런지 모르겠다.
5. 수정을 하다보니 코드 분량이 많아졌다. 고치고 싶은데 AI가 수정을 잘 못한다.
6. 간단한 수정은 열어서 직접 고치고 싶은데, 어디를 건드려야 할지 모르겠다.
7. 화면이 안나오는데 애러를 확인하려니 '콘솔'을 확인하라고 한다. 너무 복잡하고 어렵다.

이런 상황에서 HTML을 알면, AI에게 "HTML로 만들어줘"라고 요청하는 것부터 시작해서, 결과물을 열어서 직접 고치는 것까지 할 수 있습니다. AI가 만들어준 HTML 파일을 열어서, 내가 원하는 대로 고치고, 다시 저장해서 공유할 수 있습니다.

아래는 모두 이러한 HTML을 이용해서 만든 결과물입니다.