HTML2WEB / 가이드

`file://` 링크를 보냈는데 왜 나만 열릴까? HTML 공유가 막히는 진짜 이유

file URL과 localhost가 다른 사람에게 열리지 않는 이유를 설명하고, 로컬 HTML을 외부에서 열리는 HTTPS 임시 링크로 바꾸는 방법을 안내합니다.

한 컴퓨터 안에 갇힌 로컬 파일과 여러 기기에서 열리는 웹 링크를 대비한 장면

file:///Users/name/Desktop/report.html이나 http://localhost:3000은 상대방 컴퓨터에서 열리지 않습니다. 둘 다 인터넷의 한 서버가 아니라 주소를 입력한 사람의 컴퓨터 안을 가리키기 때문입니다. 다른 사람이 열려면 외부에서 접근 가능한 서버가 응답하는 https:// URL이 필요합니다.

세 주소를 우편주소로 비교하면 쉽습니다

file://는 “우리 집 서랍 세 번째 칸”

내 컴퓨터에서는 정확한 위치입니다. 하지만 그 문장이 다른 사람의 컴퓨터로 가면 그 사람의 디스크에서 같은 경로를 찾습니다. 파일이 없으니 열리지 않습니다.

MDN의 URI 스킴 문서file을 호스트에 종속된 파일 이름을 나타내는 스킴으로 설명합니다. 메신저로 전달되는 것은 파일이 아니라 file://...라는 글자뿐입니다.

localhost는 “이 건물의 내 사무실”

localhost는 주소를 입력한 컴퓨터 자기 자신을 뜻합니다. 개발자의 브라우저에서 localhost:3000은 개발 서버로 연결되지만, 상대가 같은 주소를 열면 상대 컴퓨터의 3000번 포트를 찾습니다.

포트 번호를 5173이나 8080으로 바꿔도 달라지지 않습니다. 호스트가 여전히 localhost이기 때문입니다.

https://는 인터넷에서 찾을 수 있는 주소

MDN의 URL 설명에 따르면 URL의 스킴은 브라우저가 자원을 가져올 프로토콜을 정하고, 도메인은 요청할 웹 서버를 가리킵니다. 공개 HTTPS 주소는 어디에서 열어도 같은 서버에 요청합니다.

주소 실제 위치 다른 사람에게 그대로 공유
file:///.../report.html 현재 컴퓨터의 디스크 불가
http://localhost:3000 주소를 연 컴퓨터의 로컬 서버 불가
https://example.com/report 인터넷에서 접근 가능한 서버 가능

상대가 본 오류로 원인을 찾습니다

화면 또는 오류 가능한 원인
링크가 눌리지 않음 메신저가 file://를 링크로 허용하지 않음
ERR_FILE_NOT_FOUND 상대 디스크에 해당 파일이 없음
ERR_CONNECTION_REFUSED 상대 컴퓨터의 해당 포트에 서버가 없음
연결 시간 초과 사설 IP, 방화벽 또는 네트워크 격리
본문은 보이지만 이미지·폰트가 깨짐 HTML 안에 로컬 자산 경로가 남음

마지막 경우는 HTML 파일 자체는 전달됐지만 주변 파일이 따라가지 않아 생깁니다.

이미지와 CSS만 깨지는 이유

<link rel="stylesheet" href="./styles.css">
<img src="./images/chart.png" alt="분기별 변화 차트">

두 경로는 현재 HTML 파일 주변의 폴더를 기준으로 해석됩니다. 내 컴퓨터에는 파일이 있지만 HTML 하나만 게시하면 styles.csschart.png는 없습니다.

file://에서 fetch(), 웹폰트, 모듈 스크립트가 실패할 수도 있습니다. MDN의 CORS 설명은 많은 브라우저가 로컬 파일을 서로 다른 불투명 출처로 취급해 로컬 리소스 요청을 막을 수 있다고 설명합니다.

첫 검토본은 다음처럼 만드세요.

  • CSS는 <style> 안에 포함
  • 작은 JavaScript는 <script> 안에 포함
  • 단순한 그림은 인라인 SVG 사용
  • 외부 이미지는 공개된 HTTPS URL 사용
  • C:\, /Users/, ./assets 같은 로컬 경로 제거

AI 도구에는 아래 조건을 그대로 붙일 수 있습니다.

공유 가능한 완전한 단일 HTML 문서를 만들어줘.
- <!doctype html>부터 </html>까지 포함.
- CSS와 JavaScript는 문서 안에 인라인.
- 별도 파일, 외부 CDN, 웹폰트에 의존하지 말 것.
- C:\, /Users/, ./assets 같은 로컬 경로 금지.
- 360px 모바일 너비에서도 읽을 수 있게 할 것.
- API 키, 개인정보, 고객 데이터는 넣지 말 것.

로컬 HTML을 HTTPS 링크로 바꾸는 3단계

1. 단일 파일을 준비합니다

.html, .htm, .md, .markdown 중 하나를 준비하고, 로컬 자산 경로와 비밀정보를 찾습니다.

grep -nE '(src|href)="(file:|\\./|/Users/|[A-Za-z]:\\\\)' report.html
grep -nEi 'api[_-]?key|secret|token|password|bearer' report.html

정규식에 걸리지 않는 개인정보와 고객 데이터는 눈으로 확인합니다.

2. HTML2WEB에서 게시합니다

HTML-to-URL 도구에 파일을 올리거나 코드를 붙여넣습니다. 로그인 없는 무료 경로는 1MB까지 지원하고, 만료는 30분·1시간·24시간 중에서 선택합니다. 기본은 1시간입니다.

3. 시크릿 창에서 확인하고 전달합니다

생성된 HTTPS URL을 시크릿 창과 모바일 너비에서 엽니다. 모든 링크와 이미지가 정상인지 확인한 뒤 만료 시각과 함께 보냅니다.

noindex와 비밀번호가 보호하는 범위

공유 결과물의 기본 noindex는 검색엔진에 색인하지 말라는 지시입니다. 링크를 아는 사람의 접근을 막지는 않습니다.

비밀번호는 한 단계 더 접근을 제한하지만, 링크 수신자가 화면을 저장하거나 내용을 전달하는 것까지 막지는 못합니다. API 키, 토큰, 개인정보와 고객 데이터는 게시 전에 제거합니다.

같은 와이파이에 로컬 서버를 열면 되지 않나요?

python3 -m http.server와 사설 IP를 이용하면 제한된 환경에서 공유할 수는 있습니다. 하지만 방화벽, 단말 간 통신 차단, IP 변경, 암호화되지 않은 HTTP, 실행한 폴더의 노출 범위를 직접 관리해야 합니다.

옆자리에서 잠깐 개발 테스트를 할 때는 쓸 수 있지만, 고객이나 외부 동료에게 보내는 기본 방법으로 권하기는 어렵습니다. 서버를 실행했다면 작업 뒤 Ctrl+C로 종료합니다.

임시 링크와 정식 배포의 경계

시안, 버그 재현, 회의 초안, 한 장짜리 리포트는 임시 링크로 충분합니다. 두 달 뒤에도 같은 주소가 열려야 하거나 검색 노출, 사용자 입력, 커스텀 도메인과 모니터링이 필요하면 정식 배포를 선택합니다.

자주 묻는 질문

file:// 링크를 상대가 여는 방법은 정말 없나요?

상대 디스크에 같은 파일이 실제로 있고 경로도 일치해야 합니다. 일반적인 웹 공유 방법으로는 사용할 수 없습니다.

파일 자체를 첨부하면 되지 않나요?

가능하지만 모바일에서 다운로드가 필요하고, 별도 이미지와 CSS가 있으면 다시 깨질 수 있습니다. 검토만 필요하다면 링크가 더 간단합니다.

Markdown도 같은 방식으로 공유할 수 있나요?

네. HTML2WEB은 Markdown 파일과 붙여넣기도 지원합니다.

만료된 링크를 복구할 수 있나요?

원본 파일로 새 링크를 만들 수 있습니다. 같은 주소가 계속 필요하면 임시 공유 대신 정식 호스팅으로 옮겨야 합니다.

이 글의 목차