/monorepo_test

Primary LanguageTypeScript

별 하나에 글 하나 🌟

"내 삶의 반짝이는 기억들을 우주에 담아보세요"

3D 기반 웹 추억 저장 서비스



목차

프로젝트 소개

기술 스택

기술적 경험

팀원 소개

팀원 회고


⭐️ 프로젝트 소개

<별 하나에 글 하나>를 만들게 된 계기

우리는 모두 형형색색의 기억들을 가지고 있습니다.

그 기억들을 눈으로 볼 수 있다면 얼마나 좋을까요?

저희 팀은 기억을 시각화할 수 있는 서비스를 만들고 싶었습니다.

또 밋밋하고 정적인 일기 서비스에서 벗어나, 사용자가 서비스 이용에 더 큰 흥미를 느낄 수 있도록 하고 싶었습니다.

그래서 우주 공간을 탐험하는 듯한 느낌이 드는 독특한 사용자 경험을 주는 서비스, <별 하나에 글 하나>를 만들게 되었습니다.


기능 설명

"내 삶의 반짝이는 기억들을 은하로 만들 수 있다면 어떨까?"

남겨두고 싶은 순간을 찍은 사진과, 그 순간을 떠올리며 적은 글을 별에 담습니다.

기억을 담은 별들이 모여 나만의 은하가 만들어집니다.

추억으로 가득 채워진 나의 우주를 소중한 사람들에게 공유해보세요.


☀️ 별글 작성하기

소중한 기억을 잊지 않도록

사진과 글을 담아 기억을 기록하고, 나만의 별을 생성할 수 있어요.

별을 직접 커스텀하며 그날의 감정을 표현해보세요.


🌌 은하 둘러보기

차곡차곡 쌓아온 추억들을 한 눈에 볼 수 있도록

작성된 별글들이 모여 아름다운 은하가 돼요.

우주를 공개하고 있는 다른 이용자들의 은하도 구경할 수 있어요.


🔗 우주 공유하기

내 삶의 기록들을 소중한 사람들과 함께 나눌 수 있도록

나만의 우주를 링크를 이용해 공유할 수 있어요.

가족, 연인, 친구 누구든 사랑하는 사람과 함께해요 ❤️


[ 랜딩페이지 ]

  • 왼쪽 위의 버튼을 이용해 배경음악을 끄고 켤 수 있습니다.
  • 마우스의 움직임에 따라 배경의 은하가 움직입니다.

[ 회원가입 ]

  • 중복확인, 형식 검사 등을 거친 올바른 아이디 / 비밀번호 / 닉네임으로 회원가입할 수 있습니다.

[ 로그인 ]

  • 로그인 후 홈화면으로 이동할 때 화면전환 애니메이션이 발생합니다.
  • 네이버 , 깃허브, 구글 소셜 로그인이 가능합니다.
  • 오른쪽 위 '예시 은하 구경하기' 버튼을 누르면 로그인하지 않고도 은하를 구경해볼 수 있습니다.

[ 코치마크 ]

  • 사용자에게 기본적인 서비스 사용법을 알려주는 기능입니다.
  • 첫 로그인 시에는 기본으로 뜨며, 이후에는 하단바의 물음표 버튼을 눌러 다시 볼 수 있습니다.

[ 글 조회 ]

  • 1.5배속된 영상입니다.
  • 별에 마우스를 호버하면 제목을 볼 수 있습니다.
  • 별을 한 번 누르면 별이 화면의 중앙에 오도록 시점이 변경되고, 한 번 더 누르면 별에 다가가면서 글 조회 모달이 띄워집니다.
  • 이미지는 양쪽 화살표 버튼과 아래쪽의 페이지네이션으로 이동할 수 있습니다.
  • 좋아요 버튼을 누를 수 있습니다.
  • 내 별이면 수정/삭제할 수 있습니다.

[ 글 작성 ]

  • 글은 마크다운 형식으로 작성할 수 있으며, Preview 버튼을 누르면 마크다운이 적용된 글을 미리 볼 수 있습니다.
  • 사진은 5장까지 첨부할 수 있습니다.
  • 글 작성하고 다음 버튼을 누르면 별을 커스텀할 수 있습니다.
  • 별의 양 옆에 있는 화살표 버튼을 통해 별의 모양을 변경할 수 있습니다.
  • 색상, 크기, 밝기를 조절할 수 있습니다.
  • 색상 추천 버튼을 누르면, CLOVA Sentiment api를 통해 글의 감정을 분석해 색상을 추천해줍니다.

[ 은하 수정 ]

  • 내 은하 나선팔 꼬인 정도, 나선팔 두께, 막대 길이, 은하 높이를 조절할 수 있습니다.
  • 오른쪽 위의 되돌리기 버튼을 누르면 수정 이전의 내 은하 스타일로 돌아갑니다.
  • 왼쪽 아래의 초기화 버튼을 누르면 기본 은하 스타일로 돌아갑니다.

[ 사용자 우주 설정 ]

  • 별의 밝기를 조절할 수 있습니다.
  • 블러효과를 주어 우주에 흐림 효과를 줄 수 있습니다.
  • 마우스 휠 속도를 조저할 수 있습니다.
  • 우주의 소유주와 관계없이 내가 보는 화면에만 적용되는 속성입니다.

[ 은하 공유 ]

  • 체크박스를 통해 검색 허용 여부를 설정할 수 있습니다.
  • 로그인하지 않은 사용자도 공유 링크를 통해서 은하에 접근할 수 있습니다.

[ 은하 검색 ]

  • 검색 허용된 사용자들의 우주를 닉네임 검색을 통해 구경할 수 있습니다.
  • 검색해서 들어간 우주에서 왼쪽 위 뒤로가기 버튼을 누르면 다시 내 우주로 돌아옵니다.

프로젝트 실행 방법

Front-end

yarn workspace client dev

Back-end

yarn workspace server start:dev

⚒️ 기술 스택

🔗 wiki 기술 스택 소개 바로가기

기술 스택 선정 이유에 관한 팀원들의 글


💪🏻 기술적 경험

FE

  • 작성 중

Three.js + React-Three-Fiber를 사용한 우주 공간 구현

R3F Camera

3D 공간 상에서 카메라는 사용자의 시야와 같다보니, 자연스러운 카메라 움직임이 중요했습니다.

3D 공간 상에서 사용자가 움직여야 하다보니 자연스러운 카메라 움직임이 매우 중요했습니다.

별 클릭 시 카메라의 움직임을 최초에는 회전 운동을 적용하여 구현했다가, 직선 운동으로 변경, 최종적으로는 회전운동과 직선운동의 장점을 합친 포물선 운동을 적용해주었습니다.

  • 직선 운동하는 카메라

  • 포물선 운동하는 카메라

또한 카메라의 자연스러운 움직임을 위해 멀리 이동할 때는 좀더 빠르게, 가까이 이동할 때는 좀 더 느리게 이동하는 움직임도 구현해주었습니다.

마지막으로 멀리 있는 물체의 경우 너무 작게 보이는 문제점이 존재하여 최소 크기를 설정, 멀리 있는 별의 크기가 너무 작아보이지 않게 해주는 효과도 적용해주었습니다.

이렇듯 저희 팀은 항상 사용자 경험을 향상시키기 위해 많은 방법들을 적용해보았으며,이를 위해 다양한 학습과 고민을 이어나갔습니다.

성능 최적화

한 화면에 매우 많은 오브젝트를 보여줘야 하는 프로젝트 특성상 실행 환경에 많은 영향을 받아 최적화가 필수적이었습니다.

이에 여러 최적화 방법 중 우리 프로젝트에 적용하기 가장 적합한 Instancing과 Performace Moritoring을 사용해 최적화를 진행했습니다.

  1. Instancing

    CPU가 GPU에게 무엇을 어떻게 그릴지 지시하는 Draw Call은 단순해 보이지만 상당히 무거운 작업입니다. 일반적인 컴퓨터 환경에서 Draw Call이 대략 1000회 넘어가 프레임 드랍이 생긴다는 점을 고려하면, 배경별만 4000개인 우리 프로젝트는 이 Draw Call을 줄여줘야 했습니다.

    이를 위해 사용한 방식이 Instancing으로 동일한 오브젝트를 여러번 그리는 경우 이를 한번에 처리하도록 하는 방식입니다. 이 방식을 통해 배경별을 종류별로 묶어줌으로써 Draw Call에 의한 CPU 병목 현상을 해결했습니다.

  2. Performance Monitoring

    위의 과정 이후 GPU 또한 최적화가 필요함을 발견했습니다. 다양한 최적화 방식이 있었으나 우리가 사용하는 대부분의 오브젝트가 매우 매우 단순한 형태라 그리 효과적이지 않았습니다. 이에 선택한 방법이 Performance Monitoring으로 실시간으로 웹의 퍼포먼스를 확인해 이를 반영하는 방식입니다.

    이를 통해 퍼포먼스가 좋지 않은 경우 Device Pixel Ratio을 최대 0.5까지 낮추도록 설정해주었습니다.

FSD 아키텍처 적용

프로젝트가 진행됨에 따라, 파일들이 많아져 각각의 파일들이 명확하게 분리되어야 할 필요성이 느껴졌습니다. 이에 따라 새로운 폴더 구조를 적용해보기로 결심했고, 그중에 눈에 띄었던 FSD방식을 적용해보기로 했습니다.

FSD 방식 아키텍쳐는 프로젝트 폴더를 6개의 layer로 구분하고, 각각의 레이어들을 다시 slice와 segment들로 분할하여 관리하는 디자인 입니다. 이를 적용해보는 것으로 각 파일들의 명확한 분리와 한눈에 들어오는 폴더 구조를 가질 수 있게 되었습니다.

라우팅


BE

  • 작성 중

💪🏻 자세한 프로젝트 진행과정은 wiki를 참고해주세요!


🏃‍♂️ 팀원 소개

🔗 wiki 팀원 소개 바로가기

J010 김가은 J016 김동민 J053 박재하 J073 송준섭 J098 이백범

🐙 J010 김가은 (FE)

🐧 J016 김동민 (FE)

👾 J053 박재하 (BE)

⚽️ J073 송준섭 (BE)

🐰 J098 이백범 (FE)


🍡 팀원 회고

  • 수료 후 작성 예정