VS Code 확장 프로그램 추천 15선, AI 시대 필수템

요즘 "바이브 코딩"이라는 말이 유행입니다. 코드를 직접 짜기보다 AI에게 시키고 사람은 흐름만 잡는 방식인데, 그 무대가 되는 도구가 바로 VS Code(마이크로소프트가 만든 무료 코드 편집기)입니다.

저도 약 10년간 여러 편집기를 거쳤지만, 지금은 AI 확장들을 얹은 VS Code가 가장 손에 붙습니다. 이 글은 코드를 한 줄도 안 써본 분도 따라올 수 있게 썼습니다.

설치 버튼 한 번만 누르면 되니 너무 겁먹지 않으셔도 됩니다.

VS Code 확장 프로그램이 뭐길래

VS Code 확장 프로그램은 편집기에 새 기능을 끼워 넣는 작은 플러그인입니다. 스마트폰에 앱을 깔아 기능을 늘리는 것과 똑같다고 보시면 됩니다.

기본 VS Code는 메모장보다 약간 똑똑한 수준입니다. 그런데 확장을 몇 개 깔면 AI가 코드를 대신 써주고, 오타를 잡아주고, 깃허브와 연결되며 완전히 다른 도구가 됩니다.

설치 방법은 간단합니다. VS Code 왼쪽 사이드바의 네모 블록 4개 모양 아이콘(Extensions)을 누르고, 이름을 검색해서 Install 버튼을 누르면 끝입니다.

[VS Code 화면 구조]

┌─────────────────────────────────────┐
│ 파일  편집  보기  ...               │
├──┬──────────────────────────────────┤
│📁│                                  │
│🔍│         코드 작성 영역            │
│🔀│                                  │
│🐞│                                  │
│⬛│ ← 이 아이콘이 확장 프로그램 메뉴  │
│⚙ │                                  │
└──┴──────────────────────────────────┘

이 글의 15개 확장은 크게 네 묶음으로 나눕니다. AI 코딩 도우미, 편의·생산성, 협업·버전관리, 한글화·디자인입니다.

한눈에 보는 추천 확장 15선

먼저 전체 목록을 표로 정리합니다. 마음에 드는 것만 골라 설치해도 충분합니다.

분류	확장 이름	한 줄 요약
AI	GitHub Copilot	마이크로소프트의 AI 코드 자동완성
AI	Cline	채팅으로 시켜서 파일까지 직접 수정
AI	Continue	무료 AI 어시스턴트, 모델 선택 가능
AI	Codeium	무료 자동완성, Copilot 대안
편의	Prettier	코드 자동 정렬·들여쓰기
편의	ESLint	자바스크립트 오타·실수 감지
편의	Path Intellisense	파일 경로 자동완성
편의	Auto Rename Tag	HTML 태그 짝꿍 자동 변경
협업	GitLens	코드 한 줄마다 작성자·날짜 표시
협업	GitHub Pull Requests	깃허브 리뷰를 편집기에서 처리
협업	Live Share	실시간 화면 공유 페어 작업
한글	Korean Language Pack	메뉴 한글화
한글	Code Spell Checker	영어 오타 잡기
디자인	Material Icon Theme	파일 종류별 예쁜 아이콘
디자인	Indent Rainbow	들여쓰기를 무지개색으로

💡 글 작성 시점 기준 모두 무료입니다. 단, GitHub Copilot은 월 약 $10 유료(학생·오픈소스 메인테이너는 무료) 정책입니다.

AI 코딩 도우미 4종 — 진짜 필수템

AI 시대의 핵심은 이 카테고리입니다. 코드를 대신 써주는 비서라고 보시면 됩니다.

GitHub Copilot은 가장 유명한 유료 AI 코드 비서입니다. 주석으로 "엑셀 파일 읽어서 합계 계산해줘"라고 한국어로 적으면 그 아래에 회색 글씨로 코드를 제안합니다. Tab 키를 누르면 그대로 들어갑니다.

예를 들어 엑셀로 매출 정리하던 분이 자동화 스크립트를 만들고 싶을 때, "csv 파일에서 1월 매출만 골라줘"라고 한 줄만 적으면 파이썬 코드가 따라 나옵니다.

Cline(예전 이름 Claude Dev)은 한 단계 더 나아간 도구입니다. 채팅창에 "이 폴더에서 로그인 페이지 만들어줘"라고 시키면 AI가 직접 파일을 만들고 수정합니다. 단, Anthropic API 키(클로드 모델을 외부에서 쓰기 위한 출입증 같은 것)를 별도로 발급받아 입력해야 하고, 사용량만큼 과금됩니다.

Continue는 무료 오픈소스 AI 어시스턴트입니다. OpenAI·Anthropic 같은 유료 모델도 붙일 수 있고, 본인 컴퓨터에 깐 무료 모델(Ollama 등)도 쓸 수 있어 유연합니다.

Codeium은 Copilot의 무료 대안으로 꼽힙니다. 공식 소개에 따르면 개인 사용자는 무제한 무료입니다. Copilot 비용이 부담스러우면 첫 후보로 깔아볼 만합니다.

항목	Copilot	Cline	Continue	Codeium
가격	월 $10	사용량 과금	무료(API 별도)	개인 무료
자동완성	⭕	△	⭕	⭕
파일 직접 수정	△	⭕⭕	⭕	△
비개발자 추천도	★★★	★★	★★	★★★

처음이라면 Codeium 또는 Copilot 둘 중 하나만 깔아도 충분합니다. 한 화면에 자동완성이 두 개 뜨면 오히려 정신없거든요.

코드를 깔끔하게 만들어주는 편의 확장

이 묶음은 AI가 만들어준 코드를 사람이 보기 좋게 정리해주는 도구들입니다.

Prettier는 저장 한 번에 들여쓰기·줄바꿈·따옴표를 자동으로 통일해줍니다. 워드에서 "글머리 기호 자동 정렬" 같은 기능이라고 보시면 됩니다.

ESLint는 자바스크립트 코드의 오타나 실수를 빨간 줄로 표시합니다. AI가 만든 코드에 어이없는 오타가 섞여있을 때 즉시 알아차릴 수 있습니다.

Path Intellisense는 다른 파일 이름을 입력할 때 자동완성을 띄워줍니다. 파일이 수십 개로 늘면 진가를 발휘합니다.

Auto Rename Tag는 HTML을 다룰 때 유용합니다. <div>를 <section>으로 바꾸면 짝꿍인 닫는 태그도 자동으로 따라 바뀝니다. 작은 기능이지만 한 번 익숙해지면 없으면 답답합니다.

[Prettier 동작 예시]

저장 전:                저장 후 (자동 정렬):
function a(){           function a() {
return 1+2 }              return 1 + 2;
                        }

깃허브·협업을 편하게 — 버전관리 확장 3종

코드를 만들다 보면 "어제 잘 되던 게 왜 안 되지?" 같은 일이 생깁니다. 그래서 변경 이력을 저장하는 도구(Git)와 그 결과물을 클라우드에 올리는 서비스(GitHub)를 씁니다.

GitLens는 코드 한 줄을 클릭하면 "이 줄은 3일 전 누가 어떤 메시지로 바꿨는지"가 회색 글씨로 떠오릅니다. 혼자 작업할 때도 "내가 왜 이렇게 짰지?" 하는 순간에 큰 도움이 됩니다.

GitHub Pull Requests는 깃허브의 코드 리뷰 기능을 VS Code 안에서 처리합니다. 브라우저를 왔다갔다 안 해도 됩니다.

Live Share는 화상회의 화면 공유의 코드 편집기 버전입니다. 같은 코드를 두 사람이 동시에 커서를 움직이며 고칠 수 있습니다. 모르는 부분을 친구나 멘토에게 물어볼 때 편합니다.

💡 협업 확장은 깃허브 계정이 있어야 제대로 동작합니다. github.com에서 무료 계정을 먼저 만들어두세요.

한글화·디자인 확장 4종 — 작지만 큰 차이

마지막은 눈이 편해지는 확장들입니다. 사소해 보이지만 매일 쓰는 도구라 체감이 큽니다.

Korean Language Pack은 VS Code 메뉴를 한글로 바꿉니다. "File"이 "파일"이 됩니다. 영문 메뉴가 익숙하지 않다면 첫 확장으로 추천합니다.

Code Spell Checker는 변수 이름이나 주석의 영어 오타를 잡아줍니다. recieve라고 적으면 빨간 밑줄을 그어 receive라고 알려줍니다.

Material Icon Theme은 파일 종류별로 예쁜 아이콘을 붙여줍니다. 폴더 안에서 어떤 파일이 어디 있는지 한눈에 보입니다.

Indent Rainbow는 들여쓰기 깊이에 따라 배경색을 무지개로 칠합니다. AI가 만든 길고 복잡한 코드를 읽을 때 구조가 훨씬 빨리 들어옵니다.

비개발자를 위한 추천 설치 순서

15개를 한 번에 깔지 마세요. 다음 순서로 단계별 설치를 권합니다.

[1단계: 기본기 - 5분]
  └─ Korean Language Pack
  └─ Material Icon Theme
  └─ Prettier
       ↓
[2단계: AI 비서 - 10분]
  └─ Codeium (또는 Copilot 1개만)
       ↓
[3단계: 필요할 때 추가 - 5분]
  └─ GitLens, ESLint, Code Spell Checker ...

체크리스트로 정리하면 이렇습니다.

• [ ] VS Code 설치 (code.visualstudio.com)
• [ ] 왼쪽 사이드바에서 Extensions 아이콘 클릭
• [ ] 1단계 3개 검색 → Install
• [ ] VS Code 재시작 (한글 메뉴 확인)
• [ ] AI 확장 1개 설치 후 로그인
• [ ] 빈 파일 만들어서 자동완성 테스트

저도 처음엔 추천 글 보고 한 번에 20개 넘게 깔았다가 충돌나서 다 지우고 다시 깐 적이 있습니다. 필요할 때 하나씩 추가가 정답입니다.

자주 막히는 부분

확장이 안 보일 때 — 이름이 비슷한 가짜가 섞여있을 수 있습니다. 다운로드 수가 가장 많고 파란색 체크마크(검증된 게시자)가 붙은 걸 고르세요.

AI 자동완성이 안 뜰 때 — 대부분 로그인이 안 된 경우입니다. VS Code 오른쪽 아래 상태바에 해당 확장 아이콘이 있는지 확인하고, 클릭해서 로그인 절차를 다시 밟으세요.

Prettier가 자동으로 동작하지 않을 때 — 설정에서 "Format On Save"를 켜야 합니다. Ctrl+,(맥은 Cmd+,)을 눌러 설정을 열고 "format on save"로 검색해서 체크하면 됩니다.

컴퓨터가 갑자기 느려졌을 때 — 확장이 너무 많으면 메모리를 잡아먹습니다. Extensions 메뉴에서 안 쓰는 건 Disable(비활성화)로 두세요. 삭제까지 안 해도 됩니다.

마무리

VS Code는 깡통일 때보다 확장 5~10개 얹었을 때 진짜 능력을 보여줍니다. 특히 AI 비서 한 개만 잘 붙여도 코드 작성 경험이 완전히 달라집니다.

오늘 추천한 15개 중 처음 3~4개만이라도 깔아보세요. 한글 메뉴와 AI 자동완성이 켜진 화면을 보면 "이 정도면 나도 뭔가 만들어볼 수 있겠다"는 생각이 들 겁니다.

다음 단계로는 ChatGPT나 Claude 채팅창 대신 VS Code 안에서 AI에게 시키는 워크플로우에 익숙해지는 걸 추천합니다. 그쪽 가이드는 다른 글에서 이어가겠습니다.