내 컴퓨터에선 멀쩡한 HTML, 공유하면 이미지·CSS가 깨지는 이유

로컬에서는 정상인 HTML이 공유 뒤 깨진다면, 브라우저보다 파일 경로와 외부 리소스를 먼저 확인하세요. HTML 파일만 올렸는데 CSS·이미지·폰트가 별도 파일에 있거나, 문서가 외부 CDN과 API를 불러오도록 만들어졌다면 단일 파일 공유 링크에서 같은 결과가 나오지 않습니다.

가장 먼저 볼 세 가지 경로

다음 코드는 내 컴퓨터의 폴더 구조가 있을 때만 동작합니다.

<link rel="stylesheet" href="./styles/report.css">
<img src="./images/chart.png" alt="월별 사용량 차트">
<img src="file:///home/example-user/Desktop/logo.png" alt="회사 로고">

HTML2WEB에 index.html만 올리면 styles/report.css와 images/chart.png는 함께 전송되지 않습니다. file:/// 주소는 작성자의 컴퓨터를 가리키므로 다른 사람의 브라우저에서 열 수 없습니다. /images/chart.png처럼 슬래시로 시작하는 경로도 원래 사이트의 루트를 전제로 하기 때문에 임시 공유 주소에서는 다른 위치를 가리킵니다.

WHATWG URL 표준이 설명하는 것처럼 상대 URL은 기준 URL과 함께 해석됩니다. 기준 위치가 로컬 폴더에서 공유 URL로 바뀌면 같은 문자열도 다른 리소스를 찾습니다.

단일 HTML로 만들 때 무엇을 안에 넣어야 할까

CSS는 <style> 안으로 옮기기

외부 스타일시트 대신 필요한 스타일만 문서 안에 둡니다.

<style>
  :root { color-scheme: light dark; }
  body { margin: 0; font-family: system-ui, sans-serif; }
  img { max-width: 100%; height: auto; }
</style>

Tailwind CDN이나 별도 CSS 번들 없이도 읽을 수 있는 결과가 목표입니다. 이미 빌드된 CSS가 있다면 링크만 복사하지 말고, 필요한 결과 CSS를 <style>에 넣어야 합니다.

이미지는 데이터 URL이나 인라인 SVG로 바꾸기

작은 아이콘과 단순한 도표는 인라인 SVG가 관리하기 쉽습니다. 작은 PNG·JPEG는 data: URL로 넣을 수 있지만, base64 인코딩은 파일을 키우므로 큰 사진 여러 장에는 맞지 않습니다. 큰 이미지 묶음이나 다운로드 파일까지 유지해야 한다면 단일 파일 공유가 아니라 정식 정적 호스팅을 선택합니다.

폰트는 시스템 폰트를 우선하기

Google Fonts나 외부 웹폰트에 의존하면 네트워크 정책과 상대방 환경에 따라 모양이 달라집니다. 검토용 문서는 system-ui, sans-serif, serif, monospace처럼 브라우저가 바로 사용할 수 있는 폰트 스택부터 고릅니다.

스크립트가 보이지만 작동하지 않는 경우

HTML2WEB의 HTML 뷰어는 공유 코드를 격리된 프레임에서 실행합니다. 인라인 JavaScript는 사용할 수 있지만 외부 스크립트, fetch, iframe, 폼 전송처럼 외부 네트워크나 다른 문맥에 의존하는 동작은 제한됩니다. 이는 공유한 코드가 호스트 페이지와 섞여 실행되는 범위를 줄이기 위한 경계입니다.

따라서 다음 기능이 핵심이라면 임시 미리보기보다 애플리케이션 배포가 맞습니다.

• API에서 실시간 데이터를 받아야 한다.
• 로그인, 쿠키, 결제, 폼 제출이 필요하다.
• 여러 JavaScript 모듈과 정적 자산을 함께 제공해야 한다.
• 외부 CDN의 차트·지도·폰트가 결과의 일부다.

공유 전 2분 점검

• file://, C:\, /Users/ 같은 로컬 절대 경로가 없다.
• src="./...", href="./...", url(...)가 실제 별도 파일을 가리키지 않는다.
• CSS는 문서 안에 있고 외부 폰트 없이도 읽을 수 있다.
• 이미지가 인라인이거나, 없어도 핵심 정보를 텍스트로 이해할 수 있다.
• 외부 스크립트와 API 요청 없이 주요 상호작용이 동작한다.
• 데스크톱과 모바일 폭에서 공유 URL을 직접 열어 봤다.

고친 파일은 HTML을 URL로 변환하는 도구에 다시 올리고, 원래 브라우저가 아닌 시크릿 창과 휴대폰에서도 확인하세요. 여전히 여러 파일과 외부 서비스가 필요하다면 임시 공유와 정식 배포의 차이 를 기준으로 Git 기반 호스팅으로 옮기는 편이 안전합니다.