📘 바이브코더, 코드를 읽어야 시작이다

안녕하세요 진여진입니다.🙇‍♀️

🎯 오늘은 Vooster 파운더 "Cursor맛피아" 님의 개발 사례를 보며
개발자가 "문제해결"의 과제를 어떻게 해결하는지 배워갑니다.

개발자가 바이브코딩하는 법 - YouTube

해당 게시물의 저작권과 내용은 "커서마피아"님에게 있습니다.
게시물을 이용한 영리적 목적이 없음을 밝힙니다.

오늘은 조금 센 내용을 가지고 왔고
3시간 영상 중 1:30:00 정도 보고 공부한 내용 중 일부를
바이브코더, 개발자가 접근해야 하는 관점을 조금 전달하고자 합니다.

입문자 입장, 공부하는 목적에 작성하기에
내용 전달이 불투명한 점 양해 부탁드려요~

추가로 바이브 코더의 어린양을 돕고 있는 Vooster 많은 관심 부탁드립니다..🥹

https://www.vooster.ai/ko

🎯 오늘의 주제 : 시청자가 보내준 기능 개선하기!

🎯 오늘은 피드백받은 태스크를 어떻게 적용하는지! 진행합니다.

🧩 문제 해결 과정

ALT

한국어 텍스트가있는 컴퓨터 화면의 스크린 샷

사진은 잘 안 보이지만, PRD 수정 기능을 넣는 작업입니다.

💭 우리는 어떻게 문제를 해결해야 할까요?

ALT

비디오를 보여주는 컴퓨터 화면의 스크린 샷

💡 구현 난이도와 효율성 관점으로 접근한 게 인상적입니다.

• 페인 포인트 파악 → 요구사항 분석 → 구현 가능성 파악합니다.

• 현업에서, 바이브 코딩에서 적용하시는 모습을 보고

• 앞으로 구현하기 전, 구현 가능한 아이디어를 여러 나열하고

• 구현 난이도와 효율성 관점에서 고려하는 점이 좋았습니다.

💡 특히 인상적인 멘트는

• "열심히 구현했는데 생각보다 서비스 만족도를 덜 줄 수 있다는 말씀이 관점을 바꿨습니다."

아이디어를 예시로 들자면:

• AI 실험 기능을 구현한다고 합니다.

• 채팅 패널을 만들면 가장 좋지만,

• 시간이 오래 듦 + 디자인 리소스 (UI/UX) 를 많이 먹어요

🔑 기능 우선순위 정리!

• 사용자가 진심으로 원하는 것이 무엇인지 본질을 생각하기!

• 가장 쉬우면서 임팩트를 주는 모달 방식을

• 최대한 이터랙션 돌리고, 사용자 반응을 빠르게 확인하는 방법이 중요

• 인디 개발자 : 가장 빠르게 문제를 해결하는 방법을 탐구하는 자세가 중요!

🧠 컨텍스트 엔지니어링

🔑 컨텍스트 엔지니어링이란? :

• Cursor 는 맥락을 제공하는 방법이 @로 UX 가 굉장히 좋습니다.

• 맥락 제공을 통해 보다 확률 높은 코딩이 가능합니다

🛠️ 기능 추가 예시 : MCP 기능추가 - Modify Task Tool (수정기능추가)

ALT

비디오를 보여주는 컴퓨터 화면의 스크린 샷

📊 Vooster 실 서비스 폴더 베이스 분석합니다:

• APP : 화면을 이루는 전부

• CLI : 텍스트 기반 인터페이스

• Docs : 다국어 지원 & 입문자 가이드 ..

• MCP : (여기에서 작업!)

🔑 Cursor 장점 : 비슷한 기능을 참조시켜 Few Show (예시 참조) 하는게 가장 좋음

ALT

코드 편집기를 보여주는 화면의 스크린 샷

🛠️ 팁 : 이미 구현 완료, 비슷, 정상적인 코드여야 함!

🔑 프롬프트를 할 때 효과적인 방법은:

• 기능적으로 비슷하면서

• 정상적으로 돌아가는 코드를 참조하는 방법이라고 합니다

ALT

중국어 텍스트가있는 중국어 앱의 스크린 샷

🛠️ 프롬프트 작성 팁:

• 어떤 기능을 구현할지 명시

• 어떤 변수명을 참조받고 -> 어떤 기능을 한다.

• 참조하는 Rule 와 비슷한 기능은 어떠하다

💡 여기서 진짜 뜨악한게, 함수,변수명을 알고 역할을 알아야:

• 정확하게 참조하는 모습을 보고

• 🔑 바이브 코딩 : 코딩 구현만 안하는 것을 배웠습니다

• 🔑 완성된 프롬프트 '하나' 입니다.

우리는 얼마나 게으르게 "바이브 코딩" 하고 있었을까요? 이 스크린 샷을 보고 배워갑시다.

지식을 정확하게 아는 측면에서 기능 반영 확률을 높이는 방법을 최대한 노력하는 마음가짐을 배웠습니다.

📜 Rule

🛠️ 자주 사용하는 Rule - "Step-by-step"

• 커서마피아님 룰 모음 Gist : https://gist.github.com/greatSumini

• cursor-step-by-step-rule.mdc

• cursor_rules.mdc

💡 그리고 Vooster 에 프로젝트를 만드시면 이렇게 유용한 Rule 과 함께 개발할 수 있습니다.

🎓 정리 및 결론

• PRD 에서 끝나는 것이 아닌 구현되는 코드를 알고 참조하면 성공률이 더 올라간다

• 바이브 코더는 코드 구현만 안하지 코드를 알면 디테일한 요구사항이 가능하다.

💭 3시간 영상의 한 30분..? 정도를 요약했고

• 깊이 있는 내용이 아직 한참 있습니다.

• 시간이 남을 때 마다 업로드 하겠습니다.

• 긴 글 읽어주셔서 감사합니다. 🙇‍♀️