iOS 파일 미리보기에서 HTML이 깨져 보이는 이유

파일 미리보기가 실제로 하는 일

탭했을 때 뜨는 시스템 미리보기인 Quick Look은 HTML을 의도적으로 제한된 모드로 렌더링합니다. 충실한 재현이 아니라 안전하게 흘끗 보기 위한 기능입니다.

• 외부 스타일시트를 불러오지 않습니다. 인라인 스타일만 살아남습니다.
• JavaScript는 실행되지 않습니다. 페이지가 실행 중에 만들어 내는 것은 아예 존재하지 않습니다.
• 상대 경로로 참조된 파일(이미지, 폰트, 다른 페이지)은 연결되지 않습니다.
• 일부러 원한다 해도 페이지에 네트워크 접근을 허용할 방법이 없습니다.

증상으로 원인 찾기

• 글은 읽히는데 스타일이 전혀 없다 → 미리보기가 무시한 외부 또는 CDN 스타일시트를 쓰는 페이지입니다.
• 완전히 비어 있다 → JavaScript로 그려지는 페이지입니다(AI가 만든 앱이나 차트 페이지에서 흔합니다). 스크립트가 꺼져 있으니 보여 줄 것이 없습니다.
• 코드가 그대로 보인다 → 파일이 전달되는 과정에서 .txt가 되었거나 확장자를 잃은 경우입니다. 다시 .html로 바꾸면 정상 처리됩니다.
• 이미지가 깨진 아이콘으로 보인다 → 이미지가 HTML 파일 옆에 있는데 파일 하나만 미리보기해서 연결이 끊긴 것입니다.
• 글자가 깨진다(中文/日本語가 기호로) → GB18030이나 Shift-JIS 같은 레거시 인코딩으로 된 파일을 미리보기가 UTF-8로 읽은 것입니다.

해결책: 제대로 된 렌더러로 열기

위의 문제들은 HTML을 제대로 렌더링하는 도구로 열면 모두 사라집니다. OpenHTML(무료)은 이를 기기에서 처리합니다. 파일을 공유하거나, 가져오지 않고 파일 앱에서 한 번만 열어도 스타일이 적용되고 로컬 JavaScript가 실행된 상태로 페이지가 렌더링됩니다.

• 여러 파일로 된 페이지는 폴더나 ZIP으로 가져오면 상대 경로가 그대로 작동합니다. iPhone에서 ZIP 웹 프로젝트 열기를 참고하세요.
• 레거시 인코딩은 자동으로 감지되므로 CJK 텍스트가 올바르게 표시됩니다.
• 그래도 뭔가 이상하면 진단이 짐작하게 두지 않고 누락된 파일이나 차단된 리소스를 정확히 짚어 주며, 가능한 경우 한 번의 탭으로 해결합니다.

미리보기와 달리 OpenHTML은 페이지에 정말로 CDN이 필요할 때 문서별로 네트워크 접근을 허용할 수 있습니다. 나머지 페이지는 전부 오프라인으로 유지됩니다.

그냥 Safari를 쓰면 안 되나요?

Safari는 훌륭한 렌더러지만 로컬 파일을 리소스와 함께 넘겨줄 공식적인 방법이 없습니다. 우회법이 있긴 해도 저마다 날이 서 있습니다. 파일 하나는 공유 → Safari로 열리기도 하지만 옆에 있던 파일들을 잃어버리고, 어딘가에 올려 두는 방법은 개인 데이터를 업로드하는 일이 됩니다. 파일이라면 뷰어 앱이 재미없지만 확실한 답입니다. iPhone에서 HTML 여는 완벽 가이드에서 모든 선택지를 비교합니다.