코딩을 시작하기 전에 막힌 것

AI와 협업해서 개발을 시작하려고 했을 때, 가장 먼저 막힌 것은 코드가 아니었다.

개발 환경이었다.

코딩을 잘하는 개발자라면 이미 환경이 준비되어 있겠지만, 나처럼 AI와 협업하면서 개발을 시작하는 사람에게는 어떤 프로그램을 설치해야 하는지부터가 고민이었다.

처음에는 메모장으로 코드를 열어봤다. AI가 만들어준 코드를 복사해서 붙여넣고 저장했는데 — 아무것도 안 됐다.

코드가 전부 한 줄로 붙어 보이고, 어디가 어딘지 구분이 안 됐다. 파일 하나 수정하는 데 30분씩 걸렸다.

그래서 가장 먼저 선택한 것이 바로 VS Code였다.
VS Code는 코딩 환경을 만들 때 가장 많이 사용하는 프로그램이다.

VS Code란 무엇인가 — 코드 편집기의 기본

VS Code는 Microsoft에서 만든 무료 코드 편집기다.

“코드 편집기”라고 하면 개발자 전용 프로그램 같지만, 실제로는 파일을 열고 수정하는 프로그램이다. 메모장의 업그레이드 버전이라고 생각하면 쉽다.

다만 메모장과 다른 점이 있다.

기능 메모장 VS Code
코드 색상 구분 없음 (전부 검은 글씨) 자동으로 색상 구분
자동 들여쓰기 없음 자동 정렬
파일/폴더 관리 하나씩 열어야 함 프로젝트 폴더 전체를 한눈에
검색/바꾸기 기본 수준 프로젝트 전체에서 검색 가능
확장 프로그램 없음 AI 연동, 한글화, 테마 등 수천 개
터미널 내장 없음 프로그램 안에서 명령어 실행 가능
가격 무료 무료

핵심은 이거다 — 둘 다 무료인데, VS Code는 할 수 있는 게 훨씬 많다.

대박이 TIP “VS Code랑 Visual Studio는 다른 프로그램이야?” 라고 AI한테 물어본 적이 있다. 결론: 완전히 다르다. Visual Studio는 수십 GB짜리 전문 개발 도구고, VS Code는 가볍고 빠른 편집기다. 설치할 때 “VS Code”를 검색해야 한다. “Visual Studio”를 설치하면 용량만 잡아먹고 쓸 일이 없다.

코딩 안 하는데 왜 필요한가

이게 가장 많이 하는 질문이다.

“나는 코드를 직접 안 쓰는데, 왜 VS Code가 필요해?”

AI와 협업해서 개발을 하다 보면, 직접 코드를 작성하지 않더라도 이런 상황이 반드시 생긴다.

  • AI가 만든 코드 확인하기
    — AI가 코드를 줬는데, 어디에 넣어야 하는지 봐야 한다
  • 코드 일부 수정하기
    — “이 부분 색상 바꿔줘” 하고 AI한테 시켰는데, 파일에서 해당 부분을 찾아서 바꿔 넣어야 한다
  • 파일 구조 관리
    — 프로젝트가 커지면 파일이 수십 개가 된다. 어떤 파일이 어디에 있는지 한눈에 봐야 한다
  • 에러 찾기
    — 뭔가 안 될 때, AI한테 “이 파일 코드 전체 보내줘”라고 하려면 해당 파일을 열 수 있어야 한다
  • GitHub 연동
    — 코드를 백업하거나 서버에 올릴 때, VS Code에서 바로 Git을 사용할 수 있다

실제로 나는 코드를 직접 작성하는 일이 거의 없다. 하지만 VS Code는 매일 쓴다.

AI가 만든 코드를 복사해서 붙여넣고, 파일을 관리하고, 결과를 확인하는 — 이 모든 작업이 VS Code에서 이루어진다.

대박이 TIP AI한테 코드를 받으면 “이 코드를 어떤 파일에 넣어야 해?”라고 꼭 물어보자. AI가 파일 경로까지 알려준다. 그 파일을 VS Code에서 열어서 붙여넣기만 하면 된다. VS Code 없이 이 과정을 하려면 폴더를 뒤지고 메모장으로 열고 — 시간이 3배는 걸린다.

VS Code 설치하기

이제 VS Code 설치 방법을 알아보자.
설치 과정은 생각보다 간단하고 5분이면 끝난다.

1. VS Code 홈페이지 접속

검색창에 **”VS Code”**를 검색하거나, 아래 주소로 접속한다.

https://code.visualstudio.com

2. 다운로드 버튼 클릭

홈페이지에 접속하면 운영체제에 맞는 다운로드 버튼이 자동으로 표시된다.

  • Windows를 쓰고 있으면 “Download for Windows” 버튼이 보인다
  • Mac을 쓰고 있으면 “Download for macOS” 버튼이 보인다

(한글로 번역되어 있는 경우도 있다.)파란색 큰 버튼을 클릭하면 된다.

 

3. 설치 파일 실행

다운로드된 파일을 실행하면 설치 화면이 나온다.

여기서 중요한 체크 항목이 있다:

  • “PATH에 추가” — 반드시 체크. 이걸 안 하면 나중에 터미널에서 code 명령어를 못 쓴다
  • “Code로 열기 작업을 추가” — 체크하면 파일/폴더 우클릭으로 VS Code를 바로 열 수 있다
  • 나머지는 기본값 그대로 “다음” 클릭

주의사항 PATH에 추가를 체크 안 하고 설치하면, 나중에 터미널에서 VS Code를 여는 명령어(code .)가 작동하지 않는다. 처음에 이걸 모르고 넘겼다가 재설치한 적이 있다. 설치할 때 체크 한 번이면 되니까 꼭 확인하자.

4. 설치 완료

“마침”을 클릭하면 VS Code가 실행된다.

설치 후 기본 설정 3가지

VS Code를 처음 열면 영어로 되어 있다. 당황하지 않아도 된다. 기본 설정 3가지만 하면 바로 사용할 수 있다.

1. 한글 설정

VS Code 왼쪽 사이드바에서 확장 프로그램 아이콘(네모 4개 모양)을 클릭한다.

검색창에 **”Korean”**을 입력하면 **”Korean Language Pack”**이 나온다.

Install 버튼을 클릭하고, VS Code를 재시작하면 한글로 바뀐다.

2. 테마 설정 (선택)

기본 테마가 불편하면 바꿀 수 있다. 왼쪽 아래 톱니바퀴 → 색 테마에서 변경하면 된다. 어두운 테마가 눈이 덜 피로하다.  원래 검정 화면이 나온다. 나는 테마를 변경한 상태이다

3. 프로젝트 폴더 열기

VS Code의 진짜 힘은 폴더 단위로 열 때 나온다.

파일 → 폴더 열기에서 작업할 프로젝트 폴더를 선택하면, 왼쪽에 파일 목록이 트리 구조로 표시된다.

이제 파일을 하나하나 찾아서 열 필요 없이, 왼쪽 목록에서 클릭만 하면 된다.

대박이 TIP AI한테 “이 프로젝트 폴더 구조 설명해줘”라고 하면 각 파일이 뭐하는 건지 알려준다. VS Code에서 폴더를 열고 AI한테 물어보는 습관을 들이면, 프로젝트가 아무리 복잡해도 길을 잃지 않는다.

AI 협업 환경 준비 완료

여기까지 했으면 VS Code 설치는 끝이다.

이제 AI와 협업하는 개발 환경을 만들 기본 준비가 된 것이다.

하지만 VS Code만 설치한다고 바로 AI와 협업할 수 있는 건 아니다. AI와 코드를 주고받고, 실시간으로 협업하려면 추가 설정이 필요하다.

VS Code 설치는 AI와 협업하는 개발 환경의 첫 단계다.

다음 글에서는 VS Code에서 AI와 협업하는 코딩 환경을 만드는 방법을 정리할 예정이다.

다음 글 VS Code에서 AI와 협업하는 코딩 환경 만들기