VSCode·터미널 설치

얻어갈 것

• 코딩 IDE인 VS Code를 설치합니다
• 언어팩, 자동 저장, 아이콘 테마처럼 처음부터 켜두면 편한 설정을 잡습니다.
• VS Code 오른쪽 터미널에서 Claude Code를 실행하는 화면 구성을 만듭니다.

VS Code란

• VS Code는 AI가 만든 파일을 직접 보고, 필요한 부분을 고치고, 프로젝트 구조를 확인하는 대표적인 IDE입니다

설치와 첫 실행

https://code.visualstudio.com/

• VS Code 공식 사이트에서 설치 파일을 내려받고 기본 옵션으로 설치합니다.
• 설치 후 첫 화면이 열리면 계정 로그인은 건너뛰어도 됩니다.
• 나중에 프로젝트 폴더를 열었을 때 파일 목록과 터미널을 한 화면에서 보는 것이 목표입니다.

확대

설치가 끝나면 VS Code 첫 화면이 열립니다. 여기서 계정 로그인이나 동기화 설정을 바로 하지 않아도 수업을 따라가는 데는 문제가 없습니다.

확대

처음 켜둘 설정

• Command Palette는 기능을 검색해서 실행하는 입구입니다. Ctrl + Shift + P로 엽니다. (macOS: Cmd + Shift + P)
• 설정 화면은 Ctrl + ,로 열 수 있습니다. (macOS: Cmd + ,)
• 한국어 언어팩, 자동 저장, Material Icon Theme 정도만 먼저 잡습니다.

1. 한국어 언어팩 설치

왼쪽 Extensions에서 Korean Language Pack을 검색해 설치합니다. 설치 후 VS Code를 다시 시작하라는 안내가 나오면 안내에 따라 재시작하면 됩니다.

확대

2. 자동 저장 켜기

자동 저장을 켜두면 AI가 파일을 고친 뒤 저장을 깜빡해서 실행 결과가 안 바뀌는 상황을 줄일 수 있습니다.

설정 화면을 열고 auto save를 검색한 뒤, 값을 afterDelay로 바꿉니다. Windows는 Ctrl + ,, macOS는 Cmd + ,로 설정 화면을 열 수 있습니다.

확대

3. Material Icon Theme 설치와 활성화

아이콘 테마는 필수 기능은 아니지만, 처음 프로젝트 구조를 볼 때 파일 종류를 눈으로 구분하기 쉽게 해줍니다.

확대

설치만 해서는 아이콘 테마가 바로 적용되지 않을 수 있습니다. Ctrl + Shift + P로 Command Palette를 엽니다. (macOS: Cmd + Shift + P) 그다음 Material Icons: Activate Icon Theme을 실행합니다.

확대

확대

터미널 설정

• VS Code 안에서 Ctrl + J를 눌러 아래 패널을 엽니다. (macOS: Cmd + J)
• 아래 패널에 여러 탭이 보이면 터미널 탭을 선택합니다.
• 아래 스크린샷과 같이 터미널 패널 위치를 오른쪽으로 옮깁니다.
• 왼쪽에는 파일과 코드, 오른쪽에는 Claude Code 대화를 두면 AI가 수정한 결과를 바로 확인하기 쉽습니다.

확대

• 터미널 패널의 탭 영역을 오른쪽 클릭하면 패널 위치를 바꿀 수 있습니다.

확대

$claude  # VS Code 터미널에서 Claude Code 실행

막히면 AI에게

나는 VS Code를 처음 설정하고 있어.
지금 하려는 작업은 [한국어 언어팩 설치 / 자동 저장 켜기 / 터미널 패널 오른쪽 이동]이야.

내 OS는 [Windows / macOS]이고, 현재 화면은 이 상태야:
(스크린샷 설명 또는 보이는 메뉴를 적기)

어디를 클릭하거나 어떤 검색어를 입력하면 되는지 알려줘.

마무리

• 이제 Claude Code가 실행될 터미널과 코드를 확인할 VS Code 작업대가 준비됐습니다.
• 다음에는 AI가 만들어준 프로젝트를 실행할 때 자주 필요한 Node.js와 npm을 설치합니다.