개요
Laravel은 백엔드 프레임워크이지만, 프런트엔드까지 포함한 개발 경험도 중시합니다.Laravel 13에서는 PHP 중심으로 진행하는 방법과 React·Vue·Svelte 같은 JavaScript 프레임워크를 활용하는 방법 모두를 제공합니다. 어떤 접근 방식을 선택할지는 다음 세 가지로 생각하면 정리하기 쉽습니다.
- UI를 주로 PHP로 작성하고 싶은가
- UI를 주로 JavaScript / TypeScript로 작성하고 싶은가
- 하나의 리포지토리로 완결시키고 싶은가, API와 SPA를 분리하고 싶은가
PHP로 진행
Blade
Blade는 Laravel 표준 템플릿 엔진입니다. 컨트롤러나 라우트에서 뷰를 반환하고, 서버에서 생성한 HTML을 브라우저로 반환합니다. 장점- Laravel의 라우팅, 유효성 검증, 인증과 자연스럽게 통합할 수 있다
- PHP만으로 완결시키기 쉬우며, 학습 비용이 낮다
- SEO나 초기 표시를 중시하는 페이지와 잘 맞는다
- 페이지 이동이나 폼 전송마다 화면 전체 재렌더링이 되기 쉽다
- 복잡한 인터랙션은 JavaScript의 보조가 필요해진다
Livewire
Laravel Livewire는 Blade를 기반으로 하면서 보다 동적인 UI를 PHP 중심으로 구현할 수 있는 접근 방식입니다. 모달, 검색, 인라인 편집 같은 조작을 React나 Vue에 가까운 경험으로 구축할 수 있습니다. 장점- PHP와 Blade의 연장선에서 동적 UI를 만들 수 있다
- Laravel의 상태 관리나 유효성 검증과 잘 결합된다
- 필요한 곳에만 JavaScript를 추가하고 싶은 경우 Alpine.js와 조합하기 쉽다
- 복잡한 클라이언트 사이드 상태 관리는 JavaScript 프레임워크만큼 잘하지 못한다
- 프런트엔드의 책임이 큰 대규모 SPA에는 적합하지 않은 경우가 있다
PHP 우선 스타터 킷
Laravel 13의 스타터 킷에는 PHP 중심으로 동적 UI까지 만들고 싶은 팀을 위한 Livewire 기반 선택지가 있습니다. Blade만으로 시작하는 구성도 물론 가능하지만, 스타터 킷으로 준비된 PHP 우선 선택지는 Livewire입니다. 인증·레이아웃·Vite 설정까지 함께 준비되므로 최단 시간에 개발을 시작할 수 있습니다.JavaScript 프레임워크 사용
Inertia + React / Vue / Svelte
Inertia는 Laravel의 라우트·컨트롤러·인증을 활용한 상태로 React·Vue·Svelte로 페이지 컴포넌트를 구축하기 위한 다리 역할을 합니다. API 서버와 SPA를 완전히 분리하지 않고 하나의 Laravel 애플리케이션 내에서 모던한 UI를 만들 수 있습니다. 장점- React / Vue / Svelte의 컴포넌트 모델을 이용할 수 있다
- 라우팅이나 인증은 Laravel 쪽으로 몰 수 있다
- 백엔드와 프런트엔드를 하나의 리포지토리로 관리하기 쉽다
- Blade만의 구성보다 학습 대상이 늘어난다
- Node.js 툴체인이나 TypeScript 지식이 필요해지기 쉽다
API와 독립 SPA를 나누는 경우
프런트엔드를 Laravel과 완전히 분리하여, 별도의 SPA나 모바일 앱에서 API를 이용하는 구성도 선택할 수 있습니다. 여러 클라이언트에서 같은 백엔드를 공유하고 싶은 경우에 적합합니다. 이 경우 Laravel은 주로 다음 역할을 담당합니다.- API 라우트 제공
- 인증·인가(예: Sanctum)
- JSON 응답 정형화(예: Eloquent API Resources)
- 웹, 모바일, 데스크톱 등 여러 클라이언트로 전개하기 쉽다
- 프런트엔드의 기술 선택을 Laravel 본체와 분리할 수 있다
- 인증, 데이터 취득, 배포를 각각 설계해야 한다
- 하나의 Laravel 앱만으로 완결되는 구성보다 복잡해지기 쉽다
JavaScript 우선 스타터 킷
스타터 킷을 사용하면 Inertia·React / Vue / Svelte·Tailwind CSS·Vite가 내장된 상태에서 시작할 수 있습니다. 인증 화면도 처음부터 갖춰지므로 UI 개발에 집중하기 쉬워집니다.Vite로 에셋 번들링
어떤 접근 방식을 선택해도 Laravel 13에서는 일반적으로 Vite를 사용해 CSS나 JavaScript를 빌드합니다. Blade나 Livewire에서는 경량 스크립트나 스타일을, Inertia에서는 애플리케이션 전체의 프런트엔드 코드를 Vite로 묶습니다. Vite를 사용하는 장점은 다음과 같습니다.- 로컬 개발 시의 빠른 HMR
- 프로덕션용 에셋의 번들링과 버전 관리
- Laravel의
@vite()디렉티브와의 통합
Laravel 13의 스타터 킷에서는 Vite 기반의 프런트엔드 구성이 미리 설정되어 있습니다.
접근 방식 비교
| 접근 방식 | 적합한 사례 | 장점 | 단점 |
|---|---|---|---|
| Blade | 콘텐츠 중심의 페이지, 폼 위주의 관리 화면 | 단순하고 배우기 쉽다. Laravel 표준 기능과 자연스럽게 통합할 수 있다 | 고급 UI에서는 페이지 전체 재렌더링이 늘어나기 쉽다 |
| Livewire | PHP 중심으로 동적 UI를 만들고 싶은 업무 앱 | PHP 그대로 반응 좋은 UI를 만들 수 있다 | 복잡한 클라이언트 사이드 상태 관리는 다소 약하다 |
| Inertia + React / Vue / Svelte | 모던한 UI와 Laravel의 통합 운용을 양립하고 싶은 앱 | 하나의 리포지토리에서 SPA와 같은 경험을 구축할 수 있다 | JavaScript / TypeScript의 숙달이 필요하다 |
| API + 독립 SPA | 여러 클라이언트나 모바일 연동이 전제인 제품 | 프런트엔드를 독립적으로 전개하기 쉽다 | 인증·배포·운용이 복잡해지기 쉽다 |
다음 단계
Blade 템플릿
서버사이드 렌더링의 기본을 확인합니다.
스타터 킷
React, Vue, Svelte, Livewire의 초기 구성을 비교합니다.
Vite에 의한 에셋 번들링
개발 서버, HMR, 프로덕션 빌드의 흐름을 배웁니다.
Inertia 입문
Inertia로 Laravel과 JavaScript 프레임워크를 연결하는 개념을 확인합니다.