8장 앱의 구조: 프론트엔드·백엔드·API
전체 그림 — 요청부터 응답까지
지금까지의 조각 — HTML·CSS·JS, 프론트엔드, 백엔드, API — 을 하나로 이어 봅시다. 여러분이 버튼 하나를 누르면 이런 일이 벌어집니다.
- 사용자가 화면(프론트엔드)에서 버튼을 누른다
- 프론트엔드가 API로 백엔드에 요청을 보낸다
- 백엔드가 데이터베이스에서 필요한 정보를 꺼내 처리한다
- 결과를 API 응답으로 프론트엔드에 돌려준다
- 프론트엔드가 그 결과를 화면에 예쁘게(CSS) 보여준다
바이브 코딩에서 여러분은 이 전체 그림을 AI에게 설명하고 조율하는 ‘감독’입니다. “로그인 화면(프론트)을 만들고, 서버(백엔드)에 회원 정보를 저장하고, 둘을 API로 연결해줘”처럼 — 구조를 알면 요청이 정확해지고, AI가 내놓은 결과물도 정확히 읽힙니다.
핵심: 프론트엔드·백엔드·API·데이터베이스는 따로 노는 개념이 아니라, 버튼 한 번에 함께 움직이는 ‘한 팀’입니다. 이 큰 그림을 쥐고 있으면 어떤 앱이든 구조가 보입니다.