프론트엔드

번역일: 2026년 6월 20일

프론트엔드

소개
PHP 방식
Vue / React 방식
- Inertia
- 스타터 킷
에셋 번들링

소개

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

Laravel 애플리케이션에서 프론트엔드를 구성하는 방법은 크게 두 가지입니다. PHP(Blade/Livewire) 중심으로 개발하는 방법과 Vue·React 같은 JavaScript 프레임워크를 활용하는 방법입니다. 각 방식의 특징을 이해하고 프로젝트에 맞는 접근법을 선택하세요.

PHP 방식

PHP와 Blade

과거 PHP 애플리케이션의 대부분은 HTML 템플릿에 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 템플릿만으로도 많은 애플리케이션을 충분히 구축할 수 있으며, 지금도 이 방식은 널리 사용됩니다.

더 높아진 사용자 기대치

웹 애플리케이션에 대한 사용자 기대치가 높아지면서, 페이지 전체 새로고침 없이 동작하는 부드러운 인터랙션을 구현해야 하는 필요성이 커졌습니다. 이에 따라 많은 개발자가 Vue나 React 같은 JavaScript 프레임워크로 프론트엔드를 구성하는 방향으로 전환하기 시작했습니다.

한편, 익숙한 백엔드 언어를 그대로 유지하면서도 현대적인 UI를 만들고 싶은 개발자들을 위한 해결책도 등장했습니다. Ruby on Rails 생태계에서 Turbo, Hotwire, Stimulus가 탄생한 것이 대표적인 예입니다.

Laravel 생태계에서는 이러한 필요를 충족하기 위해 Laravel Livewire와 Alpine.js가 만들어졌습니다.

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 속성을 사용하면 프론트엔드 이벤트와 백엔드 메서드를 연결할 수 있습니다. 컴포넌트의 현재 상태는 일반 Blade 표현식으로 출력됩니다.

Livewire 덕분에 많은 개발자가 JavaScript 프레임워크로 전환하지 않고도 Laravel 안에서 동적인 웹 애플리케이션을 개발할 수 있게 되었습니다. Livewire를 사용할 때는 다이얼로그 창 표시처럼 꼭 필요한 곳에만 Alpine.js를 가볍게 곁들이는 방식이 일반적입니다.

NOTE

Livewire가 처음이라면 먼저 뷰와 Blade 기본 사용법을 익힌 뒤, Livewire 공식 문서를 참고하여 인터랙티브 컴포넌트 개발로 나아가길 권장합니다.

스타터 킷

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

Vue / React 방식

Livewire가 강력한 선택지이긴 하지만, Vue나 React를 선호하는 개발자도 많습니다. NPM 생태계의 방대한 JavaScript 패키지와 도구를 그대로 활용할 수 있다는 점이 큰 장점입니다.

다만 별도의 연결 도구 없이 Laravel과 Vue/React를 조합하면 다음과 같은 복잡한 문제들이 생깁니다.

클라이언트 사이드 라우팅: Nuxt나 Next.js 같은 프레임워크로 어느 정도 해결할 수 있습니다.
데이터 하이드레이션: 서버에서 가져온 데이터를 프론트엔드 컴포넌트에 주입하는 과정이 번거롭습니다.
인증 처리: 백엔드와 프론트엔드가 분리되면 인증 흐름을 따로 구현해야 합니다.

또한 백엔드와 프론트엔드를 별도의 저장소로 관리하면 유지보수, 릴리스, 배포를 각각 조율해야 하는 부담이 생깁니다. 이런 문제들을 해결하는 것이 불가능하지는 않지만, 개발 생산성과 즐거움을 크게 떨어뜨릴 수 있습니다.

Inertia

Inertia는 이 문제를 우아하게 해결해 줍니다. Laravel의 라우트·컨트롤러 구조를 그대로 유지하면서 Vue나 React로 현대적인 프론트엔드를 개발할 수 있게 해주는 브릿지 역할을 합니다. 단일 코드 저장소 안에서 라우팅, 데이터 하이드레이션, 인증을 모두 Laravel이 처리하고, 화면 렌더링은 Vue/React 컴포넌트가 담당합니다.

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를 사용하면 Laravel 백엔드의 강점은 그대로 유지하면서 Vue/React의 풍부한 프론트엔드 생태계를 온전히 활용할 수 있습니다.

서버 사이드 렌더링(SSR)

SEO나 초기 로딩 속도를 위해 SSR이 필요한 경우에도 걱정할 필요가 없습니다. Inertia는 서버 사이드 렌더링을 공식 지원합니다. Laravel Forge로 배포할 경우 SSR 프로세스를 상시 실행 상태로 유지하는 설정도 간단하게 처리할 수 있습니다.

스타터 킷

Inertia와 Vue/React 조합으로 개발을 시작하려면 Breeze 또는 Jetstream 스타터 킷을 활용하세요. 두 스타터 킷 모두 Inertia, Vue/React, Tailwind CSS, Vite를 기반으로 인증 흐름을 포함한 기본 구조를 자동으로 생성해 줍니다.

에셋 번들링

Blade/Livewire 방식이든 Vue/React + Inertia 방식이든, 프로덕션 배포를 위해 CSS와 JavaScript 에셋을 번들링해야 합니다.

Laravel은 기본적으로 Vite를 사용합니다. Vite는 로컬 개발 중 거의 즉각적인 빌드 속도와 HMR(Hot Module Replacement)을 제공합니다. 새로 생성한 모든 Laravel 애플리케이션(스타터 킷 포함)에는 Laravel과 Vite의 연동을 담당하는 경량 플러그인이 설정된 vite.config.js 파일이 포함되어 있습니다.

Laravel과 Vite를 가장 빠르게 시작하는 방법은 Laravel Breeze 스타터 킷을 사용하는 것입니다. Breeze는 프론트엔드·백엔드 인증 스캐폴딩을 함께 제공하는 가장 가벼운 스타터 킷입니다.

NOTE

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