brunch

매거진 IT 프로젝트 협업 노하우

라이킷 17 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 벨킴 Oct 26. 2023

클라이언트/서버, 프론트/백엔드, HTML/CSS란?

웹 (Web) 관련 기본 용어

웹을 개발하다 보면 혹은 기획하다 보면 자주 듣게 되는 용어들이 있습니다.

바로 클라이언트, 서버, 프론트, 백엔드, HTML, CSS인데요. 어렴풋이 아는 것 같지만 막상 검색해 보아도 잘 이해가 안 가는 분들을 위해 최대한 쉽게 설명해보고자 하였습니다.

먼저, 웹(Web)이란 웹은 인터넷상의 문서(웹페이지)들이 서로 연결되어 있어 사람들이 정보를 공유하고 이용할 수 있게끔 연결해 주는 서비스입니다.

여러 개의 문서는 서로 연결되어 있고 계속 생성되어 마치 거미줄(Web)의 모습을 연상시키기 때문에 웹이라는 이름이 탄생되었습니다.

그럼 웹을 구현하기 위해서 알아야 하는 기본 용어들에 대해서 하나씩 설명하겠습니다.

클라이언트 vs. 서버

서버(Server)

서버란 다른 컴퓨터나 사용자에게 정보를 제공(serve)하는 역할을 수행한다는 의미에서 유래된 단어입니다.

웹사이트의 문서들은 이곳저곳 여러 서버에 저장이 되어 있습니다. 예를 들어, 네이버의 웹페이지와 데이터는 네이버 회사의 서버에 저장이 되어 있고, 구글의 문서들은 구글 서버에 저장됩니다. 사용자가 네이버 웹사이트의 정보를 보고 싶으면 네이버의 서버가 정보를 제공합니다.

클라이언트(Client)

여러 서버에 저장이 되어 있는 문서를 보고 싶을 때 사용자가 웹 내에 있는 문서를 탐색할 수 있게 해주는 것이 클라이언트입니다.

서버의 입장에선 문서를 제공해 달라고 요청하는 고객인 셈입니다.

클라이언트는 브라우저(browser) 또는 웹 브라우저(web browser)라고 불리기도 합니다. 우리가 인터넷을 할 때 접속하는 인터넷 익스플로러, 사파리, 크롬 등이 웹 브라우저입니다. 우리는 이러한 브라우저를 통해 웹 페이지에 접근할 수 있습니다.

프론트엔드 vs. 백엔드

프론트엔드(Front-End) 개발자

프론트엔드 개발자는 사용자가 접하는 웹 사이트나 앱의 사용자 인터페이스(UI)를 개발하는 역할을 합니다. 사용자가 웹 사이트나 앱을 쉽게 이용하고 매력적인 경험을 할 수 있도록 웹 사이트의 레이아웃을 배치하고, 글꼴, 버튼, 인터렉션 등을 구현합니다.

웹사이트를 하나의 집에 비유하였을 때, 마치 집의 외관을 꾸미는 것과 유사합니다. 문, 창문, 벽지, 수도꼭지와 같이 집안 내에서 사용하는 구성품들을 배치하고 잘 사용할 수 있도록 만듭니다.

백엔드(Back-End) 개발자

사용자가 요청한 일을 수행하기 위해 필요한 작업을 처리할 수 있도록 시스템을 설계하는 개발자입니다. 사용자 눈에는 보이지 않는 곳(Back-End)에서 발생하는 일을 담당합니다. 예를 들어, 사용자가 로그인 화면에서 아이디와 비밀번호를 입력하여 로그인 버튼을 누르면, 백엔드 개발자는 해당 사용자 정보가 올바른지 확인하고 로그인 기능을 처리합니다.

또한 백엔드 개발자는 데이터를 처리하고 다루는 역할도 수행합니다. 예를 들어, 사용자가 비밀번호 변경을 요청하면 백엔드 개발자는 해당 비밀번호(데이터)가 변경되게 만듭니다. 프론트엔드의 UI를 수도꼭지에 비유한다면, 백엔드 개발자는 물이 원활히 흘러가도록 배관 시스템을 설계하고 물(데이터)을 관리하며 처리하는 역할을 담당합니다.