Markdown 대신 HTML로 받으면 정보 밀도·가독성·공유·상호작용이 모두 좋아집니다. Anthropic의 Thariq Shihipar가 5가지 이유와 실제 활용처를 정리하고, 직접 만든 HTML 아티팩트 20개를 한 페이지에 모아 공개했습니다.
Anthropic 엔지니어 Thariq Shihipar가 2026년 5월 20일 공개한 짧은 글입니다. Claude Code를 매일 쓰는 본인의 경험을 토대로, 출력 포맷의 디폴트가 왜 Markdown에서 HTML로 바뀌어야 하는지를 풀어 놓았습니다.
Markdown이 뒷전으로?
Markdown은 한때 Claude의 답을 담아내기에 모자람이 없었습니다. 모델이 점점 똑똑해지고 한 번에 만드는 결과의 폭이 넓어지면서, "제목·문단·불릿"으로만 짜인 Markdown이 갈수록 답답해졌다는 게 저자의 진단이죠. 100줄을 넘기는 Markdown 출력은 사람이 머리로 따라잡기 버겁다고 했습니다.
반대로 HTML은 표·CSS·SVG·자바스크립트를 자유롭게 섞을 수 있고, 브라우저가 곧바로 렌더해 줍니다. 정보를 더 빽빽하게 담으면서도 더 잘 읽힌다는 이야기입니다.
HTML이 더 나은 다섯 자리
저자가 꼽은 다섯 가지를 풀어 보면 다음과 같습니다. 정보 밀도 — 표·CSS·SVG·자바스크립트 상호작용·워크플로우 시각화를 한 문서에 모아 담을 수 있습니다. 시각적 명확성 — 100줄짜리 Markdown은 읽기 지치지만 같은 분량을 탭·일러스트·내부 링크로 나눈 HTML은 한눈에 들어오죠. 공유 용이성 — HTML은 브라우저가 그대로 렌더하니 동료에게 던지기 좋습니다. 양방향 상호작용 — 슬라이더나 토글을 끼워 넣으면 결과를 직접 조정하고 그 값을 다시 프롬프트로 돌릴 수 있습니다. 풍부한 컨텍스트 — Claude Code는 파일 시스템, MCP(Slack·Linear 등), 브라우저, Git 히스토리까지 끌어와 한 화면에 모을 수 있죠.
실제로 어디에 쓰는가
저자는 다섯 자리에서 HTML 출력을 적극 활용한다고 했습니다.
- 명세·계획·탐색: "온보딩 화면 6가지를 완전히 다른 방향으로 만들어 그리드에 나란히 비교하게 해 줘" 같은 프롬프트로, 한 페이지 안에서 여러 안을 견줍니다.
- 코드 리뷰: PR 설명을 위해 diff와 주석이 같이 담긴 HTML 아티팩트를 만들고, 심각도를 색으로 코딩합니다.
- 디자인·프로토타입: 슬라이더로 애니메이션 파라미터를 돌려 본 뒤, 마음에 드는 값을 그대로 복사해 갑니다.
- 보고서·연구·학습: 여러 데이터 소스를 합쳐 시각 보고서·플로우차트·SVG 다이어그램으로 정리합니다.
- 맞춤 편집기: 한 작업 전용의 임시 편집기를 만들어 씁니다. Linear 티켓을 우선순위별로 재배치하거나, 설정 파일을 손보거나, 프롬프트를 튜닝할 때 쓸 작은 UI 같은 것이죠.
HTML이 "본문 형식"이 아니라 그때그때의 일회용 UI가 된다는 게 핵심입니다. 저자는 본인이 실제로 만든 HTML 아티팩트 약 20개를 한 페이지에 모아 공개해 두었는데, 탐색·코드 리뷰·디자인·프로토타이핑·다이어그램·슬라이드·학습·보고서·편집기 아홉 갈래로 나뉘어 있습니다. 그 데모 페이지 자체도 HTML로 만들어져, 글의 주장을 살아 있는 예로 보여 주죠.
토큰이 더 들지 않나?
HTML은 같은 내용을 담아도 Markdown보다 토큰을 많이 씁니다. 저자도 그 점을 인정하지만, 표현력과 가독성이 끌어올린 결과물의 질이 그 비용을 충분히 상쇄한다고 봅니다. "Markdown이 더 나은 자리는 없냐"는 물음에도 본인은 거의 모든 곳에서 HTML을 쓴다고 답했죠. 계획을 세울 때도 큰 문서 하나가 아니라, 단계별로 쪼갠 여러 HTML 파일로 만들어 둔다고 합니다.
"Claude의 진행을 더 따라잡게 된다"
글의 진짜 결론은 효율이나 모양새가 아니라 협업감입니다. 저자는 본인이 HTML을 쓰는 진짜 이유를 이렇게 꼽았습니다.
I feel more in the loop now than I ever did before.
Claude의 진행을 화면 위에서 시각·구조로 같이 따라가게 되니, 도구가 무엇을 어떻게 결정하는지 사람이 한층 가까이에서 본다는 이야기죠. 좋은 출력 포맷은 결과의 모양이 아니라 사람과 모델 사이의 거리를 바꾼다는 의미라고 합니다.
참고 자료
- 원문: Using Claude Code: The Unreasonable Effectiveness of HTML — Anthropic
- 동반 페이지(HTML 아티팩트 20개 모음): html-effectiveness — Thariq Shihipar
이 글은 Anthropic 원문을 정리한 것입니다. 원저작권은 Anthropic에 있습니다.
