{"meta":{"title":"Visual Studio Code에서 GitHub Codespaces 사용","intro":"Visual Studio Code에서 직접 개발하려면 GitHub Codespaces 확장을 GitHub 계정과 연결하세요.","product":"Codespaces","breadcrumbs":[{"href":"/ko/codespaces","title":"Codespaces"},{"href":"/ko/codespaces/developing-in-a-codespace","title":"codespace에서 개발"},{"href":"/ko/codespaces/developing-in-a-codespace/using-github-codespaces-in-visual-studio-code","title":"Visual Studio Code"}],"documentType":"article"},"body":"# Visual Studio Code에서 GitHub Codespaces 사용\n\nVisual Studio Code에서 직접 개발하려면 GitHub Codespaces 확장을 GitHub 계정과 연결하세요.\n\n## GitHub Codespaces의 Visual Studio Code 소개\n\n로컬 설치 Visual Studio Code 를 사용하여 코드스페이스를 만들고, 관리하고, 작업하고, 삭제할 수 있습니다.\nGitHub Codespaces에서 VS Code를 사용하려면 Codespaces 확장을 설치해야 합니다.\nGitHub Codespaces에서 VS Code를 설정하는 방법에 대한 자세한 정보는 [사전 준비 사항](#prerequisites)을 참조하세요.\n\n기본적으로 새 코드스페이스를 GitHub만들면 브라우저에서 열립니다. 새 코드스페이스를 VS Code 자동으로 열려면 기본 편집기를 VS Code되도록 설정할 수 있습니다. 자세한 내용은 [GitHub Codespaces에 대한 기본 편집기 설정](/ko/codespaces/setting-your-user-preferences/setting-your-default-editor-for-github-codespaces)을(를) 참조하세요.\n\n브라우저에서 작업하는 것을 선호하지만 기존 VS Code 확장, 테마 및 바로 가기를 계속 사용하려는 경우 설정 동기화를 켤 수 있습니다. 자세한 내용은 [계정에 대한 GitHub Codespace 개인 설정](/ko/codespaces/setting-your-user-preferences/personalizing-github-codespaces-for-your-account#settings-sync)을 참조하세요.\n\n## 필수 조건\n\n직접 VS Code에서 코드스페이스를 개발하려면, GitHub Codespaces 자격 증명을 사용하여 GitHub 확장을 설치하고 로그인해야 합니다.\nGitHub Codespaces 확장에는 2020년 10월 릴리스 1.51 이상이 필요합니다VS Code.\n\n```\n          Visual Studio Code Marketplace를 사용하여 [GitHub Codespaces](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces) 확장을 설치하십시오. 자세한 내용은 설명서의 [확장 마켓플레이스](https://code.visualstudio.com/docs/editor/extension-gallery)를 VS Code참조하세요.\n```\n\n1. VS Code의 활성 바에서 원격 탐색기 아이콘을 클릭합니다.\n\n   ![작업 표시줄의 스크린샷. \"원격 탐색기\" 사이드바의 아이콘(원으로 겹쳐진 사각형)이 주황색 윤곽선으로 강조 표시됩니다.](/assets/images/help/codespaces/click-remote-explorer-icon-vscode.png)\n\n   > \\[!NOTE]\n   > 원격 탐색기가 작업 막대에 표시되지 않는 경우:\n   >\n   > 1. 명령 팔레트에 액세스합니다. 예를 들어, <kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd>(Mac)/<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>(Windows/Linux)를 누릅니다.\n   > 2. 유형: `details`.\n   > 3. **Codespaces: 세부 정보**를 클릭합니다.\n\n2. \"GitHub Codespaces원격 탐색기\" 사이드바의 맨 위에 있는 드롭다운에서 \"\"를 선택합니다(아직 선택되지 않은 경우).\n\n3. ```\n          **\n          GitHub 로그인**을 클릭합니다.\n   ```\n\n   ![\"GitHub Codespaces에 로그인하기\" 단추가 표시된 \"GitHub\"의 \"원격 탐색기\" 사이드바에 대한 스크린샷](/assets/images/help/codespaces/sign-in-to-view-codespaces-vscode.png)\n\n4. 현재 로그인 GitHub 하지 않은 경우 로그인하라는 메시지가 표시됩니다. 편하게 로그인하세요.\n\n5. 권한을 부여할 항목을 지정하라는 메시지가 표시되면 \"\\*\\*\\*\\*\"에 대한 GitHub 단추를 클릭합니다.\n\n6. 권한 부여 페이지가 표시되면 **Visual-Studio-Code 권한 부여**를 클릭합니다.\n\n##\n\n```\n          VS Code에서 코드스페이스 생성하기\n```\n\nGitHub의 계정을 GitHub Codespaces 확장에 연결한 후 새 codespace를 만들 수 있습니다. GitHub Codespaces 확장에 대한 자세한 내용은 [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces)을(를) 참조하세요.\n\n1. VS Code의 활성 바에서 원격 탐색기 아이콘을 클릭합니다.\n\n   ![작업 표시줄의 스크린샷. \"원격 탐색기\" 사이드바의 아이콘(원으로 겹쳐진 사각형)이 주황색 윤곽선으로 강조 표시됩니다.](/assets/images/help/codespaces/click-remote-explorer-icon-vscode.png)\n\n   > \\[!NOTE]\n   > 원격 탐색기가 작업 막대에 표시되지 않는 경우:\n   >\n   > 1. 명령 팔레트에 액세스합니다. 예를 들어, <kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd>(Mac)/<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>(Windows/Linux)를 누릅니다.\n   > 2. 유형: `details`.\n   > 3. **Codespaces: 세부 정보**를 클릭합니다.\n\n2. \"원격 탐색기\" 사이드바를 마우스로 가리키고 <svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-plus\" aria-label=\"The plus icon\" role=\"img\"><path d=\"M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z\"></path></svg>을 클릭합니다.\n\n   ![GitHub Codespaces의 \"원격 탐색기\" 사이드바 스크린샷. 더하기 기호 단추 옆에 \"새 codespace 만들기\" 도구 설명이 표시됩니다.](/assets/images/help/codespaces/create-codespace-vscode.png)\n\n3. 입력란에 개발하려는 리포지토리의 이름을 입력한 다음 선택합니다.\n\n   ![텍스트 상자에 입력한 \"octo-org/he\"의 스크린샷과 이 문자열로 시작하는 4개의 리포지토리 목록입니다.](/assets/images/help/codespaces/choose-repository-vscode.png)\n\n   이후 프롬프트의 오른쪽에 codespace에 대한 비용을 지불할 사람을 알려주는 메시지가 표시됩니다.\n\n   ![\"Hubwriter에서 지불한 사용량\"이라는 메시지가 있는 분기에 대한 프롬프트의 스크린샷.](/assets/images/help/codespaces/who-will-pay-vscode.png)\n\n4. 개발하려는 분기를 클릭합니다.\n\n5. 개발 컨테이너 구성 파일을 선택하라는 메시지가 표시되면 목록에서 파일을 선택합니다.\n\n6. 사용할 머신 유형을 클릭합니다.\n\n   > \\[!NOTE]\n   > 사용 가능한 컴퓨터 유형의 선택은 여러 가지 요인에 의해 제한될 수 있습니다. 여기에는 조직에 대해 구성된 정책 또는 리포지토리에 대한 최소 컴퓨터 유형 사양이 포함될 수 있습니다. 자세한 내용은 [컴퓨터 유형에 대한 액세스 제한](/ko/codespaces/managing-codespaces-for-your-organization/restricting-access-to-machine-types) 및 [codespace 머신에 대한 최소 사양 설정](/ko/codespaces/setting-up-your-project-for-codespaces/configuring-dev-containers/setting-a-minimum-specification-for-codespace-machines)을(를) 참조하세요.\n\n##\n\n```\n          VS Code에서 코드스페이스를 열기\n```\n\n1. VS Code의 활성 바에서 원격 탐색기 아이콘을 클릭합니다.\n\n   ![작업 표시줄의 스크린샷. \"원격 탐색기\" 사이드바의 아이콘(원으로 겹쳐진 사각형)이 주황색 윤곽선으로 강조 표시됩니다.](/assets/images/help/codespaces/click-remote-explorer-icon-vscode.png)\n\n   > \\[!NOTE]\n   > 원격 탐색기가 작업 막대에 표시되지 않는 경우:\n   >\n   > 1. 명령 팔레트에 액세스합니다. 예를 들어, <kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd>(Mac)/<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>(Windows/Linux)를 누릅니다.\n   > 2. 유형: `details`.\n   > 3. **Codespaces: 세부 정보**를 클릭합니다.\n2. \"GitHub Codespaces\"에서 개발하려는 코드스페이스를 마우스로 가리킵니다.\n3. 연결 아이콘(플러그 기호)을 클릭합니다.\n\n   ![사이드 바의 원격 탐색기 스크린샷. Codespace의 연결 아이콘(플러그 기호)가 진한 주황색 윤곽선으로 강조 표시됩니다.](/assets/images/help/codespaces/click-connect-to-codespace-icon-vscode.png)\n\n##\n\n```\n          VS Code에서 기계 유형 변경\n\n          일반적으로 원격 컴퓨터 유형 선택에서 codespace를 실행할 수 있습니다. 이러한 컴퓨터 유형은 2개 코어에서 32개 코어에 이르는 하드웨어 사양을 선택할 수 있지만 전체 범위의 컴퓨터 유형을 항상 사용할 수 있는 것은 아닙니다. 각각 컴퓨터 유형에는 서로 다른 수준의 리소스와 다른 청구 계층이 있습니다. 자세한 내용은 [AUTOTITLE](/billing/managing-billing-for-your-products/managing-billing-for-github-codespaces/about-billing-for-github-codespaces)을(를) 참조하세요.\n          \n          기본적으로 유효한 리소스가 가장 낮은 머신 유형은 codespace를 만들 때 사용됩니다. 언제든지 코드스페이스의 컴퓨터 유형을 변경할 수 있습니다.\n```\n\n> \\[!NOTE]\n> 사용 가능한 컴퓨터 유형의 선택은 여러 가지 요인에 의해 제한될 수 있습니다. 여기에는 조직에 대해 구성된 정책 또는 리포지토리에 대한 최소 컴퓨터 유형 사양이 포함될 수 있습니다. 자세한 내용은 [컴퓨터 유형에 대한 액세스 제한](/ko/codespaces/managing-codespaces-for-your-organization/restricting-access-to-machine-types) 및 [codespace 머신에 대한 최소 사양 설정](/ko/codespaces/setting-up-your-project-for-codespaces/configuring-dev-containers/setting-a-minimum-specification-for-codespace-machines)을(를) 참조하세요.\n\n1. VS Code 데스크톱 애플리케이션에서 <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>(Mac) 또는 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>(Windows/Linux)를 사용해 명령 팔레트를 엽니다.\n\n2. \"Codespaces: Change Machine Type\"을 검색하여 선택합니다.\n\n   ![검색 문자열로 입력한 \"머신 변경\"과 드롭다운 목록에서 \"Codespaces: Change Machine Type\"의 스크린샷.](/assets/images/help/codespaces/vscode-change-machine-type-option.png)\n\n3. codespace 내에서 이러한 지침을 따르지 않는 경우 변경할 codespace를 클릭합니다.\n\n   ![네 개의 codespace의 드롭다운 목록 스크린샷.](/assets/images/help/codespaces/vscode-change-machine-choose-repo.png)\n\n   codespace에서 이러한 지침을 따르는 경우 작업 중인 codespace에 변경 내용이 적용됩니다.\n\n4. 사용할 컴퓨터 유형을 선택합니다.\n\n5. 다른 스토리지 용량을 가진 컴퓨터 유형으로 변경하는 경우, 계속할지 묻는 프롬프트가 나타납니다. 프롬프트를 읽고 **\\[예]** 를 클릭하여 수락합니다.\n\n다른 스토리지 용량을 가진 가상 머신으로 변경한 경우(예: 32GB에서 64GB로) 머신 유형이 변경되는 동안 codespace를 잠시 동안 사용할 수 없습니다. codespace가 현재 활성 상태이면 자동으로 중지됩니다. 변경이 완료되면 새 컴퓨터 유형에서 실행 중인 codespace를 다시 시작할 수 있습니다.\n\n스토리지 용량이 동일한 가상 머신으로 변경한 경우 다음에 codespace를 다시 시작할 때 변경 내용이 적용됩니다. 활성 코드 영역은 자동으로 중지되지 않습니다. codespace 재시작에 대한 자세한 내용은 [Codespace 시작 및 중지](/ko/codespaces/developing-in-codespaces/stopping-and-starting-a-codespace#restarting-a-codespace)을(를) 참조하세요.\n\n## 에서 VS Code 코드스페이스 삭제\n\n현재 codespace에서 작업하지 않는 경우 VS Code 내에서 codespace를 삭제할 수 있습니다.\n\n1. VS Code의 활성 바에서 원격 탐색기 아이콘을 클릭합니다.\n\n   ![작업 표시줄의 스크린샷. \"원격 탐색기\" 사이드바의 아이콘(원으로 겹쳐진 사각형)이 주황색 윤곽선으로 강조 표시됩니다.](/assets/images/help/codespaces/click-remote-explorer-icon-vscode.png)\n\n   > \\[!NOTE]\n   > 원격 탐색기가 작업 막대에 표시되지 않는 경우:\n   >\n   > 1. 명령 팔레트에 액세스합니다. 예를 들어, <kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd>(Mac)/<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>(Windows/Linux)를 누릅니다.\n   > 2. 유형: `details`.\n   > 3. **Codespaces: 세부 정보**를 클릭합니다.\n2. \"GitHub Codespaces\"에서 삭제할 codespace를 마우스 오른쪽 단추로 클릭합니다.\n3. **codespace 삭제**를 클릭합니다.\n\n##\n\n```\n          VS Code 웹 클라이언트에서 인사이더로 전환\n```\n\n웹 클라이언트를 VS Code 사용하는 경우 참가자 버전의 애플리케이션으로 전환할 수 있습니다. 이 버전의 VS Code에 대한 자세한 내용은 VS Code 블로그에서 [참가자 빌드 소개](https://code.visualstudio.com/blogs/2016/02/01/introducing_insiders_build)를 참조하세요.\n\nCodespace에서 버전을 전환한 후 codespace를 중지하고 다시 시작하면 웹 클라이언트가 계속해서 참가자 버전을 사용합니다. 웹 클라이언트에서 VS Code 만들고 여는 새 코드스페이스도 Insiders 버전을 사용합니다.\n\n1. 코드스페이스를 표시하는 브라우저 창의 왼쪽 아래에서 을 클릭합니다 **<svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-gear\" aria-label=\"Manage\" role=\"img\"><path d=\"M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z\"></path></svg>**.\n\n2. 메뉴에서 \"참가자 버전으로 전환\"을 선택합니다.\n\n   ![VS Code 웹 클라이언트의 스크린샷 기어 아이콘이 주황색 윤곽선으로 강조 표시됩니다. 메뉴에 \"참가자 버전으로 전환\"이 표시됩니다.](/assets/images/help/codespaces/codespaces-insiders-vscode.png)\n\n3. ```\n          **다시 로드**를 클릭합니다.\n   ```\n\n안정적인 버전으로 다시 전환하려면 프로세스를 반복하지만 안정적인 버전VS Code**으로 전환을** 선택합니다. 코드스페이스를 중지했다가 다시 시작하면 버전을 다시 전환하더라도 안정 버전을 계속 사용하게 됩니다. 웹 클라이언트에서 VS Code 만들고 여는 새 코드스페이스도 안정 버전을 사용합니다.\n\n## Insiders 데스크톱 애플리케이션 사용하기 Codespaces\n\nInsiders 데스크톱 애플리케이션의 GitHub Codespaces 버전에서 VS Code를 사용하려면, Insiders 애플리케이션 내에서 코드스페이 VS Code스를 시작하거나 만드십시오. 자세한 내용은 이 문서의 앞부[분에서 VS Code코드스페이스 만들기](#creating-a-codespace-in-vs-code) 및 [코드스페이스 VS Code열기](#opening-a-codespace-in-vs-code)를 참조하세요.\n\n## 추가 참고 자료\n\n* [GitHub Codespaces에서 Visual Studio Code 명령 팔레트 사용](/ko/codespaces/reference/using-the-vs-code-command-palette-in-codespaces)\n* [GitHub Codespaces에서 GitHub Copilot 사용](/ko/codespaces/reference/using-github-copilot-in-github-codespaces)"}