소개
안녕하세요. 저는 프로덕트 디자이너입니다. 최근 바이브 코딩이 유행이다보니, 사이드 프로젝트를 진행해보고 싶다는 생각이 들었습니다.
프로젝트 배경
AI 트렌드가 너무 빠르게 변화하다보니, AI 툴도 너무 많아졌는데요. 어떤 것들을 사용할 지에 대한 고민이 많아졌어요.
부업을 시작하시는 분들, 1인 기업, 소규모 팀은 어떻게 워크플로우를 가져가야하는지 어려울 것 같다는 생각이 들었습니다.
1️⃣ Chatgpt,Perplexity를 통해 개발 방법, PRD 제작
생각보다 기획단계에서 엄청 오래 걸렸던 것 같아요. 제가 생각했던 것 보다 기능이 복잡했고, 특히나 DB 정보에 따라서 결과값의 정확도에 영향을 미쳐서 오래 걸렸습니다.
AI의 PRD는 너무나 허술하다는 생각이 들었습니다.. 특히 DB구축에 대해서도 계속 물어봤었는데, 참고는 했지만 거기서도 수정해야하는 부분들이 필요했어요.
저는 이런방식으로 Chatgpt와 Perplexity에게 물어본 답변을 따로 노션에 정리하면서 하였습니다.
한국어 앱의 스크린 샷
2️⃣ 개발시작 [Cursor. + Next.js +Firebase] + Figma MCP(?)
주요 플로우는 사용자가 목표를 입력하면 그것을 서브태스크를 나누고, 이에 맞는 툴을 제안해주는 것입니다.
생각보다 결과값을 정확하게 받기 위한 로직이 복잡했습니다.
목표를 입력 시에 챗지피티가 이에 맞게 서브태스크로 나누기
서브태스크에 맞는 매칭된 툴 제안
서브태스크와 툴의 Relevance + Popularity 기준으로 제안
해당 툴을 매칭해준 이유와 툴사용법 간단한 설명
Cursor+Figma MCP를 사용해보았습니다. 틀은 만들어주지만, 완벽하게 가져오지는 못하는것 같다는 생각이 들었습니다.. 집에서 골조정도만 가져오는 느낌이었습니다.
안에서 모든 걸 만들어줘야 하는 상황이었습니다. 간단한 모달 같은 경우에는 MCP보다는 오히려 캡처로 보여주는게 더 나은 것 같다는 생각이 들었어요!저는 Cursor를 사용하면서 Chatgpt와도 같이 사용했습니다.한번에 수정하지 못하는 것들은 챗지피티에게도 물어보면서 해당 에러의 문제점이 무엇인지에 대해서 물어봤어요.
간단한 수정의 경우에는 Cursor내에서 Chatgpt 4.1을 사용하고, 심각해보이는 에러나 전체 코드를 확인해보아야 할 것 같은 건은 Claude 4.0을 사용했습니다.
❗ 정말 주의해야할 것은 코드를 적용하기 전에 지금 상황에 대한 문제와 어떻게 수정할지를 이야기해주는데, 그 내용을 꼭 읽어보는 것은 추천드립니다! 가끔 엉뚱한 곳을 수정해버리거나, 다른 페이지들을 건드는 경우가 있습니 다. Cursor가 코딩을 해주지만 전체적인 개발흐름은 이해하면서 프로젝트를 하는 걸 추천드립니다!
한국 문자 메시지의 스크린 샷
한국 웹 사이트의 홈페이지
결과와 배운 점
다른것보다 생각보다 DB구축이 어려웠던 것 같다..지금은 빠르게 구축하기 위해 정적 DB로 진행 + 서비스가 약 200개넘게 들어가있다보니 AI를 통해 AI서비스들의 내용을 만들었는데 그래서 그런지 결과값이 완벽하게 정확하지는 않은 것 같다는 생각이 들었습니다..ㅠㅠ(이건 어쩔 수 없는 한계일지도..)
AI를 쓰면서 코딩이나 기획시에도 확인하고 판단하는 것이 중요하다는 것을 알게 되었습니다!
