비주얼 에디터

요소를 클릭하여 텍스트, 색상, 간격, 폰트 등을 편집하세요. 작은 수정에 적합하며, 더 큰 변경은 채팅을 사용하세요.

비주얼 에디터를 사용하면 앱의 UI 요소를 직접 클릭하고 속성을 편집하여 변경할 수 있습니다. Builder 툴바에서 Visual 모드로 전환하여 활성화하세요.

작동 방식

툴바에서 Visual 모드로 전환합니다 (Preview, Code, Dashboard와 함께 표시됨)
미리보기에서 요소 위에 마우스를 올리면 오버레이로 강조 표시됩니다
요소를 클릭하여 선택합니다
사이드바 패널에서 속성을 편집합니다: 텍스트, 색상, 간격, 폰트, 테두리, 이미지, 효과

변경 사항은 미리보기에 즉시 반영되고 소스 파일에 저장됩니다. 사이드바의 Reset last edit 버튼을 사용하면 마지막 속성 변경을 되돌릴 수 있습니다.

무엇을 편집할 수 있나요?

텍스트 — 텍스트를 직접 편집
폰트 크기 — xs, sm, base, lg, xl 등
폰트 굵기 — thin, light, normal, medium, semibold, bold, extrabold
폰트 패밀리 — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
폰트 스타일 — 이탤릭 토글
텍스트 정렬 — 왼쪽, 가운데, 오른쪽, 양쪽 맞춤
텍스트 색상 — 모든 Tailwind 색상
배경 색상 — 모든 Tailwind 색상
간격 — 모든 방향의 패딩 및 마진
테두리 — 두께, 색상, 모서리 반경 (텍스트 콘텐츠가 없는 컨테이너 요소에서 사용 가능)
이미지 — 스톡 사진 검색으로 교체하거나 직접 이미지 업로드 (img 요소 및 배경 이미지에 적용)
효과 — 그림자 및 불투명도

실행 취소 / 다시 실행

Cmd+Z (Mac) 또는 Ctrl+Z (Windows)로 변경 사항을 취소하세요. Cmd+Shift+Z / Ctrl+Shift+Z로 다시 실행할 수 있습니다.

페이지 팔레트

비주얼 에디터는 현재 페이지를 분석하여 이미 사용 중인 모든 Tailwind 색상과 CSS 커스텀 속성을 표시합니다. 선택한 요소의 색상 선택기를 열면 이 페이지 팔레트에서 색상을 선택할 수 있어, 헥스 코드를 일일이 입력하지 않고도 기존 디자인 시스템과 일관성을 유지할 수 있습니다.

선택한 요소에 대해 AI에게 질문하기

속성 에디터로 표현하기 어려운 수정의 경우, 사이드바 하단의 Ask AI 입력란에 짧은 프롬프트를 입력하세요. 선택한 요소가 컨텍스트로 전달되므로, “이 카드를 더 컴팩트하게 만들어줘” 또는 “부드럽게 떠오르는 hover 효과를 추가해줘” 같은 프롬프트를 입력할 때 어떤 요소를 의미하는지 따로 설명할 필요가 없습니다.

정적 요소 vs 동적 요소

비주얼 에디터는 JSX에서 className과 텍스트 콘텐츠가 문자열 리터럴인 정적 요소에서 가장 잘 작동합니다. 동적 요소 (계산된 className, 조건부 렌더링, 표현식)의 경우, 에디터가 자동으로 구조화된 프롬프트와 함께 AI 채팅으로 전환됩니다.

비주얼 에디터는 언제 사용하나요?

비주얼 에디터는 작고 빠른 수정에 적합합니다:

오타 수정
간격 조정
색상 변경
버튼 텍스트 업데이트

새로운 섹션 추가, 레이아웃 재구성, 새 기능 추가와 같은 더 큰 변경에는 AI 채팅을 사용하세요.

변경 사항은 어떻게 저장하나요?

속성을 편집하면 변경 사항이 자동으로 저장됩니다. 파일은 런타임에 즉시 기록되며, AI 또는 사용자가 commit을 생성할 때 커밋됩니다.

FAQ

비주얼 편집을 취소할 수 있나요?

네. Cmd+Z / Ctrl+Z를 사용하여 취소할 수 있습니다. 비주얼 에디터는 자체적인 실행 취소/다시 실행 스택을 유지합니다.

일부 요소는 편집할 수 있는데 다른 요소는 왜 안 되나요?

정적 텍스트와 className 속성은 직접 편집할 수 있습니다. 동적이거나 계산된 값 (템플릿 리터럴, 삼항 표현식, 함수 호출)은 자동으로 AI 채팅으로 전환됩니다.

비주얼 에디터와 코드 에디터의 차이점은 무엇인가요?

도구	적합한 용도
Visual Editor	클릭으로 빠르게 속성 변경 (텍스트, 색상, 간격)
Code Editor	VS Code로 전체 소스 코드 편집
AI Chat	복잡한 변경, 새 기능 추가, 디버깅