🎬 링크로 공유하는 내 영화 위시리스트, movieshelf 프로젝트 구조 소개

요즘 OTT 너무 비싸지 않나요?
저는 보고 싶은 영화나 드라마가 정말 많은 사람이었는데, 이것저것 정기 구독하기엔 부담돼서 한동안 참다가 요즘 몰아서 보고 있어요.

그 와중에 친구들한테 영화 추천을 정말 많이 받았는데요,
가만히 생각해보니 드라마나 뮤지컬보다도 '영화'가 가장 취향을 드러내는 콘텐츠 같더라고요.

• 드라마는 보다 보면 정들어서 보게 되고,
• 뮤지컬은 장르나 비용 때문에 접근이 조금 제한되는데,
• 영화는 내 취향에 딱 맞는 작품을 고르고, 추천하고, 공유할 수 있는 도구 같았어요.

그래서 문득 이런 생각이 들었어요.

"보고 싶은 영화 리스트, 그냥 링크 하나로 공유할 수 있으면 안 될까?"

그래서 직접 만들었습니다.
로그인 없이 누구나 위시리스트를 만들고, URL만으로 공유할 수 있는 웹앱! → movieshelf 🎞️

---

💡 When2meet에서 영감을 받았어요

회의 시간 조율할 때 자주 쓰는 서비스인 [When2meet]을 떠올렸습니다.
회원가입도 필요 없고, 링크만으로 사람들이 참여하고 데이터를 입력하고, 실시간으로 확인할 수 있는 구조가 너무 마음에 들었거든요.

항목	When2meet 구조 설명	movieshelf에서의 적용 방식
인증 방식	로그인/회원가입 없음, 참여자 이름만 입력	로그인 없음, 리스트 생성 시 UUID 발급
접근 방식	고유 URL을 통해 참여 (예: when2meet.com/?123abc)	movieshelf.store/view/:id 형식의 링크로 공유
데이터 구조	시간 선택은 2차원 그리드 배열로 표현, 서버에 즉시 반영됨	영화 선택 리스트를 JSON 형태로 저장, 자동 저장 예정
저장 방식	저장 버튼 없이 입력 시 자동 반영 (auto-save)	onChange 시 debounce 후 저장 API 호출 구조 설계 중
수정 인증 방식	이름+비밀번호 입력 시 수정 가능	비밀번호는 선택사항으로, bcrypt를 이용해 해시 저장 예정
데이터 공유	실시간으로 다른 사람 선택 시간과 겹치는 시간 시각화	추후 WebSocket 도입으로 실시간 영화 추가 반영 기능 추가 예정

---

📁 프로젝트 구조 소개

movieshelf/
├── backend/        ← Node + Express (Wishlist 관리 API)
└── frontend/       ← React + Vite + Tailwind (UI 구성)

📦 backend/

간단한 API 서버예요.
로그인은 없고, 각 위시리스트에 UUID 같은 고유 ID만 부여해서 구분해요.

주요 기능은 아래 3가지입니다

• 위시리스트 생성
• 영화 검색 (TMDB API 활용)
• 특정 리스트 불러오기 & 수정하기

폴더 구조도 기능 중심으로 단순화했어요

├── src/
│   ├── controllers/        ← 요청 처리
│   ├── services/           ← TMDB 연동, 로직 처리
│   ├── models/             ← 타입 정의
│   ├── routes/             ← API 엔드포인트
│   ├── utils/              ← UUID 생성 등 유틸 함수

현재는 wishlists.json에 저장하지만,
이후에는 Firebase나 PostgreSQL로 이전할 예정이에요.

비밀번호는 선택적으로 설정할 수 있고, 나중에 수정 권한을 위해 bcrypt hash로 저장할 예정이에요.

🎨 frontend/

Vite 기반 React 프로젝트에 Tailwind CSS를 입혔어요.
페이지는 총 3개로 구성돼 있어요.

페이지	경로	설명
생성하기	/create	새로운 위시리스트 만들기
보기	/view/:id	공유받은 링크로 리스트 확인
수정하기	/edit/:id	내 리스트 다시 편집하기

컴포넌트 구조도 심플하게 정리했습니다

├── components/
│   ├── MovieList.tsx       ← 저장된 영화 목록 출력
│   ├── MovieSearch.tsx     ← 영화 검색창 + 결과
│   └── Wishlist.tsx        ← 저장/수정 전체 UI 구성

---

🧠 아키텍처 설계에서 신경 쓴 점

1. 회원가입 없는 구조 (When2meet 방식)
   → 누구나 링크만으로 참여 가능하게 구성
2. 선택적 비밀번호 설정
   → 익명성과 편의성 모두 고려
3. 즉시 저장 UX
   → 저장 버튼 없이 바로 반영되도록 debounce + auto-save 구조 구현 중

---

🛣️ 앞으로의 계획

• DB 연동: wishlists.json → Firebase or PostgreSQL
• WebSocket 도입: 실시간 동기화 기능
• 공유 미리보기: Open Graph 태그로 썸네일 자동 생성
• 다크모드 지원: Tailwind 테마 전환

---

💬 마무리

친구들이랑, 혹은 커플끼리 보고 싶은 영화를 정리하고 공유할 수 있는 공간.
movieshelf는 그런 도구가 되길 바라는 마음에서 시작됐습니다.

아직 MVP지만, 단순한 구조 덕분에 금방 기능을 추가하고 확장할 수 있을 것 같아요.
비슷한 아이디어가 있으신 분들께도 도움이 되길 바라며 구조 공유합니다 🙌

🔍 다음 글 | 사용한 기술과 라이브러리 정리

이번 포스트에서는 전반적인 기획과 구조 위주로 소개했지만, 다음 글에서는 실제 개발에 사용한 라이브러리들을 조금 더 공부해보려 합니다.

• TMDB API로 영화 검색하기 (axios, dotenv)
• 고유 URL 생성 (nanoid)
• 영화 포스터 자동 가져오기 (posterSearch.service.ts)
• Tailwind로 UI 빠르게 구성한 방식
• Vite + React 개발 환경 최적화

다음 글에선 이 라이브러리들을 하나씩 뜯어보면서 왜 선택했는지,
어떻게 더 나은 방식으로 리팩터링할 수 있을지 고민을 공유해보겠습니다.