<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "f8d4b0284f3fc1de7eb65073d8338cca",
  "translation_date": "2025-10-03T09:06:20+00:00",
  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
  "language_code": "ko"
}
-->
***

# 코드 편집기 사용: [VSCode.dev](https://vscode.dev) 마스터하기

**환영합니다!**  
이 강의에서는 강력한 웹 기반 코드 편집기인 [VSCode.dev](https://vscode.dev)를 기본부터 고급 사용법까지 배웁니다. 브라우저에서 설치 없이 코드 편집, 프로젝트 관리, 변경 사항 추적, 확장 설치, 협업을 자신 있게 수행하는 방법을 배우게 됩니다.

***

## 학습 목표

이 강의를 마치면 다음을 할 수 있습니다:

- 어떤 프로젝트든, 어디서든 효율적으로 코드 편집기를 사용할 수 있습니다.
- 내장된 버전 관리 기능으로 작업을 원활하게 추적할 수 있습니다.
- 편집기 커스터마이징과 확장을 통해 개발 워크플로를 개인화하고 향상시킬 수 있습니다.

***

## 사전 준비

시작하려면 **무료 [GitHub](https://github.com) 계정에 가입하세요**. 이를 통해 코드 저장소를 관리하고 전 세계적으로 협업할 수 있습니다. 아직 계정이 없다면 [여기에서 계정을 생성하세요](https://github.com/).

***

## 웹 기반 코드 편집기를 사용하는 이유

VSCode.dev 같은 **코드 편집기**는 코드 작성, 편집, 관리의 중심 역할을 합니다. 직관적인 인터페이스, 다양한 기능, 브라우저를 통한 즉각적인 접근성을 제공하며 다음을 할 수 있습니다:

- 어떤 기기에서든 프로젝트를 편집
- 설치의 번거로움 없이 작업
- 즉시 협업 및 기여

VSCode.dev에 익숙해지면 언제 어디서든 코딩 작업을 처리할 준비가 됩니다.

***

## VSCode.dev 시작하기

**[VSCode.dev](https://vscode.dev)**로 이동하세요—설치도, 다운로드도 필요 없습니다. GitHub로 로그인하면 설정, 확장, 저장소를 동기화하는 등 전체 기능에 접근할 수 있습니다. 요청 시 GitHub 계정을 연결하세요.

로드 후 작업 공간은 다음과 같이 보입니다:

![기본 VSCode.dev](../images/default-vscode-dev 세 가지 주요 섹션이 왼쪽에서 오른쪽으로 나뉩니다:
- **활동 바:** 🔎 (검색), ⚙️ (설정), 파일, 소스 제어 등 아이콘
- **사이드바:** 활동 바 아이콘에 따라 컨텍스트가 변경됨 (기본값은 *탐색기*로 파일 표시)
- **편집기/코드 영역:** 가장 큰 오른쪽 섹션—코드를 실제로 편집하고 볼 수 있는 곳

아이콘을 클릭하여 기능을 탐색하세요. 하지만 위치를 유지하려면 _탐색기_로 돌아오세요.

***

## GitHub 저장소 열기

### 방법 1: 편집기에서

1. [VSCode.dev](https://vscode.dev)로 이동합니다. **"원격 저장소 열기"**를 클릭하세요.

   ![원격 저장소 열기](../../../../8-code-editor/images/open-remote-repository _명령 팔레트_ (Ctrl-Shift-P 또는 Mac에서는 Cmd-Shift-P)를 사용하세요.

   ![팔레트 메뉴](../images/palette-menu.png 원격 저장소 열기”를 선택하세요.
   - 옵션을 선택합니다.
   - GitHub 저장소 URL(예: `https://github.com/microsoft/Web-Dev-For-Beginners`)을 붙여넣고 Enter를 누릅니다.

성공하면 전체 프로젝트가 로드되어 편집할 준비가 됩니다!

***

### 방법 2: URL을 통해 즉시 열기

GitHub 저장소 URL에서 `github.com`을 `vscode.dev/github`로 바꾸면 VSCode.dev에서 직접 열 수 있습니다.  
예:

- GitHub: `https://github.com/microsoft/Web-Dev-For-Beginners`
- VSCode.dev: `https://vscode.dev/github/microsoft/Web-Dev-For-Beginners`

이 기능은 어떤 프로젝트든 빠르게 접근할 수 있도록 해줍니다.

***

## 프로젝트 파일 편집하기

저장소를 열면 다음을 할 수 있습니다:

### 1. **새 파일 생성**
- *탐색기* 사이드바에서 원하는 폴더로 이동하거나 루트를 사용하세요.
- _‘새 파일 ...’_ 아이콘을 클릭하세요.
- 파일 이름을 입력하고 **Enter**를 누르면 파일이 즉시 나타납니다.

![새 파일 생성](../images/create-new-file 2. **파일 편집 및 저장**

- *탐색기*에서 파일을 클릭하여 코드 영역에서 엽니다.
- 필요한 변경 사항을 만드세요.
- VSCode.dev는 변경 사항을 자동으로 저장하지만 Ctrl+S를 눌러 수동으로 저장할 수도 있습니다.

![파일 편집](../images/edit-a-file.png. **버전 관리로 변경 사항 추적 및 커밋**

VSCode.dev에는 **Git** 버전 관리가 통합되어 있습니다!

- _'소스 제어'_ 아이콘을 클릭하여 모든 변경 사항을 확인하세요.
- `Changes` 폴더의 파일은 추가된 부분(녹색)과 삭제된 부분(빨간색)을 보여줍니다.  
  ![변경 사항 보기](../images/working-tree.png 파일 옆의 `+`를 클릭하여 커밋 준비를 합니다.
- **원하지 않는 변경 사항**은 되돌리기 아이콘을 클릭하여 삭제하세요.
- 명확한 커밋 메시지를 입력한 후 체크 표시를 클릭하여 커밋하고 푸시합니다.

GitHub 저장소로 돌아가려면 왼쪽 상단의 햄버거 메뉴를 선택하세요.

![변경 사항 준비 및 커밋](../images/edit-vscode.dev 확장으로 기능 강화

확장은 VSCode.dev에 언어, 테마, 디버거, 생산성 도구를 추가하여 코딩을 더 쉽고 재미있게 만들어줍니다.

### 확장 검색 및 관리

- 활동 바에서 **확장 아이콘**을 클릭하세요.
- _'마켓플레이스에서 확장 검색'_ 상자에 확장을 검색하세요.

  ![확장 세부 정보](../images/extension-details:
  - **설치됨**: 추가한 모든 확장
  - **인기**: 업계에서 선호하는 확장
  - **추천**: 워크플로에 맞춘 확장

  ![확장 보기](

  

***

### 1. **확장 설치**

- 검색창에 확장 이름을 입력하고 클릭하여 세부 정보를 편집기에서 확인하세요.
- 사이드바 _또는_ 메인 코드 영역에서 **파란색 설치 버튼**을 클릭하세요.

  ![확장 설치](../images/install-extension 2. **확장 커스터마이징**

- 설치된 확장을 찾으세요.
- **기어 아이콘**을 클릭 → _확장 설정_을 선택하여 원하는 대로 동작을 조정하세요.

  ![확장 설정 수정](../images/extension-settings 3. **확장 관리**
다음 작업을 할 수 있습니다:

- **비활성화:** 확장을 설치 상태로 유지하면서 일시적으로 끄기
- **제거:** 더 이상 필요하지 않은 경우 영구적으로 삭제

  확장을 찾고 기어 아이콘을 클릭하여 ‘비활성화’ 또는 ‘제거’를 선택하거나 코드 영역의 파란색 버튼을 사용하세요.

***

## 과제

실력을 테스트하세요: [vscode.dev를 사용하여 이력서 웹사이트 만들기](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)

***

## 추가 탐구 및 자기 학습

- [공식 VSCode 웹 문서](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza)를 통해 더 깊이 탐구하세요.
- 고급 작업 공간 기능, 키보드 단축키, 설정을 탐색하세요.

***

**이제 VSCode.dev를 사용하여 어디서든, 어떤 기기에서든 코딩, 생성, 협업할 준비가 되었습니다!**

---

**면책 조항**:  
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전이 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.