캔버스 편집기
와이어프레임 편집 캔버스에서 화면을 디자인하고 다듬습니다. 왼쪽 사이드바에는 모든 그리기 및 선택 도구가 있고, 중앙은 요소를 배치하고 정렬하는 캔버스이며, 오른쪽 사이드바에는 선택된 요소의 속성이 표시됩니다.
도구
선택
캔버스에서 요소를 선택하고 이동하려면 클릭합니다. 선택된 요소는 오른쪽 사이드바에 속성을 표시합니다.
사각형
캔버스에 직사각형 컨테이너 요소를 그립니다.
원
캔버스에 원형 요소를 그립니다.
텍스트
텍스트 라벨과 콘텐츠 블록을 추가합니다.
이미지
이미지 플레이스홀더 요소를 배치합니다.
버튼
인터랙티브 버튼 요소를 추가합니다.
입력
폼 입력 필드를 추가합니다.
+ (화면 추가)
와이어프레임 프로젝트에 새 화면을 추가합니다.
잠긴 요소
AI 생성 화면은 기본적으로 잠금 상태입니다 — 잠금 해제하기 전까지 요소를 이동하거나 크기를 조절할 수 없습니다. Ctrl + D를 눌러 현재 화면의 모든 요소를 잠금 해제하고 재배치 및 편집에 대한 완전한 제어권을 확보하세요.
스토리보드 모드
스토리보드 모드에서는 모든 프레임과 연결 지점을 조감도로 볼 수 있습니다. 왼쪽 사이드바의 같은 버튼을 사용하여 단일 화면 캔버스와 스토리보드 모드 간 전환합니다. 스토리보드 모드에서 각 화면은 레이아웃 미리보기가 있는 카드로 표시됩니다.
스토리보드 기능
프레임 개요
요소 수와 시각적 미리보기와 함께 모든 화면을 한눈에 봅니다.
모달 설정
화면을 전체 페이지 대신 모달 오버레이로 표시합니다.
클릭하여 편집
프레임 카드를 클릭하여 상세 편집을 위한 캔버스 뷰로 이동합니다.
줌 컨트롤
왼쪽의 줌 컨트롤을 사용하여 스토리보드를 확대/축소합니다.
흐름 연결
프레임 간 흐름 작업을 통해 화면이 어떻게 연결되어 있는지 시각화합니다.
요소 속성
캔버스의 아무 요소나 더블클릭하여 해당 요소에 진입하고 오른쪽 사이드바에서 속성 패널을 엽니다. 패널에는 속성, 흐름, 색상 세 개의 탭이 있습니다. 여기서 각 요소의 위치, 크기, 스타일 및 동작을 편집할 수 있습니다.
속성 탭
위치 (X, Y)
캔버스에서 요소의 정확한 픽셀 위치를 설정합니다.
크기 (너비, 높이)
요소의 크기를 픽셀 단위로 설정합니다.
Z-Index (레이어 순서)
어떤 요소가 다른 요소 위에 나타나는지 제어합니다.
테두리 반경
숫자 값으로 모서리 둥글기를 설정하거나 Sharp, Rounded, Pill 프리셋을 사용합니다.
텍스트 콘텐츠
요소 내부에 표시되는 텍스트를 편집합니다.
색상 탭
선택된 요소의 배경, 테두리, 텍스트 색상을 커스터마이즈합니다.
Flows
흐름은 화면 간 작업과 탐색을 정의합니다. 흐름은 다른 페이지로 이동, 모달 열기, 다른 영역으로 라우팅과 같은 작업입니다. 캔버스의 작은 링크 아이콘은 어떤 요소에 흐름이 첨부되어 있는지 나타냅니다. AI 생성 중 프레임이 자동으로 서로 연결되며 흐름 연결도 생성됩니다.
흐름 설정
요소 선택
흐름을 추가하려는 요소를 클릭합니다.
흐름 탭 열기
오른쪽 사이드바에서 기존 연결을 보거나 새 연결을 추가하기 위해 흐름 탭으로 전환합니다.
연결 추가
Add First Connection(또는 + 버튼)을 클릭하여 새 흐름을 만듭니다. 연결할 대상 화면이나 프레임을 선택합니다.
캔버스에서 보기
연결된 요소가 캔버스에 작은 링크 아이콘을 표시하여 흐름 작업이 있음을 나타냅니다.
블록 연결
블록 연결을 사용하면 블록 라이브러리에서 와이어프레임 요소에 블록을 직접 연결할 수 있습니다. 요소를 더블클릭하고 속성 패널에서 아래로 스크롤하면 블록 연결 섹션을 찾을 수 있습니다. + 블록 추가를 클릭하여 블록(HTML, 컴포넌트 또는 템플릿)을 요소에 연결합니다. 연결된 블록은 AI로 코드를 생성할 때 참조되어 특정 HTML 또는 컴포넌트 코드를 와이어프레임 요소에 쉽게 첨부할 수 있습니다.
AI 편집
캔버스 하단의 AI 프롬프트 바를 사용하여 AI로 화면을 편집하거나 만들 수 있습니다. 왼쪽 드롭다운에서 AI 모델을 선택하고 원하는 변경 사항을 설명하면 AI가 와이어프레임을 수정합니다. 음성 입력이나 CLI 편집 버튼을 사용한 고급 편집도 가능합니다.
컨텍스트 인식 프롬프팅
단일 화면
단일 화면을 편집할 때 프롬프트 바에 "Editing 'Screen Name'"이 표시되며 AI 변경 사항은 해당 화면에만 적용됩니다.
스토리보드
스토리보드 모드에서 AI는 모든 프레임을 한 번에 편집하거나 기존 프레임을 참조하여 새 프레임을 빌드할 수 있습니다.
음성 입력
프롬프트 바의 마이크 아이콘을 사용하여 타이핑 대신 지시사항을 받아씁니다.
CLI 편집
더 많은 제어가 가능한 고급 편집 모드를 위해 CLI Edit를 클릭합니다.
내보내기 및 통합
와이어프레임을 내보내기, 가져오기 또는 프로젝트 생성 시나 프로젝트 허브 내에서 직접 사용할 수 있습니다. 이를 통해 디자인을 수동으로 다시 만들지 않고도 와이어프레임 디자인에서 작동하는 프로젝트로 쉽게 전환할 수 있습니다.