프론트엔드

번역일: 2026년 6월 20일

프론트엔드

소개
PHP 사용하기
React, Svelte, 또는 Vue 사용하기
- Inertia
- 스타터 킷
에셋 번들링

소개

Laravel은 라우팅, 유효성 검사, 캐싱, 큐, 파일 스토리지 등 현대적인 웹 애플리케이션 개발에 필요한 기능을 모두 갖춘 백엔드 프레임워크입니다. 하지만 Laravel은 백엔드만으로 완결되는 프레임워크가 아닙니다. 프론트엔드까지 아우르는 훌륭한 풀스택 개발 경험을 제공하는 것도 중요하다고 생각합니다.

Laravel로 프론트엔드를 구성하는 방법은 크게 두 가지입니다. PHP 기반으로 처리하는 방식과, React, Svelte, Vue 같은 JavaScript 프레임워크를 활용하는 방식입니다. 아래에서 두 방식을 각각 살펴보고, 여러분의 프로젝트에 적합한 선택을 내릴 수 있도록 안내합니다.

PHP 사용하기

PHP와 Blade

전통적인 PHP 애플리케이션은 데이터베이스에서 조회한 데이터를 PHP echo 구문으로 출력하는 방식으로 HTML을 렌더링했습니다:

<div>
    <?php foreach ($users as $user): ?>
        안녕하세요, <?php echo $user->name; ?> 님 <br />
    <?php endforeach; ?>
</div>

Laravel에서도 뷰와 Blade를 사용해 이 방식을 그대로 활용할 수 있습니다. Blade는 매우 가벼운 템플릿 언어로, 데이터 출력과 반복 처리 등을 간결한 문법으로 작성할 수 있습니다:

<div>
    @foreach ($users as $user)
        안녕하세요, {{ $user->name }} 님 <br />
    @endforeach
</div>

이 방식에서는 폼 제출이나 페이지 이동 시 서버가 새로운 HTML 문서 전체를 반환하고, 브라우저가 페이지 전체를 다시 렌더링합니다. 지금도 많은 애플리케이션이 이처럼 단순한 Blade 템플릿만으로도 충분히 잘 동작합니다.

높아진 사용자 기대치

하지만 웹 애플리케이션에 대한 사용자 기대치가 높아지면서, 더 부드럽고 반응성 좋은 인터랙션을 구현하기 위해 React, Svelte, Vue 같은 JavaScript 프레임워크를 선택하는 개발자들이 늘어났습니다.

반면, 익숙한 백엔드 언어를 유지하면서도 현대적인 UI를 구현하고 싶은 개발자들은 다른 방법을 모색했습니다. Ruby on Rails 생태계에서 Turbo, Hotwire, Stimulus 같은 라이브러리가 등장한 것도 같은 맥락입니다.

Laravel 생태계에서는 이러한 필요에 응답하여 Laravel Livewire와 Alpine.js가 만들어졌습니다.

Livewire

Laravel Livewire는 React, Svelte, Vue로 만든 프론트엔드처럼 동적이고 현대적인 UI를 PHP만으로 구축할 수 있게 해주는 프레임워크입니다.

Livewire에서는 UI의 특정 영역을 담당하는 "컴포넌트"를 만들고, 프론트엔드에서 호출할 수 있는 메서드와 데이터를 정의합니다. 예를 들어 간단한 카운터 컴포넌트는 다음과 같이 작성합니다:

<?php

use Livewire\Component;

new class extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }
};
?>

<div>
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
</div>

wire:click과 같은 특수 HTML 속성을 통해 프론트엔드와 백엔드가 자연스럽게 연결되고, 컴포넌트의 현재 상태는 Blade 표현식으로 렌더링됩니다.

Livewire는 많은 개발자들에게 Laravel 생태계를 벗어나지 않고도 현대적인 동적 웹 애플리케이션을 만들 수 있는 방법을 제시했습니다. 일반적으로 Livewire 개발자들은 다이얼로그 창 표시처럼 꼭 필요한 부분에만 Alpine.js를 조금씩 곁들여 사용합니다.

Laravel을 처음 시작한다면 먼저 뷰와 Blade의 기본 사용법에 익숙해진 후, Laravel Livewire 공식 문서를 통해 인터랙티브한 컴포넌트 개발로 나아가기를 권장합니다.

스타터 킷

PHP와 Livewire로 프론트엔드를 구성하고 싶다면, Livewire 스타터 킷을 활용해 개발을 빠르게 시작할 수 있습니다.

React, Svelte, 또는 Vue 사용하기

Livewire로도 충분히 현대적인 프론트엔드를 구축할 수 있지만, React, Svelte, Vue의 풍부한 JavaScript 생태계와 NPM 패키지를 적극 활용하고 싶은 개발자들도 많습니다.

그러나 별도의 도구 없이 Laravel과 이러한 프레임워크를 조합하면 클라이언트 사이드 라우팅, 데이터 하이드레이션, 인증 처리 같은 복잡한 문제들을 직접 해결해야 합니다. 클라이언트 사이드 라우팅은 Next.js나 Nuxt 같은 프레임워크로 어느 정도 해소할 수 있지만, 데이터 하이드레이션과 인증은 여전히 까다로운 문제입니다.

또한 백엔드와 프론트엔드를 별도의 저장소로 관리해야 하므로, 유지보수·릴리스·배포를 양쪽에서 따로 조율해야 하는 부담도 생깁니다. 이런 구조가 불가능한 것은 아니지만, 생산적이거나 즐거운 개발 방식이라고 보기는 어렵습니다.

Inertia

이 문제를 해결해주는 것이 바로 Inertia입니다. Inertia는 Laravel과 React, Svelte, Vue 사이를 연결하는 브리지 역할을 합니다. Laravel의 라우트, 컨트롤러, 인증 체계는 그대로 유지하면서, 프론트엔드는 React, Svelte, Vue 컴포넌트로 구성할 수 있습니다. 그리고 이 모든 것을 단일 코드 저장소에서 관리합니다.

Inertia를 설치하면 라우트와 컨트롤러는 기존과 동일하게 작성합니다. 다만, Blade 템플릿 대신 Inertia 페이지를 반환합니다:

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;

class UserController extends Controller
{
    /**
     * 특정 사용자의 프로필을 표시합니다.
     */
    public function show(string $id): Response
    {
        return Inertia::render('users/show', [
            'user' => User::findOrFail($id)
        ]);
    }
}

Inertia 페이지는 React, Svelte, 또는 Vue 컴포넌트에 해당하며, 일반적으로 resources/js/pages 디렉터리에 저장됩니다. Inertia::render()로 전달한 데이터는 컴포넌트의 props로 주입됩니다:

import Layout from '@/layouts/authenticated';
import { Head } from '@inertiajs/react';

export default function Show({ user }) {
    return (
        <Layout>
            <Head title="환영합니다" />
            <h1>환영합니다</h1>
            <p>안녕하세요, {user.name} 님. Inertia에 오신 것을 환영합니다.</p>
        </Layout>
    )
}

이처럼 Inertia를 사용하면 Laravel 백엔드의 강점을 그대로 유지하면서도, 프론트엔드에서는 React, Svelte, Vue의 모든 기능을 자유롭게 활용할 수 있습니다.

서버 사이드 렌더링(SSR)

SSR이 필요하다는 이유로 Inertia 도입을 망설이고 있다면 걱정하지 않아도 됩니다. Inertia는 서버 사이드 렌더링을 공식 지원합니다. Laravel Cloud나 Laravel Forge를 통해 배포한다면, Inertia의 SSR 프로세스를 안정적으로 유지하는 것도 어렵지 않습니다.

스타터 킷

Inertia와 React, Svelte, 또는 Vue로 프론트엔드를 구성하고 싶다면, React, Svelte, Vue 애플리케이션 스타터 킷을 활용해 개발을 빠르게 시작할 수 있습니다. 이 스타터 킷들은 Inertia, React/Svelte/Vue, Tailwind, Vite를 기반으로 백엔드와 프론트엔드의 인증 흐름까지 미리 구성해 제공합니다.

에셋 번들링

Blade와 Livewire를 사용하든, React/Svelte/Vue와 Inertia를 사용하든 관계없이, 프로덕션 배포를 위해 CSS를 번들링해야 합니다. React, Svelte, Vue를 사용한다면 JavaScript 컴포넌트도 브라우저에서 실행 가능한 형태로 번들링해야 합니다.

Laravel은 기본적으로 Vite를 사용해 에셋을 번들링합니다. Vite는 로컬 개발 환경에서 빠른 빌드 속도와 거의 즉각적인 HMR(Hot Module Replacement)을 제공합니다. 새로운 Laravel 애플리케이션에는 기본적으로 vite.config.js 파일이 포함되어 있으며, 여기에는 Laravel과 Vite를 손쉽게 통합해주는 경량 Laravel Vite 플러그인이 설정되어 있습니다.

Laravel과 Vite를 가장 빠르게 시작하는 방법은 애플리케이션 스타터 킷을 사용하는 것입니다. 스타터 킷은 프론트엔드와 백엔드 인증 스캐폴딩을 미리 갖추고 있어 바로 개발에 집중할 수 있습니다.

NOTE

Vite와 Laravel을 함께 사용하는 방법에 대한 자세한 내용은 에셋 번들링 및 컴파일 전용 문서를 참고하세요.