Ears못 하는 일을 붙이기 (7화)
AI가 "다 고쳤습니다"라고 해도 화면이 실제로 뜨는지는 모릅니다. 브라우저를 열어 직접 확인하게 하거나 최신 문서를 읽어오게 하는 확장 도구를, 무엇부터 왜 붙여야 하는지 기준과 함께 다룹니다.
여기까지 오면 한 가지 답답한 게 남습니다. AI가 "다 고쳤습니다"라고 해도, 실제로 화면이 뜨는지는 모른다는 것.
클로드 코드는 기본 상태에서 못 하는 일이 있습니다. 브라우저를 열어 눈으로 확인하는 일, 최신 문서를 찾아 읽는 일 같은 것들이에요. 이걸 채우는 게 이번 화입니다.
두 종류가 있습니다
같은 "확장"이라도 성격이 꽤 다릅니다. 기능을 더하는 것과 일하는 순서를 정해주는 것이에요.
| 기능형 | 절차형 | |
|---|---|---|
| 하는 일 | 없던 능력 추가 | 일하는 순서를 강제 |
| 예 | 브라우저 조작, 최신 문서 조회 | 계획 → 구현 → 검토 → 배포 |
| 언제 | 구체적으로 아쉬운 기능이 있을 때 | 뭘 시켜야 할지 모르겠을 때 |
감이 안 잡히면 이렇게 생각하세요. 기능형은 "방금 만든 화면이 제대로 나오는지 AI가 브라우저를 열어 직접 확인하게 해주는 것", 절차형은 "'로그인 만들어줘' 한 마디에 AI가 알아서 계획→구현→검토 순서를 밟게 해주는 것"입니다.
처음에는 기능형 하나만 붙이세요. 부작용이 적고 효과가 바로 보입니다. 참고로 절차형처럼 일하는 순서를 통째로 정해주는 것을 하네스라고 부르는데, 지금 외울 필요는 없습니다.
가장 먼저 붙일 것 — 브라우저 확인
하나만 고르라면 이겁니다. AI가 만든 화면을 AI가 직접 열어서 확인하게 하는 거예요.
[없을 때] AI: "다 고쳤습니다" → 나: 브라우저 열어봄 → 안 됨 → 다시 말함
[있을 때] AI: 고침 → 스스로 열어서 확인 → 안 되면 스스로 고침 → 보고붙이기 전에 — 준비물 하나
이 화에서 붙이는 도구들은 Node.js 라는 프로그램이 있어야 돌아갑니다. 1화에서 설치 명령 한 줄로 끝냈다면 아마 없을 거예요. 먼저 확인합니다. 클로드 코드를 켠 상태에서 이렇게 쳐보세요.
! node --versionv22.14.0 처럼 숫자가 나오면 준비된 겁니다. command not found 가 뜨면 없는 거예요. 그럴 땐 nodejs.org 에서 "LTS" 라고 적힌 큰 버튼을 눌러 내려받고, 설치 파일을 실행해 다음만 계속 누르면 됩니다. 끝나면 터미널을 완전히 껐다가 다시 열고 위 명령을 다시 확인하세요.
브라우저 도구 붙이기
Playwright MCP 라는 것이 가장 널리 쓰입니다. Playwright 를 만드는 마이크로소프트에서 관리해요.
claude mcp add playwright -- npx @playwright/mcp@latest붙이고 나면 이렇게 시킬 수 있습니다.
방금 만든 index.html 을 브라우저로 열어서 링크가 실제로 눌리는지 확인해줘그다음 — 최신 문서 읽어오기
AI는 학습이 끝난 시점까지의 문법만 압니다. 그래서 옛날 버전 코드를 자신 있게 써주고, "이 함수는 없는데요" 같은 일이 생겨요.
Context7 을 붙이면 남이 만들어 둔 코드 뭉치(라이브러리)의 최신 사용법 문서를 그때그때 읽어옵니다.
claude mcp add context7 -- npx -y @upstash/context7-mcp이 두 가지가 초보에게 체감이 가장 큽니다. 나머지는 필요해지면 그때 찾아도 늦지 않아요.
절차형은 조금 뒤에
"빈 입력창 앞에서 뭘 쳐야 할지 모르겠다"가 진짜 문제라면 절차형이 도움이 됩니다. 다만 그 도구가 정한 방식을 따라가게 되니, 기본 사용법이 손에 익은 다음에 얹으시길 권합니다.
순서가 바뀌면 문제가 생겼을 때 내 코드가 잘못된 건지 그 도구가 잘못된 건지 구분이 안 돼서 시간을 더 씁니다. 1~6화를 손으로 한 번 해봤다면 그 구분이 됩니다.
결국 고르는 기준
| 상황 | 할 것 |
|---|---|
| 결과 확인이 답답하다 | 브라우저 도구 하나 |
| AI가 옛날 문법을 쓴다 | 최신 문서 도구 하나 |
| 뭘 시켜야 할지 모르겠다 | 절차형 검토 |
| 딱히 불편한 게 없다 | 아무것도 안 함 |
실습 — 브라우저로 확인시키기
claude-test 폴더에서 합니다.
cd ~/claude-test
claude1. 브라우저 도구를 붙입니다. 클로드 코드를 잠깐 나온 뒤(/exit 또는 Ctrl + C 두 번) 터미널에서 실행하세요.
claude mcp add playwright -- npx @playwright/mcp@latest2. 다시 claude 를 띄우고 /mcp 를 쳐서 목록을 봅니다. playwright 옆에 connected 라고 나오면 성공이에요.
/mcpfailed 라고 나온다면 십중팔구 위에서 말한 Node.js 문제입니다. "준비물" 절로 돌아가 ! node --version 부터 다시 확인하세요. 이건 여러분이 뭘 잘못한 게 아닙니다.
참고로 브라우저 도구는 처음 한 번 쓸 때 브라우저를 내려받느라 몇 분 걸립니다. 멈춘 것처럼 보여도 기다리면 됩니다.
3. 이제 확인을 시켜봅니다. "로컬 서버로 띄운 다음" 이 한마디가 중요합니다.
index.html 을 로컬 서버로 띄운 다음 브라우저로 열어서,
링크가 실제로 눌리는지 확인해줘. 확인이 끝나면 서버는 꺼줘4. AI가 브라우저를 열고 스스로 확인하는 걸 보면 됩니다. "고쳤습니다"가 아니라 "확인했습니다"로 바뀌는 순간이 이 실습의 핵심이에요.
코스를 마치며
일곱 화를 정리하면 이렇습니다.
| 화 | 핵심 |
|---|---|
| 1 | 터미널은 도구를 띄우는 창일 뿐 |
| 2 | 일 끝났으면 /clear, 안 끝났으면 /compact |
| 3 | 대상·조건·확인 방법을 넣어 시킨다 |
| 4 | 큰 작업 전에 커밋, 막히면 /rewind |
| 5 | 반복되는 규칙은 파일에 적는다 |
| 6 | 세 번 친 부탁은 커맨드로 만든다 |
| 7 | 불편을 겪은 다음에 도구를 붙인다 |
가장 중요한 하나만 고르라면 4화입니다. 되돌릴 줄 알아야 과감하게 시킬 수 있고, 과감하게 시켜야 AI를 쓰는 의미가 있거든요.
그리고 커맨드는 외우지 마세요. / 만 치면 목록이 뜨고, /help 는 지금 버전에서 실제로 되는 것만 보여줍니다. 블로그에 적힌 목록보다 항상 정확합니다.
자주 묻는 질문
- 확장 도구를 꼭 붙여야 하나요?
- 아니요. 불편을 겪은 다음에 붙이는 게 맞습니다. 딱히 아쉬운 게 없다면 아무것도 붙이지 않는 편이 낫습니다.
- 많이 붙일수록 좋은가요?
- 아닙니다. 붙인 만큼 대화 용량을 차지하고, 서로 충돌하기도 합니다. 하나씩 효과를 확인하면서 늘리세요.
- 개인이 만든 도구는 위험한가요?
- 위험하다기보다 관리가 멈출 수 있습니다. 공개된 페이지에서 마지막으로 수정된 날짜를 확인하세요. 1년 전이면 피하는 게 좋습니다.
- 무엇부터 붙이면 좋나요?
- 브라우저를 열어 결과를 확인하게 해주는 것을 가장 먼저 권합니다. AI가 '다 했습니다'라고 하고 실제로는 안 되는 상황을 막아줍니다.