안녕하세요! 저는 백엔드 개발자이자 머신러닝 엔지니어를 꿈꾸는 18살 개발자입니다. 이 글에서는 스마트폰 하나만으로 Python을 활용해 웹 앱을 구축하는 방법을 단계별로 알려드리겠습니다 😁. 그럼 바로 시작해 볼까요?
준비물은 딱 하나!
먼저 필요한 것은 안드로이드 6.0 이상을 탑재한 스마트폰입니다. 믿기 어렵겠지만, 사실 이것만 있으면 충분합니다.
다음으로 할 일은 Pydroid 3라는 모바일 앱을 설치하는 것입니다.
Pydroid 3는 스마트폰에서 직접 Python 코드를 작성하고 실행할 수 있게 해주는 앱입니다. 구글 플레이 스토어에서 검색해 설치해 주세요.
Django 설치하기
Django를 처음 접하신다면 공식 Django 문서를 먼저 살펴보시는 것도 좋습니다.
Django를 설치하려면 Pydroid 3의 사이드 내비게이션 메뉴를 열어 Terminal(터미널)을 선택합니다:
터미널을 클릭하면 다음과 같은 화면이 나타납니다:
이제 아래 명령어를 입력하기만 하면 됩니다:
pip install django설치가 완료되면 결과가 표시됩니다. 저는 이미 설치되어 있어서 "requirements already satisfied"라는 메시지가 출력됩니다.
설치가 잘 되었는지 확인해 보겠습니다. 터미널에 django-admin을 입력하고 엔터를 누르세요.
다음과 같은 화면이 나타나면 성공입니다:
이 화면이 보인다는 건 Django가 제대로 설치되었다는 증거입니다.
프로젝트 생성하기
이제 본격적으로 프로젝트를 만들어 보겠습니다. 터미널을 열고 다음 명령어를 입력하세요:
django-admin startproject myapp
이 명령어는 루트 폴더에 myapp이라는 Django 프로젝트를 생성합니다.
cd myapp으로 해당 폴더로 이동한 뒤, python manage.py runserver를 입력하세요. 그러면 다음과 같은 결과가 나옵니다:
서버가 시작되었습니다! 이제 브라우저에서 127.0.0.1:8000으로 접속해 테스트해 보세요.
Django 로켓 화면이 보이시나요? 성공적으로 설정된 것입니다!
다음은 Django 앱을 만들 차례입니다. Django에서 프로젝트(project)는 전체 뼈대 역할을 하고, 앱(app)은 실제 기능을 담당합니다.
같은 디렉터리에 있는 상태에서 python manage.py startapp todo를 입력하면 myapp 프로젝트 안에 To-do 앱이 생성됩니다:
todo 폴더 안에는 다음과 같은 파일들이 들어 있습니다:
각 파일들은 실제로 사용할 때 자세히 살펴보겠습니다.
애플리케이션 설정하기
이제 만든 앱을 Django 프로젝트가 인식하도록 설정해야 합니다. 먼저 myapp 폴더의 settings.py 파일을 열고 INSTALLED_APPS 목록에 'todo'를 추가하세요:
그다음 urls.py 파일을 열어 아래 코드를 추가합니다:
from django.urls import path, include
path('', include('todo.urls'))
여기서 한 작업은 django.urls import에 include를 추가한 것이고, admin 경로 아래에 빈 경로('')가 todo 앱 디렉터리의 urls.py 파일을 포함하도록 연결한 것입니다.
이제 todo 폴더 안에 새 파일 urls.py를 생성하고 다음 코드를 작성합니다:
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='home')
]
Django.urls에서 path를, 현재 디렉터리에서 views를 임포트했습니다. 그리고 urlpatterns의 첫 번째 항목을 루트 링크로 지정했습니다. views.index는 views.py 파일 안의 index 함수를 가리킨다는 의미입니다. 곧 어떻게 동작하는지 확인하게 될 겁니다.
이제 views.py 파일에 코드를 추가해 보겠습니다.
파일 상단에 HttpResponse를 임포트합니다:
from django.http import HttpResponse
그리고 그 아래에 다음 코드를 추가하세요:
def index(request):
return HttpResponse('Hello')
urls.py에서 호출했던 index 함수를 만들고, request 매개변수를 전달받아 HttpResponse를 반환하도록 했습니다. HttpResponse가 동작하려면 반드시 django.http에서 임포트해야 하는 것, 잊지 마세요!
테스트해 볼까요? 터미널에서 myapp 디렉터리로 이동한 뒤 python manage.py runserver를 실행하세요.
'Hello'라는 응답이 정상적으로 반환되었습니다. 이제 HTML 템플릿 파일을 불러오는 방법을 알아보겠습니다.
HTML 템플릿 불러오기
HTML 파일을 로드하려면 todo 디렉터리 안에 다음 순서로 폴더를 만들어야 합니다:
todo/templates/todo
즉, todo 폴더 안에 templates 폴더를 만들고, 그 안에 또 todo 폴더를 만드는 구조입니다.
그다음 간단한 HTML 파일 index.html을 생성하고 아래 코드를 작성하세요:
<h1>Hello world</h1>
템플릿을 불러오려면 views.py 코드를 다음처럼 수정합니다:
def index(request):
return render(request, 'todo/index.html')
이제 HttpResponse 대신 render 함수를 사용해 HTML 템플릿을 렌더링합니다. 저장 후 터미널에서 서버를 실행하면 다음과 같은 결과를 얻을 수 있습니다:
완벽하게 동작하네요! 다음 단계로 넘어가겠습니다.
정적 파일(Static Files) 설정하기
CSS 같은 정적 파일을 설정하려면 todo 디렉터리 안에 static이라는 새 폴더를 만들고, 그 안에 다시 todo 폴더를 생성하세요.
구조는 다음과 같습니다: /static/todo/
todo 폴더 안에 main.css 파일을 만들고 간단한 스타일을 작성해 봅니다:
body {
background-color: red;
}저장한 후, index.html 파일을 아래와 같이 수정합니다:
{% load static %}
<!Doctype html>
<html>
<head>
<title>My page</title>
<link rel="stylesheet" href="{% static 'todo/main.css' %}" >
</head>
<body>
Hello
</body>
</html>
이제 실행해 보겠습니다:
순서대로 따라오셨다면 위와 같은 빨간 배경 화면을 확인할 수 있을 겁니다.
모델과 어드민 패널 세팅하기
어드민 패널을 사용하려면 먼저 슈퍼유저(superuser)를 생성해야 합니다. 방법은 간단합니다. 터미널에서 myapp 폴더로 이동한 뒤 python manage.py createsuperuser를 입력하세요. 그런데 에러가 발생합니다:
아직 마이그레이션을 실행하지 않아서 생긴 오류입니다. python manage.py migrate를 먼저 실행하면 다음과 같이 정상 처리됩니다:
이제 다시 python manage.py createsuperuser를 입력하고 엔터를 누르세요:
사용자 이름, 이메일, 비밀번호 등 필요한 정보를 입력하면 됩니다. 그다음 서버를 실행하고 브라우저에서 127.0.0.1:8000/admin으로 접속합니다.
로그인하면 관리자 대시보드로 이동합니다:
어드민 패널 준비가 끝났으니, 이제 모델(데이터베이스)을 다뤄보겠습니다. 콘텐츠를 저장하는 Post 모델을 만들어 볼 텐데요. models.py 파일을 열고 아래 코드를 입력하세요:
class Post(models.Model):
content = models.CharField(max_length=255, null=False)
def __str__(self):
return self.content
models.Model을 상속받는 Post 클래스를 만들고, 텍스트를 저장할 CharField() 타입의 content 변수를 선언했습니다. 마지막으로 __str__ 매직 메서드를 정의해 객체 대신 모델의 실제 내용이 표시되도록 했습니다.
이제 마이그레이션을 진행합니다. 터미널에서 myapp으로 이동한 뒤 python manage.py makemigrations를 실행하세요:
데이터베이스에 Post 테이블이 생성되었다는 의미입니다. 이어서 python manage.py migrate를 실행하면 다음과 같이 적용됩니다:
모든 준비가 끝났습니다. 이제 어드민 페이지에 모델을 등록해 볼까요? admin.py 파일을 열고 아래 코드를 작성합니다:
from .models import *
admin.site.register(Post)
models.py의 모든 모델 클래스를 임포트한 뒤, Post 모델을 어드민 패널에 등록했습니다. 이제 어드민 패널을 열면 Post 항목이 보이고 데이터를 저장할 수 있습니다.
todo 앱 목록에 Post가 추가된 것을 확인할 수 있습니다:
클릭하면 다음 화면이 나타납니다:
원한다면 여기서 바로 게시글을 생성해 볼 수도 있습니다.
DB 데이터를 화면에 렌더링하기
마지막으로 데이터베이스에서 데이터를 가져와 화면에 표시해 보겠습니다. views.py를 다음과 같이 수정하세요:
from .models import *
def index(request):
content = Post.objects.all()
context = {'content': content}
return render(request, 'todo/index.html', context)
생각보다 간단합니다. models.py에서 모든 모델을 임포트한 뒤, Post.objects.all()로 Post 테이블의 전체 데이터를 조회하고, 이를 딕셔너리 형태의 context 변수에 담아 뷰에 전달했습니다.
이제 index.html에 아래 코드를 추가하면 데이터를 화면에 표시할 수 있습니다:
{% for contents in content %}
{{content.content}}
{% endfor %}
템플릿 태그로 반복문을 작성해 모든 데이터를 가져왔습니다. 터미널에서 myapp으로 이동해 서버를 실행하면 마법 같은 결과를 확인할 수 있습니다:
동작하는 것 같지만, 확실히 검증해 볼까요?
결과는 다음과 같습니다:
짜잔! 완벽하게 동작합니다. 가독성을 위해 줄바꿈만 추가해 주면 끝입니다. 축하합니다, 여러분의 첫 모바일 웹 앱이 완성되었네요!
끝까지 읽어주셔서 감사합니다. 더 깊이 있는 Django 튜토리얼이 궁금하시다면 제 유튜브 채널 Devstack을 구독해 주세요.