mesel7 logo

Project Detail

( 05 )

Sweetii - 달콤한 만남

Sweetii는 대학교 인증 시스템과 상세한 사용자 프로필을 기반으로, 건전한 매칭 환경을 제공하는 소개팅 플랫폼입니다. 기획팀과 협업하여 매칭 로직, 수익 모델, 디자인을 기획하고, 그에 맞춘 UI/UX를 구현하여 실제 사용자 경험 향상에 중점을 두었습니다. Vanilla JS로 구현된 웹 앱이며, Firebase를 활용한 인증, Database 연동, Hosting까지 전반적인 개발 및 배포를 담당했습니다. 실제 사용자 대상의 서비스 운영과 정기적인 온라인 홍보 활동도 함께 진행했습니다.

이 프로젝트는 현재 배포 환경이 종료되어 서비스를 이용하실 수 없고 회사 내부 정책으로 소스 코드를 공개할 수는 없지만, GitHub에 별도로 정리한 소개 페이지에서 주요 기능, 구조, 스크린샷 등을 확인 가능합니다.

본 페이지에서는 개발 배경과 문제 해결 과정, 배운 점을 중심으로 정리하였습니다.

Motive

HTML5, CSS3, Vanilla JS를 학습하며, 이를 활용해 실제 사용자가 이용할 수 있는 웹 서비스를 제작해보고자 본 프로젝트를 시작했습니다. 소개팅 플랫폼이라는 특성상 CRUD 기능 구현이 필수적이었고, 보안성과 신뢰성을 갖춘 Firebase를 활용해 인증, DB 연동, Hosting까지 전 과정을 직접 구축했습니다. 또한, Vanilla JS 환경에서 복잡한 상태 관리와 UI 업데이트를 효율적으로 구현하는 방법을 실험적으로 도전한 프로젝트이기도 합니다.

Problem Solving

편리한 로그인 환경을 제공하기 위해 Firebase Authentication 기반으로 Google·Kakao 소셜 로그인(OAuth 2.0) 기능을 구현했습니다. 구현 과정에서 토큰 처리 및 리디렉션 흐름에서 문제가 발생했지만, 디버깅과 인증 절차 분석을 통해 안정적인 로그인 프로세스를 완성했습니다. 또한, 실시간 데이터 반영을 위해 Firebase 비동기 로직을 최적화하고, 이벤트 기반 UI 업데이트를 적용하되 DOM 조작을 최소화하여 성능을 향상시켰습니다. 2024년 4월 배포 후 실제 사용자 대상으로 운영하며 발생한 이미지 로드 지연, 인증 세션 만료, 데이터 동기화 지연 등의 문제를 즉시 분석하고 핫픽스를 적용해 개선했습니다. 추가로, 고객센터 및 관리자 페이지를 구축하여 사용자 문의에 신속히 대응하고, 이용자 통계를 시각화하여 서비스 운영 효율성을 높였습니다.

Learned

순수 Vanilla JS로도 실시간 데이터 기반 웹 서비스를 구현할 수 있다는 가능성을 확인했지만, 생산성과 유지보수 측면에서의 한계를 체감했습니다. Firebase Authentication, Database, Hosting 전 과정을 직접 경험하며, 웹 서비스의 기획·개발·배포 흐름을 전체적으로 이해할 수 있었습니다. 특히 매칭 서비스 특성상 중요한 신뢰성·보안·응답 속도를 고려한 설계와, 실사용자 피드백을 반영한 UI/UX 개선 과정을 반복하며 피드백 기반의 빠른 개선 주기의 중요성을 배웠습니다. 또한 기획팀과의 정기 회의를 통한 협업, 실제 수익 모델 설계, 사용자 불편 사항 해결 등 서비스 운영 관점의 프론트엔드 개발을 경험했습니다. 이를 통해 단순한 화면 구현을 넘어, 사용자가 서비스를 어떻게 인지하고 경험하는지까지 설계하는 역량이 프론트엔드 개발자에게 필수적임을 깊이 깨달았습니다. 이는 제가 프론트엔드 개발의 본질로 삼는 가치관이 되었고, 이후 프로젝트 전반에 일관되게 적용하고 있습니다.

mesel7 Dev Portfolio