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

함께 찍은 네컷 사진들을 그룹 다이어리에 보관하고, 동시에 편집이 가능한 공유형 다이어리 꾸미기 서비스

---

프로젝트 제안 배경

요즘 사회는 물질적 소유를 중요시하는 '소유 경제'에서 벗어나 어떤 경험을 했는지가 중요한 경험 경제로 변화하고 있다.

MZ세대의 꾸미기 문화는 주류 트렌드로 자리잡았다. 인스타그램 해시태그 게시물 수에 따르면 다꾸가 413만개, 인생네컷이 125만개에 이른다.

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

---

주요 기능

1. 소셜 로그인

• 카카오와 구글 로그인을 통해 간편하게 로그인 및 회원가입 가능

2. 나만의 포토 앨범 만들기

• 친구, 연인, 가족, 혼자와 같은 다양한 카테고리로 앨범 생성
• 그룹원들만 공유하고 감상할 수 있는 공간

3. 동시 편집 기능

• 여러 사람이 동시에 사진을 추가하거나 편집 가능
• 각자의 집에서도 실시간으로 확인하고 함께 작업

4. QR 인식 기능

• QR 코드를 통해 네컷 사진을 바로 불러오기
• 사진이나 앨범 공유 및 관리가 간편해짐

5. 도전과제

• 그룹원들이 함께 또는 개인적으로 다양한 도전과제 수행
• 골드 단계 수행 시 칭호 획득

6. 휴지통 기능

• 삭제한 페이지를 최대 7일간 보관
• 실수로 삭제해도 복구 가능

---

기술 스택

분류	기술
Frontend	React + TypeScript
상태 관리	Recoil, React Query
라우팅	React Router DOM
스타일링	Sass
API	Axios
실시간 협업	Yjs, y-websocket, y-presence
캔버스	TLdraw
테스트	Mock Service Worker

---

핵심 구현 포인트

1. 캔버스 기반 드로잉 (TLdraw)

사용자가 웹 애플리케이션 내에서 직관적으로 드로잉하고 도형을 그릴 수 있는 기능을 구현했다.

2. 웹 소켓 통신을 이용한 실시간 협업

Yjs 라이브러리를 활용하여 여러 사용자가 동일한 캔버스 페이지에 대해 동시에 작업할 수 있도록 했다.

3. 반응형 디자인

react-select, react-modal 등의 라이브러리를 활용하여 다양한 디바이스에서의 사용자 경험을 향상시켰다.

---

폴더 구조

├── public
│   └── assets
│
└── src
    ├── common
    │   ├── atom
    │   ├── molecule
    │   ├── organism
    │   └── template
    │
    ├── pages
    │   └── components
    │
    ├── recoil
    ├── services
    ├── util
    └── types

---

관련 문서

• 801 다 맡게팅 - 또 다른 학교 프로젝트
• 803 investica - AI 기반 주식 투자 분석 플랫폼