1. 경로가 왜 중요한가

바이브 코딩에서 가장 자주 막히고, 가장 자주 헷갈리는 부분입니다. 이미지가 안 뜨거나 링크가 죽는 문제의 절반은 경로 문제입니다.

경로(path)란 파일이 어디 있는지 알려주는 주소입니다. <img src="...">나 <a href="...">에 적는 그 값이 경로입니다. 경로를 적는 방식은 크게 두 가지, 절대경로와 상대경로입니다.

2. 폴더 구조부터 그려보기

경로를 이해하려면 파일들이 어떻게 놓여 있는지부터 봐야 합니다. 다음과 같은 프로젝트가 있다고 합시다.

index.html과 about.html은 프로젝트 폴더 바로 아래에 있고, 이미지들은 images 폴더 안에 모여 있습니다. 흔한 구조입니다. 이 그림을 머릿속에 두고 두 가지 경로 방식을 봅시다.

3. 절대경로

절대경로는 출발점이 고정된, 누가 봐도 똑같은 전체 주소입니다. 보통 https://로 시작하는 인터넷 주소가 절대경로입니다.

<img src="https://weniv.co.kr/images/logo.png" />
<a href="https://www.google.com">구글</a>

집 주소로 치면 "서울특별시 강남구 테헤란로 123"처럼 전체를 다 적은 것입니다. 어디서 출발하든 항상 같은 곳을 가리킵니다. 외부 사이트나 외부 이미지를 가리킬 때는 절대경로를 씁니다.

4. 상대경로

상대경로는 "지금 이 파일을 기준으로" 상대적인 위치를 적는 방식입니다. 내 프로젝트 안에 있는 파일들끼리 연결할 때 씁니다. 핵심 기호는 네 가지입니다.

앞의 폴더 구조에서, index.html 안에서 logo.png를 부른다고 합시다. index.html은 프로젝트 바로 아래에 있고, 로고는 images 폴더 안에 있습니다. 그러니 "images 폴더로 들어가서 logo.png"라고 적습니다.

<!-- index.html 안에서 -->
<img src="images/logo.png" />

반대로, images 폴더 안에 있는 어떤 HTML 파일에서 바깥의 index.html로 가려면 한 단계 위로 올라가야 합니다.

<!-- images 폴더 안의 파일에서 -->
<a href="../index.html">홈으로</a>

../는 "한 칸 위로 나간다"는 뜻입니다. 두 단계 위로 가야 하면 ../../처럼 이어 붙입니다.

5. 경로가 깨졌을 때

이미지가 깨져서 안 나올 때, 십중팔구 이 셋 중 하나입니다.

1 - 파일명 오타나 대소문자 차이. Logo.png와 logo.png는 다른 파일로 취급됩니다. 2 - 폴더 단계를 잘못 셈. ../가 하나 모자라거나 하나 더 붙은 경우입니다. 3 - 파일이 실제로 그 자리에 없음.