> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Visual Editor

> 코드를 작성하지 않고 클릭만으로 디자인과 앱을 직접 시각적으로 편집하세요 — 텍스트, 색상, 레이아웃, 이미지를 조정합니다.

## Visual Editor란?

Visual Editor를 사용하면 요소를 직접 클릭하여 UI를 직접 변경할 수 있습니다. [Design Canvas](/learn/design/canvas)와 Preview 모두에서 작동하므로 목업과 실행 중인 애플리케이션을 동일한 방식으로 편집할 수 있습니다.

텍스트 변경, 색상 조정, 간격 조정 같은 간단한 편집은 AI 크레딧을 소비하지 않고 소스 코드를 직접 업데이트합니다. 숨겨진 복잡성이 있는 변경의 경우, Visual Editor가 자동으로 Agent에게 전달합니다.

핵심 개념:

* **결정적 편집**: 간단한 변경 (텍스트, 색상, 간격)이 Agent 루프 없이 소스 코드에 직접 적용됩니다.
* **크레딧 비용 없음**: 직접 편집은 AI 크레딧을 소비하지 않습니다 — 복잡한 변경만 Agent를 통해 처리됩니다.
* **이중 컨텍스트**: Design Canvas 프레임과 Preview 모두에서 동일하게 작동합니다.
* **소스 코드 동기화**: 모든 편집이 기본 소스 코드를 즉시 업데이트합니다.

<Note>
  Visual Editor는 현재 **웹 브라우저**에서만 사용 가능합니다. 모바일 앱 또는 데스크톱 앱에서는 지원되지 않습니다.
</Note>

## Visual Editor 사용 방법

### Preview에서 편집하기

실행 중인 애플리케이션의 요소를 클릭하여 편집을 시작하세요. 텍스트, 색상, 간격, 이미지를 수정하고 변경사항이 실시간으로 적용되는 것을 확인하세요.

<Steps>
  <Step title="요소 선택">
    Preview에서 요소를 클릭하여 편집을 시작합니다.
  </Step>

  <Step title="편집하기">
    텍스트를 인라인으로 편집하고, 색상 선택기로 색상을 조정하고, 스타일 컨트롤로 간격을 변경하거나, 이미지를 교체합니다. 채팅의 에디터 패널을 사용하여 패딩, 마진 등의 추가 속성을 설정합니다.
  </Step>

  <Step title="저장">
    저장을 눌러 소스 코드를 업데이트합니다. 간단한 변경은 AI 크레딧을 소비하지 않고 직접 적용됩니다. 편집에 복잡성이 있으면 Visual Editor가 도움을 받기 위해 Agent에게 대상 메타데이터를 보냅니다.
  </Step>
</Steps>

### Canvas에서 편집하기

동일한 편집 경험이 Design Canvas 프레임에서도 작동합니다. 프레임 내의 요소를 클릭하여 편집합니다 — Agent 루프 없이 목업의 크기 조정, 텍스트 변경, 색상 및 간격 조정을 합니다.

### 텍스트 편집

텍스트 요소를 클릭하고 직접 입력하여 변경합니다. 텍스트가 소스 코드의 문자열인 경우 즉시 편집이 적용됩니다.

<Frame>
  <video autoPlay muted loop playsInline src="https://storage.googleapis.com/replit-cdn/sanity/v2-text-edits.mp4" />
</Frame>

### 색상 조정

색상 선택기를 사용하여 텍스트 및 배경 색상을 조정합니다. 입력 필드에 "purple" 같은 색상 이름을 입력하거나, 스포이드를 사용하여 화면의 어디에서나 색상을 선택합니다.

<Frame>
  <video autoPlay muted loop playsInline src="https://storage.googleapis.com/replit-cdn/sanity/v2-color-picker-and-eyedropper.mp4" />
</Frame>

### 스타일 변경

직관적인 컨트롤을 사용하여 요소 전반의 패딩, 마진, 레이아웃을 조정합니다.

<Frame>
  <video autoPlay muted loop playsInline src="https://storage.googleapis.com/replit-cdn/sanity/v2-related-elements.mp4" />
</Frame>

### 이미지 업데이트

이미지를 선택하여 URL을 교체하거나 즉시 미리보기로 자체 파일을 업로드합니다.

<Frame>
  <video autoPlay muted loop playsInline src="https://storage.googleapis.com/replit-cdn/sanity/v2-image-edits.mp4" />
</Frame>

## 할 수 있는 것

* **빠른 텍스트 수정**: 소스 파일을 열지 않고 카피, 레이블, 제목을 업데이트
* **색상 탐색**: 클릭하고 조정하여 다양한 색상 구성표 시도 — 올바른 CSS를 찾을 필요 없음
* **레이아웃 조정**: 픽셀 값을 추측하는 대신 시각적으로 패딩, 마진, 간격을 세밀하게 조정
* **이미지 교체**: 클릭하고 업로드하여 플레이스홀더 이미지를 실제 에셋으로 교체
* **디자인 반복**: Agent 왕복 없이 Canvas 프레임을 빠르게 조정하여 시각적 방향 비교

## 자주 묻는 질문

<Accordion title="Visual Editor 변경에 AI 크레딧이 드나요?">
  텍스트 변경, 색상 선택, 간격 조정 같은 간단하고 결정적인 편집은 AI 크레딧을 소비하지 않습니다. 소스 코드를 직접 업데이트합니다. Visual Editor가 숨겨진 복잡성을 감지하면 Agent를 통해 변경을 처리하며, 이 경우 크레딧이 사용됩니다.
</Accordion>

<Accordion title="여러 곳에 나타나는 요소를 편집할 수 있나요?">
  예. 루프에서 렌더링되거나 컴포넌트 전반에서 재사용되는 요소를 선택하면 모든 인스턴스가 강조 표시되고 한 번에 업데이트됩니다.
</Accordion>

<Accordion title="일부 요소의 텍스트를 편집할 수 없는 이유는 무엇인가요?">
  여러 하위 요소로 구성된 복합 요소는 Visual Editor에서 직접 텍스트 편집이 불가능합니다. 채팅에서 Agent에게 해당 변경을 요청하세요.
</Accordion>

<Accordion title="요소의 소스 코드를 어떻게 찾나요?">
  선택된 요소의 왼쪽 상단 레이블을 클릭하면 소스 코드의 해당 위치로 이동합니다.
</Accordion>