IT 지식이 무엇보다 중요해진 요즘, 여러분은 어떻게 공부하고 있나요? 가장 먼저 눈길이 가는 건 다양한 IT 강의 영상일 겁니다. 강의를 제공하는 교육 기업들과 함께, 요즘IT에서 ‘IT 강의 시리즈’를 준비했습니다. 엄선한 교육 영상을 텍스트로 읽고 필요한 정보를 빠르게 가져가세요.

회원가입을 하면 원하는 문장을
저장할 수 있어요!

웹사이트는 어떻게 찾아갈까? IP, DNS, URL 개념 잡기

코드잇

10분

3일 전

3.9K

몇

년차,

어떤 스킬

어떤 직무

의

독자들이 봤을까요?

어떤 독자들이 봤는지 궁금하다면?

로그인

이번 강의는 ‘웹 개발 첫걸음’입니다. IT 교육 기업 코드잇의 강의 ‘프로그래밍 오버뷰’와 ‘웹 개발 기초 지식’ 콘텐츠를 정리했습니다. 다양한 개발 분야부터 꼭 알아야 할 기초 지식까지, 웹 개발의 기초를 다져 보세요. 전체 영상은 코드잇에서 확인할 수 있습니다.

웹 개발 첫걸음 시리즈

① 프론트엔드와 백엔드, 무엇을 어떻게 시작할까?
② 웹사이트는 어떻게 찾아갈까? IP, DNS, URL 개념 잡기

지난 글에서는 웹의 기초인 클라이언트와 서버의 개념을 배웠습니다. 여러분이 크롬 브라우저에서 youtube.com으로 들어간다고 가정해 볼게요. 이때 브라우저는 클라이언트의 역할을 합니다. 이 브라우저가 유튜브의 서버 컴퓨터에 요청을 보내 사이트 코드를 받아오는 거예요. 그러면 우리는 그 정보를 받아 사이트를 쓸 수 있게 됩니다.

그런데 여기서 궁금증이 생깁니다. 인터넷에 연결된 수많은 컴퓨터 가운데 이 유튜브 사이트의 서버 컴퓨터는 어떻게 찾을 수 있을까요? 이번에는 그 물음에 대한 답을 하려고 합니다. 웹을 이해하기 위해 알아야 할 핵심 지식, IP, DNS, URL의 기초 개념을 파헤쳐 보겠습니다.

IP

우리가 누군가에게 연락하려면 전화번호가 필요합니다. 인터넷에 연결된 컴퓨터도 이렇게 전화번호 비슷한 걸 가지고 있죠. 바로 IP 주소입니다.

여러분의 스마트폰이나 컴퓨터도 인터넷에 연결되어 있다면 IP 주소를 가지고 있습니다. IP 주소는 아래 이미지처럼 생겼고요.

따라서 우리가 어떤 서버에 요청을 보내고 싶으면 이 IP 주소를 쓰면 됩니다. 예를 들어 구글의 IP 주소는 142.250.76.142입니다. 이를 브라우저에 입력해 보면 구글 사이트가 뜰 겁니다.

DNS

그런데 유튜브에 들어가고 싶다고 IP 주소를 외우고 다닐 필요는 없습니다. youtube.com을 입력하면 되죠.

친구 전화번호를 굳이 외우지 않는 거랑 똑같습니다. 주소록에 따로 기록해 두고 전화해야 할 때 찾아서 걸면 되죠. 그런 것처럼 인터넷에서도 이런 주소록이 있는데요. 이 주소록을 Domain Name System, 줄여서 DNS라고 합니다.

여기서 도메인(Domain)이란 우리가 평소에 쓰는 google.com, youtube.com, naver.com 이런 문자를 말합니다. 사람이 쉽게 알아볼 수 있게 이름을 붙인 거죠. 142.250.76.142보다는 google.com이 훨씬 기억하기 쉬우니까요, 그렇죠?

그럼 다시 돌아와서 Domain Name System, DNS는 뭘까요? 도메인은 우리가 좀 더 간편하게 인터넷을 쓸 수 있도록 존재합니다. 다만 결국에는 IP 주소를 알아야 우리가 원하는 서버 컴퓨터에 요청을 보낼 수 있겠죠. 도메인만 입력해도 원하는 IP 주소를 찾아주도록 구축한 시스템이 바로 이 DNS에요. 우리가 도메인을 입력하면, DNS가 이 도메인에 해당하는 IP 주소를 찾아주고, 그 IP 주소의 컴퓨터로 연결해 주는 거죠.

참고로 이 DNS도 하나의 서버라고 할 수 있습니다. 우리가 DNS에 도메인 이름을 준 다음, IP 주소를 찾아달라고 요청을 보내는 거잖아요. 그러면 이 요청에 대한 응답으로 DNS가 IP 주소를 주는 거죠. 요청과 응답, 우리가 배운 서버의 개념이 맞죠? 그래서 이렇게 도메인을 받고 IP를 돌려주는 서버를 DNS 서버라고 부릅니다.

URL

웹사이트 주소를 쓸 때 우리는 보통 google.com, 이런 도메인을 입력합니다. 하지만 정말 제대로 된 형식으로 쓰자면 https://www.google.com 이렇게 써야 합니다.

이를 바로 URL이라고 합니다. URL이라는 용어 자체는 많이 들어보셨을 텐데요, URL은 Uniform Resource Locator의 줄임말입니다. 단어의 뜻을 하나씩 보며 URL이 무엇인지 살펴볼게요.

먼저 중간에 있는 리소스(Resource)는 자료를 의미합니다. 우리가 구글에 들어가려고 google.com 이렇게 입력하면, 구글 웹 사이트에 대한 코드를 돌려받습니다. 이때 웹 사이트를 보여주기 위한 이 코드를 리소스라고 할 수 있습니다. 어떤 URL은 코드가 아니라 이미지 파일이나 음악 파일 같은 리소스를 돌려주기도 합니다. 그러니 코드뿐만 아니라 다양한 파일을 다 리소스라고 할 수 있는 거죠.

뒤에 있는 로케이터(Locator)는 Location 즉, 위치를 알려 주는 역할이라는 의미예요. 연결하면 Resource Locator, 그러니까 웹에서 자료가 어디 있는지 알려 주는 장치 정도로 이해할 수 있습니다.

마지막으로 제일 앞에는 유니폼(Uniform)이란 단어가 붙죠? 단어 Uniform은 ‘일관되다’라는 뜻인데요, 어떤 일관된 규칙에 따라서 URL을 작성해야 자료를 찾을 수 있다는 의미예요. URL을 편하게 부르면 그냥 주소라고도 하죠. 우리가 집의 주소를 쓸 때도 ‘XX시 OO구 ㅁㅁ동’ 이런 규칙에 따라 쓰잖아요. 그런 것처럼 URL도 규칙을 지키며 세부적인 구조를 따라야 합니다.

URL의 5가지 구성 요소

1. 스킴(Scheme)

URL의 구조에 대해서 한 번 알아볼게요. URL의 가장 앞에 있는 건 스킴(Scheme)이라는 영역입니다. 사이트 주소를 보면 앞에 http나 https 같은 문자가 붙어 있죠? 이게 바로 URL의 스킴입니다. 이걸 통해 우리가 어떤 방식으로 서버와 통신하고 싶은지 명시할 수 있는 거예요.

예를 들어 http라고 적혀 있으면 http라는 프로토콜(Protocol), 즉 http라는 통신 규약에 따라 서버와 소통하겠다는 것을 의미합니다. 만약 https라고 적혀 있으면 https 규칙에 따라 서버와 소통하겠다는 뜻이고요. 사실 http와 https 말고도 ftp 같은 다른 프로토콜도 있는데, 일반적으로 http랑 https 정도만을 자주 접하게 됩니다. 여기서 https는 http 뒤에 secure란 단어가 붙은 거예요. 말 그대로 보안이 강화된 http라고 생각해도 좋습니다. 이처럼 프로토콜을 적은 다음, 콜론(:)을 쓰고 슬래시(/) 두 개를 써주면 스킴이 완성됩니다.

그런데 사실 우리가 실제로 브라우저에서 사이트에 들어갈 때는 그냥 google.com만을 입력합니다. 앞에 http:// 나 https:// 를 굳이 안 붙이죠. 사실 대부분 URL의 스킴이 http나 https로 이뤄지다 보니, 브라우저에서 깔끔하게 이를 숨겨 둔 거라고 이해하면 됩니다. 막상 보면 앞에 다 붙어 있어요.

2. 호스트(Host)

스킴 다음은 호스트(Host)라는 영역입니다. 여러분이 ‘사이트 주소’ 하면 먼저 떠올리는 부분이 바로 이 호스트 부분일 겁니다. 네이버의 경우, www.naver.com 이게 전부 호스트에 해당하는 부분입니다.

호스트는 영어로 ‘주인’이라는 뜻을 가졌습니다. 우리가 URL을 쓰는 목적은 무엇이었죠? 결국 어떤 서버 컴퓨터를 찾아 거기에다가 무언가를 요청하기 위함입니다. 그 컴퓨터의 주인을 나타내는 게 바로 이 호스트 부분인 겁니다. 이 호스트 부분은 IP 주소로 대체할 수도 있습니다. 다만 숫자로 된 IP 주소를 기억하기 어려우니까 도메인 이름을 쓰는 게 일반적이고요.

좀 더 구체적으로 들어가 볼게요. 호스트는 3가지 영역으로 구성되는데요. 첫 번째는 서브도메인(Subdomain), 그다음은 2단계 도메인(Second-Level Domain), 마지막으로는 최상위 도메인(Top-Level Domain)이에요.

우리가 가장 익숙한 건 아마 2단계 도메인일 텐데요. google, youtube, naver 등 사이트에서 보통 그 사이트의 메인 이름이 들어가는 부분입니다. 상호나 기관명처럼 기억하기 쉬운 이름이 여기에 들어가죠.

다음으로 나오는 최상위 도메인도 익숙할 것 같아요. .net, .kr 같은 것이 모두 최상위 도메인입니다. 보통 이는 해당 사이트를 어떤 종류의 기관에서 운영하는지 나타냅니다.

예를 들어 .com은 보통 영리 단체, 반대로 .org는 보통 비영리단체가 많이 씁니다. 미국에 있는 학교들은 education을 줄인 .edu를 쓰기도 합니다. 한국의 고등학교는 high school을 줄여서 .hs.kr, 대학교는 academy를 줄여서 .ac.kr을 많이 씁니다. 또 한국의 .kr이나 영국의 .uk처럼 사이트가 운영되는 국가를 보여 주기도 하고요. 사실 이 모든 건 꼭 따라야 하는 규칙이라기보다 일반적으로 그렇게 쓰인다는 겁니다.

마지막으로 가장 앞에 있는 서브도메인입니다. 우리가 가장 익숙한 서브도메인은 World Wide Web을 줄인 www인데요. 대표적으로 네이버의 가장 메인 사이트는 www.naver.com으로 들어가죠.

그런데 네이버는 워낙 큰 서비스이기 때문에 그 안에서 세부 사이트로 분리를 해놨습니다. 이를테면 네이버 블로그에 들어가고 싶다고 할게요. 이 서비스의 호스트는 blog.naver.com이 되는데요, 이 앞에 붙은 blog가 서브도메인입니다. www.naver.com과 blog.naver.com은 같은 기업에서 운영하지만, 서브도메인으로 분리했기 때문에 엄밀히 말하면 다른 사이트인 겁니다.

3. 패스(Path)

스킴과 호스트, 그다음은 패스(Path)입니다. 호스트를 통해 우리는 어떤 서버에 요청을 보낼지 즉, 세상에 있는 수많은 컴퓨터 중에서 어떤 컴퓨터에 요청을 보낼지 정한 건데요. 이제 이 서버 컴퓨터한테 정확히 어떤 리소스를 받아오고 싶은지 또는 어떤 요청을 하고 싶은지를 정할 차례입니다.

이게 바로 패스의 역할이죠. 사실 우리 컴퓨터 내에 있는 파일들도 패스, 즉 경로라는 게 있습니다. 무슨 드라이브 안, 어떤 폴더 안에 어떠한 파일이 있다, 이런 걸 표현한 거예요. URL의 경로도 이와 비슷합니다.

호스트가 끝나는 부분에 슬래시(/)를 붙이고 여기부터 경로를 쭉 쓰면 특정 리소스, 즉 특정 파일을 딱 지정할 수 있는 거죠. 때로는 꼭 하나의 파일을 받아오는 게 아니라도 경로를 활용해 서버에 어떤 요청을 보낼지 지정할 수 있습니다. 서버가 그 경로를 보고 클라이언트가 요구한 걸 처리해 주는 식으로 이루어지는 거죠.

4. 쿼리(Query)

위의 세 가지 요소가 URL의 가장 중요한 부분이라고 할 수 있습니다. 이제 약간 부가적인 영역 두 가지를 볼게요. 방금까지 배운 URL 뒤에는 쿼리(Query)와 앵커(Anchor)를 붙일 수 있습니다.

우선 쿼리는 굉장히 직관적이에요. 유튜브에 뭔가를 검색했다고 가정해 볼게요. 그러면 일단은 youtube.com 다음 ‘result’라는 경로가 나옵니다. 그런데 뒤에 다시 ‘?search_query=basketball’ 이라는 것들이 또 나옵니다.

이 부분이 바로 쿼리입니다. 생각해 보면, 우리가 유튜브에 검색하는 모든 키워드별로 다 완전히 새로운 페이지로 갈 수는 없잖아요. 그래서 기본적으로는 같은 경로를 가져가되 그 뒤에 추가적인 정보를 넣어준 거죠. 크게는 유튜브 검색 결과 페이지를 보고 싶지만, 더 자세히 ‘basketball’ 같은 키워드에 대한 검색 결과를 보고 싶다고 쿼리로 넣어주는 거죠.

만약 업로드 날짜순으로 정렬하고 싶을 때도 쿼리를 씁니다. 아래 이미지에는 앰퍼샌드(&) 기호가 나오고 또 다른 쿼리가 들어갑니다. 이 쿼리는 업로드 날짜순으로 데이터를 가져오라는 의미인 거죠. 이런 식으로 특정 도메인 내 특정 경로에 요청을 보냈는데, 여기에 추가적인 정보까지 주고 싶으면 쿼리를 쓸 수 있습니다.

5. 앵커(Anchor)

마지막으로 볼 요소는 앵커(Anchor)입니다. 앵커를 이해하려면 사이트의 구조를 간단히 알아야 합니다. 웹사이트는 기본적으로 HTML 코드로 구성되어 있습니다. 이 HTML 코드를 들여다보면 다양한 요소들이 있는데요, 이 요소들에 아이디, 즉 이름을 붙여줄 수도 있습니다.

때로 우리가 어떤 사이트에 들어갈 때, 사이트 맨 위에 떨어지는 게 아닌 특정 섹션으로 곧바로 가고 싶을 때가 있습니다.

예를 들어 위키피디아나 나무위키 같은 사이트의 목차 가운데 한 곳으로 가고 싶은 거죠. 이때 특정 섹션의 링크를 클릭하면 바로 그 섹션으로 내려갑니다. 이때 클릭한 URL을 살펴보면, 뒤에 #이 붙어 있고, 그 다음에 어떤 id가 적혀 있어요. 이게 바로 앵커입니다. 이 URL을 복사해 다른 탭에서 다시 들어가도 곧바로 그 섹션으로 갈 겁니다. 이런 식으로 앵커를 쓰면 페이지에 들어가자마자 특정 섹션으로 가게끔 할 수 있죠.