구현 계획: DESIGN.md Phase 1~5 로드맵

[ohah]

개요

docs/DESIGN.md에 정의된 React Native MCP 서버 구현 계획을 이슈로 추적합니다.
전체 설계·아키텍처는 DESIGN.md를 참고하고, 여기서는 Phase별 작업 목록과 산출물을 DESIGN.md 5절과 동기화해 둡니다.
툴 체크리스트(Chrome 레퍼런스 대비): #10

---

Phase 1: 기본 인프라 (MVP) ✅

목표: WebSocket + eval로 기본 제어 가능

• MCP 서버 기본 구조 (stdio, WebSocket 12300, evaluate_script)
• Runtime (WebSocket 클라이언트, eval bridge, DEV 처리)
• Metro Transformer (runtime 주입, registerComponent 래핑)
• HMR 통합 (미구현)
• 데모 앱 및 MCP 실행 확인

산출물: AI가 앱에서 임의 코드 실행 가능 ✅

---

Phase 2: Component Tree 읽기 ✅

목표: 컴포넌트 구조 파악

• Fiber Hook 구현 (REACT_DEVTOOLS_GLOBAL_HOOK, 트리 순회, 직렬화)
• MCP Tools: take_snapshot, query_selector, query_selector_all (list_text_nodes·list_clickables·get_by_label 대체)
• Metro Plugin 확장 (메타데이터, 소스맵)

산출물: AI가 렌더링된 컴포넌트 목록 조회 ✅

---

Phase 3: Babel 코드 주입 ✅

목표: 자동 testID 및 추적 코드

• Babel 변환 (inject-testid, testID 자동 주입)
• displayName 자동 주입 (PascalCase 컴포넌트, Release에서 Fiber 이름 보존)
• ScrollView/FlatList ref → registerScrollRef 자동 주입 비활성화 (스크롤은 네이티브 swipe·scroll_until_visible 도구 사용)
• WebView ref + testID → registerWebView 자동 주입 (webview_evaluate_script 도구)
• 추적 코드 삽입 (미구현)
• 프로덕션 제거 로직 검증
• testID/셀렉터로 조회 후 네이티브 tap 도구로 터치 (query_selector → tap)
• 스크롤 — 네이티브 swipe 도구, scroll_until_visible (셀렉터 기반)
• webview_evaluate_script 도구 (WebView 내 임의 JS 실행, onMessage 자동 주입)
• set_props (미구현)

산출물: AI가 컴포넌트 선택 및 조작 ✅

---

Phase 4: CLI 스크린샷 ✅

목표: 시각적 피드백 (ADB / simctl)

• take_screenshot (Android adb, iOS simctl), Base64
• 압축/크기 조절 — 720p JPEG 80% 고정, pointSize·outputSize 메타 반환 (PR #29·#30)

산출물: AI가 화면 보고 판단 ✅

---

Phase 5: 고급 기능

목표: Modal, FlatList, 네트워크/콘솔 모니터링 등

• Modal — React Fiber 트리에 포함되므로 기존 도구(take_snapshot, query_selector, tap 등)로 별도 처리 없이 동작
• FlatList/ScrollView — swipe로 수동 스크롤, scroll_until_visible로 셀렉터 기반 자동 스크롤 후 query_selector_all로 조회·탭 가능
• 네트워크 모니터링 — list_network_requests·clear_network_requests MCP 등록됨 (PR #23). runtime.js XHR/fetch 캡처.
• 콘솔 모니터링 — list_console_messages·clear_console_messages MCP 등록됨 (PR #23).
• get_debugger_status, query_selector·query_selector_all, assert_text·assert_visible·assert_not_visible·assert_element_count ✅
• 다중 디바이스 (deviceId/platform 라우팅, init에서 platform·deviceId 수신) ✅
• 런타임 getScreenInfo·measureView (화면/뷰 좌표, idb·adb 터치 주입용, PR #28)
• DESIGN.md 확장 제스처 Tier 1·2 설계 반영 (JS Prop 확장, idb/adb 하이브리드)
• 데모 앱 Gesture 탭: Touchable/Pressable/RNGH 비교·Gesture.Tap() 감지 예제 (PR #28)
• 레퍼런스 문서: ADB_REFERENCE.md, IDB_REFERENCE.md, XCUITEST_WDA_REFERENCE.md (PR #28)
• 플랫폼 중립 네이티브 도구 — tap, swipe, input_text, input_key, press_button, describe_ui, file_push, add_media, list_devices (platform으로 iOS/Android 선택), switch_keyboard, open_deeplink (PR #30, docs/idb-setup.md)
• scroll_until_visible — 셀렉터로 스크롤하여 요소가 보일 때까지 (FlatList/ScrollView)
• E2E YAML 스텝 확장 (react-native-mcp-test) — back, home, hideKeyboard, longPress, addMedia, assertHasText, clearText, doubleTap, assertValue (PR #39)
• 성능 모니터링

산출물: 프로덕션급 완성 (진행 중)

---

참고: 상세 설계 docs/DESIGN.md. 이 이슈는 DESIGN.md 5절과 동기화함.

최종 업데이트: 2026-02-18