AI로 HTML 리포트 만들고
링크 하나로 전달하기
분석 결과를 정리했는데 어떻게 전달할지가 문제다. 파워포인트는 무겁고, 구글 스프레드시트 링크는 날것의 데이터 그대로다. PDF는 인터랙션이 없다. AI에게 "이 데이터로 HTML 리포트 만들어줘" 한 마디면 차트, 테이블, 요약까지 갖춘 리포트가 수십 초 안에 나온다. 문제는 그 결과물을 받는 사람에게 어떻게 보여주느냐다. 이 글은 그 한 가지 문제를 해결한다.
필요한 것
- AI 도구 하나 — ChatGPT, Claude, Gemini, Cursor 중 아무거나
html.to(htmlto.puzl.co.kr) — 계정 불필요, 무료- 공유할 데이터 (CSV, 표, 숫자가 담긴 텍스트면 무엇이든 가능)
단계별 가이드
- 데이터를 준비한다. CSV 파일이든, 스프레드시트에서 복사한 표든, 텍스트로 정리한 수치든 상관없다. AI 채팅창에 붙여넣을 수 있는 형태면 된다.
-
AI에게 HTML 리포트를 요청한다. 프롬프트 예시:
아래 데이터를 HTML 리포트로 만들어줘. Chart.js CDN을 사용해서 막대 차트를 포함하고, 핵심 수치는 카드 형태로 상단에 배치해줘. 외부 파일 없이 HTML 한 파일로 완성해줘.
핵심은 "외부 파일 없이 HTML 단일 파일"로 요청하는 것이다. 이래야 공유가 바로 된다. - 생성된 HTML 코드를 전체 복사한다. ChatGPT라면 코드 블록 우상단 Copy 버튼, Claude라면 Artifacts 패널의 코드 뷰에서 복사한다.
-
htmlto.puzl.co.kr을 연다. 회원가입이나 로그인 없이 바로 사용 가능하다. -
복사한 코드를 붙여넣거나
.html파일을 드래그한다. 렌더링 결과가 즉시 오른쪽 패널에 표시된다. 차트와 테이블이 실제로 작동하는지 여기서 확인한다. - 필요하면 비밀번호를 설정한다. 내부 데이터라면 공유 전 비밀번호를 걸어둔다. AES-256-GCM 암호화이며 서버에는 키가 저장되지 않는다.
-
SHARE버튼을 누른다. 짧은 공유 링크가 클립보드에 자동 복사된다. - 링크를 전달한다. 카카오톡, 슬랙, 이메일, 노션 어디든 붙여넣으면 된다. 받는 사람은 클릭 한 번으로 브라우저에서 리포트를 바로 본다.
Pro Tips
- 차트 라이브러리는 CDN으로.
Chart.js,Plotly.js,ApexCharts모두 CDN 방식으로 HTML 내부에 포함 가능하다. AI에게 "CDN 링크로 포함해줘"라고 명시하면 별도 파일 없이 작동한다. - 다크모드 설정은 처음부터 요청. 리포트를 야간에 보는 사람을 위해
prefers-color-scheme: darkCSS를 적용해달라고 AI에게 미리 말해두면 나중에 수정할 필요가 없다. - 수정이 필요하면 AI와 반복. 링크를 공유한 뒤 내용을 바꿔야 한다면, 수정된 HTML을 다시 html.to에 올리고 새 링크를 공유하면 된다. 버전별 링크가 각각 영구 저장된다.
- 민감 데이터는 반드시 비밀번호. 매출, 인원, 예산 등 내부 수치가 담긴 리포트는 공유 전 비밀번호를 설정한다. 링크가 유출돼도 내용은 보호된다.
- 프린트 스타일도 AI에게 요청.
@media printCSS를 포함해달라고 하면, 받는 사람이 브라우저 인쇄 기능으로 PDF 저장도 할 수 있다.
활용 시나리오
세 가지 상황별로 이 방법이 어떻게 적용되는지 정리한다.
- 주간 팀 리포트. 구글 시트에서 주요 지표를 복사 → ChatGPT에 "주간 KPI 리포트 HTML로 만들어줘" → html.to 업로드 → 슬랙에 링크 공유. 팀원은 별도 파일 없이 링크 클릭 하나로 확인.
- 클라이언트 제안 자료. 시장 조사 데이터를 AI로 시각화한 HTML 리포트에 비밀번호를 설정하고 링크를 이메일로 전달. 수신자는 PDF 첨부 없이 브라우저에서 인터랙티브하게 열람.
- A/B 테스트 결과 공유. 실험 결과 수치를 붙여넣고 "전환율 비교 차트 포함한 HTML 요약 리포트"를 요청. 생성된 링크를 프로젝트 관리 도구의 태스크에 첨부해 맥락과 결과를 한곳에 묶음.
FAQ
Q. HTML 리포트를 공유하려면 서버가 필요한가?
필요 없다. html.to가 호스팅을 대신 처리한다. HTML 코드를 붙여넣고 SHARE를 누르면 즉시 공개 링크가 나온다. 서버, 도메인, 호스팅 계정 없이 바로 공유 가능하다.
Q. AI가 만든 HTML 리포트에 차트·그래프도 들어갈 수 있나?
가능하다. Chart.js, D3.js, ApexCharts 등 CDN 기반 차트 라이브러리를 HTML 내부에 포함하도록 AI에게 요청하면 된다. html.to는 JavaScript 포함 HTML을 그대로 렌더링하므로 차트, 애니메이션, 필터 기능도 모두 작동한다.
Q. 링크를 외부에 공개하기 싫을 때는 어떻게 하나?
html.to는 파일별 비밀번호 보호 기능을 제공한다(AES-256-GCM). 공유 전 비밀번호를 설정하면 링크를 받은 사람도 비밀번호 없이는 열람할 수 없다. 비밀번호 키는 서버에 저장되지 않는다.
AI가 만든 HTML은 이미 완성된 결과물이다.지금 리포트 공유해보기 →
공유까지 30초면 충분하다.