Movie gallery
MediaPipe 기반 제스처 제어형 영화 포스터 갤러리
- 작업일
- 2026.03.25
- 디자인 분야
- 용도
- 사용 도구
- 작성자
- 조윤서
작업 배경
바이브코딩으로 2번째인가 만든 웹인데 기록 가능한 개인 웹을 만들고 싶다는 욕망이 있어서.. 연습할 겸 3차원 공간처럼 뎁스 있는 캔버스형 웹을 만들었다. 데이터베이스랑 매직 링크 이메일 로그인 기능을 처음 만들어봤고, 이때만 해도 MCP를 안썼어서 그냥 gemini랑 대화하면서 IDE에서 편집했다.
작업 단계
기획
Figma
연습용으로 뭘 만들까 고민하다가 영화 목록 api랑 BaaS 사용해보기로 하고 레이아웃 와이어프레임을 그림.
Supabase 연결
Supabase
데이터를 저장하기 위한 백엔드 서비스 연결
매직 링크 구현
Gemini
이메일 인증 로그인 기능
그리고 로그인은 일단 supabase로 카카오, 구글 두 개 연결해놓긴 했는데 이메일로 매직 링크 보내서 로그인하는 기능도 만들어줘. html 이메일 템플릿으로 초대링크 보내서 로그인하게끔 하면 돼. html 이메일 템플릿은 짜놨으니까 파일 확인해.영화 목록 api 연결
Gemini
검색해서 웹에 포스터를 추가해야하니까 api를 연결했음. 포스터 받아와야 돼서 TMDB를 사용함
3차원 로직 디벨롭
Gemini
영화 포스터들이 뎁스가 있는 무한확장 캔버스 형태로 배열된 3D 공간을 사용자가 제스처로 탐험하는 웹의 렌더 로직을 짜줘.
빨려 들어가는 듯한 Depth 체감 (Pinch Zoom) / 속도에 반응하는 미세한 모션 블러 / 거리에 따른 흑백/밝기 감쇄
Palm Position - 카메라 앞 손바닥의 중심 좌표로 이동 속도 제어.
Pinch Gesture - 검지와 엄지 사이의 거리를 계산하여 확대 및 축소. 이거 확대 축소 할 때 포스터 메시 간 거리가 1차원적으로 줄면 안되고 뎁스에 따라서 속도가 달라야겠지.
지금 빌드는 Vite/vercel로 호스팅 하고 있으니께 알아서 잘 최적화할 수 있는 걸로. Three.js 쓰면 되지 않나
필요하다면 vanila js 외에 react 등을 사용해도 돼. 그리고 포스터는 흑백이 아니고 원본 이미지 그대로이되 멀어질수록 흑백+화이트아웃이 되는거야. 우선 네가 계획한대로 진행해봐. 코드 작성시에도 초보자도 보고 이해하며 공부할 수 있도록 상세한 주석을 달아.세부 수정
Gemini
라운딩은 없애고, favicon도 없애. vite 기본 아이콘 개못생김 그리고 포스터 사이즈가 다양한 건 좋은데 가로세로 비율을 임의로 수정하지는 마. 원본 포스터가 잘리면 안돼. 그리고 마우스 휠을 아래로 스크롤하면 포스터간 간격이 줄어들면서 크기도 줄어들고 밀도가 높아지고, 위로 스크롤하면 활대되다가 꽤 커졌다 싶으면 수렴할정도로 미세하게만 커지게 로직 수정해. 줄어들때도 마찬가지고. 그리고 포스터를 클릭하면 왼쪽에는 포스터, 오른쪽에는 마크다운 형식으로 메모할 수 있는 타이핑 공간이 나오게끔 기능을 확장해줘.회고
성과와 한계
습작이다보니까 정말 딸깍으로 만든거기도 하고 버전도 없고 디벨롭도 안하긴 했지만 서비스로서의 웹으로 접근하기 시작한 첫 시도였어서 재미있었다는 게 성과.. 그리고 세상에 좋은 자료, 서비스가 많다는 걸 알게됨. 이전에는 db라는게 정말 1나 1나 만드는 건줄 알았다. 하지만 이제는 모든 걸 딸깍으로 할 수 있다...
시행착오와 개선점
3차원처럼 렌더하는 레퍼런스 자료가 많았는데 생각보다 밤티를 벗어나기가 어려웠다. 내가 볼 때 3차원처럼 느껴진다 뿐이지 실제로는 로직에 따라 사이즈와 이동 속도를 조절하는거니까... 같은 맥락에서 다양한 캐러셀 웹도 간단해보이는데 딸깍으로 퀄리티 있게 만들기 어려운 듯.
적합한 활용 맥락
데이터 저장이 필요한 웹
참고 자료
- 툴 문서영화 api 종류 및 장단점cheeseios.tistory.com
댓글
0개