프로젝트

퍼즐로그(Puzzlelog) : 조각 기반 감정 다이어리 플랫폼

cagn 2025. 4. 20. 22:00
SMALL
프로젝트명

퍼즐로그(Puzzlelog)

 - 조각을 퍼즐처럼 모아서 일기로 기록한다는 의미에서 '퍼즐로그'로 지었다.

 

프로젝트 기간

2025. 02. 18 ~ 2025. 04. 09

 

기획 배경 및 소개

- 일기라는 컨텐츠를 '기억 조각'으로 나누어 구성해보자는 생각에서 출발했다.

- 하루가 끝나고 일기를 쓰기보다는, 그때그때 떠오를 때 다양한 형태의 조각을 남기는 구조

 → 조각의 구조는 글, 사진, 영상, 음성이 있다.

- 조각을 퍼즐처럼 조합해 완성된 일기를 꾸밀 수 있는 감성적인 다이어리 꾸미기 플랫폼

 

 핵심적인 컨셉

- 글 조각, 사진 조각, 영상 조각, 음성 조각을 모아서 일기를 구성한다.

- 일기는 관리자가 에셋으로 등록한 스티커, 배경을 통해서 꾸밀 수 있고, 펜 드로잉도 가능하다.

- 일기에 첨부된 조각(Piece)과 에셋(Asset)은 요소(Element)가 되며, 여러 요소를 넣을 수 있다.

- 협업 일기와 타임캡슐 일기같은 감성적 요소와 실험적인 요소를 포함했다.

- 작성된 일기를 공유하여 커뮤니티 형식으로 좋아요와 댓글을 달 수 있도록 했다.

 

기술 스택 및 구조

프론트엔드 : Javascript + React (Tailwind CSS, Fabric.js, SVG)

백엔드 : Java + Spring (JPA, JWT)

모바일 : Dart + Flutter

서버 및 클라이언트 배포 : AWS EC2, Docker, Netlify

DB 클라우드 : MySQL (RDS), MongoDB (Atlas)

 

구조 스크린샷

# 웹페이지 (접은 글 펴주시면 됩니다.)

더보기
메인 페이지
회원가입 페이지
로그인 후 메인 페이지 (오늘 쓴 조각이 퍼즐 형태로 돌아가고 있다.)
조각쓰기 페이지
글 조각 쓰기 페이지
일기쓰기를 위한 조각 선택페이지
일기쓰기 페이지 옆에서 메뉴에서 스티커를 붙일 수 있다.
협업일기 친구 초대기능
감정캘린더 기능으로 그 날에 쓴 일기의 감정을 볼 수가 있다.
커뮤니티에 자신이 쓴 일기를 공유할 수 있다.
공유할 일기를 선택할 수 있다.
공유된 일기에 좋아요와 댓글을 남길 수 있다.
디지털 앨범으로 여러 일기를 묶어서 볼 수가 있다.
관리자 페이지에서 스티커와 광고, 그리고 챌린지를 관리할 수 있다.
스티커의 잠금(유료화) 및 삭제, 추가를 할 수 있다.

# 모바일 (접은 글 펴주시면 됩니다.)

더보기
로그인 화면

 

회원가입 화면
홈 화면 (밑에 주요 기능이 나열되어 있다.)
이 화면에서 조각을 선택할 수 있다.
조각에서 태그 및 GPS를 넣을 수 있다. 태그는 ,을 넣으면 자동으로 분리된다.
다양한 형태의 조각이 있다. 탭하면 확대가 된다.
어떤 일기를 작성할 지 선택하는 화면이다.
일기의 목록이고, 탭시 세부 일기가 나온다.
일기의 세부 내용을 볼 수 있다. 배경이 있고, 펜 드로잉과 스티커, 조각이 모두 나열되어 있다.
일기를 작성하는 공간이다. 빨간색으로 펜 드로잉을 했다. 오른쪽 네모로 조각 선택, 왼쪽에서 에셋 선택 가능하다.
조각 선택을 누르면 다음과 같이 자기가 쓴 조각들이 나온다.
스티커 선택시 스티커 목록들이 카테고리별로 나온다.
커뮤니티를 선택하는 메뉴이다.
커뮤니티에 공유된 일기가 나열된다.
공유된 일기에 좋아요와 댓글을 달 수가 있다.
감정 캘린더로 일기를 쓰고 난 후 저장을 할 때 기록한 감정을 캘린더로 볼 수 있다.
친구 신청을 할 수 있다. 이 기능은 웹도 동일하게 존재한다.
마이페이지 기능으로 정보 수정과 앨범을 관리할 수 있다. 이 기능도 웹에 동일하게 존재한다.
관리자 메뉴의 홈으로 스티커와 광고를 관리할 수 있다.
스티커를 잠금 및 삭제, 추가를 할 수 있다.
주요 기능

조각 생성 : 글, 사진, 영상, 음성을 그때그때 작성할 수 있고, 모바일로 작성하는 경우 GPS 첨부가 가능하다.

일기 생성 : 조각을 선택하고, 에셋(스티커, 배경)과 펜 드로잉으로 다이어리 꾸미기식으로 꾸밀 수 있다.

감정 기록 : 일기를 저장할 때 감정을 선택하고, 그 감정을 캘린더에서 볼 수 있도록 할 수 있다.

공유 기능(커뮤니티) : 일기를 퍼즐로그 커뮤니티에 공개하여 좋아요와 댓글을 유도할 수 있다.

타입캡슐 일기 : 일기를 특정한 날짜 이후에 개방할 수 있도록 할 수 있다.

협업 일기 : 친구를 초대하여 그 친구와의 특정 날짜에 작성한 조각을 모아서 일기를 쓸 수 있게 할 수 있다.

디지털 앨범 : 일기를 여러 개 모아서 앨범으로 관리할 수 있다.

 

수익 모델 설계

- 유료 스티커 아이템 (연예인, 캐릭터, 브랜드 협업 고려)

- 광고 삽입 기반의 수익화 구조

- 관리자 페이지에서 유료화 설정 및 광고/스티커/배경 추가가 가능하다.

 

반응형
○ 나의 역할
- 전체적인 아이디어 기획을 주도했다. (이 당시 내놓은 아이디어로 로그인 관리와 신생아 관리 등의 아이디어가 있었다.)
- 백엔드 RESTful API 형태 리펙토링
- 모바일 앱 전체 설계 및 개발 (Flutter, Dart)
- 서버 및 클라이언트 배포 전반 수행 (AWS EC2, Docker, Netlify, RDS, Atlas 등)
- 프론트엔드 구조 정리 및 조율 (React)

○ 회고 및 느낀점
- 처음 접한 기술(MongoDB, Flutter, Docker, AWS 등)을 빠르게 흡수하고 실전에 적용했다.
- 협업 일기에서 실시간 기능을 수행하려고 했으나 웹소켓 이해와 기간 부족으로 우회 설계했다.
- 기술과 감성을 결합한 기획력을 인지할 수 있었고, 아이디어를 실제 동작하는 제품으로 만드는 것이 신기했다.
- Flutter의 확장성과 크로스플랫폼의 실용성에 대한 경험을 익힐 수 있었다.
- Github을 조직 레포지토리의 형태로 만들었고, 백엔드, 프론트엔드, 모바일을 각각의 레포로 나누는 경험을 했다.

 

* 프로젝트 Github 링크

https://github.com/puzzlelog

LIST