Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
Mobile Canvas는 GitHub Copilot 및 VS Code 환경 내에서 로컬 iOS 시뮬레이터와 Android 에뮬레이터를 직접 제어할 수 있게 하는 도구입니다. MCP(Mobile Canvas Protocol)를 통해 에이전트에게 동일한 제어 기능을 제공하며, 사용자가 보고 있는 장치에서 배포, 탐색, 검사 등의 작업을 수행합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GitHub Codex tools의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기View, create, boot, and interact with 로컬 iOS 시뮬레이터 및 Android 에뮬레이터를 GitHub Copilot이나 VS Code를 벗어나지 않고도 할 수 있습니다. Mobile Canvas는 MCP(Mobile Canvas Protocol)를 통해 에이전트에게 동일한 제어 기능을 제공하여, 사용자가 보고 있는 장치에서 배포하고, 탐색하며, 검사하고, 증거를 캡처할 수 있게 합니다.
[IMG:N]
iOS에서는 약 58 FPS, Android에서는 약 50 FPS의 실시간 H.264 비디오와 실제 터치, 드래그, 스크롤 및 키보드 입력을 지원합니다. 모든 것은 루프백(loopback)에서 로컬로 실행되며, 어떠한 것도 업로드되지 않습니다.
이 저장소를 Copilot 플러그인 마켓플레이스에 추가하고, mobile-canvas를 설치한 다음, 모바일 장치(Mobile Device) 캔버스를 여세요:
/plugin marketplace add Redth/mobile-canvas-ghcp
/plugin install mobile-canvas@mobile-canvas-ghcp
설치 후 Copilot을 다시 로드하세요. 이 플러그인은 캔버스와 모든 mobile_device_* 도구를 한 번에 등록합니다. 별도의 실행 파일 다운로드는 필요하지 않습니다.
Visual Studio Marketplace에서 Mobile Canvas를 설치하고, VS Code를 다시 로드한 다음, 활동 표시줄(Activity Bar)에서 Mobile을 엽니다. 마켓플레이스가 플랫폼에 맞는 패키지를 자동으로 선택합니다.
<p align="center"> <img src="https://raw.githubusercontent.com/Redth/mobile-canvas-ghcp/HEAD/assets/vscode-extension.png" width="900" alt="실시간 iOS 시뮬레이터와 함께 VS Code 활동 표시줄에서 실행되는 Mobile Canvas"> </p>이 확장 프로그램에는 네이티브 런타임이 포함되어 있으며, Copilot Chat에 mobile_device_* 도구를 자동으로 등록합니다. 전역 도구나 mcp.json은 필요하지 않습니다. 원격 작업 공간 동작, 수동 MCP 설정 및 개발 명령에 대한 내용은 VS Code 가이드를 참조하세요.
두 호스트 모두 iOS의 경우 Xcode가, Android의 경우 Android SDK가 필요합니다. 요구 사항을 확인하세요.
Mobile Canvas는 에이전트가 사용자가 보고 있는 것과 동일한 장치에서 작업할 수 있도록 합니다. 도구를 전환하거나 별도의 MCP 서버를 연결할 필요 없이, Copilot에게 버그 재현, 플로우 탐색, 증거 캡처 또는 접근성 검사 등을 요청하세요.
iPhone 시뮬레이터를 부팅하고, 내 앱을 설치한 다음, 로그인 과정을 따라가 보세요.
Android 에뮬레이터에서 '설정' 버튼을 찾아 탭하세요.
현재 화면의 스크린샷을 찍고 레이아웃 문제가 있는지 설명해 주세요.
에이전트 액션은 대상 장치를 자동으로 선택합니다. 애니메이션 커서와 강조 표시(accent glow)가 모든 자동화된 상호작용을 눈에 보이게 만들어, 언제든지 따라 하거나 직접 제어할 수 있습니다.
<table> <tr> <td width="50%"><img src="https://raw.githubusercontent.com/Redth/mobile-canvas-ghcp/HEAD/assets/agent-ios.png" alt="Mobile Canvas에서 iOS 시뮬레이터와 상호작용하는 Copilot"></td> <td width="50%"><img src="https://raw.githubusercontent.com/Redth/mobile-canvas-ghcp/HEAD/assets/agent-android.png" alt="Mobile Canvas에서 Android 에뮬레이터와 상호작용하는 Copilot"></td> </tr> </table>장치 관리(Device management)
실시간 상호작용(Live interaction)
에이전트 제어(Agent control)
udid/시리얼 번호를 포함하여 전체 장치 레코드를 반환하며, 이는 배포 명령어에 전달해야 하는 정보입니다.| 요구 사항 | |
|---|---|
| iOS | macOS 및 Simulator 런타임이 포함된 전체 Xcode 설치 |
| ... | |
번들로 제공되는 mobile-screencap 헬퍼는 iOS 터치, 키보드, 버튼, 회전, 접근성 계층 구조(accessibility hierarchy), 그리고 직접 비디오 캡처 기능을 제공합니다. Xcode 26은 Simulator.app을 사용하고, Xcode 27은 Device Hub를 사용합니다. 헤드리스 입력이나 계층 구조 읽기를 위해 보이는 앱이 열려 있을 필요는 없습니다. |
Android 전용 워크플로우는 Xcode가 필요하지 않습니다. Xcode를 사용할 수 없을 때는 Mobile Canvas가 Android 에뮬레이터를 계속 사용 가능하게 유지하고 iOS는 사용 불가로 표시합니다.
마찬가지로, 기존 Android 에뮬레이터를 실행하거나 제어하는 데 Java가 필요하지 않습니다. 이는 Mobile Canvas가 AVD(Android Virtual Device)를 생성하거나 삭제할 때 avdmanager에 의해 간접적으로만 사용됩니다.
Meta의 idb 메타 패키지는 ui_tree, ui_find, 또는 ui_tap에 필요하지 않습니다. 이는 선택적인 호환성 입력 대체재(fallback)이며, 번들로 제공되는 네이티브 경로가 시작되지 않을 경우 최종 라이브 비디오 대체재 역할을 합니다. Mobile Canvas는 실제로 이 기능이 필요한 경우에만 그 부재를 보고합니다. 설치하려면 현재 Homebrew 버전에서는 타사 tap을 명시적으로 신뢰해야 합니다:
brew tap facebook/fb
brew trust facebook/fb
brew install facebook/fb/idb
그런 다음 설치된 실행 파일을 쉘 환경에 추가합니다. zsh의 경우:
echo
설정된 경로가 실행 파일(executable)을 가리키는지 확인합니다:
```bash
test -x "$IDB_COMPANION_PATH" && "$IDB_COMPANION_PATH" --version
Android 에뮬레이터는 반드시 -gpu host 옵션으로 시작해야 합니다. 소프트웨어 렌더링된 AVD(Android Virtual Device)는 비디오 프레임 속도(FPS)가 약 50 FPS에서 약 3 FPS로 떨어집니다.
| 플랫폼 | iOS 시뮬레이터 | Android 에뮬레이터 | 비디오 | :--- |
| macOS | 예 | 예 | H.264 |
| ... |
iOS 제어는 Xcode의 simctl과 번들된 CoreSimulator 헬퍼가 필요하므로 macOS 전용입니다. Android는 어디서든 작동하며, 하드웨어 H.264 인코딩은 현재 동일한 macOS 헬퍼를 통해 실행되므로, 다른 환경에서는 캡처(canvas)가 스크린샷 폴링(screenshot polling)으로 대체됩니다.
git clone https://github.com/Redth/mobile-canvas-ghcp
cd mobile-canvas-ghcp
./scripts/build.sh # 네이티브 AOT 바이너리 + 범용 Swift 캡처 헬퍼
...
Copilot을 나중에 다시 로드하여 확장 프로그램(extension)을 인식하도록 합니다. 소스 설치는 모바일 장치 (로컬) (mobile-device-local)로 등록되므로, 개발 빌드가 마켓플레이스 플러그인과 동일한 캔버스 ID를 두 번 등록하지 않고 공존할 수 있습니다.
캔버스가 없는 순수 CLI/MCP 설치의 경우:
dotnet tool install -g MobileCanvas.Tool
Copilot에게 모바일 장치 캔버스를 열도록 요청하거나, 캔버스 선택기(canvas picker)에서 직접 열 수 있습니다. 실행 중인 장치를 선택하거나, 설치된 런타임으로부터 하나를 생성합니다.
CLI에서:
mobile-canvas devices list --json
mobile-canvas devices boot <id> --wait
mobile-canvas input tap <id> --x 100 --y 200
...
모든 질의 명령어는 --json과 --schema를 허용하므로, 출력 결과를 jq와 안전하게 조합할 수 있습니다.
총 24개의 모든 도구가 캔버스 액션(canvas actions)으로, 그리고 mobile_device_*라는 이름의 MCP 도구로 모두 사용할 수 있습니다:
| 그룹 | 도구 | :--- |
|---|---|---|
| Discovery | list, get, catalog, select, get_selected, display | |
| ... | ||
일반적인 에이전트 흐름은 list → select → 결과에서 udid를 읽어온 후 → 해당 장치에 앱을 배포하고 → 입력 도구(input tools)로 제어하는 것입니다. |
Marketplace는 지원되는 데스크톱 타겟에 독립적인 패키지를 설치하며, 범용 폴백(universal fallback)은 첫 사용 시 핀 처리된 런타임을 다운로드하고 검증합니다. 에이전트 액션은 라이브 Activity Bar 뷰에서 동일한 장치를 선택하고 애니메이션화합니다. 이 뷰는 활성 VS Code 테마를 따르면서 다른 곳에서는 GitHub canvas 모양을 유지합니다. 선택한 장치, 새로운 스크린샷 또는 접근성 트리(accessibility tree)를 첨부하여 #mobileDevice, #mobileScreenshot 또는 #mobileUiTree와 채팅할 수 있습니다.
이 확장 프로그램은 Remote SSH, Dev Containers 및 Codespaces에서 로컬로 실행됩니다. vscode.dev는 지원하지 않습니다.
GitHub Copilot 앱 VS Code 확장 프로그램 CLI / 기타 에이전트
└─ extension.mjs ├─ Activity Bar webview └─ mobile-canvas mcp
│ canvas actions └─ MCP context proxy |
...
호스트는 필요할 때 시작되며, 127.0.0.1에만 바인딩하고, 로테이팅 세션 쿠키(rotating session cookie)를 교환하여 범위가 지정된 리로드 권한(scoped reload grant)으로 canvas 패널을 인증합니다. 이 권한은 URL 프래그먼트(URL fragment)에 남아 있어 호스트 복원 렌더러(host-restored renderer)가 HTTP 요청에서 자격 증명을 노출하지 않고도 다시 연결할 수 있게 합니다. 이는 유휴 기간이 지나면 종료되며 장치를 암묵적으로 절대 종료하지 않으므로, 패널을 분리하는 것은 항상 안전합니다.
동일한 호스트 프로토콜(host protocol)을 사용하는 GitHub Copilot 및 VS Code 릴리스는 최신 호환 가능한 호스트를 공유합니다. 호스트는 ~/.mobile-canvas/hosts/v<protocol>/ 아래에 격리되어 있어, 레거시 위치를 사용하고 미래의 비호환 프로토콜 버전을 사용하는 구형 설치본이 서로의 프로세스를 대체하지 않고 동시에 실행될 수 있습니다. 하위 호환성이 없는(backwards-incompatible) 호스트 API 변경을 하는 릴리스는 반드시 MobileCanvasProtocol.Version을 증가시켜야 합니다. 패키지 버전만으로는 추가적인 호스트가 생성되지 않습니다.
비디오는 두 플랫폼 모두에서 입력으로부터 의도적으로 분리됩니다:
| Concern | iOS | Android |
|---|---|---|
| Frames | CoreSimulator IOSurface (ScreenCaptureKit fallback) | emulator gRPC streamScreenshot |
| ... | ||
| Raw Android frames는 브라우저에 도달하기 전에 인코딩되므로, 에뮬레이터가 방출하는 41-577 MiB/s 대신 약 1-2 Mbps만 캔버스로 전달됩니다. |
dotnet build MobileCanvas.slnx
dotnet test tests/MobileCanvas.Tests/MobileCanvas.Tests.csproj
npm ci --prefix vscode --ignore-scripts
...
무언가를 변경하기 전에 알아야 할 두 가지 사항이 있습니다:
web/에 대한 모든 변경사항은 파일 복사가 아니라 재게시(republish)가 필요합니다. extension.mjs는 그 반대이며, 직접 복사되고 바이너리 일부가 아닙니다.dotnet publish는 Swift 헬퍼를 빌드하지 않습니다. scripts/build.sh가 둘 다 빌드합니다. 오래된(stale) 헬퍼는 스트림 시작 시점에만 실패하므로, mobile-screencap --help로 확인하고 accessibility, framebuffer, hid, hid-doctor, 그리고 Android의 encode 하위 명령어가 존재하는지 확인하십시오.