7 min

AI 생성 HTML 공유 플랫폼의 등장
— 왜 지금인가

HTML 공유 서비스란 HTML 코드를 서버에 업로드하면 즉시 렌더링된 웹 페이지를 고유 URL로 접근할 수 있게 해주는 인프라 서비스다. 별도의 호스팅 설정, 도메인 구매, 빌드 파이프라인 없이 단일 HTML 파일을 링크 하나로 공유한다.

이 카테고리가 지금 등장한 건 우연이 아니다. AI 코드 생성 도구가 대중화되면서 비개발자를 포함한 수억 명이 HTML 파일을 손에 쥐기 시작했다. 공급은 폭발했는데 배포 인프라는 여전히 개발자 전용이었다. 그 갭에서 이 서비스 유형이 생겨났다.

배경: AI가 HTML 생산량을 어떻게 바꿨나

2023년 이전까지 HTML을 작성하는 주체는 개발자였다. 2023년 3월 GPT-4 출시 이후 상황이 달라졌다. ChatGPT에 "랜딩 페이지 만들어줘"라고 입력하면 수백 줄의 완성된 HTML이 출력된다. Claude의 Artifacts 기능은 대화 안에서 HTML을 실시간으로 렌더링한다. Gemini, Cursor, GitHub Copilot도 동일한 방향으로 수렴했다.

결과적으로 HTML 생산의 주체가 개발자에서 일반 사용자로 이동했다. 기획자가 데이터 시각화를 만들고, 마케터가 이벤트 페이지를 생성하고, 비개발자가 인터랙티브 프레젠테이션을 손에 쥔다. 이들에게 GitHub Pages 설정을 요구하는 건 프린터로 출력하려는 사람에게 PostScript를 직접 편집하라고 하는 것과 같다.

기술 원리: Blob URL이 공유가 안 되는 이유

AI 도구들이 HTML 미리보기를 제공할 때 내부적으로 Blob URL을 사용하는 경우가 많다. blob:// 스킴의 URL은 브라우저가 해당 탭의 메모리에 임시로 생성한 객체 참조다. 탭을 닫으면 즉시 소멸하고, 다른 기기나 다른 사람에게는 접근 불가능하다.

blob URL은 로컬 메모리 참조다. 네트워크를 통해 전송할 수 없고, 탭 수명이 곧 URL 수명이다.

HTML 공유 서비스는 이 문제를 서버 측 저장으로 해결한다. 업로드된 HTML은 CDN 엣지 노드에 분산 저장되고, 콘텐츠 해시 또는 랜덤 슬러그(slug)로 고유 URL이 생성된다. 이후 어떤 기기, 어떤 브라우저, 어떤 사람이든 그 URL로 동일한 렌더링 결과를 본다.

서버 사이드 렌더링(SSR)과는 구분해야 한다. SSR은 서버가 HTML을 동적으로 생성해 클라이언트에 전송하는 패턴이다. HTML 공유 서비스는 사용자가 이미 완성된 정적 HTML을 업로드하고, 서버는 그것을 저장·제공하는 역할만 한다. Next.js의 SSR과 html.to는 전혀 다른 문제를 푼다.

카테고리의 역사와 선행 서비스

HTML 코드를 즉시 실행·공유하는 도구는 개발자 커뮤니티에서 먼저 등장했다. 2009년 등장한 JSFiddle은 HTML, CSS, JavaScript를 브라우저 안에서 실행하고 URL로 공유하는 개념을 정착시켰다. 2012년의 CodePen은 이를 더 세련된 IDE 경험으로 발전시켰다.

그러나 이 도구들은 개발자 워크플로우에 최적화돼 있다. 패널 분리, 콘솔, 외부 라이브러리 관리, 포크(fork) 기능 — 기획자나 비개발자가 AI 결과물을 팀장에게 보여주려는 목적과는 거리가 있다.

2024년을 기점으로 AI 생성 HTML의 공유에만 집중한 서비스들이 나타났다. 공통적인 특징은 세 가지다: 계정 불필요, 붙여넣기 즉시 URL 생성, 모바일에서도 열리는 렌더링 결과. 개발자 도구에서 일반 사용자 도구로의 방향 전환이다.

html.to의 위치

html.to는 이 카테고리에서 다음 세 가지를 핵심으로 삼는다.

대상 사용자는 ChatGPT, Claude, Gemini, Cursor로 HTML을 생성하는 개발자와 비개발자 전부다. AI 도구가 무엇이든 출력 형식이 HTML이면 html.to로 공유할 수 있다.

공유 방법 비교

AI 생성 HTML을 공유하는 현존 방법을 정리하면 아래와 같다.

방법 설정 필요 모바일 접근 영구 URL 비밀번호 보호
html.to 없음 가능 영구 AES-256-GCM
.html 파일 첨부 없음 대부분 불가
GitHub Pages 저장소·빌드 설정 가능 영구 없음
Netlify Drop 계정 필요 가능 영구 유료
CodePen 계정 필요 가능 영구 Pro 한정
Blob URL 없음 불가 탭 종료 시 소멸

사용 흐름

  1. ChatGPT, Claude, Gemini, Cursor 등 AI 도구에서 HTML 코드를 복사한다.
  2. html.to 앱에 코드를 붙여넣거나 .html 파일을 드롭한다.
  3. 렌더링된 결과를 화면에서 확인한다.
  4. 필요하면 비밀번호를 설정한다 (선택).
  5. SHARE를 누른다. URL이 클립보드에 복사된다.
  6. 그 링크를 팀원, 클라이언트, SNS에 공유한다.

받는 사람은 앱 설치나 계정 없이 브라우저에서 바로 렌더링된 결과를 본다. 모바일에서도 동일하게 열린다.

자주 묻는 질문

Q. AI 도구마다 HTML 출력 형식이 다른데 전부 지원하나?
도구에 무관하다. ChatGPT의 코드 블록 출력, Claude Artifacts의 코드 패널, Gemini의 코드 탭, Cursor가 작성한 파일 전부 동일하게 붙여넣어 URL을 생성할 수 있다. 단일 .html 파일 형식이면 충분하다.

Q. CSS나 JavaScript가 포함된 HTML도 되나?
된다. 인라인 <style><script>는 완전히 지원한다. 외부 CDN 리소스(예: tailwindcss.com/cdn)도 인터넷 연결이 있는 환경이면 정상 로드된다. 단, 외부 서버에 요청하는 API 키가 포함된 코드는 URL 공유 전에 키를 제거하거나 비밀번호 보호를 활성화할 것을 권장한다.

Q. 비밀번호 보호가 진짜 안전한가?
AES-256-GCM 암호화는 군사 등급 대칭 암호화 표준이다. html.to의 제로-지식 구현에서 복호화 키는 URL의 #fragment 부분에만 존재한다. HTTP 스펙상 프래그먼트는 서버로 전송되지 않으므로, 서버 측 로그에 키가 기록되지 않는다. 서버가 침해되더라도 암호문만 유출된다.

Q. 무료인가?
현재 무료로 운영 중이다. 계정 없이도 모든 기능(업로드, 공유, 비밀번호 보호)을 사용할 수 있다. 가입하면 대시보드에서 업로드 이력을 관리할 수 있는 기능이 추가된다.

직접 써보기 →
← 목록으로 다음 글 →