프론트엔드 개발자 한 명이 Claude Code(Anthropic의 CLI 기반 코딩 에이전트)에서 Markdown 대신 HTML 출력 형식을 적용해 봤다고 한다. 100줄이 넘는 복잡한 설계 문서가 한눈에 들어오는 시각적 그리드로 변하는 결과물을 확인했다. 텍스트 기반의 소통 방식이 시각적 인터페이스로 전환되는 지점이다.

HTML 기반 출력 체계와 기술적 제원

Anthropic은 Claude Code의 출력물에 HTML, CSS, SVG(확장 가능한 벡터 그래픽), JavaScript를 전면 도입했다. 파일 시스템과 MCP(Model Context Protocol, 외부 데이터 소스를 AI에 연결하는 표준), Git 기록을 읽어 HTML 결과물로 엮어낸다. HTML 파일 생성은 Markdown보다 2~4배 더 많은 시간이 소요된다. 토큰 사용량은 증가했으나 Opus 4.7의 1MM(백만) 컨텍스트 윈도우(AI가 한 번에 처리하는 정보량) 범위 내에서 운용 가능하다.

사용자는 별도의 스킬 설정 없이 HTML 파일을 만들어달라고 요청하는 것만으로 기능을 시작한다. 모델은 표, CSS 디자인, SVG 일러스트, 스크립트 태그를 활용해 정보를 구성한다. 절대 위치 지정과 캔버스 기능을 통해 공간 데이터를 표현한다. img 태그를 사용해 외부 이미지를 직접 삽입한다.

텍스트 문서에서 인터랙티브 앱으로의 전환

예전에는 ASCII(문자로 그림을 그리는 방식) 다이어그램이나 유니코드 문자로 색상을 흉내 냈다. 이제는 SVG 일러스트와 인터랙티브 슬라이더를 통해 알고리즘 옵션을 실시간으로 조정한다. 단순 텍스트 파일은 브라우저 렌더링이 어려워 이메일이나 메시지에 첨부해야 했다. HTML은 S3(Amazon의 클라우드 객체 저장소)에 올려 링크 하나로 동료와 즉시 공유한다.

개발자가 체감하는 변화는 코드 리뷰 과정에서 극명하게 나타난다. 단순한 diff(코드의 차이점을 보여주는 형식) 보기에서 벗어나 심각도별로 색을 입힌 HTML 설명서를 PR(Pull Request, 코드 변경 사항 반영 요청)에 첨부한다. 스트리밍이나 백프레셔(데이터 처리 속도 조절) 같은 복잡한 로직에 여백 주석을 달아 가독성을 높인다. 텍스트로 설명하기 어려운 로직을 흐름도로 렌더링해 검토 시간을 단축한다.

디자인 프로토타이핑 단계에서도 HTML의 표현력이 활용된다. 온보딩 화면의 레이아웃과 톤이 다른 6가지 접근 방식을 하나의 HTML 그리드로 구성해 트레이드오프를 비교한다. 클릭 시 애니메이션이 작동하는 체크아웃 버튼을 만들고 파라미터를 조정하는 슬라이더를 배치한다. 이렇게 검증된 디자인은 이후 React나 Swift 같은 실제 구현 언어로 전환된다.

리서치와 보고서 작성 방식도 바뀐다. Slack, 코드베이스, Git 기록을 검색해 심층 리서치 파일을 HTML로 생성한다. Rate Limiter(요청 제한 장치) 코드를 분석해 토큰 버킷 흐름 다이어그램과 핵심 코드 조각을 한 페이지에 담는다. 긴 텍스트 나열 대신 탭과 링크를 통해 구조화된 문서를 탐색한다.

특정 데이터 조작을 위해 일회용 HTML 편집기를 구축하는 사례도 늘고 있다. 30개의 Linear(이슈 트래킹 도구) 티켓을 드래그 가능한 카드로 만들어 우선순위를 재정렬한다. 최종 순서를 Markdown으로 복사해 다시 Claude Code에 입력하는 루프를 만든다. 시스템 프롬프트를 조정할 때 왼쪽에는 편집기를, 오른쪽에는 실시간 렌더링 샘플을 배치해 토큰 카운트를 확인하며 수정한다.

버전 관리 측면에서는 HTML diff가 Markdown보다 시끄러워 리뷰가 어렵다는 단점이 존재한다. 하지만 표현력과 실제 읽힐 가능성이 높다는 점이 이를 상쇄한다. 회사 고유의 스타일을 적용하기 위해 디자인 시스템 HTML 파일을 먼저 만들고 이를 참고 자료로 활용하는 포석을 둔다.

AI 에이전트가 인간에게 보고하는 방식이 '문서'에서 '웹 앱'으로 진화하며 협업의 지형을 바꾼다.