웹 개발 기본기 다지기 | 웹 서버, 클라이언트, 프론트엔드, 백엔드

웹 개발 공부의 시작은 기본 개념을 제대로 이해하는 것입니다. 8년차 현직 웹 개발자와 함께 웹 서버, 클라이언트, 프론트엔드, 백엔드가 무엇인지 짚고 넘어가 보세요.

Mar 06, 2024

Contents

1. 웹, 웹 서버, 웹 서비스 2. 서버의 기능 3. 프론트엔드, 백엔드, 클라이언트의 개념과 서버와의 관계 내일배움캠프와 함께 기본기가 탄탄한 개발자로 성장하세요

내일배움캠프에서는 수강생들의 효과적인 학습 전략 수립과 궁금증 해소를 위해 현직자 튜터님이 틈틈이 특강을 진행하고 있습니다. 오늘은 8년 차 웹 개발자 최원장 튜터 님이 웹 개발을 막 시작하는 수강생들과 함께 기본 개념을 간단하게 정리하는 시간을 가졌습니다. 개념을 직접 설명할 수 있을 정도로 스스로 정리되어 있다면, 어려운 프로젝트를 만나더라도 본질로 돌아가 효과적으로 해결할 수 있을 것입니다. 웹 개발 입문자거나 여러 용어들로 기본 개념을 잠시 잊은 사람이라면 이번 특강으로 다시 떠올려 보세요. 특강 일부를 재구성하여 전해드립니다.

1. 웹, 웹 서버, 웹 서비스

웹, 웹 서버, 웹 서비스는 하나로 연결된 개념입니다. 우선 웹은 인터넷에 연결된 사용자들이 서로의 정보를 공유하는 공간입니다. 사용자들은 웹 안에서 여러 가지 요청을 하고, 그 요청에 따라 웹 서버는 페이지 제공, 데이터 입력, 이메일 요청 등 다양하게 응답합니다. 마치 여러분이 식당에 갔을 때, 직원은 여러분이 요청하는 대로 음식을 제공하거나 서비스를 제공하는 것처럼요. 즉, 클라이언트의 요청에 응답하는 프로그램을 웹 서버, 이용자가 누리는 서비스를 웹 서비스, 그리고 그 행위가 모두 이루어지는 인터넷으로 연결된 공간이 웹입니다. 바로 여기에서 웹 서비스를 설계, 제작, 관리하는 사람이 바로 여러분, 웹 개발자입니다.

웹 서버는 컴퓨터로 작동됩니다. 여러분의 컴퓨터도 웹 서버가 될 수 있습니다. 그러나 보통 서버에는 무수히 많은 유저들이 동시에 접속해 있고, 기업마다 이를 모두 처리할 용량을 가진 컴퓨터를 갖추기는 어렵습니다. 그래서 대부분 기존의 물리적 서버를 가상화한 클라우드 서버를 이용합니다. 클라우드 서버는 위치에 제한되지 않고, 데이터 용량의 증설이나 확장이 간편합니다. 또한 스케일링이 가능해서, 이용자의 요구 사항에 따라 빠르게 조정할 수도 있죠.

2. 서버의 기능

서버는 “해당 프로그램 내부에 설계된 요청을 포착하는 부분”과 “요청에 따라 서비스를 실시하고 응답을 제공하는 부분”으로 이루어져 있습니다. 로직이 요청을 파악하여 일을 분배하고 클라이언트에 돌아와서 응답을 해주는 방식인데요. 이때, HTTP라는 약속된 규약 안에서 URL과 Method(GET, POST, PUT, PATCH, DELETE)의 조합으로 요청합니다. 이외에도 서버는 여러 기능을 가지고 있는데요. 그중에서 가장 중요한 두 가지를 알아봅시다.

1) 정적 페이지 제공

정적 페이지(Static Web Page)란, 웹 서버에 저장된 파일(이미지, HTML 파일, JavaScript 파일 등)을 전송하는 웹 페이지입니다. 포털 사이트에 접속했을 때 페이지가 띄워지거나 어떤 아이콘을 클릭했을 때 여러분이 원하는 웹 페이지가 송출되는 장면을 떠올리시면 되는데요. 동일한 요청을 했을 때, 모든 사용자는 같은 결과의 웹 페이지를 보게 됩니다.

2) API 제공

API (Application Programming Interface)는 여러 소프트웨어 간에 정보나 기능을 공유하는 중간 매개체로 소프트웨어끼리 통신하는 방법을 정의한 것입니다. 예를 들어 우리가 휴대폰의 날씨 앱으로 최신 기상 데이터를 볼 수 있는 이유는 날씨 앱이 API로 기상청의 소프트웨어 시스템과 소통하기 때문이죠. 개발자들은 API를 주로 JSON 또는 XML 형식으로 확인할 수 있습니다. 대표적인 API 유형으로는 레스트풀 API(RESTful API)와 GraphQL이 있습니다.

3. 프론트엔드, 백엔드, 클라이언트의 개념과 서버와의 관계

웹 서버는 프론트엔드와 백엔드로 구성되어 있습니다. 프론트엔드는 사용자가 보는 웹 페이지나 모바일 앱의 외관을 담당하며, HTML, CSS, JavaScript 등으로 만들어집니다. 프론트엔드를 더욱 효율적으로 개발하기 위해 React, View, Angular와 같은 여러 라이브러리와 프레임워크가 사용되고 있습니다.

백엔드는 서버가 데이터베이스에 요청을 할 때 특정 API와 통신하면서 그 요청을 처리하거나 저장하는 역할입니다. 주로 데이터와 논리적인 부분을 다루며, Spring, 파이썬, 장고(Django) 혹은 플라스크(Flask)와 같은 프레임워크를 사용하여 구현됩니다.

클라이언트란 서버의 서비스를 받아 사용하는 장치 혹은 프로그램으로, 요청하는 주체입니다. 만약 여러분이 브라우저라는 도구를 활용하여 웹 서버에 요청한다면, 여러분과 브라우저가 클라이언트가 되는 것이죠.

간혹 프론트엔드를 클라이언트, 백엔드를 서버라고 오해하는 경우가 있습니다. 하지만 클라이언트와 서버는 상대적인 개념입니다. 클라이언트가 무엇인지에 따라 서버는 프론트엔드 일 수도, 백엔드일 수도 있습니다. 요청의 주체가 무엇인지 확인한 후 클라이언트와 서버를 판단해야 합니다.