![]()
왜 이 이름이 아직도 계속 쓰일까
HTML을 처음 배우면 거의 반드시 보게 되는 파일 이름이 있다. 바로 index.html이다. 처음엔 그냥 관습처럼 보인다. 그런데 이 이름은 아무 이유 없이 굳어진 게 아니다. 웹 서버가 폴더를 열었을 때 가장 먼저 보여줄 기본 문서를 찾는 방식과 연결되어 있다. 쉽게 말하면 index.html은 그 폴더의 첫 화면 역할을 하는 파일이다.
초보자 입장에서는 이걸 이해하면 웹사이트 구조가 갑자기 쉬워진다. 왜 어떤 주소는 파일 이름 없이도 열리는지, 왜 폴더마다 첫 화면이 생기는지, 왜 호스팅 올릴 때 첫 페이지가 안 뜨는 경우가 있는지도 같이 이해되기 때문이다.
가장 쉬운 비유로 설명하면
폴더를 하나의 방이라고 생각해보자. 그 방 문을 열었을 때 제일 먼저 보여주는 안내판이 바로 index.html이다. 사용자가 example.com/about/처럼 폴더까지만 들어오면 서버는 그 안에서 기본으로 보여줄 파일을 찾는다. 그때 제일 흔하게 찾는 이름이 index.html이다.
즉 사용자가 꼭 example.com/about/index.html까지 다 쓰지 않아도, 서버가 알아서 index.html을 첫 화면으로 연결해주는 것이다.
왜 하필 index라는 이름일까
index는 원래 목록, 색인, 첫 안내 페이지라는 뜻으로 많이 쓰인다. 책 맨 뒤 색인도 index이고, 여러 내용을 안내하는 첫 페이지도 index라고 부르기 쉽다. 웹 초기에는 한 폴더 안의 시작 문서를 index라는 이름으로 두는 방식이 자연스럽게 자리 잡았다.
즉 index.html은 특별한 기술 마법 이름이라기보다, 그 폴더의 대표 문서라는 뜻에 가깝다. 시간이 지나면서 Apache, Nginx 같은 웹 서버와 여러 호스팅 환경이 이 관습을 기본값처럼 받아들이면서 더 널리 굳어졌다.
실제로 주소창에서는 어떻게 보이나
1. 파일 이름을 직접 쓰는 경우
https://example.com/index.html
이건 가장 직접적인 방식이다. 파일 이름까지 정확히 적은 것이다.
2. 파일 이름 없이 폴더만 쓰는 경우
https://example.com/
이 경우 서버는 보통 루트 폴더 안에서 기본 문서를 찾는다. 가장 흔한 후보가 index.html이다.
3. 하위 폴더에서도 같은 원리
https://example.com/blog/
이 주소로 들어가면 서버는 /blog/ 폴더 안의 index.html을 찾는 식으로 동작할 수 있다. 그래서 폴더별 첫 화면 설계가 가능해진다.
초보자가 여기서 자주 헷갈리는 점
1. 꼭 index.html만 써야 하나
반드시 그런 건 아니다. 서버 설정에 따라 home.html, default.html 같은 다른 이름도 기본 문서로 지정할 수 있다. 다만 가장 널리 쓰이고, 가장 충돌이 적고, 대부분 환경에서 익숙한 이름이 index.html이라서 계속 쓰는 것이다.
2. 파일 이름을 안 써도 되는 이유
브라우저가 알아서 생략하는 게 아니라, 서버가 폴더 안에서 기본 파일을 대신 찾아주는 것이다. 이 차이를 이해하면 정적 웹사이트 구조를 더 쉽게 이해할 수 있다.
3. 왜 내 사이트는 첫 화면이 안 뜨나
초보자에게 가장 흔한 실수는 첫 파일 이름을 main.html이나 first.html로 만들고, 서버는 여전히 index.html을 찾는 경우다. 이러면 첫 페이지가 안 뜨거나 디렉터리 목록 에러가 날 수 있다.
실무에서는 어떻게 쓰나
정적 웹사이트를 만들 때는 보통 루트 폴더에 index.html을 둔다. 그리고 하위 메뉴가 필요하면 폴더를 나누고 그 안에도 각각 index.html을 넣는다. 예를 들면 이런 식이다.
/index.html
/about/index.html
/contact/index.html
/blog/index.html
이렇게 해두면 주소도 깔끔해진다.
example.com/example.com/about/example.com/contact/example.com/blog/
초보자 입장에서는 파일 이름을 주소창에 다 드러내는 것보다 훨씬 보기 좋고 관리도 쉬운 구조다.
요즘 프레임워크 시대에도 왜 중요할까
요즘은 React, Next.js, Vite 같은 도구를 많이 써서 직접 index.html을 만지는 일이 줄어든 것처럼 보일 수 있다. 그런데 내부 원리를 보면 여전히 시작점 개념은 남아 있다. 어떤 프로젝트는 실제로 루트에 index.html이 있고, 어떤 프레임워크는 라우팅 규칙으로 이 역할을 추상화해서 숨겨둘 뿐이다.
즉 초보자가 index.html 개념을 이해하면 나중에 프레임워크를 배울 때도 훨씬 덜 헷갈린다. 첫 화면이 어디서 시작되는지, 어떤 파일이 진입점인지 감이 생기기 때문이다.
오늘 바로 해볼 실습
- 새 폴더를 하나 만든다.
- 그 안에
index.html파일을 만든다. - 간단한 제목과 본문을 넣는다.
- 브라우저에서 열어본다.
- 같은 폴더 안에
about폴더를 만들고, 그 안에도index.html을 넣는다. - 폴더별 첫 화면이 어떻게 달라지는지 확인한다.
이 실습 하나만 해봐도 웹사이트가 파일들의 집합이 아니라, 폴더 단위로 시작 문서를 갖는 구조라는 걸 바로 이해할 수 있다.
초보자용 한 줄 정리
index.html은 그 폴더의 기본 첫 화면이다.- 주소에 파일 이름을 안 써도 서버가 대신 찾아준다.
- 꼭 그 이름이어야 하는 건 아니지만, 가장 널리 쓰이는 표준 같은 이름이다.
미래이음연구소와 함께 익히기
미래이음연구소 웹 기초와 바이브코딩 교육
이신우 소장이 이끄는 미래이음연구소에서는 HTML 기초부터 웹사이트 구조 이해, 바이브코딩 실습까지 초보자도 이해하기 쉽게 교육합니다.
강의 문의: 010-3343-4000 | lab.duonedu.net
마무리
왜 기본 HTML 파일 이름이 index.html인지 이해하면, 웹은 갑자기 훨씬 덜 복잡해진다. 이건 단순 파일 이름 하나의 문제가 아니라, 웹 서버가 폴더와 첫 화면을 어떻게 연결하는지 이해하는 출발점이기 때문이다. 초보자일수록 이 개념을 빨리 잡아두면 나중에 배포, 라우팅, 프레임워크까지 이어질 때 훨씬 덜 헷갈린다.
참고자료
- 일반적인 웹 서버 기본 문서 규칙
- 정적 사이트 구조와 디렉터리 인덱스 개념