DEBUG 밴드 홈페이지

취미로 하고 있는 DEBUG라는 밴드 모임의 홈페이지를 한번 만들어보았습니다.

메인

메인 페이지는 다른 특별한 기능이 존재하지 않고 3D 모델을 활용해 구성하였습니다.

구현에는 three.js, react-three-fiber, drei, gsap, framer-motion-3d가 사용되었습니다.

각각의 mesh는 framer-motion-3d를 이용하여 애니메이션을 표현했습니다.

또한 3D 모델을 활용한 것임을 명확히 하기 위해 마우스의 움직임에 따른 카메라 상호작용을 구현했습니다.

트랙

트랙 화면은 밴드에서 연습하는 곡들을 모아놓은 곳입니다.

데이터베이스 유지 비용이 들지 않도록 하기 위해 데이터는 Notion API를 활용하여 개인 Notion 페이지에서 불러와 관리되고 있습니다.

앨범

앨범 화면은 밴드 활동을 하면서 찍은 사진들을 모아놓은 곳입니다.

해당 페이지에서 나타나는 이미지들도 Notion API를 활용하여 개인 Notion 페이지에서 불러와 관리되고 있습니다.

구독

구독 화면은 DEBUG 밴드의 최신 활동 소식을 받아볼 수 있도록 이메일을 등록하는 페이지입니다.

해당 페이지에서 등록하게 된 이메일은 Notion API를 통해 저장되고 관리됩니다.

구독 시 무분별한 이메일을 입력하는 것을 방지하기 위해 다음과 같은 인증 메일을 통해 확인 작업을 거치게 됩니다.

해당 이메일이 이미 구독 중인지 확인
구독이 필요한 이메일이라면 Email 정보를 담은 JWT Token을 생성하고 해당 이메일에 토큰이 포함된 인증 링크를 포함해 발송 (토큰의 만료 시간은 3분으로 지정)
사용자가 메일의 인증 링크를 클릭하면 해당 JWT Token을 복호화하여 검증하고 알맞은 결과를 표시합니다.

위와 같은 방식은 허점이 많아 실제 서비스에서 사용할 수 없음을 알고 있지만 비용 없이 환경을 구성하다보니 제한적이어서 해당 방식으로 선택해 구현하였습니다.

구현된 화면은 아래와 같이 동작합니다.