ServBay 환경에서 Statamic 설치 및 구성하기

Statamic은 Laravel 프레임워크 기반의 현대적 콘텐츠 관리 시스템(CMS)으로, 다양한 사이트 구축에 적합한 유연성과 강력한 기능으로 널리 사용됩니다. Statamic의 특징 중 하나는 기본적으로 파일 시스템에 콘텐츠와 설정을 저장하지만, 데이터베이스 지원 옵션도 제공한다는 점입니다.

이 문서에서는 ServBay라는 강력한 로컬 웹 개발 환경에서 Composer를 통해 Statamic을 설치하고 구성하는 방법을 단계별로 설명합니다. ServBay는 Statamic에 필요한 PHP 환경, Composer 지원, 그리고 편리한 사이트 설정 관리 기능을 모두 제공합니다.

Statamic 설치 절차

ServBay 환경에서 Statamic을 설치하는 과정은 매우 간단하고 효율적입니다. 다음 단계를 따라 진행하세요.

1단계: 프로젝트 디렉토리 생성

먼저, ServBay의 웹사이트 루트 디렉토리인 /Applications/ServBay/www에 Statamic 프로젝트를 위한 새 하위 폴더를 만듭니다. 터미널을 열고 다음 명령어를 실행하세요.

bash

cd /Applications/ServBay/www
mkdir servbay-statamic-app
cd servbay-statamic-app

이 명령으로 ServBay의 기본 웹사이트 루트 디렉토리로 이동한 뒤 servbay-statamic-app이라는 새 폴더를 만들고, 해당 폴더로 진입합니다.

2단계: Composer로 Statamic 프로젝트 생성

ServBay에는 Composer가 이미 내장되어 있습니다. Composer는 PHP 의존성 관리를 위한 도구로, 별도의 추가 설치 없이 즉시 사용할 수 있습니다.

방금 만든 servbay-statamic-app 디렉토리에서 아래 Composer 명령어를 실행하세요.

bash

composer create-project statamic/statamic .

이 명령은 Composer가 Statamic의 최신 버전과 모든 필요한 의존성을 현재 디렉토리(.)에 다운로드하여 설치하도록 합니다. 다운로드와 설치가 완료될 때까지 잠시 기다려주세요.

3단계: 웹 서버 구성(ServBay에서 사이트 추가)

Statamic 프로젝트를 ServBay에서 호스팅하려면, ServBay 애플리케이션에 새 웹사이트 구성을 추가해야 합니다.

ServBay 앱 실행: ServBay 데스크톱 앱을 시작합니다.
‘사이트’ 탭 이동: ServBay 인터페이스 상단에서 ‘사이트’ 탭을 클릭합니다(구버전에서는 ‘호스트’로 표시될 수 있습니다).
새 사이트 추가: 좌측 하단의 ‘플러스(+)’ 버튼을 눌러 새 사이트 구성을 추가합니다.
사이트 정보 입력: 팝업 창에 다음 정보를 입력하세요.
- 이름: 식별하기 쉬운 이름(예: My Statamic Site)을 입력합니다.
- 도메인: 로컬 개발용 도메인을 입력합니다. .local로 끝나는 도메인이 좋으며, 예를 들어 servbay-statamic.local로 지정합니다. ServBay가 자동으로 로컬 DNS 해석을 구성합니다.
- 사이트 유형: PHP를 선택합니다.
- PHP 버전: Statamic 프로젝트와 호환되는 PHP 버전을 선택합니다(일반적으로 최신 안정 버전 권장).
- 사이트 루트 디렉토리: 매우 중요한 단계입니다. Statamic의 진입 파일 index.php는 프로젝트 내 public 하위 폴더에 있습니다. 사이트 루트 디렉토리를 반드시 /Applications/ServBay/www/servbay-statamic-app/public로 지정하세요.
설정 저장 및 적용: 정보를 모두 입력한 후 ‘저장’ 버튼을 클릭합니다. ServBay가 변경사항 적용을 위해 서비스 재시작을 요청할 수 있으니, 안내에 따라 웹 서버(기본은 Caddy 또는 Nginx)를 재시작해 새 사이트 구성이 적용되도록 합니다.

4단계: Statamic 환경 설정

프로젝트 루트 디렉토리에서 Statamic은 .env 파일을 통한 환경설정(앱 키, DB 연결 등)을 관리합니다.

환경 파일 복사: Statamic 프로젝트에는 기본 설정 템플릿인 .env.example 파일이 있습니다. 터미널에서 여전히 /Applications/ServBay/www/servbay-statamic-app에 있는지 확인한 뒤, 아래 명령어로 파일을 복사하세요.
bash
```
cp .env.example .env
```
1
앱 키 생성: Laravel/Statamic은 세션 등 보안용으로 유니크한 앱 키를 필요로 합니다. 루트 디렉토리에서 Artisan 명령어로 키를 생성하세요.
bash
```
php artisan key:generate
```
1
이 명령은 .env 파일의 APP_KEY 값을 자동으로 생성 및 입력해줍니다.

5단계: Statamic 실행 및 접속

이제 ServBay에서 Statamic 웹사이트가 정상적으로 구성 및 실행되었습니다.

Statamic 접속: 웹 브라우저를 열고 3단계에서 구성한 도메인(예: https://servbay-statamic.local)으로 접속하세요. ServBay는 로컬 사이트에 자동으로 SSL 인증서(ServBay User CA 또는 ServBay Public CA 이용)를 발급하니, HTTPS로 안전하게 접속할 수 있습니다. Statamic의 환영 페이지가 나타나야 정상입니다.
관리 패널 접속: Statamic의 관리자 패널은 일반적으로 /cp 경로에서 접근합니다. 브라우저에서 https://servbay-statamic.local/cp로 이동하면 로그인 또는 초기 설정 화면이 나옵니다.
관리자 계정 생성: 첫 접속 시, 시스템 안내에 따라 관리자 아이디, 비밀번호, 이메일을 입력하여 계정을 생성하세요. 해당 절차를 마치면 관리자 로그인 및 Statamic 웹사이트 관리를 시작할 수 있습니다.

6단계: 플러그인 및 테마 설치(선택 사항)

Statamic은 다양한 플러그인과 테마로 기능 및 디자인 확장이 가능합니다.

플러그인 설치: Statamic 관리자 패널에서(보통 좌측 네비게이션 메뉴) 플러그인 관리 메뉴로 이동하여 설치할 수 있습니다. 또는 Composer 명령어를 이용해 설치하는 것도 가능합니다.
테마 설치: 테마 역시 관리자 패널을 통해 설치하거나, 테마 파일을 지정된 디렉토리에 직접 복사하는 방식으로 적용할 수 있습니다.

Statamic으로 사이트 구축하기

Statamic 설치와 기본 설정까지 마쳤다면, 이제 다양한 기능을 활용해 본격적으로 웹사이트를 만들 수 있습니다. 다음은 기본적인 사용 안내입니다.

콘텐츠 및 컬렉션 만들기

Statamic은 ‘컬렉션(Collections)’을 통해 콘텐츠를 구조화합니다. 이는 전통적인 CMS의 게시글 유형 및 페이지 유형과 비슷합니다.

컬렉션 생성: 관리자 패널에서 ‘콘텐츠’ → ‘컬렉션’으로 이동한 후 ‘컬렉션 만들기’를 클릭합니다. 필요한 이름(예: Posts, Pages) 및 기타(라우팅 구조, 필드 블루프린트 등) 설정을 지정하세요.
콘텐츠 항목 추가: 생성한 컬렉션 아래에서 ‘새로 만들기’ 버튼을 이용해 실제 콘텐츠(블로그 글, 페이지 등)를 추가할 수 있습니다. 해당 컬렉션에 정의된 필드를 따라 내용을 입력하세요.

네비게이션 메뉴 설정

사이트의 네비게이션 메뉴 생성 및 관리도 가능합니다.

네비게이션 생성: 관리자 패널에서 ‘콘텐츠’ → ‘네비게이션’ 메뉴로 이동해 ‘네비게이션 만들기’를 클릭하고, 이름(예: Main Navigation)을 지정하세요.
네비게이션 항목 추가: 생성한 네비게이션에 컬렉션의 콘텐츠 또는 개별 페이지를 드래그 앤 드롭 방식으로 구조화할 수 있습니다.

템플릿 및 스타일 커스터마이즈

Statamic은 Laravel 기반이므로, Blade 템플릿 엔진을 이용해 레이아웃과 콘텐츠 렌더링을 자유롭게 제어할 수 있습니다.

템플릿 수정: 사이트 뷰 파일은 보통 루트의 resources/views 디렉토리에 위치합니다. Statamic의 템플릿 구조(대개 layouts, partials, collections 등 폴더) 및 Blade 파일(.blade.php)을 직접 수정하여 페이지 HTML 레이아웃을 커스터마이징할 수 있습니다. 예를 들어 전체 구조를 변경하려면 resources/views/layouts/default.blade.php를 편집하세요.

html

<!-- resources/views/layouts/default.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'My Statamic Site' }}</title>
    {{-- 빌드된 CSS 참조 --}}
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <header>
        {{-- 예시: 'main_navigation' 네비게이션 렌더링 --}}
        @inject('nav', 'Statamic\View\ViewServiceProvider')
        @if ($main_navigation = $nav->navigation('main_navigation'))
            <nav>
                <ul>
                    @foreach ($main_navigation->tree() as $item)
                        <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                    @endforeach
                </ul>
            </nav>
        @endif
    </header>
    <main>
        {{-- 현재 페이지 콘텐츠 렌더링 --}}
        @yield('content')
    </main>
    {{-- 빌드된 JavaScript 참조 --}}
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

스타일 및 스크립트 추가: Statamic 프로젝트는 일반적으로 Laravel Mix, Vite 등 프론트엔드 빌드 툴을 연동합니다. 원본 CSS/JS 파일은 각각 resources/css, resources/js 폴더에 위치합니다.

예를 들어, resources/css/app.css에 스타일을 추가할 수 있습니다.

css

/* resources/css/app.css */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 20px;
}
nav ul {
    list-style: none;
    padding: 0;
}
nav ul li {
    display: inline;
    margin-right: 15px;
}

JavaScript는 resources/js/app.js 파일에 작성하세요.

javascript

// resources/js/app.js
console.log('Statamic frontend assets loaded!');

// 예시: 간단한 인터랙션
document.addEventListener('DOMContentLoaded', function() {
    const navItems = document.querySelectorAll('nav li a');
    navItems.forEach(item => {
        item.addEventListener('mouseover', () => {
            console.log(`Hovering over: ${item.textContent}`);
        });
    });
});

프론트엔드 리소스 빌드: 작성한 CSS/JS 파일을 브라우저에서 사용 가능한 형태로 변환하려면 프론트 빌드 명령어를 실행해야 합니다. Statamic 프로젝트에는 일반적으로 package.json 파일이 포함되어 있으므로, npm 또는 yarn으로 의존 패키지 설치 및 빌드가 가능합니다. ServBay는 Node.js를 지원하므로 아래 절차를 바로 수행할 수 있습니다.
bash
```
npm install
npm run dev
```
1
2
npm install은 package.json에 정의된 모든 프론트엔드 의존성을 설치(Laravel Mix/Vite, Tailwind CSS, Vue/React 등 포함), npm run dev는 개발용 번들을 빌드합니다(미니파이 없이 디버깅용 소스맵 포함). 운영환경 배포용으로는 npm run prod 또는 npm run build 명령을 사용하세요.

마무리

여기까지의 절차를 따라 ServBay라는 강력한 로컬 개발 환경에서 Statamic CMS 설치 및 기본 설정까지 모두 완료했습니다. ServBay가 제공하는 통합 개발 환경(PHP, Composer, 웹서버, 쉬운 사이트 관리, Node.js 지원 등)은 Statamic의 로컬 개발 과정을 크게 간소화시킵니다. 이제 Statamic의 유연한 파일 기반 구조와 다양한 기능을 토대로, 여러분만의 웹사이트를 손쉽게 구축하고 빠르게 반복 개발할 수 있습니다.

ServBay 환경에서 Statamic 설치 및 구성하기 ​

Statamic 설치 절차 ​

1단계: 프로젝트 디렉토리 생성 ​

2단계: Composer로 Statamic 프로젝트 생성 ​

3단계: 웹 서버 구성(ServBay에서 사이트 추가) ​

4단계: Statamic 환경 설정 ​

5단계: Statamic 실행 및 접속 ​

6단계: 플러그인 및 테마 설치(선택 사항) ​

Statamic으로 사이트 구축하기 ​

콘텐츠 및 컬렉션 만들기 ​

네비게이션 메뉴 설정 ​

템플릿 및 스타일 커스터마이즈 ​

마무리 ​