Vibe Coding & AI Agent

ProjectHub에는 두 개의 AI 코딩 탭이 있습니다. 목적과 사용법이 다르므로 올바르게 구분하여 사용하세요.

두 탭 비교

항목Vibe CodingAI Agent
아이콘✨ (Sparkles)🪄 (Wand)
방식대화형 — AI CLI와 실시간 대화자율형 — 7단계 파이프라인 자동 실행
사용자 개입매 턴마다 직접 지시처음 한 번 요청, 이후 자동
터미널xterm.js 분할 터미널워크플로우 다이어그램 + 로그 뷰
적합한 작업코드 리뷰, 디버깅, 리팩토링, Q&A새 프로젝트 생성, 완전한 기능 구현
AI 엔진Claude, Gemini, Opencode, ShellClaude, Gemini

Part 1: Vibe Coding (대화형 AI 터미널)

Vibe Coding 탭은 AI CLI와 실시간으로 대화하며 코딩하는 인터랙티브 터미널입니다. Claude Code, Gemini CLI, Opencode 등의 AI 도구를 내장 터미널에서 직접 사용합니다.

Vibe Coding 탭 전체 레이아웃

AI 도구 선택

각 터미널 패널 상단에서 AI 도구를 선택합니다:

도구설명필요 조건
ClaudeAnthropic Claude Code CLIclaude 명령어 설치
GeminiGoogle Gemini CLIgemini 명령어 설치
Opencode오픈소스 AI CLIopencode 명령어 설치
ShellAI 없이 직접 명령어 실행없음

분할 터미널

두 개의 터미널 패널을 동시에 사용할 수 있습니다:

  • 좌우 분할 또는 상하 분할 선택 가능
  • 각 패널에서 서로 다른 AI 도구를 선택 가능 (예: 왼쪽 Claude, 오른쪽 Gemini)
  • 드래그로 분할 비율 조절 (최소 20%, 최대 80%)
분할 터미널 — 왼쪽 Claude, 오른쪽 Gemini

사이드바 탭

Vibe Coding 사이드바 탭

명령어 (Commands)

각 AI 도구에 맞는 빠른 명령어를 버튼으로 실행할 수 있습니다:

Claude 명령어:

명령어설명
/help도움말 표시
/clear대화 초기화
/compact컨텍스트 압축
/bug버그 리포트
/config설정 확인
Gemini 명령어:
명령어설명
/help도움말 표시
/clear대화 초기화
/chat채팅 모드
/tools도구 확인

파일 변경 (Changed Files)

AI가 변경한 파일을 실시간으로 추적합니다:

파일 변경 트래커
표시색상의미
Added초록새로 생성된 파일
Modified주황수정된 파일
Deleted빨강삭제된 파일
  • 5초마다 자동 갱신
  • 최대 50개 파일 표시
  • node_modules, .git 등 빌드 디렉토리 자동 제외

세션 (Sessions)

이전 AI 세션 기록을 탐색할 수 있습니다:

세션 브라우저
  • Claude/Gemini CLI의 세션 히스토리 자동 검색
  • 세션 ID, 타임스탬프, 첫 메시지 미리보기
  • 최대 20개 최근 세션 표시
  • 세션 클릭으로 이전 대화 이어가기

Part 2: AI Agent (자율 파이프라인)

AI Agent 탭은 한 줄 요청으로 7단계 자율 파이프라인을 실행하는 자동화 시스템입니다. 프롬프트를 입력하면 리서치부터 보고서까지 AI가 자동으로 처리합니다.

AI Agent 탭 전체 레이아웃
AI Agent 실행 확인 다이얼로그

7단계 파이프라인

사용자 입력 → Research → Architect → Test Designer → Coder → Self-Healing → Vision Gate → Report

각 단계가 순차적으로 실행되며, 워크플로우 다이어그램에서 실시간으로 진행 상황을 확인할 수 있습니다. AI CLI(Claude 또는 Gemini)가 모든 파일 작업을 직접 수행하며, Python 코드는 흐름 제어와 완료 마커 감지만 담당합니다.

1단계: Research (리서치)

AI가 사용자의 요청을 분석하고, 기존 프로젝트 컨텍스트를 조사합니다:

  • 사용자 요청에서 핵심 요구사항과 제약 조건 추출
  • 기존 프로젝트 파일 및 코드 패턴 분석
  • 최적의 프로그래밍 언어와 프레임워크 추천
  • .projecthub/ai-agent/docs/RESEARCH.md 생성
완료 마커: RESEARCH_COMPLETE: recommended_language=, complexity=

2단계: Architect (설계)

리서치 결과를 바탕으로 프로젝트 설계 문서를 자동 생성합니다:

문서설명저장 위치
PRD.md제품 요구사항 문서.projecthub/ai-agent/docs/
FILE_STRUCTURE.md파일 및 디렉토리 구조.projecthub/ai-agent/docs/
Architect 단계 실행 중

완료 마커: ARCHITECT_COMPLETE: language=, main_file=

3단계: Test Designer (테스트 설계)

TDD(테스트 주도 개발) 방식으로 코드 작성 전에 테스트를 먼저 생성합니다:

  • 유닛 테스트 파일 생성
  • 테스트 케이스 설계 (정상, 엣지 케이스, 에러 케이스)
  • 테스트 프레임워크 자동 선택 (pytest, Jest, Go test 등)
완료 마커: TEST_DESIGN_COMPLETE: test_file=, test_count=

TDD 방식이므로 이 시점에서 테스트는 실패합니다. 다음 단계에서 코드를 작성하면 테스트가 통과됩니다.

4단계: Coder (코드 생성)

PRD와 테스트를 기반으로 실제 코드를 생성합니다:

  • 다중 파일 생성 지원
  • 프로젝트 설정 파일 자동 생성 (package.json, Cargo.toml 등)
  • 의존성 설치 명령어 포함
완료 마커: CODER_COMPLETE: files_created=,

5단계: Self-Healing (자가 수정)

코드 생성 후 AI CLI가 자율적으로 린트와 테스트를 실행하고, 오류가 발견되면 직접 수정합니다:

  1. 소스 파일의 문법 오류 확인
  2. 린터 실행 → 오류 발견 시 직접 파일 수정
  3. 테스트 실행 → 실패 시 코드 수정 후 재실행
  4. 모든 린트/테스트 통과할 때까지 반복
  • 최대 5회 반복 수정 시도 (기본값)
  • Self-Healing 단계는 2배 타임아웃 적용
지원 린터 및 컴파일러:
도구언어
ruff, pylint, flake8, mypyPython
ESLint, tscJavaScript/TypeScript
cargo check, clippyRust
go build, go vetGo
javacJava
swiftcSwift
g++, clang++C++
gcc, clangC
dotnet buildC#
kotlincKotlin
Semgrep보안 스캔 (전 언어)
완료 마커: SELF_HEALING_COMPLETE: status=, attempts=

6단계: Vision Gate (시각적 검증)

UI가 있는 프로젝트(웹, 데스크톱 앱)의 경우, 스크린샷을 캡처하고 AI가 UI 품질을 평가합니다:

  • 자동 서버 시작 및 브라우저 스크린샷 캡처
  • AI가 UI 레이아웃, 접근성, 디자인 품질 평가
  • UI 이슈 발견 시 AI가 직접 수정
  • 점수 기반 통과/실패 판정
완료 마커: VISION_COMPLETE: status=, score=

Vision Gate는 Playwright가 설치되어 있어야 합니다: pip install playwright && playwright install

7단계: Report (보고서)

모든 단계가 완료되면 README.md를 자동 생성합니다:

  • 프로젝트 설명
  • 설치 방법
  • 사용법
  • 파일 구조
  • 기술 스택
완료 마커: REPORT_COMPLETE: file=README.md

AI Agent UI

설정 패널 (왼쪽)

AI Agent 설정 패널
  • AI 백엔드 선택: Claude / Gemini 토글
  • 제목 입력: 프로젝트 이름
  • 프롬프트 입력: 자연어 요청 (첨부 파일 지원)
  • 타임아웃 설정: 10분 / 30분 / 1시간 / 무제한
  • 실행/취소 버튼

워크플로우 다이어그램 (오른쪽 상단)

워크플로우 다이어그램
  • 7단계의 실시간 상태 표시 (대기/진행중/성공/실패/건너뜀)
  • 활성 단계에 애니메이션 표시
  • 단계 간 화살표로 진행 흐름 시각화

실행 로그 (오른쪽 하단)

실행 로그 영역
  • 실시간 모노스페이스 로그 출력
  • 색상 구분: ✅ 성공, ❌ 에러, ⚠️ 경고, 🔷 단계, 🤖 에이전트
  • 텍스트 선택 및 복사 가능

실행 히스토리

히스토리 탭
  • 이전 실행 기록 (성공/실패, 소요 시간, 백엔드)
  • 재실행 및 출력 폴더 열기 지원

지원 언어

AI Agent는 AI CLI(Claude, Gemini)가 지원하는 모든 프로그래밍 언어에서 동작합니다. 특히 아래 언어들은 프로젝트 설정 파일과 린터/컴파일러를 자동으로 구성합니다:

언어프로젝트 설정테스트 프레임워크린터/컴파일러
Pythonrequirements.txt, pyproject.tomlpytestruff, pylint, flake8, mypy
RustCargo.tomlcargo testcargo check, clippy
Gogo.modgo testgo build, go vet
JavaScriptpackage.jsonJestESLint
TypeScriptpackage.json, tsconfig.jsonJest/VitestESLint, tsc
Javapom.xmlJUnitjavac
SwiftPackage.swiftXCTestswiftc
C++CMakeLists.txtGoogle Testg++, clang++
CMakefile—gcc, clang
C#.csproj—dotnet build
Kotlinbuild.gradle.kts—kotlinc

프롬프트 작성 팁

좋은 프롬프트 예시

Python으로 REST API 서버를 만들어줘.

  • FastAPI 프레임워크 사용
  • SQLite 데이터베이스
  • 사용자 CRUD API (생성, 조회, 수정, 삭제)
  • JWT 인증
  • Swagger 문서 자동 생성

나쁜 프롬프트 예시

앱 만들어줘

팁

  • 구체적인 기술 스택을 명시하세요 (프레임워크, 라이브러리)
  • 기능 목록을 나열하세요
  • 언어를 지정하세요 (자동 감지되지만 명시가 정확)
  • 복잡한 프로젝트는 단계별로 나누어 요청하세요
  • 한국어와 영어 모두 지원됩니다

출력 파일 구조

AI Agent의 모든 출력물은 프로젝트 디렉토리에 저장됩니다:

{프로젝트}/
├── .projecthub/
│   └── ai-agent/
│       ├── docs/
│       │   ├── RESEARCH.md          # 리서치 결과
│       │   ├── PRD.md               # 요구사항 문서
│       │   ├── FILE_STRUCTURE.md    # 파일 구조
│       │   └── TEST_PLAN.md         # 테스트 계획
│       ├── logs/
│       │   └── human_gate.json      # 사용자 승인 기록
│       └── screenshots/             # Vision Gate 스크린샷
├── src/                             # AI가 생성한 소스 코드
├── tests/                           # AI가 생성한 테스트 코드
└── README.md                        # 자동 생성된 문서

다음 단계

  • Avalon3 — 여러 AI가 토론하여 더 나은 코드 만들기
  • Colligi — AI 집단지성 분석
  • Alliance — AI 협업 워크플로우
  • 스냅샷 — AI 코드 생성 전 자동 백업