멀리서 단조로워 보이는 산도 한 걸음 다가가면 수많은 나무와 풀로 어우러져 있습니다. 인터넷 또한 그런 것 같습니다. 겉으로는 단일한 공간처럼 보이지만, 그 안에는 수없이 다양한 프로토콜과 데이터로 얽혀 있습니다.

웹은 인터넷이라는 단단한 토양을 기반으로 움직이는데요. 잘만 활용하면 멋진 기능을 금방 만들어 낼 수 있습니다. 만약 원리에 대한 이해를 조금 더 넓히신다면, 훨씬 안정적이고 빠른 제품을 만드실 수 있을겁니다.

이 글에서는 인터넷을 이루는 기초 요소 중 'URL'이라 부르는 주소에 대해 소개해 드리겠습니다.

URL

브라우져가 서버로 요청을 보낼 때 URL을 사용합니다. 검색창에 입력하는 그것이 말이죠. 서버를 찾기 위한 '전화번호'라고 생각해도 좋습니다.

URL은 일정한 규칙을 갖고 있는데요. 이제부터 이 규칙을 하나씩 소개해 드릴게요.

프로토콜://도메인:포트/경로?쿼리문자열#앵커

프로토콜

'프로토콜을 맞춘다'라고 표현할 때는, '대화의 규칙을 정하자'라는 뜻입니다. URL 맨 앞에 있는 이 프로토콜(protocol)이 규칙의 종류를 구분하는 요소입니다.

• http:: HTML 문서를 가리키는 URL입니다. 브라우져는 HTML 문서를 다운로드하고 이것을 사람이 볼 수 있는 형태로 보여줄 거에요.

• mailto:: 링크를 클릭했는데 메일 앱이 실행된 적이 있나요? 바로 이 프로토콜로 시작하는 URL입니다.

• tel:: 전화가 걸린다면 당황하실지도 모릅니다. 브라우져는 이 프로토콜로 시작하는 URL을 전화 앱과 함께 실행합니다.

도메인

프로토콜에 이어 도메인(domain)은 서버의 위치를 나타내는 규칙입니다. 브라우져는 이 도메인이 가리키는 IP 주소를 찾기 위해 DNS(Domain Name Server)에 질의하기도 합니다.

예를 들면 google.com, naver.com 같은 거에요. 각 각 구글 서버, 네이버 서버 위치를 가리킵니다. 직접 서버를 실행해 개발할 때는 "이 컴퓨터"를 가리키는 localhost라는 도메인도 자주 만나게 되실 거에요.

도메인은 인터넷이라는 세상에서 국가를 가리키는 역할을 합니다.

포트

도메인에 해당하는 서버를 찾았다면, 그 안에서 실행되고 있는 프로그램에 접속할 차례입니다. 한 국가에 들어가기 위해 항구를 찾듯이, 포트(port)는 서버 안에서 실행 중인 프로그램을 식별하는 규칙입니다.

무려 65,536개(2^16)개의 포트를 가지고 있는데요, 클라이언트는 이 중 하나를 골라서 들어 갑니다. 마치 한국에 들어올 때 인천항이나 부산항을 선택하는 것처럼요.

• 잘 알려진 포트: 0~1023 구간으로, 운영제제만 쓸 수 있는 특별한 포트입니다. (80: HTTP, 22: SSH)

• 등록된 포트: 1024~49151 구간으로, 여러 애플리케이션이 관례적으로 사용하는 포트에요. 보통 개발 환경에서 자주 사용합니다. (8000: 웹 개발용)

• 동적 포트: 49152~65535 구간으로, 일시적으로 할당되는 포트입니다. (예를 들어 클라이언트가 서버의 80 포트로 요청을 보내면, 서버는 이 구간에 속하는 임시 포트를 활용해 클라이언트에 응답을 전달합니다.)

경로

프로그램은 여러가지 형태의 파일을 제공하는데요, 이 파일을 식별하는 규칙이 경로(path)입니다.

브라우져는 이걸 통해 "이 파일을 주세요"라고 서버에게 요청할 수 있어요. 서버가 이 파일을 찾아서 보내주면, 브라우져는 그것을 화면에 표시할 겁니다.

• /index.html → "웹사이트 첫 화면을 주세요"

• /images/logo.jpg → "로고 이미지를 주세요"

• /css/styles.css → "스타일시트 파일을 주세요"

집을 찾기 위해 나라와 도시(도메인과 포트)를 찾았다면, 경로는 특정 건물을 가리키는 셈이지요.

쿼리 문자열과 앵커

때로는 서버에 추가적인 정보를 전달할 필요가 있는데, 쿼리 문자열(querystring)이 이 역할을 합니다.

• 위치: 경로 뒤에 '?' 기호와 함께 작성합니다.

• 형식: "키=값"형태로 데이터를 표현합니다. (예: '?query=검색어' 검색결과 페이지 요청)

배가 특정 지점에 머물도록 닻을 내리 듯, 앵커(anchor)는 HTML 문서안의 특정 위치를 가리키는 역할을 합니다.

• 위치: 경로 혹은 쿼리 문자열 뒤에 '#' 기호와 함께 작성합니다.

• id 값 사용: HTML 문서에서 요소에 부여한 id 값을 참조합니다. (예: #post-title)

   

   

   

   

   

   

   

정리

지금까지 HTTP 핵심 요소인 URL에 대해 살펴보았습니다. 이것은 인터넷 상의 자원을 식별하는 주소이자, 브라우져가 서버와 대화하기 위한 출발점입니다.

브라우져는 단순히 URL만 전달하는 것이 아니라, 헤더와 본문을 추가해 하나의 요청(Request)를 만듭니다. 이 요청을 받은 서버는 자원을 찾아낸 뒤, 상태 코드, 헤더, 분문을 추가해 응답(Response)로 돌려줍니다. 이렇게 요청과 응답을 수없이 주고 받으며 우리가 매일 사용하는 웹이 움직이는 것이죠.

더 깊이 있는 이해를 원하신다면 제가 준비한 강의, 「웹 개발의 핵심, HTTP 완벽 마스터하기!」 1편을 참고해 보시면 도움이 될 것입니다. 웹을 처음 배우시는 분에게는 든든한 길잡이가, 경험자에게는 기초를 재정립하는 기회가 될 것입니다.

이 강의에서 다루는 내용

• 1편. HTTP 기본

• 2편. 브라우져

• 3편. AJAX

• 4편. 추가 프로토콜

• 5편. 보안

• 6편. 성능