상품 상세 페이지 URL 하나로 15초 숏폼 광고 영상을 만드는 Vision + LLM 에이전트.
Playwright DOM 자산 추출 · GPT-4o 스토리보드 · MoviePy 렌더링 · WinForms 클라이언트
아모레퍼시픽 글로벌몰 상품 상세 페이지 URL을 입력하면, 상세 페이지 자산을 자동 수집하고 GPT 기반 스토리보드를 생성한 뒤 15초 분량의 1:1 숏폼 광고 영상을 렌더링하는 실무형 AI 콘텐츠 제작 시스템입니다.
- 프로젝트 시연YouTube 링크
- 결과물 영상 예시1YouTube 링크
- 결과물 영상 예시2YouTube 링크
- 결과물 영상 예시3YouTube 링크
- 결과물 영상 예시4YouTube 링크
이 프로젝트는 상품 상세 페이지를 사람이 직접 정리하고 편집하지 않아도, URL 입력만으로 숏폼 광고 영상 초안을 빠르게 만들 수 있도록 설계된 풀스택 시스템입니다.
이 프로젝트의 중심은 상품 상세 페이지 분석 -> 원본 시각 자산 추출 -> 영상 기획 -> 숏폼 영상 생성 파이프라인입니다.
초기에는 전체 페이지 스크린샷을 잘라 활용하는 방식도 실험했지만, 영상 결과물의 품질과 자산 정확도를 높이기 위해 최종적으로는 DOM 구조 분석 기반의 원본 이미지 추출 방식으로 발전시켰습니다.
특히 이 시스템의 강점은 단순 요약이나 캡처 자동화가 아니라, 동적으로 구성된 상세 페이지의 DOM 구조를 실제로 따라가며 원본 이미지 자산을 최대한 손실 없이 복원해 내는 데 있습니다.
- 기업 내부의 ERP/업무 도구와 연동하기 쉬운 Windows 기반 클라이언트를 염두에 두었습니다.
- 사내 디자이너나 실무자가 별도 개발 지식 없이도 URL 입력과 진행 상태 확인만으로 사용할 수 있는 데스크톱 UI가 필요했습니다.
- 웹 서비스보다 내부 배포와 업무 환경 적응성이 높은 형태를 우선한 선택이었습니다.
Playwright,FastAPI,OpenAI API,MoviePy등 자동화 및 AI 처리 라이브러리 조합이 유리했습니다.- 크롤링, 비전 분석, 스토리보드 생성, 영상 렌더링을 하나의 비동기 파이프라인으로 묶기 좋았습니다.
- UI와 처리 엔진을 분리해 두면 이후 사내 시스템 연동이나 배포 구조 변경에도 대응하기 쉽습니다.
- 이미지 수집, AI 분석, 렌더링은 시간이 걸리는 작업이기 때문에 단계별 상태를 실시간으로 프런트에 전달할 필요가 있었습니다.
- WinForms 클라이언트에서 "현재 무엇을 하고 있는지"를 사용자에게 즉시 보여주는 데 적합했습니다.
- WinForms 클라이언트에서 상품 상세 페이지 URL을 입력합니다.
Playwright기반 크롤러가 동적 페이지를 로드하고 스크롤을 수행한 뒤, 원본 이미지 URL을 추출합니다.- 고해상도 이미지들을 다운로드하고 중복 자산을 정리합니다.
GPT-4o가 이미지와 노출 텍스트를 함께 분석해 15초 분량의 스토리보드를 생성합니다.- 여러 후보 스토리보드를 검증한 뒤 조건을 만족하는 결과를 선택합니다.
MoviePy가 1080x1080 정사각형 영상, 자막 오버레이, BGM을 합성해 최종 숏폼 영상을 만듭니다.- FastAPI WebSocket 서버가 진행 로그와 결과 경로를 클라이언트에 전달합니다.
- 이 프로젝트의 핵심은 단순 스크린샷 수집이 아니라, 상세 페이지 DOM 구조를 역으로 따라가며 실제 원본 자산 URL을 복원하는 방식입니다.
- 브라우저를 직접 구동해 lazy loading 구간까지 렌더링한 뒤,
src,data-src,data-original,data-zoom-image,srcset등 여러 속성에서 고해상도 이미지 후보를 추출합니다. - 즉, 화면에 보이는 결과를 캡처하는 것이 아니라 HTML 내부 속성과 CDN 경로를 기반으로 원본 데이터를 최대한 정확하게 뽑아내는 데 초점을 두었습니다.
- 쿼리 스트링과 해시를 제거해 중복 URL을 정리하고, 너무 작은 이미지나 아이콘성 자산은 제외해 실제 영상 제작에 쓸 수 있는 자산만 남깁니다.
- 상품 이미지와 상세 페이지 내 텍스트를 함께 참고해 분위기, 컬러, 주요 셀링 포인트를 추출합니다.
- 결과는 영상 제작에 바로 사용할 수 있는 JSON 스토리보드 형식으로 정리됩니다.
- 씬 수, 총 길이 15초, 이미지 인덱스 중복 방지, 한글 자막 길이 제한 같은 조건을 코드 레벨에서 다시 검증합니다.
- 출력 영상은
1080x1080규격의 1:1 정사각형 숏폼을 기준으로 생성됩니다. - 이미지별 컷 분배, 간단한 줌 연출, 자막 박스 렌더링, BGM 매핑이 자동으로 적용됩니다.
- 자막 렌더링은 PIL 기반으로 처리해 별도 ImageMagick 의존성을 줄였습니다.
- 클라이언트는 URL 입력과 상태 확인에 집중한 Windows GUI로 구성되어 있습니다.
- 백엔드는 WebSocket을 통해 진행 상태를 세분화해 전달하고, 완료 시 결과 영상 경로를 반환합니다.
- 단순 데모가 아니라 사내 실무자가 사용하는 툴 형태를 전제로 만든 구조입니다.
| Area | Stack | Role |
|---|---|---|
| Frontend | C# WinForms, .NET 8 | 사내 사용자를 위한 데스크톱 UI |
| Backend | Python, FastAPI, Uvicorn | 비동기 처리 서버 및 WebSocket 통신 |
| Crawling | Playwright, aiohttp | 동적 상세 페이지 분석 및 이미지 수집 |
| AI | OpenAI GPT-4o | 비전 분석 및 스토리보드 생성 |
| Video | MoviePy, Pillow, NumPy | 영상 합성, 자막, BGM 처리 |
| Packaging | PyInstaller | 백엔드 실행 파일 배포 고려 |
Amore_project_8/
├── backend/
│ ├── main.py # FastAPI WebSocket entrypoint
│ ├── main.spec # PyInstaller 설정
│ ├── requirements.txt
│ ├── services/
│ │ ├── crawler.py # 상세 페이지 자산 추출
│ │ ├── llm_agent.py # GPT-4o 기반 스토리보드 생성/검증
│ │ ├── video_gen.py # 숏폼 영상 렌더링
│ │ └── image_processor.py # 초기 스크린샷 분할 방식 실험 코드
│ └── assets/
│ └── bgm/ # 배경음악 파일
└── frontend/
└── Amore_Content_Agent_Client/
├── Form1.cs # URL 입력 메인 화면
├── ProcessingForm.cs # 생성 진행 상태 화면
└── Amore_Content_Agent_Client.csproj
이 프로젝트에서 저는 주제 선정부터 시스템 구현 전반까지 사실상 전체 개발을 담당했습니다.
- 프로젝트 주제 선정 및 서비스 방향 설정
- 전체 시스템 아키텍처 설계
- C# WinForms 기반 프런트엔드 개발
- FastAPI/WebSocket 기반 백엔드 개발
- Playwright 크롤러 구현
- OpenAI API 연동 및 생성 파이프라인 통합
- MoviePy 기반 영상 생성 로직 구현
- 실행 및 배포를 고려한 구조 설계
시스템 구현과 풀스택 개발은 처음부터 끝까지 직접 수행했습니다.
cd backend
python -m venv venv
venv\Scripts\activate
pip install -r requirements.txt
set OPENAI_API_KEY=YOUR_KEY
python main.py소스 실행 기준으로는 별도 Playwright 전용 브라우저 번들을 설치하는 흐름보다, Windows에 이미 설치된 Chrome을 우선 사용하고 실패 시 Edge(msedge)로 fallback 하도록 구성했습니다.
Windows 환경에서 아래 프로젝트를 실행합니다.
dotnet run --project frontend/Amore_Content_Agent_Client/Amore_Content_Agent_Client.csproj- 클라이언트에서 상품 상세 페이지 URL을 입력합니다.
- 백엔드가
ws://127.0.0.1:8000/ws/generate에서 요청을 받아 처리합니다. - 생성된 결과 영상은
backend/data/outputs/아래에 저장됩니다.