WTM 이란?
What Today Media 의 약자로
볼거없을때 오늘 볼 영화나 드라마를 추천해주는 웹사이트다.
만든배경
드라마를 보던중 내가 전에 봤던 드라마나 영화를 정리해놓은 사이트가 있었으면 좋을거같다 생각해서 어떻게 웹사이트로 만들까 생각하던중 notion db 로 데이터를 저장하고 불러올 수 있다는것을 보게되어서 notion 에 여러 데이터를 넣은뒤 웹페이지에 notion api 로 데이터를 불러와서 띄워주는식으로 만들게되었고 이 데이터 정리한거를 바탕으로 다른사람들도 영화나 드라마 볼게 없거나 재밌는거 찾고싶을때 쉽게 찾을 수 있도록 여러정보들을 보여주기로 해서 만들게되었다.
(제목, 설명, 장르, 개봉일, 포스터, ost, 왓차피디아 link, 예고편 동영상, 명대사)
개발과정
이 프로젝트는 2차로 나뉜다.
v1 (2023.1.9 ~ 1.13)
처음 프로젝트할때 이름은 나혼자 데이터를 정리할려고 만든 웹사이트여서 tim(today i media) 였다.
그때는 디자인보단 notion db 데이터연동과 기능구현에 초점을 뒀다.
git source code
v2 (2023.11.14 ~ 진행중)
next.js 14 버전과 app router 을 써서 제작했다.
기존에 아쉬웠던 ui ux 를 더 신경쓰고 여기에 이번에 나온 next.js 14 기능들을 연습했다.
git source code
시행착오
1. SSG, Skeleton UI
디테일 페이지를 next.js 14 에 나온 generateStaticParams 을 사용해 미리 서버에서 fetching 할려고 했다.
export async function generateStaticParams() {
const { data } = await CustomAxios.post("");
const list: listProps[] = data.results;
return list.map((i) => ({
name: i.properties.Name.title[0].text.content,
}));
}그런데 img 업로드 오류가 나서 찾아보니 노션 db 에 있는 img 가 3시간 유효기간이 있어서 에러뜬다는 사실을 알아내고 SSR 방식으로 수정했다.
사실 app ui 기능을 이용해 스켈레톤 ui 를 이용하고싶어서 다양시도를 해봤다.
그런데 suspense 랑 ssr 이 같이 안되는것도있고 server action 을 이용해 use client 를 쓰고 useEffet 안에 action에 filter data 를 불러와서 스켈레톤 ui 를 구현하면서 서버단에서 요청을 보내는방법도 해봤는데 안됬다.
그러던중 우연히 깃허브에서 코드리뷰해주는 분을 만나 요청드렸다.
그랬더니 감사하게도 35정도의 코맨트를 해주셨다.
naming 관련되 내용과, rendering 관련된 코맨트가 주였고
이 경험을 통해서 좀더 rendering 에 대해서 생각하는 시간을 가지게 된 것 같다.
2. 디테일페이지 SEO
친구에게 영화 추천을 할려고 wtm 디테일페이지를 보내줬는데 seo 가 위사진같이 너무 별로여서
왓차피디아처럼 같은 문장말고 컨택트란 제목과 설명을 나타냈으면 좋겠어서
찾아보던중 next.js 에 Dynamic Metadata 가 있어서 적용했다.
(siteName 지우고 설명이랑 썸네일 이미지추가)
3. 홈페이지 이미지 502 에러
위사진과같이 다른페이지는 잘되는데 홈페이지만 502가 뜨는 이슈가 났다. 이 이슈를 고칠려고 1달가까히 원인을 찾아보고 여러가지 방법을 시도해봤는데 다 안됬다. 그러던중 관련된 글을 봤는데 notion api 자체 이슈가 있었다. 그래서 홈페이지를 다른페이지처럼 params 를 줘서 이슈를 해결했다 사실 좋은방법은 아닌거같고 나중에 계속 하면서 더좋은방법을 생각해볼예정이다.
4. 프로모션 페이지
메인페이지만 보면 사실 무슨 웹사이튼지 잘 모를거같기고하고 라이브러리사용안하고 스크롤이벤트를 연습해보고싶어서 만들 계획을 세웠다.(홈페이지 에러때문도 있었다)
여러 ott 사이트를 봐봤는데 애플티비 방식이 가장 맘에들어서 참고하기로했다.
- 프로모션 동영상
사실 제작하는법을 몰라서 학교에서 어도비계정 지원받은걸로 그냥 영화나 드라마 유명한 장면을 10몇개 정도 짦게다 다운받았다. 그리고 최대한 어울리는거나 다 알듯한 장면위주로 넣었던거같다.
동영상만 올라가는게 아니기도해서 나름 잘 묻어갔던거같다.
- 애니매이션
구현 방식은
IntersectionObserver 을 이용해 useVisible custom 훅을 만든뒤 visible boolean 값으로 애니매이션을 구현했다.
export const useVisible = () => {
const ref = useRef<HTMLDivElement>(null);
const [visible, setVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(({ target, isIntersecting }) => {
if (target === ref.current) {
setVisible(isIntersecting);
}
});
},
{
threshold: 1,
}
);
if (ref.current) {
observer.observe(ref.current);
}
return () => {
observer.disconnect();
};
}, []);
return [ref, visible] as const;
};
또 스크롤 이벤트를 감지해서 event 를 적용해야될경우도 대비해서 추가했고 throttle 를 사용해 랜더링을 줄였다.
const throttledScroll = useMemo(
() =>
throttle(() => {
const scrollY = window.scrollY || document.documentElement.scrollTop;
if (scrollY < 101) {
setVisibleValue(1 - scrollY * 0.01);
} else if (scrollY > 100) {
setVisibleValue(0);
}
if (scrollY > 700) {
setBrightnessState(35 - (scrollY - 1000) / 10);
}
}, 300),
[brightnessState, visibleValue]
);
useEffect(() => {
window.addEventListener("scroll", throttledScroll);
return () => {
window.removeEventListener("scroll", throttledScroll);
};
}, [throttledScroll]);마무리
아직 개선해야될점이 좀 남았다. 추천영화/드라마를 좀더 확실하게 보이게 하고싶고
데이터 랜더링속도도 좀 느린거같다.
그래도 지금까지 프로젝트하면서 있었던일들을 적어놓고 싶어서 써봤다.
사이드프로젝트 한것중에서는 제일 열심히 했던것같고 또 디자인전공이 아니라 잘 모르지만 ui,ux 에 고민을 많이하고 시도해봤다.
내가 실제로 쓰려고 만든 웹사이트여서 앞으로도 많이 업데이트 할 것 같다.
