Visual Editor

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를 사용하면 요소를 직접 클릭하여 UI를 직접 변경할 수 있습니다. Design Canvas와 Preview 모두에서 작동하므로 목업과 실행 중인 애플리케이션을 동일한 방식으로 편집할 수 있습니다. 텍스트 변경, 색상 조정, 간격 조정 같은 간단한 편집은 AI 크레딧을 소비하지 않고 소스 코드를 직접 업데이트합니다. 숨겨진 복잡성이 있는 변경의 경우, Visual Editor가 자동으로 Agent에게 전달합니다. 핵심 개념:

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

​

Visual Editor 사용 방법

​

Preview에서 편집하기

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

​

Canvas에서 편집하기

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

​

텍스트 편집

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

​

색상 조정

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

​

스타일 변경

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

​

이미지 업데이트

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

​

할 수 있는 것

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

​

자주 묻는 질문

Visual Editor 변경에 AI 크레딧이 드나요?

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

여러 곳에 나타나는 요소를 편집할 수 있나요?

예. 루프에서 렌더링되거나 컴포넌트 전반에서 재사용되는 요소를 선택하면 모든 인스턴스가 강조 표시되고 한 번에 업데이트됩니다.

일부 요소의 텍스트를 편집할 수 없는 이유는 무엇인가요?

여러 하위 요소로 구성된 복합 요소는 Visual Editor에서 직접 텍스트 편집이 불가능합니다. 채팅에서 Agent에게 해당 변경을 요청하세요.

요소의 소스 코드를 어떻게 찾나요?

선택된 요소의 왼쪽 상단 레이블을 클릭하면 소스 코드의 해당 위치로 이동합니다.