Django

Chapter 8-3 Django 회원가입 페이지 만들기 (정적 파일 + 폼 커스텀 + 뷰 구현)

Chansman 2025. 5. 12. 20:14

Django 회원가입 페이지 만들기 (정적 파일 + 폼 커스텀 + 뷰 구현)

Django에서 Bootstrap 기반의 회원가입 페이지를 구현하기 위해 필요한 설정부터 폼 처리, 뷰 구성, 템플릿 작성까지의 전체 흐름을 정리합니다.

✅ 1. 정적 파일(static) 설정

  1. static 폴더를 프로젝트 루트(manage.py와 같은 위치)에 생성합니다.
  2. Bootstrap CSS/JS 파일을 다운로드하여 static/css, static/js 경로에 넣습니다.
  3. settings.py에 다음 설정을 추가합니다:
STATIC_URL = 'static/'
STATIC_DIR = BASE_DIR / 'static'
STATICFILES_DIRS = [STATIC_DIR]
STATIC_ROOT = BASE_DIR / '.static_root'

📎 Bootstrap 다운로드

 

4.root폴더에 static 만들고 Bootstrap CSS/JS 파일을 다운로드하여 static/css, static/js 경로에 넣습니다.

✅ 2. 회원가입 폼 커스텀 (forms.py)

from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth.forms import UserCreationForm

User = get_user_model()

class SignupForm(UserCreationForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for field in ('password1', 'password2'):
            self.fields[field].widget.attrs['class'] = 'form-control'
            self.fields[field].widget.attrs['placeholder'] = 'password'
            self.fields[field].label = '비밀번호' if field == 'password1' else '비밀번호 확인'

    class Meta(UserCreationForm.Meta):
        model = User
        fields = ('email', 'nickname')
        labels = {'email': '이메일', 'nickname': '닉네임'}
        widgets = {
            'email': forms.EmailInput(attrs={'placeholder': 'example@example.com', 'class': 'form-control'}),
            'nickname': forms.TextInput(attrs={'placeholder': '닉네임', 'class': 'form-control'})
        }

✅ 3. 템플릿 디렉토리 설정

settings.py의 TEMPLATES 항목에서 DIRS 경로를 지정합니다:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [...],
        },
    },
]

✅ 4. 회원가입 뷰 구현 (views.py)

from django.shortcuts import render
from django.views.generic import FormView
from django.urls import reverse_lazy

from member.forms import SignupForm

class SignupView(FormView):
    template_name = 'auth/signup.html'
    form_class = SignupForm

    def form_valid(self, form):
        user = form.save()
        return render(self.request, 'auth/signup_done.html', {'user': user})

✅ 5. base 템플릿 구성

<!-- templates/base.html -->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pystagram</title>
  <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
</head>
<body>
  <div class="container">
    {% block content %}{% endblock %}
  </div>
  <script src="{% static 'js/bootstrap.bundle.js' %}"></script>
</body>
</html>

✅ 6. 회원가입 페이지 템플릿 (signup.html)

<!-- templates/auth/signup.html -->
{% extends 'base.html' %}
{% block content %}
  <div>
    <h1 class="title">회원가입</h1>
    <form method="POST">
      {% csrf_token %}
      {% for field in form %}
        <div class="form-group row mb-2">
          <label class="form-label col-md-2" for="{{ field.auto_id }}">{{ field.label }}</label>
          <div class="col-md-10">
            {{ field }}
          </div>
          {% for error in field.errors %}
            <span class="text-danger">{{ error }}</span>
          {% endfor %}
        </div>
      {% endfor %}
      {% for error in form.non_field_errors %}
        <p class="text-danger">{{ error }}</p>
      {% endfor %}
      <button class="btn btn-primary">회원가입</button>
    </form>
  </div>
{% endblock %}

✅ 7. URL 설정

# config/urls.py
from django.contrib import admin
from django.urls import path
from member import views as member_views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('signup/', member_views.SignupView.as_view(), name='signup'),
]

✅ 8. 회원가입 완료 템플릿 (signup_done.html)

<!-- templates/auth/signup_done.html -->
{% extends 'base.html' %}
{% block content %}
  <div class="col-8 offset-2">
    <h1>회원가입이 거의 완료되었습니다.</h1>
    <p>
      이메일 인증을 하여 회원가입을 완료해주세요.<br>
      ({{ user.email }})
    </p>
  </div>
{% endblock %}

🎯 마무리 체크리스트

  • static 디렉토리 설정 및 Bootstrap 파일 추가
  • 회원가입 폼 SignupForm 작성
  • 템플릿 디렉토리 설정
  • 뷰(View) 구현 (FormView + form_valid)
  • 회원가입 화면 템플릿 작성 (signup.html)
  • 회원가입 완료 템플릿 작성 (signup_done.html)
  • URL 설정 완료

이 구조를 기반으로 이메일 인증, 로그인 연동, 마이페이지 등으로 확장 가능합니다. 다음 포스트에서는 이메일 인증 로직을 추가해보겠습니다! 📩