비주얼 편집 모드

Visual Edit 모드는 화면에서 요소를 직접 선택하여 AI에게 수정을 요청하는 기능입니다.

---

왜 사용하나요?

문제 상황

"버튼 색상을 바꿔줘"

→ AI: "어떤 버튼인가요? 여러 개의 버튼이 있습니다."

Visual Edit로 해결

1. Visual Edit 모드 활성화

2. 수정할 버튼 클릭

3. "이 버튼 색상을 빨간색으로 바꿔줘"

→ AI가 정확히 어떤 버튼인지 알고 수정

---

사용 방법

Step 1: Visual Edit 모드 활성화

Chat 패널 하단의 🎯 버튼을 클릭합니다.

버튼이 파란색으로 변하면 활성화된 상태입니다.

Step 2: 요소 선택

Preview에서 수정할 요소를 클릭합니다.

• 마우스를 올리면 요소가 하이라이트됨

• 클릭하면 선택됨

Step 3: 선택 정보 확인

선택된 요소의 정보가 Chat 패널에 표시됩니다.

🎯 <button> | src/App.js:42

정보	설명
태그명	HTML 요소 종류 (button, input, div 등)
파일 경로	해당 코드가 있는 파일
라인 번호	코드의 정확한 위치

Step 4: 수정 요청

선택된 요소에 대한 수정을 요청합니다.

이 버튼의 텍스트를 "저장하기"로 바꾸고 색상은 초록색으로 해줘

AI는 선택된 요소의 정확한 위치를 알고 있으므로 해당 부분만 수정합니다.

---

Right 패널

요소를 선택하면 오른쪽에 상세 정보 패널이 열립니다.

표시 정보

항목	설명
태그명	<button>, <input>, <table> 등
파일 위치	src/components/Form.js:28
ID	요소의 id 속성 (있는 경우)
Class	요소의 class 속성
현재 스타일	적용된 CSS 스타일

닫기

Right 패널의 X 버튼 또는 다른 곳 클릭으로 닫습니다.

---

선택 해제

방법 1: X 버튼

Chat 패널의 요소 칩에서 X 버튼 클릭

🎯 <button> | src/App.js:42  [X]

방법 2: 빈 영역 클릭

Preview에서 요소가 아닌 빈 영역 클릭

방법 3: 모드 비활성화

🎯 버튼을 다시 클릭하여 Visual Edit 모드 비활성화

---

활용 예시

특정 버튼 수정

1. 버튼 선택
2. "이 버튼을 더 크게 만들고, 아이콘을 추가해줘"

테이블 열 추가

1. 테이블 선택
2. "이 테이블에 '상태' 열을 추가해줘"

입력 필드 수정

1. 입력 필드 선택
2. "이 입력 필드에 placeholder를 '이메일을 입력하세요'로 해줘"

레이아웃 수정

1. 컨테이너/div 선택
2. "이 영역의 배경색을 연한 회색으로 바꾸고 패딩을 추가해줘"

모달 수정

1. 모달 내부 요소 선택
2. "이 모달의 너비를 더 넓게 하고 제목을 '직원 정보 수정'으로 바꿔줘"

---

선택 팁

중첩된 요소

요소가 중첩되어 있을 때는 원하는 요소가 선택될 때까지 클릭 위치를 조정합니다.

더 구체적인 위치를 클릭하면 더 내부의 요소가 선택됩니다.

• 버튼 가장자리 클릭 → 버튼 자체 선택

• 버튼 텍스트 클릭 → 텍스트 span 선택

보이지 않는 요소

숨겨진 요소(모달, 드롭다운 등)는 먼저 표시 상태로 만든 후 선택합니다.

1. 모달을 여는 버튼 클릭 → 모달 열림

2. Visual Edit 모드에서 모달 내부 요소 선택

동적 요소

리스트 항목처럼 반복되는 요소는 하나를 선택하면 해당 컴포넌트 전체에 적용됩니다.

---

제한사항

선택 불가능한 경우

• 아직 렌더링되지 않은 요소

• CSS로 완전히 숨겨진 요소 (display: none)

• iframe 내부 요소

수정 불가능한 경우

• 외부 라이브러리의 내부 구조

• package.json에 정의된 의존성

---

Visual Edit vs 프롬프트만 사용

상황	권장 방법
특정 요소 1개 수정	Visual Edit
여러 요소 일괄 수정	프롬프트
새 기능 추가	프롬프트
전체 디자인 변경	프롬프트
"이 버튼"처럼 지칭하고 싶을 때	Visual Edit

---

팁

Visual Edit + 구체적 설명 조합

요소를 선택한 후 구체적으로 설명하면 최상의 결과를 얻습니다.

[버튼 선택 후]
"이 버튼을:
- 너비 100%로
- 높이 48px로
- 배경색 #2563eb로
- 텍스트 '저장하기'로
- 호버 시 약간 어둡게"

빠른 선택 해제

실수로 잘못된 요소를 선택했다면 요소 칩의 X 버튼으로 빠르게 해제할 수 있습니다.