웹 개발을 위한 HTML 가이드 번외 - index.html에 대해

개요

이번 글에서는 알아둬서 나쁠 것 없는 주제를 다뤄보려고 합니다. 원래는 비주얼 스튜디오 코드에 대해서 글을 작성하려고 했는데 기존에 작성한 글에서 분리하는 게 나을 것 같은 내용이 있어서 이렇게 작성해보려고 합니다. 이번 글의 주제는 웹의 주소와 파일 이름에 대한 것입니다.

다소 어려운 이야기가 될 수 있습니다. 지금 당장 이해가 안간다면 그냥 다음글로 넘어가셔도 전혀 문제가 없는 내용입니다. 최대한 이해가 되게끔 글을 작성할 것인데 혹시라도 이해가 안된다면 전혀 문제가 안되기 때문에 정말로 다음글로 넘어가시면 됩니다. 그럼 웹 개발을 위한 HTML 가이드 번외편 시작하도록 합시다.

컴퓨터와 웹

우리는 웹이 어떻게 돌아가는지에 대해서는 알아보지 않았죠. 웹에 존재하는 모든 페이지들은 사실 어떤 컴퓨터들이 웹 서버를 이용해서 호스팅하고 있는 html파일의 내용입니다. 그리고 파일을 호스팅하는 컴퓨터를 호스트 컴퓨터라고 부릅니다. 웹 서버는 인터넷상에 존재하는 공간이고 컴퓨터가 서버를 열어서 파일을 공유한다면 그 컴퓨터가 바로 호스트 컴퓨터가 됩니다.

인터넷은 컴퓨터와 컴퓨터가 서로 연결될 수 있는 네트워크라고 했습니다. 여러분의 컴퓨터에 있는 파일을 누군가가 보기 위해서는 여러분의 컴퓨터와 다른 컴퓨터가 연결되어 있어야 합니다. 그것을 가능하게 해주는 게 바로 웹 서버입니다. 웹 서버를 열어서 파일을 올려두면 여러분의 컴퓨터에 다른 사람이 접근할 수가 있게 됩니다. 즉 호스트 컴퓨터는 인터넷이라는 수단을 통해서 파일을 공유할 수 있게 된 것이죠.

html파일 뿐만 아니라 모든 파일을 이렇게 공유할 수가 있습니다. 웹 페이지에 존재하는 이미지 또한 호스트 컴퓨터에 존재하는 어떤 폴더 안에 위치한 이미지 파일입니다. 그냥 쉽게 생각하면 모든 페이지와 모든 영상, 이미지, 음원들은 전부가 호스트 컴퓨터가 호스팅하고 있는 파일이라고 생각하면 됩니다.

이 이야기를 왜 하느냐! 바로 index.html이라는 파일 이름과 관련이 있기 때문입니다.

컴퓨터와 아이피(IP)

모든 컴퓨터는 아이피라는 것을 가집니다. 아이피는 고유한 식별 번호같은 겁니다. 사람으로 생각해보면 주민등록번호라고 생각하시면 됩니다. 아이피는 Internet Protocol의 약자로 컴퓨터와 컴퓨터가 네트워크에서 소통할 때에 필요한 번호입니다. 호스트 컴퓨터들도 아이피를 당연히 갖고 있습니다.

모든 웹 사이트의 웹 페이지들은 웹 서버에 존재하는 파일이기 때문에 호스트 컴퓨터에 접근해야만 합니다. 그러기 위해 모든 웹 페이지의 주소, 즉 URL에는 아이피가 포함되어있습니다. 그런데 우리가 보는 것은 www.naver.com과 같은 형태죠. 이런 주소들은 아이피의 별명이라고 생각하면 됩니다. 도메인이라고 부릅니다. 우선 네이버를 예시로 들어볼까 합니다.

https://www.naver.com
https://0.0.0.0:0

호스트 컴퓨터로 접근하는 아이피의 구조는 보통 아랫줄과 같습니다. 아이피는 0부터 255까지 총 네가지의 숫자로 이루어져 있습니다. 숫자와 숫자는 점으로 구분합니다. 아이피의 마지막 숫자의 바로 뒤에는 **콜론(:)**이 오고 그 뒤에 **포트(Port)**에 해당하는 숫자가 오게 됩니다. 호스트 컴퓨터는 이렇게 아이피와 포트가 존재합니다.

네이버의 경우도 원래는 아랫줄과 같은 모양인데 윗줄처럼 도메인으로 숨겨둔 상태입니다. 왜냐면 영어를 입력하는 게 더 기억에도 남고 쉽기 때문이죠. 모든 사이트들은 이렇게 도메인으로 숨겨둔 겁니다.

일반적으로 웹에서 암묵적으로 쓰는 포트는 80입니다. 80 포트는 표기를 생략할 수 있습니다. 호스트 컴퓨터가 돌리고 있는 서버가 https를 사용하는 서버라면 포트는 443입니다. 443도 생략이 가능합니다. 하지만 다른 포트들은 생략이 불가능합니다. 아무튼간에 중요한건 아이피와 포트를 도메인이라는 것으로 숨겨두었다는 겁니다.

호스트 컴퓨터와 파일

호스트 컴퓨터가 모든 종류의 파일을 공유할 수 있다는 말은 컴퓨터 안의 모든 파일을 공유한다는 것은 아닙니다. 물론 그런 경우도 있지만 서버가 호스팅하고 있는 폴더와 그 아래의 하위 폴더, 하위 파일들을 공유할 수 있습니다. 이 때, 서버가 호스팅하고 있는 폴더는 우리처럼 개발환경이 갖춰진 프로젝트 폴더입니다.

https://www.naver.com라는 주소는 네이버의 프로젝트 폴더를 가리키고 있는 것과 같죠. 아까는 아이피의 별명이라고 했는데 하나의 컴퓨터에서 여러개의 서버를 만들고 배포할 수 있기 때문에 정확히는 하나의 서버가 여러개의 도메인을 가질 수 있는 겁니다.

index라는 이름의 의미

지금까지 이 이야기들을 한 이유는 index라는 이름을 설명하기 위해서는 여기까지의 설명이 필요했기 때문입니다. 대부분의 경우 index라는 이름은 각 폴더의 기본 파일을 의미합니다. index.html이라면 그 폴더의 기본 페이지를 의미하는 것이고 index.js라면 그 폴더의 기본 스크립트 파일을 의미하는 겁니다.

이 내용은 나중에 다룰 절대경로와 상대경로에 대한 것과도 관련이 있는데, 웹상에서 프로젝트의 루트 폴더 즉 프로젝트의 최상위 폴더의 경로는 /로 표현합니다. https://www.naver.com라는 주소는 사실 /가 빠져 있는 것이고, /는 /index.html로 표현할 수 있습니다. index.html이라는 이름은 생략이 가능합니다. 다른 이름은 생략이 불가능하고 확장자만 생략이 가능한데, index.html이라는 파일 이름 만큼은 생략이 가능합니다.

즉 우리가 항상 들어가는 네이버 홈페이지의 주소는 이렇게도 쓸 수 있습니다. https://www.naver.com/index.html로 말이죠. 이건 모든 폴더에 해당될 수 있는 것이라서 모든 주소는 아래의 두가지 경우 중 하나입니다.

https://주소/폴더이름/index.html
https://주소/폴더이름.html

위의 두 주소는 완전히 똑같은 기능을 합니다. 이건 여러분이 웹 개발을 할 것이라면 언젠가는 알아야 하는 내용입니다. 좀 빨리 알아본 것이라고 생각하고 이해가 잘 안되면 나중에 다시 읽어보시면 됩니다. 이번 글은 간단하게 index.html이라는 이름에 대해서 알아봤습니다. 이건 나중에 자바스크립트를 건드릴 때에도 똑같이 적용됩니다!

이번 글은 여기까지 입니다. 나중에는 더 심화적인 내용으로 로컬 주소와 웹 주소, 그리고 상대경로와 절대경로를 다룰 때가 올텐데 그건 나중일이니 일단은 접어두도록 하겠습니다. 다음 글은 정말로 비주얼 스튜디오 코드에 대해 알아보도록 합시다.