AI한테 보고서 만들어달라고 하면 늘 마크다운으로 와요. 줄줄이 ##에 굵은 글자에 리스트. 처음 몇 줄은 읽다가 슬슬 스크롤을 빠르게 내려요. 100줄이 넘어가면? 솔직히 그냥 닫아요.
Anthropic Claude Code 팀의 Thariq Shihipar가 5월에 던진 말이 X에서 48시간 만에 1,090만 뷰를 찍었어요. "HTML is the new Markdown."
마크다운이 왜 문제인 건데?
마크다운이 AI 응답의 기본 포맷이 된 건 사실 GPT-4 시대의 흔적이에요. 당시 컨텍스트 창이 8,192 토큰이었거든요. HTML은 구조적으로 토큰을 더 많이 쓰기 때문에, 좁은 공간에서 마크다운이 효율적이었던 거죠.
그게 2026년 지금도 이어지고 있어요. 근데 상황이 완전히 달라졌어요. 2026년 현재 컨텍스트 창은 100만 토큰에 달해요. HTML이 5,000 토큰을 더 써도 전체 예산의 0.5%에 불과하거든요.
그리고 더 근본적인 변화가 있어요. Thariq의 핵심 관찰이에요: "저는 더 이상 AI가 만들어준 문서를 직접 편집하지 않아요. 스펙으로 쓰거나, 다음 Claude 세션에 넘겨요." 마크다운의 가장 큰 장점이 "사람이 직접 편집하기 편하다"는 거였는데, 그 전제가 무너진 거죠.
핵심 통계
Thariq에 따르면 AI가 생성하는 토큰의 약 99%는 프로덕션 코드가 아니에요. 대시보드, 인터페이스, 계획 문서, 상태 업데이트 등이에요. 이미 시각화 중심으로 이동하고 있다는 신호예요.
마크다운이랑 뭐가 다른 건데?
직접 실험해보면 바로 알 수 있어요. Simon Willison은 보안 취약점 코드를 분석하면서 이 프롬프트를 썼어요: "이 코드를 상세히 설명해줘. 복잡한 부분은 풀어서 써줘. HTML로 출력하고, HTML·CSS·JavaScript의 기능을 최대한 활용해서 설명을 풍부하고 인터랙티브하게 만들어줘."
결과물에는 고수준 요약, 안전 경고, 단계별 코드 분석, 비교표가 탭과 접기 기능과 함께 들어왔어요. 마크다운으로는 동등한 명확성을 구현하기 어려운 것들이에요.
| 마크다운 | HTML | |
|---|---|---|
| 가독성 (100줄+) | 눈이 미끄러짐 | 탭·접기·사이드 네비게이션 |
| 다이어그램 | 텍스트 아스키아트 | SVG 인라인 가능 |
| 인터랙션 | 불가 | 슬라이더·버튼·토글 |
| 비교표 | 파이프(|) 문자 | 정렬·색상·강조 |
| 공유 | 마크다운 뷰어 필요 | 브라우저에서 바로 열림 |
| 생성 속도 | 빠름 (30초) | 2~4배 느림 (90~120초) |
| Git 버전관리 | 깔끔한 diff | diff 노이즈 발생 |
HTML의 핵심 장점은 "AI가 읽을 수 있는 거의 모든 정보를 HTML로 효율적으로 표현할 수 있다"는 거예요. Thariq의 표현이에요. 거기에 SVG 다이어그램, CSS 스타일, JavaScript 인터랙션까지 더하면 독자가 실제로 읽고 싶어지는 결과물이 나와요.
단, HTML이 항상 정답은 아니에요. 마크다운이 여전히 나은 경우도 있어요: Git 저장소(diff가 지저분해짐), 에이전트 간 데이터 전달(파싱이 깨끗해야 함), 짧은 답변(20줄 이하면 스타일 오버헤드 불필요), 개인 노트나 초안 작성이에요.
핵심만 정리: 시작하는 법
- 프롬프트 끝에 한 줄 추가
기존 프롬프트 끝에 딱 한 줄만 붙이세요: "Output as a single self-contained HTML file." 그것만으로도 Claude가 알아서 구조와 스타일을 입혀요. - 완성본에만 쓰기 (초안은 마크다운)
초안과 이터레이션은 마크다운으로, 최종 납품물·보고서·공유용 문서는 HTML로 전환하세요. 처음부터 다 바꾸려 하지 않아도 돼요. - 목적을 함께 알려주기
"사람이 읽을 거예요. 탭 네비게이션 넣어줘. 프린트 친화적으로." 또는 "파라미터를 슬라이더로 조정할 수 있게 해줘." 용도를 알려줄수록 결과물이 좋아져요. - 자유를 허용하기
Thariq의 팁: "Whatever is needed" 라는 문구가 생각보다 강력해요. "SVG, 코드 스니펫, 목업 — 맥락을 최대한 줄 수 있는 건 뭐든 넣어줘"처럼 신뢰를 주면 창의적인 결과가 나와요. - Living Design System 만들어보기
프로젝트가 있다면 색상·타이포그래피·컴포넌트를 담은 HTML 디자인 시스템 파일을 하나 만들어보세요. 사람도 읽을 수 있고 AI도 읽을 수 있는 공용 레퍼런스가 돼요.
