QA 엔지니어가 만든 영화 틴더: Node.js와 TMDB로 구현한 KiSwipe MVP
한 수동 QA 엔지니어가 주말 동안 'KiSwipe'라는 웹 앱을 만들었다. 커플이 함께 영화를 발견할 수 있도록 티저 영상의 스와이프 기능과 세로형 트레일러 피드를 틴더처럼 구현한 이 앱은 예산 없이도 완성됐다. 최소한의 스택으로 구성된 프로젝트: Node.js, Express, 순수 자바스크립트, Swiper.js. AI(제미니 3.1 프로)는 구체적인 프롬프트에 따라 코드를 생성했지만, 아키텍처 설계와 작업 분해는 개발자가 전적으로 관리했다.
이 앱은 지루한 영화 설명 문제를 해결하기 위해 자동화된 HD 트레일러 피드, 상하 스와이프, 좋아요 저장 기능, 공유 시청을 위한 세션 동기화를 제공한다. 서버는 두 사용자가 같은 영화를 좋아하는 순간을 감지하고, 영화 포스터와 함께 '매치! 성공!' 애니메이션을 트리거한다.
KiSwipe 작동 방식: 피드에서 매치까지
사용자는 TMDB API에서 가져온 전체 화면 트레일러 피드에 접속한다. 핵심 기능:
- Swiper.js 기반의 세로 피드에서 자동 재생되는 영상.
- 트레일러 좋아요는 로컬 스토리지 + 서버 측 RAM 풀에 저장.
- '연결 생성'을 통해 고유한 방(/room=ID)이 생성된다.
- 파트너는 링크로 접속하고 이름을 입력한다.
- WebSocket 대신 2초 간격의 폴링 메커니즘으로 좋아요 동기화.
- 두 사용자가 동일한 영화를 좋아하면 피드가 잠기고 'IT’S A MATCH!'와 영화 포스터가 표시된다.
좌측 사이드바에는 장르 필터가 있으며, 페이지네이션을 통한 무한 스크롤이 활성화된다. 인터페이스는 모바일과 데스크톱 모두에서 완벽하게 반응형으로 동작한다.
기술 스택과 아키텍처 결정
AI는 VPS에 신속 배포하기 위한 최적의 스택을 제안했다:
- 백엔드: API 엔드포인트 및 정적 파일 제공용 Node.js + Express.
- 데이터: 영화 메타데이터는 TMDB API(로컬 데이터베이스 없음), 방과 좋아요는 서버 측 RAM 풀 + 클라이언트 측 로컬 스토리지에 저장.
- 프론트엔드: 순수 HTML/CSS/JS, 피드는 Swiper.js, 영상 재생은 YouTube Iframe API.
초기 버전은 단일 파일인 index.js(~1000줄). QA 경험을 바탕으로 모듈화하여 버그 격리가 가능하도록 설계했다.
// _ui.js — DOM 조작 전용
class UIManager {
showModal(type, data) { /* 모달, 토스트 */ }
updateLikeButton(filmId, liked) { /* 버튼 업데이트 */ }
}
// player.js — YouTube Iframe API
class VideoPlayer {
init() { /* onYouTubeIframeAPIReady */ }
loadTrailer(videoId) { /* cueVideoById */ }
}
// _swiper.js — 페이지네이션 및 스와이프 처리
class SwiperManager {
fetchNextPage(page) { /* TMDB API 호출 */ }
handleSwipe(direction) { /* 타이밍, 미리로딩 */ }
}
// storage.js — 로컬 스토리지 래퍼
class Storage {
saveLikes(likes) { localStorage.setItem('likes', JSON.stringify(likes)); }
}모듈화 덕분에 각 컴포넌트는 독립적으로 업데이트 가능: 스와이프 행동 변경이 플레이어 기능을 깨뜨리지 않는다. AI는 엄격한 프롬프트 제어 하에 각 모듈별로 코드를 생성했다.
Vibecoding의 도전과 해결책
Vibecoding은 깊은 프로그래밍 지식 없이 고수준 설명만으로 AI가 코드를 생성하는 방식이다. 장점: 빠른 MVP 구현. 단점: 감독 없이 아키텍처가 취약해질 수 있다.
핵심 교훈:
- 모놀리식 → 모듈화: UI, 플레이어, 스와이퍼, 스토리지 등 로직 분리로 디버깅 용이.
- 데이터 저장: 데이터베이스 대신 RAM + 로컬 스토리지 — 비영구적 MVP에 적합.
- 동기화 전략: WebSockets 대신 2초 폴링 — 최소한의 오버헤드.
테스트: 수동 QA가 핵심 시나리오(스와이프, 매치, 방 생성)를 검증. 커뮤니티 크래시 테스트도 열려 있다.
글로벌 시장 적응
러시아에서는 YouTube Iframe API가 차단되어 로더가 멈추는 문제가 발생했다. 해결책: UI를 영문으로 전환하고, TMDB 지역을 미국(넷플릭스, 훌루, 아마존 프라임)으로 설정. 이제 트레일러가 안정적으로 로드되며, 네트워크 제한에도 변환율은 유지된다.
VPS 배포: 데스크탑과 모바일 브라우저에서 원활히 작동. 다음 단계: FFmpeg + OpenAI를 활용한 AI 생성 숏츠를 통한 트래픽 확장.
무엇이 가장 중요한가?
- 모듈화 아키텍처는 스파게티 코드를 막았으며, 한 파일 수정이 다른 부분을 깨뜨리지 않는다.
- Node.js + 순수 JS + TMDB 스택은 빠른 MVP 개발을 위한 의존성 최소화에 효과적이다.
- RAM + 로컬 스토리지 기반의 좋아요 동기화는 저부하 프로토타입에 완벽하게 작동한다.
- 미국 지역 설정으로 YouTube 차단 문제 해결, 프록시 없이도 가능.
- QA 기반의 AI 프롬프팅: 작업을 작은 단위로 나누면 반복 속도가 빨라진다.
— Editorial Team
아직 댓글이 없습니다.