프로그래밍을 조금 배우기 시작하면 꼭 듣게 되는 말이 있다. “React는 라이브러리다”, “Vue는 프레임워크다”, “jQuery는 라이브러리다” 같은 말이다.
그런데 처음에는 이게 정말 헷갈린다. 둘 다 개발할 때 쓰는 도구처럼 보이고, 실제로 사용하는 방법도 비슷해 보이기 때문이다.
나도 처음에는 라이브러리와 프레임워크가 거의 같은 말인 줄 알았다. 그냥 누가 더 있어 보이게 말하느냐의 차이 정도로 생각했다. 그런데 React와 Vue를 조금 써보고 나서야, 둘은 생각보다 역할이 꽤 다르다는 걸 알게 됐다.
가장 쉽게 말하면:
- 라이브러리 = 내가 필요할 때 꺼내 쓰는 도구
- 프레임워크 = 이미 정해진 틀 안에서 작업하는 도구
즉, 라이브러리는 내가 중심이고, 프레임워크는 도구가 중심이다.
라이브러리는 “필요한 것만 가져다 쓰는 것”이다
라이브러리는 말 그대로 이미 만들어진 기능 모음이다. 내가 원하는 기능만 골라서 가져와 쓸 수 있다.
예를 들어 집에서 망치를 쓰고 싶다고 해보자. 공구함에서 망치만 꺼내 쓰고, 필요 없으면 다시 넣어둔다. 이것이 라이브러리와 비슷하다.
즉, 개발자는 원래 하던 방식대로 코드를 작성하고, 중간에 필요한 기능만 라이브러리에서 가져온다.
예를 들어 JavaScript에서 날짜를 쉽게 계산해주는 라이브러리가 있다고 해보자. 그러면 전체 프로그램은 내가 만들고, 날짜 계산 부분만 라이브러리를 사용하면 된다.
실제로 많이 사용하는 라이브러리에는 이런 것들이 있다.
- React
- jQuery
- Lodash
- Chart.js
예를 들어 Chart.js는 그래프를 쉽게 그려주는 라이브러리다. 원래는 막대그래프를 직접 그리려면 코드가 길고 복잡하다. 하지만 Chart.js를 사용하면 몇 줄만으로 그래프를 만들 수 있다.
즉, 라이브러리는 내가 원하는 기능만 빠르게 추가하기 위한 도구에 가깝다.
프레임워크는 “이미 정해진 방식대로 만드는 것”이다
반면 프레임워크는 조금 다르다. 프레임워크는 처음부터 “이렇게 만들면 된다”라는 구조가 어느 정도 정해져 있다.
쉽게 비유하면 조립식 책상과 비슷하다.
책상을 직접 만들면 원하는 대로 못을 박고, 나무를 자르고, 모양을 바꿀 수 있다. 하지만 조립식 책상은 설명서대로 조립해야 한다. 대신 훨씬 빠르고, 실패할 가능성이 적다.
프레임워크도 마찬가지다.
예를 들어 Vue나 Angular 같은 프레임워크를 사용하면:
- 파일을 어디에 만들지
- 코드를 어떤 방식으로 나눌지
- 화면을 어떻게 구성할지
같은 것들이 어느 정도 정해져 있다.
즉, 개발자는 프레임워크가 만든 규칙 안에서 작업하게 된다.
처음에는 오히려 답답하게 느껴질 수도 있다. “왜 꼭 이렇게 해야 하지?”라는 생각이 든다. 그런데 프로젝트가 커질수록 이런 규칙이 오히려 훨씬 편하다.
왜냐하면 코드가 정리되어 있고, 여러 사람이 함께 작업해도 방식이 비슷하기 때문이다.
누가 누구를 부르는지가 가장 큰 차이다
라이브러리와 프레임워크의 가장 큰 차이는 누가 누구를 호출하느냐다.
이 부분이 가장 어렵게 느껴질 수 있는데, 사실 아주 간단하다.
라이브러리는 내가 필요할 때 직접 불러서 쓴다.
예를 들어:
library.doSomething()
처럼 내가 라이브러리를 호출한다.
하지만 프레임워크는 반대다. 프레임워크가 먼저 돌아가고 있고, 필요한 순간에 내 코드를 불러준다.
즉:
- 라이브러리 → 내가 도구를 부름
- 프레임워크 → 도구가 나를 부름
이것을 어려운 말로는 ‘제어의 역전’이라고도 한다.
하지만 굳이 어렵게 외울 필요는 없다. 그냥 “라이브러리는 내가 꺼내 쓰고, 프레임워크는 그 안에 내가 들어가서 작업한다”라고 생각하면 된다.
React는 왜 라이브러리인데 프레임워크처럼 느껴질까
많은 사람이 React를 프레임워크라고 생각한다. 왜냐하면 실제로 사용할 때는 React만 쓰지 않기 때문이다.
보통 React를 사용할 때는:
- React
- 라우터
- 상태 관리
- 빌드 도구
같은 것들을 함께 사용한다.
그러다 보니 결국 하나의 큰 구조처럼 느껴진다.
하지만 정확히 말하면 React 자체는 화면을 만들기 위한 라이브러리다. 내가 원하는 방식대로 다른 도구를 붙여서 사용할 수 있다.
반면 Angular는 처음부터 많은 기능이 포함되어 있어서, 진짜 프레임워크에 가깝다.
그래서 React는 자유도가 높고, Angular는 정해진 방식이 많다.
언제 라이브러리를 쓰고, 언제 프레임워크를 쓸까
간단한 프로젝트나 기능 하나만 추가하고 싶다면 라이브러리가 편하다.
예를 들어:
- 그래프 하나 추가하기
- 날짜 계산하기
- 애니메이션 만들기
같은 경우에는 라이브러리 하나만 가져와 쓰면 된다.
하지만 웹사이트 전체를 만들거나, 규모가 큰 프로젝트라면 프레임워크가 더 편하다.
왜냐하면 구조가 정리되어 있고, 여러 사람이 함께 작업하기 쉽기 때문이다.
예를 들어 회사에서 쇼핑몰이나 큰 서비스 사이트를 만든다면, 대부분 프레임워크를 사용한다.
나도 처음에는 “굳이 왜 이렇게 복잡한 걸 쓰지?”라는 생각이 들었다. 그런데 페이지가 여러 개가 되고, 코드가 점점 길어지니까 프레임워크가 훨씬 편하다는 것을 느꼈다.
한 번에 이해되는 비유
라이브러리와 프레임워크를 가장 쉽게 비유하면 아래와 같다.
| 비유 | 라이브러리 | 프레임워크 |
|---|---|---|
| 요리 | 필요한 소스만 사서 사용 | 밀키트처럼 정해진 순서대로 만들기 |
| 집 만들기 | 공구함에서 필요한 도구만 꺼내기 | 조립식 집 설명서대로 짓기 |
| 프로그래밍 | 원하는 기능만 가져다 쓰기 | 정해진 구조 안에서 만들기 |
즉, 라이브러리는 자유롭지만 내가 더 많이 고민해야 하고, 프레임워크는 규칙이 있지만 대신 더 편하게 큰 프로젝트를 만들 수 있다.
그래서 둘 중 무엇이 더 좋을까
정답은 없다. 라이브러리와 프레임워크는 경쟁 관계가 아니라, 상황에 따라 다르게 쓰는 도구다.
작고 단순한 기능에는 라이브러리가 더 편할 수 있고, 큰 웹사이트에는 프레임워크가 더 잘 맞는다.
그리고 실제로는 둘을 함께 쓰는 경우가 많다.
예를 들어 React 같은 라이브러리를 사용하면서, Chart.js 같은 다른 라이브러리를 같이 붙여서 쓰기도 한다.
결국 중요한 것은 이름이 아니라, “내가 지금 무엇을 만들고 있는가”다.
처음에는 둘의 차이가 헷갈릴 수 있다. 하지만 “라이브러리는 내가 가져다 쓰는 도구, 프레임워크는 내가 그 안에 들어가서 작업하는 틀”이라고 기억하면 훨씬 이해하기 쉽다.