# Gemini CLI 마스터하기(심화): v12 - 웹 인터페이스 파헤치기

이전 단계에서 `gemini web` 명령어를 통해 인터랙티브 모드를 실행하고 웹 브라우저로 접속하는 것까지 완료했습니다. 이번 단계에서는 브라우저에 나타나는 웹 인터페이스의 주요 구성 요소를 자세히 살펴보고, 이 UI를 통해 사용자와 AI 에이전트가 어떻게 상호작용하며 작업을 진행하는지 구체적인 실행 흐름을 따라가 보겠습니다.

---

## 1. 웹 인터페이스의 주요 구성 요소

`gemini web`으로 접속한 인터페이스는 AI 에이전트와의 협업을 위한 '조종석(cockpit)'입니다. 일반적으로 다음과 같은 주요 구성 요소들로 이루어져 있습니다. (CLI 버전이나 설정에 따라 UI는 다를 수 있습니다.)

### 1.1. 프롬프트 입력창 (Prompt Input)

*   **설명:** 사용자가 에이전트에게 초기 목표를 제시하거나, 작업 도중 추가적인 지시를 내리는 기본 채팅 입력창입니다. 모든 상호작용은 여기서 시작됩니다.
*   **예시:** "GitHub 저장소의 최신 이슈를 열어줘.", "이 웹페이지에서 '가격' 정보를 찾아줘."

### 1.2. 에이전트 로그 / 생각의 흐름 (Agent's Log / Thought Process)

*   **설명:** 에이전트가 현재 무엇을 '보고' 있고, 어떤 목표를 달성하기 위해 무엇을 '생각'하고 있는지를 보여주는 실시간 로그 창입니다. 에이전트의 의사결정 과정을 투명하게 보여주어 사용자가 상황을 이해하는 데 도움을 줍니다.
*   **예시:** "관찰: '로그인' 버튼이 보임. 목표: 로그인. 행동 계획: '로그인' 버튼 클릭을 제안해야겠다."

### 1.3. 작업 환경 뷰 (Environment View)

*   **설명:** 에이전트가 현재 '보고 있는' 환경을 시각적으로 보여주는 창입니다. 웹페이지 스크린샷, 텍스트 파일 내용, 렌더링된 GitHub 이슈 등이 될 수 있습니다. 특히, 에이전트가 상호작용 가능하다고 판단한 요소(버튼, 링크, 입력창 등)들이 하이라이트되어 표시될 수 있습니다. (이는 `test_get_interactive_rects`와 같은 코드 스니펫이 암시하는 기능입니다.)
*   **중요성:** 사용자는 이 뷰를 통해 에이전트가 올바른 대상을 보고 있는지 직관적으로 확인할 수 있습니다.

### 1.4. 행동 제안 카드 (Action Proposal Card)

*   **설명:** 인터랙티브 모드의 핵심 기능입니다. 에이전트가 실행하고자 하는 구체적인 행동을 명확하게 표시하고, 사용자에게 승인 또는 거부를 요청하는 카드 형태의 UI입니다.
*   **구성:**
    *   **제안된 행동:** "텍스트 '로그인'이 포함된 버튼 클릭"과 같이 구체적인 행동 내용이 표시됩니다.
    *   **승인(Approve) 버튼:** 클릭하면 에이전트가 제안된 행동을 실제로 실행합니다.
    *   **거부(Deny) 버튼:** 클릭하면 행동이 취소되고, 에이전트는 다른 행동을 계획하거나 사용자에게 다음 지시를 기다립니다.

## 2. 인터랙티브 모드의 실행 흐름 (예제)

`example.com` 웹사이트에서 'About Us' 페이지를 찾는 간단한 작업을 통해 실제 실행 흐름을 따라가 보겠습니다.

**단계 1: 사용자, 목표 제시**

*   **사용자:** 프롬프트 입력창에 "example.com에 접속해서 'About Us' 페이지 링크를 클릭해 줘."라고 입력합니다.

**단계 2: 에이전트, 환경 관찰 및 행동 계획**

*   **에이전트 로그:** "목표 수신: example.com의 'About Us' 링크 클릭. 행동: 'example.com'으로 이동."
*   **작업 환경 뷰:** `example.com`의 홈페이지 스크린샷이 표시됩니다.
*   **에이전트 로그:** "관찰: 페이지에 'About Us'라는 텍스트를 가진 링크가 있음. 행동 계획: 해당 링크 클릭 제안."

**단계 3: 에이전트, 행동 제안**

*   **행동 제안 카드:** "제안된 행동: 텍스트 'About Us'를 포함한 링크 클릭"이라는 내용의 카드가 나타납니다.
*   **작업 환경 뷰:** 'About Us' 링크 주변에 하이라이트가 표시됩니다.

**단계 4: 사용자, 검토 및 승인**

*   **사용자:** 작업 환경 뷰에서 올바른 링크가 하이라이트된 것을 확인하고, 행동 제안 카드에서 **'승인(Approve)'** 버튼을 클릭합니다.

**단계 5: 에이전트, 행동 실행 및 환경 업데이트**

*   **에이전트:** 실제로 'About Us' 링크를 클릭하는 행동을 수행합니다.
*   **작업 환경 뷰:** 'About Us' 페이지의 내용으로 화면이 갱신됩니다.
*   **에이전트 로그:** "행동 실행 완료. 현재 'About Us' 페이지에 있음. 다음 지시를 기다리는 중."

이러한 '목표 제시 -> 관찰 -> 계획 -> 제안 -> 승인 -> 실행'의 순환 구조를 통해 사용자와 에이전트는 복잡한 작업을 안전하고 정확하게 함께 수행할 수 있습니다.

## 3. 요약

인터랙티브 모드의 웹 인터페이스는 사용자와 AI 에이전트 간의 소통과 협업을 위한 강력하고 직관적인 다리 역할을 합니다. 각 구성 요소를 이해하고 실행 흐름을 파악함으로써, 우리는 에이전트의 작업을 명확히 이해하고, 원하는 방향으로 안전하게 이끌어 나갈 수 있습니다.

이제 웹 인터페이스의 기본 흐름을 이해했으니, 다음 단계에서는 세션을 더욱 세밀하게 제어할 수 있는 고급 명령어들(`pause`, `step` 등)에 대해 알아보겠습니다.