진짜 서비스의 구조를 잡는 방법

AI 실전 바이브코딩 방법

코드는 AI가 짜주지만, 구조는 사람이 잡아야 합니다. 복잡한 설정 코드를 직접 치는 대신, ‘왜 이 기술이 필요한지’ 원리를 이해하고 AI에게 정확히 지시하는 법을 배웁니다. 무너지지 않는 튼튼한 서비스의 기초, 여기서 시작됩니다

5.0

(8)

|

49명

# 프로젝트 A to Z

# 백엔드

# 프론트엔드

# TDD 워크플로우

₩ 159,000

44%

₩89,000

5.0

(8)

|

49명

# 프로젝트 A to Z

# 백엔드

# 프론트엔드

# TDD 워크플로우

장난감은 그만, ‘진짜 서비스’를 위한 인프라 구축 A to Z

🚩 “AI가 짜준 코드, 파일 하나에 다 넣고 계신가요?”

바이브 코딩의 한계는 ‘구조’에서 옵니다.
많은 분들이 AI로 코딩할 때 main.py나 App.js 파일 하나에 모든 코드를 때려 넣습니다.
처음엔 잘 돌아가지만, 기능이 3개만 넘어가도 에러가 터지고 AI는 엉뚱한 코드를 수정하기 시작합니다.
이제 ‘프로’들의 방식을 훔칠 차례입니다.
SpecKit으로 설계한 탄탄한 기획 위에, 현업 개발자 수준의 견고한 인프라를 구축합니다.
FastAPI, React, Docker, Celery… 이름만 들어도 어려운 기술들, AI와 함께라면 클릭 몇 번으로 구축할 수 있습니다.

Part 1. 프로젝트 초기화 및 환경 설정 (Phase 1)

🏗️ 무너지지 않는 건물의 기초 공사

건물을 짓기 전 땅을 다지듯, 프로젝트의 폴더 구조와 개발 환경을 완벽하게 세팅합니다.

Core 1. 프로페셔널한 폴더 구조 (Directory Structure)
  • 내용: 뒤죽박죽 섞인 파일은 이제 그만. Backend, Frontend, Storage, Docs로 명확히 분리된 엔터프라이즈급 프로젝트 구조를 AI가 자동으로 생성합니다.

  • Why? 구조가 잡혀야 AI도 문맥을 잃지 않고 정확하게 코딩합니다.

Core 2. Docker & Docker Compose
  • 내용: “내 컴퓨터에선 되는데 네 컴퓨터에선 안 돼”라는 말을 없앱니다.

  • 실습: PostgreSQL(DB)과 Redis(메모리 DB)를 Docker 컨테이너로 띄워, 어떤 OS에서든 동일한 환경을 1분 만에 구축합니다.

Core 3. 자동화된 코드 품질 관리 (Linting & Formatting)
  • 내용: AI가 코드를 짜도 검수는 사람이 해야 합니다. 코드가 엉망이면 읽을 수가 없죠.

  • 도구: Ruff(Python)와 Prettier(React)를 설정하여, 저장 버튼만 누르면 코드가 자동으로 깔끔하게 정리되는 마법을 경험합니다.

 

Part 2. 백엔드 인프라 구축 : FastAPI (Phase 2)

 

🧠 데이터와 보안을 책임지는 강력한 서버

단순히 “Hello World”를 출력하는 서버가 아닙니다.
회원가입, 보안, 데이터베이스 관리, 비동기 처리까지 가능한 ‘실전 백엔드’를 만듭니다.

Lesson 1. 데이터베이스의 타임머신, Alembic

  • 문제: “DB에 컬럼 하나 추가했는데 에러 나서 DB 다 지웠어요.”

  • 해결: 마이그레이션(Migration) 시스템을 구축하여, 데이터 손실 없이 DB 구조를 자유자재로 변경하고 관리하는 법을 배웁니다.

Lesson 2. 은행급 보안 시스템, JWT & Bcrypt

  • 내용: 사용자 비밀번호를 그대로 저장하는 건 범죄입니다.

  • 실습:

    • Bcrypt: 비밀번호를 해커도 못 알아보게 암호화(Hashing)하여 저장합니다.

    • JWT: 15분짜리 출입증(Access Token)과 7일짜리 갱신권(Refresh Token)을 발급하여 완벽한 로그인 시스템을 구현합니다.

Lesson 3. 기다림 없는 서비스, Celery & Redis

  • 시나리오: “AI가 문서를 만드는 3분 동안 브라우저가 멈춰있어요.”

  • 해결: 비동기 큐(Queue) 시스템을 도입합니다. 사용자에겐 “작업 시작!”만 알리고, 무거운 AI 작업은 백그라운드에서 조용히 처리하는 고급 기술을 구현합니다.

Part 3. 프론트엔드 기초 공사 : React (Phase 3)

 

🎨 사용자가 사랑하는 반응형 인터페이스

사용자가 가장 먼저 마주하는 화면, React 생태계의 표준 도구들로 무장합니다.

Skill 1. 똑똑한 네비게이터, React Router
  • 내용: 로그인, 대시보드, 상세 페이지… 7개의 주요 화면을 연결합니다.

  • 핵심: 깜빡임 없는 SPA(Single Page Application) 방식을 적용하여 앱처럼 부드러운 페이지 전환을 구현합니다.

Skill 2. 데이터 관리의 혁명, TanStack Query
  • 문제: “페이지 이동할 때마다 로딩 바가 돌아요.”

  • 해결: 서버 데이터를 **캐싱(Caching)**하여, 한 번 불러온 데이터는 즉시 보여줍니다.

  • 전략: StaleTime 5분 전략을 통해 서버 부하를 줄이고 속도를 10배 높입니다.

🎁 이 챕터의 핵심 포인트

“이 모든 코드를 직접 짜냐구요? 아니요, 이해만 하세요.”

이 강의의 핵심은 복잡한 설정 코드를 직접 타이핑하는 것이 아닙니다.

  1. 원리 이해: “왜 JWT가 필요한가?”, “왜 Docker를 쓰는가?”를 쉽고 명쾌한 비유(놀이공원 자유이용권, 레고 블록 등)로 이해합니다.

  2. AI 지시: Claude Code와 SpecKit에게 정확한 명령(Task 012 구현해)을 내립니다.

  3. 결과 검증: AI가 만들어준 인프라가 제대로 작동하는지 테스트합니다.

 

🎯 추천 수강 대상

  • python main.py 수준을 넘어, 폴더가 나뉘고 DB가 연결된 진짜 프로젝트를 하고 싶은 분

  • 로그인, 보안, 배포 등 실무에서 꼭 필요한 기능을 AI로 어떻게 구현하는지 궁금한 분

  • 프론트엔드와 백엔드를 모두 다루는 풀스택 1인 개발을 꿈꾸는 분

 

지금 바로, 당신의 아이디어를 담을 ‘튼튼한 그릇’을 만들어보세요.

기초가 튼튼해야 AI 코딩도 무너지지 않습니다.

커리큘럼

1강. 프로젝트 시작하기
프로젝트 디렉토리 구조 생성
백엔드 Python 프로젝트 초기화
프론트엔드 React 프로젝트 초기화
Alembic으로 데이터베이스 마이그레이션 설정하기
초기 데이터베이스 스키마 생성하기
데이터베이스 연결 설정하기
React Router 설정하기
TanStack Query 클라이언트 설정하기
프로젝트 디렉토리 구조 생성
백엔드 Python 프로젝트 초기화
프론트엔드 React 프로젝트 초기화

수강평

0.0
0개 리뷰
5점
0%
4점
0%
3점
0%
2점
0%
1점
0%
0/0개의 리뷰

아직 리뷰가 없습니다. 강의를 수강하고 리뷰를 남겨보세요.

# 바이브코딩

AI 실전 바이브코딩 방법

단순한 토이 프로젝트를 넘어, 확장 가능한 서비스를 만들고 싶은 분들을 위한 필수 코스입니다. SpecKit으로 설계한 기획안을 바탕으로 백엔드, 프론트엔드, 데이터베이스 환경을 원스톱으로 세팅하는 실전 노하우를 전수합니다

₩ 159,000

44%

₩89,000

위로 스크롤