바운딩 박스
개요
바운딩 박스는 리버스 엔지니어링의 핵심 상호작용 모델입니다. 이미지를 업로드한 후 개별 UI 요소 주변에 직사각형 박스를 그려 분리합니다. 각 바운딩 박스는 동작을 할당하거나, 코드로 변환하거나, 와이어프레임 컴포넌트로 내보낼 수 있는 선택 가능한 영역이 됩니다.
화면 흐름 및 그룹
화면 흐름 캔버스를 사용하면 리버스 엔지니어링 작업을 그룹으로 구성할 수 있습니다. 각 그룹에는 여러 화면 이미지를 포함할 수 있으며 화면(메인 페이지, 섹션 또는 뷰) 또는 모달(오버레이, 대화 상자, 팝업, 드로어)로 분류할 수 있습니다. 그룹을 더블클릭하여 열고 이미지를 작업하세요.
수동 박싱
박스 도구 선택
이미지 캔버스 위의 도구 모음에서 바운딩 박스 그리기 도구를 선택합니다.
박스 그리기
이미지에서 클릭하고 드래그하여 UI 요소 — 버튼, 카드, 탐색 바, 히어로 섹션 또는 모든 컴포넌트 — 주변에 직사각형 박스를 그립니다.
크기 조정 및 조절
박스의 가장자리나 모서리를 드래그하여 위치와 크기를 미세 조정합니다. 대상 요소를 꼭 맞게 감싸도록 합니다.
동작 할당
박스를 선택하고 요소가 수행할 작업을 정의합니다 — 예를 들어, "모달 열기", "/about으로 이동", "드롭다운 메뉴 토글".
AI 자동 박싱
모든 박스를 수동으로 그리는 대신 AI 자동 박싱을 사용하여 Kaiju Hub AI이 이미지에서 UI 요소를 자동으로 감지하고 윤곽을 그립니다. AI가 시각적 레이아웃을 분석하고 헤더, 버튼, 카드, 입력, 이미지, 탐색 항목과 같은 감지된 컴포넌트 주변에 바운딩 박스를 생성합니다.
원클릭 감지
자동 박스 버튼을 클릭하면 AI가 전체 이미지를 스캔하여 감지된 모든 UI 요소 주변에 바운딩 박스를 생성합니다.
감지 후 편집
자동 감지된 박스는 완전히 편집 가능합니다. 결과를 다듬기 위해 이동, 크기 조정, 삭제하거나 새 박스를 추가합니다.
선택적 재감지
레이아웃의 일부에만 박스가 필요한 경우 이미지의 특정 영역에서 자동 감지를 실행합니다.
동작 지시
바운딩 박스의 힘은 각 요소가 수행하는 작업을 지시하는 데 있습니다. 요소를 박싱한 후 생성된 코드 또는 와이어프레임에 반영될 인터랙티브 동작을 할당할 수 있습니다:
모달 열기
요소를 클릭하면 모달/대화 상자가 열립니다. 모달에 표시할 콘텐츠를 지정합니다.
섹션으로 이동
요소가 앱의 다른 페이지나 섹션으로 이동하는 링크 또는 버튼 역할을 합니다.
콘텐츠 토글
요소가 관련 콘텐츠를 표시하거나 숨깁니다 — 드롭다운, 아코디언, 확장 가능한 패널.
폼 제출
요소가 폼 유효성 검사 및 제출 로직을 트리거합니다.
커스텀 액션
커스텀 동작 설명을 정의하면 AI가 적절한 이벤트 핸들러와 로직을 생성합니다.