-
[django] Admin 페이지를 이쁘게 커스텀해보자 1) 한글화, CSS, HTML 접근하기Coding/Python 2020. 12. 6. 22:06
안녕하세요.
오늘은 장고에서 기본으로 제공하는 Admin 페이지를 커스텀하는 방법에 대하여 포스팅합니다.
🧐 배경
제 프로젝트의 관리자 페이지는 장고의 Admin 템플릿을 그대로 사용하고 있습니다. 우선 장고의 ORM 방식을 채택한 DB Modeling을 사용하고 있다면, Admin에서 대부분의 CRUD 작업과 나아가 유저 관리, 권한 부여 등 아주 일반적인 기능을 모두 제공합니다. 빠르게 웹 페이지를 빌드하고 DB를 관리해야 한다면 굳이 관리자 페이지를 따로 제작하기보다 장고의 Admin을 그대로 사용해도 무방합니다.
물론 불편함은 존재합니다. 기본 Admin 페이지에 접속해 봅시다.
👇아직 Admin 페이지를 연결하지 않았다면, 잘 정리된 다음 포스팅을 참고해주세요!
장고(django) #4_ admin 페이지 사용해보기
안녕하세요. 이번 포스팅에서는 django에서 admin 페이지를 사용해보도록 하겠습니다. 1. Admin 계정 만들기 먼저 우리는 지난 포스팅까지해서 django와 postgresql의 django_test라는 데이터베이스를 만들어
doorbw.tistory.com
😢 도무지 정안가는 디자인...
장고의 기본 디자인은 다음과 같습니다.
로그인 페이지 
최초 진입 페이지 사실 개발자 입장에서는 DB의 CRUD만 된다면 디자인 같은 경우는 굳이 상관없겠으나, 제 프로젝트의 관리자 페이지의 경우 비개발자가 주로 이용합니다. 그런 의미에서 장고의 Admin 페이지는 친숙한 디자인과 UI를 제공한다고 보기는 어렵다고 생각합니다.
게다가 Admin 페이지는 DB에 입력된 Column명을 그대로 보여주기 때문에, DB Modeling에 직접 참여하지 않은 사람은 어떤 Column이 어떤 지표를 가리키는지도 이해하기 쉽지 않죠. 이러한 배경이 제가 여러 명이 동시에 사용하는 이 Admin 페이지를 사용성도 높이고, 편안한 UI/UX를 제공하도록 커스텀해보겠다고 마음먹은 이유입니다.
👨🎨
최소한 사람답게이쁘게 꾸며보자1. 한글화
우선 기본값이 다 영어로 되어있습니다. 한글로 최적화부터 해 봅시다.
settings.py에 다음 코드를 추가해 줍시다.
LANGUAGE_CODE = 'ko-kr'나중에 template HTML을 뜯어보면 알겠지만, 이 옵션을 추가함으로써 대부분의 문구에 trans 장고 템플릿이 추가되어, 한글로 번역하여 보여주게 됩니다.
default는 en-us지만, ko-kr로 변경하면 알아서 번역해준다. 2. 스타일 시트(CSS) 건드리기
저는 개인적으로 Admin 페이지의 기본적인 색감부터 마음에 들지 않았습니다. 그래서 CSS를 건드려 제 프로젝트의 브랜드 컬러로 통일을 해야겠다고 마음을 먹었습니다. 그래서 이 장고 Admin 페이지는 CSS를 어디로부터 참조해오는 지 궁금해서, 개발자 콘솔을 열어 보았습니다.
static/admin으로부터 CSS파일을 받아오고 있네요. 아마 장고를 설치하면 기본으로 제공해주는 CSS로 추측이 됩니다. 한번 장고가 설치된 곳에 가서 확인해 보겠습니다. 저는 가상환경에 장고를 설치하였기 때문에,
venv(가상환경 이름)/lib/site-packages/django/contrib/static/admin/css에 들어가보면
다음과 같이 static에 사용하는 css, fonts, img, js 모두 들어있네요. 장고를 설치할 때 기본으로 제공하고, static 경로 설정을 어떻게 했느냐에 따라 static에 admin/ 하위폴더로 올라간다고 이해가 되었습니다. 저는 Amazon S3을 이용하고 있기 때문에, static/admin/...에 Admin 관련 정적 파일들이 업로드 되어있고 그쪽에서 가져와 참조를 하는 것이었죠.
S3에 직접 접속하여 css 파일을 삭제하고 다시 올려도 되겠지만, 단순하게 static/admin/base.css 직접 파일을 프로젝트에 생성하고(저는 venv에서 통째로 복사하여 덮어씌웠습니다)
python manage.py collectstatic 명령어로 정적 파일을 업로드해보면
이미 존재하는 경로라고 하며 유니크한 경로를 사용해달라고 하지만, 저희가 직접 프로젝트에 작성한 파일이 우선적으로 참조됩니다. 이제부터는 개발자 도구를 들여다보면서 수정하고 싶은 요소의 스타일을 수정해주면 됩니다.
필드색과 폰트만 변경해주어도, 숨통이 트이네요🙂
3. HTML 템플릿 건드리기
Admin 페이지에서 사용하는 HTML 파일들은 CSS 파일들과 마찬가지로 django 설치시에 자동으로 받아옵니다.
venv(가상환경 이름)/lib/site-packages/django/contrib/static/admin/templates/admin
해당 경로를 찾아가보면, 마찬가지로 모두 다운받아올 수 있습니다.{% load i18n static %}<!DOCTYPE html> {% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %} <html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}> <head> <title>{% block title %}{% endblock %}</title> <link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}"> {% block extrastyle %}{% endblock %} {% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}">{% endif %} {% block extrahead %}{% endblock %} {% block responsive %} <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive.css" %}"> {% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive_rtl.css" %}">{% endif %} {% endblock %} {% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock %} </head> {% load i18n %} <body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}"> <!-- Container --> <div id="container"> {% if not is_popup %} <!-- Header --> <div id="header"> <div id="branding"> {% block branding %}{% endblock %} </div> {% block usertools %} {% if has_permission %} <div id="user-tools"> {% block welcome-msg %} {% trans 'Welcome,' %} <strong>{% firstof user.get_short_name user.get_username %}</strong>. {% endblock %} {% block userlinks %} {% if site_url %} <a href="{{ site_url }}">{% trans 'View site' %}</a> / {% endif %} {% if user.is_active and user.is_staff %} {% url 'django-admindocs-docroot' as docsroot %} {% if docsroot %} <a href="{{ docsroot }}">{% trans 'Documentation' %}</a> / {% endif %} {% endif %} {% if user.has_usable_password %} <a href="{% url 'admin:password_change' %}">{% trans 'Change password' %}</a> / {% endif %} <a href="{% url 'admin:logout' %}">{% trans 'Log out' %}</a> {% endblock %} </div> {% endif %} {% endblock %} {% block nav-global %}{% endblock %} </div> <!-- END Header --> {% block breadcrumbs %} <div class="breadcrumbs"> <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a> {% if title %} › {{ title }}{% endif %} </div> {% endblock %} {% endif %} {% block messages %} {% if messages %} <ul class="messagelist">{% for message in messages %} <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li> {% endfor %}</ul> {% endif %} {% endblock messages %} <!-- Content --> <div id="content" class="{% block coltype %}colM{% endblock %}"> {% block pretitle %}{% endblock %} {% block content_title %}{% if title %}<h1>{{ title }}</h1>{% endif %}{% endblock %} {% block content %} {% block object-tools %}{% endblock %} {{ content }} {% endblock %} {% block sidebar %}{% endblock %} <br class="clear"> </div> <!-- END Content --> {% block footer %}<div id="footer"></div>{% endblock %} </div> <!-- END Container --> </body> </html>기본적으로 장고 템플릿 태그로 범벅되어있지만.. 장고 레퍼런스를 참조해보면 이해하기 쉽습니다.
결국에는 HTML과 CSS모두에 접근할 수 있기 때문에, 내가 원하는 기능을 추가할 수도 있고 원하는 디자인대로 수정이 가능하겠네요.
이제 Admin 페이지를 수정할 수 있다는 것을 알았기 때문에, 이를 바탕으로 제 관리자 페이지를 이것저것 커스텀하고 기능을 추가해보려 합니다. 기본 Admin 페이지도 충분히 강력한 기능을 제공하지만, 사용성에서 불편한 부분도 있긴 했으니까요. 이를 베이스로 제작하면 새로 관리자 페이지를 만드는 것보다는 훨씬 쉽게 저만의 관리자 페이지를 구축할 수 있겠습니다.
📚출처
- 장고 공식 문서
'Coding > Python' 카테고리의 다른 글
[django] Model IntegerField에 최소/최대값 지정하기 (0) 2021.01.19 [Python] 파이썬에서 명령 프롬포트(cmd) 명령어 실행시키기 - 현재 경로 내 파일 리스트 출력하기 (0) 2019.11.08 [Python] 리스트에서 랜덤으로 추출하기 (0) 2019.11.07 [Python] 리스트 역순으로 순회하기 (0) 2019.10.17 [Python] Selenium 백그라운드(Headless)로 돌리기 (1) 2019.10.16
