우리들의 네컷 모음집 "네모" - 2조

🔅 프로젝트 소개

프로젝트 네모는 함께 찍은 네컷 사진들을 그룹 다이어리에 보관하고, 동시에 편집이 가능한 공유형 다이어리 꾸미기 서비스입니다.
(물론 다른 사진들도 가능합니다 😊)

프로젝트 제안 배경

요즘 사회는 물질적 소유를 중요시하는 '소유 경제'에서 벗어나 어떤 경험을 했는지가 중요한 경험 경제로 변화하고 있다고 합니다.
사람들은 자신의 소중한 경험을 다른 사람들과 공유하고, 그 경험을 통해 자신을 표현하고 싶어합니다.
이러한 흐름을 반영하여 소중한 경험을 다같이 공유하고 꾸밀 수 있다면 얼마나 좋을까? 라는 생각에서 저희의 프로젝트는 시작되었습니다.

MZ세대의 "꾸미기 문화"는 주류 트렌드로 확실하게 자리잡고 있습니다. MZ 트렌드를 다루는 미디어 캐릿에서 "별다꾸" (별걸 다 꾸민다) 라는 신조어가 생길 정도이니 말입니다. 인스타그램 해시태그 게시물 수에 따르면 '다꾸'가 413만개, '인생네컷'이 125만개에 이르는 것으로 보아, 10-30 세대들이 이 두 키워드에 큰 관심을 가지고 있다는 것을 알 수 있습니다.

저희는 이 두 키워드를 결합하여, 함께 찍은 사진들을 그룹 다이어리에 보관하고, 동시에 편집이 가능한 공유형 다이어리 꾸미기 서비스인 네모 를 제안합니다.

개발 기간

2023.09-11 (카카오 테크 캠퍼스 1기 - 3단계 진행 기간)

사용 기술 및 협업 스텍

• jdk 11
• springboot 2.7.15
• mysql 8.0.28
• redis 7.2
• spring security
• open feign
• aws 2.26
• figma
• slack
• notion

🙋‍♀️ 서비스 소개

실시간 공유형 다이어리 꾸미기 서비스 네모

🫂 나만의 포토 앨범 만들기

• 친구, 연인, 가족, 혼자와 같은 다양한 카테고리로 나만의 포토 앨범을 만들 수 있어요!
• 이 앨범은 그룹원들만이 공유하고 감상할 수 있는 소중한 공간👨‍👩‍👦‍👦이 될 것 입니다.

⏱️ 동시 편집 기능

• 네모는 여러 사람이 동시에 사진을 추가하거나 편집할 수 있어요.
• 그래서 각자의 집에서도 서로가 어떤 사진을 추가하고 어떻게 꾸미는지를 실시간으로 확인👀하고 함께 할 수 있답니다.

💻 QR 인식 기능

• 네모 앨범은 QR 코드를 통해 네컷 사진을 바로 불러올 수 있어요.
• 이를 통해, 사진이나 앨범을 서로 공유하고 관리하는 것이 더욱 간편해질 거에요.

🏃‍♀️ 도전과제

• 네모 앨범은 그룹원들이 함께 혹은 개인적으로 다양한 도전과제를 수행할 수 있도록 해요!
• 또한, 골드 단계🏅를 수행하면 나만의 칭호도 획득할 수 있답니다.
• 이를 통해 사진찍고 꾸미는 것이 더욱 즐거운 경험✨으로 변화할 거에요.

🗑️ 휴지통 기능

• 그룹원이 삭제한 페이지를 다시 확인하고 싶다면, 휴지통에서 복구할 수 있어요.
• 휴지통은 최대 7일간 삭제된 페이지를 보관하니, 중요한 페이지를 실수로 삭제하더라도 걱정하지 마세요.

🖇 ️팀 내 배포 링크 모음

프론트 배포 인스턴스 주소 :

백 배포 인스턴스 주소 : 백 배포 인스턴스 주소

🗂️ 최종 ERD

프로젝트 구조

🗂️ 
└─ src
   └─ main
      ├─ java.cpm.example.team2_be
      │  └─ com
      │  ├─ BaseEntity.java
      │  ├─ Team2BeApplication.java
      │  ├─ 📦 album
      │  │  ├─ 📦 member
      │  │  └─ 📦 page
      │  │     └─ image
      │  ├─ 📦 auth
      │  ├─ core
      │  │  ├─ config
      │  │  ├─ error
      │  │  │  └─ exception
      │  │  ├─ security
      │  │  └─ utils
      │  ├─ error
      │  ├─ 📦 reward
      │  │  └─  progress
      │  ├─ 📦 title
      │  │  └─ collection
      │  ├─ 📦 trash
      │  └─ 📦 user
      └─ resource

©generated by Project Tree Generator

🎯 중점을 둔 기능

FE

1. 캔버스 기반의 도형 및 드로잉 기능 (TLdraw 활용)

• 사용자가 웹 애플리케이션 내에서 직관적으로 드로잉하고 도형을 그릴 수 있는 기능을 제공할 수 있도록 구현했습니다.
• 깃허브 URL

2. 웹 소켓 통신을 이용한 실시간 협업 및 동시 편집 기능

• Yjs 라이브러리(yjs, y-websocket, y-presence)를 활용하여 실시간 협업 및 동시 편집 기능을 구현하여 여러 사용자가 동일한 캔버스(TLdraw) 페이지에 대해 동시에 작업할 수 있도록 했습니다.

3. 반응형 디자인 및 최적화된 사용자 인터페이스

• react-select, react-modal 등의 라이브러리를 활용하여 사용자 인터페이스를 최적화하고, 반응형 웹 디자인을 구현하여 다양한 디바이스에서의 사용자 경험을 향상시킵니다.
• 깃허브 URL

4. 소셜 로그인 및 사용자 인증

BE

1. 소셜 로그인

• 카카오 소셜로그인, 구글 소셜 로그인 이용
• 깃허브 URL

2. 실시간 웹 소켓 통신

• 깃허브 URL

3. 앨범 페이지 기능

• 깃허브 URL