맥에 Visual Studio Code 설치하는 방법

튜토리얼

개발자나 코더라면 워크플로우를 개선하기 위해 항상 새로운 도구를 찾는 경우가 많을 것입니다. 다행히도, 여러분이 찾을 수 있는 최고의 코드 편집기 중 하나가 Mac용 Visual Studio Code입니다.

Visual Studio Code(VS Code)는 코드 작성을 더 효율적으로 도와주는 많은 기능을 제공합니다. 이 글에서는 Mac에 VS Code를 설치하는 방법과 시작하기 위한 최고의 확장자 및 테마를 알아볼 것입니다.

계속 읽고 워크플로우를 업그레이드할 준비를 하세요!

전제 조건

이 튜토리얼은 실습을 포함합니다. 따라하려면 macOS 기기가 있어야 합니다. 이 튜토리얼은 Apple Silicon(M1)을 사용하므로, Intel 기반 Mac을 사용하는 경우 단계가 약간 다를 수 있습니다.

Mac용 Visual Studio Code 다운로드

Visual Studio Code(VS Code)는 Microsoft에서 Windows, Linux, macOS용으로 제공되는 무료 오픈 소스 코드 편집기입니다. 하지만 다른 도구와 마찬가지로 시스템에 VS Code를 다운로드하고 설치해야 합니다.

1. 웹 브라우저를 열고, VS Code 다운로드 페이지로 이동합니다.

2. 다음으로, 맥 아이콘 아래의 Apple Silicon을 클릭하여 Mac용 VS Code의 패키지 설치 프로그램을 ZIP 파일로 다운로드합니다. 이 Apple Silicon(M1) 버전은 Apple에서 개발한 최신 칩입니다.

Intel 프로세서를 사용하는 구형 Mac을 사용하는 경우 Intel Chip을 클릭하세요.

Downloading VS Code for Mac

3. 마지막으로, 터미널을 열고 다음 ls 명령을 실행하여 다운로드한 VS Code 패키지 설치 프로그램을 확인합니다.

관련 정보:iTerm 튜토리얼에서 macOS 터미널 능력을 발휘하세요

ls -la ~/Downloads/VSCode-darwin-arm64.zip

아래 출력에서는 zip 파일의 위치가 표시됩니다.

Verifying the downloaded zip file

맥에 Visual Studio Code 설치하기

이제 VS Code 설치 프로그램을 다운로드했으므로 맥에 VS Code를 설치하고 새로 정의된 코드 편집기를 경험할 준비가 되었습니다. VS Code는 최적화되어 있어서 현대적인 웹 및 클라우드 애플리케이션을 더 효과적으로 빌드하고 디버그할 수 있습니다.

VS Code의 또 다른 훌륭한 기능은 마켓플레이스에서 찾을 수 있는 확장 기능을 통해 다양한 프로그래밍 언어를 지원한다는 것입니다.

맥에 VS Code를 설치하려면:

1. 다운로드한 VS Code zip 파일을 선택하고 → 점 세 개 아이콘(오른쪽 상단)을 클릭하고 → 열기를 선택하여 ZIP 파일을 압축 해제합니다.

압축을 해제하면 다운로드 폴더에 새로운 Visual Studio Code 애플리케이션이 생겼습니다.

관련 정보:리눅스에서 파일을 압축 및 해제하는 방법을 배우고 압축의 대가가 되세요

Unzipping the VS Code zip file

2. 다음으로, 아래의 ls 명령어를 실행하여 애플리케이션 파일을 확인하십시오. 이 명령은 Visual Studio Code 애플리케이션 파일의 내용을 나열합니다.

역슬래시(\\) 기호는 터미널에게 공백을 일반 문자로 취급하도록 지시하는 이스케이프 문자입니다. 파일 이름에 공백이 있는 경우 이스케이프 문자를 사용해야 합니다.

ls -la ~/Downloads/Visual\ Studio\ Code.app
Listing the contents of the Visual Studio Code application file

3. 아래의 open 명령을 실행하여 새 인스턴스(-n)에서 설치 프로그램을 시작하십시오.

open -n ~/Downloads/Visual\ Studio\ Code.app
Launching the installer

4. 이제 아래의 메시지가 나타날 때 설치를 계속 진행하려면 “열기”를 클릭하십시오.

이 경고는 인터넷에서 애플리케이션을 다운로드했기 때문에 나타납니다. 무시해도 안전합니다.

Opening the installer

설치가 완료되면 VS Code 애플리케이션이 열리고 아래의 시작 페이지가 표시됩니다.

Viewing VS Code’s main window.

VS Code의 GUI 탐색

Mac에 VS Code를 성공적으로 설치했지만 코딩에 들어가기 전에 먼저 VS Code의 GUI 및 기능에 익숙해져 보십시오.

VS Code에는 다음과 같은 기능이 많이 포함되어 있어:

  • 테마 선택 및 편집기 모양 변경.
  • 프로젝트 폴더 열기로 파일을 빠르게 이동하여 파일 구조가 올바른지 확인합니다.
  • Git와 같은 소스 제어 시스템 추가.

관련:Visual Studio Code GitHub 설정하는 방법!

  • 빠르게 마켓플레이스에서 확장 기능을 추가하고 등등합니다.

이것들은 VS Code가 제공할 수 있는 작은 부분에 불과합니다. 각 기능이 작업 흐름에서 어떻게 도움이 되는지 직접 확인하세요. 테마를 변경하는 것이 좋은 시작이 될 수도 있습니다.

1. 시작 페이지에서 원하는대로 편집기 테마를 선택하고 다른 설정은 기본값으로 유지한 다음 왼쪽 아래의 ‘완료 표시’를 클릭합니다.

라이트 테마와 다크 테마가 맘에 들지 않으면 ‘더보기 테마 보기’를 클릭하고 흥미로운 테마를 찾아보세요.

Selecting a theme

2. 다음으로 VS Code의 가장 왼쪽 부분, 액티비티 바를 살펴보세요. 여기에는 일곱 가지 주요 섹션이 있습니다. 그 중에서도 가장 중요한 섹션 중 하나인 탐색기 (Ctrl+Shift+E / Cmd+Shift+E)로 시작하세요.

탐색기는 프로젝트의 파일과 폴더를 표시하며 리포지토리를 복제할 수 있는 곳입니다. 또한 탐색기를 사용하여 다음과 같은 다양한 작업을 수행할 수 있습니다:

  • 프로젝트에서 파일 및 폴더를 만들고 삭제하며 이름을 바꿉니다.
  • 파일 및 폴더를 프로젝트 폴더 내에서 드래그하여 이동합니다.

‘드래그 앤 드롭’은 VS Code 외부에서 탐색기로 파일을 이동할 때 작동합니다. 그러나 탐색기가 비어 있는 경우 VS Code가 파일을 편집기에서 엽니다.

Viewing the Explorer section

3. 검색 아이콘을 클릭하십시오 (Ctrl+Shift+F / Cmd+Shift+F). 이는 파일, 심볼 및 텍스트를 검색할 수 있는 “검색” 섹션을 엽니다.

Viewing the Search section

4. 이제 소스 제어 아이콘을 클릭하십시오 (Ctrl+Shift+G / Cmd+Shift+G). 이는 Git이나 다른 소스 제어 시스템으로 프로젝트를 관리할 수 있는 “소스 제어” 섹션을 엽니다.

VS Code에는 기본적으로 포함된 Git 지원과 함께 통합된 소스 제어 관리 (SCM) 기능이 제공됩니다.

Viewing the Source Control section

5. 소스 제어 후 실행 및 디버그 아이콘을 클릭하십시오 (Ctrl+Shift+D / Cmd+Shift+D). 이는 “실행 및 디버그: 실행” 섹션을 열어 프로젝트를 실행하고 디버깅할 수 있습니다.

Viewing the Run and Debug section

6. 마지막으로, 확장 기능 아이콘을 클릭하십시오 (Ctrl+Shift+X / Cmd+Shift+X). 이는 “확장” 섹션에 접근하여 마켓플레이스에서 확장 기능을 설치할 수 있습니다.

Viewing the Extensions section

명령 줄 환경에서 VS Code 실행하기

아마도 대부분의 시간을 명령 줄 환경에서 보내지만 빠르게 코드를 작성해야 할 필요가 있을 수 있습니다. 그렇다면 VS Code를 명령 줄 환경에서 실행하도록 구성하는 것이 유용할 것입니다.

1. VS Code에서 (Cmd+Shift+P 또는 Ctrl+Shift+P)를 눌러 명령 팔레트를 엽니다. 이를 통해 VS Code의 모든 기능에 액세스할 수 있습니다.

2. 명령 팔레트에서 “Shell Command: Install ‘code’ command in PATH”를 입력하고 Enter를 누릅니다. 이 명령은 VS Code 실행 파일을 시스템의 PATH 변수에 추가합니다.

Adding the VS Code executable to your system’s PATH variable

3. 변경 사항이 적용되려면 터미널을 다시 시작하십시오. 이제 터미널에서 code 명령이 사용 가능합니다.

4. 이제 텍스트 파일을 생성하고 일부 텍스트를 추가한 다음 파일을 저장하고 닫으십시오.

5. 마지막으로 다음 명령을 실행하여 작업 디렉터리에서 이전에 만든 텍스트 파일의 파일 경로 (text.txt)를 전달하여 VS Code (code)를 시작하십시오.

# 텍스트 파일을 저장한 디렉터리로 이동합니다
cd Downloads
# VS Code를 시작하고 텍스트 파일을 엽니다
code . text.txt

편집기 창에 표시된 text.txt 파일의 내용이 포함된 VS Code(오른쪽)가 표시됩니다. 이제 VS Code의 훌륭한 기능을 사용하여 이 파일을 편집할 수 있습니다.

Launching VSCode via the command-line environment

추가 기능 설치

VS Code의 가장 좋은 점 중 하나는 매우 사용자 정의가 가능하다는 것입니다. 어떻게? 새 기능을 추가하려면 확장을 설치하고 다양한 확장을 사용할 수 있습니다.

macOS Color Picker 확장을 설치하려고 할 수도 있습니다. 이 확장은 CSS, HTML 및 JavaScript 파일을 작업할 때 기본 macOS 색상 선택기를 선택할 수 있게 해줍니다.

1. 활동 표시줄의 확장 메뉴로 이동하십시오. 이 메뉴에는 세 가지 섹션이 있습니다:

  • 설치됨 – 이 섹션에는 이미 설치된 확장이 표시됩니다.
  • 권장 – 이 섹션은 파일 유형에 기반한 권장 확장을 보여줍니다. 예를 들어 JavaScript 파일을 사용하는 경우 권장 JavaScript 확장이 표시됩니다.
  • 인기 – 이 섹션에는 가장 인기 있는 VS Code 확장이 표시됩니다.
Accessing the Extensions panel

2. 검색 상자에 macOS Color Picker를 입력하고 Enter 키를 누릅니다. 일치하는 확장 목록이 내림차순으로 표시됩니다(가장 일치하는 확장이 먼저 나옴).

목표 확장을 찾았다면 해당 확장 옆의 설치 버튼을 클릭합니다. 설치 버튼이 녹색으로 변경되어 활성화 버튼으로 바뀌므로 클릭하여 확장을 활성화합니다.

Installing the macOS Color Picker extension.

확장을 설치한 후에는 확장에 대한 개요 페이지가 오른쪽에 표시됩니다.

Verifying the macOS Color Picker is installed

3. 이제 새로운 macOS Color Picker 확장을 테스트하기 위해 CSS, HTML 또는 JavaScript 파일을 엽니다.

4. 마지막으로 명령 팔레트를 열고(Cmd+Shift+P / Ctrl+Shift+P), Open Color Picker를 입력하고 Enter 키를 누릅니다. macOS Color Picker 패널이 열립니다(아래 표시됨).

컬러 피커를 사용하여 코드에 삽입할 색상을 선택합니다. 이 확장은 헥스 코드를 기억하지 않고 필요한 색상 값을 빠르게 얻을 수 있는 훌륭한 방법입니다.

Testing the new macOS Color Picker extension

결론

이 튜토리얼에서는 Mac에 VS Code를 설치하고 더 많은 기능을 추가하는 확장을 배웠습니다. 이제 다음 프로젝트에서 작업할 때 VS Code가 제공하는 모든 기능을 최대로 활용할 수 있습니다.

하지만 여기서 멈추지 마세요! 이 새로운 지식을 활용하여, 왜 버전 관리를 Git과 GitHub로 사용해서 작업을 추적하지 않으시겠어요?

Source:
https://adamtheautomator.com/visual-studio-code-on-mac/