1. 이 실습의 목표
이 실습에서는 Gemini CLI를 설치하고 인증한 후 몇 가지 기본 사용 사례를 시도해 봅니다.
학습할 내용
- Gemini CLI의 기본사항을 이해합니다.
- Gemini CLI로 기본 작업을 수행하는 방법을 알아봅니다.
2. 시작하기 전에
- 사용할 수 있는 프로젝트가 아직 없으면 GCP 콘솔에서 새 프로젝트를 만들어야 합니다.
- 이 실습에서는 GCP Cloud Shell을 사용하여 아래 단계를 수행합니다. Cloud Shell을 열고 Cloud Shell을 사용하여 프로젝트를 설정합니다.
- Cloud Shell 편집기 버튼을 눌러 GCP Cloud Shell 편집기를 엽니다. '셸 승인' 팝업이 표시되면 클릭하여 Cloud Shell 편집기를 승인합니다.
- 다음 명령어를 사용하여 프로젝트가 이미 인증되었는지 확인할 수 있습니다.
gcloud auth list
- Cloud Shell에서 다음 명령어를 실행하여 프로젝트를 확인합니다.
gcloud config list project
- 프로젝트가 설정되지 않은 경우 다음 명령어를 사용하여 설정합니다.
gcloud config set project <YOUR_PROJECT_ID>
- 이 실습을 실행하려면 몇 가지 서비스를 사용 설정해야 합니다. Cloud Shell에서 다음 명령어를 실행합니다.
gcloud services enable aiplatform.googleapis.com
3. 설치 및 인증
설치
Gemini CLI는 GCP Cloud Shell 편집기에 사전 설치되어 있습니다 . 이 기능을 사용하려면 바로 시작하면 됩니다.
로컬 환경에 Gemini CLI를 설치할 수도 있습니다.
로컬 환경에 Gemini CLI를 설치하려면 Nodejs 20 이상이 필요합니다. 다음 명령어를 실행하여 Gemini CLI를 설치할 수 있습니다.
npm install -g @google/gemini-cli
최신 버전으로 업그레이드하려면 다음 명령어를 사용하세요.
npm update -g @google/gemini-cli
터미널에서 다음 명령어를 실행하여 Gemini를 실행합니다.
gemini
인증
GCP Cloud Shell 편집기를 사용하는 경우 실행 중에 셸 인증을 수락했다면 이미 인증된 상태입니다.
로컬에서 실행 중이고 아직 인증하지 않은 경우 아래와 같은 화면이 표시됩니다.
/auth를 입력하여 아래 화면을 표시할 수도 있습니다.
그림 1: Gemini CLI는 인증을 위한 3가지 방법을 제공합니다.
먼저 /quit 명령어로 Gemini CLI를 종료합니다.
Google로 인증: 콘솔에서 /auth를 실행하면 인증 옵션이 표시됩니다. 옵션에서 'Google 계정으로 로그인'을 선택합니다. 그러면 브라우저에 Google 인증 화면이 표시됩니다. 여기에서 로그인을 완료하면 콘솔도 인증됩니다. 인증은 완료되었지만 Gemini CLI를 실제로 사용하려면 Google Cloud 프로젝트를 지정해야 합니다. 콘솔 화면으로 돌아가 다음 명령어를 실행하여 프로젝트를 지정합니다(.env 파일에서 지정할 수도 있음).
export GOOGLE_CLOUD_PROJECT=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
API 키로 인증: API 키로 인증하려면 API 키가 필요합니다. aistudio.google.com에서 API 키를 생성할 수 있습니다 . API 키가 발급되면 콘솔에서 다음과 같이 설정합니다.
export GEMINI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Vertex AI로 인증: Vertex AI를 통해 Gemini API를 사용하려면 다음 단계를 따르세요.
먼저 아래 명령어를 사용하여 Google Cloud에 인증합니다.
gcloud auth application-default login
그런 다음 터미널에서 다음 명령어를 실행합니다.
export GOOGLE_GENAI_USE_VERTEXAI=true export GOOGLE_CLOUD_PROJECT=Your GCP Project Name export GOOGLE_CLOUD_LOCATION=us-central1
4. Gemini CLI 사용해 보기
이제 Gemini CLI를 사용해 볼 수 있습니다. 다음 사용 사례를 시도해 보세요.
먼저 프로젝트 폴더 my_cli_project를 만듭니다.
mkdir my_cli_project cd my_cli_project
프로젝트 폴더에서 Gemini를 실행하면 해당 폴더의 경계 내에서 Gemini CLI를 안전하게 실행할 수 있습니다.
- 간단한 프롬프트 실행:
What is the weather today in Tokyo
그러면 도쿄의 날씨가 표시됩니다. 이를 실행하면 자동으로
GoogleSearch 도구
- 설치된 도구 확인: 다음 명령어를 실행합니다. 설치된 도구 목록이 표시됩니다.
/tools
그림 2: 표시된 도구 목록
- 지역 뉴스 사이트의 뉴스 가져오기: (예: https://mainichi.jp을 현지 뉴스 사이트로 변경하세요.)
Get me the news summary from https://mainichi.jp/
지역 뉴스 사이트에서 뉴스 요약을 확인할 수 있습니다. 에이전트가 WebFetch 도구를 사용하여 뉴스 사이트에서 콘텐츠를 자동으로 다운로드하고 요약을 생성합니다.
- 다단계 작업 실행(현지 사이트로 변경하세요): https://mainichi.jp/ 에서 뉴스를 가져와 스포츠 뉴스만 필터링하고 요약해 줘.
Get me the news from https://mainichi.jp/ and filter in only the sports news and summarize that for me.
- 시스템 명령어 실행 : 시스템 명령어를 실행하려면 !를 누릅니다. 명령어를 입력합니다. 일반 모드로 되돌리려면 !를 입력하세요. 앉습니다
Type ! and Enter key. This starts the command mode. ls pwd Type ! to go back to normal mode.
- 틱택토 게임 만들기 다음 프롬프트를 입력합니다 (영문 버전).
Please develop a Tic-Tac-Toe game that meets the following requirements. The solution should be split into separate HTML, CSS, and JavaScript files, with the JavaScript file handling the majority of the game logic independently.
1. General Requirements
The game format should be a match between one human player and one computer player.
When the game ends (a win/loss is determined, or a draw occurs), display "GAME OVER" on the screen along with the winner's name ("X wins!," "O wins!," or "Draw!").
Provide a "Reset" button to start a new game.
2. HTML (index.html)
Create the basic page structure.
The game board should consist of nine squares (cells). Each cell should be clickable and display the player's mark (X or O).
Provide an element to display the game status (e.g., current player's turn, game result).
Place the reset button for starting a new game.
Link the CSS and JavaScript files appropriately.
3. CSS (style.css)
Style the game board and cells so they are visually clear and easy to understand.
Add borders to the cells to indicate they are clickable areas.
Set appropriate font size and color for the X and O marks to ensure good visibility.
Style the game status display and the "GAME OVER" message to make them stand out.
Consider responsive design to ensure appropriate display on various screen sizes.
4. JavaScript (script.js)
It is strongly requested that the JavaScript file handle all the game logic.
4.1. Game State Management
Define an array or object to manage the game board state (e.g., ['', '', '', '', '', '', '', '', '']).
Define a variable to track the current player (X or O). The initial value should be X.
Define a boolean value to track whether the game has ended (win/loss or draw).
4.2. Game Initialization
Create a function to initialize the game board upon page load.
Clear all cells.
Set the current player to X.
Reset the game end flag.
Clear the game result display.
4.3. Player Interaction
Set up event listeners for cell clicks.
Only place the current player's mark and update the board state if the clicked cell is empty.
After placing the mark, execute the following:
Call the win/draw check function.
If a winner is not yet determined, switch the player (X to O, O to X).
4.4. Computer AI Logic
Create a function that is called when it is the computer's (O) turn.
Implement a simple logic where the computer randomly selects an empty cell to place its mark. (While difficulty can be increased in the future, random selection is sufficient initially.)
After the computer places its mark, perform the win/draw check, and if the game is not over, switch the turn back to the human player.
4.5. Win/Draw Determination
Create a function that determines the win/draw status based on the current board state.
Check the following winning conditions:
Three rows
Three columns
Two diagonals
If a player meets a winning condition, declare that player the winner.
If all cells are filled and no player meets a winning condition, declare a draw.
If a win or draw is determined, set the game end flag to true and display the "GAME OVER" message and the result.
4.6. Game End Handling
When the game ends (win/loss or draw), prevent further clicks on the cells.
Display the text "GAME OVER" followed by the message "X wins!," "O wins!," or "Draw!" underneath it.
4.7. Reset Functionality
When the "Reset" button is clicked, call the function to return the game to its initial state.
다음 프롬프트를 입력합니다 (일본어 버전).
以下の要件を満たす三目並べ（Tic-Tac-Toe）ゲームを開発してください。HTML、CSS、JavaScriptの各ファイルに分割し、JavaScriptはゲームロジックの大部分を単独で処理するようにしてください。
1. 全体要件
プレイヤーは人間1人、コンピューター1人の対戦形式とする。
ゲーム終了時（勝敗が決まった場合、または引き分けの場合）は、画面上に「GAME OVER」と表示し、勝者の名前（「Xの勝利！」「Oの勝利！」または「引き分け！」）も併記すること。
新しいゲームを開始するための「リセット」ボタンを設けること。
2. HTML (index.html)
基本的なページ構造を作成してください。
ゲームボードは、9つのマス目（セル）で構成されるようにしてください。各セルはクリック可能で、プレイヤーのマーク（XまたはO）が表示されるようにします。
ゲームの状態（現在のプレイヤーのターン、ゲーム結果など）を表示する要素を設けてください。
ゲームをリセットするためのボタンを配置してください。
CSSファイルとJavaScriptファイルを適切にリンクしてください。
3. CSS (style.css)
ゲームボードとマス目が視覚的に分かりやすいようにスタイルを設定してください。
マス目には枠線をつけ、クリック可能な領域であることがわかるようにする。
XとOの表示は、見やすいように適切なフォントサイズと色を設定する。
ゲームの状態表示、および「GAME OVER」メッセージが目立つようにスタイルを設定してください。
レスポンシブデザインを考慮し、様々な画面サイズで適切に表示されるようにしてください。
4. JavaScript (script.js)
JavaScriptファイルがゲームロジックの全てを処理することを強く要請します。
4.1. ゲームの状態管理
ゲームボードの状態を管理する配列またはオブジェクト（例: ['', '', '', '', '', '', '', '', '']）を定義してください。
現在のプレイヤー（XまたはO）を追跡する変数を定義してください。初期値はXとする。
ゲームが終了したかどうか（勝敗が決まったか、引き分けか）を追跡するブール値を定義してください。
4.2. ゲームの初期化
ページ読み込み時にゲームボードを初期化する関数を作成してください。
全てのマス目を空にする。
現在のプレイヤーをXに設定する。
ゲーム終了フラグをリセットする。
ゲーム結果表示をクリアする。
4.3. プレイヤーの操作
マス目をクリックした際のイベントリスナーを設定してください。
クリックされたマス目が空の場合のみ、現在のプレイヤーのマークを配置し、ボードの状態を更新する。
マークを配置した後、以下の処理を実行する。
勝敗判定関数を呼び出す。
勝敗が決まっていない場合、プレイヤーを交代する（XからO、OからXへ）。
4.4. コンピューターの思考ロジック
コンピューター（O）が手番の時に呼び出される関数を作成してください。
コンピューターは、空いているマス目の中からランダムに選択してマークを配置するシンプルなロジックを実装してください。（将来的に難易度を上げることも考慮できるが、最初はランダムで十分です）
コンピューターがマークを配置した後、勝敗判定を行い、勝敗が決まっていない場合はプレイヤーを人間に戻す。
4.5. 勝敗判定
現在のボードの状態に基づいて勝敗を判定する関数を作成してください。
以下の勝利条件をチェックする。
3つの行
3つの列
2つの対角線
勝利条件を満たすプレイヤーがいる場合、そのプレイヤーの勝利とする。
全てのマス目が埋まり、かつ勝利条件を満たすプレイヤーがいない場合、引き分けとする。
勝敗または引き分けが決まった場合、ゲーム終了フラグをtrueに設定し、「GAME OVER」メッセージと結果を表示する。
4.6. ゲーム終了時の処理
ゲームが終了した場合（勝敗が決まったか、引き分けか）は、それ以上マス目をクリックできないようにする。
「GAME OVER」というテキストと、その下に「Xの勝利！」「Oの勝利！」または「引き分け！」というメッセージを表示する。
4.7. リセット機能
「リセット」ボタンがクリックされた際に、ゲームを初期状態に戻す関数を呼び出す。
동일한 폴더에서 터미널을 시작하고 http 서버를 시작합니다.
python3 -m http.server 8080
브라우저에서 다음을 엽니다 (Cloud Shell에 있는 경우 Ctrl+클릭).
http://localhost:8080
5. Gemini CLI 확장 프로그램 실행
Gemini CLI는 쉽게 설치하고 실행할 수 있는 매우 유용한 확장 프로그램을 제공합니다. 이러한 확장 프로그램을 사용하면 다양한 서비스에 연결하여 사용할 수 있습니다. https://geminicli.com/extensions/에서 사용 가능한 확장 프로그램 목록을 확인할 수 있으며, 이 목록은 매일 업데이트됩니다. Gemini CLI 확장 프로그램에 대해 자세히 알아보려면 https://medium.com/google-cloud/gemini-cli-tutorial-series-part-11-gemini-cli-extensions-69a6f2abb659 페이지를 참고하세요.
Gemini Nanobanana 확장 프로그램을 설치하고 실행해 보겠습니다.
확장 프로그램을 설치하려면 다음 명령어를 실행합니다.
gemini extensions install https://github.com/gemini-cli-extensions/nanobanana
확장 프로그램이 설치되면 Gemini CLI를 다시 시작하여 Gemini CLI에서 다음 nanobanana 명령어를 실행할 수 있습니다.
/generate- 스타일/변형 옵션을 사용한 단일 또는 다중 이미지 생성/edit- 이미지 수정/restore- 이미지 복원/icon- 다양한 크기의 앱 아이콘, 파비콘, UI 요소 생성/pattern- 배경을 위한 매끄러운 패턴과 텍스처 생성/story- 시각적 스토리나 프로세스를 보여주는 연속 이미지 생성/diagram- 기술 다이어그램, 플로 차트, 아키텍처 모형 생성/nanobanana- 자연어 인터페이스
몇 가지 명령어를 실행해 보겠습니다.
Nanobanana를 실행하기 전에 aistudio.google.com에서 Gemini API 키를 가져와 여기에 설정해야 합니다.
export NANOBANANA_GEMINI_API_KEY=YOUR_API_KEY
영어 버전은
# Single image /generate "a watercolor painting of a fox in a snowy forest" # Multiple variations with preview /generate "sunset over mountains" --count=3 --preview # Style variations /generate "mountain landscape" --styles="watercolor,oil-painting" --count=4 # Specific variations with auto-preview /generate "coffee shop interior" --variations="lighting,mood" --preview
일본어 버전
# Single image /generate "雪の森のキツネの水彩画" # Multiple variations with preview /generate "山にかかる夕焼け" --count=3 --preview # Style variations /generate "山岳風景" --styles="watercolor,oil-painting" --count=4 # Specific variations with auto-preview /generate "コーヒーショップのインテリア" --variations="lighting,mood" --preview
이미지 수정
파일 이름을 로컬 파일 이름으로 변경합니다.
/edit my_photo.png "change the color of fox to blue"
6. 완료
이제 완료되었습니다. 잘하셨습니다. 자세한 내용은 다음 리소스를 참고하세요.