Reticle은 개발 중인 웹·데스크톱 앱을 실제로 실행하고 코딩 에이전트가 바꾼 내용을 확인하는 오픈소스 도구다. 화면뿐 아니라 네트워크 요청과 앱 상태, 콘솔 오류도 읽어 yes, no, unknown 판정을 내리고 근거와 수정할 file:line을 제시한다.
에이전트가 코드를 작성한 뒤 앱을 열어 확인하지 않으면 모달 오류, 응답 없는 500, 배포 실패를 성공으로 표시하는 문제가 생길 수 있다. Reticle은 앱 안에 개발 전용 SDK를 연결해 에이전트가 앱을 관찰하고 조작하도록 한다. 화면에 드러나지 않는 요청·응답, 상태 변화, 콘솔 오류, 요청 횟수와 React 렌더링도 확인한다. 판정을 내릴 수 없으면 unknown과 이유를 반환하며, yes만 통과로 취급한다.
- 저장한 사용자 흐름은 AI 모델 없이 다시 실행할 수 있다. CI의
reticle gate는 변경된 코드와 관련된 흐름이 새로 통과하지 않으면 실패한다. - Claude Code, Cursor, Codex, Windsurf, VS Code, Gemini CLI 등 MCP를 지원하는 에이전트와 웹·데스크톱 앱에서 사용할 수 있다.
- 기본 판정은 로컬에서 이뤄지며 계정이 필요 없다. 프로젝트를 연결하면 동기화할 항목을 선택할 수 있다.
설치와 첫 검증
필요한 것은 Node 20.11 이상, 로컬 개발 서버에서 실행하는 웹 또는 데스크톱 앱, 그리고 MCP를 지원하는 코딩 에이전트다. 지원 프레임워크와 검증 범위는 프레임워크 안내에 정리돼 있다. 전체 설치 절차는 빠른 시작, 에이전트 설치, 수동 설치에서 확인할 수 있다.
Claude Code에서는 플러그인을 먼저 설치한다.
/plugin marketplace add reticlehq/reticle
/plugin install reticle@reticlehq
Claude Code를 다시 시작해 앱 폴더에서 연다. 세션 시작 때 Claude가 해당 앱에 reticle init을 실행할지 물으면 승인한다. 플러그인이 작동하지 않거나 다른 에이전트를 쓰는 경우에는 설치 스크립트를 실행한다.
macOS 또는 Linux:
curl -fsSL https://raw.githubusercontent.com/reticlehq/reticle/main/install/install.sh | sh
Windows PowerShell:
irm https://raw.githubusercontent.com/reticlehq/reticle/main/install/install.ps1 | iex
스크립트를 셸로 바로 전달하지 않으려면 다음 명령을 사용한다.
npm install -g @reticlehq/server
reticle setup mcp
설치 프로그램은 Node 20.11 이상인지 확인하고, @reticlehq/server를 전역 설치한 뒤, 발견한 코딩 에이전트에 Reticle의 MCP 서버를 등록한다. 에이전트 설정에는 npx @reticlehq/server mcp를 실행하는 항목이 추가된다. Codex가 PATH에 있으면 codex mcp add로 등록한다. 없으면 설치 프로그램이 ~/.codex/config.toml에 수동으로 추가할 설정을 안내한다.
[mcp_servers.reticle]
command = "npx"
args = ["@reticlehq/server", "mcp"]
설치 프로그램이 출력하는 다음 단계의 시작 문구는 “Reticle is on this machine, not in your app yet.”다. 설치는 프로젝트 파일을 바꾸지 않는다. 설치 중 열려 있던 에이전트는 MCP 도구를 불러오도록 한 번 다시 시작해야 한다. Cursor, Codex, Copilot, Gemini 등에서는 다음 명령으로 Skills CLI를 이용할 수도 있다.
npx skills add reticlehq/reticle
앱 폴더에서 프로젝트 설정을 만든다.
cd path/to/your-app
reticle init
먼저 변경 계획만 보거나 모노레포에서 특정 앱을 고르려면 다음을 사용한다.
reticle init --dry-run # 변경 계획만 표시하고 파일은 쓰지 않음
reticle init --app apps/web # 모노레포에서 이 앱을 연결
init은 프레임워크를 감지하고, CLI와 같은 버전의 개발 의존성 두 개를 설치한다. React 앱에는 @reticlehq/react, Vue·Svelte 등에는 @reticlehq/browser를 사용하며 빌드 플러그인은 Vite용 @reticlehq/vite-plugin 또는 Next.js용 @reticlehq/next다. .reticle.json에는 프레임워크와 프로젝트 ID, 포트가 기록된다. 기본 포트 4400을 사용할 수 없을 때만 다른 포트를 기록한다. 빌드 설정에 플러그인을 추가하고 reticle-dev 모듈과 에이전트 안내 파일을 만든다. 앱의 개발 서버가 꺼져 있으면 시작해 연결을 기다린다. init 자체는 앱을 구동해 사용자 흐름을 검증하지 않는다.
에이전트 지침은 CLAUDE.md와 AGENTS.md에 덧붙이고, 전체 지침은 RETICLE.md, Claude Code 명령은 .claude/commands/reticle.md에 기록한다. 기존 파일을 덮어쓰지 않는다. 에이전트 프롬프트를 저장하는 훅은 발견된 에이전트의 프로젝트 설정에 추가된다. 훅은 프롬프트를 가린 뒤 .reticle/request.json과 .reticle/requests.jsonl에 보관한다. --no-mcp는 에이전트 등록과 지침 파일을 건너뛰고, --no-prompt-capture는 프롬프트 훅을 건너뛴다.
init이 출력하는 ✓는 완료, ·는 이미 적용됨, –는 옵션으로 건너뜀, ⚠는 해결 방법이 안내된 실패, ℹ는 완료됐지만 불완전함을 뜻한다. ⚠나 ℹ를 확인하지 않으면 설치가 성공처럼 보여도 Reticle이 앱을 찾지 못할 수 있다. 개발 서버가 이미 실행 중이었다면 설정을 다시 읽도록 서버를 재시작하고 브라우저 탭을 새로고침한다.
추가 옵션은 다음과 같다.
reticle init --env KEY=VALUE # 앱 시작에 필요한 환경 변수. 반복해서 지정 가능
reticle init --files-only # 파일만 쓰고 앱을 시작하지 않음
reticle init --json # 에이전트용 JSON 객체 하나를 출력
reticle init --no-mcp # 에이전트 등록과 지침 파일 생성을 건너뜀
Git에는 위 설정 파일과 .reticle/flows/의 저장된 흐름을 커밋해 팀원이나 CI가 다시 실행할 수 있다. 세션 기록에는 요청 본문과 페이지 텍스트가 들어가므로 나머지 .reticle/ 내용은 로컬에 둔다. Reticle은 이를 제외하는 .reticle/.gitignore를 만든다. 설정을 되돌리려면 init이 변경했다고 표시한 내용을 복구하고 개발 의존성 두 개, .reticle.json, .reticle/, reticle-dev 파일을 삭제한다. 제품 설명에 따르면 Reticle은 프로덕션 빌드에 포함되지 않는다.
앱 연결과 사용
에이전트를 한 번 재시작한 뒤 앱 폴더에서 첫 검증을 요청한다.
“Verify the sign-up flow with Reticle.”
에이전트는 reticle_session으로 앱을 찾고 reticle_act_and_wait로 클릭과 입력을 수행한 뒤 근거가 포함된 판정을 받는다. 에이전트 없이 현재 페이지의 한 가지 사실을 터미널에서 확인할 수도 있다. 이 명령은 흐름을 클릭하며 진행하지 않고, yes일 때만 종료 코드 0을 반환한다.
reticle verify http://localhost:5173 --expect '{"kind":"element","query":{"role":"heading","name":"Welcome"},"state":"visible"}'
Windows PowerShell에서는 따옴표 처리가 달라질 수 있으므로 JSON을 파일에 저장하고 --expect-file check.json을 전달할 수 있다. 검증 결과는 verified: "yes", "no" 또는 "unknown"과 근거다. unknown은 판정 불가이며 통과가 아니다. 세션이 끝나면 검증이 포함된 각 실행을 흐름으로 저장할 수 있으며, 이후에는 모델 없이 다시 실행한다.
앱 상태를 더 잘 확인하려면 reticle-dev 파일에 스토어와 기능을 등록할 수 있다. 초기에는 아무것도 등록하지 않으며 DOM, 네트워크, 콘솔은 기본적으로 읽을 수 있다.
// src/reticle-dev.ts: written by `reticle init`. You never import it; the plugin loads it.
import { registerCapabilities, registerStore } from '@reticlehq/react';
import { useApp } from './store';
if (import.meta.env.DEV) {
registerStore('app', useApp); // pass the STORE, not () => store.getState(): the store form sees every change
registerCapabilities({
testids: ['login-submit', 'cart-total'], // the data-testid values your key flows touch
signals: ['order:saved'], // names you emit with reticle.signal() where a thing really succeeds
stores: ['app'],
});
}
스토어 등록은 화면에 렌더링된 내용뿐 아니라 앱이 실제로 가진 상태를 확인하게 한다. 첫날부터 꼭 필요한 설정은 아니며, 가장 중요한 흐름에서 읽는 스토어부터 등록하라고 안내한다. 자세한 방법은 앱 계측 안내를 참고한다.
데이터와 보안 범위
Reticle은 오픈소스이며 실행되는 코드는 저장소에서 확인할 수 있다. SDK·어댑터·코어·엔진은 Apache-2.0, 서버와 CLI는 FSL-1.1-ALv2 라이선스다. 후자는 소스 공개 라이선스로, 2년 뒤 Apache-2.0으로 바뀐다. GitHub Actions가 npm SLSA provenance를 포함한 패키지를 배포하며, 설치 스크립트는 실행되지 않는다. OpenSSF Scorecard는 서명된 릴리스, 퍼징, 최소 권한 CI 토큰, 보안 정책 등을 평가한다.
앱 안에서 실행되는 검증 도구이므로 개발 의존성·빌드 설정·reticle-dev 파일을 건드린다. 에이전트 설정에는 MCP 도구를 등록하고, 필요하면 프로젝트 설정에 프롬프트 훅을 추가한다. 로컬 서비스는 127.0.0.1:4400에서만 연결을 받고 ~/.reticle/에 저장된 소유자 전용 토큰과 짝을 이룬다. 앱을 구동하는 Chromium 브라우저도 사용자의 컴퓨터에서 실행된다.
프로젝트를 reticle connect로 연결하거나 CI에서 RETICLE_API_KEY를 설정하지 않는 한 DOM, 네트워크 본문, 콘솔, 상태, 소스 등 앱 데이터는 컴퓨터 밖으로 나가지 않는다고 제품은 설명한다. 계정 없이도 로컬 판정을 할 수 있다. 프로젝트 연결 뒤에는 reticle config --runs/--memory/--flows on|off로 동기화 항목을 정한다. 에이전트에 보낸 각 프롬프트는 .reticle/에 저장되고, 연결된 프로젝트에서는 기본적으로 실행 기록과 함께 전송된다. .reticle.json에 "shareRequests": false를 설정하면 프롬프트를 로컬에만 보관할 수 있다. 프롬프트 저장 안내와 기록 항목 안내를 제공한다.
Harness가 앱을 구동하면 플랫폼은 각 단계를 보지만 비밀번호 입력란의 값은 컴퓨터 밖으로 보내지 않는다고 한다. Reticle은 익명 사용량도 기본 전송한다. 여기에는 실행한 명령과 도구, 무작위 ID가 포함되며 앱 데이터는 포함되지 않는다. 다음 설정 중 하나로 사용량 전송과 그 밖의 선택적 외부 호출을 끌 수 있다.
reticle telemetry disable
RETICLE_TELEMETRY=0
DO_NOT_TRACK=1
Reticle은 페이지에서 임의의 JavaScript를 실행하는 evaluate 도구를 제공하지 않고, 프로덕션 빌드에 포함되거나 클라이언트의 권한 확인을 우회하지 않는다고 밝힌다. 수집 데이터에서 비밀번호·토큰·카드 번호는 표시 전에 [REDACTED]로 바꾼다. 파일을 쓰지 않고 변경 계획을 보려면 다음 명령을 쓴다.
npx @reticlehq/server init --dry-run
보안 문제는 보안 정책에 따라 신고할 수 있다. 각 패키지의 서명 정보는 npm view @reticlehq/server dist.attestations로, 설치 후 서명은 npm audit signatures로 확인할 수 있다. 설치 스크립트가 없는지는 npm view @reticlehq/server scripts로 확인할 수 있다.
검증 흐름과 적용 분야
사용자는 테스트 문법을 작성하는 대신 자연어로 확인할 내용을 요청한다. 예를 들어 “체크아웃을 바꿨다. 끝났다고 말하기 전에 Reticle로 확인해라”, “페이지는 괜찮아 보이지만 내부 동작을 확인해라”, “버그를 재현하고 고친 뒤 같은 단계로 수정 여부를 확인해라”, “로그인 흐름을 저장해 변경 때마다 다시 검증해라”라고 요청할 수 있다. 결과에는 실행된 요청, 상태 변화, 콘솔 줄과 확인할 파일이 포함된다.
저장된 흐름은 reticle verify http://localhost:5173로 모델 없이 재검증할 수 있다. 흐름이 통과해야 하는 CI 게이트는 다음과 같이 실행한다.
npx @reticlehq/server gate --since HEAD~1
gate는 변경 사항의 영향을 받는 저장된 흐름을 찾아 각각 통과한 결과물이 없으면 0이 아닌 상태로 끝난다. 따라서 해당 파일을 고친 에이전트는 완료를 선언하기 전에 다시 검증해야 한다. 자세한 내용은 gate 안내에 있다. reticle affected는 변경에 영향을 받는 흐름을 나열하고, reticle report는 마지막 세션에서 주장한 내용과 실제로 확인된 내용을 보여준다.
Reticle은 보안 동작, 접근성·사용자 경험, 성능, 검색엔진 최적화, 사용자 유형별 시뮬레이션에도 활용할 수 있다고 소개한다. 역할별 접근 제어에서 보호된 요청이 403을 반환하는지, 금지된 요청이 발생하지 않는지, 비밀 정보가 페이지에 나타나지 않는지 확인할 수 있다. 키보드 조작과 포커스 이동, 요청 횟수, 최대 콘텐츠 표시 시간과 레이아웃 이동, React 렌더 횟수, 페이지 제목과 링크, 리디렉션과 실패 요청도 확인 대상으로 든다. 다만 전체 WCAG 감사에는 axe, 취약점 발견에는 보안 스캐너를 함께 사용하라고 안내한다. 사용자 여정은 --persona "a new user who signs up"처럼 설명해 탐색할 수 있고, 여러 에이전트가 각기 격리된 브라우저 컨텍스트에서 같은 앱을 병렬로 구동할 수 있다. 활용 예는 사용 사례 문서에 있다.
Reticle은 브라우저 바깥에서 보는 Playwright, DevTools, 브라우저 에이전트와 달리 앱 안에서 구조화된 이벤트를 읽는다. 화면에는 정상으로 보이는 결제 버튼의 500, 화면 표시와 다른 스토어 값, 중복 요청, 실패한 배포를 성공으로 표시하는 상태, 콘솔 오류, 초당 60회 컴포넌트 렌더링 등을 찾을 수 있다고 설명한다. Playwright는 소유하지 않은 사이트, 여러 브라우저와 실제 픽셀 확인에 쓰고 Reticle은 직접 만드는 앱의 에이전트 작업 흐름에 쓰도록 두 도구를 함께 사용할 것을 권한다.
로그인 확인의 예로 에이전트가 로그인 버튼을 누른 뒤 POST /api/login → 200 (14 ms) 응답, 대시보드 렌더링, auth: { email: "admin@…" } 상태를 확인해 근거가 붙은 verified: "yes"를 반환한다고 제시한다. 저장된 흐름은 나중에 모델 없이 실행된다.
벤치마크와 한계
Reticle의 벤치마크는 통제된 앱에 실제 회귀 버그 86개와 거짓 양성 함정 2개, 총 88개 항목을 주입해 Playwright 스크립트와 비교한다. 제작자는 모든 수치가 저장소에 커밋된 하니스에서 나왔으며 다음 명령으로 재현할 수 있다고 설명한다.
node bench/pw-vs-reticle/run.mjs
제작자 설명에 따르면 흐름 재검증에는 모델이 개입하지 않아 실행 비용이 고정되고 적으며, 전체 LLM 구동으로 테스트를 만든 경우에도 두 번째 실행부터 앞선다고 한다. 또한 이벤트 스트림에서 시간 제한이 있는 상태 변화를 확인해 기다리는 시간을 줄이고, 흐름 묶음을 일괄 실행하기 때문에 빠르다고 설명한다. 원문은 비교 차트 이미지를 연결하지만 본문에는 구체적인 벤치마크 수치를 제시하지 않는다.
Reticle이 강점으로 드는 항목은 조용히 실패한 요청, 화면과 다른 앱 상태, 오래된 캐시, 중복 제출, UI가 넘어간 뒤 실패한 쓰기다. 한 번의 동작 주변에서 생기는 경쟁 상태는 부분적으로 다루며, 끝나지 않은 요청과 중복 요청을 감지할 수 있지만 완전한 경쟁 상태 분석기는 아니다. 현재 볼 수 없다고 밝힌 대상은 IndexedDB, Web Workers, 닫힌 Shadow DOM, 교차 출처 iframe이다. 판정은 yes, no, unknown, no-fault다. 확인 대상으로 선언된 것이 없으면 no-fault가 나오며, 통과는 yes뿐이다.
CI에서 검증이 가능하다고 명시된 웹 환경은 React + Vite, Next.js, Remix, Astro다. 다른 프레임워크는 설치 단계에서 제한되거나 직접 연결해야 할 수 있으므로 프레임워크 목록에서 지원 범위를 확인해야 한다. 데스크톱은 Electron과 Tauri를 지원하며, 브라우저 도구만으로 볼 수 없는 IPC 경계도 포함한다고 설명한다. 테스트·구동 브라우저는 Chromium과 Electron·Tauri 웹뷰다. macOS, Linux, Windows에서 사용할 수 있다. zustand와 Redux는 별도 어댑터 없이 지원하고 TanStack Query, Jotai, XState, Valtio, MobX, Recoil, Svelte 스토어, Pinia용 지원도 제공한다고 밝힌다.
로컬 도구와 선택 기능
오픈소스 도구는 앱의 SDK, 로컬 데몬, 에이전트가 호출하는 MCP 도구, 페이지 구석의 HUD로 구성된다. HUD에는 에이전트의 동작, 판정, 저장된 흐름과 사용자가 고정한 메모가 표시된다. 계정 없이 사용할 수 있고 앱 데이터는 컴퓨터 밖으로 나가지 않는다고 설명한다.
선택 기능인 Harness는 사용자의 역할과 여정을 설명하면 브라우저에서 앱을 구동하고 단계별로 검증한 뒤 실행한 내용을 흐름으로 저장한다. 제작자 설명에 따르면 에이전트는 화면 스냅샷을 길게 처리하는 대신 한 번의 호출로 작업할 수 있다. Harness의 판정은 Reticle 플랫폼에서 이뤄진다. 새 계정에는 무료 크레딧이 제공되며, 카드를 등록하면 500 크레딧이 포함된 14일 체험이 시작된다. 실행은 앱에서 HUD의 Run Harness를 선택하거나 에이전트에 다음 요청을 전달한다.
reticle_verify { action: "explore", persona: "…" }
HUD에서 실행을 실시간으로 지켜보고 같은 패널에서 중단할 수 있다. 자세한 내용은 자동 구동 안내에 있다.
대시보드는 선택 사항이다. reticle connect --project "My App"을 실행하면 브라우저에서 로그인하거나 무료 계정을 만들고, 현재 폴더를 app.reticle.sh의 프로젝트에 연결한다. 앱 연결이 아직 안 됐다면 먼저 설정하고 로컬에 있는 실행 기록도 전송한다. 이후 실행 기록은 자동 동기화된다. 한 번만 동기화하려면 reticle sync, 계속 동기화하려면 reticle sync --watch를 쓴다. 대시보드에는 검증 내용과 결과, 실행 주체, 발견한 버그, 저장된 흐름, 경로·컨트롤 검증 범위, HUD 메모, 팀 보기와 공유 가능한 실행 증거 링크가 표시된다. 오픈소스 도구 사용에는 대시보드가 필요하지 않다.
명령어는 전역 설치 후 reticle <command>로, 또는 npx @reticlehq/server <command>로 실행한다. 전체 명령은 reticle help all, 개별 옵션은 reticle <command> --help에서 확인한다. reticle setup mcp는 에이전트 등록, reticle status는 실행 여부와 연결 앱 확인, reticle doctor는 브라우저·백그라운드 서비스·포트를 진단한다. reticle restart와 reticle stop은 백그라운드 서비스를 다시 시작하거나 중지한다. reticle open [url]은 연결된 브라우저에서 앱을 보여준다. 로그인한 사용자는 reticle try <url>로 URL을 한 번 구동해 어떤 여정이 작동하는지 확인할 수 있다.
reticle verify <url>은 저장된 흐름을 재실행하며 모두 통과할 때만 종료 코드 0을 반환한다. --explore --persona "a new user who signs up"은 Reticle이 직접 앱을 탐색하고 발견한 흐름을 저장하게 한다. --expect '<check>'는 한 가지 판정을 요청한다. CI에서는 npx @reticlehq/server verify <url> 뒤에 npx @reticlehq/server gate --since HEAD~1을 실행한다. 대시보드에 실행 기록을 올리고 싶을 때만 RETICLE_API_KEY를 설정한다.
reticle config --runs off처럼 --runs, --memory, --flows를 각각 on 또는 off로 설정할 수 있다. reticle runs는 대시보드의 실행 기록을 읽고, reticle runs regression은 흐름이 깨졌으면 종료 코드 3을 반환한다. reticle logout은 로그아웃한다. reticle update와 reticle rollback은 각각 최신 버전 설치와 이전 버전 복구에 쓰며, reticle telemetry disable은 익명 사용량 전송을 끈다. reticle feedback "message"는 전송할 내용을 출력한 뒤 의견을 전달한다.
설치 문제가 생기면 reticle doctor로 진단할 수 있다. CLI를 찾지 못하면 npx @reticlehq/server <command>를 사용한다. 설치 뒤 에이전트가 reticle_* 도구를 찾지 못하면 에이전트를 재시작한다. 설치 전에 에이전트가 이미 실행 중이었으면 도구 목록을 다시 불러오지 못할 수 있다. 개발 서버가 init 전에 실행 중이었다면 서버를 재시작하고 브라우저를 강력 새로고침한다. 포트 불일치에는 Vite에서 RETICLE_PORT=4400 npm run dev, 설정에서 reticle({ port: 4400 }), 또는 직접 연결할 때 reticle.connect({ url: 'ws://localhost:4400/reticle' })를 사용하도록 안내한다. 모노레포에서 앱을 여러 개 찾으면 reticle init --app <dir>를 다시 실행한다. Codex가 도구를 보지 못하고 codex가 PATH에 없으면 codex mcp add reticle -- npx @reticlehq/server mcp를 실행하거나 앞서 제시한 TOML 설정을 수동 추가한다. 전역 명령을 찾지 못하는 경우에는 export PATH="$(npm prefix -g)/bin:$PATH"를 설정하거나 npx를 이용한다. 추가 지원은 reticle feedback "what happened" 또는 Discord에서 받을 수 있다.
개발 중 앱의 파일을 직접 연결하는 수동 설치에서는 먼저 다음을 실행한다.
npm install -g @reticlehq/server
Claude Code에 사용자 범위로 등록하려면 다음을 쓴다.
claude mcp add reticle -s user -- npx @reticlehq/server mcp
Cursor와 Windsurf는 각각 ~/.cursor/mcp.json, ~/.codeium/windsurf/mcp_config.json에 MCP 항목을 추가한다. VS Code는 같은 항목을 .vscode/mcp.json의 servers 아래에 둔다.
{
"mcpServers": {
"reticle": { "command": "npx", "args": ["@reticlehq/server", "mcp"] }
}
}
Codex CLI 설정은 ~/.codex/config.toml에 둔다.
[mcp_servers.reticle]
command = "npx"
args = ["@reticlehq/server", "mcp"]
OpenCode는 opencode.json에 다음 형식을 쓴다.
{ "mcp": { "reticle": { "type": "local", "command": ["npx", "@reticlehq/server", "mcp"] } } }
설정을 바꾼 뒤 에이전트를 재시작한다. Vite와 React에서는 다음 개발 의존성을 설치한다.
npm install -D @reticlehq/react @reticlehq/vite-plugin
vite.config.ts에는 다음과 같이 플러그인을 추가한다.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { reticle } from '@reticlehq/vite-plugin';
export default defineConfig({
plugins: [reticle(), react()], // reticle() injects the dev-only connect, with the pairing token
});
Vue나 Svelte에서는 @reticlehq/react 대신 @reticlehq/browser를 설치하고 해당 프레임워크의 플러그인을 유지한다. Next.js App Router에서는 다음 패키지를 설치한다.
npm install -D @reticlehq/react @reticlehq/next
그리고 next.config.ts와 app/reticle-dev.tsx를 구성한다.
// next.config.ts
import { withReticle } from '@reticlehq/next';
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {};
export default withReticle(nextConfig); // supplies the token, URL and root in development
// app/reticle-dev.tsx
'use client';
import { useEffect } from 'react';
export function ReticleDev() {
useEffect(() => {
if (process.env.NODE_ENV !== 'development') return;
void import('@reticlehq/react').then(({ reticle, install }) => {
install();
const token = process.env.NEXT_PUBLIC_RETICLE_TOKEN;
const url = process.env.NEXT_PUBLIC_RETICLE_URL;
const root = process.env.NEXT_PUBLIC_RETICLE_ROOT;
reticle.connect({
url: 'ws://localhost:4400/reticle',
...(url ? { url } : {}),
...(token ? { token } : {}),
...(root ? { root } : {}),
});
});
}, []);
return null;
}
app/layout.tsx에서는 개발 환경에서만 컴포넌트를 마운트한다.
// app/layout.tsx: mount it in development only
import { ReticleDev } from './reticle-dev';
// …inside <body>:
{
process.env.NODE_ENV === 'development' ? <ReticleDev /> : null;
}
다른 프레임워크에서는 reticle init을 사용할 수 있다. 일반 HTML, Angular, Remix, Astro, SvelteKit, Nuxt 등을 연결하며 배포 파일에 토큰을 쓰지 않고 개발 시 페이지에 전달한다. 토큰이 없으면 로컬 브리지가 페이지 연결을 거부한다. 플러그인 없이 connect()를 직접 호출하는 방법은 수동 설치 안내에 있다.
라이선스와 문서
SDK·어댑터·코어·엔진은 Apache-2.0으로, 사용자가 만든 앱에 포함해 배포할 수 있다. 서버·CLI·init·테스트 실행기 @reticlehq/test는 FSL-1.1-ALv2다. Reticle 자체를 경쟁 제품이나 서비스로 제공하는 경우를 제외하면 사용은 무료이며, 각 버전은 출시 2년 뒤 Apache-2.0으로 전환된다. 엔터프라이즈 기능은 프로덕션에서 라이선스 키가 필요하고 개발·평가에는 무료다. 세부 내용은 LICENSE를 참고한다.
문서 사이트는 docs.reticle.sh이며 도구와 명령별 안내, 실제 실행에서 기록한 예시를 제공한다. 빠른 시작, 프레임워크, 문제 해결, 구조 문서, 기여 안내에서 자세한 내용을 볼 수 있다.
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요