코딩 몰라도 만드는 포트폴리오 6탄: Cursor와 Notion으로 10분 만에 '개발 & 협업 시스템' 구축하기

안녕하세요, 바이브랩스입니다.

오늘은 단순히 코드를 짜는 '바이브 코딩'을 넘어, 프로젝트 전체를 조율하는 '바이브 워킹의 진수를 보여드립니다. "코딩 몰라도 만드는 나만의 포트폴리오 홈페이지" 시리즈, 그 여섯 번째 시간입니다.

기획서(PRD), 디자인(Stitch), 데이터베이스 설계까지 마쳤다면 이제 본격적인 개발 환경을 구축할 차례입니다. 하지만 걱정하지 마세요. 우리는 커서 AI와 Notion AI라는 든든한 비서가 있으니까요.

이번 영상에서는 기획 문서를 커서(Cursor)에 주입하여 개발 계획을 수립하고, 그 계획을 노션(Notion)으로 가져와 AI가 자동으로 '할 일 관리(Kanban)' 시스템을 구축하는 워크플로우를 공개합니다.

💡 이번 영상의 핵심 포인트

명세서 기반 개발(SDD) 시작:
노션에 정리한 기획서(PRD/TRD)를 커서로 옮겨 AI에게 문맥을 학습시키는 방법

AI 헌법(Constitution) 제정:
내 프로젝트의 코딩 스타일과 원칙을 AI에게 미리 가르쳐 흔들리지 않는 기준 세우기

노션 AI의 마법:
텍스트로 된 작업 목록(Tasks)을 노션에 붙여넣고 명령 한 번이면? → 데이터베이스 생성, 관계형 연결, 태스크 등록까지 10초 만에 자동화됩니다.

페이즈 1 구현:
/speckit 명령어로 프로젝트 초기 세팅(Next.js, Supabase 등)을 한 번에 완료하는 실습

개발자이자 PM이 되어 프로젝트를 지휘하는 즐거움, 바이브랩스와 함께 경험해 보세요.

📨 비즈니스 및 작가 제안
futurewave@gmail.com

타임라인
00:00 인트로: 채팅(Chat) 대신 명령(Spec)으로! SDD란 무엇인가?
00:51 [기초공사 1] 깃허브(GitHub): 내 코드가 살 '집' 짓기
03:03 깃허브 토큰(Token) 발급받는 법 (필수 시청)
04:16 [기초공사 2] 수파베이스(Supabase): 데이터 '창고' 카드키 복사
05:20 [기초공사 3] 커서(Cursor) 세팅: 기획서(PRD/TRD) 가져오기
08:04 AI에게 시켜서 깃허브와 커서 연결하기
09:24 구글 스티치(Stitch) 와이어프레임 이식
10:21 [핵심] SDD 마법 시작:
10:30 1단계: 헌법(Constitution) 제정 - "한국어로 작성해"
12:00 2단계: 주문서(Spec) - PRD 기반 명세서 작성
13:10 3단계: 기술 스택(Plan) - 아키텍처 설계
15:08 4단계: 태스크(Task) 분해 - 개발 단계 나누기
16:30 [하이라이트] 노션 AI: 텍스트를 '프로젝트 관리 DB'로 자동 변환
20:26 5단계: 실전 구현(Implement) - 페이즈 1(초기 설정) 완성
23:50 AI가 만든 테스트 체크리스트 점검
25:17 마무리: 큰 산을 넘었습니다 (GitHub, Supabase, SDD 정복)