[바이브코딩 (1)] 바이브코딩을 쉽게 해주는 VSCode 설치 및 사용법 - 네이버 프리미엄콘텐츠

지난 편에서 CMD 검은 창 켜고 바이브코딩에 첫 발을 내딛어 보았습니다. 하지만 솔직히 좀 불편한 감이 있으셨을 겁니다. 파일이 어디 생겼는지 모르겠고, 결과를 확인하려면 탐색기 열어서 찾아다녀야 하고, 뭔가 잘못되면 어디서부터 손대야 할지 막막하고. 코딩 에이전트가 열심히 뭔가를 만들고 있는데 텍스트만 줄줄 흘러가는 검은 창 보고 있자니 진짜 되고 있는 건지도 모르겠는 그 느낌. 이번 편에서는 VSCode로 그 불편함을 한 번에 해결해 보도록 하겠습니다. VSCode VSCode란? VSCode는 마이크로소프트가 만든 무료 코드 편집기입니다. "코드 편집기"라고 하면 뭔가 개발자 전용 툴 같아 보이지만, 기반 지식이 없는 바이브코딩 입문자 관점에서는 그냥 바이브코딩을 하는 "작업실"정도로 이해하면 되겠습니다. "문서" 작업을 편하게 해주는 "한글"이나 "워드"정도의 개념으로 이해해도 완전히 틀린 것은 아닙니다. 코딩 에이전트가 파일 만들고 수정하는 걸 눈으로 보면서 확인할 수 있는 공간이자 확장 기능이 아주 다양해서 바이브코딩 베이스캠프로 딱입니다. VSCode 설치 접속하면 운영체제 맞게 자동으로 다운로드 버튼이 뜨는데 그냥 클릭하면 됩니다. 설치 중에 옵션 화면이 나오는데, 딱 하나만 체크하면 됩니다. "PATH에 추가" 그리고 "'Code로 열기' 작업을 Windows 탐색기 파일의 상황에 맞는 메뉴에 추가" 두 번째 옵션은 나중에 폴더 우클릭하면 "VSCode로 열기"가 뜨게 해주는 건데 이거 없으면 나중에 진짜 불편하니 꼭 체크하세요. 나머지는 그냥 다음다음 눌러서 설치 완료. 그냥 기본 상태에서 okok 해도 큰 문제는 없습니다. VSCode 화면 파악하기 처음 켜면 뭔가 복잡해 보이는데, 바이브코딩에 실제로 쓰는 영역은 딱 크게 4곳입니다. 왼쪽 - 파일 탐색기 및 부가기능. 에이전트가 만든 파일들이 여기 다 보입니다. 클릭하면 바로 내용 확인 가능. CMD에서 파일 어디 생겼는지 찾아다니던 거 여기서 해결됩니다. 가운데 : 코드 창. 파일 내용이 열리는 공간입니다. 바이브코딩할 때는 거의 건드릴 일 없고 그냥 결과 확인용입니다. 가운데 아래 : 터미널 및 기타. CMD처럼 명령어를 입력할 수 있습니다. VSCode 벗어날 필요 없이 작업실 안에서 다 해결 가능. 오른쪽 : 채팅창. 명령을 내리는 공간으로 사용. 코딩 에이전트 익스텐션 설치 & 연결