캡처 도구

AI에게 정확한 시각적 맥락을 제공하세요. 스크린샷, 요소 선택, 이미지.

AI에게 더 정확한 시각적 맥락을 제공할수록 편집 결과가 더 좋아집니다. Proyecta는 여러 가지 캡처 도구를 제공합니다.

요소 선택 (Visual Editor)

Visual Editor 모드에서는 미리보기의 모든 요소를 클릭할 수 있습니다. 마우스를 올리면 하이라이트되고, 클릭하면 선택됩니다. 선택된 요소는 오버레이로 강조 표시되며, 편집 가능한 속성(텍스트, 색상, 간격, 폰트, 테두리, 효과)이 사이드바 패널에 나타납니다.

요소를 선택한 후 다음 중 하나를 수행할 수 있습니다:

직접 편집 — 프롬프트를 작성하지 않고 인라인으로 속성 변경
AI에게 질문 — 선택 항목이 맥락으로 전달되므로 "이 버튼을 더 크게 만들어줘" 또는 "이 섹션을 히어로 위로 옮겨줘" 와 같이 말하면 AI가 정확히 무엇을 의미하는지 파악합니다

동적 요소(계산된 className, 조건부 렌더링, 표현식)는 구조화된 프롬프트와 함께 자동으로 AI 채팅으로 전환됩니다.

편집 가능한 속성의 전체 목록은 Visual Edit을 참조하세요.

채팅에 스크린샷 붙여넣기 또는 드래그하기

채팅 입력창은 이미지를 직접 받아들입니다:

붙여넣기 — OS 단축키(Mac의 경우 Cmd+Shift+4, Windows의 경우 Win+Shift+S)로 스크린샷을 복사한 후 채팅에 붙여넣기
드래그 — 이미지 파일을 채팅 입력창으로 드롭

지원 형식: PNG, JPEG, WebP, GIF, AVIF. 최대 크기: 이미지당 10 MB.

미리보기 스크린샷

AI는 내장된 preview_screenshot 도구를 통해 언제든지 미리보기 스크린샷을 직접 찍을 수 있습니다. 스크린샷 결과는 채팅 인라인에 표시됩니다. AI는 변경 사항을 확인하거나 앱의 현재 상태를 파악해야 할 때 이 기능을 자동으로 실행합니다.

스크린샷 도구는 특정 경로(예: /dashboard, /settings)를 대상으로 지정할 수 있으며 치수를 캡처하므로, AI가 레이아웃과 간격을 파악하는 데 도움이 됩니다.

FAQ

AI가 특정 버튼이나 텍스트를 인식하게 하려면 어떻게 하나요?

Visual Editor 모드를 사용하여 해당 요소를 클릭하세요. 그러면 정확하고 구조화된 참조가 AI에 전달됩니다 — 요소를 말로 설명하는 것보다 훨씬 효과적입니다.

곧 출시 예정

다음 캡처 도구는 내부적으로 구현되었으나 아직 UI에 노출되지 않았습니다:

Annotate — 현재 미리보기를 캡처하고 AI에 전송하기 전에 화살표, 사각형, 원, 자유 선, 텍스트 레이블을 그릴 수 있습니다.
Screen Record — 다단계 인터랙션(클릭, 네비게이션, 애니메이션)을 녹화하고 캡처된 프레임을 채팅 메시지에 첨부합니다. 단일 스크린샷으로는 캡처하기 어려운 타이밍에 민감한 버그에 이상적입니다.