영화 대사 무한 반복해서 영어 귀 뚫기 (설계서)

사이트로 가기

영화 구문 검색 시스템 설계서

📋 목차

1. 시스템 개요
2. 아키텍처
3. 기술 스택
4. 데이터베이스 설계
5. API 설계
6. 프론트엔드 설계
7. 배포 및 인프라
8. 보안
9. 성능 최적화
10. 모니터링

🎯 시스템 개요

프로젝트명

MoviePhraseSearch - 영화 구문 검색 시스템

목적

사용자가 입력한 한글/영어 구문을 번역하여 해당 구문이 포함된 영화 장면을 검색하고 재생할 수 있는 웹/모바일 서비스

주요 기능

• 🔍 다국어 구문 검색 (한글 ↔ 영어)
• 🎬 실시간 영화 데이터 수집 (playphrase.me)
• 🖼️ 영화 포스터 자동 수집 (IMDB)
• 📱 크로스 플랫폼 지원 (웹 + 모바일)
• 📊 검색 통계 및 분석

🏗️ 아키텍처

전체 시스템 아키텍처

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Frontend      │    │   Backend       │    │  External APIs  │
│                 │    │                 │    │                 │
│ • Web (Django)  │    │ • Django REST   │    │ • playphrase.me │
│ • Mobile(Flutter)│◄──►│ • PostgreSQL    │◄──►│ • IMDB          │
│                 │    │ • Redis Cache   │    │ • MyMemory      │
└─────────────────┘    └─────────────────┘    └─────────────────┘

서비스 레이어

┌─────────────────────────────────────────────────────────────┐
│                    Presentation Layer                       │
├─────────────────────────────────────────────────────────────┤
│ Django Templates │ REST API │ Flutter Mobile App           │
├─────────────────────────────────────────────────────────────┤
│                    Business Logic Layer                     │
├─────────────────────────────────────────────────────────────┤
│ Translation Service │ Search Service │ Movie Data Service  │
├─────────────────────────────────────────────────────────────┤
│                    Data Access Layer                        │
├─────────────────────────────────────────────────────────────┤
│ Django ORM │ Cache Layer │ External API Clients            │
├─────────────────────────────────────────────────────────────┤
│                    Infrastructure Layer                     │
└─────────────────────────────────────────────────────────────┘
│ PostgreSQL │ Redis │ File Storage │ PythonAnywhere         │
└─────────────────────────────────────────────────────────────┘

💻 기술 스택

Backend

• Framework: Django 4.2+ (Python)
• API: Django REST Framework
• Database: PostgreSQL (Production), SQLite (Development)
• Cache: Redis (Future)
• Task Queue: Celery (Future)

Frontend

• Web: Django Templates + Tailwind CSS
• Mobile: Flutter (Dart)
• JavaScript: Vanilla JS + Fetch API

External Services

• Translation: MyMemory API (무료)
• Movie Data: playphrase.me API
• Movie Posters: IMDB Web Scraping
• Hosting: PythonAnywhere

Development Tools

• Version Control: Git + GitHub
• Code Editor: VS Code
• API Testing: curl, Postman
• Mobile Testing: Android Studio

🗄️ 데이터베이스 설계

ERD (Entity Relationship Diagram)

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│     Movie       │     │   MovieQuote    │     │ UserSearchQuery │
├─────────────────┤     ├─────────────────┤     ├─────────────────┤
│ id (PK)         │◄────┤ id (PK)         │     │ id (PK)         │
│ name            │  │  │ movie_id (FK)   │     │ original_query  │
│ source_url      │  │  │ start_time      │     │ translated_query│
│ poster_url      │  │  │ text            │     │ search_count    │
│ poster_image    │  │  │ video_url       │     │ result_count    │
│ created_at      │  │  │ video_file      │     │ has_results     │
│ updated_at      │  │  │ created_at      │     │ created_at      │
└─────────────────┘  │  └─────────────────┘     │ last_searched_at│
                     │                          └─────────────────┘
                     │  ┌─────────────────┐              │
                     │  │UserSearchResult │              │
                     │  ├─────────────────┤              │
                     │  │ id (PK)         │              │
                     └──┤ movie_quote_id  │              │
                        │ search_query_id │◄─────────────┘
                        │ relevance_score │
                        │ created_at      │
                        └─────────────────┘

주요 테이블 설명

Movie

• 목적: 영화 기본 정보 저장
• 관계: MovieQuote와 1:N 관계
• 인덱스: source_url (중복 방지)

MovieQuote

• 목적: 영화 속 구문과 비디오 정보
• 관계: Movie와 N:1, UserSearchResult와 1:N
• 인덱스: text, video_url

UserSearchQuery

• 목적: 사용자 검색어 기록 및 통계
• 특징: 검색 횟수, 번역 기록 저장
• 인덱스: original_query, translated_query

UserSearchResult

• 목적: 검색어와 검색 결과 매핑
• 특징: 관련성 점수 포함
• 관계: UserSearchQuery, MovieQuote와 N:1

🔌 API 설계

REST API 엔드포인트

검색 API

GET /api/search/?q={query}&limit={limit}

응답 예시:

{
  "query": "안녕하세요",
  "translated_query": "Hello",
  "count": 5,
  "limit": 5,
  "results": [
    {
      "name": "Movie Title",
      "startTime": "01:23:45",
      "text": "Hello there",
      "posterUrl": "https://...",
      "videoUrl": "https://..."
    }
  ]
}

영화 API

GET /api/movies/              # 영화 목록
GET /api/movies/{id}/         # 영화 상세
GET /api/movies/{id}/quotes/  # 영화별 구문

구문 API

GET /api/quotes/              # 구문 목록  
GET /api/quotes/{id}/         # 구문 상세

통계 API

GET /api/statistics/          # 전체 통계
GET /api/search-history/      # 검색 기록
GET /api/health/              # 서비스 상태

API 인증

• 현재: 인증 없음 (공개 API)
• 향후: JWT 기반 인증 (선택적)

🎨 프론트엔드 설계

웹 프론트엔드 (Django Templates)

컴포넌트 구조

templates/
├── base.html           # 기본 레이아웃
├── index.html          # 메인 검색 페이지
├── components/
│   ├── header.html     # 헤더 컴포넌트
│   ├── search_form.html # 검색 폼
│   ├── movie_card.html  # 영화 카드
│   └── video_modal.html # 비디오 모달
└── partials/
    ├── loading.html    # 로딩 애니메이션
    └── error.html      # 에러 메시지

CSS 프레임워크

• Tailwind CSS: 유틸리티 기반 스타일링
• 커스텀 CSS: 로딩 애니메이션, 글래스 효과

모바일 프론트엔드 (Flutter)

위젯 구조

lib/
├── main.dart                    # 앱 진입점
├── screens/
│   └── movie_search_screen.dart # 메인 검색 화면
├── widgets/
│   ├── search_bar.dart         # 검색바 위젯
│   ├── movie_card.dart         # 영화 카드 위젯
│   ├── loading_indicator.dart  # 로딩 인디케이터
│   └── video_modal.dart        # 비디오 모달
├── services/
│   ├── api_service.dart        # API 통신
│   └── translation_service.dart # 번역 서비스
└── models/
    └── movie_result.dart       # 데이터 모델

🚀 배포 및 인프라

호스팅 환경

• 플랫폼: PythonAnywhere
• 도메인: movie.thesysm.com
• SSL: HTTPS 자동 제공

배포 프로세스

# 1. 코드 업데이트
git pull origin main

# 2. 의존성 설치
pip install --user -r requirements.txt

# 3. 마이그레이션
python manage.py migrate

# 4. 정적 파일 수집
python manage.py collectstatic --noinput

# 5. 웹앱 재시작
touch /var/www/movie_thesysm_com_wsgi.py

파일 구조

~/enmovie/
├── dj/
│   ├── project/          # Django 프로젝트 설정
│   ├── phrase/           # 메인 앱 (웹 기능)
│   ├── api/              # REST API 앱
│   ├── media/            # 업로드된 미디어 파일
│   └── static/           # 정적 파일
├── flutter_app/          # Flutter 앱 소스
├── requirements.txt      # Python 의존성
└── README.md

🔒 보안

데이터 보안

• HTTPS: 모든 통신 암호화
• CSRF 보호: Django 내장 CSRF 토큰
• SQL Injection: Django ORM 사용으로 방지
• XSS 방지: Django 템플릿 자동 이스케이핑

API 보안

• Rate Limiting: 향후 구현 예정
• CORS: django-cors-headers로 관리
• Input Validation: 모든 입력값 검증

파일 업로드 보안

• 파일 타입 제한: 이미지, 비디오만 허용
• 파일 크기 제한: 최대 100MB
• 경로 검증: 디렉토리 탐색 공격 방지

⚡ 성능 최적화

데이터베이스 최적화

• 인덱스: 검색 필드에 인덱스 적용
• 쿼리 최적화: select_related, prefetch_related 사용
• 페이지네이션: 대량 데이터 처리

캐싱 전략

• 브라우저 캐시: 정적 파일 캐싱
• CDN: 이미지 파일 CDN 사용 (향후)
• 애플리케이션 캐시: Redis 캐시 (향후)

프론트엔드 최적화

• 이미지 최적화: WebP 포맷 사용
• 로딩 전략: 지연 로딩, 프로그레시브 로딩
• 번들 최적화: CSS/JS 최소화

📊 모니터링

로깅

• Django 로깅: 에러, 성능 로그
• API 로깅: 요청/응답 로그
• 검색 로깅: 사용자 검색 패턴 분석

메트릭

• 검색 통계: 일일/월간 검색 수
• 인기 검색어: 자주 검색되는 구문
• 성능 지표: 응답 시간, 에러율

알람

• 에러 임계값: 에러율 5% 초과 시 알람
• 성능 임계값: 응답 시간 3초 초과 시 알람
• 용량 알람: 디스크 사용량 90% 초과 시 알람

🔄 향후 개발 계획

Phase 2 (Q2 2025)

• ⚡ Redis 캐시 도입
• 📊 고급 통계 대시보드
• 🔐 사용자 인증 시스템
• 💾 즐겨찾기 기능

Phase 3 (Q3 2025)

• 🎬 더 많은 영화 데이터 소스
• 🌍 다국어 지원 확대
• 📱 iOS 앱 개발
• 🤖 AI 기반 추천 시스템

Phase 4 (Q4 2025)

• ☁️ AWS 마이그레이션
• 🔄 CI/CD 파이프라인
• 📈 머신러닝 기반 검색 개선
• 🎭 영화 리뷰 시스템

---

© 2025 Ahading™ - 시스템 설계서 v2.0

---

---

전체 소스도 모두 공개 합니다. 여기에 있습니다. ^^