Claude Code 사용법: HTML의 놀라운 효용

Claude Code 팀은 에이전트가 인간과 소통할 때 Markdown보다 HTML을 더 선호하기 시작했다. 긴 문서에서는 Markdown의 가독성이 떨어지고, 색상·도식·상호작용 같은 표현력이 부족해 실제로 읽고 공유하기 좋은 산출물을 만들기 어렵다는 판단이다.

HTML은 정보 밀도가 높다. 표, CSS 기반 디자인, SVG, 스크립트가 들어간 코드 조각, 버튼과 슬라이더 같은 상호작용 요소, 절대 배치나 캔버스를 활용한 공간 표현까지 담을 수 있어, Claude가 읽은 정보를 훨씬 풍부하게 시각화할 수 있다.

읽기와 공유 측면에서도 장점이 뚜렷하다. 100줄이 넘는 Markdown 문서는 끝까지 읽히기 어렵지만, HTML은 탭 구조와 링크, 반응형 레이아웃으로 탐색하기 쉽고 브라우저에서 바로 열어 링크로 공유할 수 있다. Claude Code의 강점인 파일 시스템, MCP, Slack, Linear, 브라우저, git 히스토리 같은 데이터 수집 능력과 결합하면, 조사 결과나 설계안, PR 설명을 문서 형태로 정리하는 데 특히 유리하다.

활용 사례는 다음과 같다.

• 기획·탐색: 여러 설계안을 한 화면에 비교하고, mockup과 코드 스니펫을 포함한 구현 계획을 만든다.
• 코드 리뷰·이해: diff, 주석, 플로차트, 모듈 설명을 시각화해 PR을 설명하거나 검토한다.
• 디자인·프로토타입: 슬라이더, 버튼, 애니메이션을 넣어 인터랙티브한 디자인 실험을 한다.
• 리포트·학습: 코드, Slack, 인터넷 자료를 합쳐 읽기 쉬운 리서치 보고서나 인시던트 리포트를 만든다.
• 커스텀 편집기: 티켓 정리, feature flag 편집, 프롬프트 튜닝처럼 단발성 작업용 UI를 만들고 결과를 다시 JSON이나 prompt로 복사한다.

핵심은 HTML이 Markdown을 완전히 대체한다기보다, Claude가 더 큰 작업을 더 잘 설명하고 더 쉽게 검토되게 만드는 출력 형식이라는 점이다. 필요한 경우 “make an HTML file” 또는 “make an HTML artifact”라고만 요청해도 바로 시작할 수 있으며, 장기적으로는 반복 패턴을 위한 skill로 확장할 수 있다고 제안한다.