AI 인터랙션 제작

개요

AI 인터랙션 제작 기능을 사용하면 자연어로 인터랙션을 구축할 수 있어, 트리거와 리스폰스를 수동으로 설정하는 번거로움을 덜 수 있습니다. 원하는 동작을 설명하기만 하면 Studio AI가 적절한 인터랙션 로직을 생성합니다.

사용 방법

1. AI 패널을 열어주세요
2. 자연어로 인터랙션 요청을 입력합니다
3. 정확도를 높이기 위해 @ 멘션을 사용하여 특정 레이어를 참조합니다
4. AI가 워크스페이스를 분석하고, 인터랙션을 계획한 뒤, 단계별로 실행합니다
5. 결과를 검토하고 필요시 수동으로 인터랙션 세부 사항을 조정 합니다

프롬프트 예시

기본 인터랙션:

• "@Button 탭 시 색상 변경"
• "@Card 클릭 시 Scene 2로 이동"
• "@Layer를 가로로만 드래그 가능하게 설정"

복잡한 인터랙션:

• "오른쪽 버튼의 색상과 텍스트를 변경하는 Stop 및 Start 인터랙션을 추가해줘. 여기에 맞춰 타이머도 시작하고 멈춰줘."
• "이메일이 유효하지 않으면 버튼을 회색으로 변경"
• "토글을 만들어줘. 한 번 탭하면 패널이 보이고, 두 번째 탭하면 숨겨지게 해줘."

AI 프로세스 이해하기

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

1. 워크스페이스 분석: 택된 레이어, 기존 변수, 씬(Scene) 맥락을 검토합니다.
2. 인터랙션 계획: 실행하려는 단계의 요약을 보여줍니다
3. 단계별 실행: 영향을 받는 레이어를 강조 표시하면서 트리거, 리스폰스, 수식을 생성합니다
4. 완료 확인: 완료 상태를 표시하고 필요한 경우 되돌리기 옵션을 제공합니다
   

맥락 인식

Studio AI는 워크스페이스의 맥락을 이해합니다:

• 선택된 레이어: 사용자가 선택한 레이어를 참조합니다
• 기존 변수:  중복 생성을 피하고 적절한 경우 기존 변수를 재사용합니다
• 씬(Scene) 구조:  레이어 계층 구조와 그룹링을 이해합니다
• 이전 인터랙션: 동일한 세션 내의 이전 요청을 기억합니다

AI 결과물 활용하기

생성된 인터랙션 검토:

• AI가 생성한 요소가 멘션될 때 캔버스에서 유색 테두리로 강조 표시됩니다
• 속성(Properties) 패널에 모든 인터랙션 세부 정보가 표시됩니다
• 채팅창에서 AI의 설명 섹션을 펼치거나 접을 수 있습니다

편집 및 다듬기:

• AI가 생성한 모든 인터랙션은 Studio 인터페이스를 통해 완전히 편집 가능합니다
• 속성 패널, 인터랙션 패널 또는 캔버스에서 직접 변경할 수 있습니다
• AI는 사용자의 수동 편집 내용을 인식하고 후속 요청에 이를 반영합니다

중지 및 되돌리기

중지: 실행 중에 [Stop(중지)]을 클릭하여 취소할 수 있습니다.  변경 사항은 자동으로 되돌려집니다. .

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

중지 시 나타나는 AI 동작:

• 태스크 완료 후 중지한 경우: 편집 내용은 유지되고 태스크 블록은 정지됩니다
• 태스크 진행 중 중지한 경우: 편집 내용을 되돌리고 프롬프트 입력창으로 돌아갑니다

제한 사항

베타 기간 동안 AI 인터랙션 제작 기능의 제한 사항은 다음과 같습니다:

• VLM 미지원:  AI는 캔버스상의 시각적 디자인을 "볼 수 없으며”, 레이어 구조와 속성 데이터만 읽습니다
• 기존 레이어에 대한 인터랙션 생성 (새로운 디자인이나 레이아웃은 생성하지 않음)
• 매우 복잡한 조건부 로직의 경우 수정이 필요할 수 있음
• 컴포넌트(Component) 내부의 인터랙션은 생성하거나 수정할 수 없음
• 채팅 기록은 세션 간에 저장되지 않음