본문으로 건너뛰기
Simon Willison조회 2

Claude Code 활용: 마크다운보다 HTML 출력이 효과적인 이유

LLM 출력 형식을 마크다운에서 HTML로 전환하여 SVG 다이어그램, 인터랙티브 위젯 등 더 풍부하고 이해하기 쉬운 기술 설명을 생성하는 방법과 사례를 제시한다.

섹션별 상세

Anthropic의 Claude Code 팀은 마크다운보다 HTML을 출력 형식으로 요청하는 것이 정보 전달력 측면에서 우수하다고 제안한다. 마크다운은 텍스트 중심의 정적인 정보 전달에 그치지만, HTML은 브라우저의 기능을 활용해 훨씬 다채로운 표현이 가능하다. 이를 통해 복잡한 PR 리뷰나 코드 분석 결과를 시각적으로 풍부하게 구성할 수 있다. 사용자는 단순 텍스트보다 구조화된 시각 자료를 통해 정보를 더 빠르게 습득하게 된다.
과거 GPT-4 시절에는 8,192 토큰이라는 엄격한 제한으로 인해 토큰 효율이 좋은 마크다운이 필수적이었다. 하지만 최신 모델들은 컨텍스트 윈도우가 비약적으로 확장되어 HTML의 오버헤드를 충분히 감당할 수 있는 환경이 조성됐다. 이제는 효율성보다 사용자 경험과 정보의 명확성을 우선시하는 전략적 선택이 가능해졌다. 이는 LLM 활용 패러다임이 '최소 비용'에서 '최대 이해도'로 전환되고 있음을 보여준다.
근거
  • GPT-4 시절에는 8,192 토큰 제한으로 인해 마크다운의 토큰 효율성이 HTML보다 훨씬 가치 있었다. 본문 중 'since the GPT-4 days, when the 8,192 token limit meant that Markdown's token-efficiency over HTML was extremely worthwhile' 문구
HTML 출력을 활용하면 SVG 다이어그램, 인터랙티브 위젯, 사이드바 내비게이션 등을 답변에 즉시 포함시킬 수 있다. 이는 특히 시스템 아키텍처나 복잡한 로직 흐름을 설명할 때 텍스트 설명의 한계를 극복하는 핵심 도구가 된다. 정적인 문서가 아닌 사용자와 상호작용하는 '도구' 형태의 답변을 생성할 수 있게 된다. 결과적으로 LLM은 단순한 답변자가 아닌 맞춤형 대시보드 제작자 역할을 수행한다.
bash
curl https://copy.fail/exp | llm -m gpt-5.5 -s 'Explain this code in detail. Reformat it, expand out any confusing bits and go deep into what it does and how it works. Output HTML, neatly styled and using capabilities of HTML and CSS and JavaScript to make the explanation rich and interactive and as clear as possible'

GPT-5.5를 사용하여 난독화된 보안 취약점 코드를 분석하고 대화형 HTML로 설명을 생성하는 명령어 예시

근거
  • HTML을 사용하면 SVG 다이어그램, 인터랙티브 위젯, 페이지 내 내비게이션 등을 답변에 포함할 수 있다. 본문 중 'Asking Claude for an explanation in HTML means it can drop in SVG diagrams, interactive widgets, in-page navigation' 문구
실제 테스트에서 GPT-5.5를 이용해 난독화된 리눅스 보안 취약점(copy.fail) 코드를 분석하고 HTML로 시각화한 결과가 매우 우수했다. 난독화된 Python 스크립트의 작동 원리를 단계별로 구분하고, 커널 API 호출의 의미를 표와 다이어그램으로 정리하여 가독성을 극대화했다. 생성된 HTML 페이지는 보안 전문가가 작성한 기술 분석 보고서 수준의 구조를 갖추었다. 이는 복잡한 보안 분석 업무에 AI를 활용할 때 HTML 형식이 필수적임을 입증한다.
GPT-5.5가 생성한 리눅스 보안 취약점 코드의 HTML 설명 페이지 스크린샷
ScreenshotLLM이 생성한 HTML 결과물이 얼마나 구조적이고 시각적으로 명확한지 보여줍니다. 난독화된 코드의 작동 원리를 'High-level summary'와 'Why it looks strange' 테이블로 구분하여 전문적인 기술 분석 보고서 형태로 렌더링된 것을 확인할 수 있습니다.

용어 해설

마크다운(Markdown)
텍스트 기반의 경량 마크업 언어로, 읽기 쉽고 쓰기 편한 형식을 제공합니다. 과거 LLM의 토큰 제한이 엄격하던 시절에는 HTML보다 토큰 효율성이 높아 표준 출력 형식으로 선호되었습니다.
토큰 효율성(Token Efficiency)
LLM이 텍스트를 처리할 때 사용하는 최소 단위인 토큰의 양을 최적화하는 정도입니다. 토큰 사용량이 적을수록 비용이 절감되고 더 긴 문맥을 한 번에 처리할 수 있는 이점이 있습니다.
아티팩트(Artifact)
AI 모델이 생성한 결과물 중 코드, 문서, 웹페이지 등 독립적으로 실행하거나 참조할 수 있는 형태의 콘텐츠입니다. Claude 인터페이스에서는 별도의 창으로 렌더링되어 사용자 경험을 개선합니다.
난독화된 코드(Obfuscated Code)
코드의 기능을 유지하면서도 사람이 읽고 이해하기 어렵게 의도적으로 복잡하게 만든 코드입니다. 주로 보안 취약점 공격 코드(PoC)나 지적 재산권 보호를 위해 사용됩니다.

기술

  • Claude Code
  • GPT-5.5
  • HTML
  • SVG
  • Python

활용 사례

  • 코드 리뷰 자동화 및 시각화
  • 보안 취약점 분석 보고서 생성
  • 복잡한 시스템 아키텍처 설명
  • 대화형 기술 튜토리얼 제작
AI 분석 전체 내용 보기

AI 요약 · 북마크 · 개인 피드 설정 — 무료

출처 · 인용 안내

원문 발행 2026. 05. 09.수집 2026. 05. 09.출처 타입 RSS

인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.