Loveable, Replit, Gemini 등 AI 도구 조합을 활용한 영화 사이트 제작 사례

커뮤니티 반응

작성자가 구축한 사이트의 완성도에 대해 긍정적인 반응이며, 추가 기능에 대한 제안을 요청하는 상태이다.

합의점 vs 논쟁점

합의점

AI 도구들을 적절히 조합하면 기획부터 배포까지의 과정을 1인 개발자가 매우 빠르게 수행할 수 있다.

실용적 조언

UI 영감을 얻기 위해 Pinterest나 Dribbble의 스크린샷을 AI 모델의 컨텍스트로 활용하면 디자인 구현 속도가 향상된다.
데이터베이스 연동이나 API 연결처럼 번거로운 작업은 Gemini와 같은 LLM에게 맡겨 상용구 코드를 빠르게 생성할 수 있다.

섹션별 상세

Pinterest와 Dribbble에서 수집한 디자인 스크린샷을 입력값으로 사용하여 사이트의 전체적인 UI 레이아웃을 구성했다. Loveable과 v0 같은 도구를 활용해 시각적 요소를 실제 코드로 변환하는 과정을 거쳐 프론트엔드를 완성했다.

제작된 영화 사이트의 메인 UI 스크린샷 — Screenshot다크 모드 기반의 현대적인 스트리밍 사이트 레이아웃을 보여준다. 상단 내비게이션, 대형 배너, 평점 정보, 추천 영화 목록 등이 AI 도구만으로 정교하게 구현되었음을 확인할 수 있다.

DeepSeek와 Codex를 결합하여 영화 및 시리즈 링크를 자동으로 수집하는 스크래퍼를 구축했다. TMDB(The Movie Database) API를 통해 영화 제목, 포스터 이미지, 배경 이미지 데이터를 추출하는 로직을 구현했다.

수집된 데이터를 안정적으로 관리하기 위해 Gemini의 도움을 받아 스크래퍼와 Supabase 데이터베이스를 연동하는 코드를 작성했다. 스크래핑된 정보는 Supabase에 업로드되며, Cloudflare 프록시를 통해 영화 리네이머와 다운로드 링크의 작동 안정성을 확보했다.

용어 해설

바이브 코딩(Vibe Coding): — 엄격한 설계나 전통적인 코딩 방식 대신, AI 도구와 대화하며 직관적으로 결과물을 만들어가는 개발 방식이다. 개발자가 로직을 직접 짜기보다 AI에게 의도를 전달하여 코드를 생성하고 수정하는 과정이 핵심이다.
스크래핑(Scraping): — 웹 사이트의 HTML 구조를 분석하여 필요한 텍스트나 이미지 링크 등의 데이터를 자동으로 추출하는 기술이다. 이 프로젝트에서는 영화 정보와 스트리밍 링크를 수집하는 용도로 활용됐다.
프록시(Proxy): — 클라이언트와 서버 사이에서 통신을 대행하는 서버로, 보안이나 속도 향상을 위해 사용된다. 본문에서는 Cloudflare를 통해 영화 다운로드 링크를 중계하여 안정성을 확보하는 역할을 한다.

언급된 도구

Loveable추천

UI 생성 및 프론트엔드 개발

Replit추천

코드 편집 및 호스팅 환경

Supabase추천

데이터베이스 저장소

Cloudflare추천

링크 프록시 및 안정성 확보