/PetMory

큐시즘 27기 밋업 3조 백엔드

Primary LanguageHTML

🐶 서비스 소개

반려동물과 함께한 시간들,

지나가는 ‘순간’이 아닌 지속되는 ‘기억’으로 !

‘펫모리’ (pet + memory)

_

📸이미지 설명

반려견의 활기찬 이미지와 오렌지 톤 보정, 전체적으로 밝고 따뜻한 무드를 활용해 유저들이 해당 서비스를 이용하면서 반려견과 따뜻했던 추억을 회상하며 긍정적인 감정을 느낄 수 있는 아이템 이미지를 제작했습니다.

💻 팀명 : 삼전(SAMSION)

Untitled‘삼전(SAMSION)’

‘화합’, ‘추억’, ‘소통’ 이라는 3가지의 비전으로

서비스를 제공하는 3조라는 의미를 가지고 있습니다.

🔖R&R

분야 이름 포지션
기획 신민선 🖊프로젝트 매니징, 서비스 기획, 사업 모델 구축
기획 하현정 📊서비스 기획, 리서치 담당
기획 김가연 📑서비스 기획, 메뉴구조도 담당
디자인 오태석 🎨UI/UX, 서비스 디자인
개발 장세은 👩🏻‍💻Back-end 개발, 인프라구축
개발 심규민 👨🏻‍💻Back-end 개발, 인프라구축
개발 이수빈 👾개발 파트장, Front-end 개발
개발 임지은 👩🏻‍💻Front-end 개발

📑 목적 및 필요성

반려동물 추억 기록 서비스, 펫모리는 반려동물의 죽음을 경험한 보호자가 우울감, 죄책감 등의 감정에서 벗어나 일상생활을 하고, 행복하게 반려동물을 추억할 수 있도록 하는 것을 목적으로 합니다.

🐶 펫로스 증후군은 반려동물의 사망을 계기로 우울감, 죄책감, 수면장애, 식욕부진 등의 증상을 겪으면서 일상생활에 어려움을 느끼는 것을 일컫습니다. 농림축산식품부에 따르면 반려동물의 죽음을 경험한 보호자 중 절반이 이 증후군을 겪고 있어 우리는 이러한 문제점에 주목했습니다.

🩺 미국수의사협회가 제안하는 펫로스 증후군 극복법은 다음 다섯 가지입니다.

  1. 반려동물이 없는 현실을 받아들이려 노력하기
  2. 슬픈 감정을 충분히 느끼기
  3. 반려동물과의 추억을 떠올리기
  4. 반려동물이 내게 어떤 의미였는지 되새기기
  5. 다른 사람과 감정을 공유하기

💡 삼전(Samsion) 팀은 위의 다섯 가지 극복법 중에서 3, 4, 5번에 주목하여 반려동물 추억 기록 서비스, 펫모리를 기획했습니다.

삼전 팀은 설문조사를 기반으로 한 필드리서치를 통해

  1. 이별한 반려동물과의 추억을 회상할 때 과거 기록물을 모아두는 니즈를 가지고 있다.
  2. 반려동물의 죽음을 마주한 사람들은 같은 경험을 한 경험자의 후기, 조언을 통해 문제를 해결한다.

위 두 가지 가설을 검증했습니다. 또한, 반려동물의 죽음을 경험한 사람들이 어떠한 문제 상황에 직면하고 있는지 파악했습니다.

타겟 (전제: 반려동물의 죽음 경험) 문제점 기대효과
반려동물에 그리움을 느끼고 회상하고자 하는 人 반려동물을 회상하는 방식으로 사진, 영상을 주로 찾아보는데, 기록물의 분실로 자료 소실 문제 직면 1. ‘추억 회고하기’단계를 통해 인터넷상에 사진, 영상 등의 기록물을 업로드하여 보관함으로써 자료 소실 문제를 해결함.

2. 언제 어디에서나 사이트에 접속을 통해 추억을 회상할 수 있는 경험 제공

반려동물의 죽음에 대한 슬픔, 상실감에 빠져있는 人 반려동물의 죽음에 슬픔을 느끼고 있으며, 의도적으로 추억 회상을 피함으로써 아직까지도 펫로스 증후군에서 벗어나지 못하는 문제 직면 1. ‘의미 되새기기’단계를 통해 갑작스러운 반려 동물과의 이별의 아픔에서 빨리 빠져나올 수 있게 함.

2. ‘감정 공유하기’단계를 통해 같은 경험이 있는 타인으로부터 위로와 조언을 얻을 수 있음.

반려동물의 죽음을 처음 경험한 人 반려동물의 사체 처리 및 장례 절차에 대한 정보 부족으로 어려움 직면 1. 장례 절차와 단계에 따른 장례 기관에 관한 정보를 제공하고, 추천해 줌으로써 이용자가 정보 탐색에 쏟는 시간을 단축시켜 줌.

📊 리서치 및 시장조사

📈 서비스 차별성

🐶펫모리 🔸카루소 🔸위드펫 🔸21그램
서비스 소개 반려동물 추억 기록 서비스 펫로스증후군 극복 상담 커뮤니티 반려동물장례 서비스 반려동물 장례 서비스
제공 기능 추억앨범, 의미기록, 장례정보 반려인 상담, 펫브레터 장례식장 연결, 장례절차안내, 추모관 장레서비스(절차 및 비용 안내, 용품판매), 제품판매
감정 공유 방식 공유앨범 및 오늘의 질문을 통해 같은 경험을 공유하고 있는 반려인들과 소통 상담(이메일, 온/오프라인 모임) X X
반려동물 기억 방식 추억앨범, 오늘의 질문, 감정쓰기를 통해 반려동물과의 추억 기록 펫브레터 추모관 제품판매(루세떼; 반려동물 유골분 보존하는 스톤)
장례정보 제공 방식 1. 장례 절차 단계별 관련 기관 추천

2.장례 기관 다대다 비교 서비스

X 장례절차, 비용 정보 안내 장례절차 안내 및 직영 장레식장 예약 서비스

📉 유저리서치 결과 분석 및 인사이트 도출

💡 목적 : 가설 검증을 통해 서비스의 필요성을 인지하고 수요에 따라 세부기능을 기획하기 위한 설문

인원 : 395명 (04.16 기준)

내용 : 반려동물 관련 서비스, 반려동물 장례정보, 펫로스 증후군 등에 대한 질문

💡 죽음 이후 대처 방법이나 장례와 관련된 정보 제공 서비스

장례 절차를 제공하고, 웹 서비스에서 장례 관련 업체를 비교할 수 있는 서비스

떠난 반려견의 사진이나 영상을 볼 수 있는 서비스와 게임처럼 꾸밀 수 있는 서비스로의 확장

반려동물을 기억하고 추억할 수 있는 서비스의 필요성을 확인하였으며, 이를 바탕으로 펫모리 서비스의 확장성과 기획 방향성을 구축하였습니다.

🔆TAM-SAM-SOM

펫모리 서비스 회원 가입 건 수 50만 건 확보를 시작으로, 점차 시장을 넓혀갈 계획입니다.

Untitled (1)

TAM SAM SOM
국내 연간 반려동물의 사망을 경험하는 인구 규모 펫로스 증후군을 겪고 있는 인구 규모 국내 연간 서비스 이용자 규모
1,300,000명 650,000명 494,000명

💡서비스 확장 계획

🎯서비스 타겟층

서비스 타겟층은 반려동물의 죽음을 경험한 사람 중 그들의 죽음으로 그리움을 느끼고 상실감에 빠져있는 이들과 반려동물의 장례에 대한 고민을 갖고 있는 이들입니다. 반려동물의 죽음을 경험한 사람들 중 일부를 1차 타겟 고객으로 설정하며, 아래와 같이 점차 확장할 계획입니다.

분류 1차 타겟 유저 2차 타겟 유저
타겟 설명 반려동물의 죽음을 경험한 사람 중 그리움을 느끼고 상실감에 빠져있는 유저, 죽음 이후 장례에 대한 고민이 있는 유저 죽음 외에도 다른 이유(입양, 기타 다른 이유)로 반려동물과 이별을 겪은 유저
관련 기능 ‘추억 회고하기', ‘의미 되새기기’, 장례정보 제공 기능을 통해 펫로스 증후군을 극복할 수 있도록 ‘펫모리’ 서비스를 제공함. 죽음 외에도 다른 이유로 반려동물과 이별을 겪은 유저들에게도 펫모리의 서비스를 제공하여 이별로 인한 슬픔을 극복할 수 있도록 서비스를 제공함.

🎯기능 확장

**‘펫모리’**는 반려동물 추억 기록 서비스로, 반려동물과 함께한 시간들을 순간이 아닌 지속되는 기억으로 남길 수 있도록 유저들에게 추억을 기록하고 간직할 수 있는 서비스들을 제공합니다. 저희는 이러한 서비스에서 나아가, 아래와 같이 점차 확장할 계획에 있습니다.

확장 서비스 서비스 내용
서비스 이용 포인트 제도 1. 기록하기와 일기장 쓰기에 글을 작성하거나 출석 점수를 통해 포인트를 적립하고, 적립한 포인트로 자체 제작 반려동물 굿즈를 구매할 수 있도록 포인트 스토어를 통해 신규 유저의 유입을 도모함.

2. 기록하기에 일기장 쓰기에 글을 작성하거나 출석 등록을 진행하고, 1장의 완성된 사진 완성(60 포인트)할 시, 추모묘 심기 or 유기견 보호소 기부 프로그램을 기획함.

떠난 반려동물에 대한 게이미피케이션 떠난 반려동물에 대해 그리움을 가지고, 그들에 대한 기억을 잊지 못하는 유저들을 위해 사진을 등록하면 ai 반려견을 가상으로 꾸미거나 밥을 주거나 할 수 있는 마이 펫모리 서비스를 신규 런칭하여 유저의 유입과 지속적 이용을 도모함.
어플 서비스 제공을 통한 플랫폼 확장 기존 웹 서비스만 제공하던 펫모리를 iOS와 안드로이드에도 도입하여, 모바일 환경에서도 서비스를 이용할 수 있도록 플랫폼을 확장시킴.

📌 핵심 기능

펫로스 증후군 예방 및 극복을 위해 펫모리 서비스는 ‘추억 기록’‘장례 정보 제공’ 기능을 제공합니다.

기능 설명
추억 회고하기 [사진or동영상orX 선택 - 내용 기록 - 추억태그 선택 - 공개 여부 선택] 등의 과정에 따라 반려동물과 함께한 추억을 회고할 수 있는 기능
의미 되새기기 펫로스 증후군의 극복 방법 중 하나인 ‘반려동물의 의미 되새기기’를 실천할 수 있도록 주기적으로 관련 질문을 제공하는 기능
감정 공유하기 유사한 경험을 한 다른 사람들과 감정을 공유할 수 있는 기능으로 공유앨범의 댓글, 공감기능을 통해 소통하고 다른 반려인에게 궁금한 질문을 제안하여 유저들끼리 소통하고 공감할 수 있도록 하는 기능
장례 정보 제공 장례 정보(절차, 가격, 장례식장, 장례지도사, 기타 서비스 등)을 제공하여 어려움 없이 반려동물과의 마지막 인사를 할 수 있도록 도와주는 기능
마이페이지 설정, 커뮤니티에 작성한 글 등을 확인할 수 있는 유저별 개인 페이지

📍기능 세부 내용 합의

핵심 기능의 세부 내용을 구체화하여 정리하였습니다.

Untitled (6)

📃 메뉴구조도

위의 내용을 바탕으로 한 메뉴구조도입니다.

Untitled (7)

💳비즈니스 모델 설계

‘펫모리’는 Phase를 두 구간으로 나누어, 서비스 규모를 확보한 후 유료 모델로 전환할 예정에 있으며, 아래와 같은 형태로 수익을 창출할 수 있습니다.

Untitled (3)

📂디자인 무드보드

🎨디자인 무드보드

유저들이 서비스를 사용하면서 따뜻하고 활기찬 감성을 느끼며 추억을 회상할 수 있도록 설계하기 위해 컬러는 따뜻함을 느낄 수 있는 warm 계열의 오렌지(#ff8a33) 를 브랜드 컬러로 사용했으며, 전체적인 서비스 무드도 유저들이 반려견에 대한 긍정적인 감정을 불러일으킬 수 있도록 깨끗하고 따뜻한 Ref로 구성했습니다.

MoodBoard-02 (1)

🐾서비스 BI

펫모리’서비스는 유저들이 반려견과의 추억을 간직하고 회상할 수 있는 서비스로, 간직/회상, 반려견, 사랑 이라는 키워드를 가지고 bi를 도출했습니다. 반려견과 하트를 합쳐 하나의 틀을 만들고 추억을 간직하고 시간이 지나 회상할 수 있는 매개체인 타임캡슐을 결합해 서비스 Symbol을 도출했습니다. 타이포는 ‘P’에 초점을 두고 반려견을 형상화하여 제작했으며 과하지 않은 둥근 쉐이프를 타이포를 제작해 가독성을 높였습니다.


💻 기술 스택

Front-end
  • 전체 앱이 컴포넌트 단위로 구성되므로 재사용성 이 높기 때문에 유지보수에 효율적입니다.
  • 전역으로 컴포넌트를 사용하기 위해 CSR 방식의 React를 선정했습니다.
  • virtual DOM을 활용한 빠른 렌더링이 가능한 장점이 있습니다.

  • 정적타입을 지원하므로 컴파일 단계에서 오류를 발견할 수 있기 때문에 디버깅이 쉬워지고 개발의 생산성이 높아집니다.
  • 공통으로 정의한 Object 프로퍼티를 타입 자동완성을 통해 빠르게 적용할 수 있어 협업 시 용이합니다.

  • 프론트엔드 전역상태관리를 위해 러닝커브가 비교적 낮은 Recoil을 선택했습니다.
  • React Query를 도입해 서버상태를 따로 관리하기 때문에 비교적 가벼운 전역상태 관리인 Recoil을 선택했습니다.

  • CSS를 별도의 파일로 두지 않고 하나의 모듈로 관리하기 위해 CSS-in-JS 방식을 채택했습니다.
  • 컴포넌트의 재사용을 위해 Styled-components를 선정했습니다.
  • 컴포넌트들의 공통된 CSS를 하나의 Theme으로 관리하면 유지보수가 용이해지는 장점이 있습니다.

  • API 호출을 위해 내장함수인 FETCH 대신 Axios를 선정했습니다.
  • 인스턴스 생성을 통해 API 호출을 할때 공통적으로 들어가는 BASEURL 이나 Credential 부분의 코드를 간소화 할 수 있습니다.
Back-end
  • 다양한 라이브러리와 설정을 자동으로 제공하므로 개발자가 애플리케이션을 더 빠르게 만들 수 있습니다.
  • 특정 환경이나 서버, 기술에 종속되지 않으며 유연한 애플리케이션을 개발할 수 있습니다.

  • key, value 형태로 데이터 저장 및 해당 데이터의 유효기간 설정을 통한 토큰 관리 용이하므로 유효시간이 필요로 되는 로직에서의 성능 이점을 확보하기 위해 사용했습니다.

  • CRUD기능을 자동으로 생성해주므로 개발자가 직접 코드를 작성할 필요가 없으므로 생산성이 크게 향상됩니다.
  • 데이터베이스 쿼리를 간단하게 작성할 수 있어 쿼리 작성에 필요한 노력과 시간을 크게 줄일 수 있습니다.
  • ORM(Object-Relational Mapping) 기능을 자동으로 제공하므로 객체와 데이터베이스 간의 매핑을 자동으로 처리할 수 있으며, 데이터베이스의 스키마 변경에도 유연하게 대응할 수 있습니다.
  • 다양한 데이터베이스를 지원하므로 데이터베이스 변경에도 유연하게 대응할 수 있으며, 기존 코드를 재사용할 수 있습니다.

  • 인증과 권한 부여를 처리하는 기능을 제공하므로 이를 통해 애플리케이션에서 안전한 인증 및 권한 부여 프로세스를 구현할 수 있습니다.

  • 사용자 인증에 필요한 모든 정보는 토큰 자체에 포함하기 때문에 별도의 인증 저장소가 필요 없습니다.
  • 쿠키를 전달하지 않아도 되므로 쿠키를 사용함으로써 발생하는 취약점이 사라집니다.

  • 다양한 운영 체제에서 실행될 수 있습니다.
  • 인덱스, 캐싱, 쿼리 최적화 등의 기술을 사용하여 높은 처리 속도와 성능을 제공합니다.

  • 테스트 코드를 기반으로 API 문서를 자동으로 생성하므로 통합 테스트와 문서화를 한 번에 수행할 수 있습니다. 이를 통해 API 테스트와 문서 작성을 동시에 수행하여 시간과 노력을 절약하고 일관성 있는 문서를 유지할 수 있습니다.
  • 테스트 케이스와 문서를 연결하여 일관성을 유지하도록 보장합니다. 따라서 변경된 API 사항이 문서에 즉시 반영되도록 할 수 있습니다.
  • API 호출에 필요한 코드 예제를 생성하므로 개발자들이 API를 쉽게 이해하고 사용할 수 있어 원활한 협업을 진행할 수 있습니다.
  • 다양한 형식의 문서(HTML, PDF, Markdown 등)를 생성할 수 있으므로 다양한 사용자 요구에 대응할 수 있습니다.

Infra
  • 서로 다른 운영 체제나 환경에서도 애플리케이션을 일관성 있게 실행할 수 있습니다.
  • 애플리케이션을 실행하는 데 필요한 모든 종속성을 컨테이너를 이미지로 빌드하여 쉽게 배포할 수 있습니다.

  • GitHub과 완전히 통합되어 있어 GitHub 이슈, 풀 리퀘스트, 머지 등과 같은 이벤트를 자동으로 감지하고, 이를 기반으로 작업을 수행할 수 있습니다.
  • CI/CD 작업을 자동화할 수 있습니다.

  • 필요한 만큼 가상 서버를 생성할 수 있으므로, 언제든지 확장이 가능합니다.

  • 저장 용량이 무한대이고 파일 저장에 최적화되어 있어 용량을 추가하거나 성능을 높이는 작업이 필요없습니다.

  • RDS는 AWS에서 관리하는 서비스로, 데이터베이스 관리 업무를 AWS에서 대신 수행합니다. 따라서, 데이터베이스 관리자가 데이터베이스 시스템의 세부적인 설정 및 운영에 신경쓰지 않아도 됩니다.

✍🏻 네이밍 룰

  • 컴포넌트, type, ineterface, 생성자,클래스 : PascalCase
  • 상수 : SNAKE_CASE
  • 함수,변수 camelCase
  • 컴포넌트 prop 정의할때는 interface사용하고 공통 type이나 자잘한것은 type으로 선언함.
  • 만약 type과 다른 컴포넌트의 이름이 겹친다면 type을 따로 구분함.
  • 컴포넌트 작성할 때 => 람다함수형태
  • 이벤트핸들러일때는 handle로 시작하도록 작성
  • 변수명 작성할 때 이름 길어지더라도 무슨 뜻인지 의미를 나타내도록 작성하기.
    • handleChange(x) : 함수명만 보고 정확히 어떤 일을 하는지 알기 어려움
    • handleCreateComment(o) : 함수명만 보고도 이 함수의 역할을 알 수 있음.

🔧 System Architecture

삼전 drawio (2) (1)

🔧 CI/CD Process

삼전 drawio (6) (1)

🔧 ERD

화면 캡처 2023-05-25 190909

🔧기능 명세서

구분 기능 상세 우선순위
로그인 페이지 로그인기능 로그인, 로그아웃 서비스 High
소셜로그인 카카오, 구글을 통한 소셜로그인 서비스 제공 High
메인 페이지 서비스 소개 ‘펫모리’ 서비스 소개 - 서비스 정체성 및 비전 등의 정보 High
페이지 이동 [추억앨범],[의미기록],[마이페이지],[장례정보]로의 이동 High
추억 앨범 공유 앨범 1. 그리드 형식, 인스타그램 방식

2. 최근 등록순, 공감 순, 댓글 순, 태그 필터 기능

High
앨범 상세페이지 1. 댓글 및 공감 표시

2. 기록물 불러오기

High
앨범 작성 1. 사진, 동영상, 텍스트 작성 기능

2. 수정 및 삭제 기능

High
나의 앨범 1. 비공개/공개 작성한 기록물 열람

2. 최근 등록순, 공감 순, 댓글 순, 태그 / 공개, 비공개 필터 기능

Low
의미 기록 질문 제공 및 답변 1. 매일 1개의 질문 노출

2. 사용자가 질문에 대한 답변 작성

3. 답변의 공개 여부 선택

High
직접 쓰기 1. 일기장 / 질문 쓰기 중 선택

2. 텍스트 작성 및 업로드

High
질문 보기 1. 질문 나열

2. 클릭시, 질문에 대한 답(내가 쓴 것 + 다른 사람이 쓴 것) 열람

High
의미 보기 내가 만든 질문/ 일기 열람 Low
장례 정보 장례절차정보 장례 절차를 도식화 하여 표기 Mid
장례식장, 지도사 등 정보 조회 1. 광고 노출

2. 장례식장, 지도사, 보험, 서비스 정보 조회

3. 클릭시, 페이지 URL 연결

Mid
비교 페이지 1. 3개 선택 및 정보 비교

2. 클릭 시, 페이지 URL 연결

Mid
마이페이지 회원 정보 수정 사진, 회원정보 등 환경 설정 Low
내가 쓴 글 확인 의미기록 / 추억앨범 쓴 글 확인 Low
포인트(출석) 1. 글 하나 작성 or 출석 시 채색

2. 60개 달성 시, 하나의 이미지 채색

Low