Django 프로젝트에 django-material 적용하는 방법

Material Design은 개발자들 사이에서 가장 인기 있는 디자인 템플릿 중 하나입니다. 일반적으로 프론트엔드에서 CDN 방식으로 사용되며, 깔끔하고 직관적인 UI를 손쉽게 구현할 수 있도록 도와줍니다. 이 글에서는 Material Design을 Django의 폼 위젯(form widget)에 적용하고, 뷰(view)를 통해 해당 폼을 화면에 렌더링하는 방법을 단계별로 살펴보겠습니다.

django-material이란?

django-material은 CDN 없이도 렌더링되는 HTML 파일이나 폼 위젯에 자동으로 Material Design 스타일을 적용해 주는 파이썬 라이브러리입니다. 별도의 외부 리소스 연동 없이 패키지 설치만으로 세련된 UI를 만들 수 있다는 점이 큰 장점입니다.

1. django-material 설치

먼저 pip 명령어로 django-material 패키지를 설치합니다.

pip install django-material

그다음 프로젝트와 앱을 생성하고 URL 설정까지 마쳐주세요. 이 예제에서는 앱 이름을 "myapp"으로 사용합니다.

2. settings.py 설정

settings.py 파일의 INSTALLED_APPS에 'material'을 추가합니다.

INSTALLED_APPS += ['material']

3. 모델(Model) 작성

models.py에 아래와 같이 간단한 모델을 생성합니다. 이 모델은 이후 폼에서 사용됩니다.

from django.db import models

# Create your models here.
class Data(models.Model):
    Name = models.CharField(max_length=100)
    salary = models.CharField(max_length=20)

여기서는 이름(Name)과 급여(salary) 필드를 가진 기본적인 Django 모델을 만들었습니다.

4. URL 설정

urls.py에서 홈 URL에 뷰를 연결합니다.

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name="home"),
]

이렇게 하면 루트 경로('/')로 접속했을 때 home 뷰가 실행됩니다.

5. 뷰(View) 및 폼 작성

views.py에서 ModelForm을 생성하고 요청을 처리합니다.

from django.shortcuts import render
from django import forms
from .models import Data

class SalaryForm(forms.ModelForm):
    class Meta:
        model = Data
        fields = "__all__"

def home(request):
    if request.method == 'POST':
        form = SalaryForm(request.POST)
        if form.is_valid():
            form.save()
    else:
        form = SalaryForm()

    return render(request, 'home.html', {'form': form})

위 코드는 Data 모델을 기반으로 한 ModelForm을 정의하고, POST 요청 시 데이터 유효성을 검사한 뒤 저장하며, GET 요청 시에는 빈 폼을 템플릿에 전달합니다.

템플릿을 담을 templates 폴더를 만들고 그 안에 home.html 파일을 생성하는 것도 잊지 마세요.

6. 템플릿(Template) 작성

home.html에 아래 내용을 작성합니다.

{% include 'material/includes/material_css.html' %} # 이 두 include 문은
{% include 'material/includes/material_js.html' %} # material design을 임포트합니다
<!DOCTYPE html>
<html>
    <head>
        <title>
            TUT
        </title>
        <style>

        </style>
    </head>
    <body>

        <h2>FORM</h2>
        <form action="/" method="post">
            {% csrf_token %}
            {{ form }}
            <input type="submit" value="Submit">
        </form>
    </body>

</html>

여기서는 프론트엔드 페이지를 구성하고, django-material의 CSS와 JS를 로드했습니다. 이렇게 하면 Material Design이 폼에 자동으로 적용되어 별도의 스타일링 작업 없이도 세련된 입력 폼이 완성됩니다.

실행 결과

Django 프로젝트에 django-material 적용하는 방법 – 단계별 완벽 가이드

서버를 실행한 후 브라우저에서 확인하면, Material Design이 적용된 폼을 볼 수 있습니다.

추가 팁: CSS 커스터마이징

기본 Material 스타일을 그대로 사용하지 않고 싶다면 템플릿의 <style> 태그를 활용해 CSS를 재정의(오버라이드)할 수 있습니다. 이를 통해 프로젝트의 브랜드 컬러나 레이아웃에 맞게 디자인을 자유롭게 조정할 수 있습니다.