HTML 파일에서 이미지가 안 보일 때: 경로 점검법

Qorlize 팀 작성 · 마지막 검토 2026년 11월 11일

Finipage 가이드 · HTML 파일을 코드 없이 고치는 편집기. Finipage 열기

내 컴퓨터에서는 멀쩡하던 페이지를 메일로 보내거나 서버에 올리자 사진 자리에 깨진 아이콘이 뜨고 디자인이 빠진 채 기본 글꼴의 검은 글자만 남는 경우가 있습니다. 대부분 파일은 그대로 있고, HTML이 엉뚱한 곳을 가리키고 있을 뿐입니다. HTML 파일은 이미지를 품고 있지 않습니다. 이미지가 있는 주소만 적혀 있고, 그 주소는 파일이 어디로 가든 맞아야 합니다.

절대 경로, 상대 경로, 그리고 `../`

페이지 안의 src와 href는 세 가지 중 하나입니다.

적는 방식	종류	기준
`https://cdn.example.com/logo.png`	전체 주소	그 자체로 완결
`/images/logo.png`	루트 기준	사이트 맨 위(파일로 열면 드라이브 맨 위)
`images/logo.png`	상대 경로	HTML 파일이 있는 폴더

옮겨 다녀도 안전한 것은 상대 경로입니다. index.html 옆에 images 폴더가 있으면 images/logo.png는 바탕화면에서도, 압축 파일 안에서도, 어느 서버에서도 그대로 통합니다. 둘의 위치 관계만 유지하면 됩니다.

../는 "한 단계 위 폴더"라는 뜻입니다.

site/
  index.html
  css/style.css
  images/hero.jpg
  pages/about.html

pages/about.html에서 사진을 부르려면 ../images/hero.jpg, index.html에서는 images/hero.jpg입니다. 한 파일의 <img> 태그를 다른 파일에 그대로 복사하면서 ../를 맞추지 않는 실수가 흔합니다.

CSS도 같습니다. css/style.css 안의 url()은 HTML이 아니라 CSS 파일이 있는 폴더를 기준으로 계산하므로 url(../images/hero.jpg)로 적어야 합니다.

루트 기준 경로는 내 PC에서 파일로 열 때 함정이 됩니다. /images/logo.png가 C:/images/logo.png, 즉 C 드라이브 맨 위를 가리키기 때문입니다.

내 컴퓨터에서만 되는 경로

내 PC의 파일 주소: C:\Users\kim\Desktop\새 폴더\logo.png나 file:///C:/Users/...는 그 사람 하드디스크 안을 가리킵니다. 일부 프로그램의 "다른 이름으로 저장"이 이런 주소를 넣기도 합니다. 상대 경로로 바꿔야 합니다.
대소문자: Windows와 macOS는 Logo.PNG와 logo.png를 같은 파일로 보지만, 웹 서버 대부분이 쓰는 Linux는 다르게 봅니다. 태그와 실제 파일명의 대소문자를 똑같이 맞추고, 아예 모든 파일명을 소문자로 쓰면 이 문제가 사라집니다.
띄어쓰기: my photo.jpg는 주소 안에서 원래 %20으로 적어야 합니다. 브라우저는 대개 봐주지만 일부 서버나 메일 프로그램은 그렇지 않습니다.
한글 파일명: 메인사진.jpg는 최신 브라우저에서 열리지만, 압축 프로그램이나 FTP를 거치며 이름의 인코딩이 바뀌면 못 찾습니다. 또 Mac에서 이름을 붙인 파일은 한글을 자모로 풀어 저장(NFD)하는 경우가 많은데, Windows와 HTML에 직접 친 글자는 완성형(NFC)이어서 화면에는 같은 이름인데 태그와 맞지 않게 됩니다. main-photo.jpg처럼 영문 소문자와 하이픈으로 바꾸는 편이 안전합니다.

HTML 파일만 보낸 경우

메일이나 메신저에 index.html만 첨부하고 images, css 폴더는 보낸 사람 PC에 남은 경우입니다. 받은 사람 쪽에는 그 폴더가 없으니 모든 상대 경로가 허공을 가리킵니다.

폴더째 보내야 합니다. Windows에서는 폴더를 오른쪽 클릭해 보내기 > 압축(ZIP) 폴더를 고르고, 최신 Windows 11에는 메뉴 위쪽에 압축 항목이 따로 있어 그것을 써도 됩니다. Mac에서는 오른쪽 클릭 후 압축을 고릅니다. 받는 쪽은 압축을 완전히 푼 뒤 index.html을 열어야 합니다. 압축 파일 미리보기 안에서 바로 열면 나머지 파일을 읽지 못합니다.

AI 도구가 만든 페이지는 images/team.jpg를 부르지만 그 파일이 처음부터 없기도 합니다. 이때는 이미지를 직접 넣거나 태그를 바꿔야 합니다.

개발자 도구로 깨진 경로 찾기

페이지에서 F12(또는 Ctrl+Shift+I)를 누릅니다.
Network(네트워크) 탭으로 가서 Ctrl+R로 새로 고칩니다. 실패한 요청이 빨간색으로 표시되고, 서버에서는 상태가 404, 파일로 열었을 때는 (failed)로 나옵니다.
빨간 줄을 누르면 Request URL에 브라우저가 실제로 찾아간 주소가 나옵니다. 실제 파일 위치와 비교하면 폴더 착오, 대소문자, 빠진 ../, 남아 있는 C:\Users 주소가 바로 보입니다.
Console(콘솔) 탭에도 Failed to load resource: the server responded with a status of 404나 net::ERR_FILE_NOT_FOUND가 찍힙니다.

경로와 상관없는 원인을 알려 주는 콘솔 메시지도 두 가지 있습니다. Mixed Content는 https:// 페이지가 http:// 자원을 불렀다는 뜻입니다. CSS와 스크립트는 바로 차단되고, 이미지는 최신 브라우저가 https://로 바꿔 불러 보다가 그 서버에 HTTPS가 없으면 실패합니다. 주소를 https://로 바꾸거나 파일을 내 페이지와 같은 곳에 두십시오. 글꼴에 CORS 오류가 나면 다른 도메인에 있는 글꼴 파일이 내 사이트의 사용을 허락하지 않는 것이니, 글꼴을 페이지와 같은 곳에 두거나 올바른 헤더를 보내는 글꼴 서비스를 씁니다. 자세한 방법은 HTML 페이지 글꼴 바꾸기에 있습니다.

직접 고치기, 또는 Finipage에서 고치기

직접 고친다면 VS Code 같은 편집기로 HTML을 열고 src=, href=, url(을 검색해 폴더 구조에 맞는 상대 경로로 하나씩 바꿉니다. 그 뒤로는 HTML과 폴더를 항상 함께 옮깁니다.

Finipage로 페이지를 고칠 때도 처음에는 같은 한계를 만납니다. HTML 파일만 열면 브라우저가 보안상 그 파일 하나만 넘겨주기 때문에 images/a.jpg 같은 상대 경로 이미지와 CSS가 보이지 않습니다. 상단의 폴더 연결을 누르고 HTML 파일이 든 폴더를 고르면 편집 화면에 나타납니다. 저장본의 경로는 원래대로 남습니다.

인터넷에 올릴 때도 같은 원칙입니다. HTML 파일 하나만이 아니라 폴더 전체를 호스팅 서비스에 올리고, 하위 폴더 구조도 그대로 유지하십시오. index.html만 올리면 상대 경로가 가리키는 파일이 서버에 없어서 다시 깨진 아이콘을 보게 됩니다.

올리기 전에 페이지를 다른 폴더나 다른 컴퓨터에서 열어 보십시오. 거기서 제대로 보이면 경로와 파일이 모두 갖춰진 것입니다.

다음에 볼 글

이미지가 모두 보이면 HTML 페이지를 인터넷에 올리는 법에서 올릴 곳을 고르고, 모바일에서 페이지 확인하기로 다음 단계를 점검하십시오.

내 파일로 바로 해 보려면 Finipage 편집기를 여세요. 브라우저에서 돌아가고 파일은 내 기기 밖으로 나가지 않습니다.