[gemini-cli] 지침파일을 이용한 이미지 분석

gemini-cli의 강력한 점은 PC를 자동제어 할 수 있다는 점이다. 특히 사용자가 개발자라면 왠만한 상용소프트웨어의 수준의 자동화가 쉽게 가능해진다. 이유는 gemini-cli가 콘솔화면에서 실행되고 pc의 프로그램들과 통신(IPC: Inter Process Comunication)을 할 수 있기 때문이다.  

 

gemini-cli의 빠른 입문이 필요하면 다음의 포스팅을 참조하기 바란다. 

[QuickStart] gemini-cli를 이용한 자동화

---

1. 기초지식

gemini-cli는 Node.js 기반의 프로그램이다. 그리고 대부분의 생성 AI는 "코드 인터프리터"를 지원한다. 이런 일반적인 상식을 기반으로 유추해보면 다음과 같은 궁금증을 얻을 수 있다. 

gemini-cli는 Node.js 기반이다. 그러면  gemini-cli에서 프롬프트에서 javascript 코드를 지침으로 지정할 수 있지 않을까?

 

이에 대한 프롬프트를  gemini-cli에게 하면 다음과 같은 결과를 얻을 수 있다.

 

간단한 소스코드라면 gemini-cli에서 프롬프트로 직접 실행하는 것은 문제가 되지 않는다. 심지어 npm으로 install까지 해준다. 물론 소스코드에 버그가 없어야 한다. 이런 점에서 "개발자 문해력"이 없는 사람들에게 gemini-cli는 전혀 도움이 되지않는다. 

 

2. 구성

특정 폴더를 만든다. 여기서는 테스트를 위해 c:\temp라는 폴더를 만들고 그곳에서 지침파일(note.md)을 만들고 gemini-cli를 실행한다.

 

 

• note.md 구성하기

note.md는 지침파일이다. gemini-cli에게 명령을 주기 위해서 하나의 명령전문을 마크다운 문서로 만들었다. 마치 프로그래밍을 할 때 소스파일을 만들 듯, 생성AI의 자동화를 위해서는 지침파일 작성은 필수가 된다. 다음은 지침파일(note.md) 내용이다. 

# gemini-cli를 이용한 웹스크래핑
> puppeteer를 이용하여 웹화면을 캡쳐한 후, 분석한다. 

## 목적
1. 입력된 웹화면을 PC로 가져온다. 
2. 가져온 화면을 gemini-cli가 분석한다.
3. 결과(이미지와 분석내용)를 html로 저장한다.

## 구조

gemini-cli:
 - 프롬프트 처리
 - 내장된 node.js 기능을 "코드 인터프리터"로 활용

외부 프로그램:
- 프롬프트와 웹주소 입력받기
- gemini-cli에 한 줄 프롬프트( -p -y ) 옵션과 함께 호출
- gemini에서 html 저장 및 실행  

## 기능

코드인터프리터 기능으로 puppeteer를 다음과 정의하여 사용한다.
첫번째 파라메터는 주소, 두번째는 저장할 위치 

```javascript
import puppeteer from 'puppeteer';
import fs from 'fs';

const url = process.argv[2]; //[TODO] 주소
const outputFile = process.argv[3]; // [TODO] 저장파일

if (!url || !outputFile) {
  console.error('Please provide a URL and an output file path.');
  process.exit(1);
}

(async () => {
  let browser;
  try {
    browser = await puppeteer.launch({
      headless: true,
      args: ['--no-sandbox', '--disable-setuid-sandbox'],
    });
    const page = await browser.newPage();
    await page.setViewport({ width: 1366, height: 1000, deviceScaleFactor: 1 });
    await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120 Safari/537.36');
    await page.goto(url, { waitUntil: 'networkidle2', timeout: 60000 });

    await page.screenshot({ path: outputFile, fullPage: true, type: 'jpeg' });
    console.log(`Screenshot saved to ${outputFile}`);
  } catch (error) {
    console.error('Error capturing screenshot:', error);
  } finally {
    if (browser) {
      await browser.close();
    }
  }
})();
```

 

지침의 내용을 보면 마치 "개발팀의 개발자 매뉴얼"과 같이 구성되어 있다. 이렇게 문서지침을 할 수록 생성 AI는 오류확률을 현격히 낮추게 된다. 결국 "생성 AI의 자동화"는 개발자 사고방식을 반드시 요구하게 된다. node.js의 puppeteer는 웹브라우저 자동화에 쓰이는 패키지로 chrome에서도 내장(개발자 도구의 매크로 기능)되어 있다. 이런 상식과 판단으로 소스코드를 구성할 수 있는 것은 개발자만 가능하기 때문이다. 

 

• run_capture.ps1 구성하기

run_caputre.ps1은 powershell의 스크립트이다. gemini-cli와 간단한 프롬프트 통신을 하기 위해서 만들었다. 이 파일을 실행하려면 PC에 powershell이 세팅되어 있어야 한다. 그리고 터미널을 powershell 전용으로 열어야 한다. 참고로 powershell은 C# 기반이므로 C#기반의 Form 위젯도 제어할 수 있으며 윈도우의 모든 자원을 액세스 가능한 강력한 스크립트이다. 

 

# 사용자로부터 웹 주소와 분석 내용을 입력받습니다.
$url = Read-Host -Prompt "분석할 웹 주소를 입력하세요"
$prompt = Read-Host -Prompt "분석할 내용을 입력하세요"

# 입력 값 유효성 검사
if ([string]::IsNullOrWhiteSpace($url) -or [string]::IsNullOrWhiteSpace($prompt)) {
    Write-Host "오류: 웹 주소와 분석 내용을 모두 입력해야 합니다."
    exit
}

# gemini-cli에 전달할 프롬프트를 구성합니다.
$gemini_prompt = "모든 작업은 현재폴더에서 진행한다. note.md를 지침으로 참고한다. 웹사이트 '$url' 화면을 캡처하고, '$prompt' 요청에 따라 분석해줘. 최종 결과는 캡처 이미지와 분석 내용이 포함된 'preview.html' 파일로 저장해줘. 캡쳐한 사이트이미지는 capture.jpg로 저장해줘."

# 실행할 전체 명령어를 구성합니다.
# Invoke-Expression을 사용하므로, 프롬프트 내의 따옴표 문제를 방지하기 위해 -replace 연산자로 이스케이프 처리합니다.
$escaped_prompt = $gemini_prompt -replace "'", "''"
$command = "gemini -p '$escaped_prompt' -y"

# 생성된 명령어를 화면에 출력하고 실행합니다.
Write-Host "--------------------------------------------------"
Write-Host "다음 명령어를 실행합니다:"
Write-Host $command
Write-Host "--------------------------------------------------"

Invoke-Expression $command

Write-Host "작업이 완료되었습니다. preview.html 파일을 확인하세요."

 

3. 사용

powershell 터미널을 실행시킨 후, c:\temp 폴더에서 위의 파일이 있다는 가정하에  다음과 같이 진행한다. 

 

1. run_capture.ps1 실행한다.

2. 캡쳐할 "인터넷 주소"와 "분석할 내용(요구사항 프롬프트)"를 입력한다. 

 

 

3. gemini가 한 줄 프롬프트로 실행되면서 진행상황을 다음과 같이 출력한다. 

 

4. 과정이 완료되면 폴더를 ls로 출력한다. 그러면 이전에는 없던 node_modules 폴더와 .js 파일이 생성되어 있을 것이다. 참고로 .js 파일은 gemini-cli가 알아서 만드는 파일이라 파일명이 때에 따라 달라질 수 있음을 알아야 한다. 생성 AI는 프로그래밍과 달리 랜덤요소가 기본임을 잊어서는 안된다. 

 

 

 

5. preview.html을 탐색기로 더블클릭하여 실행한다. 또는 powershell의 옵션에 따라 preview.html을 타이핑 치고 엔터를 누르면 바로 브라우저에서 볼 수 있다. 

 

 

 

gemini-cli가 주소와 지침을 가지고 홈페이지를 분석한 내용을 확인할 수 있다. 

 

4. 개선사항

 

출력되는 html의 양식을 제공해야 한다. 그렇게 하지 않으면 gemini-cli가 임의적으로 자동생성한다. 그리고 지침 프롬프트를 고도화 하여 "분석항목을 표나 json형태"로 출력하도록 한다. 이유는 다른 프로그램에서 활용할 수 있도록 표준 데이터로 만들기 위함이다.