요소 선택하기
툴바의 Edit 도구를 사용하세요. Edit가 활성화된 상태에서 라이브 프레임 내부를 클릭하면 커서 아래의 요소가 선택됩니다. 선택된 요소에는 하이라이트 윤곽선이 표시되고 Agent에게 변경을 요청할 수 있는 인라인 프롬프트가 나타납니다.Edit는 Canvas에 프레임이 하나 이상 있을 때만 활성화되며, 데스크톱 전용입니다.
선택된 요소에 작업하기
Agent에게 변경 요청하기
인라인 프롬프트를 사용하여 요소의 텍스트, 색상, 레이아웃, 간격, 동작을 업데이트하도록 Agent에게 요청하세요.
요소 검사하기
프레임별 액션 바의 Inspect 버튼을 통해 요소를 검사하면 해당 요소를 타겟팅하는 Visual Editor가 열립니다.
Inspect는 프레임이 포커스 모드에 있고 요소가 선택 가능한 DOM 노드인 경우에만 사용 가능합니다.
Visual Editor
요소를 선택하면 Visual Editor가 열립니다 — 인라인 프롬프트와 함께 있는 오른쪽 패널입니다. 패널은 모든 컨트롤을 명확한 섹션으로 그룹화하여 필요한 것을 더 빠르게 찾을 수 있게 합니다: Text, Layout, Color, Border. (이미지 요소를 선택하면 Image 섹션도 나타납니다.)
Layout
Layout 섹션에서는 Agent 없이 컨테이너 내의 자식 요소 배치를 조정할 수 있습니다. flex 컨테이너를 선택하고 Layout을 펼치면 다음을 확인할 수 있습니다:- Alignment: 컨테이너 내에서 두 축을 따라 항목이 배치될 위치를 선택하는 3×3 점 선택기.
- Direction: 자식을 행 또는 열로 쌓는 두 개의 화살표 버튼.
- Gap: 항목 사이의 픽셀 값. Gap 입력 옆의 아이콘은 현재 방향에 맞게 변경되므로 수평 또는 수직 간격을 조정하는지 항상 알 수 있습니다. 옆의 화살표 아이콘은 항목 사이에 공간 분배를 토글하여 자식을 컨테이너의 반대쪽 끝으로 밀어냅니다.
- Outer space: 요소 외부 공간의 면별 입력(각 면당 하나의 입력, 네 면을 모두 한 번에 고정하는 링크 토글 포함).
- Inner space: 각 축을 따라 요소 내부 공간에 대한 입력, 두 축을 동시에 조정하는 링크 토글 포함.
관련 페이지
- Canvas — 개요 및 구조.
- Frames — Elements가 위치하는 컨테이너.
- Toolbar — Edit 도구가 있는 위치.
- Visual Editor — 전체 요소 편집 안내.