1. 하이브리드 기술 스택의 핵심
최신 Laravel 프로젝트는 더 이상 한 가지 기술에 국한되지 않고, 페이지의 목적에 따라 최적의 도구를 선택할 수 있다.
- Blade: 정적인 랜딩 페이지, SEO 중심 페이지 (빠른 로딩)
- Livewire 3: 백엔드 로직 중심의 인터랙티브 페이지 (관리자 대시보드, 폼 처리)
- Inertia 2 (React): 복잡한 클라이언트 사이드 로직이 필요한 앱 수준 페이지
- Tailwind CSS v4: CSS-first 설정으로 더 빠르고 직관적인 스타일링
2. 레이아웃 구조의 단일화 (Component Pattern)
전통적인 @extends 방식 대신 컴포넌트 조립(Composition) 방식을 사용해서, 모든 레이아웃은 일관성을 위해 한 곳에서 관리한다.
레이아웃 경로: resources/views/components/layouts/
컴포넌트 방식을 사용하는 이유
- 슬롯(Slot) 기반의 유연성:
{{ $slot }}을 통해 Blade와 Livewire 콘텐츠를 구분 없이 수용할 수 있다. - Props 전달: HTML 태그처럼 속성을 넘길 수 있다. (
<x-layouts.default title="Home">) - Livewire 3 호환성: Livewire 3의 표준 레이아웃 탐색 경로와 일치.
3. 실전 레이아웃 구현
공통 레이아웃 ()
시스템 다크 모드 감지 로직과 Vite, Livewire 자산이 포함된 기본 레이아웃 코드
<!-- resources/views/components/layouts/default.blade.php -->
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" @class(['dark' => ($appearance ?? 'system') == 'dark'])>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? config('app.name') }}</title>
{{-- 다크 모드 즉시 적용 스크립트 --}}
<script>
(function() {
const appearance = '{{ $appearance ?? "system" }}';
if (appearance === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
})();
</script>
@vite(['resources/css/app.css', 'resources/js/app.tsx'])
@livewireStyles
</head>
<body class="font-sans antialiased bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<main>{{ $slot }}</main>
@livewireScripts
</body>
</html>4. 페이지별 구현 방식
Blade 페이지 (정적/랜딩)
컴포넌트 태그를 사용하여 레이아웃을 적용한다.
<!-- resources/views/welcome.blade.php -->
<x-layouts.default>
<h1>환영합니다!</h1>
<p>Blade 컴포넌트 방식으로 렌더링된 페이지입니다.</p>
</x-layouts.default>Livewire 페이지 (관리자/인터랙티브)
PHP 클래스에서 직접 레이아웃 컴포넌트를 지정.
// app/Livewire/Admin/Dashboard.php
#[Layout('components.layouts.admin')]
public function render() {
return view('livewire.admin.dashboard');
}Inertia(React) 페이지 (복잡한 UI)
라우터에서 Inertia::render를 호출하며, 루트 레이아웃(app.blade.php)을 사용합니다.
5. Tailwind 4 & 하이브리드 라우팅 팁
- Tailwind 4:
@theme디렉티브를 사용하여 CSS 내에서 직접 변수를 관리. - 라우팅:
routes/web.php에서view()와Inertia::render()를 섞어서 사용하여 하이브리드 환경 사용가능.
// routes/web.php
Route::get('/', fn() => view('welcome')); // Blade
Route::get('/app', fn() => Inertia::render('Dashboard')); // React맺음말
이 구조의 핵심은 "모든 레이아웃을 components/layouts/에 모으고 슬롯($slot)을 활용하는 것"입니다.
이를 통해 개발자는 기술 스택에 구애받지 않고 상황에 맞는 최적의 도구를 선택하여 최고의 사용자 경험을 설계할 수 있다.
반응형
'Laravel' 카테고리의 다른 글
| Laravel migrate 명령어 정리 (개발시) (0) | 2025.12.30 |
|---|---|
| Laravel에서 회원가입 메일 인증 시 Amazon SES(Amazon Simple Email Service) 설정 방법 (서울 리전 기준) (0) | 2025.11.22 |
| Cloudflare 환경에서 Laravel 세션 및 인증 설정 가이드 (0) | 2025.11.20 |
| Cafe24에서 라라벨 호스팅 방법, php8.4 + composer 설치 (0) | 2025.08.21 |
| Laravel 전용 MCP 서버 - boost (2) | 2025.08.17 |
