프리랜서 개발자를 위한
HTML 납품·공유 가이드
ChatGPT나 Claude로 랜딩 페이지, 관리자 화면, 인터랙티브 프로토타입을 뚝딱 만들어냈다.
결과물은 훌륭하다. 그런데 이걸 클라이언트에게 어떻게 전달하느냐가 문제다.
.html 파일을 메일로 보내면 모바일에서 열리지 않는다는 답장이 돌아온다.
코드를 카카오톡에 붙여넣을 수도 없다. 호스팅을 별도로 세팅하자니 그게 더 일이다.
납품 자체보다 납품 방법을 고민하는 데 시간이 더 걸리는 상황, 이 글이 그 문제를 해결한다.
필요한 것
- AI 도구 하나 — ChatGPT, Claude, Gemini, Cursor 중 아무거나
- html.to — 계정 불필요, 무료, 브라우저에서 바로 사용
- 전달할 HTML 파일 또는 AI가 생성한 HTML 코드
단계별 납품 절차
-
AI로 HTML 생성
ChatGPT에"반응형 랜딩 페이지 HTML로 만들어줘"같은 프롬프트를 입력한다. Claude Artifacts나 Cursor에서 생성해도 동일하다. 결과 HTML 코드 전체를 복사한다. -
html.to 접속
htmlto.puzl.co.kr을 브라우저에서 연다. 회원가입 없이 바로 쓸 수 있다. -
HTML 붙여넣기 또는 파일 드롭
복사한 코드를 에디터에 붙여넣거나,.html파일을 화면에 끌어다 놓는다. 렌더링 결과가 오른쪽 패널에 즉시 표시된다. 클라이언트 화면과 동일한 결과를 미리 확인한다. -
비밀번호 보호 설정 (선택)
미완성 시안이거나 내부 검토용이면비밀번호 설정옵션을 활성화한다. 비밀번호를 입력하면 AES-256-GCM으로 암호화된 링크가 생성된다. 링크를 가진 사람도 비밀번호 없이는 내용을 볼 수 없다. -
SHARE 버튼 클릭
SHARE를 누르면 단축 링크가 클립보드에 자동 복사된다. 형식은htmlto.puzl.co.kr/v/xxxxxxxx같은 짧은 URL이다. -
링크를 클라이언트에게 전달
카카오톡, 이메일, 슬랙 — 어디든 링크를 붙여넣어 보낸다. 클라이언트는 클릭 한 번으로 브라우저에서 렌더링된 결과를 본다. 파일 다운로드도, 앱 설치도 필요 없다. -
수정 후 재업로드
피드백을 받아 AI로 수정한 뒤 동일한 과정을 반복한다. 새 링크를 다시 보내거나, 같은 링크를 업데이트할 수 있다.
Pro tips
- 시안 단계엔 비밀번호를 반드시 걸어라. 완성 전 시안이 외부에 노출되면 클라이언트의 신뢰가 떨어진다. 비밀번호는 클라이언트에게만 따로 문자로 전달하면 된다.
- 링크를 버전별로 관리해라. v1, v2, v3 각 시안을 별도 링크로 만들어두면 클라이언트와 "이전 버전이 더 좋았어요" 대화를 할 때 바로 비교해서 보여줄 수 있다.
- 모바일에서 먼저 확인하고 보내라. html.to 링크를 자신의 스마트폰으로 열어보고 레이아웃을 확인한 뒤 전달하면 클라이언트 측 "깨져 보여요" 이슈를 사전에 차단할 수 있다.
- 링크는 영구 보관된다. 납품 후 수개월이 지나도 링크는 살아있다. 클라이언트가 나중에 참고할 일이 생겨도 별도 아카이브가 필요 없다.
- 계약서에 링크를 첨부해라. 이메일 납품 내역에 링크를 포함시키면 납품 증빙이 명확해진다. "언제, 어떤 결과물을 전달했는지" URL로 남는다.
Common scenarios
시나리오 1 — 랜딩 페이지 초안 검토
클라이언트에게 "1차 시안 확인해 주세요"를 전달할 때. 비밀번호를 설정해 링크를 보내고, 비밀번호는 문자로 따로 전달한다. 클라이언트는 링크를 클릭하고 비밀번호를 입력해 결과를 본다. 피드백을 받은 뒤 수정본을 새 링크로 올리면 된다. 파일 첨부 없이 전 과정이 링크로 진행된다.
시나리오 2 — 여러 시안 동시 제시
방향을 못 정한 클라이언트에게 A안, B안 두 가지를 보여줄 때. 각 시안을 별도로 업로드해
링크 두 개를 보낸다. A안: htmlto.puzl.co.kr/v/aaa,
B안: htmlto.puzl.co.kr/v/bbb 식으로. 클라이언트는 두 링크를 번갈아 열어
비교하고 선택한다.
시나리오 3 — 비개발자 팀원에게 작업물 공유
기획자나 디자이너가 HTML 파일을 로컬에서 열 줄 모르는 상황. 회사 슬랙 채널에 링크를 붙여넣으면 누구든 클릭해서 바로 확인할 수 있다. 코드 리뷰 도구나 서버 없이, 링크 하나로 팀 전체가 동일한 결과를 본다.
FAQ
Q. html.to에 업로드한 파일은 얼마나 보관되나요?
영구 보관됩니다. 삭제 요청을 직접 하지 않는 한 파일은 지워지지 않습니다. 납품 후 클라이언트가 언제든 링크로 돌아와서 결과를 확인할 수 있습니다.
Q. 비밀번호 보호는 어떻게 작동하나요?
AES-256-GCM 암호화를 사용합니다. 비밀번호를 설정하면 해당 링크에 접근하는 사람은 반드시 비밀번호를 입력해야 콘텐츠를 볼 수 있습니다. 서버에는 암호화된 데이터만 저장되며 비밀번호 자체는 저장되지 않습니다.
Q. 회원가입 없이도 쓸 수 있나요?
네. 계정 없이 HTML 업로드, 링크 공유, 비밀번호 보호 설정까지 전부 사용 가능합니다. 가입하면 대시보드에서 업로드한 파일을 한 곳에서 관리할 수 있는 기능이 추가됩니다.
납품 방법이 복잡할수록 클라이언트의 신뢰는 낮아진다. 링크 하나로 끝내는 게 가장 전문적으로 보인다.html.to 바로 사용하기 →