EP8. 웹 브라우저와 서버의 상호작용

---

웹 브라우저는 서버와 여러 방식으로 상호작용한다

 

웹 브라우저는 단순히 화면만 보여주는 프로그램이 아니라,

사용자의 행동에 따라 서버에 요청을 보내고 그 결과를 받아 화면에 반영하는 클라이언트다.

 

우리가 웹사이트를 사용할 때는 그냥 버튼을 누르고 페이지가 바뀌는 것처럼 보이지만,

실제로는 브라우저가 서버와 여러 방식으로 상호작용하고 있다.

 

---

1. URL을 통한 접속

 

가장 기본적인 상호작용 방식은 URL을 통해 특정 페이지나 자원에 접속하는 것이다.

 

사용자가 브라우저 주소창에 주소를 입력하거나,

페이지 안에 있는 링크를 클릭하면 브라우저는 해당 URL로 요청을 보낸다.

 

예를 들어 사용자가 http://localhost:8080/hello 같은 주소를 입력하면,

브라우저는 해당 경로에 대해 서버로 요청을 보낸다.

 

이때는 특별한 설정이 없는 한 주로 GET 메서드를 사용하게 된다.

GET은 말 그대로 서버에 어떤 데이터를 요청하거나, 특정 페이지를 조회할 때 많이 쓰이는 방식이다.

즉, URL을 통한 접속은 “무언가를 보러 간다”, “페이지를 조회한다”는 성격이 강하다.

 

다만 이 방법은 주로 조회 중심이며, 사용자의 입력 데이터를 복잡하게 전달하는 데는 적합하지 않을 수 있다.

그래서 단순한 페이지 이동이나 문서 조회는 URL 접속으로,

사용자 입력을 포함한 상호작용은 form이나 AJAX 같은 다른 방식으로 이어지는 경우가 많다.

 

---

2. form 태그를 사용한 제출

 

두 번째 방식은 HTML의 form 태그를 사용해 데이터를 제출하는 것이다.

 

이 방식은 주로 사용자가 입력창에 값을 넣고, 그 값을 서버로 전송해야 할 때 사용된다.

대표적인 예로는 로그인, 회원가입, 게시글 작성, 검색창 입력 같은 기능이 있다.

 

form은 사용자가 입력한 데이터를 하나로 모아 서버에 보내는 역할을 한다.

 

예를 들어 제목과 내용 입력칸이 있는 글쓰기 페이지가 있다면,

사용자가 값을 입력하고 제출 버튼을 누르는 순간 브라우저는 form에 담긴 데이터를 서버로 전송한다.

이때 어떤 URL로 보낼지, 어떤 HTTP 메서드를 사용할지는 form 태그의 action과 method 속성으로 지정할 수 있다.

 

form 제출은 URL 접속보다 더 적극적인 사용자 입력 중심의 상호작용이라고 볼 수 있다.

단순히 페이지를 조회하는 것이 아니라,

사용자가 무언가를 입력하고 그 결과를 서버가 처리하도록 맡기는 방식이기 때문이다.

 

예를 들어 로그인 form이라면 브라우저가 아이디와 비밀번호를 서버에 보내고,

서버는 그 값을 검증한 뒤 로그인 성공 여부를 응답하게 된다.

 

---

3. XHR을 이용한 AJAX 요청

 

세 번째 방식은 XHR(XMLHttpRequest)을 이용한 AJAX 요청이다.

 

요즘 웹 서비스에서 매우 자주 쓰이는 방식이며,

현대적인 프론트엔드와 백엔드 API 통신의 핵심이라고 볼 수 있다.

 

이 방식의 가장 큰 특징은 페이지 전체를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있다는 점이다.

 

기존의 URL 접속이나 form 제출은 대체로 요청을 보내면 페이지 전체가 다시 로드되는 경우가 많았다.

하지만 AJAX 요청은 현재 페이지를 유지한 채 필요한 데이터만 따로 받아와서 화면 일부만 바꿀 수 있다.

 

예를 들어 검색 자동완성, 좋아요 버튼, 댓글 목록 갱신, 무한 스크롤, 대시보드 데이터 갱신 같은 기능은

대부분 이런 방식으로 동작한다.

 

브라우저 내부의 자바스크립트가 XHR이나 fetch 같은 기능을 사용해 서버에 요청을 보내면,

서버는 보통 HTML 전체가 아니라 JSON 같은 데이터 형식으로 응답한다.

그러면 브라우저는 그 데이터를 받아 현재 화면에 필요한 부분만 다시 렌더링한다.

그래서 사용자는 페이지가 통째로 새로고침되지 않더라도, 마치 실시간으로 화면이 바뀌는 것처럼 느끼게 된다.

 

백엔드 개발자가 흔히 말하는 “API를 만든다”는 것도 대부분 이 방식을 염두에 둔 경우가 많다.

프론트엔드가 AJAX 방식으로 요청을 보낼 것을 전제로,

백엔드는 JSON 데이터를 주고받는 API를 설계하고 구현하는 것이다.

 

---

4. 웹 소켓을 통한 연결

 

앞의 방식들은 모두 기본적으로 클라이언트가 먼저 요청을 시작해야 한다는 공통점이 있다.

 

사용자가 URL을 입력하거나, form을 제출하거나, 자바스크립트가 AJAX 요청을 보내야만 서버가 응답할 수 있다.

즉, 상호작용의 시작점이 항상 클라이언트 쪽에 있다.

 

하지만 어떤 서비스는 서버가 먼저 클라이언트에게 데이터를 보내줘야 할 필요가 있다.

대표적인 예가 채팅이다.

 

내가 아무 행동을 하지 않아도 상대방이 메시지를 보내면 내 화면에 바로 도착해야 한다.

이런 상황에서는 매번 클라이언트가 “새 메시지 있나요?”라고 반복 요청하는 것보다,

서버와 지속적인 연결을 맺고 있다가 서버가 필요할 때 바로 데이터를 보내주는 방식이 훨씬 적합하다.

이때 사용하는 것이 웹 소켓(WebSocket) 이다.

 

웹 소켓은 브라우저와 서버 사이에 한 번 연결이 성립되면,

그 연결을 유지한 상태에서 양방향으로 데이터를 주고받을 수 있게 해준다.

즉, 클라이언트도 서버에 메시지를 보낼 수 있고, 서버도 필요할 때 클라이언트에 바로 메시지를 밀어넣을 수 있다.

그래서 채팅, 실시간 알림, 주식 시세, 게임 상태 동기화 같은 기능에서 자주 사용된다.

 

그리고 서버가 클라이언트에게 데이터를 보내는 방법으로는

웹 소켓 말고도 SSE(Server-Sent Events) 라는 방식이 있다.

 

SSE는 이름 그대로 서버가 클라이언트에게 이벤트를 보내는 방식인데,

웹 소켓처럼 완전한 양방향 통신은 아니고 서버에서 클라이언트로 단방향 전송을 할 때 적합하다.

즉, “서버가 사용자에게 지속적으로 새로운 정보를 밀어줘야 한다”는 점에서는 비슷하지만,

사용 목적과 통신 구조에서는 차이가 있다.