웹페이지는 파일들이 모여서 열립니다

AI가 웹을 만들어도 결과는 결국 파일과 폴더로 저장됩니다. 오늘은 코드를 외우기보다 어떤 파일이 어디에 있어야 이미지와 링크가 깨지지 않는지 배웁니다.

index.html은 첫 문입니다

많은 웹사이트에서 `index.html`은 주소를 열었을 때 가장 먼저 보여주는 파일입니다. 이름이 틀리거나 다른 폴더에 있으면 첫 화면을 찾기 어렵습니다.

• 1처음 열리는 대표 파일이라고 생각합니다.
• 2AI에게 “첫 화면 파일 이름은 index.html로 해줘”라고 말할 수 있습니다.

이미지는 보통 폴더에 모읍니다

사진이 여기저기 흩어져 있으면 AI도 사람도 찾기 어렵습니다. `images` 또는 `assets/images`처럼 이미지 전용 폴더를 만들면 관리가 쉬워집니다.

• 1이미지 파일은 한곳에 모아 둡니다.
• 2페이지에서 이미지를 부를 때는 폴더 위치까지 필요합니다.

깨진 이미지는 길을 못 찾은 것입니다

이미지가 안 뜬다고 해서 사진이 항상 사라진 것은 아닙니다. 파일 이름이 다르거나, 폴더 위치가 다르거나, 경로가 틀려서 길을 못 찾은 경우가 많습니다.

• 1파일이 실제로 있는지 확인합니다.
• 2HTML에 적힌 경로와 실제 위치가 같은지 봅니다.

경로는 파일이 찾아가는 길입니다

경로는 “어느 폴더 안의 어떤 파일인지”를 말하는 주소입니다. 초심자는 `같은 폴더`, `안쪽 폴더`, `위쪽 폴더` 정도만 먼저 이해해도 충분합니다.

파일 이름은 짧고 안전하게 씁니다

웹에서는 파일 이름이 중요합니다. 공백, 한글, 특수문자 때문에 경로가 복잡해질 수 있으니 처음에는 영어 소문자와 하이픈을 쓰는 습관이 좋습니다.

• 1`my photo 1.jpg`보다 `my-photo-1.jpg`가 안전합니다.
• 2대문자와 소문자가 다르면 다른 파일로 볼 수 있습니다.

내 컴퓨터와 인터넷 주소는 다릅니다

내 컴퓨터에서는 열리던 이미지가 배포 후 안 보일 수 있습니다. 인터넷에 올릴 때는 HTML과 이미지 파일이 함께 올라가야 합니다.

• 1내 컴퓨터에만 있는 파일은 다른 사람이 볼 수 없습니다.
• 2배포할 폴더 안에 필요한 파일이 모두 있어야 합니다.

AI에게 폴더 구조를 먼저 부탁합니다

AI에게 바로 “홈페이지 만들어줘”라고 하지 말고, 먼저 프로젝트 폴더를 어떻게 나눌지 정리해 달라고 말하면 수정이 쉬워집니다.

수정 요청은 정확한 위치를 말합니다

문제가 생기면 “고쳐줘”보다 어디가 문제인지 말해야 합니다. 어떤 파일에서, 어떤 이미지가, 어떤 경로로 적혀 있는지 알려주면 AI가 훨씬 잘 고칩니다.

업로드 전 체크리스트

배포 전에는 웹페이지를 눈으로 확인하고 파일이 빠지지 않았는지 봅니다. AI에게도 같은 기준으로 검사해 달라고 요청할 수 있습니다.

오늘의 실습: 폴더 지도 만들기

오늘은 코드를 많이 쓰지 않습니다. 내가 만들 웹페이지에 필요한 파일과 폴더를 한 장의 지도로 정리합니다.

• 1대표 파일: index.html
• 2이미지 폴더: images
• 3넣을 이미지 파일 이름 3개
• 4AI에게 물어볼 경로 질문 1개

용어는 그림과 함께 기억합니다

오늘 배운 용어는 어렵게 외우지 않습니다. 파일은 종이, 폴더는 보관함, 경로는 길, 배포는 인터넷에 올리는 일이라고 기억합니다.