클라이언트/서버, 프론트/백엔드, HTML/CSS란?
웹 (Web) 관련 기본 용어
웹을 개발하다 보면 혹은 기획하다 보면 자주 듣게 되는 용어들이 있습니다.
바로 클라이언트, 서버, 프론트, 백엔드, HTML, CSS인데요. 어렴풋이 아는 것 같지만 막상 검색해 보아도 잘 이해가 안 가는 분들을 위해 최대한 쉽게 설명해보고자 하였습니다.
먼저, 웹(Web)이란 웹은 인터넷상의 문서(웹페이지)들이 서로 연결되어 있어 사람들이 정보를 공유하고 이용할 수 있게끔 연결해 주는 서비스입니다.
여러 개의 문서는 서로 연결되어 있고 계속 생성되어 마치 거미줄(Web)의 모습을 연상시키기 때문에 웹이라는 이름이 탄생되었습니다.
그럼 웹을 구현하기 위해서 알아야 하는 기본 용어들에 대해서 하나씩 설명하겠습니다.
클라이언트 vs. 서버
서버(Server)
서버란 다른 컴퓨터나 사용자에게 정보를 제공(serve)하는 역할을 수행한다는 의미에서 유래된 단어입니다.
웹사이트의 문서들은 이곳저곳 여러 서버에 저장이 되어 있습니다. 예를 들어, 네이버의 웹페이지와 데이터는 네이버 회사의 서버에 저장이 되어 있고, 구글의 문서들은 구글 서버에 저장됩니다. 사용자가 네이버 웹사이트의 정보를 보고 싶으면 네이버의 서버가 정보를 제공합니다.
클라이언트(Client)
여러 서버에 저장이 되어 있는 문서를 보고 싶을 때 사용자가 웹 내에 있는 문서를 탐색할 수 있게 해주는 것이 클라이언트입니다.
서버의 입장에선 문서를 제공해 달라고 요청하는 고객인 셈입니다.
클라이언트는 브라우저(browser) 또는 웹 브라우저(web browser)라고 불리기도 합니다. 우리가 인터넷을 할 때 접속하는 인터넷 익스플로러, 사파리, 크롬 등이 웹 브라우저입니다. 우리는 이러한 브라우저를 통해 웹 페이지에 접근할 수 있습니다.
프론트엔드 vs. 백엔드
프론트엔드 vs. 백엔드프론트엔드(Front-End) 개발자
프론트엔드 개발자는 사용자가 접하는 웹 사이트나 앱의 사용자 인터페이스(UI)를 개발하는 역할을 합니다. 사용자가 웹 사이트나 앱을 쉽게 이용하고 매력적인 경험을 할 수 있도록 웹 사이트의 레이아웃을 배치하고, 글꼴, 버튼, 인터렉션 등을 구현합니다.
웹사이트를 하나의 집에 비유하였을 때, 마치 집의 외관을 꾸미는 것과 유사합니다. 문, 창문, 벽지, 수도꼭지와 같이 집안 내에서 사용하는 구성품들을 배치하고 잘 사용할 수 있도록 만듭니다.
백엔드(Back-End) 개발자
사용자가 요청한 일을 수행하기 위해 필요한 작업을 처리할 수 있도록 시스템을 설계하는 개발자입니다. 사용자 눈에는 보이지 않는 곳(Back-End)에서 발생하는 일을 담당합니다. 예를 들어, 사용자가 로그인 화면에서 아이디와 비밀번호를 입력하여 로그인 버튼을 누르면, 백엔드 개발자는 해당 사용자 정보가 올바른지 확인하고 로그인 기능을 처리합니다.
또한 백엔드 개발자는 데이터를 처리하고 다루는 역할도 수행합니다. 예를 들어, 사용자가 비밀번호 변경을 요청하면 백엔드 개발자는 해당 비밀번호(데이터)가 변경되게 만듭니다. 프론트엔드의 UI를 수도꼭지에 비유한다면, 백엔드 개발자는 물이 원활히 흘러가도록 배관 시스템을 설계하고 물(데이터)을 관리하며 처리하는 역할을 담당합니다.
프론트엔드 & 백엔드 개발자HTML
HTML은 웹 페이지 내의 요소와 구조를 만드는 데 사용하는 언어입니다.
웹 페이지를 만드는 과정을 파워포인트로 발표자료를 만드는 상황과 비교하여 설명하겠습니다. 파워포인트로 발표 자료를 만들 때는 제목, 내용, 이미지, 페이지 번호 등과 같은 구성 요소들을 사용하여 발표 자료를 디자인합니다.
웹 페이지를 만드는 것도 이와 유사합니다. 웹 페이지를 통해 보여주고 싶은 내용과 구성요소들을 생각하고 레이아웃을 구성합니다. 이때 HTML이라는 언어를 사용하여 내용과 구성 요소들을 정의한 문서를 만듭니다.
웹 브라우저에서 정의한 문서를 전달하면, 웹 브라우저는 이 문서에 적혀있는 대로 사용자에게 웹 페이지를 보여줍니다.
HTML : 웹 페이지의 요소와 구조를 만드는 데 사용하는 언어CSS(Cascading Style Sheet)
웹 페이지 제작 과정을 파워포인트로 발표 자료를 만드는 상황과 다시 비교해 보겠습니다.
자료에서 제목 색을 파란색으로 지정하고자 합니다. 여러 페이지의 제목 색을 수정하기 위해 일일이 각 페이지를 열어 색상을 바꿀 수도 있지만, '슬라이드 마스터' 기능을 활용하여 일괄적으로 모든 제목에 동일한 서식을 적용할 수 있습니다.
마찬가지로, 웹 페이지에서도 CSS라는 기술을 활용하여 웹 페이지의 글꼴, 색상, 버튼 크기 등의 스타일과 레이아웃을 효율적으로 관리하고 일관성 있게 꾸밀 수 있습니다.
CSS : 웹 페이지의 스타일과 레이아웃을 일관성 있게 꾸미기 위해 사용하는 기술