이전 아티클로 웹 서버가 어떻게 동작하는지와 웹 페이지, 웹사이트 등의 차이를 알아보았다.
이번 시간에는 HTML 문서를 작성하면서 생각보다 자주 사용하게 되는 URL이란 것에 대해 공부해볼 것이다.
URL
URL이란 무엇인가?
URL은 Uniform Resource Locator의 줄임말로 웹에 게시된 고유 리소스 주소를 가리킨다. 이러한 고유 리소스는 HTML 페이지, CSS 문서, 이미지 등이 될 수 있다. 실제로 몇 가지 예외가 있고 가장 일반적인 예외는 더 이상 존재하지 않거나 이동된 리소스를 가리키는 URL이다.
URL로 표시되는 리소스와 URL 자체는 웹 서버에서 처리되므로 해당 리소스와 관련 URL을 신중하게 관리하는 것은 웹 서버 소유자에게 달려있다.
기본적인 URL의 구조
https://developer.mozilla.org
https://developer.mozilla.org/ko/docs/Learn/
https://developer.mozilla.org/en-US/search?q=URL
위의 URL 중 하나를 브라우저 주소창에 입력하면 연결된 페이지(리소스)를 로드 할 수 있다.
URL은 여러 부분으로 구성되며 일부는 필수, 일부는 선택 사항이다. 가장 중요한 부분은 아래 이미지를 통해 URL에 강조 표시되어 있다.
스키마
URL의 첫 번째 부분은 브라우저가 리소스를 요청하는 데 사용해야 하는 프로토콜을 나타낸다.
(프로토콜은 컴퓨터 네트워크에서 데이터를 교환하거나 전송하기 위한 설정 방법이다.)
일반적으로 웹 사이트의 경우 프로토콜은 HTTPS 또는 HTTP이다.
웹 페이지의 주소를 지정하려면 이 두가지 중 하나가 필요하다.
권한(Authority)
그 다음에는 권한이 뒤따르는데 문자 패턴 ://에 의해 스키마와 구분된다.
만일 존재한다면 권한에는 콜론으로 구분된 도메인(www.example.com)과 포트(80)가 모두 포함된다.
- 도메인은 요청하는 웹 서버를 말한다. 도메인은 일반적으로 Domain Name이지만 IP 주소로도 사용될 수 있다. (하지만 IP주소는 불편하기 때문에 자주 사용하지 않는다.)
- 포트는 웹 서버의 리소스에 접근하는 데 사용되는 기술적 "게이트"를 나타낸다. 웹 서버가 리소스에 대한 액세스 권한을 부여하기 위해 HTTP 프로토콜의 표준 포트를 사용하는 경우엔 일반적으로 생략한다.
(보통 HTTP의 경우 표준 포트는 80, HTTPS의 경우 443)
참고
스키마와 권한 사이의 구분 기호는://이다. 콜론은 스키마를 URL의 다음 부분과 구분하고//는 URL의 다음 부분이 권한임을 나타낸다.
권한을 사용하지 않는 URL의 한 예시는 메일 클라이언트(mailto:foobar)이다. 스키마는 포함하지만 권한 구성요소는 사용하지 않기 때문에, 콜론 뒤에 두 개 슬래시가 붙지 않고, 콜론은 스키마와 메일 주소 사이의 구분 기호 역할만 수행한다.
리소스 경로
/path/to/myfile.html은 웹 서버에 있는 리소스의 경로다. 웹 초기에는 이와 같은 경로가 웹 서버의 실제 파일 위치를 나타냈다.
요즘에는 대부분 물리적 실체가 없는 웹 서버가 추상적으로 처리한다.
매개변수
?key1=value1&key2=value2는 웹 서버에 제공되는 추가 매개변수다. 이러한 매개변수는 &기호로 구분된 키/값 쌍 목록이다.
웹 서버는 리소스를 반환하기 전에 이러한 매개변수를 사용해 추가 작업을 수행할 수 있다.
각 웹 서버는 매개변수에 관한 고유 규칙이 있고, 특정 웹 서버가 매개변수를 처리하는 지 알 수 있는 신뢰할 수 있는 유일 방법은 웹 서버 소유자에게 물어보는 것이다.
앵커
#SomewhereInTheDocument는 리소스 자체의 어떤 부분에 대한 앵커다. 앵커는 리소스 내부에서 일종의 '책갈피' 역할을 하고, 브라우저에 해당 '책갈피' 지점의 컨텐츠를 표시하도록 지시한다.
예시로, HTML 문서에 브라우저가 앵커가 정의된 지점으로 스크롤한다. 비디오나 오디오 문서에서 브라우저는 앵커가 나타내는 시간으로 이동하려 시도한다.
프래그먼트 식별자라고도 하는 #뒤의 부분은 요청과 함께 서버로 전송되지 않는다는 점은 주목할 가치가 있다.
참고
URL은 일반 우편 주소와 비슷하다 생각할 수 있다. 스키마는 사용하려는 우편 서비스, 도메인 이름은 시 또는 마을, 포트는 우편 번호, path는 메일이 배달되어야 하는 건물, 매개변수는 건물의 아파트 번호와 같은 추가 정보, 마지막은 anchor는 메일을 보낸 실제 사람을 나타낸다.
절대 URL vs 상대 URL
앞서 봤던 URL을 절대 URL이라고 하지만, 상대 URL이란 것도 있다.
URL 표준은 URL 객체와 구별하기 위해 절대 URL 문자열과 상대 URL 문자열이라는 용어를 사용하지만 둘 다 정의한다.
URL의 맥락에서 절대와 상대의 차이가 무엇을 의미하는 지 살펴볼 것이다.
URL의 필수 부분은 URL이 사용되는 컨텍스트에 따라 크게 달라진다. 브라우저의 주소 표시줄에서 URL에는 아무 맥락이 없기 때문에 위에서 본 것과 같은 전체(or 절대) URL을 제공해야 한다. 전체 URL의 경우 프로토콜이나 포트를 포함할 필요는 없지만 URL의 다른 모든 부분은 필요하다.
URL이 HTML 페이지와 같은 문서 내에서 사용되는 경우, 상황이 약간 다르다. 브라우저에는 이미 문서 고유의 URL이 있기 때문에 이 정보를 사용해 해당 문서 내에서 사용할 수 있는 URL의 누락된 부분을 채울 수 있다.
URL의 경로 부분만 보면 절대 URL과 상대 URL을 구별 할 수 있다. URL의 경로 부분이 /문자로 시작하는 경우 브라우저는 현재 문서에서 제공하는 맥락을 참조하지 않고 서버의 최상위 루트에서 해당 리소스를 가져온다.
시맨틱 URL(semantic URL)
시맨틱 URL은 한국어로 하면 간편 URL이라 부를 수 있을 것이다. 사용자 친화적, 검색엔진 친화적 URL이라 하는데, 그 이유는 깔끔하지 않은 형식의 URL에 비해 기억하기 쉽고 입력하기 쉽다는 점이다.
매우 기술적인 특징이라 읽기 어렵지만 URL은 사람이 읽을 수 있는 웹사이트 진입점을 나타낸다. 기억할 수 있고 누구나 브라우저의 주소 표시줄에 입력할 수 있다.
웹의 핵심은 사람이기 때문에 사용성과 접근성을 높이고 불필요한 부분을 제거해 URL을 기억하기 쉽다는 점이 모범사례로 간주된다.
