IT & Tech 용어정리

웹 통신의 신세계! 자바스크립트 & 서버 데이터 전송의 비밀

컴맹아재 2025. 5. 17. 13:00
반응형

안녕하십니까! 오늘도 어김없이 HTML5 책과 씨름하며 

IT 용어의 산을 넘고 있는 50대 컴맹 부산아재, 'it&tech 정보창고' 입니다.

지난번에는 웹 브라우저에 값을 저장하는 다양한 방법들에 대해 알아보았는데요, 

책장을 넘기니 이번에는 '자바스크립트를 사용한 통신' 그리고 '서버의 데이터 송신' 이라는, 

또다시 이해 안 되는 외계어들이 저를 기다리고 있었습니다. 


아니나 다를까, Web Messaging(웹 메시징)이니, 오리진(Origin)이니 하는 생소한 단어부터 시작해서, 

서버와 데이터를 주고받는 이야기에서는 Google API, Server-Sent Events(서버-센트 이벤트), 

Web Socket(웹 소켓) 같은 용어들이 마구 튀어나오더라고요. 

물론, 우리의 오랜 친구 HTTP와 HTTPS 이야기도 빠지지 않았습니다. ( 둘 중 하나가 보안강화 버전인 건 안다)

"아이고, 통신은 또 뭐고, 송신은 또 뭐란 말인가!" 싶었지만, 

이 또한 웹 애플리케이션을 이해하는 데 중요한 과정이라 생각하고, 

오늘도 컴맹 아재의 눈높이에서 이 용어들을 차근차근 정리해보려고 합니다. 

저와 함께 이 어려운 용어들, 한번 제대로 파헤쳐 보시죠!

 

언젠간 나도 나만의 홈페이지 만들고야 만다!

궁서체다.



컴맹 아재의 용어 정복기 ;

웹 통신의 신세계! 자바스크립트 & 서버 데이터 전송의 비밀

 

우리가 웹사이트를 이용하다 보면, 단순히 정보를 보는 것을 넘어 다양한 상호작용을 하게 됩니다.

다른 창에 메시지를 보내기도 하고, 실시간으로 업데이트되는 정보를 받기도 하죠.

이런 모든 것들이 웹페이지와 서버, 또는 웹페이지끼리 '대화(통신)'를 하기 때문에 가능한 일인데요.

오늘은 그 '대화법'에 대한 이야기입니다!


1. 자바스크립트, 옆집이랑도 말 통하네? - 웹 메시징과 오리진.

먼저, 자바스크립트를 이용해서 웹페이지의 서로 다른 부분들이나,

심지어 다른 창끼리도 소통할 수 있는 기술들을 알아봅시다.


웹 메시징 (Web Messaging) - "옆방에 쪽지 전달하기!"

이게 뭐꼬? 웹 메시징은 웹페이지 안의 서로 다른 창(window), 탭(tab), 또는 아이프레임(iframe, 웹페이지 안에 다른 웹페이지를 넣는 틀)끼리 안전하게 메시지를 주고받을 수 있게 하는 기술입니다.


- 쉬운 비유

: 마치 한집에 사는 가족들이 각자 다른 방에 있으면서, 방문을 두드리고 쪽지를 건네거나, "아무개야, 밥 먹어라!" 하고 소리쳐서 정보를 전달하는 것과 비슷하다고 생각하시면 됩니다. 서로 다른 웹 문서라도 정해진 방법을 통해 소통할 수 있게 되는 거죠.


- 왜 필요할까요?

예를 들어, 어떤 버튼을 누르면 새 창이 뜨면서 그 새 창에 특정 정보를 전달해야 할 때, 또는 웹페이지 안에 삽입된 다른 웹사이트(예: 유튜브 영상)와 정보를 주고받아야 할 때 유용하게 사용됩니다.

 

오리진 (Origin) - "우리가 남이가! (같은 출신만 믿는데이~)"

 

- 오리진이 뭐길래? 

웹 보안에서 아주 중요한 개념인데요, 웹사이트의 '출신 성분'이라고 생각하시면 됩니다. 

정확히는 **프로토콜(http, https), 호스트 이름(예: http://www.naver.com), 그리고 포트 번호(보통 생략됨) 이 세 가지가 모두 같아야 '같은 오리진(Same-Origin)'이라고 말합니다.


- 왜 중요할까요? (보안! 보안! 보안!)

기본적으로 웹 브라우저는 '동일 출처 정책(Same-Origin Policy)'이라는 규칙을 따릅니다.

이건 "같은 출신(오리진)끼리만 정보를 쉽게 주고받고,

다른 출신(다른 오리진)의 정보는 함부로 접근하거나 수정할 수 없도록 막겠다!"는 보안 규칙입니다.


- 쉬운 비유

: 우리 아파트 단지 주민들끼리는 서로 얼굴도 알고 어느 정도 믿으니까

"옆집인데, 김치 좀 빌려주이소~" 할 수 있지만,

갑자기 옆 동네 모르는 아저씨가 와서 "니 통장 비밀번호 뭐꼬?" 하면 절대 안 알려주잖아요?

그런 보안 장치라고 보시면 됩니다.


웹 메시징은 이러한 동일 출처 정책을 지키면서도, 필요한 경우 안전한 방식으로 서로 다른 오리진 간에 메시지를 주고받을 수 있는 방법을 제공하기도 합니다. (물론 이때는 서로 "우리 메시지 주고받기로 약속했지?" 하는 확인 절차가 필요하겠죠!)


2. 서버야, 데이터 좀 보내도! - 똑똑한 데이터 송수신 방법들 📡📊

이번에는 웹페이지(정확히는 우리 웹 브라우저)가

저 멀리 있는 서버 컴퓨터와 어떻게 데이터를 주고받는지,

그 다양한 '대화법'들을 살펴보겠습니다.


서버와의 데이터 통신, 기본 중의 기본! HTTP & HTTPS

 

- HTTP (HyperText Transfer Protocol)

: 우리가 웹서핑을 할 때 웹 브라우저와 웹 서버가 서로 정보를 주고받는 가장 기본적인 약속(프로토콜)입니다. 마치 "이 페이지 보여주세요!" (요청) 하면 서버가 "네, 여기 있습니다!" (응답) 하고 웹페이지를 보내주는 우편 시스템이나 택배 주문 방식과 같아요.


- HTTPS (HTTP Secure)

: HTTP에 보안(Secure) 기능이 추가된 것입니다.

우리가 주고받는 정보(아이디, 비밀번호, 카드 정보 등)를 암호화해서

중간에 누가 훔쳐보더라도 내용을 알 수 없게 만드는 '안전 잠금장치' 가 달린 우편 시스템이라고 생각하시면 됩니다.

요즘 대부분의 웹사이트는 이 HTTPS를 사용하죠!


Google API - "구글네 만능 데이터 자판기!" (서버 데이터 활용의 예시)

 API가 다른 프로그램의 기능을 쉽게 가져다 쓸 수 있는 '주문 창구'나 '사용 설명서'라고 지난번에 말씀드렸죠? Google API는 구글이라는 거대한 회사에서 제공하는 다양한 서비스(지도, 번역, 유튜브, 로그인 등)의 기능이나 데이터를 다른 개발자들이 자신의 웹사이트나 앱에서 쉽게 활용할 수 있도록 열어놓은 '정보 창구' 또는 '데이터 자판기' 같은 것입니다.


예를 들어, 제 블로그에 구글 지도를 넣고 싶다면, 구글 지도 API를 이용해서 "부산 해운대 지도 보여줘!" 하고 요청하면 구글 서버에서 해당 지도 데이터를 보내주는 식이죠. 제가 직접 지도를 만들 필요 없이 구글의 강력한 기능을 빌려 쓰는 겁니다!


Server-Sent Events (SSE) - "서버가 보내주는 실시간 알리미! (단방향 방송)" 📢

 이건 또 뭐하는 기술이꼬? 보통 HTTP는 우리가 요청해야 서버가 응답하는데,

SSE는 서버에서 클라이언트(웹 브라우저)로 데이터가 자동으로, 그리고 지속적으로 흘러들어오는 방식입니다.

마치 라디오 방송국에서 계속 최신 뉴스를 보내주거나,

증권사에서 주식 시세를 화면에 계속 업데이트해주는 것과 비슷해요.


- 특징

: 데이터가 서버에서 클라이언트로만 흐르는 단방향 통신입니다. 클라이언트가 매번 "새 소식 없어요?" 하고 물어볼 필요 없이, 서버가 알아서 "새 소식 있다!" 하고 보내주는 거죠.


- 어디에 쓰일까요? 

실시간 스포츠 경기 스코어 업데이트, 주식 가격 변동 알림, 새로운 댓글 알림 등 서버에서 지속적으로 업데이트되는 정보를 사용자에게 바로바로 보여주고 싶을 때 유용합니다.


Web Socket (웹 소켓) - "끊이지 않는 직통 전화! (양방향 실시간 대화)" 

 이건 또 SSE랑 뭐가 다를까요? SSE가 서버의 일방적인 방송이었다면,

웹 소켓은 클라이언트와 서버 사이에 마치 '직통 전화선'을 계속 연결해놓고,

양쪽에서 필요할 때마다 실시간으로 데이터를 주고받을 수 있는 양방향 통신 기술입니다.


- 특징

: 한번 연결이 되면 계속 그 통로를 유지하면서 양쪽 모두 원할 때 즉시 메시지를 보낼 수 있습니다.

마치 워키토키로 "오버, 들리나?" "잘 들린다, 오버!" 하고 계속 대화하는 것과 같아요.


- 어디에 쓰일까요? 

실시간 채팅 프로그램, 온라인 멀티플레이어 게임, 여러 사람이 동시에 문서를 편집하는 협업 도구 등 즉각적인 양방향 소통이 매우 중요한 서비스에 주로 사용됩니다. HTTP보다 훨씬 빠르고 효율적으로 실시간 데이터를 주고받을 수 있죠.
"아이고, 말 통하니 세상이 편하네! (아직은 어렵지만...)" 


오늘도 정말 많은 IT 용어들과 한바탕 씨름을 벌였네요! 

웹 메시징이니, 오리진이니, 구글 API에 서버-센트 이벤트, 웹 소켓까지... 

솔직히 컴맹 아재인 저에게는 여전히 어렵고 낯선 단어들 투성이입니다. 

하지만 이런 복잡한 통신 기술들이 있기에 우리가 오늘날 이렇게 편리하고 

다채로운 웹 세상을 경험할 수 있다는 것을 어렴풋이나마 알게 되었습니다. 

웹페이지끼리 서로 정보를 주고받고, 서버로부터 실시간으로 새로운 소식을 받으며, 

때로는 게임이나 채팅처럼 즉각적인 대화도 가능하게 해주는 고마운 기술들이죠!

이 모든 것을 당장 다 이해하고 활용할 수는 없겠지만, 

"아, 대충 이런 원리로 웹 세상이 돌아가는구나!" 하고 고개 한번 끄덕일 수 있다면 

그걸로도 큰 발전이라고 생각합니다. 

마치 외국어를 배우듯, 하나씩 단어를 익히고 문장 구조를 이해하다 보면 

언젠가는 술술 대화가 통하는 날이 오지 않겠습니까!

반응형