비개발자 PM을 위한
AI 프로토타입 공유 완전 가이드

기획서는 20페이지인데 개발팀은 "그래서 화면이 어떻게 생겼어요?"라고 묻는다. 디자이너 일정은 2주 뒤. 경영진 리뷰는 내일이다. 이 상황을 타개하는 가장 빠른 방법은 AI에게 화면을 그리게 하는 것이다. ChatGPT나 Claude에 요구사항을 설명하면 수분 안에 동작하는 HTML 프로토타입이 나온다. 문제는 그 다음이다. 만들어진 결과물을 어떻게 팀과 공유하느냐가 병목이 된다. 이 가이드는 그 병목을 없애는 전체 프로세스를 다룬다.

필요한 것

• AI 도구 하나: ChatGPT, Claude, Gemini, Cursor 중 하나. 계정만 있으면 된다.
• html.to (htmlto.puzl.co.kr): 계정 불필요. 브라우저만 있으면 된다.
• 공유하고 싶은 화면 아이디어나 기획서 내용.

단계별 가이드

1. AI에게 화면을 요청한다.
   ChatGPT나 Claude를 열고, 만들고 싶은 화면을 구체적으로 설명한다. "모바일 앱 온보딩 첫 화면. 서비스명 'Puzl', 슬로건 한 줄, 시작하기 버튼. 다크 배경."처럼 텍스트로 요청하면 HTML 코드를 생성해 준다.
2. 생성된 HTML 코드를 전체 복사한다.
   ChatGPT는 코드 블록 오른쪽 위 복사 버튼을 누른다. Claude는 Artifacts 패널 오른쪽 상단의 복사 아이콘을 클릭한다. Ctrl+A → Ctrl+C로 전체 선택 후 복사해도 된다.
3. htmlto.puzl.co.kr에 접속한다.
   회원가입, 로그인 불필요. 메인 화면의 코드 입력창에 바로 붙여넣는다. .html 파일이 있다면 파일을 드래그해서 드롭해도 된다.
4. 렌더링된 결과를 확인한다.
   붙여넣는 즉시 오른쪽 패널에 실제 화면이 렌더링된다. 생각과 다른 부분이 있으면 AI로 돌아가 "버튼 색을 흰색으로 바꿔줘"처럼 수정 요청 후 코드를 다시 붙여넣는다.
5. 비밀번호 보호가 필요하면 설정한다.
   외부 클라이언트나 경쟁사에게 노출되면 안 되는 화면이라면, 공유 전 비밀번호를 설정한다. AES-256 암호화로 처리되며 비밀번호를 아는 사람만 열람할 수 있다.
6. SHARE 버튼을 누른다.
   짧은 공유 링크가 클립보드에 자동 복사된다. 링크 형태는 htmlto.puzl.co.kr/v/abc123처럼 생겼다.
7. 링크를 이해관계자에게 전달한다.
   슬랙, 이메일, 카카오톡 어디에든 붙여넣는다. 받는 사람은 링크를 클릭하면 바로 화면을 볼 수 있다. 앱 설치 불필요, 파일 다운로드 불필요, 계정 불필요.

더 잘 쓰는 법

• AI 요청 시 "HTML 하나의 파일로" 조건을 붙인다. 외부 CSS나 JS 파일 없이 단일 파일로 요청해야 html.to에서 완전히 렌더링된다. "단일 HTML 파일로, 외부 의존성 없이 만들어줘"를 프롬프트에 항상 포함한다.
• 반복 수정은 AI 채팅 내에서 한다. html.to에 업로드한 뒤 수정이 필요하면, 원래 AI 채팅창으로 돌아가 "3번 항목 위치를 왼쪽으로 바꿔줘"처럼 요청한다. 수정된 코드를 다시 붙여넣으면 새 링크가 생성된다. 이전 링크는 그대로 유지된다.
• 공유 전 모바일 뷰를 확인한다. html.to의 미리보기 패널 너비를 줄여 모바일 렌더링을 확인한다. 깨지는 부분이 있으면 AI에게 "모바일 반응형으로 수정해줘"라고 요청한다.
• 비밀번호는 링크와 별도 채널로 전달한다. 링크는 슬랙으로 보내고, 비밀번호는 문자나 이메일로 보낸다. 링크가 유출돼도 비밀번호가 없으면 내용을 볼 수 없다.
• 링크를 노션이나 컨플루언스에 임베드한다. 공유 링크를 기획서 문서에 직접 삽입하면 이해관계자가 문서를 보다가 바로 프로토타입 화면을 확인할 수 있다. 피드백 회전 속도가 빨라진다.

활용 시나리오

시나리오 1 — 경영진 보고 전날 밤

신규 기능 기획안을 경영진에게 내일 아침 보고해야 한다. 디자인 시안은 없다. Claude에게 "결제 플로우 3단계 화면, 미니멀 디자인, 단일 HTML 파일"을 요청한다. 10분 안에 나온 코드를 html.to에 붙여넣고 링크를 보고 자료에 첨부한다. 경영진은 링크를 클릭해 실제 화면처럼 생긴 프로토타입을 확인한다.

시나리오 2 — 외부 클라이언트 리뷰

대행사로 일하는 PM이 클라이언트에게 랜딩 페이지 시안을 공유해야 한다. ChatGPT로 HTML을 만들고, html.to에서 비밀번호를 설정한 뒤 링크를 전달한다. 클라이언트는 비밀번호를 입력해 시안을 확인하고 댓글 없이 구두로 피드백을 준다. 수정 후 새 링크를 만들어 다시 보낸다. 왔다 갔다 2회전으로 최종 확정.

시나리오 3 — 개발팀 스펙 전달

기획서에 텍스트로만 적힌 UI 스펙을 개발팀이 이해하지 못하고 있다. Cursor에 스펙 텍스트를 붙여넣고 HTML 컴포넌트를 생성한다. html.to로 공유하고 슬랙에 링크를 올린다. 개발자는 "아 이렇게 생긴 거구나"를 확인하고 질문이 줄어든다.

자주 묻는 질문

Q. 코딩을 전혀 모르는 PM도 AI 프로토타입을 만들 수 있나요?

가능합니다. ChatGPT나 Claude에 화면 요구사항을 텍스트로 설명하면 HTML 코드를 생성해 줍니다. 코드를 이해할 필요 없이, 생성된 코드를 html.to에 붙여넣고 SHARE 버튼만 누르면 공유 링크가 만들어집니다.

Q. html.to에 업로드한 프로토타입은 얼마나 보관되나요?

영구 저장입니다. 회원가입 없이 업로드한 파일도 직접 삭제하지 않는 한 링크가 유지됩니다. 이해관계자 리뷰 사이클이 수주 이상 걸려도 링크가 만료되지 않습니다.

Q. 외부 클라이언트에게 공유할 때 내용이 유출될 위험은 없나요?

비밀번호 보호 기능(AES-256 암호화)을 사용하면 링크를 알아도 비밀번호 없이는 내용을 볼 수 없습니다. 파일 단위로 비밀번호를 설정할 수 있으며, 서버에는 암호화된 데이터만 저장됩니다.