[Django] 템플릿에 Bootstrap 적용하기

comgu 2025. 1. 24. 23:31

2025. 1. 24. 23:31

Django로 웹 애플리케이션을 개발할 때 중요한 부분 중 하나가 사용자 인터페이스이다.

Bootstrap은 반응형 웹 디자인을 쉽게 구현할 수 있게 해주는 프론트엔드 프레임워크이다. Django 템플릿에 Bootstrap을 효과적으로 적용하는 방법을 단계별로 알아본다.

1. Bootstrap 설정하기

먼저 프로젝트의 기본 템플릿(일반적으로 base.html)에 Bootstrap의 필수 파일들을 추가해야 한다. CDN을 통해 Bootstrap 파일을 가져오는 것이 가장 간단한 방법이다.

<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- 선택사항: Bootstrap 아이콘 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    {% block content %}
    {% endblock %}

    <!-- Bootstrap JS와 Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2. Django 정적 파일 처리 설정

Django에서 정적 파일을 올바르게 처리하기 위해 settings.py 파일에 다음 설정을 추가한다.

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

이 설정은 프로젝트의 정적 파일(CSS, JavaScript, 이미지 등)을 관리하는 데 필요하다.

CDN을 통해 Bootstrap을 가져오는 경우에도, Bootstrap 관련 static 파일이 필요한 경우가 아래와 같이 있다:

커스텀 Bootstrap 테마나 수정된 스타일
Bootstrap의 기본 스타일을 덮어쓰는 CSS
Bootstrap과 함께 사용할 추가 JavaScript

또한 CDN이 장애를 일으키는 경우를 대비해 로컬 Bootstrap 파일을 사용하는 경우에도 static 폴더를 사용할 수 있다.

3. Bootstrap 컴포넌트 활용하기

Bootstrap의 강력한 기능 중 하나는 미리 디자인된 다양한 컴포넌트를 제공한다는 것이다.

다음은 Bootstrap 컴포넌트를 활용한 템플릿 예시이다.

{% extends 'base.html' %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">게시글 제목</h5>
                    <p class="card-text">게시글 내용입니다.</p>
                    <a href="#" class="btn btn-primary">자세히 보기</a>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action">메뉴 1</a>
                <a href="#" class="list-group-item list-group-item-action">메뉴 2</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

내비게이션 바 예시

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">로고</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">홈</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

그리드 시스템 예시

<div class="container">
    <div class="row">
        <div class="col-md-8">메인 콘텐츠</div>
        <div class="col-md-4">사이드바</div>
    </div>
</div>

카드 예시

<div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">제목</h5>
        <p class="card-text">내용</p>
    </div>
</div>

4. 폼 스타일링

Django 폼에 Bootstrap 스타일을 적용하는 것은 특히 중요하다. 사용자 입력을 받는 폼은 웹 애플리케이션의 핵심 부분이기 때문이다.

<form method="post" class="mt-3">
    {% csrf_token %}
    {% for field in form %}
    <div class="mb-3">
        <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
        {{ field|add_class:"form-control" }}
        {% if field.help_text %}
        <small class="form-text text-muted">{{ field.help_text }}</small>
        {% endif %}
        {% if field.errors %}
        <div class="alert alert-danger">
            {{ field.errors }}
        </div>
        {% endif %}
    </div>
    {% endfor %}
    <button type="submit" class="btn btn-primary">제출</button>
</form>

5. 추가 팁과 Best Practice

일관성 유지: 프로젝트 전체에서 동일한 Bootstrap 버전과 스타일링 패턴을 사용하기.
커스텀 스타일: Bootstrap의 기본 스타일을 커스터마이즈하려면 별도의 CSS 파일을 만들어 관리하기.
반응형 디자인: Bootstrap의 그리드 시스템을 활용하여 모바일 친화적인 레이아웃을 만들기.
성능 최적화: 프로덕션 환경에서는 Bootstrap 파일을 로컬에서 제공하고, 필요한 컴포넌트만 포함하기.

결론

Django와 Bootstrap의 조합은 강력하면서도 유지보수가 쉬운 웹 애플리케이션을 만들 수 있게 해준다. Bootstrap의 다양한 컴포넌트와 유틸리티 클래스를 활용하면 전문적인 디자인을 쉽게 구현할 수 있다.

저작자표시 (새창열림)

'Django' 카테고리의 다른 글

[Django] PostgreSQL 연동하기 (1)	2025.02.04
[Django] CBV의 동작 원리와 주요 메서드 분석 (3)	2025.01.26
[Django] Messages Framework (0)	2025.01.23
[Django] 사용자 모델 구현 방법 비교 (0)	2025.01.22
[Django] View 클래스의 as_view() 메서드 (2)	2025.01.20

comgu