y.developer
[TIL] Day 87 Crosswalk 프로젝트 기술적 의사 결정 본문
2024.02.06 화
Crosswalk 프로젝트에서 기술적 강점
프로젝트를 진행할 때 어떤 도전을 했는가?
- Supabase Realtime을 활용한 실시간 채팅 및 알림
- 호감도 알고리즘
- PWA
- 3D 애니메이션 구현
기술적 의사 결정
핵심기술을 정리하고, 각 기술을 도입하게된 의사결정 과정은?
내가 엔지니어로서 자질이 있다는 것을 어필하는 것이 중요하다.
엔지니어는 문제를 해결하는 사람이다.
따라서 우선 문제 정의를 정확하게 하는 것이 중요하고, 그에 따른 해결방법을 도출해낸 과정이 중요하다.
어떤 요구사항이 있었는지,
구현할 수 있는 어떤 선택지들이 있었는지,
어떠한 이유와 근거로 기술을 최종 결정하게 되었는지 정리해보자.
1. 실시간 채팅을 어떻게 구현할까?
선택지 : Supabase Realtime, WebSocket, Socket.IO
최종 선택 : Supabase Realtime
현재 Supabase를 활용하여 DB, Auth 등을 사용하고 있기 때문에 통합관리가 가능한 장점이 있다.
그리고 러닝 커브가 작기 때문에 빠른 적용과 테스트가 가능할 것으로 판단했다.
메시지 테이블을 구독하고 upadate, insert 등 데이터 변화를 감지했다.
그리고 payload가 들어옴에 따라 원하는 로직을 동작시켰다.
2. 호감도 알고리즘을 어떻게 구축할까?
선택지 : GPT 학습(내용, 빈도수), 자체제작
최종 선택 : 자체제작
사람들의 호감도를 어떻게 그려내야하는지 고민을 했는데,
호감도라는 것은 굉장히 주관적인 수치를 나타내기 때문에 객관적이 지표로 활용하기 어려운 부분이 있었다.
이를 어떻게 컨트롤하고 표시하며, 유저들의 입장에서 자연스럽게 받아들일 수 있을지 고민하였다.
GPT를 학습시켜 활용하기에는 많은 시간과 비용이 들어가고,
호감도라는 주관적인 수치를 GPT가 객과화 시키기 어렵다고 판단했다.
그래서 알고리즘을 자체적으로 제작하기로 결정했다.
호감이라는 정의를 '활발한 대화'로 선정했고, 그에 따른 호감도 측정 알고리즘을 구현했다.
3. 모바일 친화적인 서비스를 어떻게 구현할까?
선택지 : 웹앱(PWA), 앱
최종 선택 : PWA
우리 프로젝트는 실시간 채팅 등 모바일 친화적인 서비스이기 때문에 모바일을 타겟으로 제작되었다.
그에 따라 모바일 환경에서 잘 작동되도록, 그리고 모바일 UI, UX를 신경쓸 수 밖에 없었다.
완전한 앱으로 구현하면 제일 좋겠지만 어려움이 존재했다.
플러터, 리액트 네이티브 등을 활용한 앱 배포시 추가적인 학습이 필요하기 때문에 UT 기간에 바로 적용시킬 수 없었고, 작업 효율성이 떨어진다는 큰 단점이 있었다.
따라서 현재 코드를 그대로 유지한채 PWA를 활용하여 빠른 기간안에 앱 UI를 구현하여 UX를 증진시킬 수 있도록 했다.
4. 인터렉티브한 모션을 어떻게 구현할까?
선택지 : React-Slick, Swiper
최종 선택 : Swiper
카드에 대한 궁금증을 유발하고, 시각적인 UX를 충족시키기 위해서 고민했다.
그에 따른 프로필 카드 넘기는 액션에 적용할 CSS가 필요했다.
React-Slick는 설치 용량이 770kb로 매우 작아서 빠른 동작이 가능하지만,
최근 업데이트가 2년전으로 사실상 관리를 포기했다고 판단했다.
(오늘 기준으로 확인했는데 11일전에 업데이트 기록이 있었다.)
Swiper는 설치 용량이 3.3mb로 다소 무거웠지만,
최근업데이트가 며칠전으로 굉장히 활발한 업데이트가 이루어지고 있었고 다운로드 수 또한 높은 모습을 보였다.
따라서 원활한 유지 보수와 많은 정보라는 장점을 확보할 수 있었기 때문에 해당 기술을 채택했다.
마음에 드는 카드를 클릭하면 뒷면의 블러처리된 유저 이미지를 볼 수 있는 시스템이 있다.
프로필 카드를 뒤집는 액션에는 Styled JSX를 활용했다.
여기에도 라이브러리가 존재하겠지만, 무거운 작업이 아니었고 CSS의 기본기능인 transform-style-preserve-3d만으로도 충분히 구현이 가능했기 때문에 이를 활용하여 리소스를 절감했다.