디자이너→개발자 핸드오프에
HTML 공유 활용하기

Figma 링크를 보냈는데 개발자가 "이게 실제로 어떻게 동작하는 건지 모르겠다"고 한 적이 있다면, 이 글이 그 문제의 답이다. 디자인 툴의 프로토타입은 클릭 흐름은 보여주지만 실제 브라우저 동작, CSS 트랜지션, 반응형 레이아웃 같은 것들을 재현하지 못한다. AI로 만든 HTML 프로토타입을 링크 하나로 전달하면, 개발자는 그 자리에서 브라우저에서 직접 확인한다. 말이 아닌 실물로 전달하는 핸드오프.

준비물

• AI 도구 — ChatGPT, Claude, Gemini, Cursor 중 하나. 어떤 걸 써도 무방.
• html.to (htmlto.puzl.co.kr) — 계정 불필요. 무료. 링크 생성 즉시.
• 전달할 화면의 요구사항 메모 (Figma 링크, 노션 스펙, 캡처 이미지 등 무엇이든)

단계별 가이드

1. AI에게 화면을 설명한다.
   Figma 디자인이나 스펙 문서를 기반으로 구체적으로 지시한다. 예시: 로그인 폼 화면. 이메일/비밀번호 인풋, 제출 버튼. 에러 시 인풋 테두리 빨간색. 모바일 우선 반응형.
2. 인터랙션을 포함해서 요청한다.
   정적 화면만 요청하지 말고 동작도 함께 지시한다. 예시: 버튼 hover 시 배경색 변경, 입력값 검증 후 에러 메시지 인라인 표시, 제출 성공 시 성공 상태 화면 전환. AI는 이 모두를 단일 HTML 파일 안에 JavaScript로 구현해준다.
3. 생성된 HTML 코드 전체를 복사한다.
   ChatGPT는 코드블록, Claude는 Artifacts 패널 우상단 Copy 버튼을 쓴다. Ctrl+A → Ctrl+C 로 전체 선택 복사.
4. html.to 에 붙여넣는다.
   htmlto.puzl.co.kr 접속 후 코드 에디터에 붙여넣거나, .html 파일로 저장한 뒤 드래그 앤 드롭으로 올린다.
5. 렌더링 결과를 확인한다.
   실제 브라우저에서 인터랙션이 의도대로 동작하는지 직접 테스트한다. 버튼을 눌러보고, 에러 상태를 만들어보고, 화면 너비를 줄여서 반응형도 확인한다.
6. 필요하면 비밀번호를 설정한다.
   대외비 프로젝트라면 SHARE 전에 비밀번호 보호를 켠다. AES-256 암호화. 링크를 받은 사람은 비밀번호를 알아야 열 수 있다.
7. SHARE 버튼을 눌러 링크를 복사한다.
   생성된 링크를 Slack, 이메일, 노션 코멘트 어디든 붙여넣는다. 개발자는 클릭 한 번으로 브라우저에서 프로토타입을 바로 본다. 설치도, 계정도, 파일 다운로드도 없다.

더 잘 쓰는 법

• CSS 변수로 토큰을 고정한다. AI에게 :root에 색상 변수 정의해서 써줘. --color-primary: #1a1a1a 형식으로. 라고 지시하면 개발자가 토큰 값을 바로 참조할 수 있다.
• 상태(state)별로 각각 링크를 만든다. 기본 상태, 에러 상태, 성공 상태, 빈 상태(empty state)를 별도 HTML로 각각 만들어 링크 모음으로 전달하면 개발자가 엣지 케이스를 놓치지 않는다.
• HTML 주석으로 스펙 메모를 남긴다. AI에게 각 컴포넌트 위에 HTML 주석으로 디자인 의도와 수치 설명을 달아줘. 라고 요청하면 코드 안에 스펙 문서가 함께 포함된다.
• 모바일/데스크탑 뷰를 함께 보여준다. 반응형 분기점(breakpoint)마다 어떻게 변하는지 개발자가 직접 창 크기를 조절해서 확인할 수 있어서 별도 명세 없이도 의도가 전달된다.
• 링크를 Figma 노트에 첨부한다. Figma 파일의 해당 프레임에 html.to 링크를 코멘트로 달아두면 디자인 파일과 인터랙티브 프로토타입이 항상 같은 위치에 있어서 혼선이 없다.

이런 상황에 쓸 수 있다

• 마이크로인터랙션 검토. 버튼 클릭 피드백, 스켈레톤 UI 로딩 시퀀스, 토스트 메시지 타이밍 같은 미세한 동작을 Figma로 설명하는 건 한계가 있다. AI가 만든 HTML로 실제 동작을 보여주면 "이 속도가 너무 빠른 것 같다"는 피드백이 바로 나온다.
• 클라이언트 리뷰 전 개발자 사전 공유. 클라이언트 미팅 전날 밤, 개발자에게 "이 방향으로 구현 가능한지 봐줘"라는 링크를 보낼 수 있다. 다음 날 미팅에서 개발자가 실현 가능성을 근거 있게 말할 수 있다.
• 레거시 화면 개편 스펙 전달. "기존 화면을 이렇게 바꾸자"는 개편안을 HTML 프로토타입으로 만들어 링크를 보내면, 개발자가 현재 코드와 직접 비교하면서 delta를 파악한다. "어떻게 바꾸면 되냐"는 질문이 줄어든다.

자주 묻는 것들

Q. Figma가 있는데 굳이 HTML 프로토타입을 쓸 필요가 있나요?

Figma 프로토타입은 클릭 흐름을 보여주지만 실제 CSS 인터랙션, 애니메이션, 반응형 동작은 재현하기 어렵습니다. HTML 프로토타입은 브라우저에서 그대로 동작하므로 개발자가 구현 가능성을 바로 판단할 수 있습니다. 두 도구는 대체가 아닌 보완 관계입니다.

Q. 개발자가 html.to 링크에서 코드를 볼 수 있나요?

html.to는 렌더링된 화면을 보여주는 뷰어입니다. 소스 코드를 함께 전달하려면 링크와 함께 HTML 파일을 첨부하거나, 코드를 별도 메시지로 보내면 됩니다. 링크는 '이렇게 보여야 한다'는 레퍼런스 역할을 합니다.

Q. 핸드오프 링크가 나중에 사라지면 어떻게 하나요?

html.to는 영구 저장을 지원합니다. 한 번 생성된 링크는 계속 유효하며, 민감한 프로젝트는 비밀번호(AES-256) 보호를 설정해 팀원만 접근하도록 제한할 수 있습니다.

AI 도구 + html.to 조합은 디자이너가 코드 한 줄 없이도 브라우저에서 동작하는 프로토타입을 30분 안에 개발자에게 전달하는 방법이다.