지금까지 여러 토이 프로젝트를 진행해 왔지만 전부 그저 학습을 위한 Todo리스트, 쇼핑몰 사이트 만들기 등 뿐이었습니다. 그래서 내가 정말 좋아하고 필요로 하는 개인프로젝트를 진행하고 싶은 욕구가 컸었는데 이번에야말로 그런 프로젝트를 진행해보려 합니다. 저는 평소에 영화를 매우 좋아해서(개인 블로그에 감상평도 쓰는 중... 링크는 비밀) 영화를 주제로 프로젝트를 진행하기로 결정했습니다.
어떻게 하면 기존의 영화 정보만 보여주는 대부분의 프로젝트들과 차별성을 줄 수 있을까 고민이 많이 되었습니다. 그러다 얼마전에 '세븐'이라는 영화를 너무 보고싶어서 어떤 OTT 사이트에서 볼 수 있는지 검색을 하던 중, just watch 라는 사이트에서 도움을 받은 기억이 떠올랐습니다. 관련 api도 있는것을 알게 되었고, 이것과 비슷한 사이트를 만들어 보자고 결정했습니다. (tmdb api)
프로젝트의 목표는 딱 한 가지로 정했습니다.
1. 실제 서비스처럼 보이게 하자
전체적인 ui는 'just watch' 사이트를 따라가지만 실제로 사용했을 때 이질감이 느껴지지 않도록 구현해보려고 합니다. 사용자 경험을 좀 더 개선을 할 수 있을 것 같은 기능과 UI도 많이 보였어서 재밌게 할 수 있을 것 같아요!
구현 예정 기능
일단 현재 구현 예정인 기능은 다음과 같습니다.
- 영화 탐색(장르별, 평점, 연령 등급 등등으로 필터링)
- 선택한 국가 별 개봉 예정영화, 인기영화들 보여주기
- 각 영화 세부사항(영화 정보, 어느 OTT사이트에서 볼 수 있는지)
굵직하게는 위 기능들을 우선적으로 구현하고 세부적으로 developing할 생각입니다.
기술 스택은?
✅ React.js
Next.js가 더 어울리는 프로젝트이지만 React를 선택한 것은 개인적으로 챌린지를 가져가고 싶어서 입니다.
영화 정보 사이트인 만큼 이미지가 무수히 많고 금주 트렌드, 개봉하는 영화들이 매일 변경되기 때문에 성능 개선 측면에서 볼 때 Next에서 지원하는 이미지 최적화와 SSR은 꼭 필요한 기능입니다.
이 두 가지 기능을 React에서 구현 후 드라마틱한 성능 개선을 이뤄내 볼 생각입니다.
✅ TypeScript
React와 잘 융합되어 있고 타입을 미리 지정해서 사용해야 하기 때문에, 개발 시 에러가 발생하는 것을 예방해 주고 손쉬운 디버깅으로 작업 생산성이 높아집니다. 말이 필요없는 최고의 stack!
✅ React Query, Zustand
상태관리에 대한 고민은 개발을 하면서 항상 저를 따라다녔는데, 최근 중요한 프로젝트에 도입해서 사용해 보면서 react-query, zustand 조합으로 정착했습니다!
Client State 관리: Zustand
- 컴포넌트 밖에서도 상태 변경 가능
- 상태관리에 필요한 코드가 적음
Server State 관리: React Query
- api 호출 코드로 비대해지는 store를 목적에 맞게 분리 가능
- 리액트 훅처럼 직관적으로 사용 가능
- 여러 인터페이스와 옵션을 제공해 적은 코드로 강력한 동작들을 할 수 있음(대표적으로 loading, error 처리)
- 자체 개발도구 제공
✅ Styled Components
개인적으로 제가 정말 사랑하는 CSS-in-JS 라이브러리 입니다.
JS 파일 안에서 코드를 작성하기 때문에 CSS의 변수, 함수를 그대로 사용할 수 있다는게 정말 매력적이에요. 또한 컴포넌트의 props 속성에 따라 서로 다른 스타일을 부여할 수 있어서 이를 활용하면 중복되는 스타일 코드를 하나로 나타낼 수 있어서 코드가 매우 깔끔해 집니다. 확장성에도 좋구요.
프로젝트 이름 뭐로 하지...
기술 스택 선정보다 여기에 시간을 제일 많이 보낸 것 같습니다. 대놓고 영화사이트란 느낌은 주기 싫고, 뭔가 트렌디해 보이고는 싶다 보니까 이름 정하는게 정말 어렵더라구요 ㅋㅋ.
우선 현재 정한 가제는 'And Chill' 입니다! 외국에는 "Netflix and chill"이라는 표현이 있는데, 넷플릭스 보면서 배긁고 쉬는 뜻도 있지만 사실은 우리나라의 "라면먹고 갈래?"로도 많이 쓰입니다ㅎ. 제 프로젝트에서는 넷플릭스 뿐만이 아닌 모든 OTT를 취급하니까 그냥 netflix를 빼고 'And Chill'로 갈까? 하는 생각이 들었고 야심차게 정해버렸습니다.
