무슨 일이 일어났나

Anthropic Claude Code 팀의 Thariq Shihipar이 The Unreasonable Effectiveness of HTML이라는 글을 5월 8일 공개했어. Simon Willison이 같은 날 자기 블로그에서 이 글을 정리해 다시 퍼뜨렸지.

요지는 단순해. Claude한테 답을 받을 때 마크다운 말고 HTML로 받으라는 거야. Thariq의 표현으로는 “Diff와 call-graph는 공간 정보야. 마크다운은 그걸 평탄화시켜”. 같은 글에서 “inline SVG는 에이전트한테 진짜 펜을 쥐여주는 셈”이라고 했어.

왜 이게 일어났나

마크다운 출력이 표준이 된 이유는 토큰 비용이었어. Willison이 자기 블로그에서 직접 회상하길, GPT-4 시절 컨텍스트가 8,192 토큰밖에 안 됐으니까 HTML 태그로 토큰을 쓰는 게 사치였어. Claude Sonnet과 Opus가 100만 토큰 컨텍스트를 열면서 그 제약이 풀렸고, Thariq은 그 시점에 맞춰 HTML 출력의 이점을 다시 꺼낸 거야.

예제 페이지에는 다음 같은 시연이 있어.

  • inline SVG 다이어그램: 배포 파이프라인을 화살표로 그려서 흐름을 한 눈에 보여줘
  • 실행 가능한 슬라이드: 작은 HTML과 JavaScript로 슬라이드 덱을 만들고 그 자리에서 넘겨보게 해
  • 드래그 가능한 트리아지 보드: 티켓 카드를 옮기면서 분류하고, 텍스트로 export할 수 있게 다리를 걸어 둬
  • 나란히 비교 코드 보기: 두 접근을 같은 화면에 띄워서 직접 비교하게 해

어떤 의미인가

Claude Code나 에이전트 워크플로우를 짜는 사람한테는 출력 형식 자체가 설계 변수가 됐어. 마크다운으로 받으면 사람이 읽을 텍스트로 끝나지만, HTML로 받으면 그 결과물이 그 자체로 인터랙티브 인터페이스가 돼. 보고서·도해·간단한 어드민 화면을 LLM 출력으로 그대로 받는 시나리오가 열려.

다만 곧장 옮기기 전에 짚어볼 게 있어. HTML은 마크다운보다 토큰을 많이 써. Thariq 글에는 토큰 비교 수치가 없어서 자기 워크로드에서 비용 차이를 직접 측정해야 해. 그리고 Anthropic 팀 멤버 글이라 Claude 사용 시나리오에 무게가 실려 있는 점도 감안해야 해.

주의해서 볼 점

HTML 출력을 그대로 사용자 브라우저에 넘기면 보안 표면이 늘어나. SVG에 스크립트가 끼어들거나 외부 리소스를 불러오는 패턴이 모델 출력에 섞일 수 있어. 적용한다면 sanitization 단계 한 겹을 끼우는 게 안전해. 또 Claude 외 모델(GPT, Gemini 등)에서 같은 패턴이 재현되는지는 별도 검증이 필요해.