01 프로젝트 개요

개인 메모 관리 웹 어플리케이션 제작

** 모든 기능은 AI와 협업해서 진행합니다.**

📌 Post-Note 프로젝트 개요

Stitch + Antigravity를 활용한 바이브 코딩 실습 프로젝트

1. 이 프로젝트는?

Post-Note는 AI 코딩 어시스턴트 Antigravity와 대화하면서 만드는 포스트잇 스타일의 메모 관리 웹 서비스입니다.

개발 경험이 없어도 괜찮습니다.

Stitch로 화면 디자인을 AI에게 맡기고
Antigravity에게 요구사항을 설명하면 코드를 작성하고 실행하고 오류를 수정해줍니다

여러분은 무엇을 만들고 싶은지 설명하고, 결과를 확인하고, 피드백을 주는 역할을 합니다. 이것이 바로 바이브 코딩(Vibe Coding) 입니다.

2. 바이브 코딩이란?

바이브 코딩은 코드를 직접 한 줄씩 작성하는 대신, AI에게 자연어로 지시하여 애플리케이션을 만드는 새로운 개발 방식입니다.

전통적 코딩 vs 바이브 코딩

	전통적 코딩	바이브 코딩
코드 작성	개발자가 직접 타이핑	AI가 생성, 사람이 검토
오류 수정	로그를 분석하고 직접 디버깅	AI에게 에러 메시지를 보여주면 수정
학습 방식	문법 → 개념 → 프로젝트 순서	프로젝트를 먼저 만들면서 필요한 개념 습득
필요 역량	프로그래밍 언어 숙련도	요구사항을 명확하게 설명하는 능력
도구	에디터 + 컴파일러 + 문서	AI 코딩 어시스턴트 (Antigravity)

바이브 코딩에서 여러분의 역할

🧑 여러분 (디렉터)              🎨 Stitch (디자이너)     🤖 Antigravity (개발자)
────────────────────────      ───────────────────    ───────────────────────
"메모 앱 화면을 디자인해줘"  →  UI 화면 생성/수정
"이 디자인으로 앱 만들어줘"                          →  프로젝트 구조 설계 + 코드 작성
"회원가입 기능 추가해줘"                              →  백엔드 API + 프론트엔드 작성
"드래그가 안 돼요"                                   →  버그 분석 + 코드 수정
"모바일에서도 보이게 해줘"                            →  반응형 디자인 적용
"AI로 메모 요약 기능 넣어줘"                          →  Gemini API 연동

3. 실습 목표

이 프로젝트를 완성하면 배울 수 있는 것들:

🎯 바이브 코딩 스킬

Stitch로 UI 화면을 디자인하고 수정하는 방법
Antigravity에게 효과적으로 요구사항을 전달하는 방법
결과물을 보고 구체적인 피드백을 주는 방법
에러가 발생했을 때 AI와 함께 디버깅하는 방법
디자인 → 개발 → 테스트를 단계적으로 진행하는 방법

💡 자연스럽게 익히는 개발 지식

웹 애플리케이션의 프론트엔드/백엔드 구조
데이터베이스에 데이터를 저장하고 조회하는 원리
로그인/회원가입의 인증 시스템 동작 방식
AI API를 연동하여 활용하는 방법

4. 완성되는 앱의 기능

기능	설명
🔐 회원가입/로그인	이메일 계정으로 나만의 메모 공간
📝 메모 작성	포스트잇에 제목, 내용, 마감일, 색상 지정
🎯 Freeform 뷰	데스크톱에서 포스트잇을 드래그하여 자유 배치
📋 Kanban 뷰	Plan → Progress → Done 으로 할 일 관리
📅 D-Day 알림	마감일까지 남은 일수 자동 표시
✨ AI 요약	Google Gemini가 메모들을 분석하여 핵심 요약
🔔 AI 알림	마감 임박·미완료 메모를 AI가 알려줌
📱 반응형	데스크톱/모바일 모두 사용 가능

5. 사용하는 기술

아래 기술들을 미리 배울 필요는 없습니다. Antigravity가 알아서 적절한 기술을 선택하고 코드를 작성합니다.

구분	기술	한줄 설명
UI 디자인	Stitch	AI로 화면 디자인을 생성하는 도구
프론트엔드	Next.js + React	사용자가 보는 화면을 만드는 도구
스타일링	Tailwind CSS	화면을 예쁘게 꾸미는 도구
백엔드	Python + FastAPI	데이터를 처리하는 서버
데이터베이스	SQLite	메모 데이터를 저장하는 공간
AI	Google Gemini	메모를 분석하고 요약해주는 AI
인증	JWT	로그인 상태를 유지하는 기술

6. 프로젝트 구조

post-note/
├── docs/                     # 📄 문서
│   ├── intro.md              #   └ 이 문서 (프로젝트 개요)
│   ├── spec.md               #   └ 상세 개발 스펙
│   ├── require-install.md    #   └ 사전 설치 가이드
│   ├── backend-wiki.md       #   └ 백엔드 API 문서
│   └── frontend-wiki.md      #   └ 프론트엔드 구조 문서
│
├── backend/                  # 🐍 백엔드 (데이터 처리 서버)
│   ├── main.py               #   └ 서버 시작점
│   ├── database.py           #   └ 데이터베이스 설정
│   ├── routers/              #   └ API 주소 정의 (auth, notes, ai)
│   ├── services/             #   └ 실제 동작 로직
│   ├── models/               #   └ 데이터 형식 정의
│   └── utils/                #   └ 인증 등 공통 기능
│
└── frontend/                 # ⚛️ 프론트엔드 (화면)
    └── src/
        ├── app/              #   └ 페이지 (로그인, 회원가입, 메모)
        ├── components/       #   └ 화면 구성요소 (카드, 모달, 헤더 등)
        ├── hooks/            #   └ 상태 관리 기능
        ├── lib/              #   └ 서버 통신, 설정값
        └── types/            #   └ 데이터 타입 정의

7. 실습 진행 순서

Phase 1: 환경 준비

Python, Node.js 설치
Antigravity 실행

Phase 2: UI 디자인 — Stitch로 화면 설계

Stitch에게 만들고 싶은 화면을 설명하여 디자인을 먼저 만듭니다.

💬 "포스트잇 메모 앱의 로그인 화면을 만들어줘"
💬 "메모를 자유롭게 배치하는 Freeform 화면을 디자인해줘"
💬 "색상을 좀 더 따뜻하게 바꿔줘"

Stitch에서 화면 디자인을 완성한 후, 이를 참고하여 개발을 진행합니다.

Phase 3: 프로젝트 생성 — Antigravity에게 요청

요구사항 문서와 Stitch 디자인을 Antigravity에게 전달하고, 프로젝트 생성을 요청합니다.

💬 "이 요구사항 문서를 보고 개발 Spec을 만들어줘"
💬 "이 Spec을 참고해서 프로젝트를 만들어줘"

Phase 4: 기능 확인 — 직접 테스트

브라우저에서 결과물을 확인하고, 문제가 있으면 피드백합니다.

💬 "회원가입에서 에러가 나요" + 스크린샷 첨부
💬 "드래그할 때 상세 팝업이 떠요"
💬 "모바일에서 레이아웃이 깨져요"

Phase 5: 기능 추가 — 대화로 확장

원하는 기능을 자연어로 요청하여 앱을 확장합니다.

💬 "메모에 태그 기능을 추가해줘"
💬 "다크 모드를 지원하게 만들어줘"
💬 "메모를 검색할 수 있게 해줘"

8. 효과적인 바이브 코딩 팁

✅ 좋은 요청 예시

요청	왜 좋은가?
”회원가입 시 이메일 중복 체크 후 에러 메시지를 보여줘”	구체적 — 언제, 무엇을, 어떻게
”현재 에러 로그입니다 + 스크린샷”	증거 포함 — AI가 정확히 파악 가능
”모바일에서 메모가 리스트로 나타나게 해줘”	결과 명시 — 원하는 최종 형태 설명

❌ 피해야 할 요청 예시

요청	왜 비효과적인가?
”이상해요”	무엇이 이상한지 알 수 없음
”전부 다 바꿔줘”	범위가 너무 넓어 방향을 잡기 어려움
”완벽하게 만들어줘“	‘완벽’의 기준이 불명확

💡 핵심 원칙

한 번에 하나씩 — 여러 기능을 한꺼번에 요청하지 말고 하나씩 진행
결과를 확인 — AI가 수정한 후 반드시 브라우저에서 직접 테스트
스크린샷 활용 — 문제 상황을 말로 설명하기보다 화면을 캡처해서 전달
점진적 확장 — 기본 기능이 동작한 후에 새 기능을 추가

9. 참고 문서

문서	설명
사전 설치 가이드	Python, Node.js 설치 방법
요구사항 문서	프로젝트 기능 요구사항
개발 Spec	상세 기술 설계 문서
Backend Wiki	백엔드 API 상세 문서
Frontend Wiki	프론트엔드 구조 상세 문서

스크린샷

470