rea로 잘 만든 사이트의 구조를 배워 내 서비스 만들기

한눈에 보는 진행 순서

1. Node.js 버전 확인하고 없으면 설치자세히 보기 →
2. rea 설치: 계획을 보고 승인한 뒤 Claude Code 다시 켜기자세히 보기 →
3. 새 프로필로 디버깅용 크롬 띄우기자세히 보기 →
4. Claude Code와 크롬에 둘 다 붙었는지 확인자세히 보기 →
5. 공식 연습 페이지(Notes)로 첫 관찰자세히 보기 →
6. 내 서비스: 관찰 → DESIGN.md → 구현 (프롬프트 3개)자세히 보기 →
7. 막히면 오류 표부터 보기자세히 보기 →
8. 남의 사이트를 보기 전에 선 지키기 읽기자세히 보기 →

rea가 하는 일

에이전트가 MCP로 rea를 불러 대상을 살펴보고, rea는 찾은 것과 그 근거를 돌려줘요. 에이전트는 그걸로 설명하거나, 비슷한 기능을 새로 짜고 테스트해요.

이 자료에서 쓰는 웹 관찰 도구는 '보기만' 해요. rea는 내가 따로 띄운 크롬에 붙어서 관찰만 하고, 클릭, 페이지 이동, 스크립트 실행은 하지 않아요. 클릭은 내가 하고, rea는 그동안 일어난 일을 기록해요.

rea에는 브라우저를 직접 띄우고 정해진 동작을 실행하는 도구(capture_browser_scenario)도 따로 있어요. 이건 관찰이 아니라 실제로 사이트를 조작하니, 남의 사이트에는 쓰지 않는 쪽을 권해요.

준비물

버전 확인

node -v
npm -v

버전이 낮거나 'command not found'가 나오면 Node.js 24 LTS를 깔아요. 아래는 rea 공식 시작 가이드가 안내하는 방법이에요.

맥

# Homebrew가 있으면
brew install node

# 없으면 fnm으로 (설치 뒤 터미널을 껐다 켜요)
curl -fsSL https://fnm.vercel.app/install | bash
fnm install 24
fnm default 24

윈도우 (PowerShell)

winget install OpenJS.NodeJS.LTS

설치 뒤 PowerShell을 닫았다가 다시 열고 node -v 로 확인해요. 나중에 npx를 칠 때 'running scripts is disabled on this system'이 나오면 Set-ExecutionPolicy -Scope CurrentUser RemoteSigned 를 한 번 실행하고 다시 해요.

리눅스

curl -fsSL https://fnm.vercel.app/install | bash
fnm install 24
fnm default 24

배포판 기본 nodejs 패키지는 22.19보다 낮은 경우가 많아요. 리눅스에서 자바스크립트 분석을 하려면 procps 패키지(ps 명령)도 있어야 해요.

설치 (Claude Code에 붙이기)

setup은 바꿀 내용을 먼저 보여 주고, 승인해야 적용해요. 두 가지 방법 중 편한 쪽으로 하세요.

방법 A. Claude Code에게 맡기기 (공식 안내 프롬프트를 옮긴 것)

npx rea-agents@latest setup 으로 REA를 설치하고 이 코딩 에이전트에 연결해 줘. 바꿀 내용(설치 계획)을 먼저 보여 주고, 내가 승인하면 적용한 다음 설치가 잘 됐는지 확인해 줘.

방법 B. 터미널에서 직접

1. 바뀔 내용부터 미리 보기 (아무것도 쓰지 않아요)

   npx rea-agents@latest setup --client claude_code --dry-run

   복사
2. 설치 실행: 에이전트를 고르고, 계획을 확인한 뒤 승인

   npx rea-agents@latest setup

   복사

   Claude Code를 고르면 계획은 두 가지예요: ~/.claude.json 에 rea MCP 서버 등록, ~/.claude/skills/reverse-engineer-anything 에 작업 지침(스킬) 설치. 기존 설정은 백업(.rea.backup)을 남기고 바꿔요. 거절하거나 Ctrl+C를 누르면 아무것도 안 바뀌어요.

3. Claude Code 세션을 끝내고 다시 시작

   등록은 그 시점의 버전(예: rea-agents@6.4.0)으로 고정돼요. 새 버전을 쓰려면 setup을 다시 해요.

4. 터미널에서도 rea 명령을 쓰려면 (선택)

   npm install --global rea-agents
   rea --help

   복사

다른 에이전트에 붙일 때

setup에서 고르거나, --client 뒤에 아래 이름을 적어요. 여러 개면 --client 를 반복해요.

Claude Desktop은 승인 전에 앱을 완전히 종료해요 (맥은 Cmd+Q). 켜져 있으면 등록을 덮어쓸 수 있어요. 데스크톱 앱은 창만 닫으면 다시 켠 게 아니에요.

한 프로젝트에만 붙이고 싶다면 (수동 등록)

setup은 Claude Code 전체(모든 프로젝트)에 등록해요. 한 프로젝트에서만 쓰려면 setup에서 Claude Code를 고르지 말고, 그 프로젝트 폴더에서 아래처럼 직접 등록해요. 이 방법은 스킬을 깔지 않고, rea doctor, rea uninstall, rea update가 이 등록을 보지 못해요 (GitHub 이슈 #2187, 아직 열려 있음).

# 맥, 리눅스
claude mcp add --scope local rea -- npx -y rea-agents@6.4.0 mcp

# 윈도우 PowerShell
claude mcp add --scope local rea -- cmd.exe /d /c npx -y rea-agents@6.4.0 mcp

# 지울 때 (같은 폴더에서)
claude mcp remove --scope local rea

--scope project 는 쓰지 마세요. 저장소에 .mcp.json 이 생겨서 커밋이나 복사로 같이 퍼질 수 있어요 (공식 설치 문서).

업데이트와 지우기

npx rea-agents@latest setup   # npx로 쓰는 경우: 등록을 새 버전으로 (계획 확인 후 승인)
rea update                    # 전역 설치한 CLI만 업데이트
rea uninstall                 # rea가 넣은 등록과 스킬만 지움
rea uninstall --purge-data    # ~/.rea 캐시와 상태까지 지움

디버깅용 크롬 따로 띄우기

rea는 크롬을 대신 띄우지 않아요. 디버깅 포트를 연 크롬을 새 프로필로 내가 띄우고, rea는 거기에 붙어요.

맥

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/rea-browser \
  https://rea.tools/examples/notes-web/

Brave는 "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser" 로 바꿔요. 이 터미널 창은 크롬이 켜져 있는 동안 붙잡혀 있으니, 다음 명령은 새 터미널 탭에서 해요.

윈도우 (PowerShell)

& "C:\Program Files\Google\Chrome\Application\chrome.exe" `
  --remote-debugging-port=9222 `
  --user-data-dir="$env:TEMP\rea-browser" `
  https://rea.tools/examples/notes-web/

크롬을 기본 위치에 깔았을 때의 경로예요. 다르면 크롬 바로가기의 속성에서 '대상' 경로를 써요.

리눅스

google-chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/rea-browser \
  https://rea.tools/examples/notes-web/

--user-data-dir(새 프로필)는 꼭 넣어요. 크롬 136부터는 평소 프로필에서 --remote-debugging-port가 무시돼요. 그리고 디버깅 포트는 그 프로필 전체를 들여다볼 수 있어서, 로그인된 평소 브라우저를 쓰지 않는 게 안전해요.

• 포트는 내 컴퓨터(127.0.0.1)에서만 열기. 다른 기기에서 접속되게 열지 않기
• 이 창에서는 개인 계정에 로그인하지 않기
• 다 쓰면 이 크롬 창은 직접 닫기 (rea는 브라우저를 끄지 않아요)

제대로 붙었는지 확인

1. 크롬: 다른 브라우저 창에서 아래 주소를 열어 JSON이 보이면 포트가 열린 거예요

   http://127.0.0.1:9222/json/version

   복사

   "Browser": "Chrome/..." 같은 줄이 보이면 돼요.

2. Claude Code: 다시 켠 뒤 /mcp 를 쳐서 rea가 연결됨인지 보기

   claude mcp list

   복사
3. 등록 상태 진단 (읽기만 해요)

   npx -y rea-agents@latest doctor --client claude_code --json

   복사

   등록이 없거나 오래됐다고 나오면 npx rea-agents@latest setup --client claude_code 로 다시 하고 Claude Code를 다시 켜요.

4. rea가 크롬 탭을 찾는지 보기

   npx -y rea-agents@latest list-browser-targets http://127.0.0.1:9222 --json

   복사

   targets 안에 띄운 페이지 주소와 target_id가 보이면 준비 끝이에요.

$ rea list-browser-targets http://127.0.0.1:9333 --json
"targets": [{ "target_id": "F59F...", "type": "page",
              "url": "https://rea.tools/examples/notes-web/", "origin": "https://rea.tools" }]
"excluded": { "disallowed_origin": 0, "unsupported_url": 0, "non_page": 6 }

위 출력은 우리가 다른 포트(9333)로 시험한 것을 필요한 칸만 줄인 거예요. Claude Code 안에서 확인하고 싶으면 'rea의 binary_session 도구로 서버 버전을 알려 줘'라고 물어봐도 돼요.

첫 연습: 공식 Notes 예제

rea가 연습용으로 공개한 Notes 페이지에는 Export notes 버튼이 하나 있어요. 이 버튼을 누를 때 무슨 일이 일어나는지 rea로 따라가 봐요.

'디버깅 크롬'의 명령으로 https://rea.tools/examples/notes-web/ 를 띄운 다음, Claude Code에 이렇게 물어요 (공식 예시 프롬프트를 옮긴 것).

rea로 http://127.0.0.1:9222 에 열린 https://rea.tools/examples/notes-web/ 페이지를 관찰해 줘. 내가 Export notes를 누르는 동안 어떤 요청이 나가는지, CSV는 어떻게 만들어지는지 알려 줘. 관찰을 시작하기 직전에 지금 누르라고 말해 줘.

관찰이 시작되면 몇 초 안에 Export notes를 눌러요. 관찰은 rea가 붙은 뒤부터라, 그 전에 누른 건 기록되지 않아요.

공식 가이드가 기록해 둔 결과(rea 4.1.0)는 아래와 같아요. 비슷하게 나오면 잘 된 거예요.

터미널로 같은 걸 하려면

npx -y rea-agents@latest list-browser-targets http://127.0.0.1:9222 --json

# TARGET_ID 는 위 결과의 target_id. 실행하고 몇 초 뒤 Export notes 누르기
npx -y rea-agents@latest inspect-web-page http://127.0.0.1:9222 TARGET_ID \
  --observation-ms 10000 \
  --include-accessibility-text \
  --include-json-body-shapes --json > notes-page.json

결과는 관찰 시간(10초)이 끝나야 나와요. 다음 단계로 '제목에 쉼표나 따옴표가 있으면 CSV에서 어떻게 처리하는지 export.js에서 찾아 줘'처럼 하나 더 물어보면 코드까지 따라가요.

웹사이트 분석 핵심 명령

Claude Code에 붙였다면 명령을 외울 필요는 없어요. 다만 무엇을 할 수 있는지 알아야 정확히 시킬 수 있어요.

Claude Code 안에서 쓰는 MCP 도구 이름은 - 를 _ 로 바꾼 것이에요 (예: list-browser-targets → list_browser_targets). 터미널에서는 npx -y rea-agents@latest 뒤에 명령을 붙여요.

inspect-web-page 옵션 (필요한 것만 켜요)

결과가 크면 요약부터

npx -y rea-agents@latest inspect-web-page http://127.0.0.1:9222 TARGET_ID --include-script-sources --json > page.json
npx -y rea-agents@latest export-web-scripts "$PWD/page.json" "$PWD/site-scripts" --json > export.json
npx -y rea-agents@latest analyze-javascript-application "$PWD/site-scripts/files" --json > app.json
jq -c '{source: {kind: "inline", evidence: .}, view: {kind: "summary"}}' app.json > view.json
npx -y rea-agents@latest inspect-analysis-view view.json

export-web-scripts의 두 경로는 절대 경로여야 하고, 꺼낼 폴더는 아직 없어야 해요. 분석할 폴더는 꺼낸 폴더 안의 files 예요 (export.json의 analysis_input.input_path). jq가 없으면 brew install jq 로 깔아요. 모듈 목록을 쪽으로 보려면 view를 {"kind": "page", "collection": "modules", "offset": 0, "limit": 32} 로 바꿔요.

Claude Code 안에서는 analyze_javascript_application을 detail: summary 로 부르게 하면 전체 결과는 세션에 두고 요약만 돌려받아요. MCP 결과는 한 번에 10MiB까지라, 넘치면 inspect_analysis_view나 export_evidence_bundle로 나눠 봐요.

Claude Code로 내 서비스 만들기 (관찰 → DESIGN.md → 구현)

아래 순서와 프롬프트는 rea 공식 문서의 예시 프롬프트와 도구를 바탕으로 우리가 제안하는 흐름이에요. 구조와 동작은 배우고, 결과물은 처음부터 내 것으로 만들어요.

1. 내 프로젝트 폴더에서 Claude Code를 열고 규칙부터 적기

   ## 참고 사이트 분석 규칙
   - rea 결과 원본은 .rea/ 폴더에 파일로 저장하고, 대화에는 요약만 가져온다
   - .rea/ 는 .gitignore 에 넣고 커밋하지 않는다
   - 참고 사이트의 코드, 문구, 이미지, 폰트, 로고, 색 조합은 가져오지 않는다
   - 구조와 동작 패턴만 배우고, 구현은 이 프로젝트의 스택으로 처음부터 새로 쓴다
   - 관찰(근거 있음), 추론, 모름을 나눠 적고, 근거가 없는 부분은 모름으로 남긴다

   복사

   프로젝트의 CLAUDE.md에 아래 규칙을 넣어 두면 매번 말하지 않아도 돼요.

2. 디버깅 크롬에 참고할 페이지를 띄우기

   처음에는 공식 Notes 예제나 내 사이트로 연습하세요. 로그인이 필요한 페이지는 피해요.

3. 프롬프트 1로 관찰하고, 보고 싶은 버튼은 내가 누르기
4. 프롬프트 2로 근거를 내 설계 문서(DESIGN.md)로 옮기기
5. 프롬프트 3으로 처음부터 구현하고, 내 페이지를 같은 방법으로 다시 관찰해 확인하기

프롬프트 1. 관찰 (구조와 동작 하나)

rea로 http://127.0.0.1:9222 디버깅 크롬에 열린 [페이지 주소] 탭을 관찰해 줘.
1) list_browser_targets로 탭을 찾아.
2) inspect_web_page를 include_accessibility_text, include_json_body_shapes를 켜고 observation_ms 10000으로 실행해. 시작하기 직전에 지금 누르라고 말해 주면, 그동안 내가 [버튼 이름]을 누를게.
3) analyze_web_bundle로 청크 관계와 라우트, API 주소 후보를 봐.
4) 끝나면 export_evidence_bundle로 근거를 .rea/evidence.json 에 저장해.
나한테는 아래만 짧게, 항목마다 근거와 함께 정리해 줘: 섹션 구성과 레이아웃, 기술 스택 흔적(프레임워크, 번들 청크), 버튼을 눌렀을 때 나간 요청(주소, 상태, 응답 JSON의 키 구조)과 그 요청을 보낸 스크립트. 관찰, 추론, 모름을 나눠서 적고, 근거가 없는 건 모름으로 남겨.

프롬프트 2. 내 설계로 옮기기 (DESIGN.md)

지금까지의 근거로 우리 서비스용 DESIGN.md를 써 줘. 서비스 이름은 [내 서비스], 브랜드 색은 [내 색], 글은 한국어로 새로 쓰고, 참고 사이트의 문구, 이미지, 로고, 폰트, 코드는 쓰지 마. 섹션 구성, 데이터 흐름(요청과 응답의 키 구조), 인터랙션 패턴만 우리 말로 옮기고, 항목마다 어떤 근거(요청, 스크립트, 위치)에서 왔는지 한 줄씩 남겨 줘. 모름으로 남은 부분은 우리가 정할 것 목록으로 따로 모아 줘.

프롬프트 3. 구현과 확인

DESIGN.md대로 이 프로젝트 스택으로 처음부터 구현해 줘. 끝나면 개발 서버를 띄우고, 디버깅 크롬에서 내 페이지(http://127.0.0.1:포트)를 열어 rea inspect_web_page로 같은 동작을 관찰해서, 나가는 요청과 응답 키 구조가 DESIGN.md와 맞는지 표로 비교해 줘. 테스트도 같이 써 줘.

rea는 안내 프롬프트도 MCP로 줘요: investigate_feature, compare_application_versions, verify_reconstruction, trace_crash, audit_residual_unknowns, prepare_bounded_process_capture. Claude Code에서 / 를 치면 /mcp__rea__investigate_feature 처럼 보여요. 이 6개는 앱 폴더와 실행 파일용이라, 웹은 위처럼 말로 시키는 게 편해요. 꺼낸 스크립트 폴더(site-scripts/files)를 깊게 볼 때는 investigate_feature에 그 폴더와 기능 이름을 주면 돼요.

Claude 없이 결과만 넘길 때

MCP 연결이 어렵다면 '핵심 명령'의 CLI로 결과를 파일로 만들고, 요약(inspect-analysis-view의 summary)이나 필요한 부분만 Claude에게 첨부해도 돼요. 이때도 원본 스크립트 전체를 붙여 넣는 건 피하세요.

직접 돌려 본 결과 (rea 6.4.0)

전역 설치 없이 임시 폴더에만 설치하고, rea 공식 예제 페이지와 우리 사이트(todah.dev)에만 돌렸어요. 2026-10-13에 돌리고, 10-14에 명령을 다시 맞춰 봤어요.

자주 막히는 곳

알아 둘 한계

• 관찰은 rea가 붙은 뒤부터예요. 그 전에 오간 요청은 기록되지 않으니, 관찰을 켠 다음 클릭하세요. 기록에 없다고 요청이 없었던 건 아니에요.
• DOM은 구조(태그와 속성 이름)만 남기고 글자와 속성 값은 남기지 않아요. 버튼 이름 같은 글은 접근성 텍스트를 켤 때만 와요.
• 요청과 응답의 본문, 쿠키, 인증 헤더 값은 저장하지 않아요. JSON은 키 구조만 남겨요.
• 브라우저로 내려온 것만 봐요. 서버 쪽 코드, 문자열로 조립한 주소, 암호화된 설정은 모름으로 남을 수 있어요.
• 소스맵은 요청할 때만(--fetch-source-maps) 가져와요.
• 분석 결과가 커서 대화 창을 금방 채워요. 파일로 저장하고 요약만 넘기세요.
• rea는 거의 매일 새 버전이 나와요. 이상하면 먼저 업데이트하세요.
• 디컴파일과 AI 분석은 틀리거나 빠질 수 있어요. 중요한 결론은 근거를 직접 확인하세요.

링크

1. rea 홈페이지 (설치, 예제)자세히 보기 →
2. 시작 가이드 (Node.js, 에이전트 연결, 도움말)자세히 보기 →
3. 브라우저 관찰 가이드 (Notes 예제)자세히 보기 →
4. FAQ (업데이트, 문제 해결, 데이터)자세히 보기 →
5. GitHub 저장소자세히 보기 →
6. 책임 있는 사용 안내 (DISCLAIMER)자세히 보기 →