107
이번 글에서는 PM/마케터로서 비개발자인 제가 클로드 코드를 사용하여 제품을 개발하며 느낀,
반드시 고려해야 할 점과,
그것을 놓치지 않을 수 있는 방법에 대해 다루고자 합니다.
사실 바이브 코딩이 핫하다고 하지만, 비개발자 입장에서는 유지보수, 배포, 운영 등
고려해야 할 점들과 알아야 할 지식이 너무 많죠.
그것들을 어느 정도 보완할 수 있는 팁에 대해 작성해 보았습니다.
비개발자로서 바이브 코딩을 시작하고자 하시거나, 하고 계신 분들께 도움이 되길 바라며,
세부적인 제품의 기획사항이나 개발 과정의 시행착오 또한
이어서 다른 글에 작성해 보겠습니다!
먼저, 제가 만든 제품에 대해 간략히 소개드리겠습니다.
Choicelab : 두 눈에 보는 세상
저는 클로드 코드를 활용하여 진보/보수 뉴스를 한 번에 볼 수 있는 서비스,
Choicelab을 만들었고, 운영 중입니다.
해당 제품의 주요 기능은 아래와 같아요.
1. 뉴스피드를 통해 좌/우 진영 미디어 콘텐츠를 한 눈에 확인
2. 검색 기능을 통해 관심 있는 이슈에 대한 좌우 진영 보도사항 확인
3. 이슈별 뷰를 통해 현재 진보/보수 진영에서 핫하게 다루어지는 키워드 확인
즉, 한 쪽에만 특화되어 편향되는 SNS/유튜브 알고리즘의 한계를 극복하고자,
정치 양 진영의 콘텐츠를 자체 크롤링하며, 이슈별 검색/트렌드 도출 기능이 제공되는 제품입니다.
링크 : https://choicelabdev.vercel.app/
실제로 바로 활용해보실 수 있는 무료 서비스이니, 한 번 확인해보세요!
클로드 코드와 클로드 Opus 모델을 함께 사용하기
이렇게 서비스를 개발하기 시작하고 실제 런칭하기까지, 비개발자가 반드시 고려해야 할 점은
내 기술적 의사결정과 구현 과정을 도와줄 별도의 에이전트가 필요하다는 것입니다.
그리고, 가장 도움이 됐던 한 가지 팁은
클로드 코드와 클로드 LLM의 Opus 4.5 모델을 함께 사용하는 것입니다.
물론 클로드 코드 자체에서 Plan Mode로 기획을 진행하고 논의할 수 있는 기능이 있지만,
저는 별도로 의사결정을 도와주는 최상위 모델을 활용하였어요.
판단 및 계획, 검수 작업은 Opus에게, 실행은 Claude Code에게 맡기며,
Opus 모델이 저의 요구사항을 기술적으로 검토하고 제안해주는
TPM(Technical Product Manager) 역할을 하도록 했습니다.
그 이유는, 대화형 UI를 가진 클로드가 터미널 뷰의 클로드 코드에 비해
좀 더 편리하게 생각을 정리하고 논의할 수 있게 해주며,
최상위 모델인 Opus 4.5의 성능을 최대한 활용하여
제가 이해하지 못하는 것들을 검수하고 설명하기에 최적이라고 판단하였기 때문입니다.
이제부터는 실제 활용 예시를 통해 클로드 + 클로드 코드의 활용법을 정리해 드릴게요.
1. 정돈된 프롬프트
첫 번째로, 작업 계획을 세우고 보다 정리된 프롬프트를 생성하여, 이를 클로드 코드에게 제공할 수 있습니다.
제가 원하는 구현 내용을 클로드 코드와 1차적으로 정리한 뒤,
아래와 같이, 클로드 코드 프롬프트를 정리한 후, 작업을 요청하는 것이죠!
Tip. 모든 요구사항을 처음에 적기보다, 떠오르는 것들만 적고 필요한 사항을 질문해달라고 하면
우리가 놓치고 있던 포인트를 모두 짚고 넘어갈 수 있어요.
위와 같이 클로드 모델과의 논의를 통해 최적의 프롬프트를 클로드 코드에게 전달함으로써
지시 사항의 모호성을 줄이고, 모호성으로 발생하는 할루시네이션과 오류를 줄일 수 있습니다.
2. 구현 내용의 검수
두 번째로, 클로드 코드의 구현 내용을 Claude Opus 4.5 모델에게 검수를 맡김으로써
오류 확률을 낮출 수 있습니다.
바이브 코딩을 비개발자가 시도할 때의 가장 큰 걱정은,
AI의 잘못된 구현을 내가 검수할 수 없다는 점입니다.
클로드 코드는 구현 시마다 코드 작성 현황을 공유하고, Accept/Deny로 코드 검수의 기회를 제공합니다.
이는 코드를 읽고 판단할 수 있는 개발자에게 특화된 UI인데,
비개발자의 경우 이것을 읽어도 어떻게 구현되는지 모르니,
치명적인 오류나 미스가 있더라도 이를 Accept할 수밖에 없습니다.
그러므로, 이러한 문제를 검수하기 위해 별도의 클로드 모델을 활용하였습니다.
위와 같이 구현된 내용을 Claude에게 검수받으면, 원하는 의도대로 구현되었는지,
현재까지의 개발 내용과 환경에 충돌은 없는지 오류를 줄이며 구현할 수 있습니다.
예를 들면 이런 것이죠!
구현 중, Claude Code가 클라이언트 사이드에서 전체 영상 데이터를 불러온 뒤 필터링하는 방식으로 구현했습니다.
코드를 봐도 저는 이게 문제인지 알 수 없겠죠?
그러나 해당 코드를 Opus 모델에게 검수 요청할 경우, 이런 답변을 받을 수 있었습니다.
"현재 방식은 데이터가 수천 건을 넘어가면 브라우저 성능에 심각한 영향을 줄 수 있습니다.
서버 사이드에서 페이지네이션을 적용한 검색 API를 구현하는 것을 권장드립니다."
이 피드백을 바탕으로 Claude Code에게 수정을 요청했고,
서비스가 커져도 문제없는 구조의 구현이 가능했어요.
요것이 서비스의 안정성에 큰 차이를 만들기 때문에, 조금 시간이 들더라도 꼭 해보시는 것을 추천드려요.
3. 기술적인 의사결정
세 번째로, 기술적인 의사결정(프레임워크 선택 라이브러리 활용, 기능 범위, 백엔드 SaaS 등)을
Claude Opus 모델과 상의하여 진행할 수 있습니다.
프론트엔드, API, 백엔드 툴 등 다양한 선택지에서 비개발자는 각 선택지의 장단점을 쉽게 판단할 수 없죠.
그렇지만 전반적인 개발의 방향성을 좌우하는 중요한 선택지이기에
바로 클로드 코드에게 무작위로 환경 설정을 지시하기보다는
보다 상위 모델인 Claude Opus 모델에게 기술적인 의사결정을 사전에 요구하는 것이 좋습니다.
이 과정에서도 현재 상황과 니즈에 맞게 클로드와 대화하면서, 가장 맞는 기술 스택과 프레임워크를 택하는 것이 중요합니다.
저의 경우 서버사이드 기능을 활용한 유튜브 영상 크롤링이 Next.js에서 더 매끄럽다는 것을 확인하고
해당 기술을 사용하기로 했어요.
또한 Supabase와 Vercel 등의 툴을 다루는 것도, 클로드 모델과의 논의를 통해 결정했습니다.
서비스의 코어 기능에 맞는 프레임워크 등을 높은 개발 이해도를 가진 클로드가 추천해줄 수 있기에,
보다 튼튼하고 잘 구동하는 프로덕트를 만드는 데에 매우 도움이 됩니다.
마무리하며
이어지는 글에서는 제품 개발 과정에서의 크롤링 기준 등의 의사결정,
실제 바이브 코딩을 통한 구현에서 쓸 만한 툴,
활용 사례와 팁에 대해서도 정리해 보겠습니다.
읽어주셔서 감사합니다.
다음 글에서 뵙겠습니다!
0
0