바이브 코딩 환경 구축, 막히면서도 결국 해냈던 이야기 🚀
소개
바이브 코딩이라는 말을 처음 들었을 때는 막연히 "AI랑 같이 코딩하는 건가?" 정도로만 생각했다. 하지만 특강과 스터디를 통해 실제로 환경을 구축하고 활용해보면서, 단순한 개념이 아니라 작업 방식 자체를 바꾸는 경험이라는 걸 느끼게 되었다.
바이브 코딩을 시작하기 위해 어떤 준비를 했고, 어떤 시행착오를 겪었으며, 어떻게 해결해 나갔는지를 공유해보려고 한다 😊
진행 방법
1. 사전 준비 & 특강, 스터디 참여
바이브 코딩 관련 특강 수강
1차 스터디 참여
전체적인 개념과 다양한 도구들에 대한 이해
처음에는 "이걸 내가 다 쓸 수 있을까?" 싶을 정도로 다양한 툴들이 소개되었고, 솔직히 약간 압도되는 느낌도 있었다 😅
AI를 활용한, 특히 바이브 코딩을 활용한 필요 웹 사이트를 만들어 보고 실 효용성을 판단해보고자 함
타겟으로 잡은 것은 첨단 시스템 엔지니어들에게 개발 참조 정보를 제공하는 엔지니어링 포털을 바이브 코딩으로 구현하기(할 수 있는 데 까지) 최초 랜딩페이지와 기초 제공 정보 맵 구현, 항공/방산 개발 약어 조회 시스템 개발과 결제 시스템 연결을 금번 연구 목표로 정하고 바이브 코딩 환경을 구축해보았다.
## 진행 세부 내용 🔍
1️⃣ 사전 핵심 스터디 및 특강을 통한 AI 스터디 준비
스터디 전 사전 특강을 통해 옵시디언을 알게 됨. 개인 KMS에 관심이 많았었는데, 개인 지식 관리에 Markdown 형태 포맷이 좋다는 것을 알았고, 이와 관련 옵시디언 툴이 유용하다는 것을 알게 되고, 향후 적극 적용해보기로 마음 먹음.
이번 스터디 모임에서 알게 된 관련 서적인
스터디 장(김혜련)의 저서 "당신의 첫AI직원(AI 에이전트로 시작하는 비즈니스 혁신전략)"와
특강 저자(구요한)의 저서 "옵시디언 프로페셔널 노트"를 구매(일부 판매 예약)함
2️⃣ I-P-O (Input-Process-Output) 이용 웹사이트 기획(일부)
Claude Code와 대화하며 내가 기획하는 엔지니어링 포털에 대한 큰 그림을 그려나감
스터디장이 제공한 I-P-O (Input-Process-Output) 구조로 서비스 기획하는 방법을 학습함. 전체적인 구조를 설계해봄
타겟 사용자를 정의하고 어떤 서비스를 제공할 지 대략적으로 구성해봄
금번 4주 간의 스터디 과정에서는 바이브 코딩 환경 구축 및 코딩 방법을 익히고 최종 랜딩 페이지와, 항공/방산 약어 조회(서비스), 뭐라도 간단한 결재 연동 까지 구현을 바이브 코딩으로 구현하는 것을 목표로 세움
눈으로 작동하는 페이지 확인 후 단계적으로 확장해 나가기로 함
3️⃣ 바이브 코딩 환경 구축 (클로드 코드, 비주얼 스튜디어 코드 인스톨)
클로드 코드를 설치하기 위해서는 클로드 유료 계정이 필요함. 월 22 달러로 유료 계정 가입함(연간은 220 달러, VAT 포함)
비주얼 스튜디오 코드 설치 후 클로드와 연계하다보니 API 설정을 위한 신용카드 입력을 요청함(Buy Credits) 클로드 프로 계정 사용자는 무료로 알고 있었는데 이상하여 해당 내용을 클 로드에 문의. 비주얼 스튜디오 코드 설치/연동 시 클로드 계정 연동이 아닌 API 연동을 선택하여 나타난 오류였음
월요 특강에서 알게 된 몇가지 Extension을 설치해봄. 다양한 Extension이 준비되어야 있어서 향후 조금씩 확장 예정임
클로드로 간단한 너구리 게임을 만들어 봄
"간단한 웹 너구리 게임 만드는 법을 알려줘" 했는데 그냥 웹 너구리 게임을 만들어 버림.
나의 바이브 코딩 첫 작품으로 .html 문으로 저장하여 장시간 너구리 게임에 몰입해봄. 외부 라이브러리 없이 순수 HTML/CSS/JS 만으로 작성되어 인터넷 연결 없이도 동작함.
이게 바이브 코딩이구나 하는 직관적인 경험을 해보며 자신감을 얻음.
2. 개발 환경 구축 시작
설치한 주요 도구
Visual Studio Code : 필요하다고 해서 깔아봄
Claude Code (Thinking Partner 모드 + 코딩): 궁금한 것, 진행사항이나, 하다 막히는 부분들을 물어보고,막연한 아이디어를 체계적인 기획서로 만들고, 초기 개념들을 구체화하며 필요 웹 시스템을 기획하고 검증하는데 활용
Claude Opus 4.6: AI 모델로 활용
처음에는 단순히 설치만 하면 끝날 줄 알았지만, 실제로는 환경 설정 과정에서 예상보다 많은 문제가 발생했다.
3. 문제 발생 & 해결 과정 (핵심 경험)
특강에서 배운 여러 바이브 코딩 툴들이 한 번에 제대로 설치되지 않는 문제가 발생했다.
이때 내가 사용한 방법은 단 하나였다.
에러 메시지를 캡처 → Claude에게 그대로 질문
이 방식이 생각보다 강력했다.
에러 메시지를 그대로 전달
해결 방법을 단계 별로 안내받음
그대로 따라하면서 문제 해결
👉 결과적으로, "막히면 검색"이 아니라 👉 "막히면 AI에게 맥락 포함해서 질문"하는 방식으로 바뀌었다
이 경험이 바이브 코딩의 핵심이라는 걸 체감했다.
4. 예상치 못한 문제 (계정 이슈)
스터디장에서 공유해준 100x Monster 사용 설정 과정에서 문제가 발생했다.
메일 설정이 잘못되어 정상적으로 사용이 불가능
한동안 원인을 몰라 헤맴
결국 깨달은 점은 하나였다.
👉 AI 관련 서비스는 계정 통일이 중요하다
그래서 다음과 같이 정리했다.
앞으로 AI 관련 계정은 Google 계정으로 통일
기존 지피터스 계정도 네이버 메일 → 구글 메일로 변경함
이 작은 설정 하나가 이후 사용성을 크게 좌우한다는 걸 알게 되었다.
결과와 배운 점
👍 달라진 점
단순 설치 → 문제 해결 중심의 학습 방식으로 변화
AI를 "검색 도구"가 아닌 "문제 해결 파트너"로 인식
환경 구축에 대한 두려움 감소
😵 시행착오
초기 설치 과정에서 연쇄적인 에러 발생
계정 설정 문제로 도구 사용 지연
💡 핵심 깨달음
에러는 피하는 것이 아니라 "활용하는 것"
AI에게 질문할 때는 맥락 + 에러 그대로 전달이 중요
계정 관리(특히 Google 계정 통일)는 생각보다 중요
🚀 앞으로의 계획
더 다양한 바이브 코딩 툴 적용
반복 작업 자동화 시도
개인 개발 환경을 점점 고도화
아직은 클로드, 클로드 코드, 비주얼 스튜디오 코드에 익숙하지 않으므로 더 많은 활용을 통해 익숙해지도록 연습을 많이 해봐야 할 것 같음
IPO-Webpage-Plan-Template.md 및 think-partner.md를 좀 더 잘 활용할 수 있도록 더 연습해보고 구체화해나갈 예정임
스터디 장이 강의한 내용이나 제공한 템플릿 등을 활용하여 필요로 하는 서비스를 구체화하거나 스터디하면서 새로 배운 내용이나 아이디어를 추가해 나갈 예정임
도움 받은 글 (옵션)
스터디 특강 자료
스터디장 가이드
