Dev View 소개

Dev View는 베타 버전으로 제공됩니다. 인터페이스 및 제공되는 기능은 변경될 수 있고, 일부 기능을 이용하려면 해당하는 플랜이 필요합니다.

Dev View란 무엇인가요?

Dev View는 개발자가 프로토타입의 디자인과 인터랙션 상세 정보를 확인하고, Code MCP를 통해 해당 컨텍스트를 AI 코딩 에이전트에 전달할 수 있는 ProtoPie Cloud의 뷰입니다. 정확한 프로토타입을 열고 구조와 속성을 파악한 뒤, 에이전트에 정밀한 스펙을 전달하는 링크를 복사해 보세요. 전체 워크플로우는 상단의 Code MCP 섹션을 참고하세요.

Dev View 열기

ProtoPie Cloud에서 Pie 위에 마우스를 올린 뒤 < > Dev View를 클릭하거나, Pie의 컨텍스트 메뉴 또는 Preview 상단 메뉴에서 Open Dev View를 선택하거나, Dev View URL을 직접 붙여넣어 열 수 있습니다. Dev View는 항상 Pie의 최신 버전을 보여줍니다.

요구 사항 및 접근 권한

• Dev View 조회는 Pro, Pro Plus, 또는 Enterprise 플랜(개인 또는 팀 스페이스)이 필요합니다. Free/Basic 플랜에서는 < > Dev View 버튼이 표시되지만 잠금 상태로 유지됩니다.

• MCP 링크 제공 여부는 별도로 제어됩니다. Pie에 대한 다운로드 권한이 있는 경우에만 표시됩니다. 자세한 내용은 상단의 접근 권한 및 권한 안내 섹션을 참고하세요.

Dev View 인터페이스

씬, 컨테이너, 또는 레이어를 선택하면 모든 패널의 내용이 업데이트됩니다.

• Layer Panel (좌측) — Studio에서와 동일한 Pie의 레이어 계층 구조입니다.

• Canvas (중앙) — 선택한 씬의 프리뷰입니다. 마우스를 올려 간격/거리를 확인하거나, 확대하여 요소를 세부 검토할 수 있습니다.

• Inspector — Property (우측) — 레이아웃, 채우기 색상(HEX/RGB/HSL), 텍스트 스타일 등 디자인 상세 정보입니다.

• Interactions — Property (우측) — 순서, 딜레이, 병렬 타이밍 및 숨겨진 인터랙션을 보여주는 트리거-리스폰스 트리입니다.

• MCP tab — 선택한 영역의 컨텍스트 링크를 복사하고 설치 가이드를 열 수 있습니다.

MCP 탭

아무것도 선택하지 않은 상태(전체 Pie), 씬, 컴포넌트, 또는 레이어를 선택한 뒤 Copy link를 누르세요 — 현재 보고 있는 특정 리비전(revision)이 고정됩니다. 다운로드 권한이 없으면 링크가 숨겨집니다 (“MCP 링크를 사용하려면 Pro 또는 Enterprise 플랜 및 다운로드 권한이 필요합니다. Pie 소유자에게 문의하세요”). 전체 흐름은 상단의 퀵스타트를 참고하세요.

공유하기

상단 바의 Copy Link를 사용하면 Dev View가 바로 열리는 링크를 공유할 수 있습니다. Preview 링크와 Dev View 링크는 별도로 관리됩니다.

ProtoPie MCP 데모를 확인하고 싶으신가요? 지금 바로 데모 세션을 신청해 보세요!