실제 AI 코딩 워크플로우: Cursor·MCP·계획으로 앱 빠르게 만들기

핵심 메시지

• AI 코딩의 첫 단계는 코드가 아니라 조사다. 무엇을 만들지, 어떤 기술 스택과 도구를 쓸지 충분히 연구하고 고수준 개요를 잡은 뒤에 시작해야 한다.
• 도구의 실제 기능을 문서로 직접 파악해 두면, 모델에게 무엇을 시킬지 더 정확히 지시할 수 있다.
• MCP 서버와 에이전트 스킬을 미리 붙이면, 문서를 일일이 복사해 넣지 않아도 모델이 도구 사용법을 스스로 이해한다.
• 변경마다 자동 커밋하는 규칙(rule)을 두면 문제가 생겨도 언제든 되돌릴 수 있다.
• AI 코딩에는 반드시 오류가 생긴다. 모델의 작업을 읽으며 잘못된 방향을 빨리 잡아내고 구체적인 맥락과 함께 수정 지시를 주는 감독이 핵심이다.

쉽게 이해하기

이 영상은 경험 많은 개발자가 AI만으로 ‘AI 쇼츠 생성 도구’를 처음부터 만드는 실제 워크플로우를 보여준다. 긴 16:9 영상을 올리면 AI가 자막과 얼굴 리프레이밍이 적용된 세로(9:16) 쇼츠 여러 개를 자동 생성하는 앱이 목표다.

첫 단계는 코드가 아니라 조사와 계획이다. 많은 사람이 이 단계를 건너뛰어 나쁜 결과를 얻는다고 그는 강조한다. 대안을 살피고 기술 스택과 도구를 정한 뒤, 음성 인식엔 그록(Groq)의 위스퍼, 클립 선택과 캡션·제목 생성엔 클로드, 영상 처리(얼굴 리프레이밍·캡션·포맷 변환·스트리밍)엔 이미지킷(ImageKit)을 쓰고, 웹앱은 Next.js로 만들기로 정한다.

이어 코딩 환경을 Cursor에 세팅한다. 그는 모델을 고르고(1백만 컨텍스트, 패스트 모드, 미디엄) 같은 모델을 쓰더라도 Cursor의 코딩 하니스가 더 낫다고 본다고 말한다. 그다음 위스퍼 플로우로 아이디어를 받아쓰게 해 고수준 계획과 아키텍처 마크다운 문서를 만들고, 모델이 먼저 필요한 질문을 던지게 한다.

도구별 MCP 서버와 에이전트 스킬을 붙이는 것이 다음 단계다. 이미지킷·깃허브 MCP를 추가하면 모델이 문서를 일일이 복사해 넣지 않고도 도구 사용법을 이해한다. 또 ‘큰 변경마다 자동 커밋’ 규칙을 두어 언제든 롤백할 수 있게 한다. 발표자는 도구의 기능(리프레이밍, 적응형 비트레이트 스트리밍, 오디오 추출 등)을 문서로 미리 파악해 둔 덕에 모델을 정확히 안내할 수 있었다고 말한다.

마지막은 반복적 구현과 감독이다. 일단 돌아가게 만든 뒤 오류 메시지에 맥락을 붙여 디버깅하고, 화면을 캡처해 보여주거나 모델이 영상 전체를 그록으로 보내려는 잘못된 방향을 즉시 가로막는다. 그는 계획과 도구 세팅이 갖춰진 덕에 약 5~10개의 프롬프트만으로 동작하는 앱을 완성했고, 준비 없이 했다면 훨씬 오래 걸렸을 것이라고 정리한다.

주요 인사이트

• ‘무엇을 만들지 모르면 만들 수 없다.’ 아이디어에서 출발해 대안 조사와 기술 스택 결정으로 이어지는 사전 작업이 결과 품질을 좌우한다.
• 초기 맥락을 마크다운 문서로 남겨 두면 여러 에이전트 창이나 병렬 작업에서도 앱의 목적과 이미 내린 결정을 언제든 다시 참조할 수 있다.
• MCP 서버·에이전트 스킬은 모델에게 도구의 사용법을 떠먹여 주는 장치다. 덕분에 문서를 직접 읽고 붙여 넣는 수고가 사라진다.
• 모델은 흔히 실수한다(예: Groq를 다른 철자로 혼동). 발표자는 모델의 도구 호출을 읽으며 잘못된 방향을 조기에 잡아내는 것을 강조한다.
• 스크린샷을 함께 주면 모델이 UI 상태를 더 잘 파악한다. 오류 메시지 단독보다 ‘업로드는 됐지만 변환이 안 된다’ 같은 맥락을 주는 편이 디버깅에 유리하다.

자주 묻는 질문

관련 AI 소식