// 무료 도구 · HTML 파일 → 진짜 링크

HTML 파일 웹에 올리기

.html 파일을 여기에 넣으면 브라우저가 실제로 그리는 방식 그대로 보여 주고, 그 파일이 내 컴퓨터를 떠나는 순간 못 쓰게 될 항목을 옆에 줄 번호와 함께 세워 줍니다. 그다음 진짜 HTTPS 주소로 무료 배포합니다 — 명령 두 줄, 가입 없이. 그리고 이 페이지는 당신의 파일을 어디로도 보내지 않습니다.

무료즉시가입 불필요브라우저에서 실행

다른 언어:English Deutsch Español Français 日本語한국어Português (Brasil)繁體中文

index.html · 배포 전 점검

파일 열기

.html 파일을 끌어다 놓거나 하나 고르세요. FileReader로 로컬에서 읽으며, 이 탭을 떠나지 않습니다.

또는 마크업을 붙여 넣기

입력하는 동안 계속 검사합니다. 미리보기는 손을 멈추고 0.3초쯤 뒤에 다시 그립니다.

올리기 전에 처리할 것

실제로는 이렇게 보입니다

샌드박스 프레임 안에서 그립니다. 스크립트는 돌지만 이 페이지에는 손대지 못합니다. 내 폴더 안의 파일은 여기서 해석되지 않습니다 — 페이지와 함께 배포되면 해석됩니다.

발행: dk · Clize · 업데이트: 2026년 9월 5일

HTML 파일을 웹사이트로 만드는 방법

검사와 미리보기는 이 페이지에서, 배포는 터미널이나 코딩 에이전트에서 명령 두 줄로 합니다. 여기서 파일이 업로드되는 일은 없습니다 — 검사기는 당신의 브라우저 안에서 도는 스크립트입니다.

파일을 엽니다. .html 파일을 상자로 끌어다 놓거나, 파일 선택으로 고르거나, 마크업을 붙여 넣습니다. FileReader로 로컬에서 읽어 샌드박스 프레임에 그리므로, 방문자가 볼 화면을 그대로 보게 됩니다.
막는 항목을 없앱니다. 모든 지적에는 줄 번호가 붙습니다. "올리기 전 필수"는 도메인에서 HTTPS로 서빙되는 순간 다르게 동작하는 것들입니다 — 내 디스크를 가리키는 참조, http:// 하위 리소스, viewport나 title 누락. "확인 필요"는 누군가 이 페이지를 링크하기 전에 넣어 두면 좋은 것들입니다.
배포합니다. 파일을 폴더에 index.html로 넣고, clize claim으로 무료 핸들을 하나 받은 다음, 그 폴더에 clize deploy를 실행합니다. 같은 1분 안에 HTTPS 주소가 나오고, 같은 폴더는 몇 번이든 다시 배포할 수 있습니다.

내 디스크를 떠나는 순간 깨지는 것들

로컬에서 두 번 눌러 열었을 때 멀쩡하던 페이지가 올린 뒤에 무너지는 이유는 거의 항상 같습니다. 브라우저가 파일을 file://로 열 때와 도메인에서 HTTPS로 받을 때 규칙이 다르기 때문입니다. 위의 검사기가 잡는 것이 그 차이입니다.

내 컴퓨터 경로. file:///Users/… 나 C:\Users\… 로 시작하는 src는 방문자에게 존재하지 않습니다. 로컬에서는 보이고, 올리면 깨진 이미지가 됩니다.
http:// 하위 리소스. HTTPS 페이지가 http로 이미지나 스크립트를 부르면 브라우저가 혼합 콘텐츠로 막습니다. 오류 메시지는 방문자에게 안 보이고, 그냥 사라집니다.
옆 파일 참조. style.css, class.html 같은 상대 경로는 그 파일들도 같은 폴더에 함께 배포해야 맞습니다.
루트 절대 경로. /img/logo.png는 페이지가 도메인 루트에서 서빙될 때만 맞습니다.
charset 누락. 한글이 통째로 깨지는 고전적인 원인입니다. 인코딩 문제를 더 파고들려면 같은 언어 형제 페이지인 HTML 파일 열어 보기에 따로 정리해 두었습니다.

링크를 카톡에 붙였는데 미리보기가 안 나오는 이유

페이지를 올린 다음 한국에서 실제로 일어나는 일은 대개 이것입니다. 주소를 복사해서 카카오톡에 붙여 넣습니다. 그런데 이미지도 제목도 없이 파란 링크 한 줄만 뜹니다. 페이지가 잘못된 게 아니라, 미리보기 카드를 만드는 데 쓰이는 태그가 없는 것입니다.

Kakao의 개발자 문서는 이 동작을 명시하고 있습니다(2026년 9월 5일 확인). 사용자가 웹페이지 링크를 스크랩하면, Kakao는 그 페이지 HTML의 <head>에서 Open Graph 메타 태그를 추출합니다. 문서가 이름을 대고 있는 것은 다음 셋입니다.

태그	미리보기에서 쓰이는 자리	없으면
`og:title`	카드 제목 (`${SCRAP_TITLE}`)	제목 줄이 비거나 URL이 그대로 노출됩니다
`og:image`	카드 이미지 (`${SCRAP_IMAGE}`)	이미지 없는 한 줄 링크가 됩니다
`og:description`	카드 설명 (`${SCRAP_DESCRIPTION}`)	설명 줄이 비어 보입니다

문서는 og:site_name도 언급합니다. 그리고 이미지에 대해서는 「200x200 픽셀 이상」이라는 하한만 제시할 뿐, 권장 크기를 공개하지 않습니다. 이 점은 그대로 적어 두는 편이 정직합니다 — 카카오 데브톡에 800x800, 500x500, 400x400 같은 서로 다른 시도가 오래 공존하는 이유가 바로 공식 권장값이 없기 때문입니다. 저희도 여기서 「이 크기가 정답」이라고 말하지 않겠습니다. 하한을 넘기고, 잘림을 감안해 가로형으로 두고, 직접 붙여 보고 확인하는 것이 지금으로선 가장 정확한 방법입니다.

실무에서 걸리는 지점은 두 가지입니다.

og:image는 절대 URL이어야 합니다. <meta property="og:image" content="ogimage.png">처럼 상대 경로로 적으면 내 브라우저에서는 보이지만 바깥에서 가져가는 쪽은 해석하지 못합니다. https://내도메인/ogimage.png 형태로 쓰세요. 위 검사기가 잡아 주는 상대 경로·로컬 경로 항목이 정확히 이 실수입니다.
그 이미지 주소가 바깥에서 열려야 합니다. 아직 배포하지 않은 파일, 로그인이 필요한 위치, http:// 주소를 가리키면 카드가 만들어지지 않습니다.

범위는 분명히 해 두겠습니다. 저희는 카카오의 미리보기 캐시를 대신 갱신해 주지 않습니다. 이 페이지가 하는 일은, 링크를 남에게 보내기 전에 og:image·og:title·설명이 있는지, 그리고 그 경로가 바깥에서 해석되는 형태인지 알려 주는 것까지입니다.

명령 두 줄이면 파일에 링크가 생깁니다

검사에서 막는 항목이 없어졌으면, 파일을 폴더에 index.html이라는 이름으로 넣고 두 줄을 실행합니다.

$ npm i -g @clize/clize && clize login
$ clize claim yourname
$ clize deploy ./site --domain yourname.clize.app

clize claim으로 받는 핸들은 무료이고, 놓기 전까지 당신 것입니다. HTTPS 인증서는 자동으로 발급되며 따로 할 일이 없습니다. 같은 폴더는 몇 번이든 다시 배포할 수 있고, 배포할 때마다 이전 내용을 덮어씁니다.

사람이 아니라 코딩 에이전트가 이 일을 하는 경우에도 같은 두 줄입니다. 에이전트가 파일을 쓰고, 같은 명령으로 올립니다.

여기서 말하는 「무료」의 내용

무료라는 말은 자주 다른 뜻으로 쓰이니, 포함되는 것과 안 되는 것을 그대로 적습니다.

포함: yourname.clize.app 핸들 하나, HTTPS 인증서 자동 발급, 정적 파일 호스팅, 횟수 제한 없는 재배포, 광고 삽입 없음.
미포함(정적 호스팅이라서 애초에 안 되는 것): PHP·CGI·서버 사이드 스크립트, 데이터베이스, .htaccess. WordPress를 돌리려면 웹호스팅 상품이 맞습니다 — 이 페이지가 대신할 수 있는 대상이 아닙니다.
따로: 직접 소유한 도메인을 쓰는 것은 가능하며, 도메인 값은 별개입니다.

.html 한 장만 올리기

빈 폴더를 하나 만들고 파일 이름을 index.html로 바꿉니다. 이 이름이어야 주소 끝에 파일명을 붙이지 않아도 열립니다.
그 페이지가 참조하는 이미지·CSS·다른 페이지를 같은 폴더에 함께 넣습니다. 위 검사기가 목록으로 세워 줍니다.
og:image를 절대 URL로 적어 둡니다 — 배포될 주소 기준으로 쓰면 됩니다.
clize deploy를 그 폴더에 실행합니다.

페이지가 한 장뿐이어도 상관없습니다. 사이트 전체를 만들어야 링크가 생기는 것은 아닙니다.

// 자주 묻는 질문

HTML 파일을 무료로 웹에 올리려면 어떻게 하나요?

파일을 폴더에 index.html로 넣고, clize claim으로 무료 핸들을 받은 다음 그 폴더에 clize deploy를 실행하면 됩니다. 명령 두 줄이고 가입 절차가 따로 없으며, HTTPS 인증서는 자동으로 발급됩니다. 올리기 전에 이 페이지의 검사기에 파일을 넣어 보면, 내 컴퓨터를 떠나는 순간 깨질 항목을 줄 번호와 함께 알려 줍니다.

웹호스팅 상품을 계약하지 않아도 올릴 수 있나요?

정적인 페이지라면 계약하지 않아도 됩니다. 다만 정적 호스팅이라 PHP, CGI, 데이터베이스, .htaccess는 동작하지 않습니다. WordPress처럼 서버에서 도는 것이 필요하면 웹호스팅 상품이 맞는 선택이고, 이 페이지가 그것을 대신하지는 못합니다.

.html 한 장만 있어도 되나요, 사이트 전체가 필요한가요?

한 장이면 충분합니다. 파일 이름을 index.html로 두고 그 페이지가 참조하는 이미지와 CSS를 같은 폴더에 함께 넣으면 됩니다. 위 검사기가 그 참조 목록을 세워 주기 때문에 무엇을 같이 올려야 하는지 빠뜨리지 않습니다.

카카오톡에 링크를 붙였는데 미리보기 이미지가 안 나옵니다.

Kakao의 개발자 문서에 따르면 링크를 스크랩할 때 페이지 HTML의 head에서 Open Graph 메타 태그를 추출하고, og:title·og:image·og:description을 카드의 제목·이미지·설명에 매핑합니다. 셋 중 og:image가 없으면 이미지 없는 한 줄 링크가 됩니다. 두 가지를 확인하세요. 첫째, og:image를 상대 경로가 아니라 절대 URL로 적었는지. 둘째, 그 이미지 주소가 바깥에서 열리는지(아직 배포 전이거나 http:// 주소면 카드가 만들어지지 않습니다). 이미지 크기는 Kakao 문서가 200x200 픽셀 이상이라는 하한만 제시하고 권장 크기는 공개하지 않으므로, 하한을 넘겨 가로형으로 두고 직접 붙여서 확인하는 편이 정확합니다. 참고로 저희는 카카오의 미리보기 캐시를 대신 갱신해 주지 않습니다.

이 검사기에 파일을 넣으면 어딘가로 업로드되나요?

아니요. 파일은 FileReader로 당신의 브라우저 안에서 읽히고, 미리보기는 샌드박스 프레임에 그려집니다. 이 탭을 떠나지 않습니다.

올린 다음에 이미지가 사라지는 이유는 뭔가요?

거의 항상 두 가지 중 하나입니다. 첫째, src가 내 컴퓨터 경로(file:///…)를 가리키는 경우 — 방문자에게는 그 경로가 존재하지 않습니다. 둘째, 이미지를 http://로 불러오는 경우 — HTTPS 페이지에서는 브라우저가 혼합 콘텐츠로 막아 조용히 사라집니다. 위 검사기가 둘 다 줄 번호와 함께 잡아 줍니다.

무료 핸들 대신 직접 산 도메인을 쓸 수 있나요?

가능합니다. 이미 가지고 있는 도메인을 가져와 연결하거나 새로 등록할 수 있고, 도메인 비용은 별개입니다. 무료 핸들로 먼저 올려 두고 나중에 도메인을 붙여도 되며, 그때 페이지를 다시 만들 필요는 없습니다.

clize claim + clize deploy — 핸들도 HTTPS도 무료

그 파일에, 계속 쓸 수 있는 주소를.

설치 한 번, 이름 하나, 배포 한 번. 핸들은 놓기 전까지 당신 것이고, 인증서는 자동이며, 같은 폴더는 몇 번이든 다시 올릴 수 있습니다.

$ npm i -g @clize/clize && clize login
$ clize claim yourname
$ clize deploy ./site --domain yourname.clize.app

[ Clize 시작하기 → ]