비개발자라면 이렇게 해보세요: 바이브 코딩 실전 가이드

이 글은 바이브 코딩을 처음 시작할 때부터 지금까지의 제 경험을 담았습니다. ‘기획자 입장에서 바이브 코딩을 시작하는 방법’과 프로덕트를 개발해 나감에 있어 ‘몸으로 때우며 알게된 팁’에 관한 이야기입니다. 물론 디자이너나 마케터 등 비개발자 직군에게도 도움이 될 것이라 생각합니다. 추상적인 개념보다는 실제로 사용한 ‘방법’에 집중하고자 노력했고, 이 방법이 꼭 ‘정답’은 아니라는 점을 미리 말씀드립니다.

‘그 놈의 딸깍!’이 모든 일의 시작이 됐다

사실 저도 처음에는 바이브 코딩에 비관적이었습니다. 제가 속해 있는 SI 업계에서 프로젝트를 진행하게 되면, 보통 보안 이슈로 인해 네트워크가 제한된 환경이 많습니다. 금융권 프로젝트의 경우 아예 망 분리가 되어 있어 인터넷 접속이 불가하고, 일반적인 도메인 프로젝트 역시, 허용된 URL 외에는 접근이 차단되는 경우가 많습니다.

이런 이유로(핑계로) AI의 활용성에 대해 늘 의구심을 가지고 있었습니다. (심지어, 사내 서비스에 AI를 도입하는 프로젝트를 진행했음에도!) 또한 제가 AI에 대해 관심을 가지기 시작했을 때는 아직 ‘바이브 코딩’이라는 개념이 태동하기 전이었고, 실제 코딩 성능 또한 현재와 비교하면 턱없이 부족한 수준이었습니다.

시간이 어느 정도 흘러, ‘바이브 코딩’이 주요 키워드로 등장하게 되면서 서서히 AI에 대한 관심이 생기기 시작했습니다. 함께 일하는 동료 개발자는 이미 AI를 사용하여 개인 프로젝트를 진행하고 있었고, 그 와중에 ‘요즘 IT 뉴스레터’와 주요 커뮤니티에서 ‘딸깍!’만으로 개발이 진행된다는 경험담들이 하나 둘 생겨나기 시작하면서, 점차 관심이 높아지기 시작했습니다. (지금 생각해보면 ‘딸깍!’이란 말에 속은 것 같기도 하네요.)

첫 번째 프로덕트를 찾아서

바로 옆에서 AI를 사용하여 개인 프로젝트를 진행하는 모습을 보면서, 저도 ‘바이브 코딩’을 통해 나만의 프로덕트를 만들고 싶은 욕심이 생겼습니다. AI를 활용해서 어떤 것을 만들면 좋을지 고민하다가 우선 다음과 같은 기준을 세웠습니다.

1. 퇴근 후 진행하는 개인 프로젝트
2. 그러므로 볼륨이 너무 크지 않고 단순한 형태의 서비스
3. 내가 필요한 서비스

이 기준으로 고민하는 것은 마치 ‘고등학교 시절 진로 결정’과 같은 느낌이 들만큼, 은근히 어렵고 막막한 것이었습니다. 특히나 1번과 2번 조건에 부합하는, 간단히 구현하면서도 가치가 있는 서비스를 찾아야 하는데, ‘간단함’과 ‘가치’가 다소 대치되는 느낌이라 더욱 마땅한 아이디어가 떠오르지 않았습니다.

이런 고민을 아내와 함께 이야기하다가, 내가 아닌 아내에게 도움이 될 만한 서비스가 없을지 함께 찾아보았고, 결과적으로 첫 프로덕트로 ‘일정 공유 캘린더’를 만들게 되었습니다.

아내는 휴가를 사용할 때 함께 근무하는 다른 직원들의 휴가 일정과 겹치지 않도록 사용하는 것이 암묵적인 룰이었습니다. 그래서 아내의 자리에 있는 탁상 달력에는 다른 직원들의 휴가 일정이 적혀 있고, 아내가 휴가를 써야 할 때는 겹치지 않는 날짜인지 먼저 확인 후 휴가 신청을 하곤 했습니다. 문제는 달력에 매번 수기로 적어야 하고, 변경이 발생하면 그 때마다 다시 적어야 하는 불편함이 있었고, 출근을 해서 달력을 확인해야만 내 휴가 일정을 잡을 수 있다는 한계가 있다는 점이었습니다.

첫 번째 프로덕트를 만들며 얻은 팁 4가지

첫 번째 바이브 코딩 프로덕트는 이런 배경에 의해서 다음과 같은 주요 기능을 도출해 낼 수 있었습니다.

1. 나의 일정을 등록하고 수정 및 삭제 등의 관리 기능이 필요하다.
2. 타인의 일정을 확인할 수 있어야 한다.
3. 간단한 형태의 가입 및 로그인 절차가 제공되어야 한다.

복잡한 기능은 필요하지 않다 보니 B/E 없이 F/E와 단순한 DB만으로 구현 가능할 것이라 판단되었습니다. 그래서 F/E는 Render라는 서비스를 이용해 구현하였고, DB는 Supabase를 이용했습니다. 끝으로 카카오톡 로그인을 통해서 최대한 익숙하고 간단한 가입 및 로그인 절차를 구현했습니다. 기본적인 설계 후, 프로토 타입을 생성하고 QA까지 진행하여 런칭하기까지 약 1주일 정도 소요됐습니다. (그 중 카카오톡 로그인 적용하는데만 3일이 걸렸죠…)

수기로 관리하는 달력을 그대로 웹으로 구현하고, 모두가 함께 볼 수 있는 간단한 형태라, 개발자라면 뚝딱 만들 수 있을 정도로 간단한 수준이지만, 기획자 입장에서는 쉽지 않은 프로덕트입니다. 바이브 코딩으로 생각보다 길지 않은 기간에 완성할 수 있어 무척 놀랐던 기억이 아직도 생생합니다.

팁 1. 첫 시작은 욕심을 버리기

저는 결과적으로 아래의 이유로 인해 첫 프로덕트 선정 방식이 매우 좋았다고 생각합니다.

• 처음부터 너무 거창한 프로덕트를 진행하기에는 바이브 코딩이 만만하지 않음
• 바이브 코딩에서 가장 중요한 것은 지속성이며, 가장 해로운 것은 열정의 소멸임
• 프로덕트 개발이 완료되고 실제 서비스가 되어야 지속성이 유지됨

너무 힘을 꽉 주지 말고, 가볍고 경쾌한 느낌으로 시작하는 것이 백번 낫습니다.

바이브 코딩이 처음이라면, 일단 다 물어보자

본격적인 바이브 코딩을 시작하기 전, 앞서 언급한 동료 개발자로부터 다음과 같은 가이드를 받았습니다.

1. 우선은 클로드 코드 Pro로 진행한다. 상위 모델은 그 이후에 전환해도 충분하다. (“일단 써보시고 업그레이드 하는게 좋을 거에요.”)
2. IDE를 사용한다. (“개발하시는 거니까 개발자처럼 일하셔야죠.”)
3. Vercel과 Supabase를 추천한다. (“처음 시작은 이 2개가 제일 좋을 거에요.”)

가이드에 따라 클로드 코드 Pro 구독 및 Intelli J 설치 후, 첫 화면을 보고 시작부터 당황스러움을 느꼈습니다. 사실 기획자가 IDE를 접할 일이 잦지는 않아서, 낯선 화면이 떡 하니 나왔으니 어찌 보면 당연한 것일 수도 있겠습니다. 개발자와 소통 시, 개발 소스를 직접 보고 확인하는 경우들이 종종 있었기 때문에 낯설지 않을 줄 알았는데, 너무 자만했던 것 같습니다. (이걸 내가 사용할 줄이야…) 프로젝트 생성이 어떤 의미인지도 모르겠고, 터미널은 또 무슨 기능이길래 이런 UI로 제공되는 것인지, 클로드 코드는 여기서 어떤 식으로 써야 하는지 등등 첫 시작부터 탁! 막히는 기분이었습니다.

그 때, 제가 선택한 방법은 ‘그냥 클로드에게 물어보자’였습니다.

그리고 이 때부터 AI, 그리고 바이브 코딩에 대한 기대감이 생기기 시작했습니다. 마치 옆 동료에게 물어보는 것처럼 물어보면, 이해하기 쉽게 자세한 설명과 진행 방식을 알려주었기 때문입니다. 심지어, 진행 도중 오류가 발생했을 경우, 오류 메시지를 그대로 던지면 그에 대한 피드백과 (가능할 경우) 후속 처리까지 알아서 해준다는 점이 정말 놀라웠습니다.

이런 식으로 IDE 설치 후 클로드 코드를 설치하고 프로젝트를 생성한 다음, git hub까지 연결이 가능했는데, 돌이켜보면 일련의 과정들이 기획자 입장에서는 경험하기 쉽지 않은 영역이다 보니 AI의 가이드가 없었다면 시작과 동시에 중단이 될 정도의 큰 허들이었던 것 같습니다.

팁 2. 바이브 코딩을 하기 위한 개발 환경 설정 절차

1. 클로드 코드 구독 시작
2. IDE 설치 (VS Code / Intelli J 등)
3. IDE에 클로드 코드 설치
4. 로컬에 프로젝트 생성

그리고 이 과정에서의 모든 문의는 클로드에게 맡깁니다.

유용한 스킬과 에이전트를 찾아보자

자, 이제 로컬에 프로젝트 생성까지 만들었다면, 바이브 코딩을 하기 위한 기본적인 개발 환경 세팅이 완료되었다는 것을 의미하는데요. 여기서 추가적으로 나에게 맞는 스킬과 에이전트를 설치하는 것을 추천합니다. (필수는 아닙니다만, 강력히 추천합니다.)

스킬과 에이전트가 무엇인지까지 자세히 알 필요는 없습니다. 단순히 ‘클로드 코드가 나의 지시사항을 수행함에 있어, 보다 정확하고 효율적인 작업을 할 수 있도록 돕는 Somethings’ 정도로만 이해하셔도 무방합니다. (어차피 하다 보면 알게 됩니다.)

유명한 스킬과 에이전트를 직접 명시해서 설치할 수도 있고, 클로드 코드에게 적합한 스킬이나 에이전트를 찾아서 설치하라고 위임할 수도 있습니다. 제 경우는 전체적인 필요 스킬과 에이전트는 클로드 코드에게 위임하여 설치했고, 특정 스킬은 명확하게 정의하여 설치했습니다. 스킬 설치는 특정 명령어가 있지만, 우리는 개발자가 아니므로 클로드 코드에게 설치를 요청하면 직접 탐색하여 설치할 수 있습니다.

팁 3. 스킬과 에이전트를 설치하자

1. 어디서부터 시작해야 할 지 모르겠다면, 클로드 코드에게 검색 및 설치를 위임해도 무방
2. 당시 사용했던 스킬은 아래와 같고, 최근에는 더 좋은 스킬들이 많이 나와 있으므로 별도의 스킬 검색을 추천

• 디자인 관련 스킬
• CLAUDE.md(*) 개선 스킬

*CLUADE.md란?

클로드 코드가 실행될 때 기본적으로 알아야 하는 정책이 정의된 파일이라고 보면 됩니다. 클로드 코드가 바이브 코딩을 시작하기 전, 이 파일을 읽은 후, 하지 말아야 할 제약 사항이나 반드시 해야 하는 필수 사항, 그리고 기타 다양한 종류의 사전 지시 사항을 미리 학습하게 됩니다. 저의 경우 ‘수정 및 개발 진행 시, 이미 설계 및 개발이 완료된 구조의 변경이 필요할 경우, 반드시 나에게 확인 후 진행할 것’과 같은 중요 내용을 등록해 놓고 사용합니다.

바이브 코딩의 첫 시작은 계획 수립부터

클로드 코드에는 ‘Plan Mode’라는 것이 있는데, 말 그대로 계획 수립을 위해 제공되는 모드로 보면 됩니다. 이 Plan Mode를 통해 클로드 코드와 질의응답을 진행하면서 실제 개발이 시작되기 전 최대한 구체적인 계획을 수립하는 것을 추천합니다. 계획이 탄탄하고 깔끔할수록 실제 개발이 시작되었을 때 진행 속도도 빠르고 구조도 효율적으로 가져갈 수 있습니다.

팁 4. 첫 삽은 이렇게 뜨자

1. 간단한 서비스 개요를 우선 작성

• 구조는 정해진 것이 없지만, 아래와 같은 항목은 포함하는 것이 좋음
  • 서비스 컨셉 (예시 : 내부 직원들의 휴가 일정을 등록하고, 모두에게 공유하는 서비스)
  • 핵심 기능 (예시 : 일정 등록 및 삭제, 변경 기능 / 카카오톡을 통한 가입 및 로그인)

2. 바로 개발을 진행하지 말고, 우선은 Plan Mode로 전환하여 상세한 계획 수립

• Plan Mode에서는 이런 식으로 진행
  • 1) Plan mode 전환 후, 미리 정의된 서비스 개요 전달
  • 2) 클로드 코드가 대략적인 방향성과 기능에 대한 요건을 생성함
  • 3) 이 서비스를 구현하기 위해 필요한 외부 연동 서비스에 대한 탐색 요청(예시 : 카카오톡, git hub, Rander, supabase 등)

마치며: 바이브 코딩은 쉽지 않다

첫 번째 프로덕트를 완성하고, 회고를 해보니 아무리 생각해도 ‘속았다’는 생각을 지울 수가 없었습니다. 다들 ‘딸깍’이라고 표현했지만, 실상은 그렇지 않았으니까요. 생각보다 바이브 코딩을 시작한다는 것은 꽤나 어려운 일이었습니다. 이번 글에서는 바이브 코딩을 시작할 때 도움이 되는 몇 가지 팁을 알려드리고자 했습니다. 

총 4가지 팁을 공유드렸고 조금이나마 바이브 코딩을 시작하는 비 개발자분들께 도움이 되면 좋겠습니다. 다음 글에서는 나머지 4가지 팁에 대해 이야기해보도록 하겠습니다.

직접 경험한 바이브 코딩 팁 4가지

1. 바이브 코딩으로 개발할 첫 프로덕트는 가급적 가볍고 볼륨이 적은 것으로 선정

2. 바이브 코딩을 하기 위한 환경 설정은 클로드 코드와 질의응답 형태로 진행

3. 스킬과 에이전트를 적극 활용

4. 프로덕트 개발 계획을 먼저 수립하여 검토 후 개발 진행

ⓒ요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.