프레임워크 vs 라이브러리 vs 도구 - 무엇이 다를까?

프로젝트 세팅 시, 헷갈리는 개념이지만 흐린 눈하고 넘긴 부분이 있다.
프레임워크, 라이브러리, 도구는 도대체 뭐가 다른 걸까?! 🤔

핵심 개념: 제어권(Inversion of Control)

이 글 전체를 관통하는 가장 중요한 기준은 제어권이 누구에게 있느냐이다.

• 프레임워크 → 프레임워크가 내 코드를 호출한다.
• 라이브러리 → 내가 라이브러리를 호출한다.
• 도구 → 실행 흐름과 무관하며 개발을 돕는 보조 수단이다.

이를 코드 개념으로 표현하면 다음과 같다.

// 라이브러리
myCode.calls(library);

// 프레임워크
framework.calls(myCode);

제어권 기준 한눈에 정리

구분	누가 실행 흐름을 주도하나?
프레임워크	프레임워크
라이브러리	개발자
도구	실행 흐름과 무관

🏗️ Framework

애플리케이션의 구조와 실행 흐름을 미리 설계해 둔 뼈대
프레임워크는 단순한 기능 모음이 아니라, “애플리케이션을 이렇게 만들어야 한다”는 구조와 규칙을 제공한다.

특징

• 프로젝트 구조를 정해준다.
• 라우팅, 빌드, 배포 방식이 기본적으로 포함되어 있다.
• 개발자는 정해진 규칙 안에서 코드를 작성한다.
• 자유도는 낮지만 안정성이 높다.

예시

• Next.js / Nuxt.js / Angular
• 예를 들어 Next.js는 app/ 폴더 구조와 파일명으로 라우팅을 자동 생성한다. 개발자는 정해진 위치에 파일을 만들기만 하면 된다.

왜 프레임워크를 쓸까?

프레임워크는 특히 다음 상황에서 강력하다.

• 대규모 프로젝트: 모두가 같은 규칙을 따르므로 코드 일관성 유지
• 팀 협업: 어떻게 구조를 짤까 고민할 필요 없음
• 유지보수가 중요한 서비스: 정해진 패턴으로 예측 가능성 ↑
• 빠른 초기 세팅이 필요한 경우: 보일러플레이트 코드가 이미 준비됨

단점

• 러닝 커브가 높다 (프레임워크의 방식을 배워야 한다)
• 프레임워크에 종속된다 (버전 업그레이드, 마이그레이션 부담)
• 작은 프로젝트에는 오버 엔지니어링일 수 있다

🧰 Library

특정 문제를 해결하기 위한 도구 모음집
라이브러리는 애플리케이션 전체 구조를 강제하지 않으며, 필요한 기능만 선택적으로 가져다 쓸 수 있다.

특징

• 내가 원할 때 호출해서 사용한다.
• 폴더 구조나 실행 방식에 제한이 없다.
• 자유도가 매우 높다.
• 책임은 개발자에게 있다.

예시

• React (UI 라이브러리)
• Zustand (상태 관리 라이브러리)
• TanStack Query (서버 상태 관리)
• lodash (유틸 라이브러리)

왜 React는 프레임워크가 아니라 라이브러리일까?

React는 UI를 만들기 위한 도구일 뿐, 애플리케이션 전체 구조를 정해주지 않는다.

React는:

• 라우팅을 제공하지 않는다. → react-router 필요
• 폴더 구조를 강제하지 않는다. → 개발자 재량
• 서버 렌더링을 기본 제공하지 않는다. → Next.js 필요
• 배포 방식도 정해주지 않는다. → Vite, Webpack 등 필요
• 상태 관리 방법을 강제하지 않는다 → Zustand, Redux 등 선택

그래서 프레임워크가 아니라 UI 라이브러리다.

장점

• 유연성: 내 프로젝트에 맞게 조합 가능
• 가벼움: 필요한 것만 설치
• 쉬운 교체: 다른 라이브러리로 바꾸기 용이

단점

• 선택의 피로: 무엇을 조합할지 결정해야 함
• 초기 세팅 부담: 직접 구조를 만들어야 함
• 팀마다 구조가 달라 코드 리뷰 비용이 커질 수 있음

🔧 Tool

개발 생산성을 높여주는 보조 수단
도구는 애플리케이션의 기능 자체와는 직접 관련이 없고, 개발 환경을 개선하는 역할을 한다.
도구는 ‘무엇을 만들지’가 아니라 ‘어떻게 만들지’를 돕는다.

특징

• 앱의 구조를 결정하지 않으며, 프레임워크나 라이브러리 위에서 동작한다.
• 비즈니스 로직과 직접 관련 없음
• 개발 경험(DX)을 개선
• 코드 품질, 빌드 속도, 자동화를 담당

예시

• Vite → 빌드 도구
• ESLint → 코드 품질 검사
• Prettier → 코드 포맷팅
• Husky → 커밋 훅 자동화

도구의 역할

도구는 직접적으로 UI를 만들거나 데이터를 다루지 않는다.
대신:

• 개발 속도를 높인다 (Vite의 빠른 HMR)
• 버그를 미리 방지한다 (ESLint, TypeScript)
• 팀 협업을 돕는다 (Prettier로 코드 스타일 통일)
• 반복 작업을 자동화한다 (Husky로 커밋 전 검사)

비교 요약표

구분	제어 주체	역할	자유도	예시
프레임워크	프레임워크가 제어	전체 앱 구조 제공	낮음	Next.js, Angular
라이브러리	개발자가 제어	특정 기능 제공	높음	React, Zustand, Axios
도구	실행 흐름과 무관	개발 과정 지원	높음	Vite, ESLint, Prettier

프레임워크는 안정성을, 라이브러리는 유연성을, 도구는 생산성을 제공한다.
결국 좋은 기술 선택이란 유행을 따르는 것이 아니라, 프로젝트의 요구사항에 맞는 최적의 조합을 찾는 것이다!