🚀 클로드 + GPT-5 조합, 따라하는 방법

1. 깃허브(GitHub) 준비

GitHub 가입 후 로그인.
새 저장소(repository) 생성.
- 예: my-vibe-project
Personal Access Token 발급
- Settings → Developer Settings → Personal Access Tokens → Tokens (classic) → Generate new token
- 권한(스코프): repo, workflow 체크
- 토큰 생성 후 꼭 복사 (재발급 불가)

2. 클로드 코드 설정

프로젝트 폴더에 클로드 마크다운 파일을 둡니다.
예: claude_config.md

안에 아래처럼 작성:

GITHUB_TOKEN=여기에_복사한_토큰
GITHUB_REPO=https://github.com/내아이디/my-vibe-project.git

클로드에게 명령:
```
소스코드를 자동으로 깃허브에 올려줘.
```
→ 클로드가 알아서 git init, commit, push 처리.

3. 깃 관리 자동화하기 (체크포인트)

클로드에 지침을 넣어두면 자동 커밋 + 푸시가 됩니다.
즉, “게임 저장(세이브 포인트)”처럼 언제든 되돌릴 수 있어요.

예시 지침:

- 코드 변경 감지 시 자동 commit
- commit 메시지: [auto] 파일명/작업내용
- 주기적으로 push

활용 예:

최근 5개 커밋 목록 알려줘 → 클로드가 리스트 뽑아줌
두 번째 커밋으로 되돌려줘 → 클로드가 reset + push 실행

4. GPT-5 Deep Research로 코드 분석

GPT-5에 깃허브 저장소 연결
- ChatGPT UI → Settings → Connectors → GitHub 연결 → 내 저장소 선택
연결 후 실행:
```
현재 코드에서 심각도 순위별 문제 찾아줘
```
→ GPT-5가 대량 파일을 심층 분석, 버그/보안 취약점까지 찾아줌
분석 결과를 PDF로 저장 가능 → 클로드에게 “가장 심각한 2개 고쳐줘”라고 지시 → 자동 수정 & 커밋

5. GPT-5 에이전트로 바이브 코딩

에이전트 기능 = 사람처럼 키보드·마우스 대신 코딩
(단, 권한 제한 있음: pip 설치X, 인터넷 차단)

실습 아이디어

GPT-5에게 지시:

새 프로젝트: airplane_game
HTML + JS로 기본 비행 시뮬레이션 만들어줘

GPT-5가 자동으로 폴더/파일 생성 → 실행 & 테스트.
수정 반복:
- “조작감 더 부드럽게”
- “비행기 디자인 더 리얼하게”
- “배경 하늘 넣어줘”
- “과일 먹으면 점수 올라가게”
매번 커밋이 자동 생성 → 깃허브에 업로드.

6. 리뷰 & 협업 루프

GPT-5: 코드 리뷰 & 문제 탐지 최강
클로드: 깃 자동화, 외부 도구 활용 강점
👉 워크플로우:
1. GPT-5로 분석 & 개선 포인트 도출
2. 결과 PDF → 클로드에 전달
3. 클로드가 자동 수정 + 깃허브 싱크

✅ 따라할 때 체크리스트

GitHub 계정/저장소 생성 & 토큰 발급
claude_config.md 작성 (토큰+저장소 URL)
클로드에게 “코드 자동 푸시” 지시
GPT-5에 GitHub 저장소 연결 후 Deep Research 실행
GPT-5 결과 → 클로드에 전달해 수정 & 자동 커밋
반복하며 프로젝트 점진적으로 고도화

🚀 Claude + GPT‑5 Vibe Coding Starter Template

이 템플릿은 **클로드(Claude Code)**의 자동 깃 관리 + GPT‑5(Deep Research/Agent) 분석/리뷰를 결합해서,
“코딩 ↔ 분석 ↔ 자동커밋/푸시” 루프를 바로 돌릴 수 있게 만들어졌습니다.

아래의 프로젝트 구조, 파일 내용을 그대로 복붙해 시작하거나, zip으로 묶어 사용하세요.

📁 Project Structure

my-vibe-project/
├─ README.md
├─ .gitignore
├─ prompts/
│  ├─ claude_system_prompt.md
│  └─ gpt5_deep_research_prompt.md
├─ config/
│  └─ claude_config.md
├─ scripts/
│  ├─ git-init.sh
│  └─ git-restore-checkpoint.sh
└─ web/
   └─ airplane_game/
      ├─ index.html
      ├─ style.css
      └─ script.js

🚀 Claude + GPT-5 Vibe Coding Starter Template

실제로 따라하면서 사용할 수 있는 스타터 템플릿입니다. 그대로 복사해서 쓰시면 돼요.

1. `claude_config.md`

# Claude 설정 파일

GITHUB_TOKEN=여기에_발급한_퍼스널_액세스_토큰
GITHUB_REPO=https://github.com/내아이디/my-vibe-project.git

# Git 자동화 규칙
- 코드 변경 감지 시 자동 commit
- commit 메시지: [auto] 파일명/작업내용
- 주기적으로 push

2. Git 자동화 프롬프트 (Claude에게)

프로젝트 코드를 GitHub에 자동으로 반영해줘.
- git init → commit → push 순서로 실행
- 코드 변경이 생기면 자동 커밋 메시지 남기고 푸시해줘
- 최근 10개 커밋 이력 조회 및 특정 커밋으로 되돌릴 수 있도록 도와줘

3. GPT-5 분석 프롬프트

내 GitHub 저장소 코드를 분석해줘.
- 심각도 순위별 버그와 보안 취약점 찾아줘
- 리팩터링 포인트 추천해줘
- 결과를 PDF로 정리해줘 (한글로)

4. 자동 커밋 스크립트 (선택)

auto_commit.sh

#!/bin/bash

git add .
git commit -m "[auto] $(date '+%Y-%m-%d %H:%M:%S')"
git push origin main

실행 권한 주기:

chmod +x auto_commit.sh

5. 샘플 프로젝트 (HTML 미니 게임)

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>비행기 게임</title>
  <style>
    body { margin:0; overflow:hidden; background:#87ceeb; }
    canvas { display:block; margin:0 auto; background:#cce7ff; }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    let plane = { x:100, y:300, w:40, h:40, speed:5 };
    let keys = {};

    document.addEventListener("keydown", e => keys[e.key] = true);
    document.addEventListener("keyup", e => keys[e.key] = false);

    function update(){
      if(keys["ArrowUp"]) plane.y -= plane.speed;
      if(keys["ArrowDown"]) plane.y += plane.speed;
      if(keys["ArrowLeft"]) plane.x -= plane.speed;
      if(keys["ArrowRight"]) plane.x += plane.speed;
    }

    function draw(){
      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.fillStyle = "red";
      ctx.fillRect(plane.x, plane.y, plane.w, plane.h);
    }

    function loop(){
      update();
      draw();
      requestAnimationFrame(loop);
    }
    loop();
  </script>
</body>
</html>

'생성형 AI 활용하기' 카테고리의 다른 글

Claude Code와 Playwright MCP로 AI 디자이너 만들기 (3)	2025.08.27
2025년 8월- AWS Kiro 현재 상황 및 사용법·가격 정리 (0)	2025.08.22
GitHub MCP Server 실무 활용 기능 3가지 (2)	2025.07.25
GitHub MCP Server - 설치 방법과 기본 기능 (4)	2025.07.25
AI를 활용한 실무 AI SaaS 개발 방법 - Cursor AI + Gemini CLI + AWS (0)	2025.07.22

Data Vision

[최신] Claude Code + GPT5 를 조합해서 Vibe Coding 하는 방법

🚀 클로드 + GPT-5 조합, 따라하는 방법

1. 깃허브(GitHub) 준비

2. 클로드 코드 설정

3. 깃 관리 자동화하기 (체크포인트)

4. GPT-5 Deep Research로 코드 분석

5. GPT-5 에이전트로 바이브 코딩

실습 아이디어

6. 리뷰 & 협업 루프

✅ 따라할 때 체크리스트

🚀 Claude + GPT‑5 Vibe Coding Starter Template

📁 Project Structure

🚀 Claude + GPT-5 Vibe Coding Starter Template

1. `claude_config.md`

2. Git 자동화 프롬프트 (Claude에게)

3. GPT-5 분석 프롬프트

4. 자동 커밋 스크립트 (선택)

5. 샘플 프로젝트 (HTML 미니 게임)

'생성형 AI 활용하기' 카테고리의 다른 글

티스토리툴바

[최신] Claude Code + GPT5 를 조합해서 Vibe Coding 하는 방법

🚀 클로드 + GPT-5 조합, 따라하는 방법

1. 깃허브(GitHub) 준비

2. 클로드 코드 설정

3. 깃 관리 자동화하기 (체크포인트)

4. GPT-5 Deep Research로 코드 분석

5. GPT-5 에이전트로 바이브 코딩

실습 아이디어

6. 리뷰 & 협업 루프

✅ 따라할 때 체크리스트

🚀 Claude + GPT‑5 Vibe Coding Starter Template

📁 Project Structure

🚀 Claude + GPT-5 Vibe Coding Starter Template

1. claude_config.md

2. Git 자동화 프롬프트 (Claude에게)

3. GPT-5 분석 프롬프트

4. 자동 커밋 스크립트 (선택)

5. 샘플 프로젝트 (HTML 미니 게임)

'생성형 AI 활용하기' 카테고리의 다른 글

'생성형 AI 활용하기' Related Articles

티스토리툴바

1. `claude_config.md`