간단 소개이때어때는 When2Meet의 불편함을 개선한 통합 스케줄링 플랫폼으로, 반복적인 일정 조율 과정의 피로도를 줄이고 현실적인 일정 관리 솔루션을 제공합니다. 단순 시간 조율을 넘어 모임의 방식(온라인/오프라인) 설정, 참여자 위치 기반의 중간 장소 추천, 그리고 Figma·Notion·GitHub·Google Docs 등 다양한 워크스페이스 공유 기능을 지원합니다. 이를 통해 개인과 그룹 모두에게 유연하고 효율적인 일정 관리 경험을 제공합니다.
작업 기간2025.06. - 2025.08.
프로젝트 유형팀 프로젝트 (FrontEnd 5명, BackEnd 5명)
기술 스택
구현한 기능
사용자 인증 기능 구현
- • 소셜 로그인 플로우 설계 및 구현
Google / Kakao OAuth 2.0 기반 로그인 후 콜백 페이지에서 인증 상태를 확인하고 홈 화면으로 리디렉션
- • 인증 및 API 통신 최적화
Axios Instance와 HttpOnly 쿠키 기반 인증 구현, 인터셉터로 API 에러와 사용자 상태 관리
- • 사용자 데이터 패칭 최적화
TanStack Query로 로그인 사용자 정보를 효율적으로 패칭하고 불필요한 호출 최소화
- • 콜백 페이지 및 라우팅 흐름 관리
로그인 성공/실패에 따라 자동 리다이렉트 처리
- • 소셜 로그인 플로우 설계 및 구현
오프라인 일정 관리 페이지 구현
- • UI 분기 처리 및 카카오 지도 연동
일정에 지정된 장소 유무에 따라 UI를 분기 처리하고, 카카오 맵 API를 연동하여 지도와 상세 내용을 화면에 렌더링
- • 모임 장소 검색 기능
사용자의 입력값 기반으로 카카오 장소 검색 API를 호출하고, debounce 기법을 적용해 불필요한 API 요청 최소화
- • 지도 마커 표시
선택된 장소의 위도/경도를 기준으로 지도에 커스텀 마커를 표시하고, 위치 정보를 직관적으로 제공
- • 실시간 데이터 반영
TanStack Query를 활용해 편집된 장소 정보를 실시간으로 반영하여 사용자에게 즉각적인 피드백 제공
- • UI 분기 처리 및 카카오 지도 연동
대시보드 & 사용자 일정 관리 기능
- • 선택 날짜 기반 일정 조회
사용자가 달력에서 선택한 날짜를 기준으로 개인 및 그룹 일정을 조회하도록 구현
- • 월 단위 데이터 캐싱
월 단위로 일정 데이터를 불러오고 TanStack Query를 활용해 캐싱하여, 동일 월 내 반복 요청을 방지하고 API 호출 최적화
- • 불필요한 렌더링 최소화
select 옵션을 활용해 월 전체 데이터 중 선택된 날짜의 일정만 추출, 필요 없는 컴포넌트 리렌더링을 최소화
- • 실시간 데이터 동기화
사용자의 일정 삭제 혹은 그룹 일정으로 이관 시 invalidateQueries를 활용하여 클라이언트 상태를 즉시 갱신하여 최신 정보를 제공
- • 선택 날짜 기반 일정 조회
디자인 시스템 및 UI/UX 설계 총괄
- • 컴포넌트 기반 UI 디자인 시스템 구축 (톤앤매너 정립)
- • 반응형을 고려한 UI/UX 전반 구조 설계
- • 3D 시각 요소 제작 및 인터랙션 적용
기타
- • 그룹 생성/수정/삭제 기능 구현
- • 개인 일정을 그룹 일정으로 이관하는 기능 로직 설계
- • 404 페이지 및 일정 유형 선택 페이지 구현
트러블 슈팅대시보드 API 호출 최적화
사용자가 달력에서 날짜를 선택할 때마다 매번 개별 API 요청이 발생하며, 동일한 월 내 여러 날짜를 빠르게 선택할 경우 중복 호출이 빈번하게 발생하여 불필요한 네트워크 사용으로 지연 시간이 늘어나고 사용자 경험이 저하되는 문제가 있었습니다.
해결 과정
• 개선 전: 날짜 단위 요청(GET main-page?date=YYYY-MM-DD)과 일부 queryKey 캐싱 사용 → 월 변경 시 전체 요청 반복
• 개선 후: 한 달 단위 데이터 선요청(GET /main-page/calendar?startDate=YYYY-MM-DD&endDate=YYYY-MM-DD) 후 클라이언트에서 선택된 날짜 필터링
• queryKey를 월 단위(["dashboard","schedules", YYYY-MM])로 통일하여 중복 호출 방지
결과
• API 호출 횟수 약 79% 감소 (월 평균 1.2회 → 0.25회)
• 평균 응답 시간 약 95% 개선 (6,210ms → 312ms)
• 데이터 전송량 불필요 전송 99% 제거
• 사용자 대기시간 후속 요청 100% 개선
배운 점
• Tanstack Query queryKey 전략을 활용한 프론트엔드 성능 최적화 경험
• 클라이언트 필터링으로 백엔드 부하 감소 및 UX 향상 방법 학습
• 사용자 행동 패턴 기반 데이터 요청 최적화 경험 축적
• 실전 프로젝트에서 데이터 효율성과 사용자 경험을 동시에 개선하는 방법 이해
카카오맵 API 호출 최적화
사용자가 모임 장소를 입력할 때마다 searchDestination()이 즉시 호출되면서 중복 요청이 발생하여 결과 목록이 깜빡이고 응답 속도가 느려져 사용자 경험이 저하되었으며, 카카오 API 호출 횟수 제한으로 인해 불필요한 요청이 비용과 성능 측면 모두에서 문제를 일으켰습니다.해결 과정
• 개선 전: 입력할 때마다 API 호출 → 실시간 검색 응답은 빠르지만 불필요한 API 요청이 과도하게 발생
• 개선 후: Enter 키 입력 또는 검색 아이콘 클릭 시에만 searchHandler() 실행 → 요청 횟수는 줄었지만 실시간 검색 피드백 부재로 UX 저하
• Debounce 적용 (setTimeout + clearTimeout) → 사용자가 입력을 멈춘 뒤 일정 시간(300ms)이 지나야 검색 실행, 중간 타이핑 시 이전 요청 취소되어 효율적이면서 UX 유지
결과
• API 호출 횟수 약 79% 감소 (기존: 최대 4~5회/초 → Debounce: 1회 이하/초)
• 사용자 UX 개선: 부드럽고 안정적인 반응 (기존: 깜빡임 존재, 수동 호출: 느림)
• 구현 복잡도: 중간 수준으로 유지 (기존: 간단, 수동 호출: 가장 간단)
배운 점
• debounce 기법은 실시간 인터랙션에서도 속도 저하 없이 효율적으로 API 호출을 제어할 수 있음
• 특히 외부 API 사용 시 요금.트래픽 부담을 줄이는데 매우 중요
• 불필요한 호출은 줄이되, 사용성은 유지하는 균형 잡한 UX 설계 필요