PetTalk 프로젝트 기획안 (💛유리팀💛)

반려동물 커뮤니티 서비스 Pet Talk 🐣

1. 서비스 개요 및 필요성

반려동물 시장 규모

서비스 개발의 필요성

2. 서비스 시장 조사

2.1. 시중의 반려동물 서비스 앱에 대한 조사

정보	반려견을 타겟으로 한 커뮤니티 서비스
특징	커뮤니티, 반려견의 성향 분석, 훈련 정보, 이벤트, 마켓 기능이 존재합니다.
장점	커뮤니티 외에 애견 미용실, 병원, 애견 카페, 유치원 등 강아지를 위한 공간의 정보나 퍼피 매칭 서비스등 다양한 서비스를 제공합니다. 광고성 글이 적어 유용한 정보를 얻을 수 있습니다.
단점	견주들에게만 유용한 서비스가 많아, 강아지 외에 다른 반려동물을 키우고 있을 경우에는 적합하지 않습니다.

 

정보	강아지 맞춤 쇼핑 앱
특징	시중의 의류 쇼핑 앱을 강아지 쇼핑 앱으로 그대로 옮겨 놓은 것이 특징입니다.
장점	50만 견종 데이터를 분석하여 견주가 반려견 용품 쇼핑 시 맞춤 추천해주어 유용합니다.
단점	강아지에 한해서 쇼핑 가능합니다.

정보	강아지 맞춤 우리 동네 펫 커뮤니티
특징	당근과 비슷하게 초기 로그인 시 동네를 설정하여 위치 기반 서비스를 제공합니다. 유기견에 대한 정보가 많습니다.
장점	자주 보고 싶은 동물 친구를 팬으로 등록하여 사진 및 영상을 골라 볼 수 있으며, 지도 기능을 통하여 원하는 장소를 선택하여 활동할 수 있습니다.
단점	견주들에게 국한된 서비스, 동네를 등록한 후 서비스를 이용가능 하기 때문에 사는 동네에 따라 커뮤니티 규모가 다를 수 있습니다.

정보	강아지 맞춤 위치 기반 펫 커뮤니티
특징	인스타그램 형식으로 반려견의 사진을 자랑할 수 있으며 견주들과 번개모임을 열 수 있습니다.
장점	15초 내의 동영상 업로드가 가능하여 보다 생생한 일상 공유가 가능합니다.
단점	게시글 작성 시 튕겨서 글이 모두 초기화 되는 버그가 발생하고 있습니다. (사용자 이탈에 한 몫)

 

2.2. 기존 서비스와의 비교 및 우리 서비스의 차별점

• 기존 서비스의 문제점
• 시중에 존재하는 반려동물 서비스를 조사해 보았을 때 반려동물에 대한 인식이 강아지에 치중되어 있어, 견주들만 이용할 수 있는 서비스가 대부분이었습니다.
• 많은 서비스가 커머스, 이벤트 등의 다양한 기능을 담고 있습니다. 그러나 반려동물에 대한 정보를 얻고자 커뮤니티 만을 이용하고 싶은 사용자들은 혼재 되어 있는 기능에 불편함을 느끼거나 광고성 글에 노출 될 수 있습니다.

• ‘펫톡(Pet Talk)’의 차별점
• 펫톡은 반려동물과의 일상을 쉽게 공유할 수 있고, 관련한 정보도 얻을 수 있는 커뮤니티 서비스에 집중하여 사용자 간의 원활한 소통이 가능하도록 합니다.
• 특정 반려동물에 치중된 것이 아니라 다양한 반려동물에 대한 정보를 공유할 수 있도록 합니다.
• 특정 동네에 국한되지 않고 반려동물을 키우는 유저들의 자유로운 네트워킹 환경을 조성할 수 있으며, 팔로우/팔로워 및 채팅 기능을 통하여 원하는 정보를 쉽고 간편하게 얻을 수 있도록 합니다.

3. 서비스 핵심 기능 소개

직관적이고 쉽게, 내 정보를 관리할 수 있습니다.

1. 회원가입/로그인





 
 
유저의 email, username 을 받아 회원가입을 진행할 수 있습니다. 유저의 이메일을 통하여 특정 사용자를 인증할 수 있습니다. 이 때, 유저 정보의 인증/인가에 사용되는 암호화는 JWT를 이용합니다. 회원가입과 로그인을 마친 유저는 인가를 진행할 수 있는 JWT 토큰을 발급받으며, 이를 통하여 로그인 상태를 확인할 수 있습니다.

2. 마이프로필 페이지를 통한 내 정보 확인하기



마이페이지를 통하여 로그아웃 할 수 있습니다. 내가 팔로우하고 있는 유저에 대한 정보를 확인할 수 있으며, 팔로워/팔로잉 버튼을 누르면 친구 목록 페이지로 이동합니다.

차별화 된 커뮤니티의 자율성

1. 커뮤니티 채널을 통해 내 관심사에 집중할 수 있습니다.



이야기하고 싶은 주제에 맞는 채널을 탐색할 수 있습니다. 오늘의 추천 채널이라는 기능을 통하여 원하는 관심사를 탐색할 수 있도록 도움을 줍니다. 마음에 드는 채널이 없으신가요? 채널 생성 요청 채널을 통하여 관리자에게 채널 생성을 요청해 주시면 됩니다. 그럼 관리자가 확인 후 바로 채널을 생성해 드릴 예정입니다.
2. 사진으로 반려동물과의 일상을 생생하게 공유할 수 있습니다.



게시글 목록은 사진을 쉽고 빠르게 볼 수 있도록 카드뉴스 형식으로 이루어져 있습니다. 자신이 업로드하는 사진을 다른 유저들이 바로 확인할 수 있어, 반려동물과의 일상을 빠르게 공유할 수 있다는 특징을 가지고 있습니다. 게시글 정렬은 좋아요 수가 많은 순서대로 배치되어, 해당 채널에서 가장 인기가 많은 게시글을 한눈에 확인할 수 있습니다.

3. 좋아요, 댓글 기능을 통하여 나의 취향을 공유합니다.



마음에 드는 게시글을 발견한다면 ‘좋아요’ 버튼을 누름으로써 유저의 취향을 반영할 수 있습니다. 그리고 게시글에 대한 댓글을 남김으로써 유저의 생각과 감정을 효율적으로 교류할 수 있습니다. 마음에 드는 글을 쓰는 유저를 발견할 경우, 팔로우 신청을 할 수 있습니다.

4. 원하는 정보만 얻고 싶을 땐 아래 기능을 이용해 볼 수 있습니다.



특정 사용자의 글만 모아 보고 싶을 때, 원하는 주제로 게시글을 확인하고 싶을 때, 게시글 목록 상단에 존재하는 검색 기능을 활용하여 필요한 정보만 확인할 수 있습니다.
 

유저들과 네트워킹하기! 펫톡만 있어도 가능합니다.

1. 유저들과 채팅을 통해 자유롭게 대화할 수 있습니다.



친구로 등록된 다른 사용자에게 메시지를 보낼 수 있습니다. 다른 유저에게 채팅 메시지를 받을 경우, 알람을 수신하여 중요한 정보를 놓치지 않을 수 있습니다.
 

2. 특정 유저의 소식을 빠르게 확인할 수 있습니다.



사용자는 다른 사용자와 팔로워, 팔로잉이 가능하며 특정 유저의 소식을 빠르게 얻고 싶다면 팔로우 신청을 해 보는 것은 어떨까요? 팔로잉 중에는 메시지도 보낼 수 있습니다. 특정 사용자를 찾고 싶다면 검색 기능을 통하여 찾고 싶은 유저의 username 을 검색합니다. 또한, 활동 중인 유저의 목록을 확인할 수 있어 바로 채팅을 하고 싶다면 메시지를 보낼 수 있습니다.
 

다양한 기능을 한눈에 확인할 수 있는 펫톡의 UI

1. 주요 정보를 집약한 AppBar

• 메인페이지 AppBar



• 로고 : 로고 버튼을 누르면 채널 탐색 페이지(홈페이지)로 바로 이동할 수 있습니다.
• 다크모드 토글 버튼 : 토글 버튼을 통하여 다크모드 / 라이트모드를 선택할 수 있습니다
• 알람 버튼 : 채팅 요청, 댓글알람, 좋아요 등 펫톡에서 일어나는 소식을 알람 버튼을 통하여 접할 수 있습니다.
• 프로필 : 나의 프로필 버튼을 클릭하여 나의 정보를 확인할 수 있습니다

• 페이지 이동 시의 AppBar



특정 페이지로 이동한 경우, 전에 방문했던 페이지로 되돌아갈 수 있는 뒤로가기 버튼이 활성화됩니다. 또한, 현재 유저가 방문한 페이지가 어떤 페이지인지 확인할 수 있는 AppBar 타이틀이 존재합니다.
 

1. 서비스의 사용 편의성을 더해주는 Navigation Bar



채팅목록 / 채널탐색 / 팔로우 목록 확인하기 와 같이 페이지 이동이 필요한 부분을 Navigation Bar를 통하여 쉽게 이동할 수 있습니다. Navigation Bar는 화면 하단에 고정되어 있어 원하는 페이지로 바로 이동할 수 있도록 유저를 도와줍니다.

4. 기술 스택

🚀 Stacks

---

HTML

CSS

React.js

TypeScript

Emotion.js

Vite

Vercel

🛠  Tools

---

Figma

Git

VScode

 

👥  Collaboration

---

GitHub

Notion

Discord

 

 

 

5. 개발 일정 및 역할 분담

5.1 일정 개요

5.2 개발 마일스톤

• 공통 UI 컴포넌트 개발 목록

컴포넌트 이름	설명	담당자
Button컴포넌트	공통으로 사용되는 Button 컴포넌트입니다. (로그인, 로그아웃 및 작성완료 버튼 등에 사용될 예정)	주다현
Input 컴포넌트	유저가 string이나 number형식으로 된 값을 직접 채워 넣을 수 있는 form 컴포넌트입니다.	주다현
AppBar 컴포넌트	상단에 고정되어 있는 로고, 알람, 마이프로필, 다크모드 토글버튼을 담고 있는 컴포넌트입니다.	이정욱
NavigationBar 컴포넌트	원하는 페이지로 빠르게 이동할 수 있게 해주는 네비게이션 컴포넌트입니다. 채널 탐색 페이지, 친구목록 페이지, 채팅 목록 페이지로 이동합니다.	주다현
Card 컴포넌트	게시글 목록을 확인할 때 사용하는 컴포넌트입니다. 사진과 간단한 게시글의 내용을 담고 있습니다.	김유진
ListRow 컴포넌트	유저의 프로필 사진과 이름 정보를 확인할 수 있는 컴포넌트입니다. 오른쪽에 rightElement를 ReactNode 형식으로 자유롭게 넣을 수 있습니다.	김유진
Loading 컴포넌트	로딩화면 컴포넌트를 미리 분리합니다.	이정욱
ProfileImage 컴포넌트	유저의 프로필 이미지를 확인할 수 있는 컴포넌트입니다. (small, Large 사이즈)	이정욱
ChattingBubble 컴포넌트	채팅창에 입력하였을 때 나타나는 말풍선 컴포넌트	김정호
Svg 컴포넌트	공통으로 사용될 svg 아이콘 컴포넌트 입니다. (버튼 등으로 사용)	김정호
Toggle 컴포넌트	다크모드 용 토글 버튼입니다.	이정욱
CubeButton 컴포넌트	메인화면에 나타나는 채널명을 담을 수 있는 컴포넌트입니다.	김정호
Text 컴포넌트	공통으로 사용될 Text 컴포넌트입니다. typo, color, weight 등을 props로 넘겨줄 수 있습니다.	주다현
Spacing 컴포넌트	컴포넌트 간의 공간을 나눌 수 있도록 만들어 주는 컴포넌트로, size 값을 통하여 여백 값을 받습니다.	김유진
FlexBox 컴포넌트	flex 속성을 가진 div 컴포넌트입니다. flex-direction, align-items와 같은 속성을 props로 받을 수 있습니다.	김정호
Padding 컴포넌트	padding값을 미리 설정할 수 있는 컴포넌트입니다.	김유진

5.3 일정별 역할 분담

5.4 개별 역할 분담