serve-sim: iOS 시뮬레이터를 브라우저와 AI 에이전트에 연결하는 CLI 도구

serve-sim 소개

serve-sim은 macOS의 iOS 시뮬레이터 화면을 브라우저로 스트리밍하고, Codex나 Cursor, Claude Desktop 같은 에이전트 도구가 시뮬레이터를 직접 조작할 수 있게 해주는 CLI 도구입니다. 스스로를 "Apple 시뮬레이터의 npx serve" 라고 소개할 만큼 사용법이 단순해서, npx serve-sim 한 줄이면 http://localhost:3200 에서 시뮬레이터 미리보기가 열립니다. 본 게시물에서는 serve-sim의 동작 구조와 에이전트 연동, 설치 방법을 정리합니다.

코딩 에이전트에게 iOS 앱 개발을 맡기면 마지막에 늘 같은 벽에 부딪힙니다. 에이전트가 자신이 만든 화면을 직접 보고 눌러볼 방법이 마땅치 않다는 점입니다. serve-sim은 부팅된 시뮬레이터의 프레임버퍼를 simctl io 로 캡처하는 작은 Swift 헬퍼를 띄우고, 이를 MJPEG 스트림과 WebSocket 제어 채널로 노출한 뒤 그 위에 React 미리보기 UI를 얹는 방식으로 이 문제를 풉니다. Xcode 플러그인이나 앱 계측(instrumentation) 없이 부팅된 어떤 iOS 시뮬레이터와도 동작합니다.

로컬뿐 아니라 LAN을 거치거나, 원격 Mac에서 호스팅한 뒤 터널링해 어디서든 접속하는 구성도 지원합니다. Expo 프레임워크를 개발해 온 Evan Bacon이 만들었으며, 도구 자체는 React Native와 무관하게 어떤 iOS 작업에도 쓸 수 있습니다.

serve-sim의 주요 기능

브라우저에서 60 FPS 영상 스트림으로 시뮬레이터를 보면서, 화면 하단 스와이프로 홈 이동, Option 키를 누른 채 핀치 줌 같은 제스처를 그대로 쓸 수 있습니다. 키보드 입력과 단축키도 시뮬레이터로 전달되고, 이미지나 영상을 드래그 앤 드롭해 시뮬레이터 기기에 추가할 수도 있습니다. iOS뿐 아니라 Apple Watch와 iPad 시뮬레이터도 지원합니다.

에이전트 관점에서 눈에 띄는 기능은 시뮬레이터 로그가 브라우저로 전달되어 browser-use 계열 MCP 도구가 읽을 수 있다는 점입니다. 화면 스트림과 로그, 제어 채널이 한 곳에 모이므로, 브라우저를 다루는 에이전트가 그 연장선에서 iOS 앱을 검증하는 흐름이 만들어집니다.

CLI는 미리보기 서버 외에도 터치 제스처 전송(gesture), 하드웨어 버튼(button), 텍스트 입력(type), 화면 회전(rotate), 메모리 경고 시뮬레이션 같은 하위 명령을 제공합니다. 전체 구조는 원문의 다이어그램이 간결하게 보여줍니다.

┌──────────────┐   simctl io   ┌─────────────────┐  MJPEG / WS  ┌─────────┐
│ iOS Simulator│ ────────────► │ serve-sim-bin   │ ───────────► │ Browser │
└──────────────┘   (Swift)     │ (per-device)    │              └─────────┘
                                       ▲
                                  state file in
                                $TMPDIR/serve-sim/
                                       ▲
                               ┌──────────────────┐
                               │ serve-sim CLI /  │
                               │ middleware       │
                               └──────────────────┘

serve-sim의 카메라 주입 기능

시뮬레이터의 빈 카메라를 대체하는 기능도 들어 있습니다. serve-sim camera <bundle-id> 를 실행하면 호스트 쪽 헬퍼가 BGRA 프레임을 POSIX 공유 메모리에 쓰고, DYLD_INSERT_LIBRARIES 로 주입된 dylib이 시뮬레이터 프로세스 안에서 AVFoundation을 스위즐링해 앱이 그 프레임을 카메라 입력으로 읽게 만듭니다. 소스로는 애니메이션 플레이스홀더, 이미지/영상 파일, 호스트 웹캠을 쓸 수 있고, 실행 중에 camera switch 로 앱 재시작 없이 소스를 바꿀 수 있습니다.

serve-sim과 AI 에이전트 연동

저장소의 skills/serve-sim 디렉토리에는 에이전트 스킬(Agent Skill)이 함께 들어 있습니다. Claude Code, Cursor, Codex CLI, Gemini CLI처럼 Agent Skills 표준을 구현한 도구에게 탭, 제스처, 하드웨어 버튼, 회전, 카메라 주입 등 CLI로 시뮬레이터를 다루는 방법을 가르쳐주는 구성입니다.

bunx add-skill EvanBacon/serve-sim
# Claude Code에서:
/plugin marketplace add EvanBacon/serve-sim

Claude Code 데스크톱 앱에서는 .claude/launch.json 에 serve-sim 실행 구성을 정의해 연동하고, Expo 프로젝트라면 metro.config.jsserve-sim/middleware 를 끼워 npx expo start 와 함께 자동으로 시뮬레이터 미리보기를 띄울 수 있습니다. 같은 미들웨어를 Vite, Next, Express 같은 기존 개발 서버에 얹는 방법도 문서화되어 있습니다.

serve-sim 설치 및 사용법

Xcode 명령줄 도구(xcrun simctl)가 있는 macOS와 Node.js 20 이상이 필요하며, Apple Silicon 전용입니다(번들된 Swift 헬퍼가 arm64 바이너리라 Intel Mac에서는 동작하지 않습니다). 시뮬레이터를 부팅해 둔 상태에서 실행합니다.

npx serve-sim                # 부팅된 시뮬레이터 자동 감지, 미리보기 서버 시작
npx serve-sim "iPhone 16 Pro"  # 특정 기기 지정
npx serve-sim --detach       # 백그라운드 헬퍼로 실행

serve-sim의 라이선스

serve-sim은 Apache-2.0 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.

:github: serve-sim GitHub 저장소

더 읽어보기




이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. :hugs:

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. :smiley:

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck: