AI 네이티브 바이브 코더 되기 feat PDCA

📝 한줄 요약

AI 코딩 도구(Claude Code)로 6일 만에 YouTube Shorts + Instagram Reels 동시 게시 서비스를 기획부터 배포까지 완성했습니다. 설계 문서를 먼저 쓰게 했더니 AI의 정확도가 달라졌고, 아직은 "AI가 당연하게 전제하는 것들"의 빈틈을 내가 직접 메꾸고, 결정하는 역할을 해야 한다는것을 배웠어요.

바쁘시면 이것만 읽어도 돼요:

• Claude Code로 영상 동시 게시 서비스를 6일 만에 기획→개발→배포까지 완료

• 설계 문서(PDCA)를 먼저 쓰게 했더니 AI 구현 정확도가 95~98%까지 올라감

• 프레임워크를 통째로 갈아타는 것도 AI와 함께하면 부담 없이 가능

• 하지만 Instagram 연동에서 하루 종일 삽질 — AI가 모르는 건 결국 내가 채워야 한다

😫 문제 상황 (Before)

YouTube Shorts랑 Instagram Reels에 같은 영상을 올리려면 각 앱을 따로 열어서, 같은 영상을 두 번 업로드하는게 크리에이터들한테는 매번 반복되는 귀찮은 작업이라어요고 생각했. "이걸 한 번에 해주는 서비스를 만들어볼까?" — 이게 시작이었습니다.

개발 경험? 거의 없어요. 코드를 읽고 간단한 스크립트를 짤 순 있지만, 백지에서 서비스를 만들어 배포한 적은 없었습니다.

🛠️ 사용한 도구

• AI 코딩 도구: Claude Code (CLI)

• 모델: Claude (Anthropic)

• 개발 방법론: PDCA (Plan → Design → Do → Check → Report)

• 배포: Vercel

🔧 작업 과정

Day 1 — 일단 시작하기

처음에는 뭘 만들지, 그게 가능할지부터 AI와 대화했어요.

영상 하나를 업로드하면 YouTube Shorts + Instagram Reels에 동시 게시하는 웹서비스를 만들고 싶어.

Claude Code가 프로젝트 구조를 잡고, 데이터베이스 설계를 하고, OAuth 인증 흐름까지 설계 문서로 만들어줬습니다. 이때 기술 스택은 FastAPI(Python 백엔드) + HTML/CSS/JS(프론트엔드)로 정했다가 추후에 바꾸었어요.

Day 2 — 프레임워크를 통째로 갈아타다

Day 1에 FastAPI + HTML로 구조를 잡았는데, 경호님과 1:1을 하고 보니 Next.js(React 기반 풀스택 프레임워크)가 디자인과 보안 측면에서 이 프로젝트에 더 맞겠다는 결론이 났습니다. 인증, 서버 렌더링, 배포까지 한 프레임워크에서 해결된대요.

보통이라면 "아, 다시 처음부터 해야 하나..." 하고 좌절할 타이밍인데, AI에게 그냥 말하니까 다 되는게 너무 좋았습니다. 마음의 장벽을 해소해준거죠

FastAPI + Vanilla JS 구조를 Next.js 14 풀스택으로 전환해줘.

기존 설계 문서의 비즈니스 로직은 살리면서, 기술 스택만 깔끔하게 교체됐고 PRD(제품 요구사항 문서)까지 새로 써줬어요. 프레임워크를 통째로 바꾸는 게 이렇게 가벼운 결정이 될 수 있다니 — 이게 AI 코딩의 힘이구나 싶었습니다.

Day 3 — 하루 만에 서비스가 돌아간다

이 날이 진짜 놀라웠는데요, 아침에 시작해서, 하루 만에 이 모든 게 구현됐어요:

• 데이터베이스 + 인증 시스템

• 랜딩 페이지 (우주 테마 글래스모피즘)

• 회원가입 / 로그인

• YouTube OAuth 연결 (구글 계정으로 원클릭 연결)

• 영상 업로드 + YouTube Shorts 게시

• 게시 이력 페이지

• 계정 설정 페이지

10개 스텝을 하나씩 진행했는데, 각 스텝마다 "이거 해줘" → 결과 확인 → "다음 거 해줘"를 반복했다. 그런데 진짜 돌아가는 서비스가 나왔다. 하루 만에.

첫 번째 PDCA — 설계부터 쓰니까 달라졌다

서비스가 돌아가긴 하는데, 대시보드 UI가 마음에 안 들었어요. 사이드바가 너무 넓고, 유저 정보 위치도 어색했다. 그동안 PDCA 프로세스가 자동으로 적용되었다고 생각했는데, 아니더라고요?! 저 혼자만 수동으로 게획문서를 작성하고 진행하고 있던 거였어요. 이 때 처음 명시적으로 적용했던 것 같아요.

Plan (계획): "사이드바 줄이고, 유저 정보 위로 올리고, 업로드 폼을 플랫폼별로 분리하자"를 문서로 정리.

Design (설계): 각 컴포넌트의 상태, 동작, 레이아웃을 구체적으로 설계. "토글이 꺼지면 입력 필드가 비활성화된다" 같은 수준까지.

Do (구현): AI한테 설계 문서를 주고 구현 요청. 6개 파일을 수정/생성.

Check (검증): 설계 문서와 실제 구현을 비교하는 Gap Analysis 실행. 결과: 95% 매치율.

설계서에 없던 개선(플랫폼별 색상, 연결 페이지 바로가기 링크 등)을 AI가 알아서 추가해준 것도 있었지만, 원하는 것을 명확하게 써주고 나니 더 마음에 드는 결과가 나왔습니다.

Day 4 &5 배포와 두 번째 PDCA, 더 깔끔해지다

처음으로 배포라는 것을 해보았습니다. 개발보다는 vercel이 무엇인지, 어떻게 설정하는지에 시간을 썼던 것 같아요.

Plan → Design → Do → Check. 결과: 98% 매치율. 거의 설계 문서 그대로 나왔고, 설계 문서의 구체성과 AI 결과물의 정확도는 비례한다는 경험을 했습니다.

Day 6 — Instagram 연동, 그리고 현실의 벽

페이스북 연동 조건은 까도로워서 YouTube를 먼저했었는데요, Instagram연동은 완전히 다른 세계였습니다.

Instagram OAuth 연동 구현해줘

한 마디에 기존 계획서를 참고해서 AI가 코드를 작성해주긴 했는데 문제는 코드가 아니라 Meta 플랫폼 자체였어요. 통합된 가이드가 없어서 AI도 공식 문서의 부분 부분을 읽고 제안 또는 실행을 했거든요.

에러 1: "Invalid platform app"
AI가 짠 코드는 Instagram 직접 로그인 경로를 사용 했지만 실제로는 "Facebook Login for Business"라는 별도 흐름을 거쳐야 했어요. AI가 참고한 문서에는 이 구분이 명확하지 않았습니다.

에러 2: "redirect URI is not whitelisted"
Meta 개발자 콘솔에서 리다이렉트 주소를 등록해야 하는데, 등록 위치가 일반 Facebook Login이 아니라 Facebook Login for Business 설정 안에 따로 있었어요. AI는 코드상 URL을 맞게 넣어줬지만, 콘솔 설정은 직접 해야했습니다.

에러 3: "Invalid Scopes"
Facebook Login for Business에서는 scope 파라미터를 URL에 넣는 게 아니라 config_id라는 별도 파라미터를 써야 했습니다. 이건 Meta의 일반적인 OAuth 가이드에도 잘 안 나와 있다고 하네요;;

에러 4: "Instagram 계정이 연결되어 있지 않습니다"
이게 제일 고생했어요. Business Suite를 통해 페이지를 관리하면, API로 조회했을 때 그 페이지가 안 나온다. AI도 나도 처음에 원인을 못 찾았다. 결국 debug_token이라는 우회 방법을 찾아서 해결했다. 게다가 Instagram 프로필 사진이 없으면 API가 실패한다는 것도 뒤늦게 알았어요 -_-

이거 잡느라 하루 동안 커밋을 12번 하고, 에러 잡고, 로그 추가하고, 또 에러 잡고 그랬습니다.

AI는 코드를 잘 짜준다. 하지만 AI가 — 그리고 AI가 학습한 문서가 — "당연하게 전제하는 것들"이 있다. 라는걸 개달았어요. 예를 들어 "계정이 연결되어 있다", "권한이 부여되어 있다", "프로필이 완성되어 있다" 같은 것들. 이런 전제 조건이 현실에서 충족되지 않을 때, 그 갭을 메꾸는 건 결국 인간의 몫입니다.

반대로 말하면, 이 갭을 메꿀 수 있다면 — AI와 함께 웬만한 건 다 만들 수 있다는 생각도 들어요.

✅ 결과 (After)

Before vs After

결과물

• YouTube Shorts + Instagram Reels 동시 게시 서비스

• 회원가입/로그인 + Google 소셜 로그인

• 플랫폼별 OAuth 연결, 영상 업로드, 게시 이력 관리

• 우주 테마 글래스모피즘 UI

• Vercel 배포 완료

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. 설계 문서를 먼저 쓰게 하라. "대시보드 고쳐줘" vs "사이드바를 w-56으로 줄이고, 유저 정보를 상단 바 우측으로 옮기고, 업로드 폼을 플랫폼별 블록으로 분리해줘"의 차이는 엄청나다. 설계 문서를 먼저 쓰게 한 뒤 구현을 시키면 매치율 95% 이상이 나온다.

2. 프레임워크 전환도 겁먹지 마라. AI와 함께라면 기술 스택을 통째로 바꾸는 것도 큰 작업이 아니다. "더 나은 선택지"가 보이면 과감하게 갈아타자.

3. 에러 로그를 그대로 던져라. Instagram 에러 4연타를 잡을 때, 에러 메시지를 그대로 AI한테 복붙했다. AI가 맥락을 많이 알수록 해결책이 정확해진다.

4. PDCA로 검증하라. 구현 후 "설계 대비 뭐가 다른지" 자동 검증(Gap Analysis)을 돌리면 놓친 부분이 바로 보인다.