바이브코딩: 현대적이며 모범적인 소프트웨어 구조 P1. 웹 서비스를 위한 프론트엔드-백엔드 아키텍처

이번 강의의 목표

바이브코더를 위한 현대적이며 모범적인 애플리케이션 구조론
React + Vite + API + 데이터베이스 기반 프로젝트 설계 역량 확보

프론트엔드-백엔드 아키텍처 개론

오늘 학습 목표

웹 애플리케이션의 전체 구조 이해
프론트엔드와 백엔드의 역할 이해
API 기반 통신 방식 이해
데이터베이스의 역할 이해
현대적인 AI 기반 개발 방식 이해

현대적인 웹 서비스의 동작 방식

사용자 관점

사용자
↓
웹 브라우저
↓
인터넷
↓
웹 서버
↓
데이터베이스

예시

사용자 → 날씨 조회 버튼 클릭
→ 서버 API 호출
→ 기상 데이터 조회
→ 결과 반환
→ 화면 표시

핵심 메시지

“웹 서비스는 데이터 요청과 응답의 반복이다.”

현대 애플리케이션의 기본 구조

Frontend
↓
API
↓
Backend
↓
Database

Frontend

사용자 인터페이스(UI)
사용자 경험(UX)

Backend

비즈니스 로직
데이터 처리

Database

데이터 저장
데이터 조회

소프트웨어 개발 관점에서 프론트엔드란?

소프트웨어와 사용자의 상호작용 요소

대표 기술

HTML
CSS
JavaScript

현대적 기술

React
Vue
Angular
Next.js

우리가 사용하는 스택

React + Vite + TypeScript

소프트웨어 개발 관점에서 백엔드란?

소프트웨어 내부의 작동 방식(로직) 정의 요소

주요 역할

인증(Authentication)
권한(Authorization)
데이터 처리
API 제공

대표 기술

Node.js
Python
Java
Go

소프트웨어 개발 관점에서 데이터베이스?

데이터를 저장하는 공간

예시

회원정보
상품정보
게시글
주문정보

대표 제품

관계형 DB

MySQL
PostgreSQL

NoSQL

MongoDB
Firebase

소프트웨어 개발 관점에서 API?

Application Programming Interface

프론트엔드와 백엔드의 대화 창구

예시

GET /weather

응답

{
“city”: “Busan”,
“temp”: 27
}

핵심

프론트엔드는 직접 DB에 접근하지 않는다.

반드시 API를 통해 통신한다.

현대적이며 표준화된 애플리케이션 아키텍처

과거

Browser
↓
Server
↓
Database

현대

React Frontend
↓
REST API
↓
Backend
↓
Database

장점

유지보수 용이
재사용 가능
모바일 앱 연동 가능

클라우드 기반 애플리케이션 플랫폼 서비스

Frontend

Vercel

Backend

Serverless Functions

Database

Supabase
Firebase
PlanetScale

특징

서버를 직접 구매, 설치, 관리하지 않아도 된다.

AI 시대의 개발 아키텍처

사용자
↓
Frontend
↓
Backend
↓
LLM API
↓
GPT / Claude / Gemini

활용 예시

챗봇
문서요약
보고서 생성
데이터 분석

바이브코딩 시대의 개발 방식

전통 개발

기획
→ 설계
→ 개발
→ 테스트
→ 배포

바이브코딩

아이디어
→ 프롬프트
→ AI 생성
→ 수정
→ 배포

개발자의 역할 변화

코드 작성자
→ 시스템 설계자

실습 프로젝트 구조

이번 실습

주간 날씨 조회 웹앱

아키텍처

React Frontend
↓
Weather API
↓
JSON Data
↓
UI Rendering

배울 내용

컴포넌트
상태관리
API 호출
배포

현대적인 개발자의 사고방식

좋은 개발자의 기준

과거: 코드를 많이 작성하는 사람 (단위 시간당 코드 생산성이 높은 사람)

↓

현재: 좋은 질문을 만드는 사람

좋은 아키텍처를 설계하는 사람

AI를 활용해 빠르게 검증하는 사람

실습 프로젝트 예시

Weather Forecast App

기능

현재 날씨 조회
주간 날씨 조회
도시 검색
반응형 UI

사용 기술

React
Vite
Fetch API
Tailwind CSS
Vercel

결론: 핵심 정리

현대 애플리케이션