프론트엔드

번역일: 2026년 6월 20일

프론트엔드

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

소개

Laravel은 라우팅, 유효성 검사, 캐시, 큐, 파일 스토리지 등 현대적인 웹 애플리케이션 개발에 필요한 기능을 모두 갖춘 백엔드 프레임워크입니다. 동시에 프론트엔드 개발 경험도 중요하다고 생각하기 때문에, Laravel은 강력한 프론트엔드 구축 방식도 함께 제공합니다.

Laravel에서 프론트엔드를 구성하는 방법은 크게 두 가지입니다. PHP 기반으로 처리하거나, Vue·React 같은 JavaScript 프레임워크를 활용하는 방식입니다. 각각의 접근 방식을 살펴보고 프로젝트에 맞는 방향을 선택해 보세요.

PHP 사용하기

PHP와 Blade

과거 PHP 애플리케이션 대부분은 HTML 템플릿에 PHP echo 구문을 섞어 데이터베이스에서 가져온 데이터를 브라우저에 직접 출력하는 방식을 사용했습니다:

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

Laravel에서도 뷰와 Blade를 이용해 동일한 방식으로 HTML을 렌더링할 수 있습니다. Blade는 데이터 출력, 반복, 조건 처리 등을 간결한 문법으로 표현할 수 있는 경량 템플릿 엔진입니다:

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

이 방식에서는 폼 제출이나 페이지 간 이동 시 서버에서 새로운 HTML 문서 전체를 내려받아 브라우저가 페이지 전체를 다시 렌더링합니다. 비교적 단순한 서비스나 어드민 도구처럼 화려한 인터랙션이 필요 없는 경우에는 Blade 템플릿만으로도 충분히 완성도 있는 애플리케이션을 만들 수 있습니다.

높아지는 사용자 기대치

그러나 웹 애플리케이션에 대한 사용자 기대치가 높아지면서, 더 세련되고 동적인 인터랙션이 필요해졌습니다. 이에 따라 많은 개발자들이 Vue나 React 같은 JavaScript 프레임워크로 프론트엔드를 구축하기 시작했습니다.

반면, 익숙한 백엔드 언어에서 벗어나고 싶지 않은 개발자들을 위해 백엔드 언어만으로도 현대적인 UI를 구현할 수 있는 솔루션들이 등장했습니다. Ruby on Rails 생태계의 Turbo나 Stimulus가 대표적인 예입니다.

Laravel 생태계에서는 이러한 흐름에 맞춰 Laravel Livewire와 Alpine.js가 탄생했습니다. PHP를 주로 사용하면서도 동적이고 현대적인 프론트엔드를 구현할 수 있게 해주는 도구들입니다.

Livewire

Laravel Livewire는 Vue나 React로 만든 프론트엔드처럼 동적이고 생동감 있는 UI를 PHP 기반으로 구현할 수 있게 해주는 프레임워크입니다.

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

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

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

    public function render()
    {
        return view('livewire.counter');
    }
}

그에 대응하는 Blade 템플릿은 다음과 같습니다:

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

wire:click처럼 Livewire가 제공하는 HTML 속성을 통해 프론트엔드와 백엔드가 자연스럽게 연결됩니다. 버튼을 클릭하면 PHP 메서드가 호출되고, 변경된 상태가 Blade 표현식을 통해 화면에 자동으로 반영됩니다. 별도의 JavaScript API 호출 코드를 작성하지 않아도 됩니다.

Livewire는 Laravel 개발자가 JavaScript 프레임워크를 배우지 않고도 모던 웹 앱을 만들 수 있게 해주는 강력한 선택지입니다. 다이얼로그 창처럼 꼭 필요한 곳에만 Alpine.js를 조금씩 곁들이는 방식도 일반적으로 많이 사용됩니다.

Laravel을 처음 접한다면 먼저 뷰와 Blade 기본 사용법을 익힌 후, Laravel Livewire 공식 문서를 참고해 인터랙티브한 컴포넌트 개발로 나아가 보세요.

스타터 킷

PHP와 Livewire 기반으로 프론트엔드를 구성하고 싶다면, Breeze 또는 Jetstream 스타터 킷을 활용해 빠르게 시작할 수 있습니다. 두 스타터 킷 모두 Blade와 Tailwind CSS를 기반으로 인증 관련 백엔드·프론트엔드 코드를 자동으로 생성해 주므로, 핵심 기능 개발에 바로 집중할 수 있습니다.

Vue / React 사용하기

Livewire로도 충분히 현대적인 프론트엔드를 만들 수 있지만, NPM 생태계의 풍부한 JavaScript 패키지와 도구를 활용하고 싶다면 Vue나 React를 선택하는 것도 자연스러운 방향입니다.

다만 별도의 도구 없이 Laravel과 Vue / React를 조합하면 몇 가지 복잡한 문제를 직접 해결해야 합니다. 클라이언트 사이드 라우팅은 Nuxt나 Next.js 같은 프레임워크로 어느 정도 해결할 수 있지만, 데이터 하이드레이션과 인증 처리는 백엔드와 프론트엔드를 별도 레포지토리로 관리할 때 특히 번거롭습니다.

두 레포지토리를 따로 유지보수하고, 배포 타이밍을 맞추는 작업은 생산성과 개발 경험 모두를 떨어뜨립니다.

Inertia

Inertia는 이런 문제를 해결해 주는 다리 역할을 합니다. Inertia를 사용하면 Laravel의 라우트와 컨트롤러를 그대로 활용하면서, Vue나 React로 완성도 높은 SPA 스타일 프론트엔드를 단일 레포지토리 안에서 구현할 수 있습니다. 라우팅, 데이터 하이드레이션, 인증까지 모두 Laravel이 처리합니다.

Inertia를 설치한 후에도 라우트와 컨트롤러는 평소와 동일하게 작성합니다. 다만 컨트롤러에서 Blade 템플릿 대신 Inertia 페이지를 반환합니다:

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;

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

Inertia 페이지는 주로 resources/js/Pages 디렉터리에 위치하는 Vue 또는 React 컴포넌트입니다. Inertia::render()로 전달한 데이터는 컴포넌트의 props로 자동 주입됩니다:

<script setup>
import Layout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/vue3';

const props = defineProps(['user']);
</script>

<template>
    <Head title="사용자 프로필" />

    <Layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                프로필
            </h2>
        </template>

        <div class="py-12">
            안녕하세요, {{ user.name }} 님
        </div>
    </Layout>
</template>

이처럼 Inertia를 사용하면 Vue / React의 풍부한 UI 표현력과 Laravel 백엔드의 편리함을 동시에 누릴 수 있습니다.

서버 사이드 렌더링(SSR)

SSR이 필요한 프로젝트에서도 걱정할 필요가 없습니다. Inertia는 서버 사이드 렌더링을 공식 지원합니다. Laravel Forge를 통해 배포하는 경우, SSR 프로세스를 안정적으로 유지하는 설정도 간단하게 처리할 수 있습니다.

스타터 킷

Inertia와 Vue / React 조합으로 시작하고 싶다면 Breeze 또는 Jetstream 스타터 킷을 활용하세요. 두 스타터 킷 모두 Inertia, Vue / React, Tailwind CSS, Vite 기반으로 인증 플로우를 포함한 초기 구조를 자동으로 생성해 주어 빠르게 개발을 시작할 수 있습니다.

에셋 번들링

Blade + Livewire 조합을 선택하든, Vue / React + Inertia 조합을 선택하든, CSS를 프로덕션용으로 번들링하는 과정은 공통으로 필요합니다. Vue나 React를 사용한다면 JavaScript 컴포넌트를 브라우저가 실행할 수 있는 형태로 번들링하는 작업도 함께 필요합니다.

Laravel은 기본적으로 Vite를 에셋 번들러로 사용합니다. Vite는 빠른 빌드 속도와 거의 즉각적인 HMR(Hot Module Replacement)을 제공해 로컬 개발 경험을 크게 향상시킵니다. 새로 생성한 Laravel 프로젝트에는 스타터 킷 포함 여부와 관계없이 vite.config.js 파일이 기본으로 포함되어 있으며, Laravel Vite 플러그인이 로드되어 있습니다.

Vite를 빠르게 체험하려면 Laravel Breeze로 프로젝트를 시작해 보세요. 인증 스캐폴딩과 프론트엔드 초기 구조가 함께 구성되어 있어 가장 빠르게 개발을 시작할 수 있습니다.

NOTE

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