Visual Editor

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

Visual Editor를 사용하면 요소를 클릭하고 속성을 직접 편집하여 앱의 UI를 변경할 수 있습니다. 빌더 툴바에서 Visual 모드로 전환하면 활성화됩니다.

작동 방식

Visual 모드로 전환하세요 — 툴바의 Preview 하위 모드입니다 (툴바의 두 영역은 Preview와 Admin입니다)
프리뷰에서 요소 위에 마우스를 올리면 오버레이로 강조 표시됩니다
요소를 클릭하여 선택하세요
사이드바 패널에서 속성을 편집하세요: 텍스트, 색상, 간격, 폰트, 테두리, 이미지, 효과

변경 사항은 즉시 프리뷰에 적용되고 소스 파일에 저장됩니다. 사이드바의 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
폰트 스타일 — 이탤릭 토글
텍스트 정렬 — left, center, right, justify
텍스트 색상 — 모든 Tailwind 색상
배경 색상 — 모든 Tailwind 색상
간격 — 전체 방향의 패딩 및 마진
테두리 — 너비, 색상, 모서리 반경 (텍스트 콘텐츠가 없는 컨테이너 요소에서 사용 가능)
이미지 — 스톡 사진 검색으로 교체하거나 직접 이미지 업로드 (img 요소 및 배경 이미지에 적용)
효과 — 그림자 및 불투명도

실행 취소 / 다시 실행

변경 사항을 되돌리려면 Cmd+Z (Mac) 또는 Ctrl+Z (Windows)를 사용하세요. 다시 실행은 Cmd+Shift+Z / Ctrl+Shift+Z입니다.

페이지 팔레트

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

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

속성 편집기로 표현하기 어려운 수정이 필요할 때는 사이드바 하단의 Ask AI 입력창에 짧은 프롬프트를 입력하세요. 선택한 요소가 컨텍스트로 전달되므로, “이 카드를 더 compact하게 만들어 줘” 또는 “hover 시 살짝 떠오르는 효과를 추가해 줘” 같은 프롬프트를 어떤 요소인지 설명하지 않아도 바로 사용할 수 있습니다.

정적 요소 vs 동적 요소

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

Visual Editor는 언제 사용해야 하나요?

Visual Editor는 작고 빠른 수정에 최적입니다:

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

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

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

속성을 편집하면 변경 사항이 자동으로 저장됩니다. 파일은 런타임에 즉시 기록되며, 다음 빌더 턴이 commit될 때 버전 히스토리에 반영됩니다.

FAQ

시각적 편집을 되돌릴 수 있나요?

네. Cmd+Z / Ctrl+Z를 사용하여 되돌릴 수 있습니다. Visual Editor는 자체적인 실행 취소/다시 실행 스택을 유지합니다.

일부 요소는 편집할 수 있고 일부는 편집할 수 없는 이유는 무엇인가요?

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

AI 채팅 대신 Visual Editor를 언제 사용해야 하나요?

도구	최적 용도
Visual Editor	클릭으로 빠르게 속성 변경 (텍스트, 색상, 간격)
AI Chat	복잡한 변경, 새 기능 추가, 디버깅

앱을 변경하는 방법은 이 두 가지뿐입니다 — 별도의 코드 에디터는 없습니다. 코드 편집 및 접근 방법을 참고하세요.