22년 초에 퇴사도하고... 교내 밴드부 온라인 티켓예매 프로젝트 진행이후에 3학년 1학기엔 뭐하지 생각하다가...
꼭 개발동아리 들어가서 프로젝트를 하고야 말겠다! 벼르고 있었고
스터디를 진행하고 말미에 프로젝트를 하던방식보다는 바로 프로젝트를 시작할 수있는 디프만이 나에겐 딱 맞는것같아서 ( 실제로 지원서도 디프만 한군데만 냈다 ㅋㅋ) 11기로 지원을 했었다.
서류열심히 적고.. 면접때 엄청 떨고.. 대답도 제대로못한것같았지만 덜컥 붙어버렸다.!
경쟁률이 11:1이였나... 기분 엄청 좋았었다.
디프만
디프만 - Depromeet
오직 디자이너와 프로그래머의 동반성장을 위해서
depromeet.com
디프만은 디자이너와 프로그래머와의 만남이라는 동아리로 , 기획자가 없고, 스터디 진행없이 바로 프로젝트를 시작하는 구조이다.
중간중간 연사님들 초정하셔서 여러방면으로 도움이되는 세미나를 들을 수 있고, 무엇보다도
하늘 같은 디자인 선생님들과 함께 프로젝트를 할수가있다!!!
백엔드 2 ,ios 1 ,android 1 ,web 1 디자이너 1 이런 비율로 좀 뽑는것같다.
직장인선배님들 비율이 엄청많다..
우리팀에 나빼고 다직장인이셨었다..
깜작놀란게 노션페이지 운영이 엄청났다... 초기에 아이엠그라운드 자기소개서도 적고 팀별마다 페이지가 하나씩 있어서 회의록이나 아이디어, 진행사항 공유등을 할 수 있었다.
팀구성은 운영진분들이 해주신다.
최종합격을 한이후에? 선호도 조사를 했던것 같은데
만들고 싶은 프로덕트의 플랫폼(프론트영역) ( ios , 안드로이드 , 웹 ) 을 고르고, 개발하고싶은 것들을 적어냈었던것같다.
나는 express 기반으로 했기때문에 node.js 로 하면 좋을것같았고, 앱을 만들면 좀더 소속감?과 프로덕트를 내는것 같고 알림가지고 유저와 소통할수있을것같아서 앱을 만들고싶다고 선택했었다.
개발자니깐 11기 깃허브도 막 구경하는데... 다들 엄청나신다.. 개쬰다그냥... 입벌리고만있었다..
백엔드도 프레임워크에 따라서 팀을 좀 묶어주신다. 우리팀은 node 경험자들이라 nest js로 진행하기로 했고,
첫주에는 간단한 레크레이션 하면서 팀원들과 친해지는 시간도 가지고,
첫주~둘째주에 아이디어 관련회의도 하면서 실시간으로 장소에 대한 정보를 얻을 수 있는 채팅앱을 개발하기로 했다.!
비대면으로 진행하므로 게더에서 매주 토요일 2-5시까지 회의를 했었다. 가끔 뒷풀이도 가서 술도먹고 그랬었다 ㅎㅎ
게더도 엄청나게 잘꾸며 놓으셨다 ㅋㅋ
총 프로젝트기간은 15주 정도로 디자인, 백엔드 , 프론트 까지 진행해야한다!
우리팀은 앱 특히 애플 앱이라 심사가 까다로워서 애먹고.. 약간 빠듯했지만 정말 재밌었다 ㅎㅎ
개발도 열심히한결과 최우수상 차지!
팀원분들
같은 학교 동문이신 서희 누님께서 캐릭더를 다 디자인해주셨다. 진짜 귀엽다 미쳤다. 프로젝트하면서 이렇게 귀여운 앱을 만들 기회는 앞으로도 없을것 같다....
팀원분들도 진짜 최고다.. 우리 우진형 AWS 출신이시다. 서버 배포부터그냥 끝내주시고 , 딱뭐 별 의견차이없이 그거 이렇게 하면좋을것같아요 하면 딱 알아들어주셔서 작업하기 정말 편했었다.
ㅋㅋ 원래 백엔드 세명인데 한분은... 사정이좀 있으셔서 나갔다.. 결국 인증 채팅쪽 제외한 나머지
api나 알림처리는 내가다 개발을 했어야했다... 좀 3-1 다니면서 하느라조끔 바쁘긴 했었는데 진짜 귀엽고 사랑스러운 앱을 보며 버텨냈다!
기능들
백엔드니 기능 위주로 이야기하자면!
- 채팅
- 쪽지 ( 에타 쪽지기능과 매우 유사 )
- 번개 주고받기 ( 유저 경험치 관련 )
- 앱 푸시 알림
- 알림 탭
- 차단
- 지도 방조회
- 채팅방 내부에서 질문기능 ( 게시글 형태 )
이런기능으로 이루어져있다!
밑에는 하늘같은 디자인선생님들이 작업하신 비핸스 이다... 좋아요 400개 엄청나다 진짜 짱이다 최고다
Tikitaka - Location-based real-time chat Q&A app
Tiki-taka is a chat service that allows people to talk each other in the same place in real time. In addition to answering questions about the place, people can share their thoughts on the real-time event and reminisce about the place for a long time.
www.behance.net
Behance
채팅 • 알림기능
우리앱의 핵심인 채팅기능이다.
특히 카카오톡처럼 들어간 방의 최신채팅을 보여줘야하므로 , 채팅기능 개발에 어려움이 있을것같아 한번에 한 방에 들어갈 수 있게끔 기획을 했다.
nest js 에서 지원해주는 socket gateway 기능을 이용해서 채팅서버 개발을 우진형님이 해주셨고, 나는 알림 파트나 채팅내부에들어가는 질문같은 기능을 맡았다.
채팅방 알림의 경우 꾀나 조건이 까다로웠다.
- 내가 차단한 사람한테는 채팅알림이 오면 안된다.
- 채팅방 안에 들어가있을때에는 채팅알림이 오면 안된다.
- 내가 친 채팅은 채팅알림이 오면 안된다.
- 앱내에서 채팅방에서 들어갔다가 나온후에도 채팅알림이 와야한다.
- 앱내에서 채팅방에 들어갔을때 앱이 백그라운드로 내려가면, 채팅알림이 와야한다.
애플 심사를 통과할려면 차단기능이나 필터링기능등 신고기능이 무조건 들어가야 심사를 통과할 수가 있다. 특히 익명기반 채팅이므로 그러한 조건들이 더 까다로웠다. 이미 한번 애플 앱 개발을 해본적이 있던터라 기획단부터 신고, 차단관련 기능을 넣자고 의견을 제시했고 차단 기능 관련해서는 잘 통과를 했었다 ㅎㅎ
위와같이 복잡한 조건들을 계산하는데에 채팅을 쳤을때 바로 알림을 보내게되면 , 부하나 , 실시간 채팅 하는 속도가 저하될것 같아서
nest js 에서 지원하는 bull js 기능을 통해 redis를 큐로 활용하여 알림처리를 별도로 진행했다.
Documentation | NestJS - A progressive Node.js framework
Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Progamming), FP (Functional Programming), and FRP (Functional Reac
docs.nestjs.com
특이점은 앱이 백그라운드로 내려갈 경우 소켓 연결이 자동으로 끊기게되는데 채팅서버쪽에서 disconnection 핸들러쪽에서 채팅방에서 나갔다는 정보를 디비에 저장해서 채팅알림시에 활용을 했다.
파지지직.. ⚡️ 번개기능
ㅋㅋㅋ 내가 이앱에서 제일 좋아하는 포인트다
유저끼리 상호작용이랑 마이페이지에서 볼수있는 회원 등급 기능이다!
번개는 하루에한번 ( 자정에 초기화 ) 다른 각각의 유저에게 보낼수있다.
따라서 몽고디비 ttl 을 document별 ( 디비 테이블 전체에 ttl 거는게 아니라 ) 각각의 번개이벤트마다 자정까지 남은 시간을 계산해서 자정에 지워지도록 ttl을 걸었다. 해당 이벤트를 남겨둬서 한사람한테 이미 보낸 번개가 있으면 다시 못보내게 설정했다.!
특히 저 파지직.. 번개는 원래 기획에 없었지만 뭔가 유저와의 상호작용을 더 주고싶어서 귀엽게 파지직..⚡️ 으로 알림이 오게끔 했다 ㅎㅎ 정말 맘에든다.
쪽지 , 알림 탭 기능
여기도 차단로직이 다들어가있는 상태이다.
알림탭은 푸시알림보다 범위가 더크다. 푸시알림으로 안가는 알림도 여기 들어간다.
디비에 들어갈땐 type 이랑 제목 콘텐츠 정도 저장하고 , 꺼내올때 dto 레벨에서 번개면 번개형식, 댓글이면 댓글알림 형식 등으로 변환해서 클라이언트한테 응답해준다.
쪽지함 기능은 고민을 엄청 많이했었다.
- 내가 차단한사람이면 쪽지가 안오고, 기존 쪽지도 안보여야함
- 채팅방처럼 최신 쪽지가 상단으로 보여야함
- 안읽은 쪽지가 있으면 화면에 표시되어야함
- 쪽지를 하던 상대방이 쪽지방에서 나가더라도 내방에는 상대방과 나눈 쪽지가 계속있어야함
- 상대방이 나와 쪽지를 하다가 나간 상태였을 때, 상대방이 다시 쪽지를 하게되면 상대방은 새로운 방에 들어간것 처럼 보여야함
- 상대방이 나와 쪽지를 하다가 나간 상태였을 때, 상대방이 다시 쪽지를 하게되면 나는 원래있던방에서 쪽지가 와야함
- 내가보낸 쪽지는 이미 읽은 쪽지
- 개별 쪽지마다 읽었는지 확인해야함
위 기능을 구현하기 위해서
쪽지방과 , 쪽지방에 속하는 쪽지로 나누었고
쪽지마다 안읽은사람 정보를 리스트로 저장해서 내가 읽었는지 안읽었는지 정보를 저장했고,
쪽지를 읽을 수있는 정보도 따로 저장해서, 방을 나왔다가 다시들어갈때 최신방처럼 보이게 했다.
질문 게시글 , 지도기능
이건뭐.. 특별한거없이 mongodb에 geo인덱싱 걸어서 좌표찍으면 근처 채팅방 불러오게 + 거리계산까지(몽고디비에서 distance 지원해준다) 해서 불러왔고 게시글답게 내가 좋아요 눌렀는지 내글인지 이런저런 정보들 잘 가져오게 만들었다!
딱히 어려운건없었고 여기도 차단로직 다들어가있다 ㅋㅋ
api는 적절하게 한 40개쯤 나왔던것 같고 네스트 기능이용해서 스웨거로 적절하게 했다
nest js 랑 몽고디비 조합이 쬐금 안맞긴한데 티키타카 내부에서 몽고디비와 어떻게 구성했는지는 포스팅을 차차 할예정이다!
볼륨이 좀 큰 프로젝트였지만
디자이너선생님들께서 너무나도 잘 해주셔서 진짜 열심히 달렸다.
특히 서희 선생님께서 리드미 용으로 이미지를 만들어주셨는데 진짜 감동의 물결이였다.
세번밖에 안운다는데 이미 한번 울었다
발표도 위워크 디자이너클럽에서 하고.. 진짜 엄청난 경험이었다
그럼 다들 티키타카 하실래요?
티키타카(TikiTaka)
실시간 궁금한 장소에 대해 대화를 나누고 싶다면, 티카타카! 지금 대학 근처 카페에 공부할 자리가 있을까? 한강 공원에 바람이 많이 불고 있나? 티키타카 서비스를 통해 실시간으로 궁금한
apps.apple.com
티키타카(@tikitaka_chat) • Instagram 사진 및 동영상
www.instagram.com
'프로젝트' 카테고리의 다른 글
| [고스락 티켓 2.0] 두번째 프로젝트는 어떻게 달라졌을까요? (4) | 2022.08.13 |
|---|---|
| Github labels github action으로 설정하기 (0) | 2022.08.12 |
| aws ec2 docker log cloudwatch 에서 받아보기 (2) | 2022.02.01 |
| 고스락 티켓예매 프로젝트 (0) | 2022.01.26 |
| NCP kubernetes docker desktop context 설정하기 (5) | 2022.01.24 |
