프론트엔드

업데이트됨

번역일: 2026년 6월 20일

이 페이지는 원문이 업데이트되어 번역이 갱신되었습니다.

원문 수정: 2026년 6월 20일
번역 갱신: 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를 이용해 이와 동일한 방식으로 HTML을 렌더링할 수 있습니다. 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의 특정 영역을 담당하는 Livewire "컴포넌트"를 만들고, 프론트엔드에서 호출할 수 있는 메서드와 데이터를 정의합니다. 예를 들어, 간단한 카운터 컴포넌트는 다음과 같이 작성할 수 있습니다.

<?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처럼 Livewire가 제공하는 HTML 속성을 통해 프론트엔드와 백엔드를 자연스럽게 연결할 수 있습니다. 컴포넌트의 현재 상태는 익숙한 Blade 표현식으로 렌더링됩니다.

많은 개발자들이 Livewire를 통해 Laravel의 편안함을 유지하면서도 현대적인 동적 웹 애플리케이션을 만들 수 있게 되었습니다. 보통 Livewire와 함께 Alpine.js를 곁들여, 다이얼로그 창 표시처럼 꼭 필요한 부분에만 선택적으로 JavaScript를 추가하는 방식을 많이 사용합니다.

Laravel을 처음 시작한다면 먼저 뷰와 Blade의 기본 사용법에 익숙해진 후, Laravel Livewire 공식 문서를 참고해 대화형 컴포넌트로 애플리케이션을 한 단계 발전시켜 보세요.

스타터 킷

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

React, Svelte, Vue 방식

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

그러나 이런 JavaScript 프레임워크를 Laravel과 함께 사용할 때는 클라이언트 사이드 라우팅, 데이터 하이드레이션, 인증 처리 등 복잡한 문제들을 직접 해결해야 합니다. 클라이언트 사이드 라우팅은 Next.js나 Nuxt 같은 프레임워크로 어느 정도 해소할 수 있지만, 데이터 하이드레이션과 인증 문제는 여전히 번거롭습니다.

또한 백엔드와 프론트엔드를 별도의 코드 저장소로 관리하게 되면, 유지보수·릴리스·배포를 양쪽에서 동시에 조율해야 하는 부담도 생깁니다. 불가능한 일은 아니지만, 개발 생산성과 즐거움 면에서 이상적인 방식은 아닙니다.

Inertia

Inertia는 이 두 가지 방식의 장점을 모두 누릴 수 있게 해주는 다리 역할을 합니다. 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와 JavaScript 에셋을 번들링해야 합니다.

Laravel은 기본적으로 Vite를 번들러로 사용합니다. Vite는 로컬 개발 환경에서 매우 빠른 빌드 속도와 거의 즉각적인 HMR(Hot Module Replacement)을 제공합니다. 새로운 Laravel 프로젝트에는 기본적으로 vite.config.js 파일이 포함되어 있으며, 경량 Laravel Vite 플러그인이 설정되어 있어 Laravel과 Vite를 쉽고 쾌적하게 함께 사용할 수 있습니다.

Laravel과 Vite를 가장 빠르게 시작하는 방법은 스타터 킷을 활용하는 것입니다. 스타터 킷은 프론트엔드와 백엔드 인증 스캐폴딩을 포함해 개발을 즉시 시작할 수 있는 환경을 제공합니다.

NOTE

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