[4월 5주차-4/29~30]🌐 Django로 나만의 로그인 + 이미지 북마크 웹사이트 만들기 (feat. 구글 소셜 로그인까지)

안녕하세요! 이번 포스팅에서는 Django 프레임워크를 활용해 다음과 같은 기능을 가진 웹 애플리케이션을 만들어보겠습니다.

• ✅ 사용자 로그인 / 로그아웃 / 회원가입 / 프로필 수정
• ✅ 이메일 중복 방지
• ✅ 구글 소셜 로그인 연동
• ✅ 이미지 북마크 기능 (URL로 이미지 저장)
• ✅ 메시지 프레임워크 활용

---

🔧 1. 프로젝트 초기 세팅

requirements.txt

asgiref==3.5.2
Django~=4.1.0
Pillow
sqlparse==0.4.2

설치

pip install -r requirements.txt
# 에러가 난다면
python -m pip install --upgrade pip
python -m pip install Pillow
pip install wheel

프로젝트 생성

django-admin startproject bookmarks .
django-admin startapp account

settings.py에 앱 등록:

INSTALLED_APPS = [
    'account.apps.AccountConfig',
    ...
]

---

👥 2. 로그인 / 회원가입 / 프로필 관리 기능 만들기

✅ LoginForm 정의 (forms.py)

class LoginForm(forms.Form):
    username = forms.CharField()
    password = forms.CharField(widget=forms.PasswordInput)

✅ 로그인 뷰 만들기 (views.py)

from django.contrib.auth import authenticate, login

def user_login(request):
    ...

✅ 로그인 URL 설정

account/urls.py

urlpatterns = [
    path('login/', views.user_login, name='login'),
]

bookmarks/urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('account/', include('account.urls')),
]

---

🧑‍💼 3. 사용자 등록 및 프로필 관리

✅ 모델 확장

models.py

class Profile(models.Model):
    ...

✅ 회원가입 폼

class UserRegistrationForm(forms.ModelForm):
    ...

✅ 회원가입 뷰 (views.py)

def register(request):
    ...

✅ 프로필 수정 뷰

@login_required
def edit(request):
    ...

---

🔐 4. 장고 기본 로그인/로그아웃/비밀번호 변경 템플릿

다음 HTML 파일들을 생성해 주세요:

• registration/login.html
• registration/password_change_form.html
• registration/password_reset_form.html 등

---

💌 5. 이메일 중복 방지 및 콘솔 메일 설정

forms.py와 settings.py에서 다음을 추가합니다:

EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

---

🧠 6. 커스텀 인증 백엔드 (이메일 로그인)

authentication.py

class EmailAuthBackend:
    ...

settings.py에 추가:

AUTHENTICATION_BACKENDS = [
    'account.authentication.EmailAuthBackend',
    'django.contrib.auth.backends.ModelBackend',
]

---

🌍 7. 구글 소셜 로그인 연동

1. 구글 클라우드 → OAuth 동의 화면 설정
2. 리디렉션 URI:
3. http://localhost:8000/social-auth/complete/google-oauth2/
4. settings.py에 키 추가:

SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = 'YOUR_CLIENT_ID'
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = 'YOUR_SECRET'

1. 로그인 버튼 추가:

<a href="{% url 'social:begin' 'google-oauth2' %}">Google로 로그인</a>

---

🖼️ 8. 이미지 북마크 앱 만들기

앱 생성 및 설정

django-admin startapp images

settings.py에 등록:

INSTALLED_APPS = [
    'images.apps.ImagesConfig',
    ...
]

모델 정의 (models.py)

class Image(models.Model):
    ...

폼 정의 (forms.py)

class ImageCreateForm(forms.ModelForm):
    ...

이미지 URL에서 직접 이미지를 다운로드해서 저장!

뷰 정의 (views.py)

@login_required
def image_create(request):
    ...

---

✅ 마무리

이제 로그인/회원가입부터 소셜 로그인, 이미지 북마크까지 다 되는 웹사이트 완성!
추가로 추천 기능이나 댓글, 좋아요 등 기능을 계속 확장할 수 있어요.