AI가 만든 앱이 생각대로 안 될 때, '어디를 고쳐야 하나'를 알려면 프론트엔드와 백엔드의 역할을 구분해야 합니다. 레스토랑 비유로 한 번에 정리해 드리겠습니다.
프론트엔드(Frontend) = 레스토랑의 홀(Hall)
손님이 직접 보고 만지는 공간이 홀입니다. 인테리어, 테이블 배치, 메뉴판 디자인, 직원의 서빙 방식. 이처럼 프론트엔드는 사용자가 브라우저나 앱에서 직접 보고 클릭하는 모든 것을 만듭니다. HTML(구조), CSS(디자인), JavaScript(동작)가 주재료입니다.
- 버튼, 폼, 카드, 모달 같은 UI 컴포넌트(component)
- 색상, 글꼴, 간격, 애니메이션 같은 스타일
- 클릭, 스크롤, 입력에 반응하는 인터랙션(interaction)
- 대표 도구: React, Vue, Next.js, TailwindCSS
백엔드(Backend) = 레스토랑의 주방(Kitchen)
손님은 주방 안을 못 보지만, 실제 음식이 만들어지는 곳입니다. 재료 보관(데이터베이스), 조리 과정(비즈니스 로직), 외부 배달업체 연동(외부 API 호출)이 모두 여기서 일어납니다. 백엔드는 서버 위에서 돌아가며 사용자 요청을 처리하고 결과를 돌려줍니다.
- 사용자 인증(로그인·회원가입) 처리
- 데이터베이스에 데이터 저장·조회·수정·삭제
- 결제, 이메일 발송 등 외부 서비스 연동
- 대표 도구: Node.js, Python(FastAPI/Django), Supabase, Firebase
어느 쪽 문제인지 구분하는 법
증상만 봐도 어느 쪽 문제인지 대략 알 수 있습니다. 이 감각을 익혀두면 AI에게 정확하게 지시할 수 있습니다.
| 증상 | 담당 | AI에게 말할 때 |
|---|---|---|
| 버튼 색이 이상함, 글자가 겹침 | 프론트엔드 | "스타일(CSS) 수정해줘" |
| 클릭해도 아무 반응 없음 | 프론트엔드(이벤트 핸들러) | "버튼 클릭 이벤트 고쳐줘" |
| 데이터가 안 나옴 (로딩 무한) | 프론트엔드+백엔드 경계(API) | "API 응답 확인해줘" |
| 저장한 데이터가 사라짐 | 백엔드(DB) | "데이터 저장 로직 확인해줘" |
| 로그인이 안 됨 | 백엔드(인증) | "인증(auth) 로직 점검해줘" |
풀스택(Full-Stack)이란?
프론트엔드와 백엔드 둘 다 다루는 개발자나 프레임워크를 풀스택이라고 합니다. Next.js처럼 하나의 코드베이스에서 화면과 서버 로직을 함께 짤 수 있는 도구가 많아지면서, 바이브코딩으로 만드는 앱 대부분이 풀스택 구조입니다.
AI에게 기능 추가를 요청할 때 '이건 화면(프론트엔드) 문제야'인지 '이건 데이터 처리(백엔드) 문제야'인지 먼저 생각하면, 더 정확한 프롬프트를 쓸 수 있고 AI가 엉뚱한 곳을 수정하는 실수를 줄일 수 있습니다.
바이브코딩할 때: 화면이 이상하면 '프론트엔드', 데이터가 이상하면 '백엔드'라고 짚어서 AI에게 말하세요. 예를 들어 '백엔드 API에서 사용자 목록을 불러오는 로직을 고쳐줘'처럼 말하면 AI의 수정 범위가 좁아져 정확도가 올라갑니다.