웹사이트 제작의 기초 (1)

06 Jul 2021

풀 스택을 위한 첫 발자국 지침서

---

우리가 크롬과 같은 웹브라우저의 검색창 부분에 웹사이트의 주소를 입력하게 되면, 브라우저는 그에 맞는 웹페이지의 정보를 받아 우리의 화면에 띄어주게 됩니다.

…

자, 웹사이트의 구조란 위의 문장 하나만으로도 요약하기 충분하나, 조금.. 아주 조금만 더 자세히 알아보겠습니다.

생각을 아주 조금만 더 확장해봐서.. 웹 페이지의 정보는 어디서 받아오는 걸까요?

사실은, 웹 페이지에 대한 정보는 하나의 파일로써 지구의 어느 다른 장소에 있는 컴퓨터에서 존재한다고 생각하면 편합니다.

이해를 돕기 위해 비유를 해보자면, 우리가 방이 두개가 있는 집에 산다고 생각해봅시다. 그리고 각 방에 하나씩 컴퓨터가 하나 있습니다.

유저의 컴퓨터, 즉 클라이언트라는 이름의 컴퓨터는 한 방에 있을 것이고, 웹사이트, 즉 서버라는 이름의 다른 컴퓨터는, 다른 방에 있는 상황입니다.

그 두 컴퓨터들은 “네트워크”라는 하나의 조직에 가입이 되어있습니다.

그 네트워크라는 조직에서의 컴퓨터들은 모두들 같은 생김새를 가지고 있기 때문에, 서로 알아보기 위해서 숫자를 부여를 해줬습니다.

이 숫자를 “IP”라고 부른다고 하네요. 우리 세계에선 우리 컴퓨터를 컴퓨터 1, 서버 컴퓨터를 컴퓨터 2라고 이름 붙여줬습니다.

이제 숫자라는 이름이 생긴 컴퓨터들은, 서로 알아 볼 수 있게 되었고, 소통을 할 수 있게 된 것입니다!

컴퓨터 1은 컴퓨터 2와 만나기 위해서, 브라우저라는 녀석을 이용합니다.

(다른 방식으로 소통 할 수도 있습니다! 이 부분에 대해 더 궁금하시면 질문하세요!)

컴퓨터 1의 브라우저 검색창 부분에 “2”를 입력하면, 컴퓨터 2안에 있는 파일 중 하나가 컴퓨터 1의 브라우저로 보내지게 됩니다.

컴퓨터 1을 하고 있는 우리 유저들은, 그 컴퓨터 2의 파일을 보게 되는 것입니다.

하지만 현실 세계에서 우리는, 숫자를 검색창에 입력하는 경우는 없죠? 그 이유는 사실 컴퓨터의 이름을 하나하나 외우는 것은 상당히 귀찮은 일이기 때문입니다.

그걸 위해서 우리 인간들은, 제 3의 컴퓨터가 인간이 쉽게 기억하는 단어를 컴퓨터의 숫자, IP로 바꿔주게끔 해놨답니다.

컴퓨터 1의 브라우저 검색창에 google.com을 검색하게 되면, 컴퓨터 3이 등장해서 2로 바꿔주는 것이죠.

자, 이제 아까 보았던 문장을 다시 보도록 하겠습니다.

우리가 크롬과 같은 웹브라우저의 검색창 부분에 웹사이트의 주소를 입력하게 되면, 브라우저는 그에 맞는 웹페이지의 정보를 받아 우리의 화면에 띄어주게 됩니다.

이를 비유적으로 수정하게 되면, 다음과 같이 됩니다.

(컴퓨터 1이) 크롬과 같은 웹 브라우저 검색창 부분에 (컴퓨터 2의) 주소를 입력하게 되면, 브라우저는 (컴퓨터 3에게 주소를 건내주고, 컴퓨터 2의 숫자를 받아옵니다. 그 후,) 그에 맞는 (컴퓨터 2의) 웹 페이지의 정보를 받아 (컴퓨터 1의) 화면에 띄어주게 됩니다.