VS Code에서 AI와 협업하는 코딩 환경 만들기
VS Code만 설치하면 끝일까
VS Code를 설치하면 AI와 협업하는 개발 환경의 절반은 준비된 셈이다.
하지만 VS Code만 설치한다고 바로 AI와 협업할 수 있는 것은 아니다.
AI와 코드를 주고받고, 수정하고, 프로젝트를 관리하려면 VS Code에 몇 가지 설정을 추가해야 한다.
이번 글에서는 VS Code에서 AI와 협업하는 코딩 환경을 만드는 방법을 정리해보겠다.
AI 협업에서 VS Code의 역할
AI와 협업할 때 VS Code는 단순한 코드 편집기가 아니다. 프로젝트 관리 도구다.
AI가 코드를 만들어 주면, 우리는 VS Code에서 이런 작업을 한다.
- 파일을 열고
- 코드를 붙여넣고
- 수정하고
- 실행하고
- GitHub에 저장한다
VS Code는 AI와 사람 사이에서 코드를 관리하는 작업 공간이다.
메모장이나 웹 브라우저에서도 코드를 복사할 수는 있다. 하지만 파일이 10개, 20개로 늘어나는 순간 관리가 불가능해진다. VS Code가 있어야 프로젝트 전체를 한눈에 보면서 작업할 수 있다.
AI 협업에 필요한 확장 프로그램
VS Code의 가장 큰 장점은 확장 프로그램이다. 확장 프로그램만 설치하면 VS Code는 완전히 다른 프로그램이 된다.
AI와 협업할 때 유용한 확장 프로그램을 정리했다.
| 확장 프로그램 | 용도 | 필수 여부 |
|---|---|---|
| Korean Language Pack | VS Code 한글화 | 필수 (1부에서 설치 완료) |
| Prettier | 코드 자동 정리 (들여쓰기, 줄바꿈) | 필수 |
| Code Runner | VS Code 안에서 코드 바로 실행 | 추천 |
| GitLens | Git 변경 이력 한눈에 보기 | 추천 |
| GitHub Copilot | AI 코드 자동완성 | 선택 (유료) |
설치 방법은 1부에서 Korean Language Pack을 설치했던 것과 동일하다.
왼쪽 사이드바 확장 프로그램 아이콘 → 검색 → Install 클릭.
대박이 TIP 확장 프로그램이 너무 많으면 VS Code가 느려진다. 처음에는 위 목록 정도만 설치하고, 필요할 때 하나씩 추가하는 게 좋다. AI한테 “내 프로젝트에 필요한 VS Code 확장 프로그램 추천해줘”라고 물어보면 프로젝트에 맞는 걸 골라준다.
Prettier — 코드 자동 정리
Prettier를 설치하면 코드를 저장할 때마다 자동으로 정리해준다. 들여쓰기가 엉망이어도 저장만 누르면 깔끔하게 정렬된다.
설치 후 한 가지 설정이 필요하다.
VS Code 설정(Ctrl + ,) → 검색창에 “Format On Save” 입력 → 체크 활성화
이걸 켜두면 파일을 저장할 때마다 코드가 자동으로 정리된다. AI한테 받은 코드를 붙여넣고 저장만 누르면 깔끔하게 정렬되니까 편하다.
Code Runner — 코드 바로 실행
Code Runner를 설치하면 VS Code 안에서 바로 코드를 실행할 수 있다.
코드를 작성하고 오른쪽 위의 재생 버튼을 클릭하면 결과가 바로 나온다.
AI와 코드 주고받는 방법
여기가 핵심이다. AI와 실제로 코드를 주고받는 과정을 설명한다.
AI에게 “로그인 페이지 만들어줘”라고 요청하면, AI는 코드를 만들어서 보내준다. 이 코드를 VS Code에 넣는 과정은 이렇다.
1단계 — AI에게 코드를 요청한다
2단계 — AI가 보내준 코드를 복사한다
3단계 — VS Code에서 해당 파일을 연다. 파일이 없으면 새로 만든다
4단계 — 코드를 붙여넣고 저장한다 (Ctrl + S)
5단계 — 실행해서 결과를 확인한다
이 과정이 반복되면서 AI와 협업하는 개발이 이루어진다.
주의사항 AI가 코드를 줄 때 “이 코드를 index.html에 넣으세요”라고 말해주는 경우가 많다. 이때 파일 이름을 정확히 맞춰야 한다. index.html과 Index.html은 다른 파일이다. 처음에 이걸 몰라서 “코드 넣었는데 왜 안 되지?” 하고 한참 헤맨 적이 있다.
프로젝트 폴더 구조 이해하기
AI와 협업할 때 가장 중요한 것은 파일 구조를 이해하는 것이다.
프로젝트가 커지면 파일이 수십 개가 된다. 어떤 파일이 어디에 있는지 모르면 AI가 “style.css를 수정하세요”라고 해도 어디에 있는지 찾을 수가 없다.
간단한 웹 프로젝트의 기본 구조는 이렇다.
my-project/
├── index.html (메인 페이지)
├── style.css (디자인)
├── script.js (기능)
└── images/ (이미지 폴더)
VS Code에서 폴더를 열면 왼쪽에 이 구조가 트리 형태로 표시된다. 파일을 클릭하면 바로 열리고, 수정할 수 있다.
대박이 TIP AI한테 “이 프로젝트의 파일 구조를 설명해줘”라고 물어보면 각 파일이 무슨 역할을 하는지 알려준다. 파일이 많아서 헷갈릴 때 이 질문 하나면 정리가 된다.
VS Code 터미널 사용하기
VS Code에는 터미널이 내장되어 있다.
터미널이 뭔지 모르는 사람을 위해 설명하면 — 컴퓨터에 글자로 명령어를 입력하는 프로그램이다. 마우스로 클릭하는 대신, 글자를 타이핑해서 컴퓨터를 조작하는 방식이라고 생각하면 된다.
VS Code에서 터미널을 여는 방법은 간단하다.
상단 메뉴 터미널 → 새 터미널 클릭. 또는 단축키 Ctrl + ` (백틱, 숫자 1 왼쪽 키)
터미널에서 할 수 있는 것들:
- git clone — GitHub에서 프로젝트를 다운로드
- npm install — 프로젝트에 필요한 패키지 설치
- python 파일이름.py — Python 코드 실행
처음에는 터미널이 어렵게 느껴질 수 있다. 하지만 AI한테 “이 명령어가 뭐하는 거야?”라고 물어보면 다 설명해준다. 외울 필요 없다.
실제 AI 협업 작업 흐름
지금까지 설명한 것들을 하나로 합치면, AI와 협업하는 실제 작업 흐름은 이렇다.
- AI에게 코드를 요청한다
- AI가 코드를 만들어준다
- VS Code에서 파일을 열고 코드를 붙여넣는다
- 저장하고 실행한다
- 오류가 발생한다 (거의 무조건 발생한다)
- 오류 메시지를 복사해서 AI에게 보낸다
- AI가 수정된 코드를 보내준다
- 수정 코드를 적용하고 다시 실행한다
이게 AI 협업 개발 루프다.
| 단계 | 내가 하는 것 | AI가 하는 것 |
|---|---|---|
| 요청 | “로그인 페이지 만들어줘” | 코드 생성 |
| 적용 | VS Code에 코드 붙여넣기 | – |
| 실행 | 저장 + 실행 | – |
| 오류 | 오류 메시지 복사해서 전달 | 원인 분석 + 수정 코드 |
| 수정 | 수정 코드 적용 | – |
중요한 건 5번 — 오류는 거의 무조건 발생한다는 것이다. 처음에는 오류가 나면 “내가 뭘 잘못했나?” 하고 당황했다. 하지만 오류는 개발 과정의 일부다. 오류 메시지를 AI한테 보내면 AI가 고쳐준다. 이 루프에 익숙해지면 AI와 협업하는 속도가 빨라진다.
대박이 TIP 오류가 발생하면 오류 메시지를 전부 복사해서 AI한테 보내자. “안 돼요”라고만 말하면 AI도 뭐가 문제인지 모른다. 오류 메시지 전체를 붙여넣으면 AI가 정확히 어디가 문제인지 찾아준다.
다음 단계 — AI를 VS Code 안으로
여기까지 하면 VS Code에서 AI와 협업하는 기본 환경이 완성된다.
지금까지는 AI 채팅창에서 코드를 받아서 VS Code에 붙여넣는 방식이었다. 복사 → 붙여넣기를 반복하는 방식이다.
그런데 AI를 VS Code 안에서 직접 사용할 수 있는 방법이 있다. 복사 붙여넣기 없이, VS Code 안에서 AI와 대화하면서 코드를 바로 수정할 수 있다.
다음 글에서는 Claude Code와 Codex를 VS Code에 연결해서 사용하는 방법을 정리할 예정이다.
다음 글 VS Code에서 Claude Code / Codex 연결하는 방법