스타터 키트

번역일: 2026년 6월 20일

스타터 키트

소개
스타터 키트로 애플리케이션 만들기
제공되는 스타터 키트
- React
- Svelte
- Vue
- Livewire
스타터 키트 커스터마이징
- React
- Svelte
- Vue
- Livewire
인증
WorkOS AuthKit 인증
Inertia SSR
커뮤니티 스타터 키트
자주 묻는 질문

소개

새 Laravel 애플리케이션을 빠르게 시작할 수 있도록 공식 애플리케이션 스타터 키트를 제공합니다. 스타터 키트에는 사용자 등록과 인증에 필요한 라우트, 컨트롤러, 뷰가 모두 포함되어 있으며, 인증 처리는 Laravel Fortify를 기반으로 합니다.

스타터 키트는 선택 사항입니다. Laravel을 새로 설치한 후 처음부터 직접 구축해도 됩니다. 어떤 방식을 선택하든 훌륭한 애플리케이션을 만들 수 있습니다!

스타터 키트로 애플리케이션 만들기

스타터 키트를 사용하려면 먼저 PHP와 Laravel CLI 도구를 설치해야 합니다. PHP와 Composer가 이미 설치되어 있다면 Composer를 통해 Laravel 인스톨러를 전역 설치할 수 있습니다.

composer global require laravel/installer

이후 Laravel 인스톨러로 새 애플리케이션을 생성합니다. 설치 과정에서 원하는 스타터 키트를 선택할 수 있습니다.

laravel new my-app

애플리케이션이 생성되면 NPM으로 프론트엔드 의존성을 설치하고 개발 서버를 시작합니다.

cd my-app
npm install && npm run build
composer run dev

개발 서버가 시작되면 브라우저에서 http://localhost:8000으로 접속할 수 있습니다.

제공되는 스타터 키트

React

React 스타터 키트는 Inertia를 활용해 React 프론트엔드와 Laravel을 결합하는 현대적인 시작점을 제공합니다.

Inertia를 사용하면 서버 사이드 라우팅과 컨트롤러를 그대로 유지하면서 SPA 형태의 React 애플리케이션을 구축할 수 있습니다. React의 프론트엔드 생산성, Laravel의 백엔드 생산성, Vite의 빠른 빌드 속도를 한 번에 누릴 수 있습니다.

React 스타터 키트는 React 19, TypeScript, Tailwind 4, shadcn/ui 컴포넌트 라이브러리를 사용합니다.

Svelte

Svelte 스타터 키트는 Inertia를 활용해 Svelte 프론트엔드와 Laravel을 결합하는 현대적인 시작점을 제공합니다.

Inertia를 사용하면 서버 사이드 라우팅과 컨트롤러를 유지하면서 SPA 형태의 Svelte 애플리케이션을 구축할 수 있습니다.

Svelte 스타터 키트는 Svelte 5, TypeScript, Tailwind, shadcn-svelte 컴포넌트 라이브러리를 사용합니다.

Vue

Vue 스타터 키트는 Inertia를 활용해 Vue 프론트엔드와 Laravel을 결합하는 훌륭한 시작점을 제공합니다.

Inertia를 사용하면 서버 사이드 라우팅과 컨트롤러를 유지하면서 SPA 형태의 Vue 애플리케이션을 구축할 수 있습니다.

Vue 스타터 키트는 Vue 3 Composition API, TypeScript, Tailwind, shadcn-vue 컴포넌트 라이브러리를 사용합니다.

Livewire

Livewire 스타터 키트는 Laravel Livewire를 활용해 Laravel 애플리케이션을 구축하기에 최적화된 시작점입니다.

Livewire는 PHP만으로 동적이고 반응형인 UI를 구현할 수 있는 강력한 도구입니다. 주로 Blade 템플릿을 사용하는 팀이나 React, Svelte, Vue 같은 JavaScript SPA 프레임워크 대신 더 간단한 대안을 찾는 팀에 적합합니다.

Livewire 스타터 키트는 Livewire, Tailwind, Flux UI 컴포넌트 라이브러리를 사용합니다.

스타터 키트 커스터마이징

React

React 스타터 키트는 Inertia 2, React 19, Tailwind 4, shadcn/ui로 구성되어 있습니다. 다른 스타터 키트와 마찬가지로 백엔드와 프론트엔드 코드가 모두 애플리케이션 내에 포함되어 있어 자유롭게 커스터마이징할 수 있습니다.

프론트엔드 코드의 대부분은 resources/js 디렉토리에 위치합니다.

resources/js/├── components/    # 재사용 가능한 React 컴포넌트├── hooks/         # React 훅├── layouts/       # 애플리케이션 레이아웃├── lib/           # 유틸리티 함수 및 설정├── pages/         # 페이지 컴포넌트└── types/         # TypeScript 타입 정의

추가적인 shadcn 컴포넌트를 사용하려면 shadcn/ui 사이트에서 원하는 컴포넌트를 찾은 후 npx로 추가합니다.

npx shadcn@latest add switch

위 예시를 실행하면 Switch 컴포넌트가 resources/js/components/ui/switch.tsx에 생성됩니다. 이후 페이지에서 바로 사용할 수 있습니다.

import { Switch } from "@/components/ui/switch"

const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  );
};

export default MyPage;

사용 가능한 레이아웃

React 스타터 키트는 사이드바 레이아웃과 헤더 레이아웃 두 가지를 제공합니다. 기본값은 사이드바 레이아웃이며, 헤더 레이아웃으로 변경하려면 resources/js/layouts/app-layout.tsx 파일 상단의 import를 수정합니다.

import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout'; //

import AppLayoutTemplate from '@/layouts/app/app-header-layout'; //

사이드바 레이아웃은 기본(sidebar), inset, floating 세 가지 변형을 제공합니다. resources/js/components/app-sidebar.tsx 컴포넌트의 variant 속성을 변경해 원하는 스타일을 선택할 수 있습니다.

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

인증 페이지 레이아웃 변형

로그인, 회원가입 등 인증 페이지도 simple, card, split 세 가지 레이아웃 변형을 지원합니다. resources/js/layouts/auth-layout.tsx 파일 상단의 import를 수정해 변경할 수 있습니다.

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout'; //

import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout'; //

Svelte

Svelte 스타터 키트는 Inertia 2, Svelte 5, Tailwind, shadcn-svelte로 구성되어 있습니다. 모든 백엔드와 프론트엔드 코드가 애플리케이션 내에 포함되어 있어 자유롭게 커스터마이징할 수 있습니다.

프론트엔드 코드의 대부분은 resources/js 디렉토리에 위치합니다.

resources/js/├── components/    # 재사용 가능한 Svelte 컴포넌트├── layouts/       # 애플리케이션 레이아웃├── lib/           # 유틸리티 함수, 설정, Svelte rune 모듈├── pages/         # 페이지 컴포넌트└── types/         # TypeScript 타입 정의

추가적인 shadcn-svelte 컴포넌트를 사용하려면 shadcn-svelte 사이트에서 원하는 컴포넌트를 찾은 후 npx로 추가합니다.

npx shadcn-svelte@latest add switch

위 예시를 실행하면 Switch 컴포넌트가 resources/js/components/ui/switch/switch.svelte에 생성됩니다.

<script lang="ts">
    import { Switch } from '@/components/ui/switch'
</script>

<div>
    <Switch />
</div>

사용 가능한 레이아웃

Svelte 스타터 키트도 사이드바 레이아웃과 헤더 레이아웃 두 가지를 제공합니다. 헤더 레이아웃으로 변경하려면 resources/js/layouts/AppLayout.svelte 파일 상단의 import를 수정합니다.

import AppLayout from '@/layouts/app/AppSidebarLayout.svelte'; //

import AppLayout from '@/layouts/app/AppHeaderLayout.svelte'; //

사이드바 레이아웃은 기본(sidebar), inset, floating 세 가지 변형을 제공합니다. resources/js/components/AppSidebar.svelte 컴포넌트의 variant 속성을 변경해 선택할 수 있습니다.

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

인증 페이지 레이아웃 변형

인증 페이지도 simple, card, split 세 가지 레이아웃 변형을 지원합니다. resources/js/layouts/AuthLayout.svelte 파일 상단의 import를 수정해 변경할 수 있습니다.

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte'; //

import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte'; //

Vue

Vue 스타터 키트는 Inertia 2, Vue 3 Composition API, Tailwind, shadcn-vue로 구성되어 있습니다. 모든 백엔드와 프론트엔드 코드가 애플리케이션 내에 포함되어 있어 자유롭게 커스터마이징할 수 있습니다.

프론트엔드 코드의 대부분은 resources/js 디렉토리에 위치합니다.

resources/js/├── components/    # 재사용 가능한 Vue 컴포넌트├── composables/   # Vue 컴포저블 / 훅├── layouts/       # 애플리케이션 레이아웃├── lib/           # 유틸리티 함수 및 설정├── pages/         # 페이지 컴포넌트└── types/         # TypeScript 타입 정의

추가적인 shadcn-vue 컴포넌트를 사용하려면 shadcn-vue 사이트에서 원하는 컴포넌트를 찾은 후 npx로 추가합니다.

npx shadcn-vue@latest add switch

위 예시를 실행하면 Switch 컴포넌트가 resources/js/components/ui/Switch.vue에 생성됩니다.

<script setup lang="ts">
import { Switch } from '@/components/ui/switch'
</script>

<template>
    <div>
        <Switch />
    </div>
</template>

사용 가능한 레이아웃

Vue 스타터 키트도 사이드바 레이아웃과 헤더 레이아웃 두 가지를 제공합니다. 헤더 레이아웃으로 변경하려면 resources/js/layouts/AppLayout.vue 파일 상단의 import를 수정합니다.

import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; //

import AppLayout from '@/layouts/app/AppHeaderLayout.vue'; //

사이드바 레이아웃은 기본(sidebar), inset, floating 세 가지 변형을 제공합니다. resources/js/components/AppSidebar.vue 컴포넌트의 variant 속성을 변경해 선택할 수 있습니다.

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

인증 페이지 레이아웃 변형

인증 페이지도 simple, card, split 세 가지 레이아웃 변형을 지원합니다. resources/js/layouts/AuthLayout.vue 파일 상단의 import를 수정해 변경할 수 있습니다.

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'; //

import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue'; //

Livewire

Livewire 스타터 키트는 Livewire 4, Tailwind, Flux UI로 구성되어 있습니다. 모든 백엔드와 프론트엔드 코드가 애플리케이션 내에 포함되어 있어 자유롭게 커스터마이징할 수 있습니다.

프론트엔드 코드의 대부분은 resources/views 디렉토리에 위치합니다.

resources/views├── components            # 재사용 가능한 컴포넌트├── flux                  # 커스터마이징된 Flux 컴포넌트├── layouts               # 애플리케이션 레이아웃├── pages                 # Livewire 페이지├── partials              # 재사용 가능한 Blade 부분 뷰├── dashboard.blade.php   # 인증된 사용자 대시보드├── welcome.blade.php     # 비회원 환영 페이지

사용 가능한 레이아웃

Livewire 스타터 키트도 사이드바 레이아웃과 헤더 레이아웃 두 가지를 제공합니다. 헤더 레이아웃으로 변경하려면 resources/views/layouts/app.blade.php 파일을 수정하고, Flux의 메인 컴포넌트에 container 속성을 추가합니다.

<x-layouts::app.header>
    <flux:main container>
        {{ $slot }}
    </flux:main>
</x-layouts::app.header>

인증 페이지 레이아웃 변형

인증 페이지도 simple, card, split 세 가지 레이아웃 변형을 지원합니다. resources/views/layouts/auth.blade.php 파일을 수정해 변경할 수 있습니다.

<x-layouts::auth.split>
    {{ $slot }}
</x-layouts::auth.split>

인증

모든 스타터 키트는 Laravel Fortify를 사용해 인증을 처리합니다. Fortify는 로그인, 회원가입, 비밀번호 재설정, 이메일 인증 등에 필요한 라우트, 컨트롤러, 로직을 제공합니다.

Fortify는 config/fortify.php 설정 파일에서 활성화된 기능에 따라 다음 인증 라우트를 자동으로 등록합니다.

라우트	메서드	설명
`/login`	`GET`	로그인 폼 표시
`/login`	`POST`	사용자 인증 처리
`/logout`	`POST`	로그아웃 처리
`/register`	`GET`	회원가입 폼 표시
`/register`	`POST`	신규 사용자 생성
`/forgot-password`	`GET`	비밀번호 재설정 요청 폼 표시
`/forgot-password`	`POST`	비밀번호 재설정 링크 전송
`/reset-password/{token}`	`GET`	비밀번호 재설정 폼 표시
`/reset-password`	`POST`	비밀번호 업데이트
`/email/verify`	`GET`	이메일 인증 안내 표시
`/email/verify/{id}/{hash}`	`GET`	이메일 주소 인증 처리
`/email/verification-notification`	`POST`	인증 이메일 재전송
`/user/confirm-password`	`GET`	비밀번호 확인 폼 표시
`/user/confirm-password`	`POST`	비밀번호 확인 처리
`/two-factor-challenge`	`GET`	2FA 인증 폼 표시
`/two-factor-challenge`	`POST`	2FA 코드 검증

php artisan route:list Artisan 명령어로 애플리케이션에 등록된 모든 라우트를 확인할 수 있습니다.

기능 활성화 및 비활성화

config/fortify.php 설정 파일의 features 배열을 수정해 원하는 기능만 활성화할 수 있습니다.

use Laravel\Fortify\Features;

'features' => [
    Features::registration(),
    Features::resetPasswords(),
    Features::emailVerification(),
    Features::twoFactorAuthentication([
        'confirm' => true,
        'confirmPassword' => true,
    ]),
],

특정 기능을 비활성화하려면 해당 항목을 배열에서 제거하거나 주석 처리합니다. 예를 들어 공개 회원가입을 비활성화하려면 Features::registration()을 제거합니다.

NOTE

React, Svelte, Vue 스타터 키트를 사용하는 경우, 비활성화한 기능의 라우트를 참조하는 프론트엔드 코드도 함께 제거해야 합니다. 이 스타터 키트들은 빌드 시점에 라우트 정의를 생성하는 Wayfinder를 사용하기 때문에, 존재하지 않는 라우트를 참조하면 빌드가 실패합니다.

회원가입 및 비밀번호 재설정 커스터마이징

사용자가 회원가입하거나 비밀번호를 재설정할 때 Fortify는 app/Actions/Fortify 디렉토리에 있는 액션 클래스를 실행합니다.

파일	설명
`CreateNewUser.php`	신규 사용자 유효성 검사 및 생성
`ResetUserPassword.php`	비밀번호 유효성 검사 및 업데이트
`PasswordValidationRules.php`	비밀번호 유효성 검사 규칙 정의

예를 들어 회원가입 시 전화번호 필드를 추가하려면 CreateNewUser 액션을 다음과 같이 수정합니다.

public function create(array $input): User

{

    Validator::make($input, [

        'name' => ['required', 'string', 'max:255'],

        'email' => ['required', 'email', 'max:255', 'unique:users'],

        'phone' => ['required', 'string', 'max:20'], //

        'password' => $this->passwordRules(),

    ])->validate();

    return User::create([

        'name' => $input['name'],

        'email' => $input['email'],

        'phone' => $input['phone'], //

        'password' => Hash::make($input['password']),

]);

}

이중 인증(2FA)

스타터 키트는 TOTP 방식의 이중 인증(2FA)을 기본으로 지원합니다. Google Authenticator 등 TOTP 호환 인증 앱을 사용해 계정을 더 안전하게 보호할 수 있습니다. 2FA는 config/fortify.php의 Features::twoFactorAuthentication()으로 기본 활성화되어 있습니다.

confirm 옵션: 2FA를 완전히 활성화하기 전에 코드 인증을 요구합니다.
confirmPassword 옵션: 2FA 활성화 또는 비활성화 시 비밀번호 확인을 요구합니다.

자세한 내용은 Fortify 이중 인증 문서를 참고하세요.

요청 제한

요청 제한(Rate Limiting)은 브루트포스 공격이나 반복적인 로그인 시도로부터 인증 엔드포인트를 보호합니다. FortifyServiceProvider에서 다음과 같이 커스터마이징할 수 있습니다.

use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Cache\RateLimiting\Limit;

RateLimiter::for('login', function ($request) {
    return Limit::perMinute(5)->by($request->email.$request->ip());
});

WorkOS AuthKit 인증

기본적으로 React, Svelte, Vue, Livewire 스타터 키트는 모두 Laravel 내장 인증 시스템을 사용합니다. 이에 더해 WorkOS AuthKit 기반의 변형 스타터 키트도 제공하며, 다음 기능을 추가로 지원합니다.

소셜 인증 (Google, Microsoft, GitHub, Apple)
패스키(Passkey) 인증
이메일 기반 "Magic Auth"
SSO(Single Sign-On)

WorkOS를 인증 공급자로 사용하려면 WorkOS 계정이 필요합니다. WorkOS는 월간 활성 사용자 100만 명 미만의 애플리케이션에 무료로 인증 서비스를 제공합니다.

WorkOS AuthKit을 사용하려면 laravel new로 애플리케이션을 생성할 때 WorkOS 옵션을 선택하면 됩니다.

WorkOS 스타터 키트 설정

WorkOS 기반 스타터 키트로 애플리케이션을 생성한 후, .env 파일에 다음 환경 변수를 설정합니다. 값은 WorkOS 대시보드에서 확인할 수 있습니다.

WORKOS_CLIENT_ID=your-

스타터 키트

스타터 키트

소개

스타터 키트로 애플리케이션 만들기

제공되는 스타터 키트

React

Svelte

Vue

Livewire

스타터 키트 커스터마이징

React

사용 가능한 레이아웃

사이드바 변형

인증 페이지 레이아웃 변형

Svelte

사용 가능한 레이아웃

사이드바 변형

인증 페이지 레이아웃 변형

Vue

사용 가능한 레이아웃

사이드바 변형

인증 페이지 레이아웃 변형

Livewire

사용 가능한 레이아웃

인증 페이지 레이아웃 변형

인증

기능 활성화 및 비활성화

회원가입 및 비밀번호 재설정 커스터마이징

이중 인증(2FA)

요청 제한

WorkOS AuthKit 인증

WorkOS 스타터 키트 설정