클래스 목록으로 돌아가기

Public CMS Preview

바이브코딩 워크샵 (Cursor)

로그인 없이 확인하는 바이브코딩 워크샵 CMS 프리뷰입니다. CMS로 이관된 Module과 Step을 그대로 보여줍니다.

Modules

6

Steps

104

Module 1lesson필수

커서 환경 구축

Cursor, Python, Git, AGENTS.md 기반의 바이브코딩 개발 환경을 준비합니다.

14 steps

Step 1

모듈 안내

published

Step 1

모듈 안내

Step 2

환경 구축 시작

published

Step 2

환경 구축 시작

AI Native 개발 환경을 구축합니다.

우리는 지금 AI 시대의 개발 환경을 만들고 있습니다.

개발자는 이제 모든 것을 직접 구현하는 사람이 아니라 AI와 협력해 문제를 해결하는 사람입니다.

실습 코드

Cursor AI
Python
Git
GitHub CLI
AI Agent 프로젝트 구조
Step 3

Cursor AI

published

Step 3

Cursor AI

AI와 함께 개발하기 위한 기본 작업 환경을 먼저 준비합니다.

Cursor는 VS Code와 유사한 사용성을 가지면서도 AI 협업 기능이 기본 탑재된 코드 에디터입니다.

주요 기능

  • AI 채팅: 코드와 함께 질문하고 맥락을 유지한 답변을 받을 수 있습니다.
  • 코드 생성: 파일 생성, 수정, 설계 제안까지 한 흐름으로 진행할 수 있습니다.
  • 코드 분석: 기존 코드를 읽고 설명하거나 문제 지점을 짚어 줄 수 있습니다.

사이트에서 Download를 선택해 설치합니다.

계정 가입 및 요금제

가입 방법:

  • 설치 후 Cursor를 실행하면 계정 가입 화면이 나타납니다.
  • 구글 계정으로 가입하는 것을 추천합니다.

💡 팁: 구글 계정 통일 관리

앞으로 사용할 서비스들(GitHub, Cursor, Supabase 등)을 구글 계정으로 통일하면 계정 관리가 훨씬 편리합니다. 하나의 구글 계정으로 모든 개발 도구를 관리할 수 있습니다.

요금제:

  • Cursor는 무료 사용판이 없습니다.
  • Pro 요금제 ($20/월)를 추천합니다. AI 기능을 충분히 사용할 수 있습니다.

설치 시 설정 옵션

설치 과정에서 다음 옵션들을 선택할 수 있습니다:

  • ✅ Add to PATH: 터미널에서 cursor 명령어로 실행 가능
  • ✅ Register Cursor as editor for supported file types: 지원되는 파일 형식의 기본 편집기로 설정 (.js, .ts, .py 등)

💡 추천: 모든 옵션을 체크하는 것을 권장합니다. 나중에 필요할 때 쉽게 접근할 수 있습니다.

실습 코드

Ctrl + I

오른쪽에 AI 채팅창이 열리면 정상입니다.

기본 작업 폴더 설정

Cursor를 사용하기 전에 프로젝트를 저장할 기본 폴더를 만들어두면 편리합니다.

폴더 생성:

Windows 탐색기에서 다음 경로에 폴더를 만듭니다

D:\vibecoding

또는 원하는 드라이브(C:, D: 등)에 vibecoding 폴더를 생성합니다.

이 폴더 안에 각 프로젝트별로 하위 폴더를 만들어 작업하면 관리가 쉬워집니다.

Step 4

Cursor 기본 설정

published

Step 4

Cursor 기본 설정

Python 3.13 검색
Python 3.13.12 선택
운영체제에 맞는 Python 설치 파일 선택

설치 후 바로 확인해야 하는 기본 옵션을 정리합니다.

LLM 설정

Cursor에서 사용할 AI 모델을 선택할 수 있습니다.

추천 설정:

실습 코드

LLM 설정 → Auto

Auto를 선택하면 작업에 가장 적합한 모델을 자동으로 선택합니다. 초보자에게 가장 편리한 옵션입니다.

VSCode 사용자라면

Cursor는 VSCode와 동일한 단축키와 인터페이스를 사용합니다. VSCode를 사용해본 경험이 있다면 바로 사용할 수 있습니다.

  • 파일 탐색기: Ctrl + Shift + E
  • 검색: Ctrl + Shift + F
  • 터미널 열기: Ctrl + (백틱)
  • 명령 팔레트: Ctrl + Shift + P

추천 설정

1. 자동 저장 활성화

실습 코드

File → Auto Save

2. 한국어 설정 (선택사항)

- Cursor는 기본적으로 영어로 표시됩니다.

- 한국어 인터페이스를 원하면 확장 프로그램에서 한국어 언어팩을 설치할 수 있습니다.

Step 5

파이썬(Python 3.13) 설치

published

Step 5

파이썬(Python 3.13) 설치

AI 개발에서 가장 많이 쓰는 언어를 먼저 설치합니다.

Python은 다음 분야에서 널리 사용됩니다:

  • AI
  • 데이터 분석
  • 자동화
  • 웹 개발

실습 코드

https://python.org

이번 교육에서는 Python 3.13을 설치합니다. 최신 버전(3.14 등)도 있지만, 안정화를 위해 3.13을 사용합니다.

설치 단계

1. Python 3.13 검색

- 사이트 상단 검색창에서 "3.13"을 검색합니다.

2. Python 3.13.12 선택

- 검색 결과에서 스크롤을 내려 "Python 3.13.12" 버전을 선택합니다.

3. Windows/Mac 인스톨러 선택

- Files 섹션에서 스크롤을 내려 운영체제에 맞는 인스톨러를 선택합니다.

- Windows: "Windows installer (64-bit)" - Recommended 선택

- macOS: "macOS installer" - for macOS 10.13 and later 선택

실습 코드

Add Python to PATH

이 옵션이 체크되어 있어야 터미널에서 Python을 바로 실행할 수 있습니다.

실습 코드

python --version

중요: Python 인터프리터 설정

파이썬 설치 후 Cursor에서 Python 인터프리터를 설정해야 합니다.

방법 1: 상태바 사용

  • Cursor 하단 상태바에서 Python 버전을 클릭 → Python 3.13 인터프리터 선택

방법 2: 명령 팔레트 사용

  • 단축키: Ctrl + Shift + P
  • 명령 팔레트에서 "Python: Select Interpreter" 입력 → Python 3.13 선택
Step 6

Python 실행 테스트

published

Step 6

Python 실행 테스트

Git 설치 화면

Cursor AI로 Python 코드를 작성하고 실행해 봅니다.

1. 프로젝트 폴더 준비

실습용 폴더를 만들고 Cursor에서 엽니다.

실습 코드

mkdir D:\vibecoding\test
cd D:\vibecoding\test

실습 코드

Hello AI 프린트 출력 코드를 만들어줘

AI가 코드를 제안하면 Keep (Ctrl+Shift+Y) 로 적용합니다.

4. 실행 요청

실습 코드

실행해줘

5. 결과 확인

터미널 또는 Output 창에 아래처럼 출력되면 성공입니다.

실습 코드

Hello AI
Step 7

Git 설치

published

Step 7

Git 설치

GitHub 계정과 저장소 준비
새 저장소 생성 화면
GitHub CLI 다운로드

코드 변경 기록과 협업을 위한 버전 관리 도구를 준비합니다.

Git이란?

Git은 코드의 변경 이력을 추적하고 관리하는 버전 관리 시스템입니다.

왜 Git이 필요한가요?

  • 코드 변경 기록 저장: 언제, 누가, 무엇을 변경했는지 모든 기록을 저장합니다. 실수로 코드를 망가뜨려도 이전 버전으로 되돌릴 수 있습니다.
  • 협업: 여러 사람이 같은 프로젝트를 작업할 때 코드 충돌 없이 함께 작업할 수 있습니다.
  • 브랜치(Branch) 관리: 새로운 기능을 추가하거나 실험할 때 메인 코드와 분리하여 작업할 수 있습니다.
  • GitHub와 연동: GitHub에 코드를 올리려면 Git이 필요합니다. Git 없이는 GitHub를 사용할 수 없습니다.

Git 설치 방법

1. Cursor AI 열기

실습 코드

Ctrl + I

오른쪽에 AI 채팅창이 열립니다.

2. Git 설치 안내 요청

실습 코드

Git 설치 방법을 알려줘

AI가 운영체제에 맞는 Git 설치 방법을 안내해줍니다.

3. 설치 사이트 접속

실습 코드

https://git-scm.com

AI가 안내한 대로 설치 사이트에 접속합니다.

4. 설치 확인

설치 후 Cursor AI에게 확인을 요청합니다

Git 설치가 잘 되었는지 확인해줘

또는 터미널에서 직접 확인할 수 있습니다

git --version
Step 8

GitHub 시작하기

published

Step 8

GitHub 시작하기

코드를 저장하고 공유하는 플랫폼을 준비합니다.

GitHub란?

GitHub는 코드를 저장하고 공유하는 플랫폼입니다. Git과 함께 사용하여 코드를 원격 저장소에 저장하고 다른 사람과 협업할 수 있습니다.

GitHub CLI 설치

터미널에서 다음 명령어로 설치합니다:

Windows:

실습 코드

winget install --id GitHub.cli

macOS:

실습 코드

brew install gh

설치 확인

터미널에서 다음 명령어로 확인합니다

gh --version

버전이 출력되면 정상입니다.

Step 9

GitHub 로그인

published

Step 9

GitHub 로그인

GitHub CLI로 GitHub에 로그인합니다.

로그인 방법

터미널에서 다음 명령어를 실행합니다

gh auth login

1. GitHub.com 선택

2. HTTPS 선택

3. 브라우저에서 인증 선택

4. 브라우저가 열리면 구글 계정으로 로그인

로그인 확인

다음 명령어로 로그인 상태를 확인합니다

gh auth status
Step 10

프로젝트 폴더 생성

published

Step 10

프로젝트 폴더 생성

폴더 생성

터미널에서 프로젝트 폴더를 생성합니다

mkdir vibe-test
cd vibe-test

Cursor에서 File → Open Folder로 해당 폴더를 엽니다.

또는 Windows 탐색기에서 직접 폴더를 만들고 Cursor에서 열 수도 있습니다.

첨부파일

프로젝트 초기화 가이드 다운로드

PLAN/ACT 운영 방식과 memory_bank 구조를 포함한 Cursor Agent 프로젝트 초기화 파일입니다. 다운로드한 파일을 새 프로젝트 루트에 넣고 Cursor에게 읽게 하세요.

프로젝트_초기화_가이드_Cursor_Agent.md

다운로드
Step 11

Agent 프로젝트 초기화

published

Step 11

Agent 프로젝트 초기화

AI와 협업하려면 프로젝트에 AI 행동 규칙이 필요합니다.

바이브코딩에서 AGENTS.md 활용 방법

1. PLAN 모드로 시작: 모든 작업은 먼저 계획을 세우고 사용자 승인을 받습니다.

2. ACT 모드로 실행: 승인된 계획만 실행하여 예상치 못한 변경을 방지합니다.

3. 메모리 뱅크 참조: 대화보다 파일을 우선하여 프로젝트 맥락을 유지합니다.

PLAN / ACT 모드

PLAN 모드 (계획 모드)

  • 코드 작성 금지
  • 파일 수정 금지
  • 분석, 질문, 설계만 수행
  • 변경할 파일 목록과 단계별 작업 내용 제시

ACT 모드 (실행 모드)

  • 사용자가 "ACT" 또는 "실행해"라고 명시적으로 지시할 때만 전환
  • 승인된 계획 범위 내에서만 실행
  • 작업 완료 후 자동으로 PLAN 모드로 복귀

초기화 가이드 파일

프로젝트 폴더에 다음 파일을 추가합니다

프로젝트_초기화_가이드_Cursor_Agent.md

이 파일을 프로젝트 폴더에 추가한 후 Cursor에게 아래처럼 요청하세요.

실습 코드

이 프로젝트에 있는
프로젝트_초기화_가이드_Cursor_Agent.md 파일을 읽고

이 가이드 기준으로
프로젝트 초기 구조를 만들어줘.

먼저 PLAN으로 설명하고
내가 확인하면 ACT로 생성해줘.
Step 12

생성되는 프로젝트 구조

published

Step 12

생성되는 프로젝트 구조

초기화가 완료되면 아래 구조가 생성됩니다.

실습 코드

project-root/
├── AGENTS.md
├── .cursor/
│   └── rules/
│       ├── 00-foundation.mdc
│       ├── 10-memory-bank.mdc
│       └── 20-quality-scope.mdc
└── memory_bank/
    ├── projectbrief.md
    ├── techContext.md
    ├── systemPatterns.md
    ├── productContext.md
    ├── activeContext.md
    └── progress.md

각 파일의 역할

  • AGENTS.md: AI 행동 규칙 정의
  • .cursor/rules/: Cursor 전용 규칙 파일들
  • memory_bank/: 프로젝트 맥락을 저장하는 파일들
Step 13

GitHub 저장소 생성

published

Step 13

GitHub 저장소 생성

사전 확인

`vibe-test` 폴더에서 GitHub CLI 로그인 상태를 확인합니다

gh auth status

저장소 생성 (권장)

현재 폴더(vibe-test)를 GitHub public 저장소에 연결합니다. push는 아직 하지 않습니다.

실습 코드

gh repo create vibe-test --public --source=. --remote=origin

Cursor Agent로 생성 (선택)

터미널 대신 Agent(Ctrl+I)에 아래처럼 요청할 수 있습니다

vibe-test 폴더를 GitHub public 저장소로 만들고 origin remote만 연결해줘. push는 아직 하지 마.

대화형으로 진행하는 경우

gh repo create만 입력하면 질문이 나옵니다:

  • Visibility → Public
  • Add README → No (로컬 파일이 우선)
  • Clone this repo → No

실습 코드

gh repo view
git remote -v

브라우저에서 GitHub 프로필 → vibe-test 저장소가 보이면 성공입니다.

다음 Step

Step 13에서 Cursor Agent에게 「빌드, 메모리뱅크 업데이트, 푸시해줘」로 첫 Push를 진행합니다.

Step 14

첫 Push + 환경 구축 완료

published

Step 14

첫 Push + 환경 구축 완료

Step 12에서 연결한 GitHub 저장소에 로컬 프로젝트를 첫 Push하고 환경 구축을 마무리합니다.

첫 Push

Cursor AI에게 다음 프롬프트를 사용합니다

빌드, 메모리뱅크 업데이트, 푸시해줘

왜 이 순서로 하나요?

1. 빌드 먼저 확인

- 코드 변경 후 빌드가 성공하는지 먼저 확인합니다. 빌드 오류가 있으면 메모리뱅크에 잘못된 정보가 기록될 수 있기 때문입니다.

2. 메모리뱅크 업데이트

- 빌드가 성공한 후에만 메모리뱅크를 업데이트합니다. 이렇게 하면 AI가 항상 정확하고 검증된 정보만 참조할 수 있습니다.

3. 마지막에 푸시 (커밋 포함)

- 모든 작업이 완료되고 검증된 후에만 커밋과 푸시를 함께 수행합니다. 이 순서를 지키면 실수로 잘못된 코드나 문서를 원격 저장소에 올리는 것을 방지할 수 있습니다.

Git 개념 이해하기

커밋 (Commit)

  • 커밋은 변경사항을 로컬 저장소에 기록하는 것입니다. 마치 "이 시점의 작업을 저장합니다"라고 표시하는 것과 같습니다. 커밋 메시지를 통해 무엇을 변경했는지 기록할 수 있습니다.

푸시 (Push)

  • 푸시는 로컬 저장소의 커밋들을 원격 저장소(GitHub)로 전송하는 것입니다. 푸시를 하면 로컬에서 만든 커밋들이 GitHub에 업로드되어 다른 사람들과 공유할 수 있게 됩니다.

원격 저장소 동기화

  • 원격 저장소 동기화는 로컬 컴퓨터의 코드와 GitHub의 코드를 같은 상태로 만드는 것입니다. 푸시를 통해 로컬의 변경사항을 GitHub에 반영하면, 어느 기기에서든 최신 코드를 받아올 수 있습니다. 마치 클라우드 드라이브처럼 동작합니다.

환경 구축 완료

축하합니다! AI와 협업하는 개발 환경 구축을 완료했습니다.

이제 우리는 다음 환경을 모두 구축했습니다

Cursor
Python
Git
GitHub CLI
AI Agent 프로젝트 구조

오늘 우리는 코드를 만드는 환경이 아니라 AI와 협업하는 환경을 만들었습니다.

2강: 유튜버 다운로더 만들기

이제 구축한 환경을 활용해 실제 프로그램을 만들어봅시다. 유튜브 영상을 다운로드하는 프로그램을 만들면서 AI와 협업하는 전체 프로세스를 경험할 수 있습니다.

이번 실습에서 배울 것:

  • 아이디어 → 명세 → 구현 → 고화질 → 배포까지 한 번에
  • Ai Studio와 Cursor를 오가며 명세를 다듬는 방법
  • Python, PyQt5, yt-dlp를 활용한 GUI 프로그램 개발
  • ffmpeg를 활용한 고화질 영상 다운로드
  • exe 파일로 패키징하여 배포하기

핵심 기술 스택:

실습 코드

Python · PyQt5 · yt-dlp · ffmpeg · GitHub · PyInstaller
다음 모듈: 유튜브 다운로더 완성 실습 →
Module 2practice필수

유튜브 다운로더 완성 실습

아이디어, 명세, 구현, 고화질 다운로드, 배포 흐름을 한 번에 실습합니다.

19 steps

Step 1

모듈 안내

published

Step 1

모듈 안내

2강 최종 결과물 예시
Step 2

파이썬 프로젝트 시작

published

Step 2

파이썬 프로젝트 시작

이번 2부의 목표

새 프로젝트를 시작하고, Ai Studio와 Cursor를 오가며 명세를 다듬고, 실행 가능한 파이썬 GUI 프로그램을 완성합니다.

핵심 기술

Python, PyQt5, yt-dlp, ffmpeg, GitHub, PyInstaller

최종 결과물

유튜브 조회 기능 → 다운로드 기능 → Full HD / 4K 지원 → exe 파일

Step 3

파이썬으로 만드는 로컬앱 개발

published

Step 3

파이썬으로 만드는 로컬앱 개발

왜 파이썬으로 실습하는지, 로컬앱이 무엇인지 이해합니다.

왜 파이썬으로 실습하나요?

파이썬은 초보자도 쉽게 배울 수 있는 언어입니다. 문법이 간단하고 읽기 쉬워서, 코드를 작성하는 것보다 문제를 해결하는 것에 집중할 수 있습니다.

또한 파이썬은 풍부한 라이브러리를 제공합니다. GUI를 만들고 싶으면 PyQt5, 웹에서 데이터를 가져오고 싶으면 requests, 유튜브 영상을 다운로드하고 싶으면 yt-dlp 같은 도구들이 이미 준비되어 있어서 처음부터 모든 것을 만들 필요가 없습니다.

이번 실습에서는 AI와 협업하는 개발 방식을 배우는 것이 목표입니다. 파이썬은 AI가 코드를 생성하고 수정하기에도 적합한 언어이기 때문에, Cursor나 Ai Studio 같은 도구와 함께 사용하기에 최적입니다.

로컬앱이란 무엇인가요?

로컬앱(Local App)은 인터넷 연결 없이도 내 컴퓨터에서 직접 실행되는 프로그램입니다. 웹 브라우저를 열지 않아도 되고, 서버에 접속할 필요도 없습니다.

로컬앱의 특징:

  • 내 PC에서 바로 실행됩니다
  • 인터넷 연결이 없어도 동작합니다 (다운로드 기능은 인터넷 필요)
  • 웹 브라우저 없이 독립적으로 실행됩니다
  • 파일 시스템에 직접 접근할 수 있습니다

이번 실습에서 만드는 유튜브 다운로더도 로컬앱입니다. 프로그램을 실행하면 창이 뜨고, URL을 입력하면 내 컴퓨터의 Downloads 폴더에 영상이 저장됩니다.

exe 파일로 패키징하기

  • PyInstaller 같은 도구를 사용합니다
  • 파이썬 코드와 필요한 라이브러리를 하나의 exe 파일로 묶습니다
  • exe 파일을 더블클릭하면 프로그램이 실행됩니다
  • 다른 사람에게 exe 파일만 전달해도 사용할 수 있습니다
Step 4

2부 전체 흐름

published

Step 4

2부 전체 흐름

터미널에서 Python 버전 확인

이번 실습은 이렇게 진행합니다

전제: 1부에서 Cursor, Python, Git, GitHub CLI 기본 구축을 끝낸 상태입니다.

실습 단계

1. 새 프로젝트 폴더를 만듭니다

2. AGENTS.md를 넣어 AI의 작업 규칙을 정합니다

3. Ai Studio에서 plan.md 초안을 만듭니다

4. Cursor로 기술 검토를 받고 다시 Ai Studio에서 수정합니다

5. Go 판단 후 조회 프로그램부터 구현합니다

6. 다운로드 기능을 추가하고 720p 한계를 확인합니다

7. ffmpeg와 명령줄 도구, PATH 환경변수를 이해하고 설정합니다

8. Full HD / 4K 다운로드를 구현합니다

9. GitHub에 프로젝트를 저장합니다

10. exe 파일로 패키징합니다

왜 단계적으로 만드나요?

처음부터 완성 앱을 한 번에 요구하면 명세가 커지고 불안정해집니다. 이번 2부는 작은 기능부터 확인하고, 잘 되는 것을 바탕으로 확장하는 방식으로 진행합니다.

주의

유튜브 다운로드 실습은 저작권과 플랫폼 정책을 준수하는 범위에서만 사용합니다. 교육 목적의 로컬 실습을 기준으로 진행합니다.

Step 5

프로젝트 시작하기

published

Step 5

프로젝트 시작하기

새 프로젝트 폴더를 만들고, 2부 실습 전용 작업 공간을 준비합니다.

이번 2부는 기존 프로젝트가 아니라 새 프로젝트로 시작합니다. 그래야 실습 결과물을 깔끔하게 분리할 수 있고, Git 이력도 명확하게 남길 수 있습니다.

프로젝트 폴더 생성

터미널에서 다음 명령어를 실행합니다

mkdir youtube-downloader
cd youtube-downloader

실습 코드

youtube-downloader/
├─ AGENTS.md
├─ plan.md
├─ main.py
├─ requirements.txt
└─ README.md

왜 새 프로젝트로 시작하나요?

  • 실습 결과물을 다른 프로젝트와 분리할 수 있습니다
  • Git 이력과 산출물을 깔끔하게 관리할 수 있습니다
  • AI가 프로젝트 문맥을 더 정확하게 이해합니다

권장 파일명

처음 실행 파일은 main.py로 두면 초보자가 따라가기 쉽습니다.

첨부파일

프로젝트 초기화 가이드 다운로드

PLAN/ACT 운영 방식과 memory_bank 구조를 포함한 Cursor Agent 프로젝트 초기화 파일입니다. 다운로드한 파일을 새 프로젝트 루트에 넣고 Cursor에게 읽게 하세요.

프로젝트_초기화_가이드_Cursor_Agent.md

다운로드
Step 6

AGENTS.md 설정하기

published

Step 6

AGENTS.md 설정하기

AI Studio에서 아이디어 초안 만들기

AI가 이 프로젝트에서 어떻게 행동해야 하는지 규칙을 먼저 정합니다.

AGENTS.md는 이 프로젝트에서 AI가 따라야 할 운영 규칙입니다. 이번 실습에서는 특히 PLAN → GO → ACT 순서를 지키게 하는 것이 중요합니다.

AGENTS.md 예시

```markdown

Working Rules

  • Always start in PLAN mode
  • Read plan.md before proposing work
  • Do not write code until the user says GO
  • Keep changes small and scoped
  • Explain changed files and run steps after each task

`

AGENTS.md가 하는 일

  • AI에게 PLAN → GO → ACT 순서를 강제합니다
  • 코드 범위를 벗어나는 과도한 수정을 줄입니다
  • plan.md를 먼저 읽고 일하게 만들어 협업 품질을 높입니다

실습 팁

규칙은 짧고 강해야 합니다. 너무 길면 AI도 사람도 잘 지키지 못합니다.

Step 7

Google AI Studio에서 아이디어 초안 만들기

published

Step 7

Google AI Studio에서 아이디어 초안 만들기

처음에는 크게 시작하지 않습니다. 먼저 유튜브 조회 프로그램만 만드는 명세부터 시작합니다.

이번 실습의 핵심은 처음부터 모든 기능을 다 넣지 않는 것입니다. 처음에는 다운로드 기능을 넣지 않고, 조회 기능만 있는 작은 프로그램을 기준으로 명세를 만듭니다.

명세 검토 프롬프트

PyQt5와 yt-dlp를 사용해서 유튜브 조회 프로그램을 만들어줘.

아직 다운로드 기능은 넣지 말고,
아래 기능만 포함한 plan.md 초안을 작성해줘.

- 유튜브 URL 입력
- 조회 버튼
- 썸네일 표시
- 제목 표시
- 조회수 표시

그리고 초보자 교육용 문서가 되도록
아래도 함께 정리해줘.
- 필요한 pip 패키지
- 각 패키지의 역할
- 예상 예외 처리
- 첫 실행 방법

총 17줄 · 펼치기를 누르면 전체 코드를 볼 수 있습니다.

이 단계의 목표

  • plan.md 초안을 만든다
  • 다운로드 기능은 아직 넣지 않는다
  • 기능보다 명세의 구조를 먼저 만든다

plan.md에 들어가면 좋은 항목

  • 프로젝트 목표
  • 핵심 기능
  • 필요한 pip 패키지
  • 예외 처리
  • 실행 방법
  • 결과물 파일
Step 8

Ai Studio와 Cursor를 번갈아 사용합니다

published

Step 8

Ai Studio와 Cursor를 번갈아 사용합니다

명세는 한 번에 완성하지 않습니다. 생성 → 검토 → 수정 → 재검토를 반복하다가 원하는 수준이 되면 Go 합니다.

Ai Studio는 아이디어를 문서로 정리하는 데 강하고, Cursor는 실제 구현 가능성을 검토하는 데 강합니다. 두 도구를 번갈아 사용하면 더 안정적인 명세를 만들 수 있습니다.

실습 코드

plan.md 초안이야. 아직 코드는 작성하지 말고
구현 관점에서만 검토해줘.

다음 기준으로 정리해줘.
1. 구현하기에 모호한 부분
2. 빠진 요구사항
3. 필요한 예외 처리
4. 추천 파일 구조
5. 초보자가 막히기 쉬운 지점

실습 코드

아래는 Cursor의 기술 검토 의견이야.
이 피드백을 반영해서 plan.md를 수정해줘.

조건:
- 문서는 너무 길지 않게
- 실습용으로 간결하게
- 구현 순서가 보이게
- pip 패키지 설명은 유지

Go 판단 기준

  • 목표 기능이 명확하다
  • 예외 처리 기준이 보인다
  • 필요한 패키지가 정리됐다
  • 실행 방법이 적혀 있다
  • 지금 단계에서 구현 범위가 크지 않다

같은 방식을 계속 사용합니다

다운로드 기능 추가, ffmpeg 반영, 고화질 확장 때도 plan.md를 갱신하고 같은 핑퐁 구조로 검토한 뒤 Go 하면 됩니다.

Step 9

pip 패키지 이해하고 설치하기

published

Step 9

pip 패키지 이해하고 설치하기

`pip`는 파이썬 패키지 설치 도구입니다. 코드는 있어도 패키지가 없으면 실행되지 않습니다.

우리는 모든 기능을 처음부터 직접 만들지 않습니다. 이미 잘 만들어진 패키지를 설치해서 조합합니다.

필요한 패키지

PyQt5

  • 윈도우, 버튼, 입력창 같은 GUI를 만듭니다.

yt-dlp

  • 유튜브 정보 조회와 다운로드를 담당합니다.

requests

  • 썸네일 이미지를 내려받을 때 자주 사용됩니다.

설치 명령어

Windows:

실습 코드

python -m venv .venv
.venv\Scripts\activate
pip install PyQt5 yt-dlp requests

macOS:

실습 코드

python3 -m venv .venv
source .venv/bin/activate
pip install PyQt5 yt-dlp requests

왜 이 설명이 중요한가요?

Cursor가 코드를 잘 만들어도 필요한 패키지가 설치되지 않으면 프로그램은 실행되지 않습니다. 그래서 "무엇을 설치하는지"를 이해하고 넘어가야 합니다.

Step 10

조회 프로그램 구현하기

published

Step 10

조회 프로그램 구현하기

이제 첫 번째 Go를 냅니다. 아직은 조회 기능만 구현합니다.

지금부터는 코드 생성 단계입니다. 다만 plan.md에 정의한 범위 안에서만 구현하도록 요청합니다.

실습 코드

좋아. Go.
현재 plan.md 범위 안에서만 구현해줘.

요구:
- main.py로 구현
- PyQt5 GUI
- 유튜브 URL 입력창
- 조회 버튼
- 썸네일, 제목, 조회수 표시
- requests를 사용해 썸네일 로딩 가능
- 초보자가 읽기 쉬운 주석 포함
- 실행 방법도 함께 정리

실습 코드

python main.py

성공 기준

  • 프로그램 창이 뜬다
  • 유튜브 URL을 입력할 수 있다
  • 조회 버튼을 누르면 썸네일이 보인다
  • 제목과 조회수가 표시된다

실습 팁

좋아요 수는 영상마다 안정적으로 조회되지 않을 수 있어 초반 목표에서 제외하는 편이 좋습니다.

Step 11

다운로드 기능 추가하기

published

Step 11

다운로드 기능 추가하기

조회가 되면 이제 저장 기능을 붙입니다. 이 단계에서 보통 720p 한계를 만나게 됩니다.

먼저 기본 다운로드 기능부터 구현합니다. 이 단계의 목표는 "다운로드가 된다"는 것 자체를 확인하는 것입니다.

실습 코드

조회 기능이 동작하니 이제 다운로드 버튼을 추가해줘.

조건:
- 기존 조회 기능은 유지
- 다운로드 버튼 추가
- 기본 저장 위치는 운영체제의 Downloads 폴더
- 다운로드 진행 상태를 간단히 표시
- 먼저 구현이 쉬운 방식으로 시작

이 단계에서 관찰할 것

  • 파일은 잘 저장되는가?
  • 음성이 함께 들어오는가?
  • 일부 영상이 720p까지만 되는가?

왜 720p까지만 될까요?

고화질 영상은 영상 스트림과 오디오 스트림이 분리된 경우가 많습니다. 이때는 둘을 합칠 도구가 따로 필요합니다.

Step 12

ffmpeg와 명령줄 도구 이해하기

published

Step 12

ffmpeg와 명령줄 도구 이해하기

FFmpeg 공식 다운로드 페이지
Windows용 FFmpeg 빌드 선택
환경 변수 설정 진입
Path에 FFmpeg 경로 추가

ffmpeg는 파이썬 패키지가 아니라 명령줄(CLI) 프로그램입니다. 그래서 설치와 PATH 설정이 함께 필요합니다.

명령줄 도구는 터미널에서 명령어로 실행하는 프로그램입니다. 우리는 이미 여러 명령줄 도구를 사용하고 있습니다.

명령줄 도구 예시

  • python: 파이썬 프로그램 실행
  • pip: 파이썬 패키지 설치
  • git: 버전 관리
  • ffmpeg: 영상/음성 변환 및 병합

실습 코드

PyQt5 GUI → yt-dlp → ffmpeg → 완성 파일 저장

CLI란?

터미널에서 명령어로 실행하는 프로그램입니다. 화면 버튼 대신 명령어로 동작합니다.

ffmpeg는 왜 필요한가요?

Full HD 이상에서는 영상과 음성을 각각 받은 뒤 합치는 작업이 필요한데, 그 병합을 ffmpeg가 담당합니다.

Step 13

Windows에서 ffmpeg 설치와 PATH 설정

published

Step 13

Windows에서 ffmpeg 설치와 PATH 설정

운영체제가 ffmpeg 위치를 찾을 수 있게 해야 합니다. 그 설정이 PATH 환경변수입니다.

Windows에서는 ffmpeg를 내려받아 압축을 푼 뒤, bin 폴더 경로를 PATH에 등록해야 합니다.

설치 단계

1. ffmpeg 압축 파일을 내려받아 압축을 풉니다

2. 예시로 C:\ffmpeg 위치에 폴더를 둡니다

3. C:\ffmpeg\bin 경로를 복사합니다

4. Windows 검색에서 "환경 변수"를 열고 Path에 새 항목으로 추가합니다

5. 터미널을 완전히 다시 열고 아래 명령으로 확인합니다

실습 코드

ffmpeg -version

왜 PATH를 설정하나요?

프로그램이 ffmpeg를 호출할 때 운영체제가 ffmpeg.exe가 어디 있는지 알아야 하기 때문입니다. PATH가 없으면 "ffmpeg not found" 오류가 납니다.

체크 포인트

  • 새 터미널에서 ffmpeg -version이 출력된다
  • Cursor 터미널도 재시작한다
  • bin 폴더까지 들어간 경로인지 다시 확인한다
Step 14

macOS에서 ffmpeg 설치와 PATH 확인

published

Step 14

macOS에서 ffmpeg 설치와 PATH 확인

macOS에서는 보통 Homebrew로 설치하는 것이 가장 단순합니다.

실습 코드

brew install ffmpeg
ffmpeg -version

실습 코드

echo 'export PATH="$(brew --prefix)/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

왜 PATH를 확인하나요?

brew로 설치해도 쉘 설정에 따라 터미널이 ffmpeg를 바로 못 찾는 경우가 있습니다. 이때 PATH에 brew bin 경로를 잡아주면 됩니다.

실습 팁

macOS에서는 zsh를 쓰는 경우가 많아서 ~/.zshrc를 수정하는 예시를 사용합니다.

Step 15

Full HD · 4K 다운로드 구현

published

Step 15

Full HD · 4K 다운로드 구현

ffmpeg 준비가 끝났다면 다시 명세를 확장하고, 고화질 다운로드를 구현합니다.

이제부터는 단순 다운로드가 아니라 영상 + 음성 병합을 포함한 고화질 다운로드를 목표로 합니다.

실습 코드

plan.md를 업데이트했어.
이제 고화질 다운로드를 구현해줘.

조건:
- ffmpeg가 설치되어 있다고 가정
- bestvideo+bestaudio 조합 우선
- 없으면 가능한 다음 화질로 자동 fallback
- 병합 후 하나의 파일로 저장
- 기존 조회 기능과 다운로드 버튼 흐름은 유지
- 상태 메시지에 현재 진행 상황 표시

실습 코드

ffmpeg -version

권장 품질 정책

  • 가능하면 최고 화질
  • 없으면 자동으로 다음 화질
  • 영상 + 음성을 병합해 단일 파일 저장

명세도 같이 업데이트하세요

고화질 구현 전에는 plan.md에 품질 정책과 ffmpeg 사용 조건을 한 번 더 반영하고 Go 하는 흐름이 가장 안정적입니다.

Step 16

GitHub 저장소 만들고 푸시하기

published

Step 16

GitHub 저장소 만들고 푸시하기

1부에서 배운 GitHub CLI 흐름을 이번 프로젝트에 실제로 적용합니다.

실습 결과물을 로컬에만 두지 말고, GitHub에 저장해 두면 다음 시간에 이어서 수정하기 쉽습니다.

실습 코드

git init
git add .
git commit -m "feat: youtube downloader"
git branch -M main
gh repo create youtube-downloader --public --source=. --remote=origin
git push -u origin main

왜 GitHub에 올리나요?

  • 실습 결과물을 안전하게 저장할 수 있습니다
  • 다음 수업에서 이어서 수정하기 쉽습니다
  • AI가 만들어준 코드도 버전 관리 습관을 들일 수 있습니다

참고

이미 같은 이름의 저장소가 있다면 gh repo create 대신 기존 원격 저장소를 연결해서 푸시하면 됩니다.

Step 17

exe 파일 만들기

published

Step 17

exe 파일 만들기

Windows 배포 기준으로 PyInstaller를 사용해 실행 파일을 만듭니다.

PyInstaller는 파이썬 프로그램과 필요한 실행 환경을 묶어서 배포용 실행 파일 형태로 만들어주는 도구입니다.

실습 코드

pip install pyinstaller
pyinstaller --onefile --windowed main.py

실습 코드

dist/
└─ main.exe

PyInstaller란?

파이썬 프로그램과 필요한 환경을 묶어서 배포용 실행 파일 형태로 만드는 도구입니다.

실습 팁

  • 아이콘 추가는 심화 과정으로 분리해도 좋습니다
  • 처음에는 onefile 결과만 확인해도 충분합니다
  • 백신이 낯선 exe를 경고할 수 있으니 테스트 환경에서 먼저 확인합니다
Step 18

막혔을 때는 로그로 다시 핑퐁합니다

published

Step 18

막혔을 때는 로그로 다시 핑퐁합니다

실행 → 오류 확인 → Cursor 수정 → 재실행. 이 반복이 AI Native 개발의 핵심 루프입니다.

프로그램이 한 번에 완성되지 않아도 괜찮습니다. 중요한 것은 에러를 정확히 보고, 그 에러를 바탕으로 다시 Cursor와 협업하는 것입니다.

실습 코드

아래는 실행 에러 로그야.
원인과 수정 방향을 먼저 설명해주고,
승인된 범위 안에서만 고쳐줘.

[에러 로그 붙여넣기]

좋은 디버깅 습관

  • "안 돼요" 대신 에러 로그를 붙여넣는다
  • 방금 바뀐 파일과 실행 명령을 같이 적는다
  • 한 번에 너무 많이 고치지 않는다

이번 2부에서 배운 것

  • 새 프로젝트 시작하기
  • AGENTS.md로 작업 규칙 만들기
  • Ai Studio와 Cursor로 명세 핑퐁하기
  • PyQt5, yt-dlp, ffmpeg 활용하기
  • PATH 환경변수 이해하기
  • GitHub에 저장하고 exe로 배포하기

요약

아이디어를 바로 코딩하지 않고, 명세를 다듬고 검토한 뒤 구현하는 전체 흐름을 경험했습니다.

Step 19

완료! 축하합니다 🎉

published

Step 19

완료! 축하합니다 🎉

로컬 앱 개발을 완료했습니다. 이제 웹앱을 만들어볼 차례입니다.

🎉 유튜브 다운로더 완성!

아이디어부터 실행 파일까지, 전체 개발 과정을 경험했습니다.

이번 실습에서 완성한 것들

  • 유튜브 영상 조회 기능
  • 영상 다운로드 기능
  • Full HD / 4K 고화질 지원
  • PyQt5 GUI 인터페이스
  • GitHub 저장소 생성 및 관리
  • 실행 파일(.exe) 생성

배운 핵심 개념들

AI와의 협업

  • AGENTS.md로 작업 규칙을 정하고, PLAN/ACT 모드로 체계적으로 개발

명세 작성

  • Google AI Studio와 Cursor를 오가며 명세를 다듬고 검토

로컬 앱 개발

  • PyQt5로 GUI 프로그램 만들기

명령줄 도구

  • ffmpeg와 PATH 환경변수 이해

버전 관리

  • GitHub로 프로젝트 저장 및 관리

배포

  • PyInstaller로 실행 파일 만들기

다음 단계: 웹앱 만들기

로컬 앱 개발을 완료했으니, 이제 웹앱을 만들어볼 차례입니다!

웹앱의 장점:

  • React/Next.js로 웹 인터페이스 만들기
  • Supabase로 데이터베이스와 백엔드 활용하기
  • 웹에서도 AI와 협업하는 개발 방법
  • 배포와 공유가 쉬운 웹앱의 장점

웹앱은 설치 없이 브라우저에서 바로 사용할 수 있고, 여러 사람과 쉽게 공유할 수 있습니다.

마무리

수고하셨습니다! 다음 강의에서 웹앱 개발을 시작해봅시다. 🚀

다음 모듈: 바이브코딩 이론과 서비스 구조 →
Module 3lesson필수

바이브코딩 이론과 서비스 구조

FastAPI·Streamlit·Cursor 리팩토링 흐름을 따라가며, 4강 본실습 전에 뉴스룸 서비스 구조를 미리 경험합니다.

29 steps

Step 1

모듈 안내

published

Step 1

모듈 안내

좋습니다. 아래는 3강 part1을 강사가 그대로 읽고 진행할 수 있는 수준으로 쓴 강의용 원고입니다.

Step 2

3-1. FastAPI로 나만의 뉴스룸 핵심 기능 만들기

published

Step 2

3-1. FastAPI로 나만의 뉴스룸 핵심 기능 만들기

Step 3

3-1 수업 목표

published

Step 3

3-1 수업 목표

Step 4

3-1-1. 문제 정의와 데이터 흐름 설명

published

Step 4

3-1-1. 문제 정의와 데이터 흐름 설명

실습 지시

학생들에게 채팅창 또는 노트에 아래를 적게 합니다.

실습 코드

입력: RSS 주소
처리 1: 뉴스 기사 가져오기
처리 2: AI 요약하기
출력: 제목 + 링크 + 요약 결과
Step 5

3-1-2. Cursor에게 먼저 기획시키기

published

Step 5

3-1-2. Cursor에게 먼저 기획시키기

실습 코드

우리는 RSS 기반 IT 뉴스룸 백엔드를 FastAPI로 만들고 싶다.

요구사항:
- 사용자가 RSS 주소를 입력하면 최신 뉴스 몇 건을 가져온다.
- 가져온 뉴스 목록을 Gemini API로 요약한다.
- FastAPI 엔드포인트를 통해 결과를 JSON으로 반환한다.
- 파일 구조는 유지보수가 쉽도록 나눈다.
- services 계층과 routers 계층을 분리한다.
- 환경변수로 GEMINI_API_KEY를 읽는다.
- 초보자 교육용 프로젝트이므로 구조를 너무 복잡하게 만들지 않는다.

해줘:
1. 추천 폴더 구조
2. 필요한 패키지 목록
3. 파일별 책임
4. 구현 순서
5. 최소 MVP 기준의 엔드포인트 설계

총 17줄 · 펼치기를 누르면 전체 코드를 볼 수 있습니다.

체크포인트

Cursor가 아래 정도를 내면 좋습니다.

실습 코드

app/
  main.py
  routers/
    news.py
  services/
    rss_service.py
    summary_service.py
  core/
    config.py
  schemas.py
Step 6

3-1-3. 프로젝트 생성 및 패키지 설치

published

Step 6

3-1-3. 프로젝트 생성 및 패키지 설치

실습 코드

mkdir my-newsroom
cd my-newsroom

python -m venv .venv

Windows

.venv\Scripts\activate

macOS / Linux

source .venv/bin/activate

패키지 설치

pip install fastapi uvicorn streamlit feedparser python-dotenv requests
pip install -U google-genai

requirements 저장

pip freeze > requirements.txt
Step 7

3-1-4. 기본 폴더 만들기

published

Step 7

3-1-4. 기본 폴더 만들기

실습 코드

mkdir app
mkdir app\routers
mkdir app\services
mkdir app\core

또는 Cursor에게 생성 요청

이 프로젝트에 아래 구조를 생성해줘.

app/
  main.py
  routers/news.py
  services/rss_service.py
  services/summary_service.py
  core/config.py
  schemas.py
  __init__.py
Step 8

3-1-5. 환경변수 설정

published

Step 8

3-1-5. 환경변수 설정

실습 지시

프로젝트 루트에 `.env` 파일 생성

GEMINI_API_KEY=여기에_본인_API_KEY

`.gitignore` 생성 또는 수정

.venv/
.env
__pycache__/
Step 9

3-1-6. RSS 수집 서비스 구현

published

Step 9

3-1-6. RSS 수집 서비스 구현

실습 코드

app/services/rss_service.py 파일에 다음 기능을 구현해줘.

요구사항:
- 함수 이름은 fetch_rss_items
- 입력: feed_url(str), limit(int=5)
- 출력: 기사 목록(list[dict])
- 각 기사에는 title, link, published, summary 정도만 포함
- 예외가 발생하면 초보자도 이해하기 쉬운 메시지로 raise
- 교육용이므로 코드에 주석을 충분히 달아줘

실습 체크포인트

학생들에게 다음 질문:

Step 10

3-1-7. Gemini 요약 서비스 구현

published

Step 10

3-1-7. Gemini 요약 서비스 구현

실습 코드

app/services/summary_service.py 파일에 Gemini 기반 요약 함수를 구현해줘.

요구사항:
- 함수 이름은 summarize_news_items
- 입력: 뉴스 목록(list[dict])
- 출력: 요약 결과가 포함된 뉴스 목록(list[dict])
- 각 기사에 ai_summary, why_it_matters, keywords 필드를 추가
- GEMINI_API_KEY 환경변수를 읽도록 구성
- Google GenAI SDK를 사용
- 응답 파싱이 불안정하지 않도록 프롬프트를 구조적으로 작성
- 실패 시 fallback 메시지를 반환
- 교육용이므로 최대한 읽기 쉽게 작성
Step 11

3-1-8. 요청/응답 스키마 만들기

published

Step 11

3-1-8. 요청/응답 스키마 만들기

실습 코드

app/schemas.py 에 아래 스키마를 만들어줘.

- NewsroomRequest
  - feed_url: str
  - limit: int = 5

- NewsItem
  - title: str
  - link: str
  - published: str | None
  - summary: str | None
  - ai_summary: str | None
  - why_it_matters: str | None
  - keywords: list[str] | None

- NewsroomResponse
  - items: list[NewsItem]

총 17줄 · 펼치기를 누르면 전체 코드를 볼 수 있습니다.

Step 12

3-1-9. FastAPI 라우터 만들기

published

Step 12

3-1-9. FastAPI 라우터 만들기

실습 코드

app/routers/news.py 에 FastAPI 라우터를 구현해줘.

요구사항:
- GET /health
- POST /summarize
- POST /summarize 는 NewsroomRequest를 입력으로 받는다
- 내부에서 fetch_rss_items -> summarize_news_items 순서로 호출한다
- 응답은 NewsroomResponse 형태로 반환한다
- 에러 발생 시 HTTPException으로 적절히 처리한다
- 교육용이라서 흐름이 읽히도록 작성해줘

실습 코드

app/main.py 파일을 만들어줘.

요구사항:
- FastAPI 앱 생성
- news 라우터 등록
- 앱 제목은 My Newsroom API
- 초보자 교육용 예시라 주석 포함
Step 13

3-1-10. 서버 실행과 테스트

published

Step 13

3-1-10. 서버 실행과 테스트

실습 코드

uvicorn app.main:app --reload

브라우저 접속

http://127.0.0.1:8000/docs

FastAPI는 기본적으로 /docs에서 자동 인터랙티브 문서를 제공합니다. 실습 때는 이 페이지에서 바로 요청을 날려볼 수 있습니다. ([FastAPI][3])

실습 코드

{
  "feed_url": "https://feeds.feedburner.com/TechCrunch/",
  "limit": 3
}

체크포인트

학생들에게 확인할 것:

  • 응답이 JSON으로 오나?
  • 기사 목록이 실제로 오나?
  • AI 요약 필드가 들어왔나?
  • 예외 발생 시 에러 메시지가 읽을 만한가?
Step 14

3-1-11. 중간 정리와 커밋

published

Step 14

3-1-11. 중간 정리와 커밋

실습 코드

git add .
git commit -m "feat: build FastAPI newsroom backend MVP"
Step 15

모듈 안내

published

Step 15

모듈 안내

좋습니다. 아래는 3강 part2를 강사가 그대로 읽고 진행할 수 있는 수준으로 쓴 강의용 원고입니다.

이 강의는 part1에서 만든 FastAPI 구조를 Cursor AI로 Streamlit 서비스로 리팩토링하기에 집중합니다.

실습 기준도 현재 공식 흐름에 맞췄습니다. Streamlit Community Cloud는 GitHub 저장소와 직접 연결해 앱을 배포하고, `secrets.toml` 형태의 비밀값 관리를 지원합니다. Gemini 쪽은 현재 Google GenAI SDK(`google-genai`)가 공식 권장 Python SDK이며, GEMINI_API_KEY 환경변수를 자동으로 읽을 수 있습니다. ([Streamlit Docs][1])

Step 16

3-2. Cursor AI로 Streamlit 서비스로 리팩토링하기

published

Step 16

3-2. Cursor AI로 Streamlit 서비스로 리팩토링하기

Step 17

3-2 수업 목표

published

Step 17

3-2 수업 목표

Step 18

3-2-1. 왜 리팩토링하는가

published

Step 18

3-2-1. 왜 리팩토링하는가

Step 19

3-2-2. 리팩토링 목표 먼저 선언하기

published

Step 19

3-2-2. 리팩토링 목표 먼저 선언하기

Step 20

3-2-3. Cursor에게 리팩토링 지시하기

published

Step 20

3-2-3. Cursor에게 리팩토링 지시하기

실습 코드

현재 프로젝트는 FastAPI 기반의 뉴스룸 백엔드 MVP다.

현재 상태:
- RSS를 가져오는 서비스 함수가 있다
- Gemini로 요약하는 서비스 함수가 있다
- FastAPI 라우터와 main.py가 있다

이제 이 프로젝트를 Streamlit 단일 앱으로 리팩토링하고 싶다.

리팩토링 목표:
- FastAPI 엔드포인트 호출 구조를 없앤다
- services/rss_service.py 와 services/summary_service.py 는 최대한 재사용한다
- streamlit_app.py 를 새로 만든다
- 사용자는 Streamlit 화면에서 RSS 주소와 기사 개수를 입력한다
- 버튼을 누르면 뉴스를 가져오고 AI 요약 결과를 화면에 보여준다
- 결과는 카드 또는 섹션 형태로 보기 쉽게 표시한다
- 에러 메시지는 초보자도 이해하기 쉽게 출력한다
- 교육용 프로젝트이므로 구조를 단순하고 읽기 쉽게 유지한다

해줘:
1. 리팩토링 계획
2. 삭제 또는 축소 가능한 FastAPI 파일 목록
3. 새 Streamlit 구조 제안
4. streamlit_app.py 초안 작성

총 24줄 · 펼치기를 누르면 전체 코드를 볼 수 있습니다.

Step 21

3-2-4. Streamlit 앱 뼈대 만들기

published

Step 21

3-2-4. Streamlit 앱 뼈대 만들기

실습 지시

Cursor에게 streamlit_app.py 생성 요청 후, 학생들은 아래 구성 확인:

  • 앱 제목
  • RSS 주소 입력창
  • 기사 개수 슬라이더 또는 숫자 입력
  • "뉴스 요약하기" 버튼
  • 결과 영역
  • 에러 메시지 영역
Step 22

3-2-5. FastAPI 구조를 Streamlit 호출 구조로 바꾸기

published

Step 22

3-2-5. FastAPI 구조를 Streamlit 호출 구조로 바꾸기

실습 코드

streamlit_app.py 에서 FastAPI를 호출하지 말고,
기존 services/rss_service.py 와 services/summary_service.py 를 직접 import 해서 사용하도록 바꿔줘.

요구사항:
- 버튼을 눌렀을 때만 실행
- 로딩 중 메시지 표시
- 결과는 기사별로 제목, 링크, AI 요약, 왜 중요한지, 키워드를 출력
- 코드가 길어지면 helper 함수로 분리
Step 23

3-2-6. UI를 읽기 좋게 다듬기

published

Step 23

3-2-6. UI를 읽기 좋게 다듬기

실습 코드

Streamlit UI를 개선해줘.

요구사항:
- 각 기사 결과를 시각적으로 구분해줘
- 제목은 눈에 띄게
- 링크는 바로 클릭 가능하게
- ai_summary 와 why_it_matters 는 본문처럼 읽기 좋게
- keywords 는 작은 태그처럼 보이게
- 전체 UI는 교육용 데모답게 깔끔하고 단순하게
Step 24

3-2-7. Cursor로 한 번 더 정리 리팩토링하기

published

Step 24

3-2-7. Cursor로 한 번 더 정리 리팩토링하기

실습 코드

현재 Streamlit 앱은 동작하지만 파일이 길고 책임이 섞여 있다.
리팩토링해줘.

목표:
- UI 코드와 로직 보조 함수를 적절히 분리
- 변수명 읽기 쉽게 정리
- 중복 제거
- 초보자 교육용 코드답게 주석 보강
- 파일 수는 과하게 늘리지 말고 단순하게 유지
Step 25

3-2-8. 로컬 실행 테스트

published

Step 25

3-2-8. 로컬 실행 테스트

실습 코드

streamlit run streamlit_app.py

체크포인트

  • 버튼 클릭 후 로딩이 보이나?
  • 결과가 여러 기사로 잘 나뉘나?
  • 에러가 나면 화면에서 이해 가능한 메시지가 뜨나?
  • 링크 클릭이 되나?
Step 26

3-2-9. 배포 준비: 로컬 키에서 Cloud secrets로 이동

published

Step 26

3-2-9. 배포 준비: 로컬 키에서 Cloud secrets로 이동

실습 지시

로컬 참고용 파일 생성

mkdir .streamlit

`.streamlit/secrets.toml` 예시

GEMINI_API_KEY = "여기에_실제_키는_배포_플랫폼에서_입력"
Step 27

3-2-10. GitHub 반영

published

Step 27

3-2-10. GitHub 반영

실습 코드

git add .
git commit -m "refactor: convert FastAPI newsroom into Streamlit app"
git push
Step 28

3-2-11. Streamlit Community Cloud 배포

published

Step 28

3-2-11. Streamlit Community Cloud 배포

학생 실습 순서

1. Streamlit Community Cloud 로그인

2. GitHub 연결

3. 저장소 선택

4. 브랜치 선택

5. 앱 파일 지정: streamlit_app.py

6. Secrets 입력: GEMINI_API_KEY

7. Deploy 클릭

Step 29

3-2-12. 배포 후 점검

published

Step 29

3-2-12. 배포 후 점검

실습 코드

[ ] 앱 URL 접속 성공
[ ] RSS 입력 후 실행 성공
[ ] 요약 결과 출력 성공
[ ] 링크 이동 성공
[ ] 에러 시 화면 메시지 확인

과제 A

RSS 주소를 여러 개 받아서 통합 뉴스룸 만들기

과제 B

카테고리별 요약 탭 만들기

과제 C

"왜 중요한가" 대신 "실무 영향" 섹션 추가하기

과제 D

오늘 요약 결과를 Markdown으로 다운로드하기

과제 E

관심 키워드를 입력하면 키워드 포함 기사만 보여주기

다음 모듈: FastAPI로 나만의 뉴스룸 만들기 →
Module 4practice필수

FastAPI로 나만의 뉴스룸 만들기

3강에서 익힌 흐름을 바탕으로, 기획·RSS·Gemini 요약·FastAPI 핵심 기능을 프로젝트 단위로 완성합니다.

12 steps

Step 1

모듈 안내

published

Step 1

모듈 안내

참고: 인쇄용 가이드(나만의뉴스룸.html)에서 가져온 기획 단계

실습 전에 브라우저 LLM(예: Gemini, Google AI Studio)으로 기획을 정리해 두면 좋습니다.

  • CASE A – 도메인 용어를 아는 경우

"국내 IT 뉴스 RSS를 수집하여 Gemini API로 분석하는 Streamlit 앱을 기획해줘. DB 없이 JSON 파일과 GitHub을 활용한 구조로 기획하고, Cursor AI용 마크다운 기획안을 작성해줘."

  • CASE B – 도메인 용어를 모르는 경우

"인터넷 뉴스 주소를 넣으면 자동으로 최신 글을 가져와서 AI가 요약해주는 사이트를 만들고 싶어. 복잡한 데이터베이스 설치 없이 간단하게 파일로 저장하고, 나중에 웹사이트로 바로 띄울 수 있게 기획해줘."

실습 도메인 용어 사전 (AI와 대화할 때 참고)

용어설명
Streamlit파이썬 코드를 웹사이트 화면으로 바꿔주는 도구
RSS뉴스를 기계가 읽기 좋게 실시간으로 보내주는 규격
Gemini API구글 AI 모델을 내 프로그램에서 쓰는 기능
JSON데이터를 텍스트 파일 형태로 가볍게 저장하는 방식
Step 2

4-1-1. 문제 정의와 데이터 흐름 설명

published

Step 2

4-1-1. 문제 정의와 데이터 흐름 설명

실습 지시

학생들에게 채팅창 또는 노트에 아래를 적게 합니다.

실습 코드

입력: RSS 주소
처리 1: 뉴스 기사 가져오기
처리 2: AI 요약하기
출력: 제목 + 링크 + 요약 결과
Step 3

4-1-2. Cursor에게 먼저 기획시키기

published

Step 3

4-1-2. Cursor에게 먼저 기획시키기

실습 코드

우리는 RSS 기반 IT 뉴스룸 백엔드를 FastAPI로 만들고 싶다.

요구사항:
- 사용자가 RSS 주소를 입력하면 최신 뉴스 몇 건을 가져온다.
- 가져온 뉴스 목록을 Gemini API로 요약한다.
- FastAPI 엔드포인트를 통해 결과를 JSON으로 반환한다.
- 파일 구조는 유지보수가 쉽도록 나눈다.
- services 계층과 routers 계층을 분리한다.
- 환경변수로 GEMINI_API_KEY를 읽는다.
- 초보자 교육용 프로젝트이므로 구조를 너무 복잡하게 만들지 않는다.

해줘:
1. 추천 폴더 구조
2. 필요한 패키지 목록
3. 파일별 책임
4. 구현 순서
5. 최소 MVP 기준의 엔드포인트 설계

총 17줄 · 펼치기를 누르면 전체 코드를 볼 수 있습니다.

체크포인트

Cursor가 아래 정도를 내면 좋습니다.

실습 코드

app/
  main.py
  routers/
    news.py
  services/
    rss_service.py
    summary_service.py
  core/
    config.py
  schemas.py
Step 4

4-1-3. 프로젝트 생성 및 패키지 설치

published

Step 4

4-1-3. 프로젝트 생성 및 패키지 설치

실습 코드

mkdir my-newsroom
cd my-newsroom

python -m venv .venv

Windows

.venv\Scripts\activate

macOS / Linux

source .venv/bin/activate

패키지 설치

pip install fastapi uvicorn streamlit feedparser python-dotenv requests
pip install -U google-genai

requirements 저장

pip freeze > requirements.txt
Step 5

4-1-4. 기본 폴더 만들기

published

Step 5

4-1-4. 기본 폴더 만들기

실습 코드

mkdir app
mkdir app\routers
mkdir app\services
mkdir app\core

또는 Cursor에게 생성 요청

이 프로젝트에 아래 구조를 생성해줘.

app/
  main.py
  routers/news.py
  services/rss_service.py
  services/summary_service.py
  core/config.py
  schemas.py
  __init__.py
Step 6

4-1-5. 환경변수 설정

published

Step 6

4-1-5. 환경변수 설정

실습 지시

프로젝트 루트에 `.env` 파일 생성

GEMINI_API_KEY=여기에_본인_API_KEY

`.gitignore` 생성 또는 수정

.venv/
.env
__pycache__/
Step 7

4-1-6. RSS 수집 서비스 구현

published

Step 7

4-1-6. RSS 수집 서비스 구현

실습 코드

app/services/rss_service.py 파일에 다음 기능을 구현해줘.

요구사항:
- 함수 이름은 fetch_rss_items
- 입력: feed_url(str), limit(int=5)
- 출력: 기사 목록(list[dict])
- 각 기사에는 title, link, published, summary 정도만 포함
- 예외가 발생하면 초보자도 이해하기 쉬운 메시지로 raise
- 교육용이므로 코드에 주석을 충분히 달아줘

실습 체크포인트

학생들에게 다음 질문:

Step 8

4-1-7. Gemini 요약 서비스 구현

published

Step 8

4-1-7. Gemini 요약 서비스 구현

실습 코드

app/services/summary_service.py 파일에 Gemini 기반 요약 함수를 구현해줘.

요구사항:
- 함수 이름은 summarize_news_items
- 입력: 뉴스 목록(list[dict])
- 출력: 요약 결과가 포함된 뉴스 목록(list[dict])
- 각 기사에 ai_summary, why_it_matters, keywords 필드를 추가
- GEMINI_API_KEY 환경변수를 읽도록 구성
- Google GenAI SDK를 사용
- 응답 파싱이 불안정하지 않도록 프롬프트를 구조적으로 작성
- 실패 시 fallback 메시지를 반환
- 교육용이므로 최대한 읽기 쉽게 작성
Step 9

4-1-8. 요청/응답 스키마 만들기

published

Step 9

4-1-8. 요청/응답 스키마 만들기

실습 코드

app/schemas.py 에 아래 스키마를 만들어줘.

- NewsroomRequest
  - feed_url: str
  - limit: int = 5

- NewsItem
  - title: str
  - link: str
  - published: str | None
  - summary: str | None
  - ai_summary: str | None
  - why_it_matters: str | None
  - keywords: list[str] | None

- NewsroomResponse
  - items: list[NewsItem]

총 17줄 · 펼치기를 누르면 전체 코드를 볼 수 있습니다.

Step 10

4-1-9. FastAPI 라우터 만들기

published

Step 10

4-1-9. FastAPI 라우터 만들기

실습 코드

app/routers/news.py 에 FastAPI 라우터를 구현해줘.

요구사항:
- GET /health
- POST /summarize
- POST /summarize 는 NewsroomRequest를 입력으로 받는다
- 내부에서 fetch_rss_items -> summarize_news_items 순서로 호출한다
- 응답은 NewsroomResponse 형태로 반환한다
- 에러 발생 시 HTTPException으로 적절히 처리한다
- 교육용이라서 흐름이 읽히도록 작성해줘

실습 코드

app/main.py 파일을 만들어줘.

요구사항:
- FastAPI 앱 생성
- news 라우터 등록
- 앱 제목은 My Newsroom API
- 초보자 교육용 예시라 주석 포함
Step 11

4-1-10. 서버 실행과 테스트

published

Step 11

4-1-10. 서버 실행과 테스트

실습 코드

uvicorn app.main:app --reload

브라우저 접속

http://127.0.0.1:8000/docs

FastAPI는 기본적으로 /docs에서 자동 인터랙티브 문서를 제공합니다. ([FastAPI][3])

실습 코드

{
  "feed_url": "https://feeds.feedburner.com/TechCrunch/",
  "limit": 3
}

체크포인트

학생들에게 확인할 것:

  • 응답이 JSON으로 오나?
  • 기사 목록이 실제로 오나?
  • AI 요약 필드가 들어왔나?
  • 예외 발생 시 에러 메시지가 읽을 만한가?
Step 12

4-1-11. 중간 정리와 커밋

published

Step 12

4-1-11. 중간 정리와 커밋

실습 코드

git add .
git commit -m "feat: build FastAPI newsroom backend MVP"
다음 모듈: Streamlit 서비스 리팩토링 →
Module 5practice필수

Streamlit 서비스 리팩토링

FastAPI 구조를 Streamlit 서비스로 바꾸고 UI와 실행 흐름을 정리합니다.

13 steps

Step 1

모듈 안내

published

Step 1

모듈 안내

참고: 인쇄용 가이드(나만의뉴스룸.html)에서 가져온 구현·배포 단계

  • 4. 에이전트 구현

@plan.md 등 기획 문서를 기준으로 Cursor 에이전트(Ctrl+I)로 Streamlit 뉴스룸 앱 구현. 필요한 라이브러리 설치까지 한 번에 요청.

  • 5. 보안 및 로컬 테스트

API 키는 secrets.toml에 설정. streamlit run app.py(또는 streamlit_app.py)로 로컬 실행 확인.

  • 6. 글로벌 웹 배포

GitHub 푸시 → Streamlit Cloud에서 저장소 연결 → 온라인 환경변수에 API 키 등록.

Step 2

4-2-1. 왜 리팩토링하는가

published

Step 2

4-2-1. 왜 리팩토링하는가

Step 3

4-2-2. 리팩토링 목표 먼저 선언하기

published

Step 3

4-2-2. 리팩토링 목표 먼저 선언하기

Step 4

4-2-3. Cursor에게 리팩토링 지시하기

published

Step 4

4-2-3. Cursor에게 리팩토링 지시하기

실습 코드

현재 프로젝트는 FastAPI 기반의 뉴스룸 백엔드 MVP다.

현재 상태:
- RSS를 가져오는 서비스 함수가 있다
- Gemini로 요약하는 서비스 함수가 있다
- FastAPI 라우터와 main.py가 있다

이제 이 프로젝트를 Streamlit 단일 앱으로 리팩토링하고 싶다.

리팩토링 목표:
- FastAPI 엔드포인트 호출 구조를 없앤다
- services/rss_service.py 와 services/summary_service.py 는 최대한 재사용한다
- streamlit_app.py 를 새로 만든다
- 사용자는 Streamlit 화면에서 RSS 주소와 기사 개수를 입력한다
- 버튼을 누르면 뉴스를 가져오고 AI 요약 결과를 화면에 보여준다
- 결과는 카드 또는 섹션 형태로 보기 쉽게 표시한다
- 에러 메시지는 초보자도 이해하기 쉽게 출력한다
- 교육용 프로젝트이므로 구조를 단순하고 읽기 쉽게 유지한다

해줘:
1. 리팩토링 계획
2. 삭제 또는 축소 가능한 FastAPI 파일 목록
3. 새 Streamlit 구조 제안
4. streamlit_app.py 초안 작성

총 24줄 · 펼치기를 누르면 전체 코드를 볼 수 있습니다.

Step 5

4-2-4. Streamlit 앱 뼈대 만들기

published

Step 5

4-2-4. Streamlit 앱 뼈대 만들기

실습 지시

Cursor에게 streamlit_app.py 생성 요청 후, 학생들은 아래 구성 확인:

  • 앱 제목
  • RSS 주소 입력창
  • 기사 개수 슬라이더 또는 숫자 입력
  • "뉴스 요약하기" 버튼
  • 결과 영역
  • 에러 메시지 영역
Step 6

4-2-5. FastAPI 구조를 Streamlit 호출 구조로 바꾸기

published

Step 6

4-2-5. FastAPI 구조를 Streamlit 호출 구조로 바꾸기

실습 코드

streamlit_app.py 에서 FastAPI를 호출하지 말고,
기존 services/rss_service.py 와 services/summary_service.py 를 직접 import 해서 사용하도록 바꿔줘.

요구사항:
- 버튼을 눌렀을 때만 실행
- 로딩 중 메시지 표시
- 결과는 기사별로 제목, 링크, AI 요약, 왜 중요한지, 키워드를 출력
- 코드가 길어지면 helper 함수로 분리
Step 7

4-2-6. UI를 읽기 좋게 다듬기

published

Step 7

4-2-6. UI를 읽기 좋게 다듬기

실습 코드

Streamlit UI를 개선해줘.

요구사항:
- 각 기사 결과를 시각적으로 구분해줘
- 제목은 눈에 띄게
- 링크는 바로 클릭 가능하게
- ai_summary 와 why_it_matters 는 본문처럼 읽기 좋게
- keywords 는 작은 태그처럼 보이게
- 전체 UI는 교육용 데모답게 깔끔하고 단순하게
Step 8

4-2-7. Cursor로 한 번 더 정리 리팩토링하기

published

Step 8

4-2-7. Cursor로 한 번 더 정리 리팩토링하기

실습 코드

현재 Streamlit 앱은 동작하지만 파일이 길고 책임이 섞여 있다.
리팩토링해줘.

목표:
- UI 코드와 로직 보조 함수를 적절히 분리
- 변수명 읽기 쉽게 정리
- 중복 제거
- 초보자 교육용 코드답게 주석 보강
- 파일 수는 과하게 늘리지 말고 단순하게 유지
Step 9

4-2-8. 로컬 실행 테스트

published

Step 9

4-2-8. 로컬 실행 테스트

실습 코드

streamlit run streamlit_app.py

체크포인트

  • 버튼 클릭 후 로딩이 보이나?
  • 결과가 여러 기사로 잘 나뉘나?
  • 에러가 나면 화면에서 이해 가능한 메시지가 뜨나?
  • 링크 클릭이 되나?
Step 10

4-2-9. 배포 준비: 로컬 키에서 Cloud secrets로 이동

published

Step 10

4-2-9. 배포 준비: 로컬 키에서 Cloud secrets로 이동

실습 지시

로컬 참고용 파일 생성

mkdir .streamlit

`.streamlit/secrets.toml` 예시

GEMINI_API_KEY = "여기에_실제_키는_배포_플랫폼에서_입력"
Step 11

4-2-10. GitHub 반영

published

Step 11

4-2-10. GitHub 반영

실습 코드

git add .
git commit -m "refactor: convert FastAPI newsroom into Streamlit app"
git push
Step 12

4-2-11. Streamlit Community Cloud 배포

published

Step 12

4-2-11. Streamlit Community Cloud 배포

학생 실습 순서

1. Streamlit Community Cloud 로그인

2. GitHub 연결

3. 저장소 선택

4. 브랜치 선택

5. 앱 파일 지정: streamlit_app.py

6. Secrets 입력: GEMINI_API_KEY

7. Deploy 클릭

Step 13

4-2-12. 배포 후 점검

published

Step 13

4-2-12. 배포 후 점검

실습 코드

[ ] 앱 URL 접속 성공
[ ] RSS 입력 후 실행 성공
[ ] 요약 결과 출력 성공
[ ] 링크 이동 성공
[ ] 에러 시 화면 메시지 확인

과제 A

RSS 주소를 여러 개 받아서 통합 뉴스룸 만들기

과제 B

카테고리별 요약 탭 만들기

과제 C

"왜 중요한가" 대신 "실무 영향" 섹션 추가하기

과제 D

오늘 요약 결과를 Markdown으로 다운로드하기

과제 E

관심 키워드를 입력하면 키워드 포함 기사만 보여주기

다음 모듈: AI 주식 분석 앱 만들기 →
Module 6practice필수

AI 주식 분석 앱 만들기

한국투자증권 API, 네이버 검색 API, Gemini를 연결해 주식 분석 앱을 만듭니다.

17 steps

Step 1

모듈 안내

published

Step 1

모듈 안내

좋습니다.

이번 5강은 “직접 코드를 처음부터 손으로 짜는 강의” 가 아니라,

Google AI Studio와 Cursor AI를 오가며 명세 → 검토 → 수정 → 확정 → 개발까지 진행하는 AI 네이티브 바이브코딩 실습으로 잡는 게 훨씬 잘 맞습니다.

즉, 학습자는 명령어와 설치법을 전부 외우는 사람이 아니라,

  • 무엇을 만들지 명확하게 정의하고
  • AI에게 구조적으로 요청하고
  • 결과를 비교·수정하고
  • 개발을 점진적으로 확정하는 사람

이 되는 흐름으로 가면 됩니다.

아래는 그 방향에 맞춘 5강 실습자료 텍스트북 버전입니다.

말투도 강사 대본보다는 교재형 실습 문체로 정리했습니다.

실습 개요

이번 실습에서는 한국투자증권 Open API, 네이버 검색 API, Gemini를 활용하여 주식 분석 앱을 만드는 전체 흐름을 경험한다.

이 실습의 핵심은 단순히 API를 붙여서 기능을 만드는 것이 아니라,

Google AI Studio와 Cursor AI를 역할에 따라 나누어 활용하는 개발 방식을 익히는 데 있다.

이번 실습에서는 다음과 같은 흐름으로 작업을 진행한다.

  • Google AI Studio에서 기능 명세서 작성
  • Cursor AI에서 명세 검토 및 보완
  • Google AI Studio에서 피드백 반영 후 명세 수정
  • Cursor AI에서 최종 확정 후 개발 진행
  • 개발 중 필요한 명령어, 설치, 실행 방법은 AI에게 직접 질문하며 해결

즉, 이번 실습은 “정답 코드를 외워서 따라치는 실습”이 아니라

AI와 협업하며 실제 서비스를 설계하고 구현하는 실습이다.

최종 목표

최종적으로 다음 기능을 갖춘 앱을 목표로 한다.

  • 한국투자증권 API를 활용해 거래량 상위 종목 목록 조회
  • 상위 종목 중 하나를 선택했을 때
  • 네이버 검색 API를 이용해 관련 뉴스 검색
  • Gemini를 이용해 왜 올랐는지 / 왜 내렸는지 분석
  • 분석 결과를 앱에서 읽기 쉽게 표시

실습 원칙

이번 실습에서는 다음 원칙을 따른다.

1. 설치 명령어를 외우지 않는다.

필요한 설치나 실행 명령어는 Cursor AI 또는 Google AI Studio에 직접 묻는다.

2. 처음부터 완벽한 코드를 요구하지 않는다.

먼저 명세를 만들고, 그 다음 검토하고, 마지막에 개발을 확정한다.

3. 한 번에 큰 요구를 던지기보다

기능 단위로 나누어 요청하고 검토한다.

4. AI가 만든 결과를 그대로 믿지 않고

다른 AI로 교차 검토한다.

Step 2

이번 실습의 개발 방식을 먼저 이해하기

published

Step 2

이번 실습의 개발 방식을 먼저 이해하기

이번 실습은 다음과 같은 역할 분담으로 진행한다.

Google AI Studio의 역할

  • 아이디어를 구조화
  • 기능 명세서 작성
  • 요구사항 정리
  • 화면 흐름, API 흐름, 데이터 흐름 문서화
  • Cursor AI의 피드백을 반영하여 명세 수정

Cursor AI의 역할

  • 명세 검토
  • 누락된 기능, 예외처리, 구조 문제 지적
  • 실제 프로젝트 구조 제안
  • 코드 생성 및 수정
  • 개발 확정 및 구현 진행

이번 실습의 핵심은

“AI Studio는 설계 중심, Cursor AI는 구현 중심” 으로 활용하는 것이다.

Step 3

만들 앱을 먼저 한 문장으로 정의하기

published

Step 3

만들 앱을 먼저 한 문장으로 정의하기

AI에게 요청하기 전에, 만들 서비스의 목적을 한 문장으로 정리한다.

Step 4

Google AI Studio에서 1차 명세서를 작성하기

published

Step 4

Google AI Studio에서 1차 명세서를 작성하기

이 단계에서는 아직 코드를 만들지 않는다.

먼저 무엇을 만들지 명세화한다.

Google AI Studio에 아래와 같이 요청한다.

실습 코드

나는 AI 네이티브 바이브코딩 방식으로 주식 분석 앱을 만들고 싶다.

앱 목표:
- 한국투자증권 API를 사용한다
- 거래량 상위 종목 top 10을 조회한다
- 개별 종목 클릭 시 네이버 검색 API로 관련 뉴스를 검색한다
- Gemini를 이용해 왜 오르고 내렸는지 분석한다
- FastAPI 기반 백엔드 구조로 만든다

중요:
- 이번 작업은 바로 코드를 만드는 것이 아니라 명세서를 만드는 단계다
- 설치 방법이나 명령어는 자세히 쓰지 말고, 나중에 Cursor AI나 AI Studio에 다시 물어보는 방식으로 진행할 것이다
- 명세서는 AI가 개발하기 좋은 구조로 정리해줘

포함할 내용:
1. 프로젝트 목표
2. 사용자 흐름
3. 핵심 기능
4. API 흐름
5. 필요한 외부 API
6. 백엔드 구조 제안
7. 엔드포인트 초안
8. 데이터 흐름
9. 예외 상황
10. MVP 범위

문서는 실습 교재에 넣을 수 있게 구조적으로 작성해줘.

총 27줄 · 펼치기를 누르면 전체 코드를 볼 수 있습니다.

이 단계의 목적은 잘 쓰인 명세 초안을 얻는 것이다.

Step 5

AI Studio가 만든 명세서를 그대로 쓰지 말고 정리하기

published

Step 5

AI Studio가 만든 명세서를 그대로 쓰지 말고 정리하기

Google AI Studio가 결과를 주면, 바로 확정하지 않는다.

먼저 다음 기준으로 읽어본다.

확인할 항목

  • 앱 목표가 너무 넓어지지 않았는가
  • MVP 범위가 적절한가
  • 종목 조회와 뉴스 분석 흐름이 자연스러운가
  • 한 번에 너무 많은 기능이 들어가 있지 않은가
  • 실제 실습 가능한 수준인지

이 단계에서는 “좋다 / 나쁘다”보다

“실습 가능한가, 너무 무거운가” 를 중심으로 본다.

실습에서는 완성형 서비스보다

작동하는 작은 흐름이 더 중요하다.

Step 6

Cursor AI에 명세 검토를 요청하기

published

Step 6

Cursor AI에 명세 검토를 요청하기

이제 AI Studio가 만든 초안을 Cursor AI에게 가져가서 검토시킨다.

여기서는 Cursor AI에게 단순 요약이 아니라,

개발자 관점의 문제점과 보완점을 찾게 해야 한다.

실습 코드

아래는 Google AI Studio에서 만든 주식 분석 앱 명세 초안이다.

이 명세를 개발 관점에서 검토해줘.

검토 기준:
- FastAPI 프로젝트로 구현 가능한지
- 기능 범위가 과하지 않은지
- MVP로 적절한지
- API 흐름이 현실적인지
- 누락된 예외처리가 있는지
- 폴더 구조와 서비스 분리가 필요한지
- 이후 기능 확장이 가능한 구조인지

중요:
- 지금은 코드를 작성하지 말고 명세 검토만 해줘
- 반드시 "좋은 점", "문제점", "보완 제안", "개발 우선순위"로 나누어 답변해줘
- 실습형 프로젝트 기준으로 검토해줘

총 17줄 · 펼치기를 누르면 전체 코드를 볼 수 있습니다.

이 단계의 핵심은

AI Studio가 만든 설계를 Cursor AI가 비판적으로 읽게 하는 것이다.

Step 7

Cursor AI 피드백을 바탕으로 수정 포인트를 추리기

published

Step 7

Cursor AI 피드백을 바탕으로 수정 포인트를 추리기

Cursor AI의 검토 결과가 나오면, 그 내용을 다시 정리한다.

보통 다음과 같은 수정 포인트가 나온다.

  • 거래량 Top 10 조회 기능을 먼저 MVP로 고정
  • “어제 거래량 상위”는 심화 기능으로 미루기
  • 뉴스 검색 결과 개수 제한 필요
  • Gemini 분석 결과를 정형 JSON으로 받도록 명시
  • 서비스 계층 분리 필요
  • 종목 상세 분석 API 분리 필요
  • 에러 처리 방식 정의 필요

이 단계에서는 Cursor AI의 답변을 통째로 다시 넣는 것이 아니라,

수정할 핵심 항목만 추려서 다시 AI Studio로 가져가는 것이 중요하다.

Step 8

Google AI Studio에서 명세서를 2차 수정하기

published

Step 8

Google AI Studio에서 명세서를 2차 수정하기

이제 다시 Google AI Studio에서

Cursor AI의 피드백을 반영한 개선 명세서를 만든다.

실습 코드

이전 명세서를 아래 피드백 기준으로 수정해줘.

수정 반영 사항:
- MVP는 거래량 상위 종목 조회 + 개별 종목 뉴스 분석까지만 포함
- "어제 거래량 상위"는 심화 기능으로 분리
- 뉴스 검색은 최신 5건 정도로 제한
- Gemini 분석 결과는 JSON 구조로 반환되게 명시
- FastAPI 구조에서 router / service 분리를 명확히 반영
- 종목 목록 조회 API와 종목 상세 분석 API를 분리
- 에러 상황(토큰 발급 실패, 뉴스 없음, AI 분석 실패)을 명세에 포함
- 설치 명령어와 실행 명령어는 쓰지 말 것
- 실습 교재용 문체로 정리할 것

출력 형식:
1. 프로젝트 개요
2. 기능 범위
3. 사용자 흐름
4. 시스템 흐름
5. 엔드포인트 설계
6. 서비스 구조
7. 예외 처리
8. MVP / 확장 기능 구분

총 22줄 · 펼치기를 누르면 전체 코드를 볼 수 있습니다.

이 과정을 통해 명세가 점점 더 실전적으로 다듬어진다.

Step 9

Cursor AI에서 최종 명세 확정 받기

published

Step 9

Cursor AI에서 최종 명세 확정 받기

2차 수정된 명세는 다시 Cursor AI로 가져가 최종 검토를 받는다.

이번에는 단순 검토가 아니라

“이제 개발 시작해도 되는지” 를 확인하는 단계다.

실습 코드

아래 명세는 Google AI Studio에서 수정한 2차 버전이다.

이제 실제 개발을 시작할 수 있는 수준인지 최종 검토해줘.

확인할 것:
- 기능 정의가 충분한지
- FastAPI로 구현 가능한지
- 서비스 분리가 적절한지
- 엔드포인트가 충분한지
- 실습 프로젝트로 과하지 않은지
- 개발 순서를 어떻게 가져가면 좋은지

중요:
- 검토 결과를 "확정 가능", "추가 수정 필요" 중 하나로 먼저 판단해줘
- 그리고 그 이유를 설명해줘
- 마지막에는 추천 개발 순서를 단계별로 정리해줘

총 16줄 · 펼치기를 누르면 전체 코드를 볼 수 있습니다.

이 단계가 끝나면

명세는 설계 문서에서 실제 개발 기준 문서로 전환된다.

Step 10

개발 전에 “어떤 순서로 만들지”를 AI에게 다시 묻기

published

Step 10

개발 전에 “어떤 순서로 만들지”를 AI에게 다시 묻기

명세가 확정되었다면 바로 전체 코드를 생성하기보다,

먼저 개발 순서를 물어보는 것이 좋다.

요청할 내용 예시

  • 어떤 파일부터 만들면 되는지
  • 어떤 기능을 먼저 구현해야 하는지
  • 외부 API 연동은 어느 시점에 붙이는지
  • 테스트는 어떤 순서로 하면 되는지

이 단계에서 중요한 것은

구현보다 순서다.

앱을 한 번에 완성하려고 하면 오류가 많아지고,

문제가 생겼을 때 어디서 잘못됐는지 찾기 어려워진다.

Step 11

Cursor AI에게 프로젝트 뼈대 생성을 요청하기

published

Step 11

Cursor AI에게 프로젝트 뼈대 생성을 요청하기

이제 Cursor AI에서 실제 개발을 시작한다.

다만 이 단계에서도 전체 기능을 한 번에 요구하지 않는다.

먼저 프로젝트 뼈대만 만든다.

실습 코드

확정된 명세를 기준으로 FastAPI 프로젝트 뼈대를 만들어줘.

중요:
- 지금은 전체 기능 구현보다 프로젝트 구조를 먼저 만들고 싶다
- router, service, core, schema 역할이 분리된 구조로 제안해줘
- 각 파일의 책임도 함께 설명해줘
- 설치 명령어는 자세히 적지 말고, 필요하면 내가 따로 물어볼 수 있게 해줘
- 코드는 한 번에 전부 만들지 말고, 먼저 폴더 구조와 초기 파일 구성을 제안해줘

여기서 얻고 싶은 것은

정리된 폴더 구조와 파일 역할이다.

Step 12

필요한 설치·실행 명령어는 AI에게 따로 묻기

published

Step 12

필요한 설치·실행 명령어는 AI에게 따로 묻기

이번 실습의 중요한 원칙 중 하나는

명령어를 교재가 직접 다 알려주는 방식이 아니라, AI에게 질문하는 방식으로 익히는 것이다.

예를 들어 아래처럼 질문할 수 있다.

질문 예시

  • FastAPI 프로젝트 시작에 필요한 최소 패키지만 알려줘
  • Windows 환경에서 가상환경 만들고 실행하는 명령어 알려줘
  • .env 파일을 읽기 위해 어떤 라이브러리가 필요한지 알려줘
  • FastAPI 서버 실행 명령어 알려줘

이렇게 하면 학습자는

“정답 텍스트를 외우는 사람”이 아니라

필요한 순간에 AI에게 정확히 질문하는 사람이 된다.

이것이 AI 네이티브 방식의 핵심이다.

Step 13

한국투자증권 API 연동 기능부터 먼저 개발하기

published

Step 13

한국투자증권 API 연동 기능부터 먼저 개발하기

이제 본격적인 기능 구현에 들어간다.

첫 번째 구현 대상은 거래량 상위 종목 조회 기능이다.

이 단계에서는 아래 목표만 잡는다.

  • KIS 인증 구조 이해
  • 토큰 발급 로직 구현
  • 거래량 상위 종목 조회 함수 구현
  • FastAPI 엔드포인트 연결

이 단계에서 Cursor AI에 요청할 예시

  • KIS 인증 서비스 파일 생성
  • 거래량 상위 종목 조회 서비스 생성
  • /stocks/top-volume 엔드포인트 구현
  • 필요한 응답 스키마 정의

중요한 점은

아직 네이버나 Gemini는 붙이지 않는다는 것이다.

먼저 숫자 데이터가 정확히 오는지부터 확인한다.

Step 14

동작 확인 후, AI Studio로 다시 구조 점검받기

published

Step 14

동작 확인 후, AI Studio로 다시 구조 점검받기

거래량 상위 종목 조회 기능이 동작하면,

여기서 다시 한 번 Google AI Studio에 구조 검토를 받을 수 있다.

이 단계는 필수는 아니지만 매우 좋다.

예를 들어 이렇게 요청할 수 있다.

실습 코드

현재 FastAPI 프로젝트에서 한국투자증권 API를 이용한 거래량 상위 종목 조회 기능까지 구현했다.

다음 단계로 네이버 검색 API와 Gemini 분석 기능을 붙이려 한다.

현재 구조를 기준으로,
- 어떤 서비스 분리가 더 필요할지
- 분석 기능을 붙일 때 어떤 데이터 구조가 좋은지
- 종목 상세 분석 API를 어떻게 설계하면 좋은지
실습 프로젝트 관점에서 검토해줘.

이렇게 하면 개발 중간에도

명세와 구현이 계속 맞물려 돌아간다.

Step 15

네이버 검색 API 기능을 추가하기

published

Step 15

네이버 검색 API 기능을 추가하기

다음으로는 종목 상세 분석에 필요한 뉴스 검색 기능을 추가한다.

이 단계의 목표는 다음과 같다.

  • 네이버 개발자센터 가입 및 애플리케이션 등록
  • 클라이언트 아이디 / 시크릿 준비
  • 종목명으로 뉴스 검색
  • 최신 뉴스 5건 정도 반환
  • 제목, 링크, 요약 정리

이 기능은

Gemini 분석보다 먼저 정확히 동작해야 한다.

왜냐하면 Gemini는 뉴스가 있어야 분석할 수 있기 때문이다.

즉, 이 단계의 핵심은

검색과 정리다.

Step 16

Gemini 분석 기능을 붙이고 종목 상세 API를 완성하기

published

Step 16

Gemini 분석 기능을 붙이고 종목 상세 API를 완성하기

이제 마지막 핵심 기능인 분석을 붙인다.

목표는 다음과 같다.

  • 종목명
  • 현재 종목 정보
  • 네이버 뉴스 검색 결과

이 세 가지를 Gemini에게 전달하고,

아래와 같은 형태의 분석 결과를 받는 것이다.

분석 결과 예시 항목

  • summary
  • reasons
  • risks
  • keywords
  • sentiment

이 단계에서 중요한 점은

자유로운 문장으로 받는 것이 아니라

앱에서 바로 사용할 수 있는 구조화된 응답으로 받도록 요청하는 것이다.

그리고 이 기능을 /stocks/{symbol}/analysis 같은 엔드포인트로 묶어

종목 상세 분석 API를 완성한다.

Step 17

최종 검토, 수정, 확정까지 AI와 함께 마무리하기

published

Step 17

최종 검토, 수정, 확정까지 AI와 함께 마무리하기

이제 앱이 동작하기 시작하면 끝이 아니다.

마지막으로 반드시 아래 과정을 거친다.

최종 마무리 흐름

1. Cursor AI에 코드 품질 검토 요청

2. Google AI Studio에 사용자 흐름 점검 요청

3. 누락된 예외 처리 보완

4. 응답 구조 정리

5. README 또는 개발 메모 정리

6. “MVP 완성” 기준 확정

이 단계에서 실습자는 단순히 기능만 구현한 것이 아니라,

AI와 함께 설계하고, 검토하고, 고도화하는 전체 개발 사이클을 경험하게 된다.

최종 실습 산출물

이번 실습이 끝났을 때 갖게 되는 결과물은 다음과 같다.

  • 한국투자증권 API 연동 FastAPI 백엔드
  • 거래량 상위 종목 조회 기능
  • 네이버 뉴스 검색 연동 기능
  • Gemini 기반 원인 분석 기능
  • 종목 상세 분석 API
  • AI Studio와 Cursor AI를 오가며 정리한 명세서
  • 개발 확정 과정까지 포함한 AI 네이티브 개발 경험

이번 실습의 핵심 정리

이번 4강의 본질은

“주식 앱 하나 만들기”에만 있지 않다.

더 중요한 것은 다음과 같다.

  • AI에게 바로 코드를 시키지 않고 먼저 명세를 만든다.
  • 하나의 AI만 믿지 않고 교차 검토한다.
  • 설치와 명령어도 필요할 때 정확하게 질문한다.
  • 작은 기능부터 점진적으로 완성한다.
  • 마지막에는 다시 AI와 함께 품질을 검토한다.

즉, 이번 실습은

AI를 검색 도구처럼 쓰는 단계가 아니라, 공동 설계자와 공동 개발자로 쓰는 방식을 연습하는 실습이다.

교재용 마무리 문장

이번 실습에서는 한국투자증권 API, 네이버 검색 API, Gemini를 활용하여 주식 분석 앱을 만드는 과정을 다루었다.

그러나 이 실습의 진짜 목적은 특정 API를 익히는 것보다,

Google AI Studio와 Cursor AI를 오가며 설계-검토-수정-확정-개발의 흐름을 경험하는 것에 있다.

앞으로 새로운 서비스를 만들 때도

처음부터 모든 것을 직접 해결하려 하기보다,

AI와 역할을 나누고, 질문을 정교하게 만들고, 결과를 교차 검토하면서

더 빠르고 더 구조적으로 개발을 진행할 수 있어야 한다.

이번 4강은 바로 그 감각을 익히기 위한 실습이다.

원하시면 다음 단계로 바로 이어서

이 16스텝을 실제 교재 페이지 구성 형태로 더 다듬어서,

각 스텝마다 실습 목표 / 입력 프롬프트 / 체크포인트 / 결과물 형식으로 재편집해드리겠습니다.