클라이언트에게
AI 프로토타입 공유하는 법

ChatGPT에게 "랜딩 페이지 초안 만들어줘"라고 하면 수십 초 안에 HTML 한 덩어리가 나온다. Claude는 Artifacts 패널에서 인터랙티브한 대시보드를 실시간으로 그려낸다. Cursor는 프롬프트 몇 줄로 관리자 화면을 뚝딱 완성한다. 코드 한 줄 몰라도 그럴싸한 프로토타입을 손에 쥐는 시대가 됐다.

그런데 그 다음 단계에서 막힌다. 클라이언트에게 이걸 어떻게 보낸다? "결과물 좋은데요, 일단 확인해 보세요"라고 .html 파일을 첨부하면 상대방은 당황한다. 파일을 어디서 열어야 하는지 모르거나, 모바일로 받아서 아예 열지 못한다. 개발자도 아닌 기획자나 디자이너가 AI 결과물을 클라이언트에게 전달하려 할 때 생기는 이 갭 — 생각보다 많은 사람이 여기서 멈춘다.

기존 방법이 실패하는 이유

흔히 시도하는 방법들을 하나씩 짚어보면, 각각 치명적인 한계가 있다.

• CodePen: 계정을 만들어야 Pen을 저장하고 공유할 수 있다. AI가 뱉은 HTML 파일을 드롭하는 기능도 없다. 클라이언트에게 링크를 보내도 상대방도 CodePen 계정이 있어야 제대로 보이는 경우가 생긴다.
• JSFiddle: HTML, CSS, JavaScript를 각각 분리된 패널에 넣어야 한다. AI가 만든 결과물은 보통 모든 것이 하나의 .html 파일 안에 인라인으로 들어 있다. 그걸 다시 쪼개는 작업이 생긴다.
• GitHub Gist: 코드는 올라가지만 HTML을 렌더링해서 보여주지 않는다. 클라이언트에게 "이 링크에서 Raw 버튼 누르고 저장하세요"라고 설명할 수는 없다.
• Glitch: 2025년 7월 서비스가 종료됐다. 더 이상 옵션이 아니다.
• Netlify Drop: 폴더 전체를 드롭해야 한다. 파일 하나짜리 프로토타입에는 과하다. 그리고 공유 링크가 길고 외우기 어렵다.
• tiiny.host: 계정이 필요하다. 비밀번호 보호는 유료 플랜에서만 된다.

이 카테고리에서 무료 + 계정 불필요 + 비밀번호 보호를 동시에 제공하는 서비스는 현재 html.to가 유일하다.

html.to로 클라이언트에게 보내는 법

복잡한 설정 없이 다섯 단계면 끝난다.

1. AI에서 결과물을 가져온다. ChatGPT 응답에서 HTML 코드 블록을 전체 복사하거나, Claude Artifacts 패널 우측 상단의 다운로드 버튼으로 .html 파일을 내려받는다.
2. html.to를 연다. 코드를 붙여넣거나, .html 파일을 화면에 드롭한다. 브라우저 안에서 즉시 렌더링된 결과가 보인다.
3. 결과물을 확인한다. 클라이언트가 보게 될 화면을 미리 점검한다. 모바일 뷰가 어떻게 보이는지도 이 시점에서 확인하면 좋다.
4. 필요하면 비밀번호를 설정한다. 내부 검토 중인 초안이라면 SHARE 전에 비밀번호를 입력한다. AES-256-GCM 암호화로 링크를 가진 사람도 비밀번호 없이는 열 수 없다. 이 기능이 무료다.
5. SHARE를 누른다. 짧은 링크가 클립보드에 자동 복사된다. 그 링크를 이메일, 카카오톡, Slack 어디든 붙여넣어 보낸다. 받는 사람은 계정 없이 클릭 한 번으로 브라우저에서 프로토타입을 본다.

실무에서 쓸 때 알아두면 좋은 것들

링크는 영구적이다. html.to에 올린 파일은 별도로 삭제하지 않는 한 유지된다. 클라이언트가 나중에 다시 링크를 열어도 같은 결과물이 보인다. "링크가 죽었어요"라는 연락을 받을 일이 없다.

여러 버전을 관리할 때. 수정 사항이 생기면 새 파일로 새 링크를 만드는 것이 깔끔하다. v1, v2처럼 버전별 링크를 슬랙 스레드에 정리해두면 어떤 버전을 클라이언트가 보고 있는지 혼선이 줄어든다.

비밀번호는 별도 채널로 보낸다. 링크와 비밀번호를 같은 메시지에 넣으면 보호 의미가 없다. 링크는 이메일로, 비밀번호는 문자나 카카오톡으로 따로 보내는 것이 좋다.

모바일 클라이언트가 많다면. html.to 뷰어 자체가 모바일에서도 정상 동작하므로, 클라이언트가 스마트폰으로 링크를 열어도 프로토타입이 깨지지 않는다. 단, AI가 만든 HTML 자체가 모바일 대응이 안 되어 있으면 별개 문제다. 공유 전에 직접 모바일로 링크를 열어 미리 확인하는 습관을 들이는 것이 좋다.

Cursor나 Windsurf 사용자라면. AI 코딩 도구가 생성한 결과물도 동일하게 쓸 수 있다. 빌드 없이 정적 HTML 하나로 나온 결과물은 파일 드롭 한 번으로 바로 공유 가능하다.

왜 이 방식이 클라이언트 커뮤니케이션에 맞나

클라이언트는 개발 환경이 없다. 터미널도 없고, Node.js도 없고, "로컬에서 실행해보세요"라는 말을 이해할 의무도 없다. 그들이 원하는 건 "이거 어떻게 생겼어요?"에 대한 빠른 답이다.

링크 하나는 그 답을 가장 단순한 형태로 전달한다. 클릭하면 보인다. 설명할 필요가 없다. 첨부파일 열기 실패로 다시 전화 받을 일도 없다. 기획 미팅에서 "제가 지금 바로 보여드릴게요"라고 말하며 링크를 채팅창에 붙여넣을 수 있다.

AI가 만든 결과물의 품질이 높아질수록, 그것을 전달하는 방법도 그에 맞게 단순해져야 한다. html.to는 그 한 가지 문제만 푼다.

자주 묻는 질문

Q. 클라이언트가 계정 없이 링크를 볼 수 있나요?
네. 받는 사람은 아무 계정도 필요 없습니다. 링크를 클릭하면 브라우저에서 바로 결과물이 열립니다. 앱 설치나 로그인 없이 누구나 접근할 수 있습니다.

Q. 내부 검토 중인 초안을 특정 사람에게만 보이게 할 수 있나요?
파일 공유 시 비밀번호를 설정하면 됩니다. AES-256-GCM 암호화를 적용하기 때문에 링크를 가진 사람이라도 비밀번호 없이는 내용을 볼 수 없습니다. 이 기능은 무료입니다. 경쟁 서비스 대부분이 비밀번호 보호를 유료로만 제공하는 것과 다릅니다.

Q. CodePen이나 JSFiddle을 쓰면 안 되나요?
CodePen은 공유하려면 계정이 필요하고, AI가 만든 단일 HTML 파일을 드롭해서 바로 올리는 기능이 없습니다. JSFiddle은 HTML/CSS/JS를 분리 입력해야 해서, 하나의 파일로 나오는 AI 결과물과 맞지 않습니다. html.to는 파일을 드롭하거나 코드를 붙여넣기만 하면 계정 없이 즉시 공유 링크를 만들 수 있습니다.