5과5-1
프론트엔드와 백엔드
웹의 구조를 '보이는 것'과 '보이지 않는 것'으로 쉽게 이해합니다
웹은 두 개의 세계로 나뉩니다
웹사이트를 식당에 비유해봅시다. 손님이 들어서면 보이는 것은 인테리어, 메뉴판, 음식, 서빙하는 직원입니다. 이것이 프론트엔드(Frontend)입니다.
반면 주방 안에서 일어나는 일 — 재료 관리, 요리, 주문 처리 — 은 손님에게 보이지 않습니다. 이것이 백엔드(Backend)입니다.
프론트엔드: 사용자 눈에 보이는 모든 것. 화면 디자인, 버튼, 입력창, 애니메이션. 기술로는 HTML, CSS, JavaScript, React, Next.js 등이 해당합니다.
백엔드: 눈에 보이지 않는 서버 측 처리. 로그인 인증, 데이터 저장, 비즈니스 로직. 기술로는 Node.js, Python, Java, PostgreSQL 등이 해당합니다.
풀스택이란?
프론트엔드와 백엔드를 모두 다루는 개발자를 풀스택(Full-stack) 개발자라고 합니다. 바이브코딩으로 웹사이트를 만들 때 Claude Code는 사실상 풀스택으로 동작합니다. 화면을 만들고, API를 설계하고, 데이터베이스와 연결하는 것까지 모두 처리합니다.
비개발자인 여러분이 AI 코딩 도구를 쓸 때 '이게 프론트엔드 문제인지 백엔드 문제인지'를 대략 이해하면 더 정확한 지시를 내릴 수 있습니다.
예시:
- '버튼 색상이 마음에 안 든다' → 프론트엔드 수정
- '로그인이 안 된다' → 백엔드 인증 로직 또는 데이터베이스 문제
- '데이터가 저장이 안 된다' → 백엔드 API 또는 데이터베이스 문제
TIP: Claude Code에게 문제를 설명할 때 '화면에서 이렇게 보이는데...' (프론트엔드)와 '이 데이터가 저장/불러오기 안 된다' (백엔드)를 구분해서 설명하면 더 빠른 해결책이 나옵니다.
Next.js — 프론트+백엔드 통합 프레임워크
현재 가장 인기 있는 웹 개발 프레임워크 중 하나인 Next.js는 프론트엔드와 백엔드를 한 프로젝트에서 다룰 수 있습니다.
이 강의 사이트(AI업무학교)도 Next.js로 만들어졌습니다. 페이지(프론트엔드)와 API 라우트(백엔드)를 같은 폴더 구조에서 관리합니다.
Claude Code와 Next.js를 함께 쓰면 비개발자도 자신만의 풀스택 웹 서비스를 만들 수 있습니다. 3과에서 배운 Vercel 배포까지 연결하면 인터넷에 공개되는 진짜 서비스가 됩니다.
핵심 정리
- ✓프론트엔드는 눈에 보이는 화면, 백엔드는 눈에 보이지 않는 서버/데이터 처리입니다.
- ✓AI에게 문제를 설명할 때 화면 문제(프론트엔드)와 데이터/로직 문제(백엔드)를 구분하면 더 빠른 해결이 됩니다.
- ✓Next.js는 프론트엔드와 백엔드를 통합해 풀스택 개발을 쉽게 해주는 프레임워크입니다.
자주 묻는 질문
프론트엔드와 백엔드 중 어느 것을 먼저 배워야 하나요?+
바이브코딩 관점에서는 '내가 원하는 결과물의 화면이 어떻게 생겼는지'에서 시작하세요. 눈에 보이는 것(프론트엔드)부터 만들고, 데이터가 필요해지면 그때 백엔드를 추가하는 방식이 비개발자에게 더 자연스럽습니다.
모바일 앱도 프론트엔드/백엔드로 나뉘나요?+
네. 모바일 앱의 화면은 프론트엔드(React Native, Flutter 등), 서버 데이터 처리는 백엔드입니다. 웹과 모바일이 같은 백엔드 API를 공유하는 경우가 많습니다.