반응형
폴더 구조 베스트 프랙티스 — 깔끔하고 유지보수 쉬운 프로젝트 구조 설계

프로젝트 시작할 때 폴더 구조를 잘 설계해 두면 협업과 유지보수 비용이 크게 줄어듭니다. 이 글에서는 원칙, 흔히 쓰이는 패턴(모노레포/멀티레포, 프론트엔드/백엔드), 그리고 예시 트리 구조와 체크리스트를 정리합니다.
핵심 원칙
- 의미 있게 그룹화 — 관련 파일/모듈을 같은 디렉터리에 모으세요.
- 관심사의 분리(Separation of Concerns) — UI, 비즈니스 로직, 데이터 접근을 분리합니다.
- 명확한 네이밍 — 폴더/파일명만 보고 역할을 예측할 수 있어야 합니다.
- 작은 단위(모듈화) — 한 폴더 안에 너무 많은 책임을 넣지 마세요.
- 일관성 — 팀 규칙(예: kebab-case vs snake_case)을 정하고 지키세요.
자주 쓰이는 패턴
1) 프론트엔드 (React / Vue / Next.js 등)
컴포넌트 기반 개발을 고려한 구조
/src
/components # 재사용 가능한 UI 컴포넌트
/features # 도메인 단위(또는 페이지 단위) 폴더
/auth
Login.jsx
login.slice.js
/pages # Next.js 같은 라우트 기반 페이지
/hooks # 커스텀 훅
/services # API 호출, 외부 통합
/styles # 전역 스타일, 테마
/utils # 유틸 함수
/assets # 이미지, 폰트
/tests
/public
package.json
2) 백엔드 (Node.js / Spring / Django 등)
레이어드 아키텍처(Controller - Service - Repository)를 권장
/src
/api
/v1
/users
controller.js
service.js
repository.js
/config # 환경설정, DI 설정
/db # 마이그레이션, 시드
/middlewares
/models
/utils
/jobs # 배치 작업, 스케줄러
/tests
/docs
package.json
3) 모노레포 (단일 저장소에 여러 패키지)
공유 코드(유틸, 디자인 시스템)를 쉽게 관리할 때 유용
/packages
/web-app
/api
/ui-library
/shared-utils
/scripts
/package.json
/lerna.json or pnpm-workspace.yaml
실전 팁 — 바로 적용 가능한 체크리스트
- README.md를 각 최상위 폴더에 두고 목적·실행법·예시를 적으세요.
- config는 코드와 분리하고 환경별 파일(.env.example) 제공.
- 비밀정보는 절대 커밋 금지 — secrets는 Vault/환경변수/CI 시크릿을 사용.
- 테스트 위치를 규칙화 — 예: __tests__ 또는 /tests 폴더.
- 코드 생성/빌드 산출물은 분리 — /dist, /build, /out 등은 .gitignore에 포함.
- CI 파일 위치는 루트(예: .github/workflows)로 통일.
- 문서화 — /docs 또는 Storybook 같은 도구로 문서화 유지.
간단한 예시 트리 (React + Express)
/my-project
/packages
/frontend
/src
package.json
/backend
/src
package.json
/scripts
package.json (workspace)
README.md
→ 이렇게 분리하면 독립 배포, 독립 테스트가 쉬워집니다.
자주 하는 실수 & 피하는 방법
- 모든 것을 루트에 넣음 — 루트가 지저분해지면 진입 장벽이 올라갑니다. 기능별 하위 폴더로 정리하세요.
- 중첩이 너무 깊음 — 깊은 중첩은 파일 찾기와 네비게이션을 어렵게 합니다. 3~4 레벨을 넘지 않도록 고려.
- 이름 규칙이 혼재 — 팀 단위로 스타일 가이드를 만들고 PR에서 체크하세요.
요약
좋은 폴더 구조는 명확성, 일관성, 확장성을 목표로 설계해야 합니다. 프로젝트가 커질수록 초기에 세운 규칙과 문서(README, CONTRIBUTING)가 큰 힘을 발휘합니다.
필요하시면 내 프로젝트에 맞춘 폴더 구조 제안을 댓글로 알려주세요~
반응형
'개발 · IT > 프론트엔드' 카테고리의 다른 글
| CSS Grid vs Flexbox — 차이와 언제 무엇을 쓸까 (0) | 2025.12.01 |
|---|---|
| Node.js 비동기 흐름 쉽게 이해하기 (0) | 2025.11.21 |
| 🎯 나의 첫 오픈소스 프로젝트 (0) | 2025.11.07 |
| 폴더 구조 확인하는 방법 - 초보자를 위한 쉽고 간단한 가이드 (2) | 2024.11.26 |
| tailwind css에 대해 알아보자 (0) | 2024.02.10 |
댓글