이 글에서는 Django를 활용해 화면을 캡처하는 웹사이트를 만드는 방법을 단계별로 살펴봅니다. 사용자가 '스크린샷 찍기' 버튼을 클릭하면 현재 화면의 스크린샷이 자동으로 촬영되고, 미디어 폴더에 저장되어 언제든지 다시 확인할 수 있습니다.
프로젝트 및 앱 생성
먼저 Django 프로젝트와 앱을 생성하는 것부터 시작합니다.
settings.py 파일의 INSTALLED_APPS 목록에 앱 이름을 추가하고, 파일 하단에 아래 코드를 추가합니다.
MEDIA_URL = '/media/' MEDIA_ROOT = BASE_DIR/'media'
이렇게 하면 이미지 업로드를 위한 기본 미디어 폴더 설정이 완료됩니다.
URL 설정
프로젝트의 urls.py 파일은 다음과 같이 작성합니다.
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
# 앱 이름
path('',include('screenshottaker.urls'))
]여기서는 단순히 앱의 urls.py를 프로젝트에 연결했습니다.
앱의 urls.py 파일에는 아래 코드를 작성합니다.
from django.urls import path,include
from . import views
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('', views.home)
]+ static(settings.MEDIA_URL,document_root = settings.MEDIA_ROOT)간단한 뷰를 렌더링하고 미디어 파일을 서빙하기 위한 URL 설정까지 마쳤습니다.
필요한 라이브러리 설치
다음 모듈들을 설치합니다.
pip install pyautogui pip install pillow
pyautogui는 화면 캡처를 담당하고, pillow는 이미지 처리를 지원하는 라이브러리입니다.
뷰(View) 작성하기
views.py 파일에 아래 코드를 추가합니다.
from django.shortcuts import render
# Create your views here.
import random
import pyautogui
from django.conf import settings
from django.contrib import messages
def home(request):
if request.method == "POST":
ss = pyautogui.screenshot()
img = f'myimg{random.randint(1000,9999)}.png'
ss.save(settings.MEDIA_ROOT/img)
messages.success(request,'screenshot has been taken')
return render(request,'home.html',{'img':img})
return render(request,'home.html')views.py의 동작 흐름은 다음과 같습니다. 먼저 pyautogui로 화면을 캡처하고, 난수를 생성해 .png 확장자를 붙인 고유한 이미지 파일명을 만듭니다. 그런 다음 해당 이미지를 MEDIA_ROOT, 즉 미디어 폴더에 저장합니다. 마지막으로 프론트엔드에 성공 메시지와 방금 촬영한 스크린샷을 전달합니다.
미디어 폴더 및 템플릿 준비
프로젝트 디렉터리와 앱 디렉터리와 같은 위치에 'media'라는 이름의 폴더를 생성해야 합니다.
그리고 앱 디렉터리 내부, migration 폴더와 같은 위치에 templates 폴더를 만들고 그 안에 'home.html' 파일을 생성한 뒤 아래 코드를 작성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=devicewidth, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/
dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<style>
img{
width: 800px;
}
</style>
{% if messages%}
{% for message in messages%}
<div class="text-center mt-5">{{message}}</div>
{%endfor%}
{%endif%}
<form method="post" class="text-center">{%csrf_token%}
<button class="p-3 btn btnsuccess">Take A Screenshot</button>
</form>
{% if img%}
<div class="text-center p-5 mt-5 container border shadowsm">
<img src="https://127.0.0.1:8000/media/{{img}}" class= "img-fluid">
</div>
{%endif%}
</body>
</html>여기까지 완료되면 모든 준비가 끝납니다. 이 템플릿에서는 CSS로 간단한 프론트엔드를 구성하고, POST 방식의 폼을 만들었으며, Django의 조건문을 활용해 촬영된 이미지와 성공 메시지를 화면에 표시하도록 했습니다.
실행 결과
서버를 실행하고 버튼을 클릭하면 아래와 같이 촬영된 스크린샷이 화면에 나타나는 것을 확인할 수 있습니다.