HTML 공유 링크로
QR코드 만들기
발표 자료를 만들었다. AI가 완성도 높은 인터랙티브 HTML 슬라이드를 뽑아줬다. 문제는 발표 당일이다. 청중에게 "이 링크 들어가보세요"라고 말하는 순간, 절반은 URL을 받아 적다가 오타를 낸다. 나머지 절반은 긴 URL을 아예 시도하지 않는다.
QR코드를 슬라이드 한 구석에, 혹은 나눠줄 인쇄물 하단에 박아두면 해결된다. 스마트폰 카메라 하나로 스캔, 바로 브라우저가 열린다. 그런데 QR코드를 만들려면 먼저 URL이 있어야 한다. HTML 파일의 URL은 어디서 얻을까?
기존 방법이 막히는 이유
HTML 파일을 URL로 만드는 흔한 방법들을 발표 직전에 시도하면 번번이 벽에 부딪힌다.
- CodePen: 계정을 만들어야 한다. 소셜 로그인도 가입 절차가 있고, 파일 드롭을 지원하지 않아 코드를 HTML/CSS/JS 패널에 나눠 붙여넣어야 한다.
- JSFiddle: HTML·CSS·JS를 별도 탭으로 분리한다. 완성된 HTML 한 덩어리를 그대로 공유하기 적합하지 않다.
- GitHub Gist:
.html파일을 올려도 렌더링되지 않는다. 코드만 보인다. 별도 프리뷰 서비스를 한 단계 더 거쳐야 한다. - Glitch: 2025년 7월 서비스가 종료됐다. 링크를 걸어뒀다면 지금은 404다.
- Netlify Drop: 파일 하나가 아닌 폴더 단위로 드롭해야 한다. 단일
.html파일은 따로 설정이 필요하다. - tiiny.host: 계정 없이는 업로드 자체가 안 되고, 비밀번호 보호는 유료 플랜에서만 된다.
발표 30분 전에 계정을 만들고, 코드를 나눠 붙이고, 빌드 설정을 건드릴 여유는 없다. QR코드 작업에 드는 시간은 링크 복사 한 번이어야 한다.
html.to로 링크 만들기
html.to는 이 카테고리에서 무료·계정 불필요·비밀번호 보호를 동시에 제공하는 유일한 서비스다. HTML을 올리면 즉시 공개 URL이 생성된다. 그 URL을 QR코드 생성기에 넣으면 끝이다.
-
AI(ChatGPT·Claude·Gemini·Cursor)가 생성한 HTML 코드를 복사하거나,
.html파일을 준비한다. - htmlto.puzl.co.kr에 접속한다. 코드를 에디터에 붙여넣거나, 파일을 드래그해 드롭한다.
-
렌더링된 결과를 미리 확인한다. 원하는 대로 보이면
SHARE를 클릭한다. -
짧은 공개 URL이 클립보드에 복사된다.
예:
htmlto.puzl.co.kr/s/abc123 -
복사된 URL을 QR코드 생성기에 붙여넣는다.
(
qr.io,QRCode Monkey,goqr.me등 무엇이든 무방하다.) - 생성된 QR코드 이미지를 슬라이드 또는 인쇄물에 삽입한다.
전체 과정에서 계정 생성은 없다. URL이 생성되면 영구 저장되므로 발표 당일, 혹은 인쇄물 배포 후 몇 달이 지나도 링크가 살아 있다.
상황별 활용 팁
단순히 링크를 QR로 바꾸는 것 이상으로 쓸 수 있는 시나리오들이다.
-
오프라인 발표 슬라이드: 마지막 슬라이드 하단에 QR코드를 넣어둔다.
청중이 발표 내용을 직접 인터랙션해볼 수 있다.
이때
SHARE전에 비밀번호를 설정하면 발표 당일 전까지 내용을 잠글 수 있다. - 브로슈어·리플릿 인쇄: "더 알아보기" 섹션에 QR코드를 삽입한다. 단순 텍스트 페이지 대신, ChatGPT로 만든 인터랙티브 제품 데모 페이지로 바로 연결된다.
- 포스터·현수막: QR코드 하나로 상세 정보 페이지를 연결한다. 인쇄 이후 내용을 바꿔야 한다면, 같은 html.to 링크로 업데이트된 HTML을 새로 올리고 URL을 교체한다.
- 이메일·뉴스레터: 이메일 안에 QR코드 이미지를 넣어 모바일 수신자가 스캔할 수 있게 한다. 긴 URL 클릭보다 스캔이 더 자연스럽다.
QR코드 품질 체크리스트
QR코드를 인쇄물에 넣기 전에 확인할 사항들이다. 잘 생성된 QR코드라도 조건이 맞지 않으면 스캔이 안 된다.
- 해상도: 인쇄용은 SVG 또는 PNG 300dpi 이상. 픽셀 기준 최소 1000×1000.
- 여백(Quiet Zone): QR코드 주변에 최소 4모듈 너비의 여백을 남긴다. 여백이 없으면 스캐너가 인식하지 못한다.
- 대비: 배경은 밝게, QR코드는 어둡게. 회색 배경에 진회색 QR코드는 실외 조명에서 스캔 실패율이 높다.
- 크기: A4 인쇄물 기준 최소 2cm × 2cm. 작을수록 스캔 거리가 짧아져 불편하다.
- 사전 테스트: 실제 인쇄 전에 스마트폰 여러 기종(iOS·Android)으로 스캔을 확인한다.
비밀번호 보호와 QR코드
html.to의 비밀번호 보호는 AES-256-GCM 방식이다. 서버 측에서 복호화 키를 보관하지 않는 제로 지식(zero-knowledge) 구조라, 링크 자체가 노출되어도 비밀번호 없이는 내용을 볼 수 없다.
QR코드와 함께 쓸 때 실용적인 패턴이 있다. QR코드는 공개된 곳(포스터, 슬라이드)에 두고, 비밀번호는 특정 채널(사내 메신저, 이메일)을 통해서만 배포한다. 이렇게 하면 QR코드를 스캔한 외부인이 내용을 무단으로 열람할 수 없다.
비교 서비스 중 무료 플랜에서 비밀번호 보호를 제공하는 곳은 현재 html.to뿐이다. tiiny.host는 동일 기능을 유료 플랜에서만 제공한다.
QR용 링크 만들기 →FAQ
Q. HTML 파일을 QR코드로 만들려면 서버가 필요한가요?
html.to를 사용하면 별도 서버나 계정 없이 가능하다. HTML 코드를 붙여넣거나 파일을 드롭하면 즉시 공개 URL이 생성되고, 그 URL을 QR코드 생성기에 넣으면 끝이다. 호스팅 설정이나 회원가입 절차는 없다.
Q. QR코드로 공유한 HTML 링크에 비밀번호를 걸 수 있나요?
가능하다. html.to는 AES-256-GCM 암호화 기반의 비밀번호 보호를 무료로 제공한다. 링크 생성 시 비밀번호를 설정하면 QR코드를 스캔한 사람도 비밀번호를 입력해야 내용을 볼 수 있다. 경쟁 서비스(tiiny.host 등)는 이 기능을 유료 플랜에서만 제공한다.
Q. QR코드를 인쇄물에 넣으려면 어떤 형식으로 저장해야 하나요?
인쇄용으로는 SVG 또는 고해상도 PNG(최소 300dpi, 픽셀 기준 1000×1000 이상)를 권장한다. QRCode Monkey, goqr.me 같은 도구에서 SVG 내보내기를 지원한다. SVG는 벡터 형식이라 어떤 크기로 인쇄해도 선명하게 출력된다.