// 무료 도구 · HTML 뷰어

HTML 뷰어

.html 파일을 열거나 마크업을 붙여넣으면 이 자리에서 바로 그려 줍니다. 샌드박스 프레임 안에서 휴대폰·태블릿·데스크톱 너비로 바꿔 볼 수 있고, 나중에 말썽이 될 것들은 줄 번호와 함께 아래에 정리됩니다. 무료, 즉시, 가입 없음, 그리고 파일은 브라우저 밖으로 나가지 않습니다.

무료즉시가입 없음업로드 없음

다른 언어:EnglishDeutschEspañolFrançais日本語한국어Português (Brasil)繁體中文

html 뷰어 · 샌드박스
파일 열기

.html 파일을 이 상자 아무 곳에나 끌어다 놓거나 골라 주세요. FileReader로 이 탭 안에서만 읽고, 여기서 더 나가지 않습니다.

렌더링은 입력보다 0.3초 정도 뒤따라옵니다. 메모는 곧바로 갱신됩니다.

렌더링

스크립트는 허용하고 동일 출처 접근은 주지 않는 샌드박스 프레임입니다. 마크업은 실행되지만 이 페이지에는 손대지 못합니다. 너비를 골라 휴대폰이나 태블릿에서의 배치를 확인해 보세요.

이 마크업에 대한 메모

    발행: dk · Clize · 업데이트:

    HTML 파일을 브라우저에서 보는 방법

    세 단계이고 어느 단계에서도 업로드하지 않습니다. 렌더링과 메모 모두 이 페이지 안의 스크립트 하나라서, 네트워크를 끊어도 동작합니다.

    1. 마크업을 엽니다. .html 파일을 상자로 끌어다 놓거나, 파일 선택기를 쓰거나, 마크업을 그대로 붙여넣으세요. 파일은 브라우저의 FileReader API로 읽으므로 어디로도 전송되지 않습니다.
    2. 보고 나서, 좁혀서 다시 봅니다. 렌더링은 샌드박스 프레임에 나타납니다. 휴대폰은 360px, 태블릿은 768px로 바꿔 보세요. 같은 마크업을, 배치가 무너지기 쉬운 너비에서 확인하는 것입니다.
    3. 아래 메모를 읽습니다. 메모마다 나온 줄이 붙어 있습니다. 프레임이 닿지 못하는 참조, 안전한 페이지가 버리는 http 이미지, 좁은 미리보기를 실제보다 좋아 보이게 만드는 viewport 누락 같은 것들입니다.

    이 뷰어가 파일을 그리는 방식

    마크업은 srcdoc을 통해 곧바로 iframe으로 들어갑니다. sandbox="allow-scripts"를 주고, allow-same-origin은 일부러 주지 않습니다. 실제로는 세 가지를 뜻합니다. 스크립트가 실행되므로, 로드 시점에 스스로를 조립하는 페이지가 실제로 조립됩니다. 프레임은 자기만의 불투명한 출처에 있어서, 그 안의 어떤 코드도 이 페이지와 저장소와 쿠키를 읽지 못합니다. 그리고 공개 호스트에서 가져오는 CSS·폰트·이미지는 정상적으로 불러오므로, CDN 위에 만든 페이지는 방문자가 볼 모습 그대로 보입니다.

    의도적으로 해석되지 않는 두 부류가 있고, 그건 짐작하게 두지 않고 메모로 알려 줍니다. 원본 옆에 있는 파일 참조 — style.css, img/hero.png — 는 프레임 안에 기준이 될 폴더가 없습니다. 내 파일 시스템으로 가는 참조는 어떤 브라우저 탭에서도 불러와지지 않습니다. 그 제한은 브라우저의 것이지 저희 것이 아닙니다. 스타일이 안 먹은 것처럼 보이면 CSS를 뒤지기 전에 메모부터 읽어 보세요.

    한국어 페이지에서만 터지는 세 가지

    영어 템플릿을 그대로 쓴 한국어 페이지에서 거의 항상 나오는 문제들이고, 세 가지 모두 이 뷰어에서 눈으로 확인할 수 있습니다.

    첫째, 어절 중간에서 끊기는 줄바꿈. CSS의 기본값 word-break: normal에서 브라우저는 한글을 음절 단위로 아무 데서나 끊습니다. 그래서 「사업자등록번호」가 좁은 칸에서 「사업자등록번」/「호」로 갈라집니다. 해결은 한 줄입니다.

    body { word-break: keep-all; overflow-wrap: anywhere; }

    keep-all은 띄어쓰기, 즉 어절 단위로만 끊게 만들고, overflow-wrap: anywhere는 그 대가로 생기는 문제 — 긴 영문 URL이나 ThisIsAVeryLongClassName 같은 덩어리가 칸을 뚫고 나가는 것 — 를 막아 줍니다. 둘 중 하나만 쓰면 반대쪽이 터집니다. 중요한 점은 전체 너비에서는 어느 쪽도 보이지 않는다는 것입니다. 여백이 남아 있으니 줄을 끊을 일이 없기 때문입니다. 위 프레임을 360px로 바꾸는 순간 표 머리글과 버튼 라벨에서 바로 드러납니다.

    둘째, EUC-KR로 저장된 옛 파일. 이 뷰어는 FileReader.readAsText()로 읽고, 그 API는 바이트를 언제나 UTF-8로 해석합니다. 예전 게시판에서 받은 파일이나 오래된 편집기로 저장한 파일이 EUC-KR(CP949)이면 본문이 «»나 의미 없는 기호로 깨집니다. 같은 파일을 더블클릭하면 멀쩡한데, 그때는 브라우저가 바이트와 <meta charset>을 함께 보고 판단하기 때문입니다. 고치는 방법은 한 번이면 됩니다: iconv -f EUC-KR -t UTF-8 page.html > page-utf8.html, 그리고 <head> 첫 줄을 <meta charset="utf-8">로. 정직하게 적자면 이 도구는 실제 인코딩을 판별하지 못합니다. charset 선언이 있는지만 봅니다.

    셋째, 웹폰트 용량. 한글은 현대 완성형만 11,172자라, Pretendard나 본고딕(Noto Sans KR)을 서브셋 없이 통째로 얹으면 굵기 하나가 몇 MB입니다. Google Fonts처럼 unicode-range로 잘게 쪼개 배포하면 실제 내려받는 양은 크게 줄지만, 그건 그 CDN에 닿을 때 이야기입니다. 닿지 못하면 시스템 기본 글꼴로 떨어지고, 그 순간 자간과 줄 높이가 달라져 여러분이 맞춘 배치가 어긋납니다. 프레임 아래 «호스트» 메모가 그 의존 목록입니다. 폰트를 직접 호스팅한다면 서브셋으로 잘라 페이지와 같은 폴더에 넣어 함께 배포하는 편이 안전합니다.

    360px에서 보기

    대부분의 뷰어는 창 너비 그대로 한 칸을 보여 줍니다. 여기서는 프레임에 세 가지 너비를 줍니다. 360px는 세로로 든 휴대폰에 가깝고, 768px는 작은 태블릿, 전체는 칸이 허용하는 만큼입니다. 프레임은 진짜 브라우징 컨텍스트라서 미디어 쿼리도, 컨테이너 쿼리도, flexbox의 줄바꿈도 모니터가 아니라 여러분이 고른 너비에 반응합니다.

    메모가 알아서 짚어 주는 단서가 하나 있습니다. <meta name="viewport" content="width=device-width, initial-scale=1">이 없으면 실제 휴대폰은 애초에 360 CSS 픽셀로 그리지 않습니다. 980 언저리로 배치한 뒤 축소하기 때문에 글씨는 작아지고, 공들여 쓴 모바일 스타일은 한 번도 발동하지 않습니다. 좁은 미리보기가 정직한 것은 그 태그가 있을 때뿐이고, 그래서 프레임 아래 첫 줄에 걸립니다.

    프레임 아래 메모, 그리고 보통 뷰어에는 왜 그것이 없는지

    렌더링은 «지금 제대로 보이는가»에 답합니다. «다른 곳에서도 제대로 보일까»에는 답하지 못하는데, 놀랄 일은 대개 그쪽에 있습니다. 그래서 메모는 모두 줄 번호와 구체적인 결과 하나에 묶여 있습니다.

    • http://로 불러오는 이미지는 안전한 페이지라면 어디서든 버려집니다. 예제를 불러왔다면 지금 그 상태입니다. 위에서 로고가 빠져 있고, 메모가 그 줄을 가리킵니다.
    • 내 디스크로 가는 경로는 내 컴퓨터에서만 보입니다. 이 샌드박스 프레임에서도 보이지 않는데, 그게 다른 사람들이 겪을 일의 공정한 예고입니다.
    • <!DOCTYPE html> 누락은 브라우저를 쿼크 모드로 넣습니다. 박스 크기 계산과 상속되는 줄 높이가 2001년 이전 규칙을 따르므로, 위 화면은 원하는 무엇의 미리보기도 아니게 됩니다.
    • 문서가 아니라 모듈 — import나 export default로 시작하는 내용 — 은 아예 그릴 수 없습니다. 빈 프레임을 계속 보고 있는 것보다는 그렇다고 알려 주는 편이 낫습니다.

    보는 데서 끝내지 않고 진짜 주소로 갈 생각이라면, HTML 파일을 온라인에 올리는 페이지(영어)가 같은 검사를 돌린 뒤 폴더를 공개하는 두 개의 명령으로 이어집니다.

    // 자주 묻는 질문

    업로드하지 않고 HTML 파일을 보려면 어떻게 하나요?

    파일을 로컬에서 읽는 뷰어를 쓰면 됩니다. 이 페이지에서는 브라우저의 FileReader API로 읽고 같은 탭 안의 샌드박스 iframe에서 그리므로 내용이 서버에 닿지 않습니다. 파일을 그냥 더블클릭해 브라우저로 열어도 됩니다. 차이는, 이 페이지가 «그 파일이 내 디스크를 벗어나면 달라질 부분»까지 알려 준다는 점입니다.

    한글이 어절 중간에서 끊기는데 어떻게 고치나요?

    CSS 기본값에서 브라우저는 한글을 음절 단위로 끊기 때문입니다. body에 word-break: keep-all을 주면 띄어쓰기 단위로만 끊기고, 함께 overflow-wrap: anywhere를 주면 긴 영문 URL이 칸을 뚫고 나가는 반대쪽 문제를 막습니다. 전체 너비에서는 여백이 남아 어느 쪽도 보이지 않으니, 프레임을 360px로 바꿔서 확인하세요.

    뷰어에서 한글이 깨져 보이는 이유는 무엇인가요?

    FileReader가 바이트를 언제나 UTF-8로 해석하는데 파일이 EUC-KR(CP949)로 저장돼 있기 때문입니다. 더블클릭해서 열면 멀쩡한 이유는 그때 브라우저가 바이트와 meta charset을 함께 보고 판단하기 때문입니다. iconv -f EUC-KR -t UTF-8로 한 번 변환하고 head 첫 줄을 meta charset utf-8로 바꾸세요. 이 도구는 실제 인코딩을 판별하지 못하고 charset 선언 유무만 봅니다.

    미리보기에서 CSS나 이미지가 안 나오는 이유는 무엇인가요?

    프레임에 상대 경로를 해석할 기준 폴더가 없기 때문입니다. style.css나 img/hero.png 같은 참조는 원본 옆에 있는 파일을 가리키는데, srcdoc 프레임 안에서는 브라우저가 거기에 닿지 못합니다. https 주소에서 불러오는 스타일시트와 이미지는 정상적으로 나옵니다. 해석되지 못한 참조는 프레임 아래에 줄 번호와 함께 모두 나열됩니다.

    휴대폰에서 어떻게 보이는지 확인할 수 있나요?

    네. 프레임을 휴대폰은 360px, 태블릿은 768px로 맞추면 됩니다. 미디어 쿼리가 프레임 너비에 반응하므로 보이는 배치가 그 너비에서의 배치입니다. 한 가지 단서가 있습니다. 파일에 viewport 메타 태그가 없으면 실제 휴대폰은 360 CSS 픽셀을 쓰지 않아서, 좁은 미리보기가 실물보다 좋아 보입니다. 그런 경우는 메모가 짚어 줍니다.

    이 HTML 뷰어는 오프라인에서도 되나요?

    됩니다. 전부 이 페이지 안의 스크립트 하나이고, 자체적인 네트워크 호출이 없습니다. 페이지를 한 번 불러온 뒤에는 연결을 끊고도 계속 파일을 열 수 있습니다. 물론 스크립트나 폰트를 CDN에서 가져오는 마크업은 그것들 없이 그려집니다.

    지금 보고 있는 것을 다른 사람이 열 수 있는 페이지로 만들려면?

    폴더 안에 index.html로 저장한 뒤 그 폴더를 공개하면 됩니다. clize claim yourname으로 무료 핸들 yourname.clize.app을 받고, clize deploy ./folder --domain yourname.clize.app으로 HTTPS에 올립니다. 옮겨 갈 편집기도, 내보내기 단계도 없습니다. 미리 본 바이트가 그대로 제공되는 바이트입니다.

    clize claim + clize deploy — 이 미리보기에는 없는 링크

    이제 다른 사람이 열 수 있는 URL을 주세요.

    위 렌더링은 여러분의 탭 안에만 있습니다. 명령 두 개면 같은 파일이 메시지에 붙여 넣을 수 있는 HTTPS 주소가 됩니다. 핸들 무료, 인증서 자동, 몇 번이든 다시 배포.

    $ npm i -g @clize/clize && clize login
$ clize claim yourname
$ clize deploy ./folder --domain yourname.clize.app
    [ Sites by Clize → ]
    관련 문서 — 다 보고 난 다음