VS Code 설치 + AI 가이드 깨우기

이 페이지의 목표 — VS Code 설치부터 AI(Claude)를 깨워서 첫 대화하기까지 한 번에 끝냅니다. 이 페이지가 끝나면 그 다음부터는 AI에게 물어보면서 학습을 진행할 수 있어요.

VS Code는 마이크로소프트가 만든 무료 코드 에디터로, 전 세계에서 가장 많이 쓰여요. 자료가 압도적으로 많아서 AI가 정확히 안내해줄 수 있는 도구입니다.

전체 흐름

  1. VS Code 다운로드 & 설치
  2. 한글화 — 메뉴를 한국어로
  3. Claude Code 확장 설치 → AI 깨우기
  4. AI와 첫 대화 — 이제부터 모르는 건 AI한테!

시작 전 준비물

  • 인터넷 연결
  • RAM 4GB 이상 (권장 8GB)
  • Windows 10/11 64bit 또는 macOS 11+ 또는 Linux
  • Claude 계정 — Claude Code 로그인용 (없으면 claude.com/pricing에서 가입)

Windows 사용자명이 한글이라면 일부 명령어가 작동 안 할 수 있어요. 사용자명은 그대로 두고, 나중에 프로젝트 폴더를 C:\dev\my-app처럼 영문 경로에 만들면 해결됩니다.

STEP 1. 다운로드

공식 다운로드 페이지로 이동합니다 — code.visualstudio.com/download

Windows

  1. 페이지에서 Windows 큰 버튼 클릭
  2. VSCodeUserSetup-x64-[버전번호].exe 파일이 다운로드됨 (일반 PC는 x64로 충분)
  3. Surface Pro X 등 ARM 기기는 페이지 하단에서 ARM64 버전을 받으세요

User Installer / System Installer 두 가지가 있는데 User Installer(기본)를 받으세요. 관리자 권한 없이 설치돼서 간단합니다.

Mac은 어떻게 하나요?
  1. 화면 좌측 상단 사과 아이콘 → "이 Mac에 관하여" → 칩 확인
  2. Apple Silicon(M1·M2·M3·M4)은 Apple Silicon 버전
  3. Intel Mac은 Intel chip 버전
  4. 모르면 Universal을 받으면 어디서든 작동
Linux는 어떻게 하나요?
  • Ubuntu·Debian: .deb 파일
  • Fedora·CentOS: .rpm 파일
  • 또는 Snap Store에서 code 검색

STEP 2. 설치

Windows

  1. 다운로드한 .exe 파일 더블클릭
  2. 약관 동의 → [Next]
  3. 설치 경로 기본 그대로 → [Next]
  4. "추가 작업 선택" 화면에서 모두 체크 권장:
    • 바탕화면에 바로가기
    • 파일 탐색기 우클릭 메뉴에 "Code로 열기" 추가 (편함)
    • 지원되는 파일을 Code 편집기로 등록
    • PATH에 추가 ← 꼭 체크 (터미널에서 code .로 실행 가능)
  5. [Install] 클릭 → 설치 완료 → [Finish]

VS Code는 마이크로소프트의 검증된 도구라 보안 경고가 뜨지 않아요. 그냥 설치하면 끝!

Mac은 어떻게 하나요?
  1. 다운로드한 .zip 더블클릭 → Visual Studio Code.app 추출
  2. 이 앱을 Applications 폴더로 드래그
  3. Launchpad나 Spotlight(Cmd+Space → "Visual Studio Code")로 실행

STEP 3. 첫 실행 & 화면 둘러보기

처음 실행하면 환영 화면(Welcome 탭)이 뜹니다. 닫고 화면 구조부터 익혀봅시다.

처음엔 5군데만 기억하세요.

  1. 좌측 사이드바 — 파일 탐색·검색·Git·확장(Extension) 등
  2. 사이드 패널 — 사이드바에서 클릭한 기능이 펼쳐지는 곳
  3. 가운데 에디터 — 코드·텍스트 파일이 열리는 영역
  4. 하단 터미널 — 명령어 입력하는 곳 (Ctrl + ` 백틱으로 열기)
  5. 상단 메뉴 — File·Edit·View 등

STEP 4. 한글화 — Korean Language Pack 설치

메뉴가 영어라 어색하니 한글로 바꿔봅시다. 첫 확장(Extension) 설치 경험이에요.

  1. 좌측 사이드바의 Extensions 아이콘 클릭 (네모 4개 모양, 또는 Ctrl + Shift + X)
  2. 검색창에 Korean Language Pack 입력
  3. Korean Language Pack for Visual Studio Code 항목(제작자: Microsoft) 찾아서 [Install] 클릭
  4. 설치 완료 후 Ctrl + Shift + P → Configure Display Language 입력 → 선택
  5. 목록에서 한국어 (ko) 선택
  6. 재시작 안내 팝업 → [Restart]
  7. 메뉴가 한국어로 바뀌면 성공!

확장(Extension)이 뭔가요? VS Code에 새 기능을 끼워 넣는 부품 같은 거예요. 마이크로소프트가 만든 한글팩, AI 회사가 만든 AI 확장, 다른 개발자들이 만든 편의 도구 등 수만 개가 있어요. 필요한 것만 골라서 끼우면 됩니다.

STEP 5. Claude Code 확장 설치 — AI 깨우기

이제 핵심 단계입니다. VS Code에 AI(Claude)를 붙여서 학습 메이트로 만들 거예요. 이 단계가 끝나면 그 다음부터는 AI한테 직접 물어보면서 진행할 수 있어요.

① Claude Code 확장 설치

  1. 좌측 사이드바의 확장 아이콘 클릭 (방금 한글화한 그 메뉴)
  2. 검색창에 Claude Code 입력
  3. 제작자가 Anthropic인 확장 찾아서 [설치] 클릭
  4. 설치되면 좌측 사이드바에 Claude 아이콘이 새로 생김

② Claude 로그인

  1. 좌측 사이드바의 새 Claude 아이콘 클릭
  2. 오른쪽에 Claude 패널이 열리면서 로그인 안내
  3. [Sign in] 또는 [로그인] 버튼 클릭 → 브라우저가 자동으로 열림
  4. Claude 계정으로 로그인 → 권한 동의 → VS Code로 돌아옴
  5. 패널에 채팅 입력창이 나타나면 준비 완료

이제 VS Code 안에 나만의 AI 학습 메이트가 생겼어요. 사이드바에서 Claude 아이콘 누르면 언제든 부를 수 있어요.

Claude 계정이 없다면? claude.com/pricing에서 가입하세요. Pro 구독을 권장합니다 (스터디 진행 시 사용량이 많을 수 있어요).

STEP 6. AI에게 첫 질문 — 추천 확장 물어보기

Claude 패널이 열렸으면 바로 실용적인 질문부터 시작합시다. AI한테 물어보면서 작업하는 감각을 익히는 게 핵심이에요.

복사용 프롬프트

VS Code 초보자에게 도움 되는 필수 확장 5개 정도 추천해줘.
각각 어떤 역할인지, 왜 추천하는지 짧게 알려줘.
한국어·비개발자 사용자 기준으로.

AI가 답해주는 걸 읽어보세요. 이게 "AI한테 물어보면서 학습하는 방식"의 첫 경험이에요. 마음에 드는 확장이 있으면 STEP 4와 같은 방법으로 설치해보세요 (Extensions 아이콘 → 이름 검색 → 설치).

참고 — 스터디 진행에 도움 되는 확장

AI가 답해준 것 외에 스터디에서 자주 쓰는 것들이에요. 필요할 때 하나씩 설치하면 됩니다.

  • Live Server — HTML 파일을 더블클릭 대신 브라우저로 즉시 미리보기 (저장하면 자동 새로고침)
  • Prettier — 코드 자동 정렬·포맷팅
  • Material Icon Theme — 파일 종류별로 아이콘 예쁘게

STEP 7. (선택) 다른 AI 확장도 같이 깔아보기

Claude만 쓰는 게 아니라, VS Code에는 여러 AI를 동시에 깔아서 쓸 수 있어요. 같은 질문을 여러 AI에게 물어보면서 답을 비교하면 더 빨리 배웁니다. AI 시대의 학습은 한 AI에 의존하지 않고 여러 AI를 동시에 활용하는 거예요.

AI한테 직접 물어보세요

VS Code에서 쓸 수 있는 AI 코딩 확장들을 알려줘.
Claude 말고 Gemini Code Assist, GitHub Copilot, Codex,
Cline, Continue 같은 것들 중 어떤 게 있고
각각 어떤 특징인지 비교해줘.

실제로 많이 쓰는 AI 확장

  • Gemini Code Assist (Google) — 무료로 시작 가능, 검색 기반 답변에 강함
  • GitHub Copilot (Microsoft) — 가장 오래된 AI 코딩 어시스턴트, 자동완성 강력
  • OpenAI Codex — ChatGPT 만든 회사가 직접 만든 코딩 도구
  • Cline — 오픈소스, 여러 AI 모델 골라서 쓰기 가능
  • Continue — 오픈소스, 로컬 모델도 연결 가능
  • Pencil Dev — 디자인 파일을 AI가 코드로 변환

처음부터 다 깔지 마세요. Claude 하나만으로도 충분합니다. 나중에 "Claude는 잘 못 풀던 걸 다른 AI는 어떻게 풀까?" 궁금할 때 한두 개 더 깔아보세요.

왜 이렇게 진행했을까요? (메타학습 설명)

이 페이지에서 진짜 배운 건 VS Code 설치 방법이 아니에요. "AI를 깨우고 나면 그 다음부터는 AI한테 물어보면 된다"는 작업 방식 자체입니다.

기존 학습 방식

모든 단계를 매뉴얼대로 외우기.
도구가 바뀌면 다시 외워야 함.

메타학습 방식

AI를 깨우는 단계만 잘 익히기.
그 다음부터는 AI한테 물어보면서 진행.

앞으로 어떤 새 도구를 만나도 흐름은 같아요. 도구 깔고 → AI 붙이고 → AI한테 물어보기. 이 패턴 하나만 익히면 평생 통합니다.

다음 단계

축하해요! VS Code + Claude 환경이 다 갖춰졌어요. 이제 본격 실습으로 들어갈 차례입니다.

→ 부록 E. 보너스 실습 — 나만의 미니 링크트리 만들기

터미널에서 claude 명령어로 실행하는 CLI 방식이 궁금하다면 Claude Code 설치 (터미널 방식) 페이지를 참고하세요. 스킬 만들기나 자동화에 쓸 때 필요해요.