topic★★★★★난이도 · 약 20분

파일과 폴더 — 프로젝트 구조 읽는 법

디렉토리 계층, src/components/pages 패턴, package.json의 역할을 파악한다.

#파일#폴더#디렉토리#package.json#프로젝트구조

왜 배우는가

Claude Code에게 "src/components에 버튼 컴포넌트 만들어줘"라고 지시하려면, 프로젝트의 폴더 구조를 읽을 줄 알아야 한다. 구조를 모르면 AI가 엉뚱한 위치에 파일을 만든다.

컴퓨터의 파일 시스템은 나무(Tree) 구조다. 최상위 폴더(루트) 아래에 하위 폴더가 가지치기하듯 펼쳐지고, 가장 끝에 파일(잎)이 있다.

트리 구조 — HTML DOM처럼, 파일 시스템도 루트 아래로 가지치기하는 나무다

bash

# 일반적인 웹 프로젝트 구조
my-project/
├── package.json       # 프로젝트 설명서 + 의존성 목록
├── src/               # 소스 코드 모음
│   ├── app/           # 페이지 라우트 (URL과 1:1 대응)
│   ├── components/    # 재사용 가능한 UI 조각
│   ├── lib/           # 유틸리티 함수
│   └── styles/        # CSS 스타일
├── public/            # 이미지·폰트 등 정적 파일
└── node_modules/      # 설치된 외부 패키지 (건드리지 않는다!)

이 구조를 익히면 Claude Code에게 "src/components/Button.tsx를 수정해줘"처럼 정확한 경로로 지시할 수 있다.

파일/폴더	역할	바이브코더가 알아야 하는 이유
package.json	프로젝트 이름, 버전, 의존성 목록	`npm install` 시 이 파일을 읽어 패키지를 설치한다
node_modules/	설치된 외부 패키지	절대 직접 수정하지 않는다. Git에도 올리지 않는다
.gitignore	Git이 무시할 파일 목록	node_modules, .env 등을 등록해 둔다
src/	실제 작성하는 코드	AI에게 수정을 요청할 파일은 대부분 여기에 있다
tsconfig.json	TypeScript 설정	경로 별칭(@/), 컴파일 옵션 등

bash

# tree 명령어로 프로젝트 구조 한눈에 보기
# Windows: tree 기본 내장
tree /F /A

# 깊이 제한 (2단계까지만)
tree /F /A | head -30

# Mac/Linux: tree 설치 후 사용
# brew install tree
tree -L 2

프로젝트에 처음 진입했을 때 tree 명령어로 전체 구조를 파악하면, AI에게 맥락을 설명하기 훨씬 쉬워진다.

경로(Path)에는 두 가지가 있다. 절대 경로는 루트부터 시작하는 전체 주소(`C:\Users\kim\project\src\App.tsx`), 상대 경로는 현재 위치 기준(`./src/App.tsx`). Claude Code는 주로 절대 경로를 사용한다.