Wagtail 사용법

얼마 전 썼던 Wagtail vs Wordpress - 프로젝트에 적합한 CMS를 선택하는 방법에 대해 글을 작성했는데 Wagtail에 대해 직접 써보고 작성해 보고자 글을 적어봤습니다.

Wagtail vs Wordpress - 프로젝트에 적합한 CMS를 선택하는 방법

Wagtail에 대해 알게 된 배경은 한번씩 검색해 보는 Trending 에서 Python 언어로 검색했을 때 높은 순위에 있었기 떄문입니다.

 

 

Wagtail은 위에 설명과 같이 CMS(Content Management System)에 사용할 수 있는 Wordpress 같은 기능을 할 수 있는 오픈소스 솔루션이었습니다. wordpress를 써 본 적은 없지만 php 기반의 wordpress 보다는 python djanog 기반의 wagtail이 더 나을 것이란 생각을 했습니다.(개인적 취향입니다.)

 

Wordpress는 개발자가 아닌 사람들이 블로그나 간단한 소개 웹 싸이트를 만들기 쉽게 구성되어 있습니다.

하지만 커스터마이징을 위해서는 플러그인을 사용해야 하는데, 문제는 플러그인으로 인해 보안에 문제가 될 수 있다는 겁니다.

하지만 Wagtail은 Django 기반의 솔루션으로서 Wordpress와 같이 페이지를 rich text 로 작성할 수 있으면서도 그 컴포넌트들을 코드 상에 배치하고 Django framework을 이용하듯 사용할 수 있는 장점이 있습니다. 

 

Wordpress 보다 개발자 친화적이고 구성 방법도 어렵지 않습니다. 심지어 공식 문서도 잘 되어 있으니 한번 읽어 보는 것이 좋습니다. 그리고 NASA에서도 사용한다고 합니다.

Welcome to Wagtail’s documentation — Wagtail Documentation 6.0.2 documentation

 

시작하는 방법은 간단합니다.

저는 Mac OS 기준으로 작성합니다. Windows OS도 거의 비슷한데 경로 설정이나 약간의 환경적인 부분이 다를 수 있으니 유의하세요.

 

우선 가상 환경을 생성하고 가상 환경을 활성화 합니다.(프로젝트 별로 환경을 별도로 두는 것이 글로벌 환경에 영향을 덜 주고 깔끔합니다.)

# Create a virtual environment
python -m venv venv
# Activate the virtual environment
source venv/bin/activate

 

가상 환경이 활성화 되었다면 이제 라이브러리를 설치해 줍니다.

# Upgrade pip
pip install --upgrade pip
# Install Wagtail
pip install wagtail

 

이제 wagtail 라이브러리를 사용할 수 있습니다.

wagtail을 이용해 프로젝트를 생성해 보세요.

# Create a new project
wagtail start myapp
# Go into the project
cd myapp
# Install requirements
pip install -r requirements.txt

 

myapp 폴더에 들어가면 아래와 같이 폴더 구조가 보입니다.(db.sqlite3은 다음 단계에서 생성됩니다.)

 

생성된 폴더에서 필요한 라이브러리들도 모두 설치했으니 myapp/myapp/settings/base.py 에 있는 데이터베이스 설정을 원하는대로 변경해 줍니다. (변경을 하지 않아도 default로 있던 sqlite3를 그대로 사용해도 됩니다.)

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.sqlite3",
        "NAME": os.path.join(BASE_DIR, "db.sqlite3"),
    }
}

 

이제 기본 wagtail 솔루션 실행을 위한 데이터베이스 마이그레이션 및 서버 실행을 진행합니다.

python manage.py migrate
# Create superuser
python manage.py createsuperuser
# Run server
python manage.py runserver
# Open Website in browser
http://localhost:8000
# Open Admin Website in browser
http://localhost:8000/admin

 

wagtail 프로젝트를 생성할 때 이미 기본 마이그레이션을 생성해 뒀기 때문에 python manage.py makemigrations를 하지 않고 바로 python manage.py migrate를 진행한 겁니다. 아무튼 이렇게 해서 어드민 계정도 생성했고 서버도 실행하면 8000포트로 솔루션 초기 화면과 관리자 화면을 확인할 수 있습니다.

 

wagtail 본 화면은 React 초기 화면과 같이 아무런 의미가 없습니다. admin으로 들어가서 superuser 생성 때 만든 계정을 적어서 로그인 해줍니다. 어드민에 로그인하고 나면 아래와 같이 pages, images, documents, reports, settings, help 메뉴가 보입니다. (search 는 검색하는 거라서 생략)

 

페이지를 누르면 edit 아이콘이 보인느데 그걸 눌러줍니다.

 

잠시 코드로 돌아와서 myapp/home/model.py 를 아래와 같이 수정합니다.

from django.db import models

from wagtail.models import Page
from wagtail.fields import RichTextField

# import MultiFieldPanel:
from wagtail.admin.panels import FieldPanel, MultiFieldPanel


class HomePage(Page):
    # add the Hero section of HomePage:
    image = models.ForeignKey(
        "wagtailimages.Image",
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name="+",
        help_text="Homepage image",
    )
    hero_text = models.CharField(
        blank=True,
        max_length=255, help_text="Write an introduction for the site"
    )
    hero_cta = models.CharField(
        blank=True,
        verbose_name="Hero CTA",
        max_length=255,
        help_text="Text to display on Call to Action",
    )
    hero_cta_link = models.ForeignKey(
        "wagtailcore.Page",
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name="+",
        verbose_name="Hero CTA link",
        help_text="Choose a page to link to for the Call to Action",
    )

    body = RichTextField(blank=True)

    # modify your content_panels:
    content_panels = Page.content_panels + [
        MultiFieldPanel(
            [
                FieldPanel("image"),
                FieldPanel("hero_text"),
                FieldPanel("hero_cta"),
                FieldPanel("hero_cta_link"),
            ],
            heading="Hero section",
        ),
        FieldPanel('body'),
    ]

 

또한 myapp/home/templates/home/home_page.html을 아래와 같이 수정합니다.

위에 model에서 추가된 필드들을 html에서 불러오도록 맵핑해주는 작업입니다. 원래는 보여주는 것이 page.title 밖에 없었는데 page.image, page.hero_text, ... 추가 된 것을 볼 수 있습니다. 또한 가장 중요한 명시인 load wagtailcore_tags는 꼭 있어야 합니다. 이것이 있어야 내용을 보여준다고 합니다.

{% extends "base.html" %}
{% load wagtailcore_tags wagtailimages_tags %}

{% block body_class %}template-homepage{% endblock %}

{% block content %}
    <div>
        <h1>{{ page.title }}</h1>
        {% image page.image fill-480x320 %}
        <p>{{ page.hero_text }}</p>
        {% if page.hero_cta_link %}
            <a href="{% pageurl page.hero_cta_link %}">
                {% firstof page.hero_cta page.hero_cta_link.title %}
            </a>
        {% endif %}
    </div>

  {{ page.body|richtext }}
{% endblock content %}

 

위에서 model을 수정했으니 마이그레이션을 진행해줍니다.

python manage.py makemigrations
python manage.py migrate
# Create superuser
python manage.py createsuperuser
# Run server
python manage.py runserver

 

다시 실행한 화면에서 admin에 들어온 뒤 다시 page edit 화면으로 온 뒤 아래와 같이 수정해 줍니다.

이미지 추가부터 텍스트 입력 모든 것이 가능합니다. 아까 수정한 html을 이용해 다른 수정들도 또 가능합니다.

또한 body 는 입력이 RichTextField이기 때문에 텍스트 편집기 작성하듯 편하게 작성할 수 있습니다.

게다가 아래 오른쪽을 보면 프리뷰까지 보여줍니다.(모바일, 웹, 테블릿 등 환경 별로도 보여줍니다.)

 

오른쪽 상단에 라이브 버튼을 누르면 아직 프리뷰 화면에 작성한 내용이 보이지 않고 있는데,

 

이건 Pages 버튼을 눌러 페이지 목록으로 간 뒤 해당 페이지를 체크하면 아래 publish 버튼이 보이는데 이걸 클릭하면 라이브에도 반영됩니다!

 

wagtail을 이용하면 아래와 같이 문서, 이미지를 쉽게 등록하고 이것을 페이지에 보여주는 것도 자연스럽게 이용해 보여줄 수 있습니다.

 

또한 히스토리 관리도 해주고, 싸이트 설정, 유저 및 그룹 관리, 리다이렉트 등 엔터프라이즈 급의 관리를 아무 코딩 없이 바로 솔루션을 통해 사용 가능합니다. 

 

구성에 대한 이해도 직관적으로 알 수 있습니다. html에 database에서 관리되는 필드들을 저장하고 가져와 보여주는 방식입니다.

html에 등록할 때 Django 유저에 친숙하게 {{  }} 를 통해 값을 찝어 넣어주면 됩니다.

 

아직 많이 사용해 보지 않아 익숙하진 않지만 조금 더 사용하다 보면 CMS 기능을 만들 때는 이걸로 계속 만들지 않을까 생각합니다.

배포 방법은 공식 문서를 참조하면 좋습니다. Dockerfile도 있기 때문에 Dockerize 할 수 있는 방법도 제공합니다.

Wagtail이 정말 좋은 솔루션이라는 생각이 들었고 더 많이 사용하게 되서 오픈 소스가 더 발전해 나가고 모두에게 좋은 기회가 되길 기원합니다!