이전 프로젝트에서 Vanilla JS로 소개팅 웹 앱을 개발한 경험이 있었지만, UI·UX 측면에서 한계가 있어 더 높은 수준의 사용자 경험을 제공할 필요성을 느꼈습니다. 이에 새롭게 학습한 React를 적용해, 보다 직관적이고 반응성이 뛰어난 인터페이스를 구현하는 것을 목표로 본 프로젝트를 기획했습니다. 또한 React를 통해 Vanilla JS보다 웹 앱을 네이티브 앱에 가깝게 구현할 수 있을지에 대한 기술적 도전도 함께 진행했습니다.

모바일 환경을 우선 고려하여 다양한 기기 너비를 분석한 뒤, 480px을 최대 너비로 전역에 미디어쿼리를 적용하고, rem 단위를 활용해 화면 크기에 따라 유연하게 대응하도록 설계했습니다. 기본 HTML 폼 요소(select, input, radio, textarea 등)는 브라우저와 운영체제마다 스타일이 상이한 문제를 해결하기 위해, 프로젝트 테마에 맞춘 커스텀 스타일을 적용하고 재사용 가능한 컴포넌트로 제작했습니다. 채팅 기능은 Firebase 실시간 구독을 통해 메시지 변화를 즉시 반영하되, ChatProvider에서 구독 해제 로직을 포함시켜 페이지 전환 시 중복 구독을 방지했습니다. 채팅방에서는 초기 20개의 메시지만 로드하고, 스크롤 시 20개씩 추가 로드하는 방식으로 성능 부담을 줄였으며, react-intersection-observer 라이브러리를 활용해 스크롤 최상단을 감지하고 자연스러운 무한 스크롤을 구현했습니다. 또한, 메시지 추가 시 requestAnimationFrame을 적용해 모바일 환경에서도 부드럽게 스크롤 위치를 유지하도록 최적화했습니다. App.jsx에서는 Firebase Auth와 Firestore의 신규 유저 데이터 등록 여부를 동기화하는 로직을 구현했습니다. 로그인 시 onAuthStateChanged로 인증 상태를 확인하고, Firestore에 해당 UID의 데이터가 없으면 즉시 신규 유저 데이터를 생성합니다. 이를 통해 인증만 되어 있고 DB에 정보가 없는 상태를 방지하고, 안정적인 초기 진입 경험을 제공했습니다.

React로 구현하면서 화면 전환 속도와 UI 반응성을 크게 향상시키고, 컴포넌트 재사용으로 개발 효율을 높였습니다. 이를 통해 모바일 중심 웹 앱에서 네이티브 앱에 가까운 사용자 경험을 구현하려던 목표가 성공적으로 달성되었음을 확인했으며, 일반적인 웹 서비스 개발에서도 React의 효율성과 일관된 사용자 경험 제공 능력을 체감했습니다. 또한, Firebase의 비동기 데이터 처리 방식을 다루면서 데이터 준비 상태에 따른 렌더링 제어, 로딩 컴포넌트 적용, 오류 방지 처리 등의 기법을 습득했습니다. 나아가 데이터 로직을 Context와 useReducer 기반으로 관리하고 State와 Dispatch를 분리 공급하는 구조를 적용해, 기능별로 4개의 Context를 세분화하여 필요한 페이지에만 효율적으로 상태를 전달할 수 있었습니다. 2025년 7월~8월에 걸쳐 코드 구조 개선과 디자인 리뉴얼을 진행하며, 초기 개발 이후 유지보수와 리팩토링의 중요성을 체감했습니다. 이를 통해 코드 가독성, 성능, UI 일관성을 향상시켰습니다.