1강. 웹(Web)의 기본 구조와 프론트엔드/백엔드

728x90

우리가 흔히 쓰는 웹(Web)은 인터넷 세상에서 `HTTP(S)`라는 약속된 언어로 정보를 주고받는 공간을 말합니다.

*HTTP(HyperText Transfer Protocol): 손님과 직원이 대화할 때 "한국어"를 쓰듯이, 웹상에서 컴퓨터끼리 소통하기 위해 사용하는 '공통 언어(약속)'입니다.

이곳에는 정보를 주는 쪽(서버)과 정보를 받는 쪽(클라이언트)이 존재하는데,

이 관계는 '식당'에 비유하면 아주 쉽게 이해할 수 있습니다.

손님이 메뉴를 고르고 "주문(Request)"을 하면, 직원이 요리를 만들어서 식탁으로 "서빙(Response)"을 해줍니다. 웹도 이와 똑같이 요청과 응답으로 돌아갑니다.

조금 더 구체적인 예시를 들어볼까요?

주문 (요청, Request): 여러분이 인터넷 주소창에 https://hagsig.tistory.com을 입력하고 엔터를 치는 행위입니다. 마치 식당에서 "이 메뉴 주세요!" 하고 주문서를 넣는 것과 같습니다.
서빙 (응답, Response): 잠시 후 브라우저에 블로그 화면이 짠! 하고 나타나는 것입니다. 직원이 주방에서 만든 요리를 식탁에 차려주는 과정이죠.

그런데 이 맛있는 화면을 차려주기 위해, 식당 안에서는 '홀(Front-end)'과 '주방(Back-end)'이 아주 바쁘게 움직였다는 사실을 알고 계신가요?
그럼 이제 홀과 주방에서 각각 무슨 일을 했는지 자세히 알아봅시다.

웹 서비스는 크게 손님이 보는 영역(프론트엔드)과 직원들이 일하는 영역(백엔드)으로 나뉩니다.

프론트엔드는 이용자(Client)의 눈에 직접 보이는 화면입니다.

식당으로 치면 인테리어, 메뉴판, 그리고 음식이 서빙되는 테이블(홀)에 해당합니다.

이 화면을 구성하는 재료들을 웹 리소스(Web Resource)라고 하는데, 마치 '웹을 구성하는 3총사'와 같습니다.

구분	역할 (비유)	역할 및 설명
HTML (Hyper Text Markup Language)	건물 구조와 골조	식당의 기둥을 세우고, 테이블과 의자를 어디에 놓을지 배치하는 기초 공사입니다. 제목, 본문, 이미지 틀 등 문서의 전체적인 구조를 정의합니다.
CSS (Cascading Style Sheets)	인테리어와 장식	벽지를 바르고, 조명을 달고, 예쁜 식탁보를 까는 작업입니다. 식당을 보기 좋게 꾸며주는 역할을 합니다. 브라우저가 시각적으로 예쁘게 표현하도록 도와줍니다.
JavaScript (JS)	직원 호출 벨 / 키오스크	손님이 벨을 누르면 직원이 오거나, 키오스크 화면이 넘어가는 등 실제 기능이 작동하게 만듭니다. 버튼 클릭 시 반응, 데이터 전송 등의 기능 구현합니다.

아래와 같은 방법으로 화면을 구성하는 웹 리소스를 확인할 수 있습니다.

개발자 도구 (F12)
키보드의 F12를 눌러보세요. Elements 탭에서 지금 보고 있는 화면이 어떤 HTML과 CSS로 만들어졌는지 실시간으로 볼 수 있습니다.

프론트엔드에서 주문(요청)을 넣으면, 이용자의 눈에는 보이지 않지만 뒤에서 실제로 요리를 하고 데이터를 처리하는 곳이 바로 백엔드입니다.

식당으로치면 '주방(Kitchen)'과 '창고'가 해당됩니다.

백엔드는 크게 웹 서버 / 웹 어플리케이션 서버 / 데이터베이스 세 가지로 나뉘며, 서로 협력하여 움직입니다.

구분	역할 (비유)	역할 및 설명
웹 서버 (Web Server)	지배인 / 문지기	클라이언트의 요청을 가장 먼저 받습니다. 미리 만들어진 요리(이미지, HTML)는 바로 주고, 요리가 필요한 주문은 셰프(WAS)에게 넘깁니다.
WAS (Web App Server)	메인 셰프 (요리사)	지배인에게 주문을 받아 실제로 요리(프로그래밍)를 합니다. 복잡한 로직을 처리하고 창고(DB)에서 재료를 꺼내옵니다.
데이터베이스 (DB)	대형 냉장고 / 창고	소중한 식재료(데이터)를 보관하는 곳입니다. 회원 정보, 게시글 등이 여기에 저장됩니다. (예: MySQL, Oracle)