6 6 

7> Claude Code를 Chrome 브라우저에 연결하여 웹 앱을 테스트하고, 콘솔 로그로 디버깅하며, 양식 작성을 자동화하고, 웹 페이지에서 데이터를 추출합니다.7> Claude Code를 Chrome 브라우저에 연결하여 웹 앱을 테스트하고, 콘솔 로그로 디버깅하며, 양식 작성을 자동화하고, 웹 페이지에서 데이터를 추출합니다.

8 8 

9Claude Code는 [Claude in Chrome 브라우저 확장 프로그램](https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn)과 통합되어 CLI 또는 [VS Code 확장 프로그램](/docs/ko/vs-code#automate-browser-tasks-with-chrome)에서 브라우저 자동화 기능을 제공합니다. 코드를 작성한 후 컨텍스트를 전환하지 않고 브라우저에서 테스트하고 디버깅합니다.9Claude Code는 [Claude in Chrome 브라우저 확장 프로그램](https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn)과 통합되어 CLI 또는 [VS Code 확장 프로그램](/docs/ko/vs-code#automate-browser-tasks-with-chrome)에서 브라우저 자동화 기능을 제공합니다. 코드를 빌드한 후 컨텍스트를 전환하지 않고 브라우저에서 테스트하고 디버깅합니다.

10 10 

11Claude는 브라우저 작업을 위해 새 탭을 열고 브라우저의 로그인 상태를 공유하므로 이미 로그인한 모든 사이트에 액세스할 수 있습니다. 브라우저 작업은 실시간으로 표시되는 Chrome 창에서 실행됩니다. Claude가 로그인 페이지나 CAPTCHA를 만나면 일시 중지하고 수동으로 처리하도록 요청합니다.11Claude는 브라우저 작업을 위해 새 탭을 열고 브라우저의 로그인 상태를 공유하므로 이미 로그인한 모든 사이트에 액세스할 수 있습니다. 브라우저 작업은 실시간으로 표시되는 Chrome 창에서 실행됩니다. Claude가 로그인 페이지나 CAPTCHA를 만나면 일시 중지하고 수동으로 처리하도록 요청합니다.

12 12 

13확장 프로그램은 Claude가 연 탭을 세션에 연결된 Chrome 탭 그룹으로 모읍니다. 로컬 세션에서는 세션이 종료될 때 Claude Code가 해당 그룹을 닫는지 여부가 세션이 종료되는 방식에 따라 달라집니다.

14 

15* `/clear`를 입력하면 Claude Code는 열려 있는 페이지를 포함하여 그룹을 닫습니다. 단, clear 이후에도 유지되는 작업이 아직 실행 중인 경우는 예외입니다

16* `/resume`과 같은 명령으로 세션을 전환하거나, Claude Code를 종료하거나, clear 이후에도 유지되는 작업이 아직 실행 중인 상태에서 `/clear`를 실행하면, Claude Code는 그룹에 빈 새 탭만 있는 경우에만 그룹을 닫으므로 아직 읽고 있을 수 있는 페이지는 열린 상태로 유지됩니다

17 

13<Note>18<Note>

14 Chrome 통합은 Google Chrome 및 Microsoft Edge에서 작동합니다. Brave, Arc 또는 기타 Chromium 기반 브라우저에서는 아직 지원되지 않습니다. Windows Subsystem for Linux(WSL)도 지원되지 않습니다.19 Chrome 통합은 Google Chrome 및 Microsoft Edge에서 작동합니다. Claude Code는 Brave, Arc, Vivaldi, Opera를 포함한 기타 Chromium 기반 브라우저에서도 확장 프로그램을 감지하고 연결을 설정합니다. Chrome 통합은 Windows Subsystem for Linux(WSL)에서는 지원되지 않습니다.

15</Note>20</Note>

16 21 

17<h2 id="capabilities">22<h2 id="capabilities">

18 기능23 기능

19</h2>24</h2>

20 25 

21Chrome이 연결되면 단일 워크플로우에서 브라우저 작업과 코딩 작업을 연결할 수 있습니다.26Chrome이 연결되면 단일 워크플로에서 브라우저 작업과 코딩 작업을 연결할 수 있습니다.

22 27 

23* **라이브 디버깅**: 콘솔 오류 및 DOM 상태를 직접 읽은 후 이를 유발한 코드를 수정합니다.28* **라이브 디버깅**: 콘솔 오류 및 DOM 상태를 직접 읽은 후 이를 유발한 코드를 수정합니다.

24* **디자인 검증**: Figma 목업에서 UI를 빌드한 후 브라우저에서 열어 일치하는지 확인합니다.29* **디자인 검증**: Figma 목업에서 UI를 만든 후 브라우저에서 열어 일치하는지 확인합니다.

25* **웹 앱 테스트**: 양식 유효성 검사를 테스트하고, 시각적 회귀를 확인하거나, 사용자 흐름을 검증합니다.30* **웹 앱 테스트**: 양식 유효성 검사를 테스트하고, 시각적 회귀를 확인하거나, 사용자 흐름을 검증합니다.

26* **인증된 웹 앱**: API 커넥터 없이 Google Docs, Gmail, Notion 또는 로그인한 모든 앱과 상호작용합니다.31* **인증된 웹 앱**: API 커넥터 없이 Google Docs, Gmail, Notion 또는 로그인한 모든 앱과 상호작용합니다.

27* **데이터 추출**: 웹 페이지에서 구조화된 정보를 가져와 로컬에 저장합니다.32* **데이터 추출**: 웹 페이지에서 구조화된 정보를 가져와 로컬에 저장합니다.

28* **작업 자동화**: 데이터 입력, 양식 작성 또는 다중 사이트 워크플로우와 같은 반복적인 브라우저 작업을 자동화합니다.33* **작업 자동화**: 데이터 입력, 양식 작성 또는 다중 사이트 워크플로와 같은 반복적인 브라우저 작업을 자동화합니다.

34* **파일 업로드**: 로컬 컴퓨터의 파일을 웹 페이지의 업로드 필드에 첨부합니다.

29* **세션 기록**: 브라우저 상호작용을 GIF로 기록하여 발생한 상황을 문서화하거나 공유합니다.35* **세션 기록**: 브라우저 상호작용을 GIF로 기록하여 발생한 상황을 문서화하거나 공유합니다.

30 36 

31<h2 id="prerequisites">37<h2 id="prerequisites">

32 필수 요구사항38 사전 요구 사항

33</h2>39</h2>

34 40 

35Chrome에서 Claude Code를 사용하기 전에 다음이 필요합니다.41Chrome에서 Claude Code를 사용하기 전에 다음이 필요합니다.

36 42 

37* [Google Chrome](https://www.google.com/chrome/) 또는 [Microsoft Edge](https://www.microsoft.com/edge) 브라우저43* [Google Chrome](https://www.google.com/chrome/), [Microsoft Edge](https://www.microsoft.com/edge) 또는 Brave, Arc, Vivaldi, Opera와 같은 기타 Chromium 기반 브라우저

38* [Claude in Chrome 확장 프로그램](https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn) 버전 1.0.36 이상(Chrome 웹 스토어에서 두 브라우저 모두에 사용 가능)44* [Claude in Chrome 확장 프로그램](https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn) 버전 1.0.36 이상(Chrome 웹 스토어에서 제공)

39* [Claude Code](/docs/ko/quickstart#step-1-install-claude-code)45* [Claude Code](/docs/ko/quickstart#step-1-install-claude-code)

40* 직접 Anthropic 플랜 (Pro, Max, Team 또는 Enterprise)46* 직접 Anthropic 플랜 (Pro, Max, Team 또는 Enterprise)

41 47 

48Chrome 통합을 사용하려면 `/login`으로 로그인해야 합니다. API 키 또는 [`claude setup-token`](/docs/ko/authentication#generate-a-long-lived-token)으로 생성한 장기 토큰으로 인증하는 경우, 브라우저 확장 프로그램이 해당 자격 증명으로 인증할 수 없으므로 `--chrome`을 전달하더라도 Claude Code는 Chrome 통합을 비활성화한 상태로 유지합니다. v2.1.216 이전에는 이러한 세션에서 Chrome 통합을 활성화할 수 있었지만, 브라우저 확장 프로그램에 연결하려는 모든 시도가 403 오류로 실패했습니다.

49 

42<Note>50<Note>

43 Chrome 통합은 Amazon Bedrock, Google Cloud의 Agent Platform 또는 Microsoft Foundry와 같은 타사 제공자를 통해 사용할 수 없습니다. 타사 제공자를 통해서만 Claude에 액세스하는 경우 이 기능을 사용하려면 별도의 claude.ai 계정이 필요합니다.51 Chrome 통합은 Amazon Bedrock, Google Cloud의 Agent Platform 또는 Microsoft Foundry와 같은 타사 제공자를 통해 사용할 수 없습니다. 타사 제공자를 통해서만 Claude에 액세스하는 경우 이 기능을 사용하려면 별도의 claude.ai 계정이 필요합니다.

44</Note>52</Note>

55 claude --chrome63 claude --chrome

56 ```64 ```

57 65 

58 기존 세션 내에서 `/chrome`을 실행하여 Chrome을 활성화할 수도 있습니다.66 Chrome으로 처음 시작하면 Claude Code가 통합 기능을 소개하고 사이트 권한의 작동 방식을 설명하는 일회성 대화 상자를 표시합니다. Enter 키를 눌러 계속합니다.

67 

68 플래그 없이 이후 세션에서도 Chrome을 활성화하려면 [기본적으로 Chrome 활성화](#enable-chrome-by-default)를 참조하세요.

59 </Step>69 </Step>

60 70 

61 <Step title="Claude에게 브라우저 사용을 요청">71 <Step title="Claude에게 브라우저 사용을 요청">

62 이 예제는 페이지로 이동하고, 상호작용하며, 터미널이나 편집기에서 모두 발견한 내용을 보고합니다:72 이 예제는 페이지로 이동하고, 상호작용하며, 발견한 내용을 보고하는 모든 과정을 터미널이나 편집기에서 수행합니다:

63 73 

64 ```text theme={null}74 ```text wrap theme={null}

65 code.claude.com/docs로 이동하여 검색 상자를 클릭하고,75 code.claude.com/docs로 이동하여 검색 상자를 클릭하고,

66 "hooks"를 입력한 후 나타나는 결과를 알려주세요76 "hooks"를 입력한 후 나타나는 결과를 알려주세요

67 ```77 ```

68 78 

69 첫 번째 브라우저 작업은 `claude-in-chrome` 스킬을 사용할 수 있는 권한을 요청합니다. 승인하면 Claude가 새 탭을 열고 작업을 시작합니다.79 Claude Code가 브라우저 작업 전에 권한을 요청하면 승인합니다. 대화 상자는 `Claude in Chrome wants to`로 시작하며, 세션 동안 해당 사이트의 모든 작업을 허용하는 옵션을 제공합니다. Claude가 새 탭을 열고 작업을 시작합니다.

70 </Step>80 </Step>

71</Steps>81</Steps>

72 82 

73언제든지 `/chrome`을 실행하여 연결 상태를 확인하고, 권한을 관리하거나, 확장 프로그램을 다시 연결하거나, 사용할 연결된 브라우저를 선택할 수 있습니다. 브라우저 작업이 시작될 때 둘 이상의 브라우저가 연결되어 있으면 Claude가 하나를 선택하도록 요청합니다.83언제든지 `/chrome`을 실행하여 연결 상태를 확인하고, 권한을 관리하거나, 확장 프로그램을 다시 연결하거나, 사용할 연결된 브라우저를 선택할 수 있습니다. 상태 패널에 "상태: 활성화됨" 및 "확장 프로그램: 설치됨"이 표시되면 통합 기능이 정상적으로 작동하는 것입니다.

84 

85둘 이상의 브라우저가 연결되어 있으면 Claude가 사용할 브라우저를 직접 선택합니다. 선택하기 전에 브라우저 작업이 시작되면 Claude가 하나를 선택하도록 요청합니다. 나중에 브라우저를 전환하려면 `/chrome`을 실행하고 \*\*브라우저 선택…\*\*을 선택합니다. 다른 브라우저가 연결되더라도 Claude는 선택한 브라우저를 계속 사용합니다.

74 86 

75VS Code의 경우 [VS Code에서 브라우저 자동화](/docs/ko/vs-code#automate-browser-tasks-with-chrome)를 참조하세요.87VS Code의 경우 [VS Code에서 브라우저 자동화](/docs/ko/vs-code#automate-browser-tasks-with-chrome)를 참조하세요.

76 88 

89<h3 id="install-the-extension-when-claude-asks">

90 Claude가 요청할 때 확장 프로그램 설치

91</h3>

92 

93대화형 세션에서 Claude가 브라우저를 필요로 하는데 Claude Code가 확장 프로그램을 감지하지 못하면, Claude Code는 "Claude가 브라우저를 사용하려고 합니다"라는 제목의 설치 프롬프트를 표시합니다. Claude Code는 세션당 최대 한 번만 묻습니다.

94 

95프롬프트는 세 가지 선택지를 제공합니다:

96 

97* **확장 프로그램 설치**: 브라우저에서 확장 프로그램 설치 페이지를 열고 안내형 설정을 시작합니다. Claude Code는 설치를 기다린 후 확장 프로그램을 연결하고 같은 세션에서 브라우저 도구를 활성화합니다. 연결이 준비되면 "브라우저 도구로 계속"을 선택하고, Claude가 브라우저에서 작업을 재개합니다. "브라우저 도구 없이 계속"을 선택하여 설정을 종료하고 나중에 `/chrome`으로 완료할 수 있습니다.

98* **나중에**: 브라우저 도구 없이 작업을 계속합니다. Claude Code는 이후 세션에서 다시 물을 수 있습니다.

99* **다시 묻지 않음**: 이후 세션에서 프롬프트를 표시하지 않습니다. 언제든지 `/chrome`으로 통합 기능을 설정할 수 있습니다.

100 

101두 가지 관리형 MCP 정책이 프롬프트를 끕니다:

102 

103* 조직이 [`deniedMcpServers` 관리형 설정](/docs/ko/managed-mcp#policy-based-control-with-allowlists-and-denylists)으로 `claude-in-chrome` MCP 서버를 차단하면 Claude Code는 설치 프롬프트를 표시하지 않습니다.

104* 조직이 [관리형 세트와 함께 Claude in Chrome 허용](/docs/ko/managed-mcp#allow-claude-in-chrome-alongside-the-managed-set) 없이 [`managed-mcp.json`](/docs/ko/managed-mcp#exclusive-control-with-managed-mcp-json) 파일을 배포하면 Claude Code는 설치 프롬프트를 표시하지 않습니다.

105 

77<h3 id="enable-chrome-by-default">106<h3 id="enable-chrome-by-default">

78 기본적으로 Chrome 활성화107 기본적으로 Chrome 활성화

79</h3>108</h3>

80 109 

81각 세션마다 `--chrome`을 전달하지 않으려면 `/chrome`을 실행하고 "기본적으로 활성화"를 선택합니다.110각 세션마다 `--chrome`을 전달하지 않으려면 `/chrome`을 실행하고 "기본적으로 활성화"를 선택합니다.

82 111 

112Chrome이 실행 중이 아니어도 Claude Code는 정상적으로 시작됩니다. v2.1.211 이전에는 Chrome 통합이 활성화되어 있지만 Chrome이 실행 중이 아닐 때 시작이 멈출 수 있었습니다.

113 

83[VS Code 확장 프로그램](/docs/ko/vs-code#automate-browser-tasks-with-chrome)에서는 Chrome 확장 프로그램이 설치되어 있으면 Chrome을 사용할 수 있습니다. 추가 플래그가 필요하지 않습니다.114[VS Code 확장 프로그램](/docs/ko/vs-code#automate-browser-tasks-with-chrome)에서는 Chrome 확장 프로그램이 설치되어 있으면 Chrome을 사용할 수 있습니다. 추가 플래그가 필요하지 않습니다.

84 115 

85<Note>116<Note>

90 사이트 권한 관리121 사이트 권한 관리

91</h3>122</h3>

92 123 

93사이트 수준 권한은 Chrome 확장 프로그램에서 상속됩니다. Chrome 확장 프로그램 설정에서 권한을 관리하여 Claude가 탐색하고, 클릭하고, 입력할 수 있는 사이트를 제어합니다.124사이트 수준 권한은 Chrome 확장 프로그램에서 상속됩니다. Chrome 확장 프로그램 설정에서 권한을 관리하여 Claude가 탐색하고, 클릭하고, 입력할 수 있는 사이트를 제어합니다. [자동 모드](/docs/ko/permission-modes#eliminate-prompts-with-auto-mode)에서 자동 모드 분류기 자체가 특정 사이트에 대한 브라우저 호출을 승인하면, 권한 규칙이 Claude in Chrome에 대해 어떤 사이트라도 거부하지 않는 한 확장 프로그램은 해당 호출에 대한 자체 사이트별 확인을 건너뜁니다.

94 125 

95<h3 id="browser-tools-in-plan-mode">126<h3 id="browser-tools-in-plan-mode">

96 계획 모드에서의 브라우저 도구127 플랜 모드의 브라우저 도구

97</h3>128</h3>

98 129 

99[계획 모드](/docs/ko/permission-modes#analyze-before-you-edit-with-plan-mode)에서는 페이지나 브라우저 상태만 읽는 브라우저 도구 호출이 권한 프롬프트 없이 실행되고, 상태를 변경하는 호출은 승인을 요청합니다.130[플랜 모드](/docs/ko/permission-modes#analyze-before-you-edit-with-plan-mode)에서는 Claude가 GIF를 녹화하거나, 새 탭을 열거나, 단축키를 실행하기 전에 권한 프롬프트가 표시됩니다. 세션에서 [권한 우회 모드를 사용할 수 있고](/docs/ko/permission-modes#skip-all-checks-with-bypasspermissions-mode) [기능 플래그 가져오기](/docs/ko/env-vars#features-that-need-feature-flag-fetching)가 꺼져 있으면 이러한 호출은 프롬프트 없이 실행됩니다.

100 

101* **읽기 전용 호출**: `read_page`, `get_page_text`, `find`, 콘솔 메시지 또는 네트워크 요청 읽기, 스크린샷 촬영

102* **상태 변경 호출**: 클릭, 입력, 탐색, 탭 및 창 관리, GIF 녹화

103 131 

104v2.1.199부터 `tabs_context_mcp`의 `createIfEmpty`, 콘솔 및 네트워크 리더의 `clear`, 스크린샷의 `save_to_disk`와 같이 상태 변경 입력 플래그를 설정하는 읽기 전용 호출도 승인을 요청합니다. `browser_batch` 호출은 내부의 모든 작업이 읽기 전용일 때만 프롬프트 없이 실행됩니다.132`createIfEmpty`를 설정하는 `tabs_context_mcp` 호출도 확인을 요청하며, 이러한 작업 중 하나라도 포함하는 `browser_batch` 호출도 마찬가지입니다.

105 133 

106<h2 id="example-workflows">134<h2 id="example-workflows">

107 예제 워크플로우135 예제 워크플로

108</h2>136</h2>

109 137 

110이 예제들은 브라우저 작업과 코딩 작업을 결합하는 일반적인 방법을 보여줍니다. `/mcp`를 실행하고 `claude-in-chrome`을 선택한 후 **도구 보기**를 선택하여 사용 가능한 브라우저 도구의 전체 목록을 확인합니다.138이 예제들은 브라우저 작업과 코딩 작업을 결합하는 일반적인 방법을 보여줍니다. `/mcp`를 실행하고 `claude-in-chrome`을 선택한 후 **도구 보기**를 선택하여 사용 가능한 브라우저 도구의 전체 목록을 확인합니다.

115 143 

116웹 앱을 개발할 때 Claude에게 변경 사항이 올바르게 작동하는지 확인하도록 요청합니다.144웹 앱을 개발할 때 Claude에게 변경 사항이 올바르게 작동하는지 확인하도록 요청합니다.

117 145 

118```text theme={null}146```text wrap theme={null}

119방금 로그인 양식 유효성 검사를 업데이트했습니다. localhost:3000을 열고,147방금 로그인 양식 유효성 검사를 업데이트했습니다. localhost:3000을 열고,

120잘못된 데이터로 양식을 제출해 보고, 오류 메시지가 올바르게148잘못된 데이터로 양식을 제출해 보고, 오류 메시지가 올바르게

121나타나는지 확인해 주시겠어요?149나타나는지 확인해 주시겠어요?

129 157 

130Claude는 콘솔 출력을 읽어 문제 진단을 도울 수 있습니다. 로그가 상세할 수 있으므로 모든 콘솔 출력을 요청하는 대신 Claude에게 찾을 패턴을 알려줍니다.158Claude는 콘솔 출력을 읽어 문제 진단을 도울 수 있습니다. 로그가 상세할 수 있으므로 모든 콘솔 출력을 요청하는 대신 Claude에게 찾을 패턴을 알려줍니다.

131 159 

132```text theme={null}160```text wrap theme={null}

133대시보드 페이지를 열고 페이지가 로드될 때 콘솔에서 오류를161대시보드 페이지를 열고 페이지가 로드될 때 콘솔에서 오류를

134확인해 주세요.162확인해 주세요.

135```163```

142 170 

143반복적인 데이터 입력 작업을 가속화합니다.171반복적인 데이터 입력 작업을 가속화합니다.

144 172 

145```text theme={null}173```text wrap theme={null}

146contacts.csv에 고객 연락처 스프레드시트가 있습니다. 각 행에 대해174contacts.csv에 고객 연락처 스프레드시트가 있습니다. 각 행에 대해

147crm.example.com의 CRM으로 이동하여 "연락처 추가"를 클릭하고175crm.example.com의 CRM으로 이동하여 "연락처 추가"를 클릭하고

148이름, 이메일 및 전화 필드를 작성해 주세요.176이름, 이메일 및 전화 필드를 작성해 주세요.

150 178 

151Claude는 로컬 파일을 읽고, 웹 인터페이스를 탐색하며, 각 레코드에 대한 데이터를 입력합니다.179Claude는 로컬 파일을 읽고, 웹 인터페이스를 탐색하며, 각 레코드에 대한 데이터를 입력합니다.

152 180 

181<h3 id="upload-files-to-web-pages">

182 웹 페이지에 파일 업로드

183</h3>

184 

185Claude는 사용자 컴퓨터의 파일을 페이지의 업로드 필드에 첨부할 수 있습니다. Claude Code가 파일을 읽어 그 내용을 브라우저로 전송하므로, 업로드는 로컬 세션과 원격 세션 모두에서 작동합니다. Claude Code v2.1.211 이상이 필요합니다.

186 

187다음 예제는 로그 파일을 양식에 첨부합니다.

188 

189```text wrap theme={null}

190bugs.example.com의 버그 트래커를 열고, 새 이슈를 만든 다음,

191logs/session.log를 첨부해 주세요

192```

193 

194업로드에는 세 가지 제한이 적용됩니다.

195 

196* **권한**: Claude는 세션에서 읽기가 허용된 파일만 업로드할 수 있으므로, 파일에 대한 `Read` 액세스를 거부하는 [권한 규칙](/docs/ko/settings-reference#permission-settings)은 해당 파일의 업로드도 차단합니다.

197* **크기**: 한 번의 업로드에 포함할 수 있는 파일은 총 10MB까지입니다.

198* **하드 링크**: Claude는 하드 링크가 여러 개인 파일을 거부합니다. 이는 `node_modules`와 같은 패키지 관리자 저장소 내부에서 흔히 발생합니다. 파일을 복사한 후 복사본을 업로드합니다.

199 

153<h3 id="draft-content-in-google-docs">200<h3 id="draft-content-in-google-docs">

154 Google Docs에서 콘텐츠 작성201 Google Docs에서 콘텐츠 작성

155</h3>202</h3>

156 203 

157API 설정 없이 Claude를 사용하여 문서에 직접 작성합니다.204API 설정 없이 Claude를 사용하여 문서에 직접 작성합니다.

158 205 

159```text theme={null}206```text wrap theme={null}

160최근 커밋을 기반으로 프로젝트 업데이트를 작성하고207최근 커밋을 기반으로 프로젝트 업데이트를 작성하고

161docs.google.com/document/d/abc123의 Google Doc에 추가해 주세요.208docs.google.com/document/d/abc123의 Google Doc에 추가해 주세요.

162```209```

169 216 

170웹사이트에서 구조화된 정보를 가져옵니다.217웹사이트에서 구조화된 정보를 가져옵니다.

171 218 

172```text theme={null}219```text wrap theme={null}

173제품 목록 페이지로 이동하여 각 항목의 이름, 가격 및 가용성을220제품 목록 페이지로 이동하여 각 항목의 이름, 가격 및 가용성을

174추출합니다. 결과를 CSV 파일로 저장해 주세요.221추출합니다. 결과를 CSV 파일로 저장해 주세요.

175```222```

177Claude는 페이지로 이동하여 콘텐츠를 읽고 데이터를 구조화된 형식으로 컴파일합니다.224Claude는 페이지로 이동하여 콘텐츠를 읽고 데이터를 구조화된 형식으로 컴파일합니다.

178 225 

179<h3 id="run-multi-site-workflows">226<h3 id="run-multi-site-workflows">

180 다중 사이트 워크플로우 실행227 다중 사이트 워크플로 실행

181</h3>228</h3>

182 229 

183여러 웹사이트에서 작업을 조정합니다.230여러 웹사이트에서 작업을 조정합니다.

184 231 

185```text theme={null}232```text wrap theme={null}

186내 캘린더에서 내일의 회의를 확인한 후, 외부 참석자가 있는 각233내 캘린더에서 내일의 회의를 확인한 후, 외부 참석자가 있는 각

187회의에 대해 해당 회사 웹사이트를 찾아보고 그들이 하는 일에 대한234회의에 대해 해당 회사 웹사이트를 찾아보고 그들이 하는 일에 대한

188메모를 추가해 주세요.235메모를 추가해 주세요.

189```236```

190 237 

191Claude는 탭 전체에서 작업하여 정보를 수집하고 워크플로우를 완료합니다.238Claude는 탭 전체에서 작업하여 정보를 수집하고 워크플로를 완료합니다.

192 239 

193<h3 id="record-a-demo-gif">240<h3 id="record-a-demo-gif">

194 데모 GIF 기록241 데모 GIF 기록

196 243 

197브라우저 상호작용의 공유 가능한 기록을 만듭니다.244브라우저 상호작용의 공유 가능한 기록을 만듭니다.

198 245 

199```text theme={null}246```text wrap theme={null}

200장바구니에 항목을 추가하는 것부터 확인 페이지까지 체크아웃247장바구니에 항목을 추가하는 것부터 확인 페이지까지 체크아웃

201흐름을 완료하는 방법을 보여주는 GIF를 기록해 주세요.248흐름을 완료하는 방법을 보여주는 GIF를 기록해 주세요.

202```249```

203 250 

204Claude는 상호작용 시퀀스를 기록하고 GIF 파일로 저장합니다.251Claude는 상호작용 시퀀스를 기록하고 GIF 파일로 저장합니다. 기록에는 로그인된 페이지의 계정 세부 정보를 포함하여 브라우저에 표시되는 모든 내용이 담기므로, 팀 외부에 공유하기 전에 검토합니다.

252 

253<h3 id="save-screenshots-to-disk">

254 스크린샷을 디스크에 저장

255</h3>

256 

257Claude에게 스크린샷을 파일로 보관하도록 요청합니다.

258 

259```text wrap theme={null}

260체크아웃 페이지의 스크린샷을 찍어 디스크에 저장해 주세요

261```

262 

263Claude는 이미지를 디스크에 저장하고 파일 경로를 알려줍니다. v2.1.211 이전에는 스크린샷 도구의 `save_to_disk` 옵션이 파일을 기록하지 않았습니다.

205 264 

206<h2 id="troubleshooting">265<h2 id="troubleshooting">

207 문제 해결266 문제 해결

221 280 

222Chrome 통합을 처음 활성화할 때 Claude Code는 네이티브 메시징 호스트 구성 파일을 설치합니다. Chrome은 시작 시 이 파일을 읽으므로 첫 번째 시도에서 확장 프로그램이 감지되지 않으면 Chrome을 다시 시작하여 새 구성을 선택합니다.281Chrome 통합을 처음 활성화할 때 Claude Code는 네이티브 메시징 호스트 구성 파일을 설치합니다. Chrome은 시작 시 이 파일을 읽으므로 첫 번째 시도에서 확장 프로그램이 감지되지 않으면 Chrome을 다시 시작하여 새 구성을 선택합니다.

223 282 

224v2.1.199부터 Claude Code는 첫 번째 설치 시에만 확장 프로그램을 연결하도록 요청하는 브라우저 탭을 엽니다. Claude Code 빌드 또는 구성 디렉터리 전환 후와 같이 구성 파일을 다시 작성하는 이후 세션에서는 다시 열지 않습니다.283Claude Code는 첫 번째 설치 시에만 확장 프로그램을 연결하도록 요청하는 브라우저 탭을 엽니다. 빌드 또는 구성 디렉터리 전환 후와 같이 이후 세션에서 구성 파일을 다시 작성하는 경우에는 Claude Code가 탭을 다시 열지 않습니다.

225 284 

226연결이 계속 실패하면 다음 위치에 호스트 구성 파일이 있는지 확인합니다.285연결이 계속 실패하면 다음 위치에 호스트 구성 파일이 있는지 확인합니다.

227 286 

237* **Linux**: `~/.config/microsoft-edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json`296* **Linux**: `~/.config/microsoft-edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json`

238* **Windows**: Windows 레지스트리에서 `HKCU\Software\Microsoft\Edge\NativeMessagingHosts\`를 확인합니다.297* **Windows**: Windows 레지스트리에서 `HKCU\Software\Microsoft\Edge\NativeMessagingHosts\`를 확인합니다.

239 298 

299기타 Chromium 기반 브라우저는 브라우저 이름을 딴 자체 구성 디렉터리에서 동일한 파일을 읽습니다. 예를 들어 macOS의 Brave는 `~/Library/Application Support/BraveSoftware/Brave-Browser/NativeMessagingHosts/`를 사용하며, Windows에서는 각 브라우저에 `HKCU\Software\BraveSoftware\Brave-Browser\NativeMessagingHosts\`와 같은 자체 레지스트리 키가 있습니다.

300 

240<h3 id="browser-not-responding">301<h3 id="browser-not-responding">

241 브라우저가 응답하지 않음302 브라우저가 응답하지 않음

242</h3>303</h3>

261 322 

262* **명명된 파이프 충돌 (EADDRINUSE)**: 다른 프로세스가 동일한 명명된 파이프를 사용 중인 경우 Claude Code를 다시 시작합니다. Chrome을 사용 중일 수 있는 다른 Claude Code 세션을 모두 닫습니다.323* **명명된 파이프 충돌 (EADDRINUSE)**: 다른 프로세스가 동일한 명명된 파이프를 사용 중인 경우 Claude Code를 다시 시작합니다. Chrome을 사용 중일 수 있는 다른 Claude Code 세션을 모두 닫습니다.

263* **네이티브 메시징 호스트 오류**: 시작 시 네이티브 메시징 호스트가 충돌하면 Claude Code를 다시 설치하여 호스트 구성을 다시 생성해 봅니다.324* **네이티브 메시징 호스트 오류**: 시작 시 네이티브 메시징 호스트가 충돌하면 Claude Code를 다시 설치하여 호스트 구성을 다시 생성해 봅니다.

325* **설정 페이지가 열리지 않음**: Claude Code를 업데이트합니다. v2.1.211 이전에는 Windows에서 확장 프로그램 연결을 요청하는 브라우저 탭이 열리지 않을 수 있었습니다.

264 326 

265<h3 id="common-error-messages">327<h3 id="common-error-messages">

266 일반적인 오류 메시지328 일반적인 오류 메시지

270 332 

271| 오류 | 원인 | 해결 방법 |333| 오류 | 원인 | 해결 방법 |

272| - | - | - |334| - | - | - |

273| "브라우저 확장 프로그램이 연결되지 않음" | 네이티브 메시징 호스트가 확장 프로그램에 도달할 수 없음 | Chrome과 Claude Code를 다시 시작한 후 `/chrome`을 실행하여 다시 연결합니다. |335| "브라우저 확장 프로그램이 연결되지 않음" | 네이티브 메시징 호스트가 확장 프로그램에 도달할 수 없거나, 조직의 IP 허용 목록이 `bridge.claudeusercontent.com`에 대한 연결을 거부함 | Chrome과 Claude Code를 다시 시작한 후 `/chrome`을 실행하여 다시 연결합니다. 조직에서 IP 허용 목록을 사용하고 오류가 지속되면 [조직 IP 허용 목록 및 프록시 egress](/docs/ko/network-config#organization-ip-allowlists-and-proxy-egress)를 참조합니다. |

274| "확장 프로그램이 감지되지 않음" | Chrome 확장 프로그램이 설치되지 않았거나 비활성화됨 | `chrome://extensions`에서 확장 프로그램을 설치하거나 활성화합니다. |336| `/chrome`에서 확장 프로그램이 "감지되지 않음"으로 표시됨 | Chrome 확장 프로그램이 설치되지 않았거나 비활성화됨 | `chrome://extensions`에서 확장 프로그램을 설치하거나 활성화합니다. |

275| "사용 가능한 탭 없음" | Claude가 탭이 준비되기 전에 작동하려고 시도함 | Claude에게 새 탭을 만들고 다시 시도하도록 요청합니다. |337| "사용 가능한 탭 없음" | Claude가 탭이 준비되기 전에 작동하려고 시도함 | Claude에게 새 탭을 만들고 다시 시도하도록 요청합니다. |

276| "수신 끝이 존재하지 않음" | 확장 프로그램 서비스 워커가 유휴 상태가 됨 | `/chrome`을 실행하고 "확장 프로그램 다시 연결"을 선택합니다. |338| "수신 끝이 존재하지 않음" | 확장 프로그램 서비스 워커가 유휴 상태가 됨 | `/chrome`을 실행하고 "확장 프로그램 다시 연결"을 선택합니다. |

277 339