바이브코딩 2편: VS Code 터미널과 Codex 확장, 여기서부터 실습이 시작된다 ::REFUGE HUB

VS Code 설치와 첫 세팅이 끝나면, 초보자는 오히려 그다음에서 멈추는 경우가 많습니다. 화면은 열렸는데 검은색 터미널 창은 낯설고, AI 확장은 뭘 어디까지 맡겨야 하는지 감이 안 잡히기 때문입니다. 실제로 바이브코딩이 본격적으로 시작되는 지점도 바로 여기입니다.

설치까지는 준비 단계였다면, 이제부터는 터미널로 작업을 실행하고, Codex로 파일을 읽고 고치고 설명받는 흐름을 익혀야 합니다. 이 둘을 이해하면 “AI가 대신 코딩해준다”는 막연한 느낌에서 벗어나, 내가 어떤 작업을 어떻게 맡기고 어디서 확인해야 하는지 감이 잡히기 시작합니다.

이번 글은 VS Code 기준으로 터미널의 역할을 먼저 정리하고, 그다음 Codex 확장 프로그램을 초보자 관점에서 어떻게 붙여서 써야 하는지 설명합니다. 마지막에는 이 흐름을 바탕으로 실제 블로그 연재를 어떻게 이어가면 좋은지도 함께 정리해보겠습니다.

왜 설치 다음에 터미널과 Codex가 중요한가

설치가 끝났다고 해서 바로 실습이 굴러가지는 않습니다. 실제 작업은 대부분 “폴더를 열고, 명령을 실행하고, 파일을 수정하고, 결과를 확인하는 흐름”으로 움직입니다. 이때 명령을 실행하는 곳이 터미널이고, 그 과정을 도와주는 AI 도구가 Codex입니다.

예를 들어 AI가 “이 폴더에서 새 파일을 만들고 실행해보세요”, “패키지를 설치하세요”, “수정한 뒤 다시 확인해보세요”라고 안내했는데, 사용자가 현재 어느 폴더에 있는지 모르거나 터미널 메시지를 읽지 못하면 금방 막히게 됩니다. 반대로 터미널이 낯설지 않으면 AI가 하는 말의 절반 이상은 훨씬 또렷하게 들립니다.

터미널은 현재 폴더에서 작업을 실행하는 창입니다.
Codex는 파일과 코드 맥락을 읽고, 수정 제안을 하거나 작업을 대신 도와주는 도구입니다.
둘을 함께 써야 실습이 실제로 앞으로 나갑니다.

바이브코딩의 초반 핵심은 “AI에게 다 맡긴다”가 아니라, 터미널과 AI가 각각 무슨 역할을 하는지 구분하는 것에 가깝습니다.

VS Code 터미널 이해하기

VS Code 안의 터미널은 따로 외부 프로그램을 열지 않아도 바로 명령을 실행할 수 있는 창입니다. 쉽게 말해, 지금 열어둔 폴더를 기준으로 작업을 지시하는 공간이라고 생각하면 됩니다.

초보자는 여기서 용어부터 막히기 쉽습니다. 그래서 최소한 아래 정도만 먼저 구분해두면 훨씬 편합니다.

용어	쉽게 말하면	왜 중요한가
터미널	명령을 입력하는 창	설치, 실행, 파일 작업을 여기서 시작하는 경우가 많습니다.
셸	명령을 해석해주는 프로그램	Windows에서는 보통 PowerShell이나 Command Prompt, WSL 등을 보게 됩니다.
워크스페이스	지금 VS Code에서 열어둔 폴더	터미널이 어디서 시작되는지 이해하는 기준이 됩니다.
프롬프트	현재 위치를 보여주는 줄	내가 어떤 폴더에서 명령을 치고 있는지 확인할 수 있습니다.

처음에는 단축키도 너무 많이 외울 필요가 없습니다. 아래 정도면 충분합니다.

Ctrl + ` : 터미널 열기/닫기
Ctrl + Shift + ` : 새 터미널 만들기
Ctrl + Shift + P : 명령 팔레트 열기

Windows 사용자라면 초반에는 PowerShell로 시작해도 충분합니다. Git Bash나 WSL 같은 다른 셸은 나중에 필요해질 때 바꿔도 늦지 않습니다. 중요한 건 멋진 도구를 고르는 것이 아니라, 터미널이 현재 어느 폴더에서 열렸는지를 읽을 수 있는 상태가 되는 것입니다.

터미널을 잘 다룬다는 건 어려운 명령을 많이 안다는 뜻이 아니라, 현재 위치를 확인하고 필요한 명령을 차분하게 실행할 수 있다는 뜻에 더 가깝습니다.

초보자가 먼저 익힐 터미널 사용법

터미널 전체를 배우려 하면 금방 부담스럽습니다. 실습 초반에는 아래 다섯 가지만 익혀도 충분합니다. 이 정도만 알아도 폴더를 만들고, 이동하고, VS Code로 여는 기본 흐름은 스스로 처리할 수 있습니다.

pwd : 지금 내가 어디에 있는지 확인
dir : 현재 폴더 안의 파일과 폴더 보기
cd 폴더명 : 원하는 폴더로 이동
mkdir 폴더명 : 새 폴더 만들기
code . : 현재 폴더를 VS Code에서 열기

예를 들어 실습용 폴더를 하나 만드는 흐름은 이렇게 단순하게 시작할 수 있습니다.

mkdir vibe-lab
cd vibe-lab
mkdir 01-profile-page
cd 01-profile-page
code .

이 명령을 한 번 직접 쳐보면, “폴더를 만든다 → 그 폴더로 이동한다 → 그 위치를 VS Code로 연다”는 흐름이 손에 들어옵니다. 나중에 AI가 “현재 작업 폴더에서 실행하세요”라고 말할 때도 훨씬 덜 막히게 됩니다.

터미널 오류를 만났을 때도 순서를 정해놓으면 덜 당황합니다. 초보자는 보통 코드가 틀렸다고 먼저 생각하지만, 실제로는 아래 셋 중 하나인 경우가 많습니다.

내가 다른 폴더에서 명령을 치고 있다.
명령 철자가 틀렸다.
그 명령에 필요한 도구가 아직 설치되지 않았다.

터미널에서 막히면 먼저 “내가 지금 어디에 있지?”부터 확인해보는 습관이 좋습니다. 초반 문제는 의외로 여기서 많이 풀립니다.

Codex 확장 프로그램 설치와 첫 사용 흐름

터미널이 “작업을 실행하는 손”이라면, Codex는 “작업을 같이 정리하고 밀어주는 조수”에 가깝습니다. 다만 초보자 글에서는 이 부분을 과하게 신비롭게 설명할 필요는 없습니다. 중요한 건 무엇을 맡기고, 무엇은 내가 직접 확인해야 하는지를 분리해서 설명하는 것입니다.

VS Code에서 확장 프로그램 화면을 엽니다.
Codex를 검색해 설치합니다.
사이드바에서 Codex 패널을 열고 로그인합니다.
실습용 폴더를 연 상태에서 아주 작은 요청부터 시작합니다.

처음 요청은 “이 프로젝트 구조를 설명해줘”, “이 파일이 무슨 역할인지 먼저 요약해줘”처럼 읽기 중심으로 시작하는 편이 좋습니다. 설치하자마자 “전체 프로젝트를 만들어줘”로 들어가면 무엇이 바뀌는지 추적하기 어려워집니다.

초보자는 세 가지 사용 방식만 먼저 이해하면 됩니다

Chat : 아직 수정하지 말고 설명, 계획, 구조 파악을 먼저 할 때
Agent : 현재 작업 폴더 안에서 파일을 읽고, 수정하고, 필요한 명령을 실행하게 할 때
Agent (Full Access) : 권한이 넓어지는 방식이라 초반에는 신중하게 접근하는 편이 좋을 때

또 하나 중요한 점이 있습니다. Codex는 무턱대고 긴 프롬프트를 써야만 잘 되는 도구가 아닙니다. 열린 파일, 선택한 코드, @파일명 참조를 함께 주면 맥락 전달이 훨씬 수월해집니다. 초보자에게는 이 방식이 특히 좋습니다. 무조건 설명을 길게 쓰기보다, 어떤 파일을 기준으로 이야기하는지 분명히 하는 것이 더 중요하기 때문입니다.

처음에는 이 정도 명령만 알아도 충분합니다

/status : 현재 대화 상태를 확인할 때
/local : 지금 열어둔 워크스페이스 기준으로 작업하게 할 때
/review : 바뀐 내용을 점검할 때
/cloud : 긴 작업을 나중에 넘길 때 배우면 되는 기능

여기서 터미널과 Codex가 다시 연결됩니다. IDE 확장은 별도 세계처럼 보이지만, 실제로는 터미널 기반 흐름과 완전히 분리되어 있지 않습니다. 그래서 실습 글에서도 “터미널 따로, AI 따로”가 아니라 둘을 같은 작업 흐름 안에서 소개하는 편이 훨씬 자연스럽습니다.

Windows 사용자라면 이 부분은 꼭 주의 문구를 넣는 편이 좋습니다. Codex의 Windows 관련 안내는 바뀔 수 있지만, 현재 공식 문서 기준으로는 Windows 지원이 아직 실험적이고, agent 방식은 WSL을 함께 쓰는 흐름이 더 안정적입니다.

터미널과 Codex를 같이 쓰는 첫 실습 예시

입문자용 첫 실습은 복잡한 프레임워크보다, 결과가 바로 눈에 보이는 작은 작업이 좋습니다. HTML/CSS 두 파일 정도로 끝나는 주제가 특히 잘 맞습니다. 그래야 터미널, VS Code, Codex가 어떻게 연결되는지 한 번에 이해하기 쉽습니다.

1) 실습 폴더 만들기

mkdir vibe-lab
cd vibe-lab
mkdir 01-profile-page
cd 01-profile-page
code .

이제 빈 폴더가 VS Code에서 열렸다면, 여기서 Codex에게 첫 요청을 할 수 있습니다.

2) 첫 요청은 작고 분명하게

이 폴더에 초보자용 자기소개 페이지를 만들어줘.
index.html과 style.css 두 파일만 사용해줘.
먼저 어떤 파일을 만들지 짧게 설명한 뒤 진행해줘.

이 요청이 좋은 이유는 세 가지입니다. 범위가 작고, 사용할 파일 수가 제한되어 있고, 설명을 먼저 요구하기 때문입니다. 초보자에게는 이 순서가 중요합니다. 결과만 받으면 남는 게 적고, 설명을 먼저 들으면 이후 수정 요청도 훨씬 쉬워집니다.

3) 두 번째 요청은 수정 범위를 더 좁힙니다

방금 만든 결과를 기준으로 모바일에서도 읽기 쉽게 정리해줘.
색상은 과하지 않게 하고,
수정한 파일과 변경 이유를 같이 알려줘.

이렇게 한 단계씩 좁혀가면, AI를 “한 번에 다 해주는 도구”가 아니라 “작업을 나눠서 같이 진행하는 도구”로 쓰게 됩니다. 실습 초반에는 이 감각이 정말 중요합니다. 그래야 결과가 마음에 들지 않을 때도 어디를 다시 손봐야 하는지 보이기 시작합니다.

초보자가 실수하지 않기 위한 기본 습관

초보자가 가장 많이 막히는 이유는 기술이 부족해서라기보다, 변경 범위와 확인 기준이 흐려지기 때문입니다. 아래 습관만 잡아도 시행착오가 꽤 줄어듭니다.

파일 하나가 아니라 폴더를 연다. 그래야 터미널 시작 위치와 프로젝트 맥락이 맞습니다.
처음에는 Chat으로 계획부터 묻는다. 바로 Agent로 크게 수정시키면 따라가기 어렵습니다.
한 요청에는 한 목표만 넣는다. 디자인 수정, 기능 추가, 오류 수정은 가능하면 나눠서 시킵니다.
변경 전후를 확인한다. Git을 쓸 수 있으면 체크포인트를 남기고, 아직 Git이 익숙하지 않다면 실습 폴더를 통째로 복사해두는 편이 좋습니다.
모르는 저장소는 바로 신뢰하지 않는다. 낯선 폴더를 열었는데 기능이 제한돼 보인다면 Restricted Mode나 폴더 신뢰 상태를 먼저 확인해보면 됩니다.
AI 확장은 한 번에 여러 개 깔지 않는다. 초반에는 Codex 하나만으로도 충분합니다.

입문자가 가장 많이 착각하는 지점은 “AI가 틀렸다”보다 “무엇이 바뀌었는지 내가 못 따라갔다”에 가깝습니다. 그래서 작은 요청, 작은 변경, 짧은 검토가 생각보다 훨씬 중요합니다.

마무리

VS Code 설치가 끝났다면 이제 진짜 시작은 터미널과 Codex입니다. 하나는 작업을 실행하는 손이고, 다른 하나는 작업을 같이 밀어주는 도구라고 생각하면 이해가 쉽습니다.

index.html

0.01MB

style.css