Claude Vibe Coding

이전 정리를 통해 MCP 를 통해 웹 검색도 가능하게 했고, 파일 시스템에 접근도 가능하게 만들었다.
이제 클로드 AI 를 통한 바이브 코딩의 준비는 모두 마쳤다고 생각 된다.

간단한 개시판 웹 사이트를 만들어 바이브 코딩을 테스트해보자.
조금 오버스팩이 될수도 있지만, 지금 개발중인 컴퓨터의 환경에 최대한 영향을 주지 않는 방향이 필요하기에 Docker 도 사용해 본다. (처음 사용해본다...)

 

1. Docker Desktop 설치

특별한것 없다... 홈페이지에 들어가서 설치를 진행해준다...

Docker: Accelerated Container Application Development

Doccker Desktop 설치 완료

 

2. 클로드 설정

검색과 파일 시스템 접근 MCP 를 설정한다.

{
  "mcpServers": {
    "g-search": {
      "command": "npx",
      "args": ["-y", "g-search-mcp"]
    },
    "filesystem": {
          "command": "npx",
          "args": [
            "-y",
            "@modelcontextprotocol/server-filesystem",
            "/Volumes/Jiran External Disk/MyWeb"]
    }
  }
}

 

3. 클로드 괴롭히기

만들고자 하는 홈페이지 기능을 다음과 같이 요청하고 권한 허용 허용 허용 허용 을 눌러준다.

이 채팅은 웹사이트를 만드는 바이브 코딩을 위한 채팅이다. “/Volumes/Jiran External Disk/MyWeb“ 를 루트 폴더로 한다. 최종 목표는 다음 기능이 포함된 웹사이트를 구축하는 것이다. 1. 회원 가입, 로그인, 탈퇴 2. 개시판을 통한 글쓰기, 수정, 삭제 3. 개시판의 글에 대한 덧글 쓰기, 수정, 삭제 4. 개시판은 모든 사용자가 쓰기 권한이 있는 자유 개시판 n개, 특정 사용자만 쓰기 권한이 있는 게시판 n개 해당 웹사이트는 Docker 의 컨테이너에서 동작해야 한다. 따라서 가장먼저 Docker 를 실행하기 위한 docker-compose.yml 을 작성한다. 조건은 다음과 같다. 1. OS 는 rockylinux 9.3 이다. 2. 최신 트랜드에 맞게 기본 구성을 맞춰줘. docker-compose.yml 작성이 마무리 되면 docker-compose.yml 를 이용해서 docker 를 실행 하는 방법도 알려줘. 단, docker desktop 을 통한 GUI 방식으로 알려줘.

이렇게 하면 혼자서 뭘 계속 만든다.
잠시 기다리면 다음과 같은 말을 쓰면서 도커를 실행해 보라고 한다.

그럼 클로드를 믿고 Docker Desktop 에서 실행해 보면 에러가 난다. 다시 괴롭히러 가자. (에러 스크린샷은 찍지 못했다.)

나 myapp_backend, myapp_frontend 는 실행되지 않았다. myapp_phppgadmin 은 경고가 표시 되었다. (phppgadmin The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested) 클로드 플랫폼 호환성 문제가 발생했네요. Apple Silicon(M1/M2) Mac을 사용하고 계시는 것 같습니다. Docker 구성을 수정하여 이 문제를 해결해 보겠습니다.

대답을 하고는 다시 이것저것 만지작 거린다.

다시 실행 했더니 몇가지 오류가 있었지만 어찌어찌 잘 실행 되었다.

이렇게 몇번 주고 받으니.... 힘들다고 투덜되는 클로드를 볼수 있다.

새 채팅창을 만들어 대화를 이어가면 된다...

무료 사용량을 다 썼다...

 

4. 결론

특별한 컴파일러 없이 파일 구조만으로 가능한 웹의 경우 바이브 코딩이 몹시 쉽게 가능해 보인다.
최신 기술로 만들어 달라고 해서 구성을 전혀 모르겠지만, 채팅으로 디버깅하며 수정이 가능해 간단한 샘플 프로젝트 정도는 가능해 보인다.
클로드 MCP 를 사용했기에 특별한 과금은 하지 않아도 되고 좋다.

채팅 허용양이나, 코드를 보면서 같이 진행 하기에는 조금 귀찮기도 하고...
조금만 쓰면 사용량이 소진되었다고 투덜거리며 나중에 하라고 하고...
어째든 된다!!!! 편하다!!! ㅋㅋ

 

5. 목차

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