Skip to content
김가은 edited this page Dec 14, 2023 · 6 revisions

별 하나에 글 하나 🌟

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

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

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

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


주요 기능

☀️ 별글 작성하기

소중한 기억을 잊지 않도록

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

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


🌌 은하 둘러보기

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

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

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


🔗 우주 공유하기

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

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

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


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

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

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

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

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

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


기능 설명

[ 랜딩페이지 ]

  • 마우스의 움직임에 따라 배경의 은하가 움직입니다.
  • f9를 눌러 전체화면으로 변경할 수 있습니다.
  • 왼쪽 위의 버튼을 이용해 배경음악을 끄고 켤 수 있습니다.
  • TMI 1) 배경음악은 백엔드의 박재하님이 만드셨습니다.
  • TMI 2) 프론트엔드의 김가은이 동물의 숲 BGM을 사용하고 싶어서 닌텐도 본사에 직접 문의해봤지만 거절당했습니다.

[ 회원가입 ]

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

[ 로그인 ]

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

[ 코치마크 ]

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

[ 글 조회 ]

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

[ 글 작성 ]

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

[ 은하 수정 ]

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

[ 사용자 우주 설정 ]

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

[ 은하 공유 ]

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

[ 은하 검색 ]

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

프로젝트 실행 방법

Front-end

yarn workspace client dev

Back-end

yarn workspace server start:dev

위키가 마음에 드셨다면 스타 한 번씩 눌러주세용 👻

소개

규칙

학습 기록

[공통] 개발 기록

[재하] 개발 기록

[준섭] 개발 기록

회의록

스크럼 기록

팀 회고

개인 회고

멘토링 일지

Clone this wiki locally