# 사용자 인터페이스 개요 (/ko/docs/verdent-for-vscode/getting-started/interface)

> Verdent의 인터페이스 구성 요소와 탐색 이해하기



Verdent for VS Code은 방해 요소를 최소화하도록 설계된 깔끔한 3단 구성 인터페이스를 제공합니다. 모든 상호작용은 Visual Studio Code 사이드바 안에서 이루어져, 코드에서 벗어나지 않고 작업할 수 있습니다.

***

## Verdent에 접근하기 [#verdent에-접근하기]

다음 방법 중 하나로 Verdent을 엽니다.

* **사이드바 아이콘** - Visual Studio Code 활동 표시줄(왼쪽 사이드바)에서 Verdent 아이콘을 선택합니다
* **키보드 단축키** - macOS에서는 `Cmd+L`를, Windows/Linux에서는 `Ctrl+L`를 누릅니다
* **명령 팔레트** - `Cmd+Shift+P` / `Ctrl+Shift+P`를 누른 다음 "Verdent"를 검색합니다

패널은 Visual Studio Code 사이드바에서 열리며, 필요에 따라 크기를 조정하거나 이동하거나 도킹할 수 있습니다.

<Tip>
  더 많은 대화 기록을 보거나 에디터 공간을 넓히려면 가장자리를 드래그해 Verdent 패널 크기를 조정합니다.
</Tip>

***

## 인터페이스 구성 요소 [#인터페이스-구성-요소]

<Tabs>
  <Tab title="상단 바">
    주요 기능에 빠르게 접근합니다.

    | 버튼      | 기능                                |
    | ------- | --------------------------------- |
    | 새 세션    | 깨끗한 컨텍스트로 새 대화를 시작합니다             |
    | 프로젝트 기록 | 이전 세션을 둘러보고 복원합니다                 |
    | 사용자 센터  | 계정 정보와 크레딧 잔액을 확인합니다              |
    | 피드백     | 피드백을 제출하고 문제를 보고합니다               |
    | 설정      | MCP 서버, 서브에이전트, 규칙, 모델 프리셋을 구성합니다 |
  </Tab>

  <Tab title="채팅 보기">
    주요 대화 영역에는 다음이 표시됩니다.

    * **AI 응답** - 구문 강조가 적용된 코드 블록이 포함된 서식 있는 텍스트
    * **코드 차이** - 파일 변경 전후를 비교하는 대화형 보기
    * **플랜** - Plan Mode 사용 시 구조화된 작업 세부 계획
    * **검증 결과** - 테스트 실행 출력과 디버깅 정보
    * **파일 작업** - 파일 생성, 편집, 삭제 확인
    * **서브에이전트 출력** - 위임된 작업의 결과

    채팅 보기는 전체 대화 기록을 유지하므로, 이전 상호작용을 위로 스크롤해 다시 확인할 수 있습니다.
  </Tab>

  <Tab title="입력 상자">
    하단의 입력 영역에는 요청을 작성하기 위한 컨트롤이 있습니다.

    **텍스트 입력 영역:** 자연어 프롬프트를 입력하는 기본 텍스트 필드

    **작업 버튼:**

    | 버튼              | 기능                                                            |
    | --------------- | ------------------------------------------------------------- |
    | 컨텍스트 추가         | @-멘션으로 파일을 참조하거나 서브에이전트를 호출합니다                                |
    | 이미지 또는 파일 추가    | 분석할 스크린샷, 다이어그램, 문서를 포함합니다                                    |
    | 서브에이전트 추가       | 작업을 전문 서브에이전트에 위임합니다                                          |
    | 모드 전환           | Agent, Plan, Chat 모드 사이를 전환합니다                                |
    | AI 모델 전환/사용자 지정 | Performance, Balance, Efficiency 프리셋 또는 특정 모델을 선택합니다          |
    | Think Hard Mode | 복잡한 추론을 위해 최대 사고 예산을 활성화합니다                                   |
    | 권한 전환           | 권한 모드(Manual Accept, Auto-Run, Plan, Skip Permissions)를 변경합니다 |
    | 보내기             | 프롬프트를 AI 모델에 제출합니다                                            |
  </Tab>
</Tabs>

***

## 상태 표시기 [#상태-표시기]

Verdent은 시각적 표시기로 시스템 상태를 전달합니다.

<Tabs>
  <Tab title="채팅 보기 상태">
    채팅 보기는 명시적인 레이블 대신 시각적 신호로 상태를 전달합니다.

    * **처리 표시기** - Verdent이 활발히 작업 중일 때 시각적 표시기가 나타납니다. AI가 파일을 읽거나, 코드를 분석하거나, 응답을 준비할 때 표시됩니다.
    * **텍스트 생성 중** - AI가 설명, 코드 제안, 플랜을 작성하는 동안 Verdent의 응답이 실시간으로 나타납니다. 스트리밍되는 텍스트는 모델이 출력을 적극적으로 생성하고 있음을 나타냅니다.
    * **아무 일도 일어나지 않음** - 채팅 보기가 활동 없이 정적인 상태라면 Verdent이 대기 중입니다. 파일 변경을 승인하거나, 명확화 질문에 답하거나, 다음 요청을 제공해야 한다는 의미입니다.
  </Tab>

  <Tab title="텍스트 커서">
    입력 상자의 텍스트 커서는 Verdent이 새 요청을 받을 준비가 되었는지 나타냅니다.

    * **깜박이는 커서** - 입력 상자가 활성 상태이며 텍스트 입력 준비가 되어 있습니다. 요청을 입력하고 보내기를 누를 수 있습니다. Verdent이 처리를 완료하고 다음 프롬프트를 기다릴 때 나타납니다.
    * **커서 없음/비활성화됨** - Verdent이 요청을 처리하는 동안 입력 상자가 비활성화됩니다. 이렇게 하면 현재 작업이 중단되지 않고, 다른 요청을 시작하기 전에 각 요청이 완료되도록 보장합니다.

    **워크플로 패턴:** 요청을 제출하면 커서가 사라집니다(입력이 비활성화됨). Verdent이 작업을 완료하면 커서가 다시 나타나며, 다음 요청을 입력할 수 있음을 알려줍니다.
  </Tab>

  <Tab title="모드 표시기">
    입력 상자에는 현재 구성을 보여주는 표시기가 표시됩니다.

    * **권한 전환 버튼** - 현재 권한 모드를 버튼 자체의 레이블로 보여줍니다. "Manual", "Auto", "Plan", "Skip"이 표시됩니다. 이를 통해 요청을 제출하기 전에 어떤 실행 모드가 활성화되어 있는지 확인할 수 있습니다. 버튼을 선택하면 사용 가능한 모드를 순환합니다.
    * **AI 모델 전환/사용자 지정 버튼** - 현재 선택된 모델 또는 프리셋을 표시합니다. 프리셋은 "Performance", "Balance", "Efficiency"로 표시되며, 개별 모델을 선택한 경우 "Claude 4.5 Sonnet" 같은 특정 모델명이 표시됩니다. 이로써 다음 요청을 처리할 AI 모델을 확인할 수 있습니다.

    이러한 표시기는 현재 설정을 한눈에 확인하게 해주며, 프롬프트를 보내기 전에 올바른 구성이 적용되었는지 확인하는 데 도움이 됩니다.
  </Tab>
</Tabs>

<Note>
  상태 표시기는 Verdent이 정확히 무엇을 하는지 실시간으로 업데이트되어 에이전트 활동을 이해하는 데 도움이 됩니다.
</Note>

***

## 탐색 패턴 [#탐색-패턴]

<Tabs>
  <Tab title="상단 바 탐색">
    상단 바는 기능에 따라 서로 다른 탐색 패턴을 사용합니다.

    **버튼:**

    * **새 세션** - 이 버튼을 선택하면 현재 대화가 즉시 지워지고 깨끗한 컨텍스트의 새 채팅 보기로 돌아갑니다. 별도 페이지나 팝업 없이 같은 보기에서 즉시 실행됩니다.

    **페이지:**

    * **프로젝트 기록** - 이전 세션과 대화를 모두 둘러볼 수 있는 전용 전체 페이지 보기를 엽니다. 채팅 보기에서 벗어나 세션 기록을 표시합니다. 채팅 보기로 돌아가려면 **X** 버튼을 선택합니다.

    **팝업(오버레이 대화상자):**

    * **사용자 센터** - 계정 정보, 크레딧 잔액, 사용량 세부 정보를 표시하는 오버레이 팝업을 엽니다. 팝업 뒤에는 채팅 보기가 계속 표시됩니다.
    * **피드백** - 피드백을 제출하고 문제를 보고하는 양식이 있는 오버레이 팝업을 엽니다. 채팅 보기는 배경에 남아 있습니다.

    팝업을 닫으려면 팝업 영역 바깥을 선택하거나 팝업 모서리의 **X** 버튼을 사용합니다.

    **드롭다운 메뉴:**

    * **설정** - MCP 서버, 서브에이전트, 규칙, 모델 프리셋 옵션이 있는 인라인 드롭다운 메뉴를 엽니다. 메뉴에서 옵션(예: "MCP Servers")을 선택하면 해당 구성을 위한 전용 전체 페이지 보기가 열립니다. 채팅 보기로 돌아가려면 **X** 버튼을 선택합니다.
  </Tab>

  <Tab title="입력 상자 탐색">
    모든 입력 상자 버튼은 빠른 인라인 구성을 위한 드롭다운 메뉴를 엽니다.

    **드롭다운 메뉴 패턴:**    입력 상자의 모든 버튼(컨텍스트 추가, 이미지 또는 파일 추가, 서브에이전트 추가, 모드 전환, AI 모델 전환/사용자 지정, Think Hard Mode, 권한 전환)은 버튼 바로 아래에 드롭다운 메뉴를 엽니다. 이 메뉴를 사용하면 채팅 보기에서 벗어나지 않고 요청을 구성할 수 있습니다.

    **드롭다운을 사용하는 이유:**    이 설계는 일반적인 모든 작업에서 채팅 보기에 머물 수 있게 합니다. 대화를 놓치거나 워크플로를 중단하지 않고 설정을 조정하고, 모델을 선택하고, 모드를 변경하고, 컨텍스트를 추가할 수 있습니다.

    **드롭다운 닫기:**    드롭다운 메뉴는 선택을 하거나 메뉴 바깥 아무 곳이나 선택하면 자동으로 닫힙니다. 이를 통해 설정을 빠르게 구성하고 요청 작성으로 돌아갈 수 있습니다.
  </Tab>

  <Tab title="채팅 보기로 돌아가기">
    탐색 요소마다 기본 채팅 보기로 돌아가는 방식이 다릅니다.

    **페이지에서 돌아가기(프로젝트 기록, 설정):**

    * 페이지 상단 모서리의 **X** 버튼을 선택합니다
    * 이전에 머물던 채팅 보기로 돌아갑니다

    **팝업에서 돌아가기(사용자 센터, 피드백):**

    * 팝업 모서리의 **X** 버튼을 선택하거나
    * 팝업 오버레이 바깥 아무 곳이나 선택합니다
    * 채팅 보기는 항상 팝업 뒤에 보였기 때문에, 팝업을 닫으면 즉시 포커스가 돌아옵니다

    **드롭다운 메뉴에서 돌아가기:**

    * 선택을 하면 메뉴가 자동으로 닫힙니다
    * 선택하지 않고 닫으려면 메뉴 바깥 아무 곳이나 선택합니다
    * 채팅 보기를 떠난 적이 없으므로 "돌아갈" 곳이 없습니다

    **탐색 철학:**    대부분의 상호작용은 채팅 보기에 머무르게 하는 드롭다운 메뉴를 통해 이루어집니다. **프로젝트 기록**과 **설정 옵션**은 별도 페이지로 이동하고, **사용자 센터**와 **피드백**은 대화를 가리지 않는 오버레이 팝업을 사용합니다.
  </Tab>
</Tabs>

<Tip>
  @-멘션과 슬래시 명령으로 탐색을 안내합니다. 이렇게 하면 Verdent이 의도를 이해하고 적절한 도구를 선택하는 데 도움이 됩니다.
</Tip>

***

## 규칙으로 사용자 지정하기 [#규칙으로-사용자-지정하기]

**설정** → **규칙**으로 이동해 Markdown 파일로 Verdent의 동작을 사용자 지정합니다.

<Tabs>
  <Tab title="사용자 규칙">
    **파일:** `VERDENT.md`

    **범위:** 모든 프로젝트에 적용되는 전역 기본 설정

    **목적:** 모든 워크스페이스의 채팅 중 Verdent이 적용할 개인 사용 기본 설정을 지정합니다. 이는 어떤 프로젝트에서 작업하든 모든 세션에 걸쳐 유지되는 전역 설정입니다.

    **일반적인 사용 사례:**

    * 기본 출력 언어(예: "항상 스페인어로 응답해")
    * 코드 주석 기본 설정(예: "생성된 코드에 자세한 주석을 포함해")
    * 응답 형식(예: "모든 JavaScript 예제에 TypeScript를 사용해")
    * 개인 코딩 스타일 기본 설정

    **편집 방법:**

    <Steps>
      <Step title="설정 열기">
        상단 바에서 **설정**을 선택합니다
      </Step>

      <Step title="규칙 선택">
        드롭다운 메뉴에서 **규칙**을 선택합니다
      </Step>

      <Step title="사용자 규칙 편집">
        **사용자 규칙**을 선택해 Markdown 형식의 `VERDENT.md`을 만들거나 편집합니다
      </Step>
    </Steps>
  </Tab>

  <Tab title="프로젝트 규칙">
    **파일:** `AGENTS.md`

    **범위:** 현재 워크스페이스에만 적용되는 프로젝트별 규칙

    **목적:** 현재 프로젝트에만 적용되는 코딩 표준, 아키텍처 패턴, 개발 워크플로를 정의합니다. 이 규칙은 이 워크스페이스에서 작업할 때 사용자 규칙보다 우선하며, Verdent이 프로젝트의 고유한 요구 사항을 이해하는 데 도움이 됩니다.

    **일반적인 사용 사례:**

    * 프로젝트별 코딩 표준(예: "모든 파일 이름에 kebab-case를 사용해")
    * 아키텍처 패턴(예: "데이터 접근에는 repository 패턴을 따라")
    * 기술 스택 요구 사항(예: "클래스 컴포넌트가 아니라 React Hooks를 사용해")
    * 팀 규칙(예: "모든 API 응답에는 오류 코드를 포함해야 해")

    **편집 방법:**

    <Steps>
      <Step title="설정 열기">
        상단 바에서 **설정**을 선택합니다
      </Step>

      <Step title="규칙 선택">
        드롭다운 메뉴에서 **규칙**을 선택합니다
      </Step>

      <Step title="프로젝트 규칙 편집">
        **프로젝트 규칙**을 선택해 워크스페이스 루트의 `AGENTS.md`을 만들거나 편집합니다
      </Step>
    </Steps>

    이 파일은 프로젝트별 파일이며 일반적으로 버전 관리에 커밋합니다.
  </Tab>

  <Tab title="Plan 규칙">
    **파일:** `Plan.md`

    **범위:** Plan Mode 출력 형식과 내용을 제어합니다

    **목적:** Plan Mode 사용 시 플랜에 어떤 정보가 표시되는지, 얼마나 자세한지, 어떤 형식을 따르는지 사용자 지정합니다. 이 규칙은 복잡한 작업을 실행하기 전에 Verdent이 생성하는 플랜의 구조와 내용을 결정합니다.

    **일반적인 사용 사례:**

    * 플랜 상세 수준(예: "각 단계에 예상 시간을 포함해")
    * 플랜 구조(예: "항상 '위험' 섹션을 포함해")
    * 콘텐츠 요구 사항(예: "수정될 모든 파일을 나열해")
    * 출력 형식(예: "순차 단계에는 번호 목록을 사용해")

    **편집 방법:**

    <Steps>
      <Step title="설정 열기">
        상단 바에서 **설정**을 선택합니다
      </Step>

      <Step title="규칙 선택">
        드롭다운 메뉴에서 **규칙**을 선택합니다
      </Step>

      <Step title="Plan 규칙 편집">
        **Plan 규칙**을 선택해 Markdown 형식의 `plan_rules.md`을 만들거나 편집합니다
      </Step>
    </Steps>
  </Tab>
</Tabs>

***

## 함께 보기 [#함께-보기]

<CardGroup cols="2">
  <Card title="빠른 시작" icon="rocket" href="/docs/verdent-for-vscode/getting-started/quick-start">
    첫 번째 작업으로 인터페이스 사용을 시작합니다
  </Card>

  <Card title="구성 설정" icon="gear" href="/docs/verdent-for-vscode/configuration/settings">
    인터페이스 동작과 기본 설정을 사용자 지정합니다
  </Card>
</CardGroup>
