프론트엔드 백엔드 차이, 5분 만에 잡는 웹 용어

프론트엔드는 손님 눈에 보이는 화면, 백엔드는 그 뒤에서 요청을 처리하는 부분이다. 서버는 백엔드 프로그램이 실제로 켜져 도는 컴퓨터이고, 데이터베이스는 정보를 정리해 보관하는 창고다. 이 네 가지만 구분해 두면 앞으로 마주칠 개발 이야기의 절반은 알아듣고, 견적서를 읽거나 업체와 이야기할 때도 한결 편해진다.

핵심 요약

• 프론트엔드는 화면(보이는 쪽), 백엔드는 처리(뒤에서 도는 쪽)를 맡는다.
• 서버는 백엔드가 올라가 실행되는 컴퓨터, 데이터베이스는 데이터를 담아 두는 저장소다.
• 견적서가 프론트엔드와 백엔드로 나뉘는 이유는 다루는 기술과 작업 시간이 다르기 때문이다.
• 네 용어는 따로 노는 게 아니라 요청 한 번에 순서대로 맞물려 움직인다.

프론트엔드와 백엔드, 매장 앞과 주방

식당에 빗대면 이해가 빠르다. 프론트엔드(눈에 보이는 화면과 버튼)는 손님이 앉는 홀과 메뉴판이다. 색과 글자 크기, 버튼 위치처럼 사람이 직접 보고 누르는 부분을 맡는다. 손님이 편하게 주문하도록 다듬는 자리가 여기다. 버튼 색이나 글자 크기를 바꿔 달라는 요청이 대체로 프론트엔드 작업에 해당한다.

백엔드(화면 뒤에서 도는 처리 부분)는 주방이다. 손님이 주문을 넣으면 주방이 조리해 내보내듯, 로그인 확인이나 주문 저장 같은 일을 눈에 보이지 않는 곳에서 처리한다. 화면과 처리가 이렇게 나뉘어 있어서 견적서도 프론트엔드와 백엔드로 갈라진다. 화면을 보기 좋게 만드는 기술과 처리를 안전하게 짜는 기술이 다르다 보니, 작업하는 사람과 걸리는 시간도 나뉘기 때문이다. 웹사이트가 화면·처리·저장 세 층으로 짜인다는 큰 그림은 웹사이트 구조 글에 정리해 두었다.

서버와 데이터베이스, 건물과 창고

주방이 아무리 좋아도 건물이 없으면 장사를 못 한다. 서버(프로그램이 켜져 도는 컴퓨터)가 그 건물이다. 백엔드 프로그램은 서버 위에 올라가 24시간 켜진 채 손님 요청을 기다린다. 집에 있는 PC와 원리는 같지만, 늘 켜져 있고 여러 사람이 동시에 접속해도 버티도록 갖춰졌다는 점이 다르다. 그래서 서버는 직접 사기보다 필요한 만큼 빌려 쓰는 경우가 많고, 방문자가 늘면 더 큰 서버로 갈아탄다. 건물이 부실하면 아무리 좋은 주방도 손님을 못 받듯, 서버가 불안정하면 접속이 자주 끊긴다.

데이터베이스(정리된 데이터 창고)는 재료와 장부를 보관하는 창고에 가깝다. 회원 정보, 주문 내역, 상품 목록처럼 계속 쌓이고 다시 찾아 써야 하는 정보를 표 형태로 정리해 둔다. 엑셀과 비슷해 보이지만, 수천 명이 동시에 읽고 써도 뒤섞이지 않게 다뤄 준다는 점에서 쓰임이 다르다. 예를 들어 회원이 만 명으로 늘어도 로그인 정보를 순식간에 찾아내는 일은 데이터베이스가 맡는다. 엑셀 파일을 여러 명이 동시에 고치다 내용이 덮인 경험이 있다면, 데이터베이스가 왜 필요한지 바로 와닿는다.

네 용어 한눈에 비교

네 가지를 하는 일과 식당 비유로 나란히 놓으면 이렇게 정리된다.

용어	하는 일	식당 비유
프론트엔드	화면과 버튼, 보이는 부분	홀과 메뉴판
백엔드	요청 처리와 판단	주방
서버	프로그램이 도는 컴퓨터	건물
데이터베이스	정보 저장과 조회	창고·장부

네 용어는 서로를 필요로 한다. 화면만 있고 주방이 없으면 주문이 처리되지 않고, 창고가 없으면 어제 받은 주문을 오늘 찾지 못하기 때문이다. 그래서 견적을 받을 때 이 네 가지가 어떻게 맞물리는지 물어보면, 무엇에 돈과 시간이 드는지 감이 잡힌다.

가상 예시로 흐름 따라가기

가상 예시로 한 번의 주문이 네 부분을 어떻게 지나는지 따라가 보자. 카페 주문 앱에서 손님이 아메리카노 담기 버튼을 누른 순간이다. 겉으로는 숫자 하나 바뀌는 단순한 일 같지만, 뒤에서는 네 부분이 차례로 손을 거친다.

1. 손님이 화면의 담기 버튼을 누른다. 여기까지가 프론트엔드의 몫이다.
2. 프론트엔드가 "이 손님이 아메리카노를 담았다"는 요청을 서버로 보낸다.
3. 서버 위의 백엔드가 요청을 받아 로그인 상태와 재고를 확인한다. 재고가 없으면 여기서 담기를 막는다.
4. 백엔드가 데이터베이스에 주문을 저장하고 장바구니 개수를 되돌려 준다. 저장이 끝나야 다음 화면이 정확한 숫자를 보여줄 수 있다.
5. 프론트엔드가 그 결과를 받아 화면의 장바구니 숫자를 하나 올린다.

버튼 한 번에 네 부분이 순서대로 맞물린다. 이 흐름이 눈에 들어오면 바이브코딩으로 앱을 만들 때 어디를 고쳐야 하는지 감이 잡힌다. 예를 들어 장바구니 숫자가 안 바뀌면 화면 쪽 문제인지 저장 쪽 문제인지부터 나눠 볼 수 있다. 바이브코딩이 아직 낯설다면 바이브코딩이란 글부터 읽어도 좋고, 내가 만들 것이 웹사이트인지 웹앱인지 헷갈린다면 웹사이트 웹앱 차이가 도움이 된다.