🚀 Django로 AI 기능이 있는 스마트 블로그 만들기

📋 프로젝트 개요

SmartBlog는 OpenAI API를 활용한 AI 기능이 탑재된 Django 블로그 플랫폼입니다. 사용자가 더 쉽고 효율적으로 블로그를 작성할 수 있도록 다양한 AI 어시스턴트 기능을 제공합니다.

🎯 주요 목표

• Django 프레임워크 숙련도 향상
• 외부 API 연동 경험 (OpenAI API)
• 풀스택 개발 역량 강화
• 사용자 경험(UX) 개선

---

✨ 주요 기능

🤖 AI 어시스턴트 기능

• 제목 추천: 글 내용을 분석하여 매력적인 제목 4개 제안
• 자동 완성: 작성 중인 글을 자연스럽게 이어서 작성
• 태그 추천: 글의 주제에 맞는 태그 5개 자동 생성
• 요약 생성: 긴 글을 200자 이내로 핵심 요약

📝 블로그 핵심 기능

• 게시글 CRUD: 작성, 조회, 수정, 삭제
• 댓글 시스템: 댓글 및 대댓글 기능
• 좋아요 기능: Ajax를 활용한 실시간 좋아요
• 검색 및 필터링: 제목, 내용, 태그로 검색 가능

👥 사용자 관리

• 회원가입/로그인: Django 기본 인증 시스템 활용
• 프로필 관리: 사용자 정보 수정
• 팔로우 시스템: 다른 사용자 팔로우/언팔로우
• AI 사용량 추적: 개인별 AI 기능 사용 통계

---

🛠 기술 스택

Backend

• Django 5.2: Python 웹 프레임워크
• SQLite: 개발용 데이터베이스
• Django ORM: 데이터베이스 추상화

Frontend

• HTML5/CSS3: 마크업 및 스타일링
• JavaScript: 동적 기능 구현
• Bootstrap: 반응형 UI 프레임워크

AI Integration

• OpenAI API: GPT-4o-mini 모델 활용
• Custom AI Service: API 래핑 및 에러 처리

Tools & Others

• Git: 버전 관리
• django-environ: 환경변수 관리
• Logging: 디버깅 및 모니터링

---

🏗 프로젝트 구조

smartblog/
├── accounts/           # 사용자 관리 앱
│   ├── models.py      # CustomUser, Follow 모델
│   ├── views.py       # 인증, 프로필, 팔로우 뷰
│   └── admin.py       # 관리자 설정
├── blog/              # 블로그 메인 앱
│   ├── models.py      # Post, Comment, Like, Tag, AIUsageLog 모델
│   ├── views.py       # 게시글, 댓글, 좋아요 뷰
│   ├── ai_views.py    # AI 기능 API 뷰
│   └── ai_service.py  # OpenAI API 서비스 클래스
├── templates/         # HTML 템플릿
├── static/           # CSS, JS, 이미지 파일
└── media/            # 사용자 업로드 파일

---

💡 핵심 구현 내용

1. 커스텀 사용자 모델

class CustomUser(AbstractUser):
    bio = models.TextField(max_length=500, blank=True)
    ai_usage_count = models.IntegerField(default=0)
    
    def get_follower_count(self):
        return self.followers.count()
    
    def toggle_follow(self, user):
        follow, created = Follow.objects.get_or_create(
            follower=self, following=user
        )
        if not created:
            follow.delete()
            return False, user.get_follower_count()
        return True, user.get_follower_count()

특징:

• Django의 AbstractUser를 확장하여 커스텀 필드 추가
• 팔로우 관계를 위한 ManyToMany 관계 구현
• AI 사용량 추적을 위한 ai_usage_count 필드

2. AI 서비스 클래스

class OpenAIService:
    def __init__(self):
        self.client = OpenAI(api_key=settings.OPENAI_API_KEY)
        self.model = "gpt-4o-mini"
    
    def generate_title_suggestions(self, content: str, count: int = 5):
        messages = [
            {
                "role": "system",
                "content": "한국어 블로그 제목을 추천하는 전문가입니다."
            },
            {
                "role": "user", 
                "content": f"다음 글에 대한 {count}개의 제목을 추천해주세요: {content}"
            }
        ]
        response = self._make_request(messages)
        return self._parse_titles(response)

특징:

• 싱글톤 패턴으로 API 클라이언트 관리
• 에러 처리: API 한도 초과, 인증 실패 등 예외 상황 대응
• 더미 모드: API 키가 없을 때 테스트용 응답 제공
• 로깅: API 사용량 및 에러 추적

3. Ajax를 활용한 실시간 기능

// 좋아요 토글
function toggleLike(postId) {
    fetch(`/blog/like/${postId}/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCookie('csrftoken'),
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            updateLikeButton(postId, data.is_liked, data.like_count);
            showMessage(data.message, 'success');
        }
    });
}

특징:

• 페이지 새로고침 없이 좋아요, 댓글, AI 기능 동작
• CSRF 토큰 처리로 보안 강화
• 사용자 피드백을 위한 실시간 메시지 표시

4. 효율적인 데이터베이스 쿼리

def get_queryset(self):
    return Post.objects.select_related("author")\
                      .prefetch_related("tags", "likes")\
                      .annotate(likes_count=Count('likes'))\
                      .order_by("-created_at")

특징:

• select_related: 외래키 관계 최적화
• prefetch_related: 다대다 관계 최적화
• annotate: 집계 함수로 좋아요 수 계산

---

🎨 UI/UX 고민

1. 반응형 디자인

• Bootstrap Grid System을 활용한 모바일 친화적 레이아웃
• 미디어 쿼리로 다양한 화면 크기 지원

2. 사용자 경험 개선

• 로딩 스피너: AI 기능 사용 시 대기 시간 안내
• 실시간 피드백: 성공/실패 메시지 즉시 표시
• 점진적 향상: JavaScript 비활성화 시에도 기본 기능 동작

3. 접근성 고려

• 시맨틱 HTML: 스크린 리더 지원
• 키보드 네비게이션: 마우스 없이도 모든 기능 접근 가능
• 적절한 색상 대비: 가독성 향상

---

🚧 개발 과정에서 마주한 도전

1. 대댓글 구조 설계

문제: 댓글의 계층 구조를 어떻게 표현할까?

해결책:

class Comment(models.Model):
    parent = models.ForeignKey("self", on_delete=models.CASCADE, 
                              null=True, blank=True)

• Self-Referencing FK: 같은 모델을 참조하여 부모-자식 관계 구현
• 템플릿에서 재귀 처리: JavaScript로 중첩 댓글 렌더링

2. Ajax CSRF 토큰 처리

문제: Ajax 요청에서 CSRF 토큰 에러 발생

해결책:

function getCookie(name) {
    // 쿠키에서 CSRF 토큰 추출
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

---

💻 실행 방법

환경 설정

# 1. 프로젝트 클론
git clone <repository-url>
cd smartblog

# 2. 가상환경 생성 및 활성화
python -m venv venv
Windows: venv\Scripts\activate # MacOS : source venv/bin/activate

# 3. 패키지 설치
pip install django python-environ openai

# 4. 환경변수 설정 (.env 파일 생성)
DEBUG=True
OPENAI_API_KEY=your_openai_api_key_here
DATABASE_URL=sqlite:///db.sqlite3
ALLOWED_HOSTS=127.0.0.1,localhost

실행

# 1. 데이터베이스 마이그레이션
python manage.py makemigrations
python manage.py migrate

# 2. 슈퍼유저 생성
python manage.py createsuperuser

# 3. 개발 서버 실행
python manage.py runserver

접속

• 메인 페이지: http://127.0.0.1:8000/
• 블로그: http://127.0.0.1:8000/blog/
• 관리자: http://127.0.0.1:8000/admin/

---

🎓 마무리

이번 프로젝트를 통해 Django 프레임워크의 강력함을 실감했습니다. 특히 ORM의 편리함과 MTV 패턴의 명확한 구조가 개발 효율성을 크게 높여주었습니다.

OpenAI API를 활용하여 실제로 사용자에게 도움이 되는 기능을 구현할 수 있어서 뿌듯했습니다.

앞으로도 사용자 중심의 서비스를 만들기 위해 지속적으로 학습하고 개선해나가겠습니다!

---

🔗 참고 자료

• Django 공식 문서
• OpenAI API 문서
• Bootstrap 5 문서