Twig 템플릿 엔진으로 View 만들기

API 서버가 아니라 HTML 문서를 직접 렌더링해서 클라이언트에게 내려주어야 할 때가 있습니다. PHP 백엔드 로직이 HTML 뷰 코드에 지저분하게 섞이는 것을 방지하기 위해, Slim은 Twig라는 우아하고 현대적인 템플릿 엔진을 공식적으로 지원합니다.

1. Twig-View 패키지 연동

컴포저로 slim/twig-view 패키지를 설치한 뒤, DI 컨테이너에 Twig 인스턴스를 등록하면 라우트에서 손쉽게 가져와 사용할 수 있습니다.

      
      bootstrap.php
    

<?php
use Slim\Views\Twig;
use Slim\Views\TwigMiddleware;

// 1. DI 컨테이너에 Twig 뷰 엔진 등록 (.twig 파일들이 위치할 폴더 경로 지정)
$container->set('view', function() {
    return Twig::create(__DIR__ . '/../templates', ['cache' => false]);
});

$app = AppFactory::createFromContainer($container);

// 2. 뷰 안에서 Slim 라우팅 헬퍼 함수(url_for 등)를 쓰기 위해 미들웨어 장착
$app->add(TwigMiddleware::createFromContainer($app));
?>

2. 라우트에서 템플릿 렌더링 (PHP)

라우트 콜백 내부에서 DB 데이터를 조회한 뒤, $view->render() 메서드를 통해 템플릿 파일명과 함께 변수 배열을 주입합니다.

      
      index.php
    

<?php
$app->get('/profile/{name}', function ($request, $response, $args) {
    // 컨테이너에서 Twig 인스턴스 꺼내기
    $view = $this->get('view');
    
    // 주입할 데이터 배열
    $userData = [
        'name' => $args['name'],
        'role' => 'Administrator',
        'skills' => ['PHP', 'Slim Framework', 'Twig']
    ];
    
    // profile.twig 템플릿 파일에 $userData 변수를 'user' 라는 키값으로 주입하여 렌더링 반환
    return $view->render($response, 'profile.twig', ['user' => $userData]);
});
?>

3. Twig 템플릿 작성 문법 (HTML)

뷰 파일(.twig)에서는 중괄호 {{ 변수명 }} 를 통해 값을 출력하고, {% for %} 등의 구문을 통해 제어 흐름을 다룹니다.

      
      templates/profile.twig
    

<h2>반갑습니다, {{ user.name }}님!</h2>
<p>권한: {{ user.role | upper }}</p> <!-- upper 필터를 통해 대문자로 렌더링 -->

<h4>보유 기술 스택:</h4>
<ul>
{% for skill in user.skills %}
    <li>{{ skill }}</li>
{% else %}
    <li>등록된 스킬이 없습니다.</li>
{% endfor %}
</ul>

localhost:8080/profile/Minstudio

반갑습니다, Minstudio님!

권한: ADMINISTRATOR

보유 기술 스택:

PHP
Slim Framework
Twig

💡 안전한 XSS 방어 (Auto-escaping)

Twig의 {{ }} 출력 구문은 기본적으로 HTML 이스케이프 처리가 자동으로 적용됩니다. 악의적인 유저가 입력 폼에 <script> 태그를 넣어두었더라도, 브라우저에서 실행되지 않고 안전한 텍스트로 치환되어 렌더링되므로 XSS(Cross Site Scripting) 공격을 원천적으로 차단할 수 있습니다.

Twig 렌더링 결과 확인

위의 코드 실행 결과 블록에서 볼 수 있듯, $userData 배열 데이터가 Twig 엔진을 거치면서 템플릿의 변수 부분과 결합되어 완벽한 HTML 페이지로 브라우저에 렌더링 됩니다.

<?php use Slim\Views\Twig; use Slim\Views\TwigMiddleware; // 1. DI 컨테이너에 Twig 뷰 엔진 등록 (.twig 파일들이 위치할 폴더 경로 지정) $container->set('view', function() { return Twig::create(__DIR__ . '/../templates', ['cache' => false]); }); $app = AppFactory::createFromContainer($container); // 2. 뷰 안에서 Slim 라우팅 헬퍼 함수(url_for 등)를 쓰기 위해 미들웨어 장착 $app->add(TwigMiddleware::createFromContainer($app)); ?>

<?php $app->get('/profile/{name}', function ($request, $response, $args) { // 컨테이너에서 Twig 인스턴스 꺼내기 $view = $this->get('view'); // 주입할 데이터 배열 $userData = [ 'name' => $args['name'], 'role' => 'Administrator', 'skills' => ['PHP', 'Slim Framework', 'Twig'] ]; // profile.twig 템플릿 파일에 $userData 변수를 'user' 라는 키값으로 주입하여 렌더링 반환 return $view->render($response, 'profile.twig', ['user' => $userData]); }); ?>

<h2>반갑습니다, {{ user.name }}님!</h2> <p>권한: {{ user.role | upper }}</p>  <h4>보유 기술 스택:</h4> <ul> {% for skill in user.skills %} <li>{{ skill }}</li> {% else %} <li>등록된 스킬이 없습니다.</li> {% endfor %} </ul>