Gemini CLI Conductor로 앱 계획 및 빌드

1. 소개

이 Codelab에서는 Gemini CLI Conductor 확장 프로그램을 사용하여 소프트웨어 애플리케이션을 계획하고 빌드하는 방법을 알아봅니다. 처음부터 완전히 '그린필드' 애플리케이션을 빌드하는 것으로 시작합니다. 그런 다음 '브라운필드' 프로젝트로 취급하여 인증 및 스토리지를 추가하기 위해 반복합니다.

실습할 내용

Gemini CLI 및 Conductor 확장 프로그램 설치
Conductor의 계획 및 구현 기능을 사용하여 처음부터 '선택기 휠' 웹 앱 빌드
Firebase를 사용하여 인증 및 스토리지를 추가하여 애플리케이션에 맞춤설정 추가

학습할 내용

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

필요한 항목

웹브라우저(예: Chrome)
결제가 사용 설정된 Google Cloud 프로젝트
Node.js 설치 (버전 18 이상 권장)
Visual Studio Code와 같은 로컬 코드 편집기

2. 시작하기 전에

Google Cloud 프로젝트 만들기

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

Cloud Shell 시작

Cloud Shell은 Google Cloud에서 실행되는 명령줄 환경으로, 필요한 도구가 미리 로드되어 제공됩니다.

Google Cloud 콘솔 상단에서 Cloud Shell 활성화를 클릭합니다.
Cloud Shell에 연결되면 인증을 확인합니다.
```
gcloud auth list
```
프로젝트가 구성되었는지 확인합니다.
```
gcloud config get project
```

프로젝트가 예상대로 설정되지 않은 경우 설정합니다.

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. Gemini CLI 및 Conductor 로컬 설치

이 단계에서는 로컬 코드 편집기와 터미널을 사용하여 Gemini CLI와 Conductor 확장 프로그램을 설치하여 로컬 개발 환경을 준비합니다.

Gemini CLI 설치

npm을 사용하여 최신 버전의 Gemini CLI를 전역으로 설치합니다.
```
npm install -g @google/gemini-cli
```
권한 오류가 표시되면 nvm와 같은 버전 관리자를 사용하거나 sudo을 사용하여 루트로 이 명령어를 실행해야 할 수 있습니다.
gemini이 PATH에 추가되도록 터미널을 다시 시작합니다.
설치 확인을 통해 최신 버전이 설치되었는지 확인합니다.
```
gemini --version
```
새 프로젝트 디렉터리 만들기 및 변경: 나중에 picker-wheel 디렉터리에 프로젝트를 만듭니다. 지금 해당 디렉터리를 만들고 이 디렉터리로 변경합니다.
```
mkdir picker-wheel
cd picker-wheel
```
인증:
- Gemini CLI를 시작합니다.
```
gemini
```
- '이 폴더의 파일을 신뢰하시겠습니까?'라는 메시지가 표시되면 폴더 신뢰 (선택기 휠)을 선택합니다.
- '이 프로젝트를 인증하려면 어떻게 하시겠어요?'라는 메시지가 표시되면 Vertex AI를 선택합니다. 인증 가이드에 따라 Google Cloud API 키를 가져오고 GOOGLE_API_KEY 환경 변수를 설정합니다. 잠시 시간을 내어 다양한 사용 등급과 해당 API 비율 제한을 살펴보세요.
Gemini CLI 종료: 계속하기 전에 CLI 터미널에서 /quit를 입력하여 실시간 Gemini CLI 세션을 종료합니다.

Conductor 확장 프로그램 설치

Conductor는 Google에서 빌드한 오픈소스 Gemini CLI 확장 프로그램으로, 계획 및 구현 추적과 같은 컨텍스트 기반 개발 기능을 지원합니다.

확장 프로그램 설치:

gemini extensions install https://github.com/gemini-cli-extensions/conductor

설치 확인:
- Gemini CLI를 시작합니다.
```
gemini
```
- /conductor를 입력하면 setup, newTrack, implement 등의 명령어 목록이 표시됩니다.
Gemini CLI 종료: 계속하기 전에 CLI 터미널에서 /quit를 입력하여 실시간 Gemini CLI 세션을 종료합니다.

4. 신규 개발: 선택기 휠

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

제품 컨텍스트 설정

이전 섹션에서 만든 picker-wheel 디렉터리에 있는지 확인합니다.
```
pwd
```
Gemini CLI 시작: 프로젝트 디렉터리에서 새 Gemini CLI 세션을 시작합니다.
```
gemini
```
Conductor 초기화: 설정 명령어를 실행하여 프로젝트를 스캐폴딩하고 Conductor 환경을 설정합니다.
```
/conductor:setup
```
대화형 프롬프트 따르기: 표시되는 대화형 프롬프트는 이 예시와 정확히 일치하지 않습니다. 간단한 디자인에 집중하여 Conductor 워크플로를 숙지하세요.
- 제품 목표: 목록에서 임의의 항목을 선택할 수 있는 구성 가능한 회전판을 표시하는 웹 애플리케이션
  - 타겟층 → 일반 대중
  - 상호작용 → 탭/클릭하여 회전
  - 맞춤설정 → 기본
  - 플랫폼 → 데스크톱 우선
- 제품 가이드라인: 자동 생성
- 기술 스택:
  - 언어 → TypeScript/JavaScript - 풀 스택 웹에 적합
  - 프런트엔드 → Vue.js - 직관적인 웹 인터페이스
  - 백엔드 → Express.js - 빠른 Node 백엔드
  - 데이터베이스 → 없음 - 데이터베이스가 필요하지 않습니다.
- 워크플로: 표준
- 제품 요구사항:
  - 사용자 스토리 → 맞춤설정 가능한 옵션, 명확한 승자 표시
  - 주요 기능 → 수정 가능한 옵션 목록, 무작위 색상
  - 제약 조건 → 클라이언트 측 전용, 고성능
  - 비기능적 → 높은 테스트 범위, TypeScript 및 Vue.js, 반응형 디자인
Conductor는 conductor/ 디렉터리에 컨텍스트 파일을 생성합니다.

새 트랙 만들기

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

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

트랙 구현

구현 시작:
```
/conductor:implement
```
이제 Conductor가 계획을 통해 프로젝트의 코드를 작성합니다.
도움말: 대화형 셸이나 장기 실행 프로세스 (예: 개발 서버 또는 테스트 감시자)에서 멈추지 않으려면 Conductor가 이러한 특정 명령어를 처리하는 방법을 정확히 알고 있어야 합니다. Vite(npm run dev) 및 Vitest(npm run test)와 같은 도구는 기본적으로 'watch mode'(감시 모드)로 실행되므로 프로세스가 무기한으로 열려 있습니다. workflow.md를 업데이트하여 명령어를 실행할 때 Conductor가 감시 모드를 사용 중지하도록 지시하거나 is_background: true를 사용하도록 지시할 수 있습니다.
애플리케이션 확인: 구현 단계 전반에 걸쳐 Conductor에서 애플리케이션을 수동으로 테스트하라는 메시지가 표시됩니다. 예를 들어 로컬 웹 서버를 열고, 브라우저에서 애플리케이션을 미리 보고, 변경사항을 확인하라는 메시지가 표시됩니다. 구현이 완료되면 작동하는 선택기 휠이 표시됩니다.
문제 해결: 생성된 코드가 예상치 못한 방식으로 작동하는 경우 conductor/tracks/.../plan.md에서 건너뛴 단계나 오류를 확인하세요.
구현 검토: 마지막 단계로 Conductor에 구현을 검토해 달라고 요청할 수 있습니다. 소스 코드를 검토하고, 프로젝트 문서를 동기화하고, 트랙을 보관해야 합니다.
```
/conductor:review
```

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

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

개인화 트랙 만들기

다음 '브라운필드' 예에서는 인증 및 스토리지에 Firebase를 사용합니다. Conductor가 사용할 수 있도록 Gemini CLI Firebase 확장 프로그램을 설치합니다.
```
gemini extensions install https://github.com/gemini-cli-extensions/firebase
```
Gemini CLI 시작: 프로젝트 디렉터리에서 새 Gemini CLI 세션을 시작합니다.
```
gemini
```

새 트랙 시작: 새 트랙을 시작합니다.

/conductor:newTrack "I want users to be able to log in to their accounts and
save their picker wheel configurations."

대화형 프롬프트 따르기: 표시되는 대화형 프롬프트는 이 예시와 정확히 일치하지 않습니다. 간단한 디자인에 집중하여 Conductor 워크플로를 숙지하세요.
- 목표 추적:
  - 인증 제공업체 → Firebase 인증
  - 저장된 구성 → 휠 옵션
  - 데이터 스토리지 → Firestore
  - Firestore 로그인 UI → 모달 오버레이
Conductor는 conductor/tracks/{track-id} 내에 새 트랙의 컨텍스트 파일을 생성합니다.
생성된 계획 검토: conductor/tracks/{track-id}/ 내에서 index.md, spec.md, plan.md을 읽어 보세요.
도움말: 구현으로 넘어가기 전에 Gemini와 대화하여 계획을 최대한 이해하고 논의하는 것이 좋습니다.
구현: 문제가 없으면 구현을 시작할 수 있습니다.
```
/conductor:implement
```
확인: 애플리케이션을 새로고침합니다. 업데이트된 애플리케이션이 표시됩니다.
AI가 인증 구현 테스트에서 멈추는 경우 Firebase Console의 인증 > 로그인 방법에서 Google 로그인을 사용 설정해야 합니다.

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

6. 삭제

Google Cloud 계정에 지속적으로 요금이 청구되지 않도록 하려면 이 Codelab 중에 생성된 리소스를 삭제하세요.

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

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

Google Cloud 콘솔에서 생성한 프로젝트를 선택합니다.
삭제를 클릭합니다.

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

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

7. 축하합니다

축하합니다. Gemini CLI Conductor 확장 프로그램을 사용하여 처음부터 웹 애플리케이션을 빌드한 다음 인증 및 데이터베이스 통합과 같은 복잡한 기능을 사용하여 반복했습니다.

다음 단계

Gemini CLI 계획 모드를 사용하여 간단한 계획 세우기
Gemini CLI 확장 프로그램 자세히 알아보기