Conductor 플러그인으로 앱 계획 및 빌드

1. 소개

이 Codelab에서는 Conductor 플러그인으로 소프트웨어 애플리케이션을 계획하고 빌드하는 방법을 알아봅니다. Conductor는 Google에서 빌드한 오픈소스 플러그인으로, 계획 및 구현 추적과 같은 사양 기반 개발 기능을 지원합니다. 먼저 '그린필드' 애플리케이션을 처음부터 완전히 빌드합니다. 그런 다음 '브라운필드' 프로젝트로 취급하여 인증 및 스토리지를 추가하기 위해 반복합니다.

실습할 내용

  • Antigravity CLI 또는 Claude Code에 Conductor 플러그인 설치
  • Conductor의 계획 및 구현 기능을 사용하여 처음부터 'Picker Wheel' 웹 앱 빌드
  • Firebase 를 사용하여 인증 및 스토리지를 추가하여 애플리케이션에 맞춤설정 추가

학습할 내용

  • Conductor 플러그인을 사용하여 '그린필드' 애플리케이션을 계획, 구현, 검토하는 방법
  • Conductor 플러그인을 사용하여 '브라운필드' 애플리케이션에 기능을 추가하는 방법

필요한 항목

2. 시작하기 전에

Google Cloud 프로젝트 만들기

  1. Google Cloud 콘솔의 프로젝트 선택기 페이지에서 Google Cloud 프로젝트를 선택하거나 만듭니다.
  2. Cloud 프로젝트에 결제가 사용 설정되어 있는지 확인합니다. 프로젝트에 결제가 사용 설정되어 있는지 확인하는 방법을 알아보세요.

Cloud Shell 시작

Cloud Shell 은 Google Cloud에서 실행되며 필요한 도구가 사전 로드된 명령줄 환경입니다.

  1. Google Cloud 콘솔 상단에서 Cloud Shell 활성화 를 클릭합니다.
  2. Cloud Shell에 연결되면 인증을 확인합니다.
    gcloud auth list
  3. 프로젝트가 구성되었는지 확인합니다.
    gcloud config get project
  4. 프로젝트가 예상대로 설정되지 않은 경우 설정합니다.
    export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

API 사용 설정

Google Cloud 프로젝트에서 Firebase Management API를 사용 설정합니다.

gcloud services enable firebase.googleapis.com

프로젝트에 Firebase 추가

Firebase CLI는 Cloud Shell에 사전 설치된 상태로 제공됩니다. Cloud Shell에서 Google Cloud 프로젝트에 액세스할 수 있는 동일한 Google 계정으로 로그인합니다. 로컬에서 작업하는 경우 안내에 따라 Firebase CLI를 설치합니다.

firebase login

다음 명령어를 실행하여 Google Cloud 프로젝트에 Firebase를 추가합니다.

firebase projects:addfirebase

firebase CLI를 처음 실행하는 경우 표시되는 질문에 답변합니다.

Cloud Shell 종료

Cloud Shell 창을 닫아도 됩니다. 다음 섹션에서는 로컬 환경을 구성합니다.

3. CLI 코딩 에이전트 설치 및 인증

이 단계에서는 Google Cloud 사용자 인증 정보를 사용하여 로컬 코드 편집기에 Antigravity CLI 또는 Claude Code를 설치하고 인증하여 로컬 개발 환경 을 준비합니다.

Antigravity CLI 설치 및 인증

  1. 최신 버전의 Antigravity CLI를 설치합니다.
    # MacOS and Linux
curl -fsSL https://antigravity.google/cli/install.sh | bash

# Windows Powershell
irm https://antigravity.google/cli/install.ps1 | iex

# Windows CMD
curl -fsSL https://antigravity.google/cli/install.cmd -o install.cmd && install.cmd && del install.cmd
  2. agy가 PATH에 추가되도록 터미널을 다시 시작합니다.
  3. 설치에 최신 버전이 설치되어 있는지 확인합니다.
    agy --version
  4. Google Cloud 사용자 인증 정보를 사용하여 인증 합니다.
    • Antigravity CLI를 시작합니다.
      agy
    • 로그인 방법 선택 메시지가 표시되면 Google Cloud 프로젝트 사용을 선택합니다. 웹브라우저에서 보안 승인 URL을 엽니다. 승인된 사용자 인증 정보로 로그인하고 인증을 완료합니다. 브라우저에 고유한 영숫자 승인 코드가 표시됩니다. 이 코드를 복사하고 터미널로 돌아가서 프롬프트에 붙여넣습니다.
  5. 계속하기 전에 CLI 터미널에서 /exit를 입력하여 실행 중인 Antigravity CLI 세션을 종료하고 Antigravity CLI를 종료합니다.

Claude Code 설치 및 인증

또는 Conductor 플러그인을 Claude Code와 함께 사용할 수 있습니다. 여기서는 Google Cloud 사용자 인증 정보를 사용하여 Claude Code를 설치하고 인증합니다.

  1. 최신 버전의 Claude Code를 설치합니다.
  2. Google Cloud 사용자 인증 정보를 사용하여 인증 합니다.
    • Claude Code를 시작합니다.
      claude
    • /login을 입력하여 로그인 방법을 선택합니다. 서드 파티 플랫폼 · Amazon Bedrock, Microsoft Foundry 또는 Vertex AI 및 Google Vertex AI 옵션을 선택합니다. Google Vertex AI를 설정하려면 애플리케이션 기본 사용자 인증 정보 (Google 인증)를 선택하고 메시지가 표시되면 설정을 완료합니다.
  3. Claude Code를 다시 시작합니다.

4. Conductor 플러그인 설치

Conductor는 Google에서 빌드한 오픈소스 플러그인으로, 계획 및 구현 추적과 같은 사양 기반 개발 기능을 지원합니다.

Antigravity CLI에 설치

  1. 플러그인을 설치합니다:
    • Antigravity CLI 
      agy plugins install https://github.com/gemini-cli-extensions/conductor
  2. 설치를 확인합니다:
    • Antigravity CLI를 시작합니다.
      agy
    • /conductor를 입력하면 /conductor:conductor-setup, /conductor:conductor-new-track, conductor:conductor-implement 등의 명령어 목록이 표시됩니다.
  3. 계속하기 전에 터미널에서 /exit를 입력하여 실행 중인 CLI 세션을 종료하고 CLI를 종료합니다.

Claude Code에 설치

  1. 마켓플레이스 저장소를 등록하고 Claude Code 세션에서 직접 Conductor 플러그인을 설치합니다.
    /plugin marketplace add gemini-cli-extensions/conductor
/plugin install conductor
/reload-plugin
  2. 설치를 확인합니다.
    • /conductor를 입력하면 /conductor-setup, conductor-new-track, conductor-implement 등의 명령어 목록이 표시됩니다.
  3. 계속하기 전에 Claude Code 터미널에서 /exit를 입력하여 실행 중인 CLI 세션을 종료하고 CLI를 종료합니다.

5. 그린필드 개발: Picker Wheel

이제 환경이 설정되었으므로 처음부터 새 애플리케이션을 빌드합니다. 무작위 옵션을 선택하기 위해 회전하는 경량 웹 앱인 'Picker Wheel'을 만듭니다.

제품 컨텍스트 설정

  1. 새 프로젝트 디렉터리를 만들고 해당 디렉터리로 변경합니다.이제 picker-wheel 디렉터리의 프로젝트에서 작업합니다. 이 디렉터리를 만들고 해당 디렉터리로 변경합니다.
    mkdir picker-wheel
cd picker-wheel
  2. Antigravity CLI를 시작합니다.Antigravity CLI 또는 Claude Code를 사용하여 프로젝트 디렉터리에서 새 CLI 세션을 시작합니다.
    # Antigravity CLI
agy

# Claude Code
claude
    • '이 폴더의 파일을 신뢰하시겠습니까?'라는 메시지가 표시되면 폴더 신뢰 (picker-wheel) 를 선택합니다.
  3. Conductor를 초기화합니다.설정 명령어를 실행하여 프로젝트를 스캐폴딩하고 Conductor 환경을 설정합니다.
    # Antigravity CLI
/conductor:conductor-setup

# Claude Code
/conductor-setup
  4. 대화형 프롬프트를 따릅니다.표시되는 대화형 프롬프트는 이러한 예와 정확히 일치하지 않습니다. Conductor 워크플로에 익숙해지도록 더 간단한 디자인에 집중합니다.
    • 제품 목표: 목록에서 무작위 항목을 선택하기 위해 구성 가능한 회전 휠을 표시하는 웹 애플리케이션입니다.
      • 타겟 잠재고객 → 일반 대중
      • 상호작용 → 탭/클릭하여 회전
      • 맞춤설정 → 기본
      • 플랫폼 → 데스크톱 우선
    • 제품 가이드라인: 자동 생성
    • 기술 스택:
      • 언어 → TypeScript/JavaScript - 풀 스택 웹에 적합
      • 프런트엔드 → Vue.js - 직관적인 웹 인터페이스
      • 백엔드 → Express.js - 빠른 노드 백엔드
      • 데이터베이스 → 없음 - 데이터베이스가 필요하지 않음
    • 워크플로: 표준
    • 제품 요구사항:
      • 사용자 스토리 → 맞춤설정 가능한 옵션, 명확한 우승자 표시
      • 주요 기능 → 수정 가능한 옵션 목록, 무작위 색상
      • 제약 조건 → 클라이언트 측 전용, 고성능
      • 비기능 → 높은 테스트 범위, TypeScript 및 Vue.js, 반응형 디자인
    Conductor는 conductor/ 디렉터리에 컨텍스트 파일을 생성합니다.

새 트랙 만들기

Conductor의 '트랙'은 기능 또는 작업 단위를 나타냅니다.

  1. /conductor-new-rack을 사용하여 새 트랙을 시작합니다.Conductor는 제품 컨텍스트를 기반으로 초기 트랙을 제안할 수 있습니다. 또는 직접 제안하거나 Conductor에 트랙을 제안하도록 요청할 수 있습니다.
  2. 생성된 계획을 검토합니다.Conductor는 conductor/tracks/{track-id}/ 내에 index.md, spec.md, plan.md를 생성합니다. 잠시 시간을 내어 읽어보세요. 문제가 없으면 Conductor에서 초기 설정 파일을 저장하고 커밋하라는 메시지를 표시합니다.

트랙 구현

  1. 구현을 시작합니다.
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
    이제 Conductor가 계획을 통해 프로젝트의 코드를 작성합니다.
  2. 애플리케이션을 확인합니다.구현 단계 전반에 걸쳐 Conductor는 애플리케이션을 수동으로 테스트하라는 메시지를 표시합니다. 예를 들어 로컬 웹 서버를 열고 브라우저에서 애플리케이션을 미리 보고 변경사항을 확인하라는 메시지가 표시됩니다. 구현이 완료되면 작동하는 Picker Wheel이 표시됩니다.Picker Wheel 애플리케이션
  3. 구현을 검토합니다.마지막 단계로 Conductor에 구현을 검토하도록 요청할 수 있습니다. 소스 코드를 검토하고 프로젝트 문서를 동기화하고 트랙을 보관해야 합니다.
    # Antigravity CLI
/conductor:conductor-review

# Claude Code
/conductor-review

6. 브라운필드 반복: 맞춤설정 추가

이제 '브라운필드' 개발로 전환합니다. 로그인한 사용자가 Picker Wheel 구성을 저장하고 복원할 수 있도록 이전 섹션의 Picker Wheel 웹 애플리케이션을 개선합니다.

맞춤설정 트랙 만들기

  1. 다음 '브라운필드' 예에서는 인증 및 스토리지에 Firebase를 사용합니다. Conductor에서 사용할 수 있도록 Firebase 스킬을 설치합니다.
  2. CLI 에이전트를 시작합니다.새 CLI 세션을 시작합니다.
    # Antigravity CLI
/new

# Claude Code
/new
  3. 새 트랙을 시작합니다.새 트랙을 시작합니다.
    # Antigravity CLI
/conductor:conductor-new-track "I want users to be able to log in to their
accounts and save their picker wheel configurations."

# Claude Code
/conductor-new-track "I want users to be able to log in to their accounts
and save their picker wheel configurations."
  4. 대화형 프롬프트를 따릅니다.표시되는 대화형 프롬프트는 이러한 예와 정확히 일치하지 않습니다. Conductor 워크플로에 익숙해지도록 더 간단한 디자인에 집중합니다.
    • 트랙 목표:
      • 인증 제공업체 → Firebase 인증
      • 저장된 구성 → 휠 옵션
      • 데이터 스토리지 → Firestore
      • Firestore 로그인 UI → 모달 오버레이
    Conductor는 conductor/tracks/{track-id} 내에 새 트랙의 컨텍스트 파일을 생성합니다.
  5. 생성된 계획을 검토합니다.잠시 시간을 내어 conductor/tracks/{track-id}/ 내에 index.md, spec.md, plan.md를 읽어보세요.
  6. 구현합니다.문제가 없으면 구현을 시작할 수 있습니다.
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
  7. 확인합니다.애플리케이션을 다시 로드합니다. 업데이트된 애플리케이션이 표시됩니다. 로그인 기능이 있는 선택 도구 휠

다음은 골든 코드 참조 구현입니다. 애플리케이션을 올바르게 시작하려면 .firebaserc에 Firebase 프로젝트를 제공하고 Firebase 구성을 firebase.ts에 제공해야 합니다.

7. 정리

Google Cloud 계정에 비용이 계속 청구되지 않도록 하려면 이 Codelab 중에 생성된 리소스를 삭제합니다.

Firebase 프로젝트 및 Google Cloud 프로젝트 삭제

정리하는 가장 쉬운 방법은 프로젝트를 완전히 삭제하는 것입니다.

  1. Google Cloud 콘솔에서 만든 프로젝트를 선택합니다.
  2. 삭제 를 클릭합니다.

또는 프로젝트를 유지하되 리소스를 삭제하려면 다음 단계를 따르세요.

  1. Firestore 데이터베이스 삭제: Firebase Console > Firestore 로 이동하여 데이터베이스를 삭제합니다.
  2. 인증 삭제: Firebase Console > 인증로그인 방법으로 이동하여 Google을 사용 중지합니다.

8. 축하합니다

축하합니다. 선택한 코딩 에이전트 (Antigravity CLI 또는 Claude Code)에서 Conductor 플러그인을 사용하여 처음부터 웹 애플리케이션을 빌드한 다음 인증 및 데이터베이스 통합과 같은 복잡한 기능으로 반복했습니다.

다음 단계