스펙 중심이 아닌 데이터 기반 바이브 코딩

바이브 코딩을 할때 대부분 가이드가 스펙 중심의 PRD를 기준으로 작업을 진행하게 되는데요. 

How I AI 유튜브 채널(https://www.youtube.com/watch?v=_yQMGHHl49g) Ravi Mehta 인터뷰를 통해 스펙과 디자인 중심이 아닌 JSON 형태로 프로토타이핑 위한 요구사항을 작성하는 방식이 소개되어서 매우 유용한 것 같습니다. 

인터뷰를 같이 진행한 Clair Vo가 바이브 코딩 관련해서 컨텍스트를 어떤 것을 참조할지 모를 때는 엔지니어와 대화를 통해 데이터 스키마를 같이 바이브 코딩 툴에 제공하면 유용할 것이라고 했는데요.

Tinder CPO인 Ravi Mehta는 자연어 형태로 원하는 데이터, 콘텐츠를 작성하고 이를 JSON 포맷으로 변환하는 방식을 제안합니다 (관련 영상 타임스탬프: https://www.youtube.com/watch?v=_yQMGHHl49g&t=762s). 

영상에선 Claude desktop 앱으로 Unsplash MCP 서버와 연동해서 예시를 보여주었는데요. 저는 Cursor로 MCP(https://smithery.ai/server/@hellokaton/unsplash-mcp-server)%EB%A5%BC ) 연동해서 작업을 진행했습니다.

해당 JSON 결과를 Lovable에 입력하니, 이모지나 이모티콘이 아닌 실제 현실과 관련있는 데이터가 나오니 프로토타입 관점에서 더 유저와 내부 이해관계자와 소통할때 좋은 시작점이 될 것 같습니다. 아래 사이트는 한번의 프롬프트로 나온 결과이고, 수정을 더하면 빠르게 괜찮은 프로토타입이 나올 것 같습니다.
https://parisian-dream-log.lovable.app/


자세한 방법은 아래 남겨 봅니다.

  1. 자연어로 Claude 데스크탑앱 또는 Cursor에서 요청 (관련해서 Unsplash Search 설치 필요)
    - 예시: https://docs.google.com/document/d/1w6K8u-FcSeEkXcbqctwbb71KvXUMAa2UUbShXvDaU-E/edit?usp=sharing
     

  2. Lovable과 같은 바이브코딩 툴에서 JSON 결과를 입력
    - 결과 예시: https://parisian-dream-log.lovable.app/


다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2025년 10월 1일 오후 7:52

댓글 0