리빙메이트

같이 살 룸메이트를 구하는 서비스

리빙메이트

프로젝트 정보

기간2025.08.30 - 2025.09.18
역할프론트엔드 개발

기술 스택

TypeScriptReact NativeTanstack Query

룸메이트 매칭 앱 서비스

2025년 8월 30일부터 9월 18일까지 진행된 룸메이트 매칭 앱 프로젝트는 React Native를 기반으로 한 프론트엔드 앱 개발 프로젝트였다. 이 서비스는 “같이 살 사람을 찾는 플랫폼”이라는 목표 아래, 사용자의 성향과 생활 습관에 맞는 룸메이트를 추천하고 검색할 수 있도록 설계되었다. 사람의 다양한 특성과 생활 패턴을 고려해야 했기 때문에 폼 입력과 필터링 로직이 매우 복잡했으며, 짧은 개발 기간 내에 방대한 데이터 구조를 처리해야 했다.

프로젝트 개요와 기능 설계

서비스는 사용자의 성별, 흡연 여부, 수면 패턴, 청결도, 소음 민감도 등 여러 항목을 기반으로 추천 매칭을 제공했다. 이를 위해 설문 형태의 폼 입력과, 필터 조건에 따른 사용자 탐색 기능을 구현했다. 문제는 항목마다 다른 유형의 입력(토글, 슬라이더, 다중 선택, 단일 선택 등)이 존재했고, 각 입력값이 독립적으로 상태를 관리해야 한다는 점이었다.

또한 필터링 로직이 많은 연산을 포함했기 때문에 렌더링 성능 저하가 우려되었다. 이를 해결하기 위해 useCallback과 useMemo를 적극적으로 사용해 불필요한 리렌더링을 최소화했다. 예를 들어 사용자가 특정 항목을 선택하면 해당 컴포넌트만 상태를 변경하고, 다른 자식 요소들은 렌더링되지 않도록 의존성 배열을 정교하게 관리했다. 이러한 최적화 과정을 통해 복잡한 UI에서도 부드러운 사용자 경험을 구현할 수 있었다.

RangeSlider 커스텀 구현

특히 가장 어려웠던 부분은 RangeSlider 컴포넌트를 직접 구현한 과정이었다. 사용자에게 월세 범위를 시각적으로 선택하게 하는 기능이 필요했지만, React Native에서는 기본적으로 RangeSlider를 제공하지 않았다. 타 라이브러리를 사용하는 방법도 검토했으나, 단기간에 완벽하게 라이브러리를 이해하고 커스터마이징하는 것이 어려워 자체 구현을 선택했다.

터치 이벤트를 기반으로 Slider의 tab 위치를 계산하고, gesture의 시작·이동·종료 이벤트를 처리하면서 실시간 상태를 반영해야 했다. 또한 두 손잡이(left, right)의 교차를 방지하고, 값의 정렬과 표시를 자연스럽게 보정해야 했다. 범위 값은 상태로 관리했으며, useRef와 Animated.Value를 결합하여 자연스러운 슬라이딩 효과를 구현했다. 짧은 시간 내에 완성해야 했던 만큼 높은 난이도를 극복해야 했지만, 이를 통해 React Native 환경에서의 gesture 처리와 애니메이션 구조를 깊이 있게 이해할 수 있었다.

협업에서의 문제와 개선

이 프로젝트에서 기술적인 도전 외에도 협업의 어려움을 크게 체감했다. 일정이 촉박하다는 이유로 팀 내에서 코드 컨벤션을 명확히 정하지 못했고, 그 결과 파일 구조와 네이밍 규칙이 팀원마다 제각각이었다. 컴포넌트 이름, props 구조, 상태 관리 방식도 통일되지 않아 다른 팀원의 코드를 이해하는 데 많은 시간이 소요되었으며, 마감 직전 수정 과정에서 충돌과 오류가 연이어 발생했다.

실제 마감 전날에는 컨벤션 불일치로 인한 import 경로 오류와 구조적 충돌로 인해 빌드가 반복적으로 실패하는 상황이 발생했다. 이를 수습하기 위해 직접 파일 구조를 재정리하고, 공통 컴포넌트 구조를 기준으로 각자 코드를 병합하는 작업을 진행했다. 결과적으로 프로젝트는 완성되었지만, 협업 효율성과 코드 일관성의 중요성을 뼈저리게 느낀 계기가 되었다.

이 경험은 이후 학과 홈페이지 개발 프로젝트에서 큰 교훈이 되었다. 프로젝트 초기 단계에서 코드 컨벤션을 강력하게 제정하고, 폴더 구조와 네이밍 규칙, 상태 관리 패턴을 명확히 문서화하여 개발을 시작했다. 실제 이후 프로젝트에서는 코드 품질과 협업 속도 모두 확연히 향상되었다.

회고

이 프로젝트는 기술적으로나 협업적으로 모두 짧은 기간 안에 가장 많은 문제를 경험한 프로젝트였다. 복잡한 필터링 로직과 커스텀 UI 구현을 해결하면서 React Native에서 성능 최적화의 중요성을 실감했고, 팀원 간 코드 규칙의 불통이 프로젝트 전체 완성도에 얼마나 큰 영향을 미치는지도 배울 수 있었다.

결국 개발 과정의 혼란은 “명확한 규칙이 곧 협업의 기반”임을 깨닫게 했으며, 이후 모든 프로젝트에서 초기 설계와 코드 정렬을 가장 먼저 실행하는 습관으로 자리 잡게 되었다. 기술적 성장은 물론, 협업 구조와 팀 문화에 대한 인식을 완전히 바꾼 프로젝트였다.

목차