웹용 Visual Studio Code
웹용 Visual Studio Code는 브라우저에서 전적으로 실행되는 무료, 설치 불필요한 Microsoft Visual Studio Code 환경을 제공하여 소스 코드 리포지토리를 빠르고 안전하게 탐색하고 가벼운 코드 변경을 할 수 있도록 합니다. 시작하려면 브라우저에서 https://vscode.dev로 이동하십시오.
웹용 VS Code는 검색 및 구문 강조 표시, 확장 지원을 포함하여 데스크톱 VS Code의 많은 기능을 제공합니다. GitHub 및 Azure Repos와 같은 소스 제어 공급자의 리포지토리, 포크 및 끌어오기 요청을 여는 것 외에도 로컬 컴퓨터에 저장된 코드도 작업할 수 있습니다.
웹용 VS Code는 웹 브라우저에서 전적으로 실행되므로 데스크톱 환경에 비해 특정 제한 사항이 있습니다. 자세한 내용은 아래를 참조하십시오.
다음 비디오는 웹용 Visual Studio Code에 대한 간략한 개요를 제공합니다.
VS Code 데스크톱과의 관계
웹용 VS Code는 파일 및 리포지토리를 탐색하고 가벼운 코드 변경을 커밋하기 위한 브라우저 기반 환경을 제공합니다. 그러나 코드를 실행, 빌드 또는 디버그하기 위한 런타임에 액세스해야 하거나 터미널과 같은 플랫폼 기능을 사용하거나 웹에서 지원되지 않는 확장을 실행하려는 경우 GitHub Codespaces 또는 원격 - 터널을 사용하여 VS Code의 전체 기능을 사용하도록 작업을 데스크톱 애플리케이션, GitHub Codespaces로 이동하는 것이 좋습니다. 또한 VS Code 데스크톱을 사용하면 브라우저에 의해 제한되지 않는 전체 키보드 단축키 세트를 사용할 수 있습니다.
준비가 되면 몇 번의 클릭만으로 전체 VS Code 환경으로 "업그레이드"할 수 있습니다.
기어 아이콘을 선택한 다음 인사이더 버전으로 전환...을 선택하거나 https://insiders.vscode.dev로 직접 이동하여 웹용 VS Code의 안정 버전과 인사이더 버전을 전환할 수도 있습니다.
프로젝트 열기
https://vscode.dev로 이동하여 새 로컬 파일 또는 프로젝트를 만들거나 기존 로컬 프로젝트를 작업하거나 GitHub 및 Azure Repos(Azure DevOps의 일부)와 같이 다른 곳에 호스팅된 소스 코드 리포지토리에 액세스할 수 있습니다.
명령 팔레트(F1)에서 파일 > 새 파일을 사용하여 데스크톱 VS Code 환경에서와 마찬가지로 웹에서 새 로컬 파일을 만들 수 있습니다.
GitHub 리포지토리
다음 스키마를 따르는 URL에서 직접 웹용 VS Code로 GitHub 리포지토리를 열 수 있습니다: https://vscode.dev/github/<organization>/<repo>. 예시로 VS Code 리포지토리를 사용하면 다음과 같이 보입니다: https://vscode.dev/github/microsoft/vscode.
이 환경은 GitHub 리포지토리 확장에 의해 구동되는 사용자 지정 vscode.dev/github URL에서 제공됩니다(이는 더 광범위한 원격 리포지토리 확장의 일부입니다).
GitHub 리포지토리를 사용하면 코드를 로컬 컴퓨터로 가져올 필요 없이 편집기 내에서 리포지토리를 원격으로 탐색하고 편집할 수 있습니다. 이 확장과 작동 방식에 대한 자세한 내용은 GitHub 리포지토리 가이드를 참조하십시오.
참고: GitHub 리포지토리 확장은 데스크톱 VS Code에서도 작동하여 빠른 리포지토리 탐색 및 편집을 제공합니다. 확장을 설치하면 GitHub 리포지토리: 리포지토리 열기... 명령으로 리포지토리를 열 수 있습니다.
Chrome 및 Edge용 vscode.dev 확장 프로그램을 설치하여 브라우저의 검색 표시줄(omnibox)을 통해 vscode.dev에서 GitHub 리포지토리를 열 수도 있습니다. 그런 다음 code를 입력하여 omnibox를 활성화하고 리포지토리 이름을 입력합니다. 제안은 브라우저 검색 기록에서 채워지므로 원하는 리포지토리가 나타나지 않으면 완전한 <owner>/<repo> 이름을 입력하여 열 수도 있습니다. 예를 들어 microsoft/vscode입니다.
웹용 VS Code(https://vscode.dev)에 이미 있는 경우 원격 리포지토리 확장 명령을 통해 다른 리포지토리로 이동할 수 있습니다. 상태 표시줄의 왼쪽 하단에 있는 원격 표시기를 선택하면 원격 리포지토리 열기... 명령이 표시됩니다.
Azure Repos
GitHub 리포지토리와 마찬가지로 웹용 VS Code에서 Azure Repos를 열 수 있습니다.
https://vscode.dev/azurerepos/<organization>/<project>/<repo> 스키마를 가진 URL로 이동하면 Azure Repos에서 파일을 읽고, 검색하고, 변경 사항을 커밋할 수 있습니다. 가져오기, 풀, 동기화 변경 사항을 보고 브랜치를 볼 수 있습니다.
vscode.dev를 접두사로 붙여 Azure Repos의 모든 리포지토리, 브랜치 또는 태그를 웹용 VS Code에서 열 수 있습니다.
또는 Azure DevOps 리포지토리 또는 끌어오기 요청을 열 때 (.) 키를 눌러 웹용 VS Code에서 열 수 있습니다.
더 많은 사용자 지정 URL
데스크톱과 마찬가지로 거의 모든 백엔드, 언어 및 서비스를 지원하는 풍부한 확장 생태계를 통해 웹용 VS Code를 사용자 지정할 수 있습니다. vscode.dev에는 일반적인 환경에 대한 바로 가기를 제공하는 URL이 포함되어 있습니다.
이미 두 개의 URL(vscode.dev/github 및 vscode.dev/azurerepos)을 살펴보았습니다. 다음은 더 완전한 목록입니다.
| 서비스 | URL 구조 | 문서 |
|---|---|---|
| GitHub | /github/<org>/<repo> |
위의 자세한 정보 |
| Azure Repos | /azurerepos/<org>/<project>/<repo> |
위의 자세한 정보 |
| Visual Studio Live Share | /editor/liveshare/<sessionId> |
아래의 자세한 정보 |
| Visual Studio Marketplace | /editor/marketplace/<marketplacePublisher>/<extensionId>/<extensionVersion> |
예시 경로로 이 확장 프로그램을 편집할 수 있습니다. |
| Power Pages | /power/pages |
Power Pages 문서 |
| 프로필 | /editor/profile/github/<GUID> |
프로필 문서 |
| 테마 | /editor/theme/<extensionId> |
아래의 자세한 정보 |
| MakeCode | /edu/makecode |
MakeCode 문서 |
| 교육용 Visual Studio Code | /edu |
교육용 Visual Studio Code 랜딩 페이지 |
| Azure Machine Learning (AML) | /+ms-toolsai.vscode-ai-remote-web |
AML 문서 |
| Azure | /azure |
Azure용 Visual Studio Code |
일부 URL은 특정 방식으로 입력해야 합니다(예: vscode.dev/editor/liveshare는 활성 Live Share 세션이 필요함). 각 서비스의 문서를 검토하여 특정 액세스 및 사용 정보를 확인하십시오.
아래에 이러한 URL 중 일부에 대한 자세한 정보가 있습니다.
테마
https://vscode.dev/editor/theme/<extensionId> URL 스키마를 통해 웹용 VS Code에서 컬러 테마를 공유하고 체험할 수 있습니다.
예를 들어, https://vscode.dev/editor/theme/sdras.night-owl로 이동하여 다운로드 및 설치 프로세스를 거치지 않고 Night Owl 테마를 체험할 수 있습니다.
참고: 컬러 테마 URL 스키마는 완전히 선언적인 테마(코드 없음)에 작동합니다.
확장은 여러 테마를 정의할 수 있습니다. /editor/theme/<extensionId>/<themeName> 스키마를 사용할 수 있습니다. themeName이 지정되지 않으면 웹용 VS Code는 첫 번째 테마를 사용합니다.
테마 작성자는 확장 README에 다음 배지를 추가하여 사용자가 웹용 VS Code에서 테마를 쉽게 체험할 수 있도록 할 수 있습니다(<extensionId>를 테마 확장의 고유 식별자로 바꿉니다).
[](https://vscode.dev/editor/theme/<extensionId>)
Visual Studio Live Share
Live Share 게스트 세션은 https://vscode.dev/editor/liveshare URL을 통해 브라우저에서 사용할 수 있습니다. sessionId는 원활한 참여 경험을 위해 확장에 전달됩니다.
다른 환경에서 작업 계속하기
경우에 따라 코드를 실행할 수 있는 다른 환경에 액세스해야 할 수 있습니다. 로컬 파일 시스템 및 전체 언어 및 개발 도구에 대한 지원이 있는 개발 환경에서 리포지토리 작업을 계속하도록 전환할 수 있습니다.
GitHub 리포지토리 확장을 사용하면 리포지토리를 로컬로 복제하고, 데스크톱에서 다시 열거나, 현재 리포지토리에 대한 GitHub Codespace를 만들 수 있습니다(확장 프로그램이 설치되어 있고 GitHub Codespaces를 만들 수 있는 경우). 이를 위해 명령 팔레트(F1)에서 사용할 수 있는 작업 계속... 명령을 사용하거나 상태 표시줄의 원격 표시기를 클릭합니다.
작업 저장 및 공유
웹에서 로컬 파일을 작업할 때 자동 저장이 활성화되어 있으면 작업이 자동으로 저장됩니다. 데스크톱 VS Code에서와 마찬가지로 수동으로 저장할 수도 있습니다(예: 파일 > 저장).
원격 리포지토리에서 작업할 때 작업은 커밋할 때까지 브라우저의 로컬 저장소에 저장됩니다. GitHub 리포지토리를 사용하여 리포지토리 또는 끌어오기 요청을 여는 경우 소스 제어 보기에서 변경 사항을 푸시하여 새 작업을 유지할 수 있습니다.
작업 계속을 통해 다른 환경에서 작업을 계속할 수도 있습니다.
커밋되지 않은 변경 사항으로 **작업 계속**을 처음 사용하는 경우 VS Code 서비스에서 보류 중인 변경 사항을 저장하는 **클라우드 변경 사항**을 사용하여 편집 내용을 선택한 개발 환경으로 가져오는 옵션이 제공됩니다. 이는 GitHub 리포지토리 문서에 더 자세히 설명되어 있습니다.
원격 터널을 사용하여 자체 컴퓨팅 인스턴스 사용
웹용 VS Code에서 원격 - 터널 확장을 사용하여 다른 머신에서 개발할 수 있습니다.
원격 - 터널 확장을 사용하면 데스크톱 PC 또는 가상 머신(VM)과 같은 원격 머신에 보안 터널을 통해 연결할 수 있습니다. 그런 다음 SSH 요구 사항 없이 어디서든 해당 머신에 안전하게 연결할 수 있습니다. 이를 통해 vscode.dev에 "자체 컴퓨팅"을 가져올 수 있으며 브라우저에서 코드를 실행하는 것과 같은 추가 시나리오를 사용할 수 있습니다.
원격 - 터널에 대한 자세한 내용은 해당 설명서에서 확인할 수 있습니다.
안전한 탐색
웹용 VS Code는 웹 브라우저의 샌드박스 내에서 전적으로 실행되며 매우 제한된 실행 환경을 제공합니다.
원격 리포지토리의 코드에 액세스할 때 웹 편집기는 리포지토리를 "복제"하는 대신 브라우저에서 직접 서비스 API를 호출하여 코드를 로드합니다. 이는 신뢰할 수 없는 리포지토리를 복제할 때 공격 표면을 더욱 줄여줍니다.
로컬 파일을 작업할 때 웹용 VS Code는 브라우저의 파일 시스템 액세스 API를 통해 로드하며, 이는 브라우저가 액세스할 수 있는 범위를 제한합니다.
어디서나 실행
GitHub Codespaces와 유사하게 웹용 VS Code는 iPad와 같은 태블릿에서도 실행될 수 있습니다.
언어 지원
언어 지원은 코드 편집, 탐색 및 검색을 포함하여 웹에서 약간 더 미묘합니다. 데스크톱 환경은 일반적으로 파일 시스템, 런타임 및 컴퓨팅 환경을 예상하는 언어 서비스 및 컴파일러에 의해 구동됩니다. 브라우저에서는 이러한 환경이 브라우저에서 실행되는 언어 서비스에 의해 구동되어 소스 코드 토큰화 및 구문 색상화, 완성, 그리고 많은 단일 파일 작업을 제공합니다.
일반적으로 환경은 다음 범주로 나뉩니다.
- 좋음: 대부분의 프로그래밍 언어에 대해 웹용 VS Code는 코드 구문 색상화, 텍스트 기반 완성 및 괄호 쌍 색상화를 제공합니다. anycode 확장을 통해 Tree-sitter 구문 트리를 사용하면 C/C++, C#, Java, PHP, Rust 및 Go와 같은 인기 있는 언어에 대한 개요/기호로 이동 및 기호 검색과 같은 추가 환경을 제공할 수 있습니다.
- 더 좋음: TypeScript, JavaScript 및 Python 환경은 모두 브라우저에서 네이티브로 실행되는 언어 서비스에 의해 구동됩니다. 이러한 프로그래밍 언어의 경우 "좋음" 환경과 풍부한 단일 파일 완성, 의미론적 강조 표시, 구문 오류 등을 얻을 수 있습니다.
- 최상: JSON, HTML, CSS, LESS 등과 같은 많은 "웹" 언어의 경우 vscode.dev에서의 코딩 환경은 데스크톱과 거의 동일합니다(Markdown 미리 보기 포함!).
상태 표시줄의 언어 상태 표시기를 통해 현재 파일의 언어 지원 수준을 확인할 수 있습니다.
제한 사항
웹용 VS Code는 브라우저 내에서 전적으로 실행되므로 일부 환경은 데스크톱 앱에서 할 수 있는 것보다 당연히 더 제한적입니다. 예를 들어 터미널과 디버거는 사용할 수 없는데, 브라우저 샌드박스 내에서 Rust 또는 Go 애플리케이션을 컴파일, 실행 및 디버그할 수 없기 때문입니다.
확장
브라우저에서 실행할 수 있는 확장은 일부에 불과합니다. 확장 보기에서 웹에 확장을 설치할 수 있으며, 설치할 수 없는 확장은 경고 아이콘과 이유 알아보기 링크가 있습니다. 시간이 지남에 따라 더 많은 확장이 활성화될 것으로 예상합니다.
확장을 설치하면 브라우저의 로컬 저장소에 저장됩니다. 설정 동기화를 활성화하여 다른 브라우저 및 데스크톱을 포함한 VS Code 인스턴스 간에 확장이 동기화되도록 할 수 있습니다.
확장 팩에 브라우저 샌드박스에서 실행되지 않는 확장이 포함된 경우 팩에 포함된 확장을 볼 수 있는 옵션과 함께 정보 메시지가 표시됩니다.
확장이 브라우저 샌드박스에서 실행될 때 더 제한적입니다. 대부분의 테마, 스니펫 또는 문법과 같은 순수하게 선언적인 확장은 수정 없이 실행될 수 있으며 확장 작성자가 수정하지 않고도 웹용 VS Code에서 사용할 수 있습니다. 코드를 실행하는 확장은 브라우저 샌드박스에서 실행되도록 지원하기 위해 업데이트해야 합니다. 브라우저에서 확장을 지원하는 데 필요한 사항에 대한 자세한 내용은 웹 확장 작성자 가이드를 참조하십시오.
부분 지원만으로 브라우저에서 실행되는 확장도 있습니다. 좋은 예는 단일 파일 또는 현재 열려 있는 파일로 지원을 제한하는 언어 확장입니다.
파일 시스템 API
Edge 및 Chrome은 현재 파일 시스템 API를 지원하므로 웹 페이지에서 로컬 파일 시스템에 액세스할 수 있습니다. 브라우저에서 파일 시스템 API를 지원하지 않으면 폴더를 로컬로 열 수 없지만 대신 파일을 열 수 있습니다.
브라우저 지원
Chrome, Edge, Firefox 및 Safari의 최신 버전에서 웹용 VS Code를 사용할 수 있습니다. 각 브라우저의 이전 버전은 작동하지 않을 수 있습니다. 최신 버전만 지원합니다.
팁: 호환되는 브라우저 버전을 확인하는 한 가지 방법은 VS Code 테스트에 현재 사용되는 Playwright 버전을 살펴보고 지원되는 브라우저 버전을 검토하는 것입니다. VS Code 리포지토리의 package.json 파일에서
devDependencies/@playwright/test에 현재 사용 중인 Playwright 버전을 찾을 수 있습니다. Playwright 버전(예:1.37)을 알면 해당 릴리스 노트의 브라우저 버전 섹션을 검토할 수 있습니다.
Firefox 및 Safari에서는 웹 보기(Webviews)가 다르게 표시되거나 예기치 않은 동작을 보일 수 있습니다. VS Code GitHub 리포지토리에서 이슈 쿼리를 확인하여 Safari 레이블 및 Firefox 레이블과 같이 특정 브라우저와 관련된 이슈를 추적할 수 있습니다.
웹용 VS Code에서 VS Code를 사용할 때 브라우저 경험을 개선하기 위해 추가로 수행할 수 있는 단계가 있습니다. 자세한 내용은 추가 브라우저 설정 섹션을 참조하십시오.
모바일 지원
모바일 장치에서 웹용 VS Code를 사용할 수 있지만 작은 화면에서는 특정 제한 사항이 있을 수 있습니다.
키보드 단축키
특정 키보드 단축키는 웹에서 다르게 작동할 수 있습니다.
| 문제 | 이유 |
|---|---|
| ⇧⌘P (Windows, Linux Ctrl+Shift+P) 는 Firefox에서 명령 팔레트를 시작하지 않습니다. | ⇧⌘P (Windows, Linux Ctrl+Shift+P) 는 Firefox에서 예약되어 있습니다. 해결 방법으로 F1을 사용하여 명령 팔레트를 시작하십시오. |
| ⌘N (Windows, Linux Ctrl+N) 새 파일은 웹에서 작동하지 않습니다. | ⌘N (Windows, Linux Ctrl+N) 은 새 창을 엽니다. 해결 방법으로 Ctrl+Alt+N (macOS의 경우 Cmd+Alt+N)을 사용할 수 있습니다. |
| ⌘W (Windows Ctrl+F4, Linux Ctrl+W) 편집기 닫기는 웹에서 작동하지 않습니다. | ⌘W (Windows Ctrl+F4, Linux Ctrl+W) 은 브라우저에서 현재 탭을 닫습니다. 해결 방법으로 Ctrl+Shift+Alt+N (macOS의 경우 Cmd+Shift+Alt+N)을 사용할 수 있습니다. |
| ⇧⌘B (Windows, Linux Ctrl+Shift+B) 은 브라우저에서 즐겨찾기 모음을 전환하지 않습니다. | 웹용 VS Code는 이를 재정의하고 명령 팔레트의 "빌드" 메뉴로 리디렉션합니다. |
| Alt+Left 및 Alt+Right 는 편집기 내에서 탐색해야 하지만 잘못되어 탭 기록 탐색을 트리거할 수 있습니다. | 포커스가 편집기 외부인 경우 이러한 단축키는 탭 기록 탐색을 트리거합니다. |
추가 브라우저 설정
브라우저에서 VS Code를 사용할 때 추가 브라우저 구성 단계를 수행할 수 있습니다.
새 탭 및 창 열기
경우에 따라 웹용 VS Code를 작업하는 동안 새 탭 또는 창을 열어야 할 수 있습니다. VS Code에서 클립보드를 읽을 때 클립보드 액세스 권한을 요청할 수 있습니다. 브라우저에 따라 클립보드 액세스를 허용하거나 팝업 창을 다른 방식으로 허용할 수 있습니다.
- Chrome, Edge, Firefox: 브라우저 설정에서 "사이트 권한"을 검색하거나 주소 표시줄 오른쪽에서 다음 옵션을 찾으십시오.
- Safari: Safari 브라우저에서 환경 설정... > 웹 사이트 > 팝업 창 > 액세스 중인 도메인(예:
vscode.dev)으로 이동한 후 드롭다운에서 허용을 선택합니다.