이 장에서는 Claude의 크롬 익스텐션을 소개합니다. 브라우저에서 직접 Claude를 활용하여 웹 페이지 탐색, 캡처, 디자인 시스템으로 활용할 JSON 파일 추출 등 다양한 작업을 자동화할 수 있습니다.

1. Claude 크롬 익스텐션이란?

Claude 크롬 익스텐션은 브라우저 내에서 Claude가 직접 웹 페이지를 조작할 수 있게 해주는 도구입니다. 기존에는 Claude에게 무언가를 요청하면 텍스트로 답변을 받거나 코드를 생성받는 방식이었습니다. 하지만 크롬 익스텐션을 사용하면 Claude가 실제로 웹 브라우저를 조작하여 작업을 수행할 수 있습니다.

2. 설치 방법

크롬 익스텐션 설치는 매우 간단합니다. 아래 링크에서 Add to Chrome 버튼을 클릭하면 Chrome 웹 스토어에서 바로 설치할 수 있습니다.

• 링크: https://claude.com/chrome

저는 이미 설치가 되어 있기 때문에 'Chrome에서 삭제' 버튼이 있지만, 여러분에게는 설치 버튼이 있을 것입니다.

설치가 완료되면 크롬 브라우저 우측 상단에 Claude 아이콘이 나타납니다. 이 아이콘을 클릭하여 익스텐션을 활성화할 수 있습니다. 로그인이 되어 있지 않으면 로그인 화면이 나타납니다. 로그인 후에는 익스텐션이 정상적으로 작동합니다.

3. 기본 사용법

간단하게 몇 가지 실험을 해보도록 하겠습니다. 우선 아래와 같이 탐색을 하거나, 요약을 할 수 있습니다.

이 서비스에 책이 몇 권 있지?

아래 '플랜 승인' 버튼을 누르면 Claude가 해당 페이지의 정보를 가지고 원하는 결과를 생성합니다. 모든 작업이 완료된 화면입니다.

3.1 특정 정보 추출

페이지 정보를 추출해서 JSON 파일이나 CSV 파일로 만들어 다운로드 받을 수 있습니다. 예를 들어, 아래와 같이 요청할 수 있습니다.

이 페이지에 있는 모든 책 제목과 저자를 JSON 파일로 만들어줘.

추출이 되었고, 다운로드까지 된 것을 확인할 수 있습니다.

3.2 버튼 클릭 및 폼 작성

특정 버튼을 클릭하거나 폼을 작성하는 것도 가능합니다. 예를 들어, 아래와 같이 요청할 수 있습니다.

'베스트셀러 보기' 버튼을 클릭해줘.

또는 폼 작성을 할 수도 있습니다.

이 폼을 모두 작성해줘. 모르는 내용이 있다면 임시로 넣어줘.

이처럼 메일 작성, 회원 가입, 검색 등 다양한 작업을 자동화할 수 있습니다.

3.3 다양한 활용

바이브 코딩에 이를 접목시키면, 디자인 시스템에서 컴포넌트 정보를 추출하거나, 만들어진 웹 페이지를 눌러 보며 검토하는 등 다양한 활용이 가능합니다. 10장 3절의 검토 체크리스트 중 '눌러 보기'와 '망가뜨려 보기'를 익스텐션에 맡길 수 있습니다. 5장에서 배포한 주소를 브라우저에서 열고 아래처럼 요청하면 됩니다.

이 페이지의 모든 버튼과 링크를 눌러 보고, 동작하지 않거나 엉뚱한 곳으로 가는 것을 정리해줘. 그리고 주문 칸에 빈칸, 0, 글자를 넣어서 보내 보고 막히는지 확인해줘.

다만 Code 탭과 익스텐션이 연결되어 있는 것은 아니기 때문에 검토가 끝난 다음에는 '찾은 문제를 번호 목록으로 정리해줘. Code 탭에 붙여서 고치라고 할 거야.'라고 요청하고, 그 목록을 Code 탭에 붙여 넣는 것이 좋습니다.