MBTI가 어떻게 되세요? (feat: what is your mbti)
리액트와 넥스트를 공부하면서 어떤 프로젝트를 만들지 고민하다가
포폴용으로 소개팅 앱을 만들면 재밌겠다 싶어서 시도해봤습니다.
정확히는 sns형 소개팅앱으로 소개팅앱에서 아쉬웠던 사람들을 한번에 볼수없다는것과 뭐할때마다 조건이 들어가는 부분을 개선하고 좀더 sns형식으로 가볍게 다가갈 수 있게 하려 했습니다.
제일 정확히는 공부했던 것들을 모두 적용할 수 있는 프로젝트를 생각해보다가 만들게 되었습니다
추후에 수정해야할 것들은 차고넘치지만 일단 1차 배포를 축하하는 의미로 블로그에 남기려고 합니다.
0. 프로젝트 소개
- sns형 소개팅 앱
기존 소개팅 앱에서 아쉽다고 생각하는 부분들을 sns와 결합함으로써 해결하려고 했습니다.
(이성을 만날 수 있는 기회가 제한적, 추가로 원할때 과금 필요)
기본적으로 프로세스는 일반 소개팅앱과 비슷합니다. (회원가입, 유저정보 세팅, 이후에 이성에게 표현)
다만 sns형이다보니 다양한 사람들을 보고 좋아요 표시할 수 있습니다.
- 프로젝트의 핵심인 MBTI.
단순히 소개팅앱을 만드는건 다른 어플들과의 차이점이 없다고 생각했습니다.
사용자들에게 이 어플을 사용하게 혹은 흥미를 끌게 하기 위해서는 어떤 포인트가 필요하다고 생각했는데
저는 이것을 MBTI로 정했습니다.
예전 보다는 유행이 줄어든 느낌이 있지만 MBTI는 이제 어느 자리에서도 기본적인 정보가 되어버린 것 처럼 생각되기에 이를 이요하면 만드는 나도 재미있고 유저들도 흥미를 느끼지 않을까 했습니다.
- 유사 앱들과의 차이점
물론 MBTI를 키워드로한 앱들이 있었습니다.
그래서 아쉬웠고 다른 방향으로 가야하나 싶었는데, 직접 사용해보고 이걸로 가야겠다는 확신이 섰습니다.
왜냐하면 제가 생각한 MBTI소개팅 앱의 핵심 기능은
원하는 mbti에 따라 리스트를 볼 수 있는 것이었습니다.
다른 앱들은 mbti로 심리테스트를 하거나, 관계에 대한 내용을 핵심적으로 다뤘지만 제가 생각한 리스트를 분리하는 기능은 없었습니다.
그래서 나와 mbti 성향이 잘맞는, 혹은 i만 따로 e만 따로 유저들을 볼 수 있도록 했습니다.
- 현재 구현된 기능
회원가입, 로그인, 유저정보 세팅, 추천 유저 보기, 좋아요/괜찮아요 기능, 좋아요 유저(팔로워)를 한눈에 볼수있는 좋아요 페이지, 프로필 페이지
- 추후 구현 할 기능
서로 좋아요가 된 유저들끼리 채팅- 유저 정보를 세팅 후 다시 변경할 수 있도록
- 보여지는 리스트의 옵션 선택 ( 나이, 지역, 키 등등 을 기준으로 리스트 볼 수 있도록 )
- sns의 기능의 장점은 잘 살리고 남용은할 수 있도록, 로직 수정
- 리스트는 다 보여주되 좋아요 수는 한정 짓거나
- 채팅을 한번에 한명과만 할 수 있다거나
- 현재는 상세페이지에서만 좋아요를 누를 수가 있게 되어있습니다.
- 사진을 보여주지 않고 (보여주더라도 블러처리해서) 채팅하게되면 보여질 수 있도록 하거나
- 로딩화면 추가
- mbti를 모르거나 좀 더 확실한 정보를 위해 mbti 테스트 추가
- 유저 정보를 확실하게 하기위해 회원가입때 휴대폰 확인 추가
- 람다로 이미지 리사이징
- 인증 시간 지났을때에 대한 로직 짜기
- 검색 기능
1. 적용된 기술
프론트
- Next
- Shadcn/Ui
백엔드
- Express (node)
- MySql
- AWS (EC2, S3)
2. 프로세스
- 회원가입
- 회원가입과 유저정보 업데이트를 따로 둔 이유는 소개팅앱들을 조사했을 때 가입과 유저정보 업데이트를 따로 두는 것을 참고했습니다.
- 유저 정보 세팅
- 메인화면 이동
- 좋아요를 표시
- 채팅으로 관계 발전 (러뱌)
- 채팅은 추후에 적용 예정입니다.
아래는 프로세스 이미지 입니다. (모바일 기준)
앞으로 2차 배포 / 기능 추가할때마다 블로그에 올리도록 하려고 합니다.
작업중에 문제들은 블로그의 다른 섹션에 올리고 있었는데,
문제는 끝도 없이 나오기 때문에... 후 잘 되길 기원하면서 모두 화이팅입니다!
'토이 프로젝트' 카테고리의 다른 글
[what is your mbti] socket.io로 채팅 구현하기 (0) | 2024.07.05 |
---|---|
Next.js | Prisma | 나만의 카페 리스트 - 1 [회원가입 / 로그인] (1) | 2024.04.10 |
Next.js | 영화 서비스 (2) | 2024.04.04 |
댓글