AI 패널 인터페이스

패널 상태

AI 패널은 작동 중에 다음과 같은 상태를 표시합니다:

대기 상태 (Idle State):  입력을 기다리는 상태입니다. 채팅 기록이 없을 때는 시작을 돕기 위해 4개의 추천 프롬프트가 표시됩니다. 추천 프롬프트를 클릭하면 입력 필드에 내용이 채워지며, 프롬프트는 입력만 되어 자동으로 전송되지는 않습니다.

처리 중 상태 (Processing State): AI가 요청을 분석 중인 상태입니다. "불러오는 중(Fetching)..." 또는 "분석 중(Analyzing)..."과 같은 상태 표시가 나타납니다.

편집 상태 (Editing State): AI가 프로토타입을 활발하게 수정 중인 상태입니다. 캔버스 하단에 "ProtoPie AI가 제어 중입니다(ProtoPie AI is taking control)"라는 배너와 함께, 필요한 경우 취소할 수 있는 [중지(Stop)] 버튼이 표시됩니다.

채팅 동작 방식

• 제출된 프롬프트는 채팅 영역 상단에 표시됩니다
• 채팅 기록은 세션 간에 저장되지 않습니다 (탭을 닫거나 리셋하면 기록이 삭제됩니다)
• 새로 시작하려면 패널 헤더의 리셋 버튼을 클릭하세요

Using @ Mentions

프롬프트에 @를 입력하여 특정 레이어를 멘션하세요. 이를 통해 AI에게 더 명확한 맥락을 제공하고, 단순히 이름으로 레이어를 설명하는 것보다 더 정교한 인터랙션을 생성할 수 있습니다.

예: "@ButtonLayer 탭 시 회색으로 변경"

답변 제어

AI가 응답한 후 다음과 같은 옵션을 사용할 수 있습니다:

👍 / 👎 피드백: AI 성능 향상을 위해 답변 품질을 평가해 주세요. 전체 답변 내용(코드 블록 포함)을 클립보드로 복사합니다.

답변 복사: 전체 답변 내용(코드 블록 포함)을 클립보드로 복사합니다.

다시 쓰기: 동일한 프롬프트에 대해 다른 답변을 다시 생성합니다.

• 가장 최근 답변에만 사용할 수 있습니다
• 새 프롬프트를 보내거나 수동으로 편집하면 사라집니다

AI 답변 유형

Studio AI는 요청에 따라 다양한 형식의 답변을 제공합니다:

텍스트 답변

헤더, 본문 텍스트, 링크, 인라인 코드, 인용구, 표 등의 서식을 지원하는 일반 텍스트 설명입니다. 설명, 문서 관련 답변, 일반적인 응답에 사용됩니다.

Mermaid 다이어그램

플로우차트, 사용자 흐름도(User flows) 또는 기타 다이어그램을 그려달라고 요청하면 AI가 Mermaid.js 구문을 사용하여 시각적 다이어그램을 생성할 수 있습니다. 플로우차트는 워크스페이스 내의 기존 객체와 인터랙션을 기반으로 합니다. 다이어그램은 인터랙티브 이미지로 렌더링되며 다음 옵션을 제공합니다:

• 코드 복사:  Mermaid.js 소스 코드 복사
• 이미지로 다운로드: 렌더링된 다이어그램을 .svg 파일로 저장

수식(Formula) 블록

ProtoPie 수식 전용 코드 블록으로, 다음과 같이 표시됩니다:

• 구문 강조 (Syntax highlighting)
• Copy(복사) 버튼
• ProtoPie 수식 문서로 이동하는 How to use 링크

코드 블록 (Code Block)

언어 라벨, 구문 강조, Copy(복사) 버튼이 포함된 일반 코드 예제(JSON, JavaScript 등)입니다.

리소스 카드

AI가 문서를 참조할 때 인터랙티브 리소스 카드를 표시합니다:

공식 기사: 아이콘, 아티클 제목 및 이동 경로(Breadcrumb), "Official Article" 라벨

YouTube 동영상: 동영상 썸네일, "Youtube Video" 라벨

외부 링크: URL이 포함된 지구본 아이콘

여러 리소스가 있을 경우 페이지네이션이 있는 캐러셀 형태로 표시됩니다.

계획 블록 (Plan Block)

인터랙션 제작 시, AI는 계획 수립 과정을 보여줍니다:

계획 중: "Planning..." 이라고 표시되며, 확장 가능한 콘텐츠를 통해 전체 분석 내용을 보여줍니다.

완료 시: "Planned"으로 축소되며 체크 표시가 나타납니다. 포함되는 내용은 다음과 같습니다:

• 목표: AI가 생성하고자 하는 것
• 구조: 사용될 요소
• 제작 순서: 단계별 실행 계획
• 인터랙션: 트리거 → 리스폰스 매핑

태스크 블록 (Task Block)

인터랙션 제작의 실행 진행 상황을 보여줍니다:

진행 중: 회전하는 아이콘과 함께 "작업 중(Working)..." 표시

완료: 체크 표시와 함께 "X개의 작업 완료(X tasks done)" 표시

각 태스크는 작업 유형(추가, 편집, 삭제 등)과 영향을 받는 요소를 보여줍니다. 체크 표시는 완료된 작업을, 회전하는 아이콘은 진행 중인 작업을 나타냅니다.