Gemini가 만든 HTML
공유하는 법

"랜딩 페이지 초안 하나 만들어줘." Google Gemini에 한 줄 입력하면 수백 줄짜리 HTML이 나온다. 문제는 그 다음이다. 코드 블록을 복사해 팀 메신저에 붙여넣었더니 상대방이 묻는다. "이걸 어떻게 보면 돼요?"

Gemini가 만들어준 HTML은 결과물이 아니라 원자재다. 렌더링 없이는 누구도 그게 어떻게 생겼는지 모른다. 기획자도, 클라이언트도, 개발자도 아닌 당신이 중간에서 통역사가 되어야 한다. 이 불편함을 해결하는 방법을 정리했다.

왜 기존 방법이 안 통하나

Gemini HTML을 공유하려고 흔히 시도하는 방법들이 있다. 각각 어디서 막히는지 짚어보면 문제가 선명해진다.

• 파일로 저장 후 첨부. .html로 저장해 메일에 첨부한다. 받는 사람은 다운로드 후 로컬에서 열어야 한다. 모바일에서는 렌더링조차 안 되는 경우가 많다. 피드백 한 번에 왕복이 두 번이다.
• CodePen에 올리기. 계정을 만들고, HTML/CSS/JS 탭에 각각 붙여넣어야 한다. Gemini가 뱉은 단일 HTML 파일과 구조가 맞지 않아 스타일이 깨지거나 스크립트가 동작하지 않는 경우가 생긴다.
• JSFiddle 사용. HTML, CSS, JavaScript를 분리해 입력하는 구조다. AI가 생성한 일체형 HTML을 쪼개서 넣는 일 자체가 이미 작업이다.
• GitHub Gist에 올리기. HTML 코드를 저장할 수는 있지만 Gist는 HTML을 렌더링하지 않는다. Raw 파일 링크를 줘도 브라우저가 코드를 그대로 표시한다.
• Netlify Drop. 폴더를 드래그해야 한다. 단일 .html 파일을 드롭하면 디렉토리 구조가 없다며 오류가 난다. Glitch는 2025년 7월 서비스를 종료했다.

계정 만들기 싫어서 CodePen 건너뛰고, JSFiddle은 파일 구조가 안 맞아 포기하고, 결국 HTML 파일을 메일로 보냈다. 받는 사람이 파일을 못 열어서 스크린샷을 다시 찍어 보냈다.

AI가 작업 시간을 10분으로 줄여줬는데, 공유에 30분을 쓰는 상황이다.

html.to로 5초 만에 해결하기

html.to는 정확히 이 한 가지 문제를 위해 만들어진 서비스다. Gemini가 만든 HTML을 붙여넣으면 즉시 렌더링되고, 링크 하나로 공유된다. 계정 없이, 폴더 없이, 빌드 없이.

단계별 공유 방법

1. Gemini 대화창에서 생성된 HTML 코드 전체를 복사한다. (Ctrl+A → Ctrl+C)
2. htmlto.puzl.co.kr에 접속해 코드를 붙여넣거나, 저장한 .html 파일을 드래그해 올린다.
3. 우측 패널에서 렌더링된 결과를 바로 확인한다. 레이아웃이 깨진 부분이 있다면 Gemini에게 수정 요청 후 다시 붙여넣으면 된다.
4. SHARE 버튼을 누른다. 공유 링크가 클립보드에 자동으로 복사된다.
5. 그 링크를 메신저, 메일, 슬랙 어디든 붙여넣어 보낸다. 받는 사람은 클릭 한 번으로 렌더링된 화면을 본다. 파일 다운로드나 앱 설치 불필요.

알아두면 유용한 팁

Gemini가 생성한 HTML에 외부 CDN(tailwindcss, chart.js 등)을 <script> 태그로 불러오는 경우가 많다. html.to는 외부 리소스를 차단하지 않으므로 대부분 그대로 동작한다. 단, 사내망이나 보안 정책상 외부 CDN 접근이 막힌 환경에서는 상대방이 빈 화면을 볼 수 있다.

민감한 내용이 담긴 프로토타입이라면 비밀번호 보호 기능을 써라. AES-256-GCM 방식으로 암호화되고 비밀번호는 서버에 저장되지 않는다. tiiny.host 같은 경쟁 서비스는 비밀번호 보호를 유료로만 제공하지만, html.to는 무료다.

링크는 영구 저장된다. Glitch처럼 비활성 프로젝트를 삭제하거나 서비스 종료로 링크가 깨지는 일이 없다. 클라이언트에게 공유한 링크가 6개월 후에도 살아있다.

다른 AI 도구와 함께 쓰기

Gemini뿐 아니라 ChatGPT, Claude Artifacts, Cursor, v0 등 어떤 AI 도구가 뱉은 HTML이든 동일한 방식으로 공유할 수 있다. 팀 안에서 도구가 제각각이어도 공유 링크는 하나의 형식으로 통일된다. 디자이너는 Gemini, 개발자는 Cursor를 써도 피드백 채널은 같다.

결과물을 링크로 바꾸는 이 한 단계가 AI 협업 워크플로에서 예상보다 많은 마찰을 제거한다.

FAQ

Q. Gemini가 만든 HTML을 링크로 공유하는 가장 빠른 방법은?

html.to에 접속해 Gemini가 생성한 HTML 코드를 붙여넣은 뒤 SHARE 버튼을 누르면 즉시 공유 링크가 생성된다. 계정 가입이나 파일 업로드 없이 5초 안에 완료된다.

Q. Gemini HTML 공유 링크에 비밀번호를 걸 수 있나요?

가능하다. html.to는 AES-256-GCM 방식의 비밀번호 보호를 무료로 제공한다. 공유 전 비밀번호를 설정하면 링크를 받은 사람이 비밀번호를 입력해야 내용을 볼 수 있다. 비밀번호는 서버에 저장되지 않는 zero-knowledge 방식이다.

Q. CodePen이나 JSFiddle 대신 html.to를 써야 하는 이유는?

CodePen은 계정이 필수이고, JSFiddle은 HTML/CSS/JS를 분리해 입력해야 한다. GitHub Gist는 HTML을 렌더링하지 않는다. html.to는 계정 없이 HTML 파일 전체를 그대로 붙여넣거나 드롭하면 즉시 렌더링된 화면을 공유할 수 있다. 비밀번호 보호도 무료로 제공하는 유일한 서비스다.