1. 왜 이것을 배워야 하나요?

이후 챕터에서 프로젝트를 진행하려면 파일과 폴더를 다루는 기본기가 필요합니다.

2. 파일 탐색기 사용하기

2.1 파일 탐색기 위치

Editor 왼쪽에 파일 탐색기가 있습니다.

그림 4-5: Editor 왼쪽의 파일 탐색기

2.2 기본 파일 조작

새 파일 만들기

방법 1: 단축키

• Cmd/Ctrl + N → 파일 이름 입력 → Enter

방법 2: 파일 탐색기

• 폴더에서 마우스 우클릭 → "New File" 클릭

새 폴더 만들기

• 파일 탐색기에서 우클릭 → "New Folder" 클릭
• 폴더 이름 입력 → Enter

파일/폴더 이름 변경

• 파일 선택 → F2 또는 우클릭 → "Rename"
• 새 이름 입력 → Enter

파일/폴더 삭제

• 파일 선택 → Delete 키 또는 우클릭 → "Delete"
• 확인 후 삭제

파일 검색

• Cmd/Ctrl + P → 파일 이름 입력
• 빠르게 원하는 파일 찾기

2.3 AI에게 파일 구조 요청하기

Agent Side Panel(Cmd/Ctrl + L)에서 프로젝트 구조를 한 번에 만들 수 있습니다.

예시 요청

다음 폴더 구조를 만들어주세요:

my-project/
  ├── src/
  │   ├── index.html
  │   ├── style.css
  │   └── script.js
  ├── images/
  └── README.md

그림 4-8: Agent Side Panel에서 폴더 구조 요청하기

AI가 폴더와 파일을 자동으로 생성합니다.

3. 터미널 사용하기

터미널은 텍스트 명령어로 컴퓨터를 제어하는 도구입니다. 프로그램 실행, 패키지 설치 등에 사용됩니다.

3.1 터미널 열기

Editor에서

• 단축키: Ctrl + ` (백틱, 숫자 1 왼쪽 키)
• 또는 메뉴: View → Terminal 또는 Terminal → New Terminal

그림 4-7: Editor 하단에 열린 터미널

Agent Manager에서

• 단축키: Cmd/Ctrl + J
• 하단 패널에 터미널 표시

3.2 자주 사용하는 터미널 명령어

터미널이 처음이라면 다음 명령어만 알아도 충분합니다.

폴더 이동

# 폴더로 이동
cd 폴더이름

# 상위 폴더로 이동
cd ..

# 홈 폴더로 이동
cd ~

현재 위치 확인

# 현재 폴더 경로 표시
pwd

파일/폴더 목록 보기

# Mac/Linux
ls

# Windows
dir

폴더 만들기

mkdir 폴더이름

# 여러 폴더 한 번에 만들기
mkdir src public images

파일 실행

# Python 파일 실행
python 파일이름.py

# Node.js 파일 실행
node 파일이름.js

3.3 AI에게 터미널 명령어 요청하기

명령어가 기억나지 않으면 터미널에서 Cmd/Ctrl + I를 눌러 AI에게 물어보세요.

예시

현재 폴더에서 Python 파일만 찾아서 보여줘

AI가 적절한 명령어를 생성합니다.

find . -name "*.py"  # Mac/Linux
dir /s *.py          # Windows

4. 실습: 프로젝트 폴더 만들기

직접 프로젝트 폴더 구조를 만들어봅시다.

4.1 실습 목표

다음 구조를 가진 프로젝트를 생성합니다.

hello-project/
  ├── src/
  │   ├── index.html
  │   └── style.css
  └── README.md

4.2 방법 1: 파일 탐색기 사용

1. 워크스페이스에서 우클릭 → "New Folder" → hello-project
2. hello-project 폴더에서 우클릭 → "New Folder" → src
3. src 폴더에서 우클릭 → "New File" → index.html
4. src 폴더에서 우클릭 → "New File" → style.css
5. hello-project 폴더에서 우클릭 → "New File" → README.md

4.3 방법 2: 터미널 사용

1. 터미널 열기: Ctrl + `
2. 명령어 실행

# 폴더 생성
mkdir -p hello-project/src

# 파일 생성
touch hello-project/src/index.html
touch hello-project/src/style.css
touch hello-project/README.md

type nul > hello-project\src\index.html

4.4 방법 3: AI에게 요청 (가장 쉬운 방법)

Agent Side Panel에서 다음과 같이 요청합니다.

hello-project 폴더를 만들고
src 폴더 안에 index.html과 style.css를,
루트에 README.md를 만들어주세요.

4.5 실습 결과 확인

위 방법 중 하나를 사용하면 다음과 같은 폴더 구조가 생성됩니다.

그림 4-9: 생성된 hello-project 폴더 구조

5. 파일에 코멘트 남기기

Agent Manager에서 파일 패널을 열면 특정 부분에 코멘트를 남겨 Agent에게 전달할 수 있습니다.

그림 4-10: 파일의 특정 부분에 코멘트 남기기

1. Agent Manager에서 파일 열기
2. 코드 특정 라인 선택(드래그)
3. 코멘트 입력 후 버튼 클릭
4. Agent가 해당 부분을 참조하여 작업

6. 단축키 정리

7. 다음 단계

파일 관리와 터미널 기초를 익혔다면, Browser 기능을 학습합니다.