AI 패널 인터페이스
패널 상태
AI 패널은 작동 중에 다양한 상태를 표시합니다:
대기 상태 (Idle State): 입력을 대기하는 상태입니다. 대화 기록이 없을 경우 시작을 돕기 위해 4개의 추천 프롬프트가 표시됩니다. 입력을 대기하는 상태입니다. 대화 기록이 없을 경우 시작을 돕기 위해 4개의 추천 프롬프트가 표시됩니다. 추천 프롬프트를 클릭하면 입력 필드에 자동으로 입력됩니다. 프롬프트는 입력되지만 자동으로 전송되지는 않습니다.
처리 상태 (Processing State): AI가 요청을 분석 중인 상태입니다. "불러오는 중..." 또는 "분석 중..."과 같은 상태 표시가 나타납니다.
편집 상태 (Editing State): AI가 사용자의 프로토타입을 적극적으로 수정 중인 상태입니다. 캔버스 하단에 "ProtoPie AI가 제어권을 가집니다"라는 배너와 필요한 경우 취소할 수 있는 [중지] 버튼이 표시됩니다.
채팅 동작
제출된 프롬프트는 채팅 영역의 상단에 표시됩니다.
채팅 기록은 세션 간에 저장되지 않습니다. 탭을 닫거나 리셋하면 기록이 지워집니다.
처음부터 다시 시작하려면 패널 헤더의 리셋 버튼을 클릭하세요.
@ 멘션 사용하기
프롬프트에서 특정 레이어를 언급하려면 @ 기호를 입력하세요. 이를 통해 AI에 더 명확한 맥락을 제공하고, 단순히 이름으로 레이어를 설명하는 것보다 더 정밀한 인터랙션을 생성할 수 있습니다.
예시: "탭했을 때 @ButtonLayer가 회색으로 변하게 해줘"
답변 제어 기능
AI가 답변한 후 다음과 같은 몇 가지 옵션을 사용할 수 있습니다:
👍 / 👎 피드백: AI 기능 개선을 위해 답변의 품질을 평가합니다.
답변 복사: 전체 답변 내용(코드 블록 포함)을 클립보드에 복사합니다.
다시 쓰기 (Rewrite): 동일한 프롬프트에 대해 다른 답변을 다시 생성합니다.
가장 최근 답변에 대해서만 사용 가능합니다.
새 프롬프트를 전송하거나 사용자가 수동으로 편집하면 이 옵션은 사라집니다.
AI 답변 유형
스튜디오 AI는 요청에 따라 다양한 형식의 답변을 제공합니다:
텍스트 답변
헤더, 본문 텍스트, 링크, 인라인 코드, 인용구, 표 등을 포함한 서식이 지원되는 일반 텍스트 설명입니다. 설명, 문서 답변 및 일반적인 응답에 사용됩니다.
Mermaid 다이어그램
순서도, 사용자 흐름 또는 기타 다이어그램을 그려달라고 요청하면 AI가 Mermaid.js 구문을 사용하여 시각적 다이어그램을 생성할 수 있습니다. 순서도는 워크스페이스의 기존 오브젝트 및 인터랙션을 기반으로 합니다. 다이어그램은 다음과 같은 옵션이 포함된 대화형 이미지로 렌더링됩니다:
코드 복사: Mermaid.js 소스 코드를 복사합니다.
이미지로 다운로드: 렌더링된 다이어그램을 .svg 파일로 저장합니다.
공식 블록
ProtoPie 공식을 위해 특별히 제공되는 코드 블록으로, 다음과 같이 표시됩니다:
구문 강조(Syntax highlighting)
복사 버튼
ProtoPie 공식 문서로 연결되는 사용 방법 링크
코드 블록
언어 레이블, 구문 강조 및 복사 버튼이 포함된 일반 코드 예시(JSON, JavaScript 등)입니다.
리소스 카드
AI가 문서를 참조할 때 대화형 리소스 카드를 표시합니다:
공식 아티클: ProtoPie 아이콘, 아티클 제목 및 브레드크럼 경로, "공식 아티클" 레이블
YouTube 동영상: 동영상 썸네일, "YouTube 동영상" 레이블
외부 링크: URL이 포함된 지구본 아이콘
여러 리소스는 페이지 번호가 포함된 캐러셀 형태로 표시됩니다.
계획 블록 (Plan Block)
인터랙션 생성 시 AI는 다음과 같이 계획 수립 프로세스를 보여줍니다:
계획 수립 중: 전체 분석 내용을 볼 수 있는 확장 가능한 콘텐츠와 함께 "계획 수립 중..."을 표시합니다.
완료 시: 체크 표시와 함께 "계획 완료"로 축소됩니다. 콘텐츠에는 다음이 포함됩니다:
목표: AI가 생성하고자 하는 바
구조: 사용될 요소들
생성 순서: 단계별 실행 계획
인터랙션: 트리거 → 리스폰스 매핑
태스크 블록 (Task Block)
인터랙션 생성에 대한 실행 진행 상황을 보여줍니다:
진행 중: 회전하는 아이콘과 함께 "작업 중..." 표시
완료: 체크 표시와 함께 "X개 태스크 완료" 표시
각 태스크는 액션 유형(추가, 편집, 삭제 등) 및 영향을 받는 요소를 보여줍니다. 체크 표시는 완료된 태스크를 나타내며, 스피너는 진행 중인 태스크를 나타냅니다.