React Native 앱에 코딩 에이전트의 시각을 제공하기: Argent 대 agent-device 측정 비교

한눈에 보기

• 문제점: 코딩 에이전트가 React Native 앱을 스스로 실행하고, 터치하며, 프로파일링하도록 하는 것
• 해결책: Argent 또는 agent-device 각각을 Claude Code에게 제공하여 3개의 의도적으로 심은 버그를 테스트함
• 결과: 12 / 12 (두 도구 모두 완전히 해결된 실행 성공; agent-device가 토큰을 약 5분의 1 사용)

요약: 두 도구 모두 코딩 에이전트가 실제 React Native 버그를 재현하고, 수정하고, 검증하고, 프로파일링할 수 있게 합니다. 점수를 받은 12개 실행 모두 만점을 받았습니다. 차이점은 비용과 설정입니다. agent-device는 모든 동작 후 스크린샷 대신 간결한 텍스트로 답변하기 때문에 토큰을 약 5분의 1, 비용을 3분의 1 사용했습니다. Argent의 React 프로파일러는 별도의 설정 없이 React Native 0.87에서 작동했지만, agent-device는 패키지 설치와 두 개의 프로젝트 파일 수정이 필요했습니다.

코딩 에이전트는 예전에

설정 환경. React Native 0.87.1을 사용한 스토어 감사(store-audit) 앱입니다. 이 앱은 FlashList를 기반으로 하며, Apple M1 메모리 8GB가 장착된 iPhone 17 시뮬레이터에서 실행되었습니다. Argent 0.26.0 (its MCP server, skills and rules는 argent init을 통해 설치됨)이 agent-device 0.21.19 (그의 CLI, npx skills add를 통한 스킬, 그리고 문서가 권장하는 CLAUDE.md 텍스트)와 상호작용했습니다. Claude Code 2.1.42는 claude-sonnet-5-5를 사용하여 헤드리스 모드로 실행되었으며, 실행당 세션은 하나였습니다. 총 세 가지 작업이 있었고, 각 도구별로 작업을 두 번씩 수행하여 총 12회의 점수 측정 실행을 진행했습니다.

세 가지 버그

각 실행마다 스토어 감사자가 보고하는 방식대로 작성된 버그 리포트가 하나씩 생성되었으며, 앱이 설치되어 있고 Metro가 실행 중이라는 문구도 포함되었습니다. 파일이나 원인을 지목한 내용은 없었습니다.

1. 재현 (Reproduce): "‘비상구는 장애물이 없다’에 ‘예(yes)’를 탭했습니다. 아래로 스크롤하자, 제가 건드리지 않은 다른 질문들에도 ‘예’가 표시되었습니다." 각 행은 답변을 useState 내부에 자체 복사본으로 유지했고, FlashList는 행을 재활용하기 때문에, 재활용된 행이 이전 질문의 답변을 보여주었습니다. 에이전트는 코드를 변경하지 않고 앱에서 이를 재현하고 설명해야 했습니다.
2. 수정 및 검증 (Fix and verify): "제목이 긴 질문에는 예/아니오 버튼이 없습니다." 질문 텍스트가 축소되지 않아, 긴 제목들이 버튼을 화면 밖으로 밀어냈습니다. 에이전트는 이를 수정하고, 앱에서 길고 짧은 두 가지 유형의 행 모두 올바르게 보이는지 증명해야 했습니다.
3. 성능 (Performance): "메모(Notes) 상자에 타이핑하는 것이 느립니다." 메모의 상태가 화면에 존재했기 때문에, 모든 키 입력마다 표시되는 모든 행이 다시 렌더링되었고, 각 행은 느린 키워드 검사(행당 약 8ms 소요)를 실행했습니다. 에이전트는 실제 측정값을 통해 그 이유를 파악하고, 이를 수정한 다음, 다시 측정해야 했습니다.

저는 점수 평가 기준표를 작성하여 첫 번째 점수 측정 실행 전에 커밋했습니다. 각 작업당 3점이 부여되며, 에이전트가 코드를 읽기만 하고 실제 실행 중인 앱으로부터 증거가 필요한 항목은 점수에 포함되지 않습니다.

공정한 테스트를 만들기 위해 네 가지 수정 사항을 거쳤습니다

이러한 비교는 각 세션에서 정확히 하나의 도구만 볼 수 있을 때에만 공정합니다. 제 컴퓨터에는 Argent가 전역적으로 설치되어 있어서 예상보다 더 많은 작업이 필요했습니다:

주의사항: Claude Code 내부에서는 Claude Code를 시작할 수 없습니다. 에이전트 세션에서 claude -p를 실행하면

차이점은 각 도구가 반환하는 내용에서 비롯됩니다. Argent의 모든 상호작용(탭, 스와이프, 실행)은 스크린샷과 전체 접근성 트리(accessibility tree)를 반환하므로, 에이전트는 항상 화면을 볼 수 있고 모든 이미지는 대화에 남아 있습니다. agent-device의 명령어는 간결한 텍스트 스냅샷 또는 차분(diff)을 반환하며, @e8와 같은 짧은 참조로 탭을 지시하고, 에이전트가 요청할 때만 스크린샷을 제공합니다. 세션 전체를 놓고 보면, 이는 약 180만 토큰과 30만 토큰의 차이를 만듭니다.

텍스트 중심 접근 방식은 이 앱에서 한 가지 구체적인 장점을 가졌습니다. agent-device의 스냅샷은 알약(pill)의 선택된 상태를 텍스트로 출력했습니다:

@e29 [button] "yes for Entrance mats clean" [selected]

Argent의 트리에는 선택된 상태가 포함되어 있지 않았기 때문에, Argent의 에이전트는 스크린샷을 보고 이탈한(stray) "yes"를 찾았습니다. 그 보고서 중 하나는 이를 직접적으로 언급합니다. 둘 다 목표에 도달했지만, 한쪽은 이미지가 필요했습니다.

차이가 발생한 지점: 프로파일링 설정

두 도구 모두 React 렌더(React renders)를 프로파일링할 수 있으며, 두 에이전트 모두 느린 타이핑을 찾아 측정했습니다:

agent-device의 React DevTools는 먼저 설정해야 했습니다. 0.87 버전에서 두 agent-device 실행 모두 프로젝트에 agent-react-devtools를 설치하고 그 init을 실행하여 index.js와 metro.config.js를 패치해야 했습니다. 두 에이전트 모두 나중에 이를 되돌렸지만, 이 과정 때문에 가장 느린 실행 기록을 남겼습니다. 한 번은 react-devtools wait --connected 호출이 멈추어(hung) 에이전트가 도우미 프로그램(helper)을 재시작해야 했습니다. 그럼에도 불구하고, agent-device의 성능 측정 비용이 더 적었습니다: 각각 $0.80 대 $2.00.

주의사항: 프로파일링 설정이 무엇을 남기는지 확인하세요. 한 에이전트는 DevTools 패키지를 --save-dev로 설치하여 package.json에 추가했다가, 나중에 다시 제거했습니다. 만약 에이전트에게 실제 리포지토리에서 프로파일링 설정을 하게 한다면, 커밋하기 전에 index.js, metro.config.js 및 package.json의 변경 사항을 diff로 검토하세요.**

다른 습관들

네 번의 수정 및 검증 실행에서 공통적으로 나타난 패턴이 있었습니다. Argent는 두 경우 모두 먼저 깨진 화면을 살펴본 다음, 코드를 변경하고 다시 확인했습니다. agent-device는 읽은 내용을 바탕으로 바로 코드를 변경한 후 앱을 확인했습니다. 평가 기준(rubric)은 버그를 먼저 보는 것을 요구하지 않았고, 네 가지 수정 사항 모두 정확했습니다. 하지만 덜 명확한 버그의 경우, 앱이 보여주는 것보다는 코드가 제안하는 것에 따라 수정하면 놓칠 수 있습니다.

네 번의 실행만으로는 이것이 도구들에서 비롯된 것인지 알 수 없습니다. agent-device의 안내는 에이전트에게

앱에서 에이전트를 자주 실행할 때는 agent-device를 사용하세요: 많은 UI 검사(UI checks), CI, 또는 장시간 세션에 적합합니다. 일상적인 작업에서는 실행당 비용이 약 3분의 1 수준으로 저렴했고 더 빨랐으며, 텍스트 스냅샷은 [선택됨]과 같은 상태를 포함하여 그렇지 않으면 스크린샷이 필요했을 정보를 담고 있습니다.

프로파일링이 주된 목적이거나 에이전트가 화면을 기본적으로 볼 수 있게 하고 싶다면 Argent를 사용하세요. React Native 0.87에서 프로젝트 변경 없이 작동하는 React 및 CPU 프로파일러를 제공했으며, 느린 코드를 정확히 지적했습니다.

어느 쪽이든, 도구를 도와주세요. 둘 다 접근성 트리(accessibility tree)에 의존합니다. 테스트용 앱에는 버튼에 accessibilityLabel과 accessibilityState가 설정되어 있었고, 이것이 두 에이전트 모두가 올바른 행을 찾고 그 상태를 읽을 수 있게 했습니다. 만약 여러분의 앱에 이 기능이 없다면, 에이전트는 스크린샷과 좌표로 대체합니다.

주요 시사점 (Takeaways)

• Argent와 agent-device 모두 Claude Code가 실제 React Native 버그를 재현하고, 수정하며, 검증하고, 프로파일링할 수 있게 했습니다: 12회 중 12회 실행에서 만점을 받았습니다.
• agent-device는 모든 작업 후 스크린샷 대신 텍스트 스냅샷을 반환하기 때문에 토큰 사용량은 약 5분의 1, 비용은 3분의 1 수준이었습니다.
• Argent의 React 및 CPU 프로파일러는 설정 없이 React Native 0.87에서 작동했지만, agent-device는 agent-react-devtools 설치와 두 개의 파일 패치가 필요했습니다.
• 에이전트가 프로파일링을 설정한 후에는 diff를 검토하세요: index.js, metro.config.js, 그리고 package.json이 변경될 수 있습니다.
• 상호 작용 요소(interactive elements)에 accessibilityLabel과 accessibilityState를 추가하세요. 두 도구 모두 접근성 트리를 먼저 읽습니다.
• 에이전트 도구를 공정하게 비교하려면 각 세션을 격리하세요: --setting-sources project는 전역적인 CLAUDE.md 및 규칙 로딩을 막지 않습니다.
• 커밋 내용이 테스트하는 버그를 설명한다면, Git 기록은 에이전트의 작업 공간 밖에 두세요.

저는 praveensingh.co.in/blog에서 실무에 적용되는 React Native에 대해 측정하고 공개 코드를 사용하여 글을 씁니다.