뿌슝이의 동물 SSU개팅
프로젝트 소개
뿌슝이의 동물 SSU개팅은 숭실대학교 동아리 YOURSSU에서 개발한 온라인 이상형 매칭 서비스로, 2023년 본교 대동제 3일 동안 운영된 프로덕트이다.
한 번 참여할 때마다 이용권이 1장 필요하고, 이 이용권을 써서 직접 프로필을 등록하거나 마음에 드는 프로필의 연락처를 열람하는 방식이다. (이용권은 오프라인 부스에서 구매한 인증코드를 사이트에 등록하면 받을 수 있다)
참여하게 된 계기
사실 계기랄 게 없다
당시 개강+다른 프로젝트 마무리로 바쁘기도 했고, 2주 안에 완성해 낼 자신이 없어서 나는 부스 운영 도와야지~ 하는 생각으로 TF에 지원했는데.. 그랬는데..
알고보니까 모집 글에는 개발 인원도 포함된 거였다.
얼떨결에 합류했지만 끝나고 돌아보니 개발이나 개발 외적인 부분 모두에서 얻은 게 많아서 후회는 없다!!
맡은 역할
시작 화면
사이트 접속 시 가장 먼저 보이는 시작 화면이다.
인증코드 등록 기능 / 동물 카드 슬라이드 애니메이션 / 페이지 이동 버튼으로 나눌 수 있다.
개발에서 가장 어려웠던 부분은 역시 애니메이션 （；´д｀）ゞ
CSS 애니메이션과 자동 스크롤 중 어떤 방법으로 구현할지 고민을 많이 했는데 결국은 자동 스크롤로 당첨! (애니메이션으로 구현하려면 이동 비율을 정할 때 화면 크기를 고려해야 하는 점이 가장 큰 걸림돌이었다)
작년 학교 공모전에서 Missul;GAN 개발할 때 가로 스크롤에 관해 공부했던 내용을 열심히 참고하면서 만들었다.
프로필 등록하기
프로필을 등록하는 페이지다.
(1) 성별 선택 (2) 나를 나타내는 동물 선택 (3) 자기소개 입력까지 총 3단계로 이루어져 있다.
프로필 등록 기능을 구현하면서 어려웠던 점이 있다면 바로 상단바 문구..!
단계를 지날 때마다 성별 고르기 -> 동물 고르기 -> 본인 소개하기 순서로 상단바 문구가 바뀌어야 하는데, 상단바를 구현한 팀원분의 생각과 내가 구현한 방식에 차이가 있어서 도중에 어려움을 겪었다（⊙ｏ⊙）
전역 상태로 현재 단계를 저장할지, 아예 단계마다 라우팅을 다르게 할지 고민하다가 각각 단점이 있어서 아예 다른 방법으로 해결했다! (단계마다 url parameter를 업데이트하는 방식)
💭 이 기능을 담당하게 된 비하인드
사실 나는 역할 분담에 있어서 적극적인 편은 아니었는데, 이번에는 먼저 여기를 맡아보고 싶다고 나섰다.
토스 SLASH 23에서 진유림 연사님의 퍼널: 쏟아지는 페이지 한 방에 관리하기를 인상 깊게 봤었는데, 마침 이 페이지가 세션에서 나온 설문조사형 패턴에 해당했고 세션 내용을 적용해 보고 싶은 마음이 컸기 때문이다.
그리고 5월에 동아리 해커톤에서 개발한 숭실대생 전용 명함 서비스 뉘슈?와 슈개팅의 자기소개 입력 화면 기능이 유사해서 빠르게 개발할 수 있다는 자신도 있었다!
실시간 프로필 확인
(이전에 만들어 둔 GIF가 날아가서 피그마 화면으로 대체)
실시간으로 등록되는 프로필 목록을 볼 수 있는 페이지다. 여기는 사용자용이 아니라, 사용자 영업 목적으로 만들었다. (부스에서 모니터로 이 화면을 띄워두고 슈개팅에 등록된 프로필이 이렇게 많아요~! 하면서 열심히 영업했다 ^ㅅ^)
다만 일정 주기로 새로고침 하도록 해뒀으면 좋았을 거 같다.
부스에서 프로필 등록하신 분들이 저 등록했는데 화면에 안 떠요.. 하는 일이 종종 있었기 때문에..
그때마다 수동으로 새로고침하고 짜잔~ 떴습니다~ 했는데 쪼끔 번거로웠다.
성과
대동제를 마치고 개발팀 회고 겸 서비스 지속 여부에 대해 짧은 회의를 했는데, 다 같이 로그를 보면서 예상보다 엄청 많은 사용자 수에 깜짝 놀랐다. (사진은 CloudFlare 로그 중 대동제 기간에 사이트에 방문한 사용자 수)
혹시 이용하다가 문제라도 생길까 봐 3일 내내 부스 출근 도장 찍으면서 노력한 보람이 있었다 😙
실제로 눈앞에서 내가 만든 서비스를 이용하는 모습을 보니 엄청 뿌듯하고 신기했다! 2주 만에 만든 거 대단하다고 칭찬 많이 해주셔서,, 괜히 쑥스럽고 그랬음 ㅎ.ㅎ
배운 점
기록해두면 나중에 다 쓸 곳이 있다
나는 위 사진처럼 하나의 프로젝트를 진행할 때 새로 공부한 내용과 에러 해결 과정을 기록하는데, 이번에 그 덕을 톡톡히 봤다.
특히 개발 기간이 넉넉하지 않을 때 레퍼런스나 에러 원인 찾는 데 드는 시간을 절약할 수 있다!
(앞으로는 정리한 내용을 다듬어서 벨로그에도 하나씩 올려볼 예정 😎)
원하는 바를 명확하게 전달하자
백엔드 팀원과 에러 코드에 관해 얘기할 때, 설명을 너무 간략하게 한 탓에 서로 이해를 다르게 해서 같은 말을 여러 번 하게 된 상황이 있었다. 이때 처음으로 나한테 설명을 너무 간단하게 하는 버릇이 있다는 걸 느꼈다.
앞으로는 (1) 이게 왜 필요한지 (2) 어떻게 바꾸길 원하는지를 위주로 명확하게 말하는 습관을 기를 것이다!
동작 화면을 저장해두자.....🥺
슈개팅은 축제 기간에만 운영하는 프로덕트이기 때문에 현재는 모든 데이터가 삭제된 상태다.
그리고 저장소를 private에서 public으로 전환하면서 PR에 첨부했던 사진도 다 날아갔다.
글에 사진을 넣어야 하는데 넣을 게 없어서 휴지통을 뒤지면서.... 다음부터는 꼭 기능별로 GIF 따놔야겠다는 교훈을 얻었다..
