markdown은 목수에게는 치수 기록일 뿐이다

애드리안 뉴이가 레드불 레이싱의 공기역학 스케치를 납킨에 그리는 장면을 떠올려 보자. 그 납킨은 F1 머신이 아니다. 풍동도 통과하지 못한다. 하지만 뉴이와 엔지니어들 사이에서는 그보다 완벽한 커뮤니케이션 매체가 없다. 진짜 작업은 CFD 시뮬레이션과 탄소섬유 몰드에서 일어난다. 납킨은 그 과정을 시작하는 트리거일 뿐이다.

마크다운이 처한 상황도 이와 크게 다르지 않다. 지난 10년간 우리는 마크다운에 모든 걸 맡겼다. 블로그 포스트, 기술 문서, 제품 제안서, 발표 자료, 이력서. 쓰기 편하다는 이유만으로 마크다운이 최종 산출물의 자리를 차지했고, 우리는 그 결과물이 얼마나 무미건조한지 애써 외면했다. 독자에게 보여줘야 할 모든 것이 동일한 단색 배경 위에 동일한 폰트로 흘러내리는 그 단조로움. '내용이 중요하지 디자인이 무슨 상관이냐'는 변명은 더 이상 통하지 않는 시대다. 왜냐하면 이제 디자인을 만드는 비용이 0에 수렴하기 시작했으니까.

Claude Code 팀이 내부 문서를 HTML로만 작성하기 시작했다는 소식은 충분히 의미심장하다. 그들의 논리는 단순하다. 마크다운은 작성자에게 좋은 포맷이고, HTML은 독자에게 좋은 포맷이다. CSS가 인라인된 HTML은 트윗에 스크린샷을 찍어도 디자인처럼 보이고, 위챗이나 즈후에 붙여넣어도 깨지지 않는다. 이 얘기를 접한 순간 수많은 개발자의 머릿속에 같은 생각이 떠올랐을 것이다. "맞는 말인데, HTML 그거 누가 쓰냐?"

html-anything은 정확히 그 지점에서 등장한다. 엄밀히 말하면 이 도구 자체가 HTML을 쓰는 건 아니다. 당신의 노트북에 이미 설치되어 있는 AI 코딩 에이전트에게 "대신 써줘"라고 명령을 전달하는 지휘탑이다. claude, codex, cursor-agent, gemini, copilot, opencode, qwen, aider — 로컬 PATH에 깔려 있는 9종의 CLI를 기동 시점에 자동 감지하고, 그중 하나를 골라 백엔드 엔진으로 삼는다. API 키를 새로 발급받을 필요도, 별도 구독을 추가할 필요도 없다. 이미 claude login 해둔 그 세션이 그대로 재활용된다. 추가 비용은 정확히 0원이다.

이 지점에서 이미 반은 설득된 셈이다. 대부분의 생성형 AI 도구가 API 키 발급 → 토큰 크레딧 구매 → 사용량 추적 → 월말 청구라는 피곤한 사이클을 강요하는 반면, 이미 CLI에서 쓰고 있던 에이전트를 GUI 위에서 재구동할 뿐이라는 발상은 지극히 실용적이다. 특히 Claude Code의 스트리밍 JSON 응답, Cursor의 --output-format stream-json 옵션 같은 프로토콜을 그대로 활용해 SSE(Server-Sent Events)로 실시간 렌더링을 구현한 부분은 기술적으로도 깔끔하다. 브라우저에서 ⌘+Enter를 누르면 오른쪽 iframe 안에서 HTML이 한 줄씩 타이핑되는 장면을 지켜보게 된다. 마치 누군가 실시간으로 페이지를 조립하는 모습을 지켜보는 듯한 이 경험은, "생성 완료될 때까지 기다리는" 기존 UX와는 본질적으로 다르다.

흥미로운 건 이 파이프라인에 들어가는 입력값의 스펙트럼이다. 마크다운은 기본이고, CSV, TSV, Excel, JSON, SQL 쿼리 결과물, 심지어 순수 평문 노트까지 브라우저 내에서 papaparse와 xlsx로 파싱한다. 아무것도 서버에 업로드되지 않는다. HTML Anything은 이를 "format auto-detect"라고 부르지만, 실질적으로는 "당신이 손에 쥔 모든 텍스트를 HTML이라는 보편적 표면으로 번역하는 범용 변환기"에 가깝다. 데이터 분석가가 SQL 결과를 던지면 데이터 리포트가 나오고, PM이 회의 노트를 던지면 OKR 대시보드가 나오고, 디자이너가 무드보드 설명을 던지면 3D 디바이스 목업이 나온다.

물론 변환 품질을 결정짓는 진짜 핵심은 템플릿이다. html-anything이 내세우는 75개 스킬 템플릿은 단순한 CSS 모음집이 아니라, Claude Code의 SKILL.md 규약을 따르는 정형화된 프롬프트 설계 명세다. 각 스킬은 mode, scenario, surface, design_system이라는 4개의 메타데이터 축으로 태깅되어 있고, 에이전트는 이 명세를 읽고 제약조건을 해석한 뒤 HTML을 생성한다. 스위스 인터내셔널 스타일의 16컬럼 그리드 덱, 잡지풍 편집 레이아웃의 포스터, 샤오홍슈 특유의 파스텔톤 카드, 심지어 하이퍼프레임 비디오 스토리보드까지 — 이 모든 것이 "에이전트가 이해할 수 있는 디자인 문법"으로 기술되어 있다. 결과물 하나하나가 repo에 example.html로 실물이 포함되어 있는 점도 실용적이다. 템플릿을 고르기 전에 실제 산출물을 미리 눈으로 확인할 수 있다.

이 구조의 가장 큰 함의는 분업의 재편이다. 지금까지 디자인이 수반되는 웹 콘텐츠 제작은 "내용을 쓰는 사람"과 "디자인을 입히는 사람"이 분리되어 있었다. html-anything은 이 경계선을 지운다. 마크다운을 초안으로 삼고, 75개 템플릿 중 하나를 픽하고, ⌘+Enter를 누르는 것만으로 최종 HTML이 튀어나오는 흐름에서, "디자인을 입히는 사람"의 역할은 더 이상 인간이 아니다. 그렇다고 디자이너의 실직을 말하려는 게 아니다. 오히려 디자이너가 75개 템플릿을 설계하는 사람으로 역할을 이동한다는 얘기다. SKILL.md를 작성할 수 있는 사람 — 즉 CSS, 타이포그래피, 그리드 시스템, 접근성 기준을 프롬프트 명세로 구조화할 수 있는 사람 — 이 새로운 제작 파이프라인의 원천 자산을 창출하는 셈이다.

여기서 한 가지 짚고 넘어가야 할 지점은 "제로 API 키" 전략의 양면성이다. 로컬 에이전트 CLI를 재활용하기 때문에 추가 비용이 없다는 건 사실이지만, 그 CLI 자체는 결국 Anthropic, OpenAI, Google 중 하나의 API를 호출하고 있다. 즉 marginal cost는 0원이라 해도, underlying cost는 여전히 존재한다. 다만 그 비용은 이미 당신이 기꺼이 지불하고 있는 Claude Pro 구독료나 Cursor 월정액 안에 녹아 있다. 이런 의미에서 html-anything은 "기존 AI 구독의 잉여 자원을 활용하는 프록시"라고 보는 게 정확하다. 코드 생성하라고 사둔 구독을 HTML 생성에도 우회 사용하는 셈이니, 소비자 입장에서는 합리적이다.

또 하나 눈여겨볼 부분은 중국 플랫폼에 대한 원클릭 익스포트다. 위챗에 HTML을 붙여넣을 때 CSS가 깨지는 문제는 Node.js의 juice 라이브러리로 인라인 스타일을 박아서 해결한다. 즈후의 LaTeX 수식 렌더링 문제는 MathJax 컨테이너를 data-eeimg 플레이스홀더로 변환하는 방식으로 우회한다. 샤오홍슈나 X(트위터)에 올릴 때는 modern-screenshot으로 iframe을 고해상도 PNG로 렌더링해 클립보드에 바로 넣는다. 이 모든 게 브라우저 안에서 완결된다. 백엔드도, 클라우드 렌더러도, S3 버킷도 필요 없다. 글로벌 SaaS들이 중국 내부의 파편화된 플랫폼 생태계를 외면하는 사이, 오픈소스 커뮤니티 쪽에서 이 문제를 실용적으로 해결해버린 사례다.

기술적으로 가장 인상적인 건 iframe sandbox 전략이다. 생성된 HTML은 sandbox="allow-scripts allow-same-origin" 속성을 가진 iframe 안에서 독립적으로 실행된다. Tailwind CDN이나 Google Fonts 같은 외부 리소스를 로드하는 script는 작동하지만, 쿠키나 localStorage 접근은 호스트에서 격리된다. 누군가의 AI가 생성한 임의의 HTML을 미리보기 창에 띄우는 제품에서 보안 모델을 이렇게 처리한 건 현명한 선택이다. sandbox 속성 하나로 XSS 걱정 없이 미리보기를 제공하면서도, 동시에 생성된 HTML이 실제 배포 환경에서와 동일하게 동작하는지 확인할 수 있다.

이제 우리가 맞이한 국면을 조금 더 넓게 바라볼 필요가 있다. html-anything 같은 도구가 제안하는 건 단순히 "마크다운을 HTML로 바꿔주는 편의 기능"이 아니다. "최종 산출물이 무엇이어야 하는가"라는 질문 자체를 재정의하고 있다. 그동안 콘텐츠 제작 파이프라인에서 마크다운이 종착역이었던 유일한 이유는, 인간이 HTML과 CSS를 직접 작성하는 비용이 너무 컸기 때문이다. 이제 그 비용이 AI 에이전트로 대체 가능한 수준으로 떨어졌다면, 마크다운은 원래 그래야 했던 자리 — 초안, 설계도, 납킨 스케치 — 로 돌아가야 한다.

마지막으로 한 가지. 이 모든 이야기는 html-anything이 오픈소스라는 사실 없이는 성립하지 않는다. Apache 2.0 라이선스, 로컬 설치 후 pnpm dev로 즉시 구동, 클라우드 티어 없음, 계정 생성 불필요. 여기에 담긴 메시지는 분명하다. "당신의 머신에서, 당신의 에이전트로, 당신의 통제 하에 돌아간다." 이 정도의 자유도는 상업용 SaaS가 절대 제공해주지 않는다. 당신의 PATH에 설치된 Claude Code가 당신의 HTML을 생성하고, 생성된 HTML은 당신의 브라우저에서 당신의 하드디스크에 저장된다. AI 에이전트 시대에 가장 강력한 주권은 로컬에 있다.

댓글

댓글을 읽어오는 중입니다.