Visual Editor란?
Visual Editor를 사용하면 요소를 직접 클릭하여 UI를 직접 변경할 수 있습니다. Replit Design의 canvas와 Preview 모두에서 작동하므로 목업과 실행 중인 애플리케이션을 동일한 방식으로 편집할 수 있습니다. 텍스트 변경, 색상 조정, 간격 조정 같은 간단한 편집은 AI 크레딧을 소비하지 않고 소스 코드를 직접 업데이트합니다. 숨겨진 복잡성이 있는 변경의 경우, Visual Editor가 자동으로 Agent에게 전달합니다. 핵심 개념:- 결정적 편집: 간단한 변경(텍스트, 색상, 간격)이 Agent 루프 없이 소스 코드에 직접 적용됩니다.
- 크레딧 비용 없음: 직접 편집은 AI 크레딧을 소비하지 않습니다 — 복잡한 변경만 Agent를 통해 처리됩니다.
- 이중 컨텍스트: canvas 프레임과 Preview 모두에서 동일하게 작동합니다.
- 소스 코드 동기화: 모든 편집이 기본 소스 코드를 즉시 업데이트합니다.
Visual Editor는 현재 웹 브라우저에서만 사용 가능합니다. 모바일 앱 또는 데스크톱 앱에서는 지원되지 않습니다.
Visual Editor 사용 방법
Canvas에서 편집하기
툴바에서 Edit 도구를 선택한 다음, 프레임 안의 요소를 클릭하세요. 요소에는 이름이 표시된 칩과 함께 강조 표시가 나타나고, 우측에 Visual Editor 패널이 열려 콘텐츠, 레이아웃, 색상, 테두리 등 해당 요소에서 편집할 수 있는 속성을 보여줍니다. 속성을 조정한 뒤 Save edits를 선택해 적용하거나 Discard를 선택해 버리세요.
Edit 도구가 활성화되어 버튼이 선택된 모습과, 편집 가능한 속성을 보여주는 Visual Editor.
Preview에서 편집하기
동일한 편집 경험이 실행 중인 애플리케이션에서도 작동합니다.1
요소 선택
Preview에서 요소를 클릭하여 편집을 시작합니다.
2
편집하기
텍스트를 인라인으로 편집하고, 색상 선택기로 색상을 조정하고, 스타일 컨트롤로 간격을 변경하거나, 이미지를 교체합니다.
3
저장
저장을 눌러 소스 코드를 업데이트합니다. 간단한 변경은 AI 크레딧을 소비하지 않고 직접 적용됩니다. 편집에 복잡성이 있으면 Visual Editor가 도움을 받기 위해 Agent에게 대상 메타데이터를 보냅니다.
텍스트 편집
텍스트 요소를 클릭하고 직접 입력하여 변경합니다. 텍스트가 소스 코드의 문자열인 경우 즉시 편집이 적용됩니다.색상 조정
색상 선택기를 사용하여 텍스트 및 배경 색상을 조정합니다. 입력 필드에 “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: 각 축을 따라 요소 안쪽 공간을 위한 입력란으로, 양쪽 축을 한 번에 고정하는 링크 토글이 있습니다.
이미지 업데이트
이미지를 선택하여 URL을 교체하거나 즉시 미리보기로 자체 파일을 업로드합니다.할 수 있는 것
- 빠른 텍스트 수정: 소스 파일을 열지 않고 카피, 레이블, 제목을 업데이트
- 색상 탐색: 클릭하고 조정하여 다양한 색상 구성표 시도 — 올바른 CSS를 찾을 필요 없음
- 레이아웃 조정: 픽셀 값을 추측하는 대신 시각적으로 패딩, 마진, 간격을 세밀하게 조정
- 이미지 교체: 클릭하고 업로드하여 플레이스홀더 이미지를 실제 에셋으로 교체
- 디자인 반복: Agent 왕복 없이 canvas 프레임을 빠르게 조정하여 시각적 방향 비교
자주 묻는 질문
Visual Editor 변경에 AI 크레딧이 드나요?
Visual Editor 변경에 AI 크레딧이 드나요?
텍스트 변경, 색상 선택, 간격 조정 같은 간단하고 결정적인 편집은 AI 크레딧을 소비하지 않습니다. 소스 코드를 직접 업데이트합니다. Visual Editor가 숨겨진 복잡성을 감지하면 Agent를 통해 변경을 처리하며, 이 경우 크레딧이 사용됩니다.
여러 곳에 나타나는 요소를 편집할 수 있나요?
여러 곳에 나타나는 요소를 편집할 수 있나요?
예. 루프에서 렌더링되거나 컴포넌트 전반에서 재사용되는 요소를 선택하면 모든 인스턴스가 강조 표시되고 한 번에 업데이트됩니다.
일부 요소의 텍스트를 편집할 수 없는 이유는 무엇인가요?
일부 요소의 텍스트를 편집할 수 없는 이유는 무엇인가요?
여러 하위 요소로 구성된 복합 요소는 Visual Editor에서 직접 텍스트 편집이 불가능합니다. 채팅에서 Agent에게 해당 변경을 요청하세요.
요소의 소스 코드를 어떻게 찾나요?
요소의 소스 코드를 어떻게 찾나요?
선택된 요소의 왼쪽 상단 레이블을 클릭하면 소스 코드의 해당 위치로 이동합니다.