프로젝트

1. BestMoments 프로젝트: 기획 단계에서 배우는 것들

trophy98 2024. 7. 1. 16:51

이번 포스트에서는 제가 최근에 진행하고 있는 BestMoments 프로젝트에 대해 소개하고자 합니다.

이 프로젝트는 아직 개발 초기 단계에 있으며, 개발 기획, 단계, 과정으로 부터 배우고 있는 것들을 소개하고자 합니다.

프로젝트를 시작하게 된 계기 (기획 의도)

저는 게임,문화,여행 등 여러 활동을 즐기며, 그 순간을 영상으로 기록하고 추억으론 간직하곤 합니다.

얼마나 많은 영상을 기록하느냐구요? 구글 드라이브에 프리미엄을 사용해서 영상을 저장할 정도로 많은 영상을 기록하고 있습니다.

 

하지만 이러한 영상을 단순히 저장하는 것만으로는 만족스럽지 않았습니다. 특히나 게임을 하면서 최고의 플레이 순간을 저장하고 공유하고 싶을때가 많았습니다. 

영상을 공유할 수 있는 방법들

영상을 공유할 수 있는 방법으로는 유튜브나 SNS 업로드 등 다양한 방법이 있습니다. 그러나 이러한 플랫폼들이 단점도 있었습니다.

예를 들어

  • 저작권 문제: 배경 음악이나 콘텐츠에 대한 저작권 문제로 인해 영상이 삭제되거나 제재를 받을 수 있습니다.
  • 광고 삽입: 유튜브 등 플랫폼에는 영상 중간에 광고가 삽입될 수 있어 사용자의 경험을 방해할 수 있습니다.
  • 복잡한 업로드 과정: 유튜브에서는 영상 업로드 시 제목, 설명, 썸네일 설정, 시청자층 설정 등 많은 세부 정보를 설정해야 합니다. 이러한 과정은 반복되면 번거로울 수 있습니다.

제가 원했던 것은 간단하게 1~5분내의 클립을 업로드하여 바로 공유할 수 있는 최적화된 시스템이었습니다. 그동안 사용해본 플랫폼 중에서는 Streamable이 그런 체계적인 시스템을 잘 갖추고 있다고 느꼈습니다. 그러나 몇가지 아쉬웠던 점은 Streamable은 단순히 영상을 업로드하고 편집하여 사람들에게 링크로 공유하는 형식이었습니다.

 

저는 여기서 더 나아가, 링크 공유 외에도 큰 틀의 주제나 카테고리별로 인기 있는 영상(좋아요 및 조회수 기준)을 메인 페이지에서 보여주는 시스템이 있었으면 좋겠다고 생각하여 지금의 BestMoments 프로젝트를 기획하게 되었습니다.

기획 및 설계 과정

아이디어 구상

아이디어에는 세부적인 내용이 정말 많지만 주요 기능을 큰 틀로 보자면 아래와 같습니다.

  • 로그인: 사용자 인증 및 관리
  • 영상 업로드 및 공유: 사용자가 간단하게 영상을 업로드하고 공유할 수 있는 기능
  • 인기 영상 표시: 좋아요 혹은 조회수를 기준으로 인기 있었던 영상을 메인 페이지에 표시

큰 틀안에서도 정말 나눌수 있는게 많았습니다.

예를들어 로그인 방식은 어떻게 할 것인지(oauth ?, jwt 인증?), 영상 업로드 후 관리를 어떻게 할 것인지, 인기 영상은 어떤 기준으로 표시 할 것인지에 대해 세부적인 내용이 많았지만 지금은 초기에 큰 틀을 어떤식으로 잡았는지 기록하기 위해 3개의 주제로만 나누었습니다.

 

설계

프로젝트의 UI/UX 디자인을 위해 초기 뼈대는 tldraw를 사용해서 컨텐츠 표시 및 아이디어를 작성하였고 

따로 figma 툴을 사용하지 않고 정말 머릿속에 그려진 페이지를 UI로 담는 형식 이였습니다.

또한 여기서 추가적으로 어떠한 디자인을 넣을지 애니메이션을 그릴지 선택하는 형태로 그림을 그렸습니다.

기술 스택

프론트엔드

  • Next.js, Typescript, tailwind css

협업 툴

  • Notion, github issues

마찬가지로 정말 초기 기술 스택 선정입니다. 여기서 왜 Next.js를 선택했는지는 Next.js를 사용하는이유? 에 대한 포스팅을 읽어보면 next가 가져다주는 이점은 정말 많고 백엔드 환경이 있어도 server actions을 무시할 수 없는 부분도 있습니다(이미지 최적화 등).

 

현재 진행 상황

현재는 정말 초기 단계이며 기본적인 페이지 구조와 필요한 라이브러리와 같은 것을 파악하고 있습니다.

그 과정에서 확장성으로 영상을 편집하는 방법에 대해 ffmpeg라는 프로그램을 사용하는 방법을 공부하고 있고 어떤식으로 확장성을 열어 컴포넌트 구조를 만들어 갈건지 만들어 가는 단계에 있습니다.

 

마치며

해당 포스팅은 프로젝트의 정말 초기 단계 입니다. 왜 이런 프로젝트를 시작하게 되었는지, 프로젝트를 할때 필요한 부분은 어떤 것이 있는지, 기술 스택은 어떻게 선택했는지에 대한 포스팅입니다. 

앞으로 정말 고민하고 추가해야되는 부분이 아직 많이 남아있다고 생각이 듭니다.

로그인 방식은 어떻게 할 것인지, 서버에 동영상을 어떤식으로 압축하여 저장할 것인지, 비즈니스 모델(BM)은 어떠한 방향으로 갈 것인지 등 백엔드와 소통하며 어떤식으로 진행할 것인지에 대해 고민해야될 부분이 정말 많습니다. 앞으로의 포스팅에선 프론트엔드 에서의 고민과 개발 이야기를 들려줄 계획입니다.

 

2024년 08월 01일

개발 블로그를 작성하는 과정에서 현재 비디오 인코딩 작업과 프레임워크 및 라이브러리를 학습하는 과정에 있어서 러닝커브가 길어지고 있어서 추후 작성 예정입니다.