{"@context":"https://schema.org","@type":"HowTo","@id":"https://bkamp.ai/en/recipes/a950cd29-afe9-43af-95ba-71e20f14c02e","name":"EP.03 — VS Code, Vibe Coding's Workspace","description":"To code with VIVE, you need a workspace. VS Code is exactly that space. It may look complicated, but there are just four things you need to know: file structure, the editor, the terminal, and the AI prompt. Once you understand just these, you're ready to start coding with VIVE.","url":"https://bkamp.ai/en/recipes/a950cd29-afe9-43af-95ba-71e20f14c02e","image":"https://media.bkamp.ai/uploads/guide_thumbnail/65bd0aac-08ab-4390-9bf9-90c391620826/379627fc-e9b1-477a-a991-3f1da43a7968.png","inLanguage":"en-US","datePublished":"2026-03-20T08:05:31.100446Z","dateModified":"2026-07-18T19:00:11.439837Z","author":{"@type":"Person","name":"jacob","url":"https://bkamp.ai/en/users/김현진_c96045"},"publisher":{"@type":"Organization","name":"bkamp","url":"https://bkamp.ai"},"educationalLevel":"초급","category":"실사용기","step":[{"@type":"HowToStep","position":1,"name":"VS Code란","text":"

코드를 보고 편집하는 앱입니다. 메모장의 업그레이드 버전이라고 생각하면 돼요. ADW가 이미 설치해놨으니 열기만 하면 됩니다.

Windows: 시작 메뉴에서 \"Visual Studio Code\" 검색
Mac: Spotlight에서 \"Visual Studio Code\" 검색

VS Code를 열면 크게 4개 영역이 있습니다. 이것만 알면 돼요.

$\"스크린샷$

"},{"@type":"HowToStep","position":2,"name":"4개 영역 알아보기","text":"

① 파일 구조 — 왼쪽

왼쪽 사이드바 = 파일 탐색기. 윈도우 탐색기랑 같은 겁니다. 파일 → 폴더 열기로 프로젝트 폴더를 열면 여기에 파일 목록이 나옵니다.

② 에디터 — 가운데

파일을 클릭하면 가운데에서 열립니다. 코드뿐만 아니라 이미지, txt 파일 등 여러 종류의 파일을 열 수 있고, 탭으로 여러 개를 동시에 띄워놓을 수도 있어요. AI가 쓴 코드를 확인하는 곳입니다.

③ 터미널 — 아래

글자로 컴퓨터에게 명령을 내리는 곳입니다. 마우스로 클릭하는 대신 텍스트로 \"이 파일 실행해\", \"이 폴더 만들어\", \"이 프로그램 설치해\" 같은 명령을 직접 입력합니다. 개발자들이 컴퓨터를 조작하는 기본 방식이에요. 영화에서 해커들이 우당탕탕 하는 그 화면 맞습니다! 그 화면이 VS Code에 들어왔다고 생각하면 돼요.

열기: Ctrl + ` (숫자 1 왼쪽 키)

기존 터미널

$\"image\"$

VS Code 터미널

$\"image\"$

④ Focus Input — AI 지시창

앞으로 바이브 코딩을 할 메인 공간입니다. 여기에 한국어로 원하는 걸 입력하면 AI가 코드를 짜주고, 파일을 만들고, 수정해줍니다.

열기: Ctrl + Shift + P (Mac: Cmd + Shift + P) → \"Claude Code\" → Claude Code: Open in New Tab 클릭

$\"image\"$

이 시리즈에서 크롬 확장 프로그램을 만들 때도, 수정할 때도, 전부 이 Focus Input에서 진행합니다. 바이브 코딩의 시작점이라고 생각하면 돼요.

$\"image\"$

"},{"@type":"HowToStep","position":3,"name":"정리","text":"

영역	위치	역할	단축키
파일 구조	왼쪽	파일/폴더 목록	—
에디터	가운데	코드 보는 곳	—
터미널	아래	컴퓨터와 대화	Ctrl + `
Focus Input	오른쪽	AI에게 지시	`Ctrl + Shift + P` → Claude Code: Open in New Tab

이 4가지만 알면 다음 편에서 AI와 대화할 준비가 된 겁니다.

다음 편에서는 Claude Code와 첫 대화를 나눠봅니다.

"}],"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":72},{"@type":"InteractionCounter","interactionType":"https://schema.org/BookmarkAction","userInteractionCount":0}],"mainEntityOfPage":{"@type":"WebPage","@id":"https://bkamp.ai/en/recipes/a950cd29-afe9-43af-95ba-71e20f14c02e"}}

EP.03 — VS Code, Vibe Coding's Workspace

What is VS Code?

Exploring the 4 Areas

organize

Step Roadmap

댓글 0개

EP.03 — VS Code, Vibe Coding's Workspace

What is VS Code?

Exploring the 4 Areas

organize

Step Roadmap

댓글 0개

EP.03 — VS Code, Vibe Coding's Workspace

What is VS Code?

Exploring the 4 Areas

organize

Step Roadmap

댓글 0개

EP.03 — VS Code, Vibe Coding's Workspace

What is VS Code?

Exploring the 4 Areas

organize

Step Roadmap

댓글 0개