AI 인터랙션 빌더

개요

AI 인터랙션 빌더를 사용하면 자연어를 사용하여 인터랙션을 구축할 수 있으므로 트리거와 리액션을 수동으로 설정할 필요가 없습니다. 원하는 동작을 설명하면, Studio AI가 그에 맞는 인터랙션 로직을 생성합니다.

작동 방식

1. AI 패널을 엽니다

2. 원하는 인터랙션 요청을 자연어로 입력합니다

3. 보다 정확한 지정을 위해 @ 맨션을 사용하여 특정 레이어를 참조합니다

4. AI가 워크스페이스를 분석하고, 인터랙션을 계획한 다음, 단계별로 실행합니다

5. 결과를 검토하고 필요한 경우 수동으로 조정합니다

프롬프트 예시

기본 인터랙션:

• "탭할 때 @Button 색상 변경"

• "@Card 클릭 시 씬 2로 이동"

• "@Layer를 가로 방향으로만 드래그 가능하게 만들기"

복잡한 인터랙션:

• "우측 버튼의 색상과 텍스트를 변경하는 정지 및 시작 인터랙션을 추가해 줘. 그리고 그에 맞춰 타이머도 시작되고 정지되도록 해 줘."

• "이메일이 유효하지 않으면 버튼을 회색으로 변경"

• "토글 생성해 줘. 첫 번째 탭은 패널을 표시하고, 두 번째 탭은 패널을 숨김"

AI 방식 이해하기

프롬프트를 입력하면 Studio AI는 다음과 같은 단계를 거칩니다:

1. 워크스페이스 분석: 선택한 레이어, 기존 변수 및 씬 컨텍스트를 검토합니다

2. 인터랙션 계획: 실행하려는 단계의 요약을 보여줍니다

3. 단계별 실행: 영향을 받는 레이어를 하이라이트 표시하면서 트리거, 리액션 및 공식을 생성합니다

4. 완료 확인: 완료 상태를 표시하고 필요한 경우 되돌릴 수 있는 옵션을 제공합니다

컨텍스트 인식

Studio AI는 워크스페이스의 컨텍스트를 이해합니다:

• 선택된 레이어: 현재 선택한 레이어를 참조합니다

• 기존 변수: 중복 생성하는 대신 가능한 경우 기존 변수를 재사용합니다

• 씬 구조: 레이어 계층 구조와 그룹화를 이해합니다

• 이전 인터랙션: 동일한 세션 내의 이전 요청을 기억합니다

AI 결과 조작하기

생성된 인터랙션 검토:

• AI가 생성한 요소는 멘션될 때 캔버스에 색상 테두리로 하이라이트 표시됩니다

• 속성 패널에 모든 인터랙션 상세 정보가 표시됩니다

• 채팅에서 AI의 설명 섹션을 펼치거나 접을 수 있습니다

편집 및 미세 조정:

• AI가 생성한 모든 인터랙션은 Studio 인터페이스를 통해 완전히 편집할 수 있습니다

• 속성 패널, 인터랙션 패널 또는 캔버스에서 직접 변경할 수 있습니다

• AI는 수동 편집을 인식하고 후속 요청 시 이를 반영합니다

중지 및 되돌리기

중지: 실행 중에 [중지]를 클릭하여 취소합니다. 변경 사항은 자동으로 되돌려집니다.

되돌리기: 완료 후, [되돌리기]를 클릭하여 AI의 가장 최근 변경 사항을 실행 취소합니다. 되돌리기는 캔버스를 수동으로 편집하기 전까지만 사용할 수 있습니다.

중지 시 진행 상태:

• 태스크 완료 후 중지된 경우: 편집 내용을 유지하고 태스크 블록이 일시 정지됩니다

• 태스크 진행 중 중지된 경우: 편집 내용을 되돌리고 프롬프트 입력창으로 돌아갑니다

제한 사항

베타 기간 동안 AI 인터랙션 빌더는 다음과 같은 제한 사항이 있습니다:

• VLM 미지원: AI는 캔버스의 시각적 디자인을 '볼' 수 없으며, 레이어 구조와 속성 데이터만 읽습니다

• 기존 레이어에 대한 인터랙션만 생성합니다 (새로운 디자인이나 레이아웃은 생성하지 않음)

• 매우 복잡한 조건부 로직의 경우 정밀 조정이 필요할 수 있습니다

• 컴포넌트 내부의 인터랙션 생성 및 수정은 불가능합니다

• 채팅 기록은 세션 간에 저장되지 않습니다