[비전공자를 위한 웹 개발] 01. 웹 아키텍처의 이해: 브라우저와 서버가 데이터를 주고받는 방법

웹 서비스를 이용할 때 우리는 단순히 화면을 보고 있다고 생각하지만, 실제로는 눈에 보이지 않는 거대한 통신이 실시간으로 일어나고 있다. 이 과정을 이해하는 것은 개발의 첫 단추를 끼우는 일이며, 시스템의 전체적인 지도를 그리는 기초가 된다.

요청과 응답의 순환

웹의 작동 원리는 요청(Request)과 응답(Response)이라는 두 단어로 요약할 수 있다.

• 클라이언트(Client): 서비스를 요청하는 주체다. 우리가 매일 사용하는 브라우저가 여기에 해당하며, 식당으로 치면 메뉴를 고르고 주문을 넣는 손님과 같다.

• 서버(Server): 요청을 받아 처리하고 답을 주는 주체다. 주문받은 요리를 만들어 내놓는 주방의 역할을 한다.

우리가 브라우저 주소창에 주소를 입력하고 엔터를 치는 순간, 클라이언트는 서버에게 필요한 데이터를 달라며 요청을 보낸다. 서버는 이 요청을 확인한 뒤 준비된 데이터를 챙겨 응답을 돌려준다. 브라우저는 이 응답을 받아서 우리가 볼 수 있는 화면으로 그려낸다.

키포인트

웹 개발시 문제가 발생했을 때 그 원인이 어디에 있는지 파악할 수 있어야 한다. 요청 자체가 잘못되었는지, 서버의 처리에 문제가 생겼는지, 아니면 브라우저가 화면을 그리는 과정에서 오류가 났는지 구분하는 것이 중요하다. 이 위치를 정확히 알아야 AI에게도 "서버 응답 데이터는 정상인데 브라우저 화면이 이상해"와 같이 정확한 지시를 내릴 수 있다.

더 공부하면 좋은 것들

추천 자료

• 검색 키워드: 구글 이미지에서 Client Server Model을 검색하여 데이터가 오고 가는 흐름도 파악.

• 공식 문서: MDN Web Docs의 웹 입문 섹션에서 HTTP라는 용어가 무엇인지 찾아보기.

AI에게 질문하기

• 브라우저 주소창에 URL을 입력했을 때, 실제 서버의 위치를 찾아내는 DNS의 역할을 비전공자 수준에서 설명해줘.

• 웹 사이트에서 로그인 버튼을 눌렀을 때, 클라이언트와 서버 사이에서 오고 가는 데이터의 흐름을 단계별로 설명해줘.

• 서버가 보내주는 데이터가 브라우저에서 화면으로 그려지는 과정을 렌더링(Rendering) 관점에서 설명해줘.