logo

Claude Code Desktop 확장하기

외부 서비스를 연결하고, 재사용 가능한 워크플로우를 추가하고, Claude의 동작을 사용자 정의하고, 미리보기 서버를 구성합니다. 한 곳에서 커넥터, skills, 플러그인을 관리하려면 사이드바에서 Customize 를 클릭합니다.

외부 도구 연결하기

로컬 및 SSH 세션의 경우 프롬프트 상자 옆의 + 버튼을 클릭하고 Connectors 를 선택하여 Google Calendar, Slack, GitHub, Linear, Notion 등과 같은 통합을 추가합니다. 세션 전이나 중에 커넥터를 추가할 수 있습니다. + 버튼은 원격 세션에서 사용할 수 없지만 루틴은 루틴 생성 시 커넥터를 구성합니다.

커넥터를 관리하거나 연결을 해제하려면 데스크톱 앱의 Settings → Connectors로 이동하거나 프롬프트 상자의 Connectors 메뉴에서 Manage connectors 를 선택합니다.

연결되면 Claude는 캘린더를 읽고, 메시지를 보내고, 문제를 만들고, 도구와 직접 상호작용할 수 있습니다. Claude에게 세션에 구성된 커넥터가 무엇인지 물어볼 수 있습니다.

커넥터는 그래픽 설정 흐름이 있는 MCP servers입니다. 지원되는 서비스와의 빠른 통합을 위해 사용합니다. Connectors에 나열되지 않은 통합의 경우 설정 파일을 통해 MCP 서버를 수동으로 추가합니다. 사용자 정의 커넥터를 만들 수도 있습니다.

skills 사용하기

Skills는 Claude가 할 수 있는 것을 확장합니다. Claude는 관련이 있을 때 자동으로 로드하거나 직접 호출할 수 있습니다: 프롬프트 상자에서 /를 입력하거나 + 버튼을 클릭하고 Slash commands 를 선택하여 사용 가능한 것을 찾아봅니다. 여기에는 내장 명령, 사용자 정의 skills, 코드베이스의 프로젝트 skills, 설치된 플러그인의 skills가 포함됩니다. 하나를 선택하면 입력 필드에 강조 표시됩니다. 그 후 작업을 입력하고 평소대로 보냅니다.

플러그인 설치하기

Plugins는 Claude Code에 skills, agents, hooks, MCP servers, LSP 구성을 추가하는 재사용 가능한 패키지입니다. 터미널을 사용하지 않고 데스크톱 앱에서 플러그인을 설치할 수 있습니다.

로컬 및 SSH 세션의 경우 프롬프트 상자 옆의 + 버튼을 클릭하고 Plugins 를 선택하여 설치된 플러그인과 해당 skills를 봅니다. 플러그인을 추가하려면 서브메뉴에서 Add plugin 을 선택하여 플러그인 브라우저를 열면 공식 Anthropic marketplace를 포함한 구성된 marketplaces의 사용 가능한 플러그인이 표시됩니다. Manage plugins 를 선택하여 플러그인을 활성화, 비활성화 또는 제거합니다.

플러그인은 사용자 계정, 특정 프로젝트 또는 로컬 전용으로 범위를 지정할 수 있습니다. 조직이 플러그인을 중앙에서 관리하는 경우 해당 플러그인은 CLI에서와 동일한 방식으로 데스크톱 세션에서 사용 가능합니다. 플러그인은 원격 세션에는 사용할 수 없습니다. 자신의 플러그인을 만드는 것을 포함한 전체 플러그인 참조는 plugins를 참조하세요.

미리보기 서버 구성하기

Claude는 개발 서버 설정을 자동으로 감지하고 세션을 시작할 때 선택한 폴더의 루트에 있는 .claude/launch.json에 구성을 저장합니다. Preview는 이 폴더를 작업 디렉토리로 사용하므로 부모 폴더를 선택한 경우 자신의 개발 서버가 있는 하위 폴더는 자동으로 감지되지 않습니다. 하위 폴더의 서버로 작업하려면 해당 폴더에서 직접 세션을 시작하거나 구성을 수동으로 추가합니다.

예를 들어 npm run dev 대신 yarn dev를 사용하거나 포트를 변경하도록 서버가 시작되는 방식을 사용자 정의하려면 파일을 수동으로 편집하거나 Preview 드롭다운에서 Edit configuration 을 클릭하여 코드 편집기에서 엽니다. 파일은 주석이 있는 JSON을 지원합니다.

{
  "version": "0.0.1",
  "configurations": [
    {
      "name": "my-app",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "port": 3000
    }
  ]
}

동일한 프로젝트에서 프론트엔드 및 API와 같은 다양한 서버를 실행하도록 여러 구성을 정의할 수 있습니다. 아래의 예제를 참조하세요.

자동 변경 사항 확인

autoVerify가 활성화되면 Claude는 파일을 편집한 후 자동으로 코드 변경 사항을 확인합니다. 스크린샷을 찍고, 오류를 확인하고, 응답을 완료하기 전에 변경 사항이 작동하는지 확인합니다.

자동 확인은 기본적으로 켜져 있습니다. .claude/launch.json에 "autoVerify": false를 추가하여 프로젝트별로 비활성화하거나 Preview 드롭다운 메뉴에서 토글합니다.

{
  "version": "0.0.1",
  "autoVerify": false,
  "configurations": [...]
}

비활성화되면 미리보기 도구는 여전히 사용 가능하며 언제든지 Claude에게 확인을 요청할 수 있습니다. 자동 확인은 모든 편집 후 자동으로 만듭니다.

구성 필드

configurations 배열의 각 항목은 다음 필드를 허용합니다:

필드유형설명
namestring이 서버의 고유 식별자
runtimeExecutablestring실행할 명령 (예: npm, yarn, node)
runtimeArgsstring[]runtimeExecutable에 전달되는 인수 (예: ["run", "dev"])
portnumber서버가 수신하는 포트. 기본값은 3000
cwdstring프로젝트 루트에 상대적인 작업 디렉토리. 기본값은 프로젝트 루트입니다. 프로젝트 루트를 명시적으로 참조하려면 ${workspaceFolder}를 사용합니다
envobject{ "NODE_ENV": "development" }와 같은 키-값 쌍으로 추가 환경 변수. 이 파일이 저장소에 커밋되므로 여기에 비밀을 넣지 마세요. 비밀을 개발 서버에 전달하려면 로컬 환경 편집기에서 설정합니다.
autoPortboolean포트 충돌을 처리하는 방법. 아래를 참조하세요
programstringnode로 실행할 스크립트. 언제 program vs runtimeExecutable을 사용할지 참조
argsstring[]program에 전달되는 인수. program이 설정된 경우에만 사용됨

program vs runtimeExecutable 사용 시기

패키지 관리자를 통해 개발 서버를 시작하려면 runtimeExecutable을 runtimeArgs와 함께 사용합니다. 예를 들어 "runtimeExecutable": "npm"과 "runtimeArgs": ["run", "dev"]는 npm run dev를 실행합니다.

node로 직접 실행하려는 독립 실행형 스크립트가 있을 때 program을 사용합니다. 예를 들어 "program": "server.js"는 node server.js를 실행합니다. args로 추가 플래그를 전달합니다.

포트 충돌

autoPort 필드는 선호하는 포트가 이미 사용 중일 때 발생하는 상황을 제어합니다:

  • true: Claude는 자동으로 사용 가능한 포트를 찾아 사용합니다. 대부분의 개발 서버에 적합합니다.
  • false: Claude는 오류로 실패합니다. OAuth 콜백 또는 CORS allowlists와 같이 서버가 특정 포트를 사용해야 할 때 사용합니다.
  • 설정되지 않음 (기본값): Claude는 서버가 정확한 포트가 필요한지 묻고 답변을 저장합니다.

Claude가 다른 포트를 선택하면 할당된 포트를 PORT 환경 변수를 통해 서버에 전달합니다.

예제

이러한 구성은 다양한 프로젝트 유형에 대한 일반적인 설정을 보여줍니다:

Next.js

이 구성은 Yarn을 사용하여 포트 3000에서 Next.js 앱을 실행합니다:

{
  "version": "0.0.1",
  "configurations": [
    {
      "name": "web",
      "runtimeExecutable": "yarn",
      "runtimeArgs": ["dev"],
      "port": 3000
    }
  ]
}

Multiple servers

프론트엔드 및 API 서버가 있는 monorepo의 경우 여러 구성을 정의합니다. 프론트엔드는 autoPort: true를 사용하므로 3000이 사용 중이면 사용 가능한 포트를 선택하고, API 서버는 포트 8080을 정확히 요구합니다:

{
  "version": "0.0.1",
  "configurations": [
    {
      "name": "frontend",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "cwd": "apps/web",
      "port": 3000,
      "autoPort": true
    },
    {
      "name": "api",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "start"],
      "cwd": "server",
      "port": 8080,
      "env": { "NODE_ENV": "development" },
      "autoPort": false
    }
  ]
}

Node.js script

패키지 관리자 명령 대신 Node.js 스크립트를 직접 실행하려면 program 필드를 사용합니다:

{
  "version": "0.0.1",
  "configurations": [
    {
      "name": "server",
      "program": "server.js",
      "args": ["--verbose"],
      "port": 4000
    }
  ]
}
Previous
세션 관리
Next
환경 구성