Claude Artifacts 완전 활용 가이드
— 만들기→공유하기

Claude에게 "랜딩 페이지 만들어줘"라고 치면 Artifacts 패널에 완성된 HTML이 바로 뜬다. 문제는 그 다음이다. 클라이언트에게 보여주려면? 팀원에게 링크로 공유하려면? Artifacts는 Claude 안에서만 보이는 미리보기다. 밖으로 꺼내는 공식 방법이 없다. 이 가이드는 Claude Artifacts에서 HTML을 추출해 html.to로 퍼블릭 링크를 만드는 전체 과정을 단계별로 정리한다.

필요한 것

• Claude (claude.ai) — 무료 플랜 가능
• html.to (htmlto.puzl.co.kr) — 계정 불필요
• 복사/붙여넣기 능력. 그 이상은 없다.

단계별 가이드

1. Claude에서 HTML 생성. 대화창에 원하는 결과물을 설명한다. 예: 제품 소개 랜딩 페이지를 HTML로 만들어줘. 헤더, 기능 3개, CTA 버튼 포함. Claude가 Artifacts 패널에 결과를 렌더링한다.
2. 코드 보기로 전환. Artifacts 패널 오른쪽 상단에 있는 </> 아이콘을 클릭한다. 렌더링 화면 대신 원본 HTML 코드가 표시된다.
3. 전체 코드 복사. 코드 영역 안을 클릭한 뒤 Ctrl+A (Mac: Cmd+A) → Ctrl+C. 또는 패널 오른쪽 상단의 복사 아이콘을 직접 클릭한다.
4. html.to 접속. 브라우저에서 htmlto.puzl.co.kr을 연다. 로그인 화면은 없다. 메인 에디터가 바로 열린다.
5. HTML 붙여넣기. 에디터 영역을 클릭하고 Ctrl+V (Mac: Cmd+V). 오른쪽 미리보기 패널에 결과가 즉시 렌더링된다. Claude Artifacts에서 보던 화면과 동일한지 확인한다.
6. 공유 링크 생성. 화면 상단의 SHARE 버튼을 클릭한다. 짧은 링크가 자동으로 클립보드에 복사된다. 형식: htmlto.puzl.co.kr/v/xxxxxxxx
7. 링크 전달. 복사된 링크를 메신저, 이메일, Notion 어디든 붙여넣어 보낸다. 받는 사람은 클릭 한 번으로 브라우저에서 결과를 바로 본다. 앱 설치도, 파일 다운로드도 없다.

Claude 무료 플랜 사용자도 Artifacts HTML을 완전히 추출할 수 있다. Pro 기능이 필요한 단계는 없다.

Pro Tips

• 수정 후 재공유. Claude에서 "버튼 색을 검정으로 바꿔줘"라고 하면 Artifacts가 업데이트된다. 코드를 다시 복사해 html.to에 붙여넣고 SHARE를 다시 누르면 새 링크가 생성된다. 기존 링크는 이전 버전 그대로 유지되므로 버전 관리가 가능하다.
• 비밀번호 보호. SHARE 버튼 옆 자물쇠 아이콘을 클릭하면 비밀번호를 설정할 수 있다. AES-256-GCM으로 암호화되며 서버에는 비밀번호가 저장되지 않는다. 외부 공개 전 내부 검토용으로 적합하다.
• Claude에 최적화된 프롬프트. 단일 HTML 파일로 만들어줘. 외부 라이브러리 CDN은 써도 되지만 로컬 파일 참조는 하지 마. 라고 명시하면 html.to에서 깨짐 없이 렌더링된다.
• 파일 드롭도 가능. Claude에서 HTML 파일을 다운로드한 경우, html.to 에디터 영역에 .html 파일을 직접 드래그&드롭하면 코드가 자동으로 채워진다. 붙여넣기가 귀찮을 때 유용하다.
• 링크는 영구 저장. html.to는 별도 만료 기간 없이 링크를 유지한다. 프레젠테이션 전날 밤에 만들어둬도 다음 날 링크가 살아있다.

활용 시나리오

기획자 — 클라이언트 시안 공유

Claude에게 브랜드 컬러와 카피를 주고 랜딩 페이지 초안을 만든다. html.to 링크를 Slack이나 이메일에 붙여넣는다. 클라이언트는 링크를 클릭해 모바일에서도 실제 렌더링 화면을 본다. 피드백은 다시 Claude에 넣고, 수정본은 새 링크로 전달한다. 디자인 툴 없이 목업 → 검토 → 수정 사이클이 완성된다.

개발자 — 빠른 프로토타입 공유

새 UI 컴포넌트 아이디어를 Claude Artifacts로 빠르게 프로토타이핑한다. html.to 링크를 PR 코멘트나 Jira 티켓에 첨부한다. 팀원들이 실제 동작하는 컴포넌트를 브라우저에서 직접 확인한다. 로컬 서버 공유나 스크린샷 대신 클릭 가능한 결과물이 기준이 된다.

비개발자 — Notion 임베드

Claude로 인터랙티브한 계산기나 체크리스트를 HTML로 만든다. html.to에서 공유 링크를 생성한 뒤, Notion 페이지에 /embed 블록으로 삽입한다. Notion 문서 안에 동작하는 미니 앱이 들어간다.

FAQ

Q. Claude Artifacts에서 HTML을 html.to로 가져오는 가장 빠른 방법은?

Artifacts 패널 오른쪽 상단의 </> 코드 아이콘을 클릭해 전체 HTML을 선택 후 복사한다. html.to 에디터에 붙여넣으면 즉시 렌더링된다. 전체 과정 30초면 충분하다.

Q. html.to 링크는 얼마나 오래 유지되나요?

html.to는 영구 저장을 지원한다. 별도 로그인 없이 생성한 링크도 직접 삭제하지 않는 한 계속 유지된다.

Q. 비밀번호 보호 기능은 어떻게 작동하나요?

AES-256-GCM 방식으로 파일 자체를 암호화한다. 서버에는 암호문만 저장되고 비밀번호는 전송되지 않는다. 링크를 받은 사람이 비밀번호를 입력해야만 내용을 볼 수 있다.