프론트엔드와 백엔드 — 내가 보는 것과 보이지 않는 것

← 바이브코딩 바이블 목차 (챕터 0)

인스타그램을 열면 사진 피드가 보입니다. 검색창에 뭔가를 입력하면 결과가 나타나고, 좋아요를 누르면 숫자가 바뀌죠. 이 모든 것이 순식간에 일어납니다. 그런데 이 과정을 뜯어보면, 사실 두 개의 완전히 다른 세계가 맞물려 돌아가고 있어요.

하나는 여러분의 화면에 펼쳐지는 세계, 다른 하나는 화면 뒤에서 묵묵히 일하는 서버의 세계입니다. 전자를 프론트엔드(Frontend), 후자를 백엔드(Backend)라고 불러요.

코드가 무엇인지 이해했다면, 이제 그 코드가 실제 웹 서비스에서 어떻게 역할을 나눠 작동하는지 살펴볼 차례예요. 바이브코딩으로 무언가를 만들 때 AI에게 명확하게 요청하려면 이 구분을 알고 있어야 합니다.

프론트엔드 — 사용자가 보는 모든 것

MDN Web Docs에 따르면, 프론트엔드 웹 개발자는 웹사이트와 웹 애플리케이션의 사용자 인터페이스(UI)를 구축하고 유지보수하는 개발자입니다.

쉽게 말하면 여러분이 직접 눈으로 보고, 손가락으로 터치하고, 클릭하는 모든 것이 프론트엔드예요. 버튼의 색깔, 메뉴가 펼쳐지는 애니메이션, 상품 목록이 카드 형태로 나열되는 레이아웃 — 전부 프론트엔드 코드의 결과물입니다.

프론트엔드를 구성하는 기술은 세 가지로 이루어져 있어요.

HTML — 웹 페이지의 뼈대. “여기엔 제목이 오고, 그 아래엔 이미지, 그 다음엔 문단”처럼 콘텐츠의 구조와 의미를 정의해요.
CSS — 뼈대에 입히는 옷. 색깔, 폰트 크기, 여백, 애니메이션 등 시각적인 스타일을 담당합니다.
JavaScript — 페이지에 생명을 불어넣는 언어. 버튼을 클릭했을 때 팝업이 뜨거나, 스크롤에 따라 요소가 나타나는 동적인 동작을 만들어요.

이 세 기술은 브라우저 안에서만 실행됩니다. 여러분의 크롬, 사파리, 파이어폭스가 이 코드를 읽고 화면에 그려주는 거예요.

백엔드 — 보이지 않는 서버의 세계

좋아요를 누르면 숫자가 올라가는 건 프론트엔드의 일처럼 보이지만, 사실 뒤에서 훨씬 많은 일이 벌어지고 있어요. “이 사용자가 이 게시물에 좋아요를 눌렀다”는 사실을 어딘가에 기록해야 하고, 다음에 접속했을 때 그 정보를 다시 불러와야 하니까요. 이걸 처리하는 것이 백엔드입니다.

MDN의 설명에 따르면, 백엔드는 웹 서버에서 실행되는 코드로 요청을 처리하고 동적 응답을 생성합니다. 클라이언트 사이드 코드가 브라우저에서 실행되는 것과 달리, 백엔드 코드는 서버에서 실행돼요.

백엔드가 하는 주요 역할은 네 가지입니다.

데이터베이스 관리 — 사용자 정보, 게시물, 주문 내역 등을 저장하고 꺼냅니다.
사용자 인증 — “이 사람이 진짜 가입된 회원인가?”를 확인해요.
비즈니스 로직 처리 — “이 쿠폰은 첫 구매에만 적용된다”처럼 서비스의 규칙을 실행합니다.
보안 — 민감한 정보를 암호화하고, 허가되지 않은 접근을 차단해요.

백엔드 코드는 여러분의 화면에 직접 보이지 않아요. 서버 컴퓨터 안에서 조용히 돌아가고 있을 뿐입니다.

둘이 대화하는 방법 — HTTP 요청과 응답

프론트엔드와 백엔드는 어떻게 대화할까요? 핵심 언어는 HTTP(HyperText Transfer Protocol)입니다.

MDN의 HTTP 개요에 따르면, 이 과정은 단순한 주고받기예요.

요청(Request) — 브라우저(프론트엔드)가 서버에 무언가를 요청합니다. “이 사용자 프로필 데이터 줘.”
처리 — 서버(백엔드)가 데이터베이스에서 해당 정보를 꺼냅니다.
응답(Response) — 서버가 데이터를 돌려보냅니다. 보통 JSON 형태로요.
렌더링 — 브라우저가 받은 데이터를 화면에 표시합니다.

이 과정에서 두 세계를 연결하는 창구를 API(Application Programming Interface)라고 해요. MDN의 정의에 따르면, API는 소프트웨어끼리 상호작용할 수 있게 해주는 기능과 규칙의 집합입니다. 프론트엔드는 API를 통해 백엔드에 “이 데이터 줘”, “이거 저장해줘”라고 요청하고, 백엔드는 그에 맞게 응답해요.

실제 현장에서는 누가 무엇을 하나 — 2024년 통계

실무에서 개발자들은 어떻게 역할을 나눌까요? Stack Overflow 2024 개발자 설문조사(응답자 65,437명)에 따르면:

풀스택 개발자: 30.7% — 프론트엔드와 백엔드 모두 담당
백엔드 개발자: 16.7%
프론트엔드 개발자: 5.6%

흥미롭게도 프론트엔드만 전담하는 개발자 비율이 예상보다 낮아요. 그만큼 요즘은 경계가 흐려지고 있다는 뜻이기도 합니다.

주요 기술 스택 사용률도 같은 조사에서 확인됩니다.

프론트엔드 프레임워크 (2024)

React: 39.5% — 현재 업계 표준에 가장 가까운 프론트엔드 라이브러리
Angular: 17.1% — 구글이 만든 대형 프레임워크
Vue.js: 15.4% — 입문자 친화적인 구조로 인기

백엔드 기술 (2024)

Node.js: 40.8% — JavaScript로 서버를 만드는 환경
Flask: 12.9% — 가벼운 Python 웹 프레임워크
Django: 12% — 기능이 풍부한 Python 웹 프레임워크

바이브코딩에서 주로 쓰는 Python이 백엔드에서도 핵심 언어라는 점, 눈에 띄죠. AI와 함께 서버를 만든다면 Python 기반 Flask나 Django를 마주칠 가능성이 높아요.

바이브코딩에서 이 구분이 왜 중요한가

바이브코딩으로 만들 수 있는 것들을 생각해보면, 대부분의 서비스에는 이 두 영역이 모두 필요합니다. 포트폴리오 사이트처럼 단순히 보여주기만 하는 경우엔 프론트엔드만으로 충분해요. 하지만 로그인, 댓글, 구매 기록이 필요한 서비스라면 백엔드도 함께 있어야 합니다.

AI에게 정확히 요청하려면 이 구분을 알고 있어야 해요. “버튼 색깔 바꿔줘”는 프론트엔드 작업이고, “로그인한 사용자만 이 페이지에 접근할 수 있게 해줘”는 백엔드 작업입니다. 어느 영역의 일인지 알면 Cursor에게 훨씬 정확한 지시를 내릴 수 있고, AI도 더 정확한 코드를 만들어 줘요.

코드는 레시피고, 프론트엔드와 백엔드는 그 레시피가 실행되는 두 개의 부엌입니다. 하나는 손님이 앉아 있는 홀, 다른 하나는 실제 음식을 만드는 주방이에요. 두 공간이 긴밀하게 맞물릴 때 비로소 서비스가 완성됩니다.

그 주방 안쪽 — 데이터를 저장하고 꺼내는 핵심 부품인 데이터베이스를 다음 글에서 들여다볼게요.

이 글은 MDN Web Docs, Stack Overflow Developer Survey 2024 등 공개 자료를 바탕으로 작성되었습니다.