brunch

연재 중 비전공자여도 괜찮은 IT 지식 02화

라이킷 299 댓글 4

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 고코더 Dec 13. 2023

웹이 뭐지..? HTTP가 뭘까?

2. HTTP

2-1. HTTP란?

HTTP 어디선가 많이 들어본 낯설지 않은 네 글자입니다. 이 단어는 'Hyper Text Transfer Protocol'의 줄임말입니다. 여기서 하이퍼 텍스트(Hyper Text)란 컴퓨터나 스마트폰 화면에서 볼 수 있는 그 텍스트 글자를 말합니다. 그리고 트랜스퍼(Transfe)는 전달이라는 뜻입니다. 쉽게 말해 웹 상에 데이터를 HTTP에 의해 전달된다는 뜻입니다. 그리고 마지막으로 규칙(Protocol)입니다. 자연스럽게 뜻을 합쳐보면 "텍스트 전달 규칙"이라고 해석이 가능합니다. 그렇습니다. HTTP는 텍스트를 전달하는 규칙을 말합니다.

그렇다면 굉장히 복잡해 보이는 '텍스트 전달 규칙'은 어떻게 사용해야 할까요? 다행히 우리는 이 규칙을 숙지하고 있지 않아도 쉽게 인터넷을 사용할 수 있습니다. 우리는 마우스와 키보드로 원하는 명령을 내리면 브라우저가 해당 HTTP로 통신하여 텍스트를 전달하고 받아오는 모든 것을 대신 처리해 주기 때문입니다. 그래도 한 가지 규칙 정도는 알아두어도 좋은 게 있습니다. 여러분들도 잘 아는 바로 URL입니다. 만약 구글 서비스에 접속하고 싶다면 www.google.com 해당 도메인을 URL에 입력해야 합니다. 주소를 입력하는 건 사용자가 인터넷을 사용하는 최소한 노력입니다. 하지만 브라우저에 발전으로 주소창에 검색을 하면 자동으로 검색을 실행하기 때문에 이제는 도메인조차 외우지 않고 사이트 이름만 알아도 접속이 가능한 시대에 살고 있습니다.

2-2. HTTP 요청과 응답이란

HTTP는 클라이언트와 서버 간의 규칙입니다. 다시 말하면 여러분과 웹사이트의 규칙입니다. 우리가 아마존 사이트에서 물건을 구매하기 위해 장바구니에 담을 때 사용자는 아마존 서버에 요청을 보냅니다. 이때의 요청을 'HTTP Request'라고 합니다. 그러면 아마존은 상품을 잘 담았다는 메시지를 띄워주고 장바구니 아이콘에 한 개 담았다는 표시로 '1'이라는 표시를 보여줍니다. 이러한 서버의 응답을 바로 'HTTP Response'라고 합니다.

신기하고 재밌는 실습을 한번 해보도록 하겠습니다. 요청과 응답을 어떻게 주고받는지 몰래 훔쳐볼 수 있는 방법이 있습니다. 바로 크롬 브라우저로 말이죠. 어렵지 않으니 차근차근 따라와 보시길 바랍니다. 크롬을 실행해 아마존(www.amazon.com)에 접속합니다. 그리고 키보드에 F12를 클릭합니다. 그럼 브라우저 한쪽에 '개발자 도구'가 실행됩니다. 이 도구는 실제로 개발자들이 코딩을 할 때 자주 사용하는 도구로 사용자와 웹사이트의 상호 관계를 확인할 수 있습니다. 물론 요청과 응답도 확인이 가능합니다. 개발자 도구의 상단에 탭을 자세히 보시면 'Network'라는 버튼이 있습니다. 이를 클릭하고 중간에 보이는 'Fetch/XHR'를 클릭합니다. 이렇게 하면 서버의 요청과 응답을 확인할 수 있도록 필터를 걸어주는 것입니다. 다른 버튼들을 보면 img를 클릭하면 사이트가 이미지만 볼 수 있고 'media'를 클릭하면 영상들만 볼 수 있습니다.

2-3. HTTP 요청

아마존에서 상품에 들어가 아무 상품에 들어가 옵션을 클릭하였습니다. 그러더니 이렇게 오른쪽 Name① 이란 항목에 여러 요청과 응답을 처리한 내역들을 확인하실 수 있습니다. 그리고 Payload를 눌러보겠습니다. 페이로드(payload)란 서버에 전송하는 데이터를 뜻합니다. 앞서 배운 요청을 했다는 말입니다. 이 말의 어원은 돈(pay)을 지불한 화물(Load)이란 뜻으로 원하는 응답 값을 얻기 위해 요청값을 지불한다고 생각하시면 될 거 같습니다.

요청값을 좀 더 자세히 살펴보겠습니다. 우리는 아마존 개발자가 아니므로 이 요청의 뜻을 모두 알 수가 없습니다. 하지만 대략적으로 유추해 보면 'acAsin' 값은 상품의 고유한 코드 값으로 확인할 수 있습니다. 해당 값을 복사해 아마존에 검색하면 우리가 보고 있는 상품이 검색됩니다. 이렇게 요청은 서버가 해석할 수 있는 데이터들의 집합입니다. 그러므로 개발자들이 머리를 맞대어 규칙을 정하기 때문에 사이트의 요청 값은 대부분 다르게 구성되어 있습니다.

2-4. HTTP 응답

이번에는 응답 값을 확인해 보겠습니다. repose라는 탭을 클릭하면 복잡한 응답 값들이 보입니다. 이 부분은 바로 응답 본문이라고 합니다. 여기에는 HTML을 포함한 코드를 응답해주기도 하고 이렇게 필요한 정보만 json에 담아 보내어 정보를 노출하기도 합니다. 현재 화면에 보이는 방식은 json으로 옵션을 변경할 때에 정보를 아마존 서버에서 보내온 값입니다. 이를 해석해서 현재 우리가 보고 있는 상품의 옵션이나 가격등의 정보를 변경할 것입니다. 역시 아마존에서 사용하는 규칙이라 정확히 알 수는 없지만 'Asin'이라는 항목은 요청과 똑같이 상품의 고유 코드를 다르고 있습니다. 아마존은 아마도 'Asin'이라는 코드는 상품을 의미한다는 걸 유추할 수 있습니다.

2-5. HTTP 헤더

이번에는 'header'로 이동해 보겠습니다. 이 탭에서는 요청과 응답에 대한 부가적인 정보를 확인할 수 있습니다. 마치 본문이 편지지라면 헤더 값은 편지봉투라고 할 수 있습니다. 부가적인 정보는 키와 값으로 구성되어 있습니다. 쉽게 말해 이름과 내용이 있는 것입니다. 이러한 헤더 값은 "요청자", "요청 URL", "콘텐츠 타입", "현재 URL" 등등 수십 가지가 존재합니다. 그리고 직접 개발자가 헤더의 요청 값을 만들어 보낼 수 도 있습니다. 이렇게 요청과 응답의 부가적인 정보를 보내주면 개발자는 이 정보를 받아서 본문을 어떻게 활용해야 할지 힌트를 얻기도 합니다. 예를 들면 글로벌 서비스를 제작한다고 하면 서비스되는 국가에 따라 요청값 헤더에 그 나라의 고유 코드를 입력해 주는 방법입니다. 'Accept-Language'라는 헤더 값에 'KR' 대신 'EN'을 담아 보내주면 서버에서는 이를 통해 미국에서 접속한 사용자로 인식해 글자를 모두 영문으로 보여줄 것입니다. 이렇게 헤더는 쉽게 데이터의 속성을 구별할 수 있는 부가정보로 활용이 가능합니다.

2-5. HTTPS

이번에는 HTTPS입니다. HTTP라는 뜻에 S가 덧붙었습니다. 안전한(Secure)이라는 단어가 붙은 거 보니 눈치채셨죠? 바로 '안전한 텍스트 전달 규칙'입니다. 그런데 요즘은 HTTPS로 시작하는 인터넷 주소가 좀 더 보편적입니다. 오히려 HTTP로 시작하는 주소를 본지가 오래되었습니다. 그 이유는 HTTPS는 웹서버와 브라우저간 정보를 암호화된 상태로 주고받는 받습니다. 정보가 노출되어도 암호화되어 있기 때문에 안전합니다. 그래서 S의 약자가 안전한이라는 뜻입니다. HTTP는 정보를 평문으로 주고받기 때문에 오가는 정보를 중간에서 가로채기가 쉬운 점이 있습니다.

HTTPS 이해하기 위해서는 SSL 디지털 인증서를 이해해야 합니다. 이 인증서는 사용자와 웹사이트 간에 안전한 통신을 보장해 주는 문서입니다. 마치 사원증으로 회사 문을 열 수 있듯이 이 SSL 인증서를 가지고 사이트에 접속을 안전하게 할 수 있도록 도와주는 것입니다. SSL를 통한 암호화 통신은 총 세 단계로 나눌 수 있습니다.

이 과정은 사람이 만나는 과정과 유사합니다. 첫 번째로 악수를 합니다. 'SSL 핸드셰이크'를 수행합니다. 이때 데이터를 주고받기 위해 어떤 방법을 사용해야 하는지 서로의 상태를 파악합니다. 기존의 HTTP는 443번 포트를 사용하지만 이때 SSL은 80번 포트를 사용합니다. 이 포트 번호 또한 약속입니다. 사용자와 인증서의 협상이 완료되면, SSL 세션이 생성됩니다. 이제 암호화된 정보를 클라이언트와 서버는 원하는 데이터를 주고받을 수 있게 됩니다. 그리고 데이터 전송의 끝을 서로에게 알리며 세션을 종료합니다.