VS Code Vibe Coding (Claude)

클로드 + MCP 를 통해 인터넷 검색 권한과 파일 접근 권한을 주고, 바이브 코딩(?) 으로 웹사이트 구축에 성공하였다.
마무리 하고 보니 뭔가 야매 같기도 하고, 코드 편집기도 안쓰니 폼도 안나고...
VS Code 에 Claude 를 넣어 진정한 바이브 코딩을 완성해 보려 한다.

 

1. VS Code 설치

Download Visual Studio Code - Mac, Linux, Windows

 

2. Copilot 확장 설치

 

3. 괴롭히기

이전에 만들어둔 웹 서버 폴더를 열고, 코파일럿에서 "편집 모드" 선택, 모델은 "Claude 3.5 Sonnet" 을 선택한다.
#codebase 를 먼저 입력하고 원하는 내용을 요청한다.

#codebase 지금 열려있는 프로젝트는 도커를 이용한 웹서비스 이다. 최종 목표는 다음 기능이 포함된 웹사이트를 구축하는 것이다. 1. 회원 가입, 로그인, 탈퇴 2. 개시판을 통한 글쓰기, 수정, 삭제 3. 개시판의 글에 대한 덧글 쓰기, 수정, 삭제 4. 개시판은 모든 사용자가 쓰기 권한이 있는 자유 개시판 n개, 특정 사용자만 쓰기 권한이 있는 게시판 n개 지금까지 개발된 내용을 확인하고, http://localhost/ 로 접속했을때 표시되는 화면에 회원가입 페이지 링크를 추가해줘.

다 완료가 되면 수정된 내용을 적용할지 파란색 버튼이 표시 되는데 눌러서 적용해 주고 도커에서 다시 실행해 보면 잘 적용된걸 확인할 수 있다.

 

4. 결론

지금까지 MCP 를 공부하고 권한을 주고 뭐고 열심히 했는데... 한방에 모든것이 해결 되었다.

코파일럿의 과금 정책이 있고, 거기에 클로드 사용량에 따른 과금은 또 어떻게 되는지 아직은 잘 파악되지 않았다.
일단 모두 무료로 사용하고 있기에 다음 순서대로 이용하면 무료로도 어느정도의 사이트 개발이 가능해 보인다.

- VS Code + Copilot + Claude
- Claude + MCP

이제 지금까지 공부하고 내용을 배운것에 만족하며, 바이브 코딩을 마치려 한다.
괴롭히고 괴롭혀서 좋은 테스트 사이트가 완성되면 공유해 보겠다.

 

5. 목차

1. 클로드(Claude) MCP 2. MCP(Model Context Protocol) 3. Claude Vibe Coding 4. VS Code Vibe Coding (Claude)