웹페이지에 이미지를 넣을 때 절대 경로와 상대 경로의 차이점
웹페이지에 이미지를 넣을 때 경로 설정이 중요한 이유
나만의 웹사이트를 만들거나 블로그를 운영하다 보면 이미지를 넣는 작업은 피할 수 없습니다. 글만 있는 페이지보다 알맞은 이미지가 함께 있는 페이지가 내용을 이해하기에도 더 편합니다.
하지만 막상 HTML 코드를 작성해서 이미지를 화면에 띄우려고 할 때 깨진 이미지 아이콘이 뜨는 경우가 있습니다. 이미지가 나타나지 않는 흔한 원인 가운데 하나가 잘못된 경로 설정입니다.
웹페이지에서 이미지를 불러올 때는 이미지가 어디에 저장되어 있는지를 브라우저에게 정확히 알려 주어야 합니다. 이 주소를 지정하는 방식이 바로 절대 경로와 상대 경로입니다.
이 두 가지 개념을 정확히 이해하고 상황에 맞게 활용하면 웹사이트를 관리하기가 훨씬 수월해지고 오류도 크게 줄일 수 있습니다. 초보자일수록 이 개념이 낯설게 느껴질 수 있지만, 실생활의 주소 체계와 비교해 보면 어렵지 않게 이해할 수 있습니다.
절대 경로는 전체 주소를 모두 적어 주는 방식입니다
절대 경로는 웹상의 완전한 주소를 이용해 이미지를 찾아가는 방식입니다. 마치 우리가 편지를 보낼 때 나라부터 시작해서 시, 구, 동, 상세 주소와 우편번호까지 빠짐없이 적는 것과 비슷합니다.
인터넷 공간에서는 이 상세 주소가 바로 URL이 됩니다. 예를 들어 어떤 이미지가 특정 웹사이트의 서버에 저장되어 있다면 그 이미지의 고유한 웹 주소 전체를 코드에 입력하는 방식입니다.
이 방식의 가장 큰 장점은 명확함에 있습니다. 주소가 변하지 않는 한, 전 세계 어디서 웹페이지를 열어 보든 정확하게 같은 이미지를 불러올 수 있습니다. 외부 서비스가 제공하는 이미지 주소를 연결할 때도 절대 경로를 사용합니다. 다만 다른 사람의 이미지를 내 페이지에 그대로 연결해 쓰려면 먼저 사용 허락이나 이미지 라이선스를 확인해야 합니다. 허락 없이 가져다 쓰면 저작권 문제가 생길 수 있고, 원래 사이트에서 이미지를 지우거나 막으면 내 페이지의 이미지도 깨집니다.
하지만 내가 직접 관리하는 웹사이트의 파일을 이동시키거나 도메인 주소가 바뀌는 상황이 발생하면 모든 절대 경로를 일일이 수정해야 하는 번거로움이 생길 수 있습니다.
절대 경로를 사용할 때 기억해야 할 점은 다음과 같습니다.
- https://로 시작하는 전체 주소를 입력해야 합니다
- 외부 서비스의 이미지 주소를 연결할 때 주로 활용됩니다
- 웹사이트 주소가 변경되면 연결이 끊어질 수 있습니다
- 내부 파일 구조가 바뀌어도 주소만 유지되면 이미지는 정상적으로 보입니다
상대 경로는 현재 내 위치를 기준으로 찾아가는 방식입니다
상대 경로는 지금 내가 보고 있는 웹페이지 파일이 위치한 폴더를 기준으로 상대적인 위치를 지정하여 이미지를 불러오는 방식입니다.
친구에게 우리 집을 설명할 때 “우체국 앞 골목으로 들어와서 두 번째 골목의 세 번째 집”이라고 알려 주는 것과 같습니다. 내 컴퓨터나 서버 안에 직접 저장해 둔 이미지 파일을 불러올 때 자주 쓰는 방식입니다.
상대 경로는 현재 파일의 위치를 기준으로 움직이기 때문에 몇 가지 기호를 사용합니다. 마침표 하나와 슬래시(./)는 현재 폴더를, 점 두 개와 슬래시(../)는 바로 위의 상위 폴더를 뜻합니다. 이 규칙을 익혀 두면 폴더 구조가 복잡해도 원하는 이미지를 찾아갈 수 있습니다.
상대 경로를 사용할 때 알아두어야 할 기호와 의미는 다음과 같습니다.
- 기준은 항상 지금 열려 있는 HTML 파일이 들어 있는 폴더입니다
- 현재 폴더에 있는 파일은 이름만 바로 적거나 앞에 ./를 붙여 표현합니다
- 점 두 개와 슬래시는 바로 위 부모 폴더로 한 단계 이동합니다
- 하위 폴더에 있는 파일은 폴더 이름 뒤에 슬래시를 붙여서 접근합니다
두 방식의 차이점을 실생활의 예시로 이해하기
절대 경로와 상대 경로의 차이를 가장 쉽게 이해하는 방법은 친구에게 길을 알려 주는 상황을 상상해 보는 것입니다. 절대 경로는 “서울시 ○○구 ○○로 123번지 5층”처럼 어디서든 통하는 정확한 주소를 알려 주는 것입니다. 반면에 상대 경로는 “지금 네가 서 있는 편의점 앞에서 오른쪽으로 돌아서 두 번째 골목 안이야”라고 알려 주는 방식입니다.
만약 친구가 편의점 앞에 있다면 상대 경로가 훨씬 쉽고 빠르게 이해될 것입니다. 하지만 친구가 부산에 있는데 서울의 골목길 위치만 알려주면 찾아오기 힘들 것입니다.
이처럼 웹 개발을 할 때도 내 컴퓨터나 같은 서버 안에 있는 파일들을 다룰 때는 상대 경로가 훨씬 편리합니다. 폴더 통째로 다른 서버로 옮기더라도 내부 파일들의 상대적인 위치만 유지된다면 이미지는 깨지지 않고 그대로 잘 나오기 때문입니다.
HTML 코드로 보는 절대 경로와 상대 경로
이제 실제 HTML 코드로 비교해 보겠습니다. 이미지는 img 태그의 src 속성에 경로를 적어서 불러오고, alt 속성에는 이미지를 설명하는 글을 적습니다. alt는 이미지가 보이지 않을 때 대신 보이는 글이며, 화면 읽기 프로그램이 읽어 주는 내용이기도 합니다. 아래와 같은 폴더 구조라고 가정하고 살펴보겠습니다.
my-site/
├── index.html
├── about/
│ └── team.html
└── images/
└── logo.pngindex.html 파일에서 이미지를 불러오는 코드는 이렇게 쓸 수 있습니다. 절대 경로는 주소 전체를 적고, 상대 경로는 index.html이 들어 있는 폴더를 기준으로 images 폴더 안의 파일을 찾아갑니다. 아래의 example.com은 예시로 쓰는 가상의 주소입니다.
<!-- 절대 경로: 전체 주소를 적습니다 -->
<img src="https://example.com/images/logo.png" alt="사이트 로고">
<!-- 상대 경로: index.html이 있는 폴더 기준입니다 -->
<img src="images/logo.png" alt="사이트 로고">about 폴더 안의 team.html에서 같은 이미지를 불러올 때는 한 단계 위 폴더로 올라가야 하므로 ../를 붙입니다. 또 슬래시(/)로 시작하는 경로는 현재 파일의 위치가 아니라 사이트의 맨 위, 즉 루트를 기준으로 찾아갑니다. 이를 루트 기준 경로라고 부르며, 파일이 어느 폴더에 있든 같은 주소로 쓸 수 있습니다.
<!-- team.html에서: 한 단계 위 폴더로 올라간 뒤 images 폴더로 들어갑니다 -->
<img src="../images/logo.png" alt="사이트 로고">
<!-- 루트 기준 경로: 어느 파일에서든 사이트 맨 위부터 찾아갑니다 -->
<img src="/images/logo.png" alt="사이트 로고">루트 기준 경로는 웹 서버를 통해 페이지를 열 때 동작합니다. 내 컴퓨터에 저장한 HTML 파일을 더블클릭해서 열면 슬래시가 컴퓨터의 맨 위 폴더를 가리켜서 이미지를 찾지 못할 수 있으니, 이럴 때는 상대 경로를 사용하세요.
상황에 따라 알맞은 경로 고르기
모든 상황에 맞는 하나의 정답은 없고, 웹페이지를 만드는 목적과 파일 관리 방식에 따라 알맞은 방식을 골라야 합니다. 외부 서비스가 제공하는 이미지 주소를 연결할 때는 절대 경로를 사용합니다.
반면에 내가 직접 찍은 사진처럼 내 서버나 컴퓨터 폴더에 저장해 두는 이미지는 상대 경로로 불러오는 편이 관리하기 쉽습니다. 사이트를 통째로 다른 곳으로 옮겨도 경로를 고칠 필요가 적기 때문입니다.
웹사이트를 대규모로 고치거나 도메인을 옮길 계획이 있다면 상대 경로나 루트 기준 경로를 쓰는 편이 유지 보수에 유리합니다.
주소 전체를 직접 적어 둔 곳이 많을수록 나중에 주소가 바뀔 때 고쳐야 할 범위가 넓어지기 때문입니다. 반대로 서로 다른 여러 사이트에서 같은 로고 이미지를 함께 쓴다면, 한 곳에 올려 두고 절대 경로로 연결하는 방법도 있습니다.
이미지 경로를 작성할 때 자주 저지르는 실수들
웹페이지를 만들 때 초보자가 자주 겪는 어려움 중 하나는 파일 이름이나 경로에 들어간 오타입니다. 서버에 따라 파일 이름의 대소문자를 구분하기 때문에, 이를 놓쳐서 이미지가 나오지 않는 경우가 있습니다.
윈도우나 맥 같은 환경에서는 보통 파일 이름의 대소문자를 구별하지 않고 열어 주지만, 리눅스 서버에서는 구별합니다. 예를 들어 Logo.png와 logo.png는 서버에서 서로 다른 파일로 취급되므로, 내 컴퓨터에서는 보이던 이미지가 서버에 올리면 나오지 않을 수 있습니다.
또한 공백이나 특수문자가 들어간 파일 이름은 피하는 것이 좋습니다. 주소에서 공백은 %20 같은 다른 문자로 바뀌어 처리되기 때문에, 경로를 직접 적을 때 실수하기 쉽습니다. 파일 이름은 가급적 영문 소문자와 숫자, 하이픈(-)이나 언더바(_)를 조합해 간결하게 짓는 것이 좋습니다.
오류를 예방하기 위한 실용적인 조언들은 다음과 같습니다.
- 파일 이름의 대소문자를 항상 정확하게 일치시켜서 작성합니다
- 띄어쓰기 대신 하이픈이나 언더바를 사용하여 파일 이름을 만듭니다
- 경로 중간에 빠진 슬래시나 오타가 없는지 개발자 도구를 통해 확인합니다
- 이미지 파일의 확장자가 실제 파일 형식과 일치하는지 점검합니다
파일 구조를 깔끔하게 유지하는 관리 방법
웹사이트의 규모가 커질수록 이미지가 저장되는 폴더와 HTML 파일이 저장되는 폴더를 나누어 두는 것이 좋습니다. 모든 파일을 하나의 폴더에 넣으면 나중에 상대 경로를 작성할 때 헷갈리고 관리하기도 어려워집니다. 보통은 이미지를 모아 두는 전용 폴더를 만들고, 그 안에서 성격에 따라 하위 폴더를 나누어 정리합니다.
예를 들어 아이콘은 images/icons 폴더에, 본문에 들어가는 사진은 images/photos 폴더에 나누어 두면 경로만 보고도 어떤 파일인지 짐작할 수 있습니다. 이때 폴더 이름도 파일 이름처럼 영문 소문자로 짓는 것이 좋습니다.
폴더 구조가 단순하고 명확할수록 상위 폴더로 올라가는 ../나 하위 폴더로 내려가는 슬래시를 쓸 때 실수가 줄어들고, 나중에 파일을 찾거나 고치기도 쉬워집니다.
직접 실험해 보기
개념만 읽으면 헷갈리기 쉬워서, 맥에서 연습용 폴더를 만들어 직접 확인해 봤습니다. path-test 폴더 안에 images 폴더를 만들고 그 안에 cat.png 파일을 넣은 뒤, 같은 폴더에 index.html 파일을 만들었습니다. 그리고 이미지를 불러오는 코드를 두 가지로 써 봤습니다.
<img src="images/cat.png" width="300" alt="올바른 경로로 불러온 이미지">
<img src="image/cat.png" width="300" alt="경로가 틀려서 불러오지 못한 이미지">첫 번째 코드는 index.html이 있는 폴더를 기준으로 images 폴더 안의 cat.png를 찾기 때문에 이미지가 정상으로 나왔습니다. 두 번째 코드는 폴더 이름을 image로 잘못 써서 파일을 찾지 못했고, 이미지 대신 깨진 이미지 아이콘과 alt에 적어 둔 글자가 나왔습니다.
이처럼 경로가 한 글자만 달라도 이미지가 나오지 않았습니다. 이미지가 깨질 때는 폴더 이름과 파일 이름의 철자를 가장 먼저 확인해 보세요.
자주 묻는 질문을 통해 궁금증 해소하기
이미지 경로와 관련해서 자주 나오는 질문을 정리했습니다.
이미지 파일이 안 보일 때 가장 먼저 무엇을 확인해야 하나요?
브라우저의 개발자 도구를 열어 네트워크 탭이나 콘솔을 확인해 보세요. 이미지 요청에 404 오류가 표시되면 그 주소에 파일이 없다는 뜻이므로, 경로의 오타와 파일 위치를 먼저 확인하면 됩니다. 404는 서버가 요청한 파일을 찾지 못했을 때 나타나는 오류 번호입니다. 아래 화면은 존재하지 않는 이미지 주소를 열었을 때 네트워크 탭에 404가 빨간색으로 표시된 모습입니다.
한글 파일 이름을 사용해도 문제가 없나요?
서버 환경에 따라 한글 파일 이름은 인코딩 방식의 차이로 인해 깨짐 현상을 유발할 수 있습니다. 가급적 영문 이름으로 변경하여 사용하는 것이 안전합니다.
절대 경로와 상대 경로 중 어떤 것이 더 빠른가요?
경로의 형식 자체는 로딩 속도에 큰 영향을 주지 않습니다. 다만 외부 서버의 절대 경로를 사용할 때는 해당 외부 서버의 응답 속도에 영향을 받을 수 있습니다.
루트 경로라는 것은 무엇을 의미하나요?
웹사이트의 가장 위에 있는 기본 폴더를 뜻합니다. 슬래시(/) 하나로 시작하는 경로는 이 루트 폴더를 기준으로 파일을 찾아갑니다. 예를 들어 /images/logo.png는 어느 페이지에서 쓰든 루트 폴더 안의 images 폴더에 있는 logo.png를 가리킵니다.
댓글 0
첫 댓글을 남겨보세요.