뚜복 (DDUBOK)

익명 기반의 행운 카드 배달 서비스🍀

Visit GitHub

개요

최근에 사회는 빠르게 변화하고 있고 많은 사람들이 치열한 경쟁과 높은 스트레스 속에서 살아가고 있습니다. 이런 상황에서 우리는 누군가에게 작은 격려와 응원을 전하는 것만으로도 삶에 긍정적인 영향을 미칠 수 있다는 점에 주목했습니다. 뚜복은 이러한 현대인의 정서적인 교류를 충족시키기 위해 기획되었습니다. 사용자가 응원과 격려의 메시지를 담은 편지를 작성하고 행운 카드를 통해 상대방에게 희망을 전달할 수 있게 도와 줍니다. 또한 행운 지수를 확인하며 날 마다의 소소한 재미를 더해 단순한 커뮤니케이션을 넘어 감정적 교감과 위로를 나누는 새로운 경험을 제공합니다. 뚜복은 사람 간의 따뜻한 연결을 통해 더 나은 일상을 만들어 나가고자 하는 마음에서 출발했습니다. 작은 행운 카드 한장이 그리고 한 마디의 응원이 우리의 삶을 얼마나 풍요롭게 만들 수 있는지 보여주는 서비스로, 더 많은 사람들이 서로에게 힘이 되어주는 세상을 꿈꾸며 기획하게 되었습니다.

개발 기간

2024.10 ~ 2024.11 (5주)

참여 인원

6명 (프론트엔드 2명, 백엔드 4명)

주요 기능

  • 나만의 행운 카드 생성

  • 친구에게 행운 카드 요청 및 공유

  • 오늘의 운세 확인

  • 관리자 페이지를 통한 개발과 운영 분리

시스템 아키텍쳐

Frontend
  • Next

  • Typescript

  • Javascript

  • Tailwind CSS

  • Zustand

  • Firebase

  • Service Walker

Backend
  • Spring Boot

  • JPA

  • Maria DB

  • Redis

CI/CD
  • Docker

  • Jenkins

  • AWS EC2

  • Nginx

  • Ubuntu

  • AWS S3

Collaboration
  • GitLab

  • Jira

  • MatterMost

  • Figma

  • Notion

담당 역할

로그인 및 회원가입

스프링 시큐리티를 기반으로 처리된 토큰을 서버에서 가져와 SNS 로그인을 진행한다

행운 카드북 조회 및 관리

수신한 행운 카드를 조회하고 부적절한 내용이 담긴 카드는 AI 필터링을 통해 처리한다

오늘의 운세 조회

사용자가 매일 확인할 수 있도록 당일 운세와 행운 지수를 제공한다

전역 상태 관리

Context API를 통해 데이터를 전달하고 Zustand를 통해 토큰을 상태 관리한다

백그라운드 및 포그라운드 푸쉬 알림

Firebase와 Service Walker를 통해 특정 상황이 되었을 때 푸쉬 알림을 전송한다

오픈 그래프 및 SNS 공유 설정

카카오톡, X (구 트위터)에 행운 카드 요청 및 공유 시에 오픈 그래프가 적용되도록 한다

서비스 화면

서비스 메인

메인 상단데는 행운 카드 배너 형식으로 보여주어 사용자들의 시선을 사로잡고, 하단에는 뚜복을 사용하는 방식을 간단하게 안내하고 있습니다. 대표 서비스인 행운 카드 생성과 요청을 빠르게 할 수 있도록 최상단에 배치했습니다.

행운 카드 생성

행운 카드 앞면은 기본적으로 제공되는 템플릿을 사용하거나, 혹은 Fabric.js를 기반으로 만들어진 캔버스에서 제공된 에셋 및 팔레트를 활용하여 나만의 행운 카드를 제작할 수 있습니다. 행운 카드 뒷면에는 편지를 작성할 수 있습니다.

행운 카드 조회

행운 카드는 이벤트 기간 시 정해진 날짜에 오픈되고, 이벤트 기간이 아닐 시 24시간 뒤에 오픈됩니다. 오픈된 행운 카드에 부적절한 내용이 포함되어 있다면 AI로 필터링하여 사용자에게 경고 문구가 보여진 상태로 조회됩니다.

행운 카드 공유

타인에게 행운 카드를 요청하거나, 내가 만든 카드를 공유할 수 있습니다. 공유된 카드는 오픈 그래프가 적용되어 행운 카드 앞면을 미리볼 수 있습니다.

서비스 관리

관리자 페이지를 통해 사용자와 신고 처리를 관리하고, 이벤트 시기마다 메인 화면을 변경할 수 있습니다.

성과 및 배운 점

서비스 배포 및 운영을 통한 실사용자 확보

서비스를 배포한 후 SNS 마케팅을 진행하여 2주동안 약 2,500명 이상의 활성 사용자를 확보했고 4,500회 이상의 세션 수를 발생시켰다. 운영 기간 동안 구글 폼을 통해 사용자들의 피드백을 받았고, 이를 반영하여 서비스를 5회 업데이트했다. 이 과정에서 사용자가 불편함을 느낄 수 있는 UI를 개선하여 기존 사용자는 물론 추가로 유입되는 사용자도 더 나은 경험을 할 수 있도록 노력했습니다.

Next와 SSR에 대한 이해 및 적용

서비스 배포와 운영을 목표로 진행한 프로젝트였기 때문에, SEO 최적화를 위해 Next를 기반으로 작업을 진행했습니다. 그러나 Next 환경에서 작업하는 것은 처음이었기 때문에 프로젝트 초기 단계에는 SSR의 특성을 이해하고 데이터를 처리하는 데 어려움이 있었습니다. 특히 CSR과의 차이를 구체적으로 파악하며, 각 렌더링 방식의 장단점과 활용 사례를 학습해야 했습니다. 프로젝트를 진행하면서 여러 문제들을 하나씩 해결해 나갔으며, 이를 통해 Next와 SSR의 개념을 깊이 이해하고 이를 실무에 효과적으로 적용할 수 있는 능력을 키울 수 있었습니다.

Context API와 Zustand의 활용

상태 관리를 기반으로 하여 컴포넌트를 제작하고 기능을 구현하며, 효율적인 상태 관리와 컴포넌트 재사용성에 대해 고민했습니다. Context API를 활용하여 Menu 컴포넌트와 Modal 컴포넌트를 설계하며, 컴포넌트의 재사용성을 극대화하고 아토믹 디자인 원칙을 적용하려는 노력을 기울였습니다. 또한, Zustand를 활용해 AccessToken 관리를 구현하며, 토큰 탈취로 인한 보안 위협을 방지하기 위한 방법들을 고민했습니다. 이를 통해 상태 관리 라이브러리의 특징과 활용법을 이해하고, 보안성을 고려한 설계를 배우는 계기가 되었습니다.

백그라운드 및 포그라운드 푸쉬 알림 고도화

Firebase와 Service Walker를 기반으로 백그라운드 및 포그라운드 푸쉬 알림 시스템을 구축했습니다. 사용자 경험을 고려하여 매일 오전 운세 확인 알림, 카드를 수신하거나 오픈되었을 때 등 상황에 맞는 알림이 작동하도록 구현했습니다. 이 과정에서 FCM의 구조와 Service Walker의 동작 방식에 대해 이해하고, 백그라운드와 포그라운드에서의 알림 처리 방식의 차이를 경험할 수 있었습니다. 또한, 푸쉬 알림이 사용자 참여를 높이는 데 어떻게 기여할 수 있는지 고민할 수 있었습니다.

🐶 김윤 | 프론트엔드 개발자

© 2024 Yoon Kim. All rights reserved. 

🐶 김윤 | 프론트엔드 개발자

© 2024 Yoon Kim. All rights reserved. 

🐶 김윤 | 프론트엔드 개발자

© 2024 Yoon Kim. All rights reserved.