> ## 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를 직접 변경할 수 있습니다. Replit Design의 [canvas](/ko/design/canvas)와 Preview 모두에서 작동하므로 목업과 실행 중인 애플리케이션을 동일한 방식으로 편집할 수 있습니다.

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

핵심 개념:

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

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

## Visual Editor 사용 방법

### Canvas에서 편집하기

툴바에서 **Edit** 도구를 선택한 다음, 프레임 안의 요소를 클릭하세요. 요소에는 이름이 표시된 칩과 함께 강조 표시가 나타나고, 우측에 Visual Editor 패널이 열려 콘텐츠, 레이아웃, 색상, 테두리 등 해당 요소에서 편집할 수 있는 속성을 보여줍니다. 속성을 조정한 뒤 **Save edits**를 선택해 적용하거나 **Discard**를 선택해 버리세요.

<Frame caption="Edit 도구가 활성화되어 버튼이 선택된 모습과, 편집 가능한 속성을 보여주는 Visual Editor.">
  <img src="https://mintcdn.com/replit/ID8VXS1QcqWgcJeY/images/replitai/visual-editor-edit-tool.png?fit=max&auto=format&n=ID8VXS1QcqWgcJeY&q=85&s=54c7f32c42f7d95a306a845319295c68" alt="슈퍼카 컨피규레이터 프레임에서 Edit 도구가 활성화되고 요소가 선택된 모습. 우측 Visual Editor 패널에 Layout(Outer, Inner space), Color(Text, Background, Opacity), Border(color, width, radius) 섹션과 Discard, Save edits 버튼이 표시되어 있음" width="2000" height="1250" data-path="images/replitai/visual-editor-edit-tool.png" />
</Frame>

표시되는 속성은 선택한 요소에 따라 달라집니다. 텍스트 요소는 글꼴 컨트롤을, 이미지는 소스와 업로드를, 컨테이너는 레이아웃 컨트롤을 노출합니다.

### Preview에서 편집하기

동일한 편집 경험이 실행 중인 애플리케이션에서도 작동합니다.

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

  <Step title="편집하기">
    텍스트를 인라인으로 편집하고, 색상 선택기로 색상을 조정하고, 스타일 컨트롤로 간격을 변경하거나, 이미지를 교체합니다.
  </Step>

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

### 텍스트 편집

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

### 색상 조정

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

### 스타일 변경

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

### 레이아웃 컨트롤

Visual Editor는 모든 컨트롤을 명확한 섹션으로 그룹화하여 필요한 것을 더 빠르게 찾을 수 있게 해줍니다: **Text**, **Layout**, **Color**, **Border**. (이미지 요소를 선택하면 **Image** 섹션도 나타납니다.)

**Layout** 섹션에서는 Agent를 거치지 않고 컨테이너 안의 자식 요소들이 어떻게 배치되는지 조정할 수 있습니다. 플렉스 컨테이너를 선택하고 Layout을 펼치면 다음을 볼 수 있습니다.

* **Alignment**: 컨테이너 내 양쪽 축에서 항목이 위치할 곳을 선택하는 3×3 점 선택기입니다.
* **Direction**: 자식 요소를 행 또는 열로 쌓는 두 개의 화살표 버튼입니다.
* **Gap**: 항목 간 간격을 나타내는 픽셀 값입니다. Gap 입력란 옆의 아이콘은 현재 방향에 맞춰 바뀌므로 가로 간격을 조정하는지 세로 간격을 조정하는지 항상 알 수 있습니다. 그 옆의 화살표 아이콘은 자식 요소를 컨테이너의 반대쪽 끝으로 밀어내는 **Distribute space between items**를 전환합니다.
* **Outer space**: 요소 바깥쪽 공간을 위한 각 측면별 입력란입니다(각 측면에 하나씩, 네 측면을 한 번에 고정하는 링크 토글도 있음).
* **Inner space**: 각 축을 따라 요소 안쪽 공간을 위한 입력란으로, 양쪽 축을 한 번에 고정하는 링크 토글이 있습니다.

Layout 섹션은 선택한 요소에 최소 하나의 레이아웃 컨트롤이 적용될 때만 나타납니다. 간격이나 레이아웃 속성이 없는 일반 텍스트 노드는 이 섹션을 완전히 숨기므로 편집기가 간결하게 유지됩니다.

### 이미지 업데이트

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

## 할 수 있는 것

* **빠른 텍스트 수정**: 소스 파일을 열지 않고 카피, 레이블, 제목을 업데이트
* **색상 탐색**: 클릭하고 조정하여 다양한 색상 구성표 시도 — 올바른 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>