리버스 엔지니어링
리버스 엔지니어링이란?
리버스 엔지니어링은 Kaiju Hub AI의 바운딩 박스 기반 이미지-투-코드 및 이미지-투-와이어프레임 도구입니다. 스크린샷, 디자인 목업, UI 사진 등 이미지를 업로드하고 바운딩 박스를 사용하여 이미지의 각 요소가 수행할 작업을 식별하고 지시합니다. 결과를 작동하는 코드 또는 와이어프레임 레이아웃으로 변환합니다.
리버스 프로젝트 생성
+ 새 리버스 엔지니어링 프로젝트 버튼을 클릭하여 새 프로젝트를 만듭니다. 이름과 설명을 지정하여 리버스 엔지니어링 작업을 체계적으로 관리하세요.
작동 방식
이미지 업로드
리버스 엔지니어링 도구에 스크린샷, 디자인 목업 또는 UI 이미지를 업로드합니다.
바운딩 박스 그리기 또는 자동 감지
UI 요소 주변에 바운딩 박스를 수동으로 그리거나 AI 자동 박싱을 사용하여 요소를 자동으로 감지합니다. 각 박스는 이미지의 고유한 컴포넌트를 강조 표시합니다.
요소 동작 지시
각 바운딩 박스에 대해 수행될 작업을 정의합니다 — 예를 들어, 버튼 클릭으로 모달 열기, 탐색 링크로 다른 섹션 이동, 카드로 특정 콘텐츠 표시.
코드 또는 와이어프레임 생성
주석이 달린 이미지를 대상 프레임워크의 작동하는 컴포넌트 코드로 변환하거나, 와이어프레임 도구에서 추가 편집을 위한 와이어프레임 레이아웃으로 내보냅니다.
주요 기능
이미지 업로드
드래그 앤 드롭이나 탐색으로 이미지를 업로드합니다 — 스크린샷, 목업, 손으로 그린 스케치 사진, 기존 앱 UI.
바운딩 박스 주석
개별 UI 요소 주변에 정밀한 바운딩 박스를 그려 코드 생성 또는 동작 할당을 위해 분리합니다.
AI 자동 박싱
AI가 이미지의 UI 요소를 자동으로 감지하고 박싱하여 많은 컴포넌트가 있는 복잡한 레이아웃의 시간을 절약합니다.
동작 지시
박싱된 요소에 동작을 할당합니다 — 생성된 코드에서 각 요소를 클릭, 호버링, 상호작용할 때 수행할 작업을 정의합니다.
이중 출력
작동하는 코드(대상 프레임워크) 또는 와이어프레임 도구에서 추가로 다듬을 수 있는 와이어프레임 레이아웃을 생성합니다.