웹 프레임워크

웹 프레임워크(Web framework 또는 Web application framework)는 웹에서 동작하는 웹사이트, 웹 애플리케이션, 웹 API 등을 개발하기 위한 공통 구조와 재사용 가능한 기능을 제공하는 소프트웨어 프레임워크다. 웹 요청의 처리, 화면 구성, 데이터 교환과 응용...

영문명Web framework / Web application framework
분류소프트웨어 프레임워크, 웹 개발 기술
적용 대상웹사이트, 웹 애플리케이션, 웹 API
주요 구성라우팅, 컴포넌트·템플릿, 요청 처리, 데이터 연동, 빌드 및 배포 도구
하위 분야웹 프론트엔드 프레임워크, 웹 백엔드 프레임워크
풀스택 분야프론트엔드와 백엔드를 통합하는 프레임워크

웹 프레임워크(Web framework 또는 Web application framework)는 웹에서 동작하는 웹사이트, 웹 애플리케이션, 웹 API 등을 개발하기 위한 공통 구조와 재사용 가능한 기능을 제공하는 소프트웨어 프레임워크다. 웹 요청의 처리, 화면 구성, 데이터 교환과 응용 프로그램의 실행 흐름 등 반복되는 기능을 추상화하여 여러 프로젝트에서 일정한 구조로 구현하도록 돕는다. 특정한 한 언어나 실행 환경에 한정되지 않으며 JavaScript, TypeScript, Python, Ruby, PHP, Java, C# 등 다양한 언어로 구현된다.[1]

웹 프레임워크는 수행하는 역할에 따라 웹 프론트엔드 프레임워크와 웹 백엔드 프레임워크로 나눌 수 있다. 프론트엔드 영역은 주로 사용자 인터페이스의 구성 요소, 상태와 이벤트, 화면 렌더링 및 클라이언트 탐색을 다루며, 백엔드 영역은 서버의 라우팅, 요청·응답, 데이터베이스 접근, 인증과 세션, 서버 측 처리 등을 담당한다. 두 영역의 경계는 배포 방식과 렌더링 전략에 따라 달라지며, 한 프레임워크가 양쪽 기능을 함께 제공할 수도 있다.[2]

풀스택 웹 프레임워크(full-stack web framework)는 화면 구성과 서버 측 데이터 처리, 라우팅, 렌더링 및 배포 기능을 하나의 통합된 개발 모델로 제공하는 웹 프레임워크를 뜻한다. Next.js와 Nuxt는 대표적인 사례이며 클라이언트 측 렌더링뿐 아니라 서버 측 렌더링, 정적 생성 및 서버 기능을 함께 지원한다. 풀스택이라는 말이 언제나 자체 데이터베이스나 독립적인 배포 서버를 내장한다는 뜻은 아니고, 외부 서비스와 결합하거나 정적 사이트로 배포하는 구성도 가능하다.[3][4]

프레임워크는 보통 개발자가 구현할 코드를 호출하거나 파일 구성과 생명주기, 설정 및 확장 지점을 정하여 실행 구조를 제어한다. 이는 응용 프로그램이 필요할 때 독립적인 함수를 호출하는 소프트웨어 라이브러리의 전형적인 사용 방식과 구별되는 특징이다. 다만 모든 도구의 경계가 엄격한 것은 아니며, 대표적인 UI 기술인 React는 공식적으로 라이브러리로 분류되지만 라우터와 서버 기능 등을 제공하는 다른 도구 및 풀스택 프레임워크의 구성 요소로 널리 사용된다.[5]

웹 프레임워크의 주요 구성 요소에는 URL에서 처리 함수를 선택하는 라우터, HTML 또는 JSON 응답을 생성하는 렌더러, 사용자 입력 검증, 템플릿이나 컴포넌트, 인증과 권한 부여, 데이터 접근 및 미들웨어가 포함될 수 있다. 브라우저에서 실행하는 프레임워크는 DOM의 갱신과 상태 변화를 다루고, 서버 프레임워크는 HTTP 요청을 해석하고 응답을 생성한다. 보안 정책과 저장소, 캐시, 로깅, 테스트 및 배포 도구의 지원 범위는 구현마다 다르다.

웹 프레임워크의 발전은 초기의 서버 측 템플릿과 요청 처리 도구, MVC 패턴의 보급, AJAX와 클라이언트 측 컴포넌트 모델, 단일 페이지 애플리케이션의 확산, 서버 측 렌더링과 풀스택 통합 체계로 이어져 왔다. 현대적인 선택에서는 단순한 언어 선호도뿐 아니라 렌더링 위치, URL의 지속성, 접근성, 응용 프로그램의 규모, 서버 운영 및 네트워크 비용을 함께 고려한다. 같은 프레임워크도 버전과 플러그인, 배포 환경에 따라 제공하는 기능의 범위가 달라질 수 있다.

역사

초기 서버 측 웹 개발

서버 측 프레임워크의 발전

클라이언트 측 프레임워크의 등장

통합형·풀스택 프레임워크

구성과 동작

제어의 역전과 확장 지점

라우팅

미들웨어

템플릿과 컴포넌트

데이터와 상태 관리

빌드·테스트·배포

웹 프레임워크의 종류

웹 프론트엔드 프레임워크

웹 백엔드 프레임워크

풀스택 웹 프레임워크

마이크로 프레임워크와 통합 프레임워크

프론트엔드 프레임워크

컴포넌트 모델

상태 관리와 반응성

클라이언트 라우팅

대표적인 프레임워크와 UI 라이브러리

백엔드 프레임워크

요청·응답 처리

데이터베이스와 지속성

인증과 세션

대표적인 서버 프레임워크

풀스택 웹 프레임워크

풀스택의 정의와 범위

클라이언트·서버의 코드 통합

서버 측 렌더링과 정적 생성

Next.js

Nuxt

기타 통합형 프레임워크

웹 플랫폼과의 관계

HTML·CSS·JavaScript

HTTP와 웹 API

웹 서버와 배포 환경

보안과 성능

입력 검증

인증과 접근 제어

캐싱과 렌더링

테스트와 운영

관련 문서

  1. MDN: Server-side web frameworks ↩
  2. MDN: Introduction to the server side ↩
  3. Next.js: Documentation ↩
  4. Nuxt: Introduction ↩
  5. React: 공식 소개 ↩