Kaiju Hub AI

와이어프레임

Wireframes welcome screen with Create Wireframe button

환영

와이어프레임 영역에서는 UI 레이아웃을 시각적으로 디자인하고 프로토타입할 수 있습니다. 코딩 전에 앱 구조를 계획하기 위한 와이어프레임을 만드세요. 와이어프레임을 처음 열면 시작할 수 있는 와이어프레임 만들기 카드가 있는 환영 화면이 표시되거나, 오른쪽 상단의 + 새 와이어프레임 버튼을 사용하세요.

주요 기능

수동 디자인

시각적 캔버스 편집기를 사용하여 수동으로 와이어프레임을 빌드합니다 — 컴포넌트를 드래그 앤 드롭하여 화면을 디자인합니다.

AI 기반 생성

원하는 것을 설명하면 AI가 와이어프레임 문서와 프레임을 자동으로 생성합니다.

음성 입력

내장 마이크 버튼이나 중간 클릭을 사용하여 음성으로 와이어프레임 설명을 받아씁니다.

와이어프레임을 코드로

와이어프레임이 준비되면 코드 생성으로 직접 전송합니다 — 디자인에서 작동하는 코드까지 하나의 원활한 워크플로우로 진행됩니다.

와이어프레임 만들기

Create New Wireframe Project dialog showing title, platform selection, and Manual/AI-Powered tabs

와이어프레임 만들기 또는 + 새 와이어프레임을 클릭하여 생성 대화 상자를 엽니다. 제목을 입력하고, 대상 플랫폼(모바일, 데스크톱 또는 웹)을 선택하고, 와이어프레임 설명을 작성하고, 수동 모드 또는 AI 기반 모드를 선택합니다.

프로젝트 설정 필드

제목

와이어프레임 목록에서 나중에 식별할 수 있도록 와이어프레임 프로젝트에 이름을 지정합니다.

플랫폼

와이어프레임 레이아웃과 제약 조건을 조정하기 위해 대상 플랫폼 — Mobile, Desktop 또는 Web — 을 선택합니다.

설명

빌드하고 싶은 것을 설명합니다. AI 기반 모드에서 문서와 프레임을 생성하는 데 사용됩니다. 마이크 버튼을 통한 음성 입력을 지원합니다.

모드

캔버스 편집기로 바로 이동하려면 Manual을, AI가 문서와 프레임을 생성하게 하려면 AI-Powered를 선택합니다.

수동 모드

수동 탭을 선택하고 만들기를 클릭하면 와이어프레임 캔버스 편집기로 바로 이동하여 즉시 화면 구축을 시작할 수 있습니다. 디자인에 대한 명확한 아이디어가 있고 처음부터 완전한 제어를 원할 때 가장 좋은 옵션입니다.

수동 사용 시기

•

특정 디자인이 있고 직접 구축하고 싶을 때.

•

다듬기 전에 대략적인 레이아웃을 빠르게 스케치하고 싶을 때.

•

처음부터 모든 요소를 완전히 제어하고 싶을 때.

AI 기반 모드

AI-Powered wireframe creation with title, platform, description, Define Frames tab, model selector, and Generate button

AI 기반 탭을 선택하면 추가 옵션이 나타납니다. 설명을 입력하거나 음성으로 입력하고, 선택적으로 개별 프레임을 정의하고, 상단 드롭다운에서 원하는 AI 모델을 선택한 다음 생성을 클릭하여 AI가 와이어프레임 문서를 만들도록 합니다.

작동 방식

1

세부 정보 입력

제목을 입력하고, 플랫폼을 선택하며, 프로젝트 설명을 작성합니다.

2

프레임 정의 (선택 사항)

AI가 생성할 개별 화면이나 뷰를 지정하기 위해 프레임 정의 탭으로 전환합니다.

3

AI 모델 선택

드롭다운에서 선호하는 AI 모델을 선택합니다 (예: Claude Code, Opus 4.6).

4

Generate

Generate를 클릭하여 AI 문서 생성을 시작합니다. 문서가 생성되는 동안 와이어프레임 프로젝트가 목록에 나타납니다.

5

프레임 빌드

문서가 완료되면 와이어프레임 편집기에서 각 개별 프레임을 생성할 수 있습니다.

AI로 향상

Enhance with AI dialog showing AI Model selection, Enhancement Instructions field, and Enhance Description button

AI 기반 모드에서 AI로 향상 버튼을 클릭하면 AI를 사용하여 설명을 향상할 수 있는 대화 상자가 열립니다. 설명 필드에 작성한 내용을 가져와 지시에 따라 개선합니다 — 와이어프레임을 생성하기 전에 더 자세하고, 구조화되고, 포괄적으로 만듭니다.

향상 옵션

AI Model

설명 향상에 사용할 AI 모델을 선택합니다 (예: Claude Code, Opus 4.6).

향상 지시사항

선택적으로 AI가 설명을 개선하는 방법에 대한 구체적인 지시사항을 제공합니다. 음성 입력을 지원합니다.

설명 향상

향상을 실행하려면 클릭합니다. AI가 입력과 지시사항을 기반으로 설명을 다시 작성하고 개선합니다.

문서 생성

Wireframes list showing a project card with Generating Documentation status

AI 기반 모드에서 생성을 클릭하면 와이어프레임 프로젝트가 문서 생성 중... 상태로 와이어프레임 목록에 나타납니다. AI가 정의한 제목, 플랫폼, 설명 및 프레임을 기반으로 프로젝트의 구조화된 문서를 생성하고 있습니다.

다음 단계

1

문서 생성

AI가 설명을 기반으로 각 화면, 컴포넌트, 레이아웃을 정의하는 구조화된 문서를 만듭니다.

2

프레임 생성

문서가 완료되면 와이어프레임을 열고 편집기에서 각 개별 프레임을 생성할 수 있습니다.

3

다듬기

프레임이 생성된 후 캔버스 편집기에서 컴포넌트를 수동으로 조정, 추가, 제거하여 디자인을 미세 조정할 수 있습니다.

Kaiju Hub AI에 표시된 모든 타사 로고, 상표 및 브랜드 이름은 해당 소유자의 자산입니다. 이러한 사용은 식별 목적으로만 사용되며 보증, 후원 또는 제휴를 의미하지 않습니다.