프로젝트 소개
내 콘서트를 부탁해는 공연 일정 관리, 장소 탐색, 이동 동선 계획까지 하나의 흐름으로 연결한 공연 올인원 매니지먼트 플랫폼입니다. 공연 하나를 보기 위해 여러 앱과 메모를 오가야 하는 불편함을 해소하고, 사용자가 더 자연스럽게 일정을 계획할 수 있도록 만드는 것을 목표로 했습니다.
FE 팀장, Git 총괄, 디자인 리드 역할을 맡아 화면 설계부터 구현, 협업 흐름까지 폭넓게 주도했습니다. 기능을 단순히 구현하는 데 그치지 않고, 사용자가 입력 과정에서 느끼는 피로를 줄이고 필요한 정보에 더 빠르게 도달할 수 있는 UX를 만드는 데 집중했습니다.
외출플래너 입력 흐름 재설계, Debounce 기반 검색 최적화, TanStack Query 캐싱 전략 적용을 통해 사용자 경험과 기술적 안정성을 함께 끌어올렸습니다. 프론트엔드·백엔드 협업으로 진행된 데브코스 최종 프로젝트로, 초기 렌더링 성능과 SEO 대응까지 고려하며 제품 완성도를 높인 결과 총 8팀 중 2등을 차지했습니다.
프로젝트 기간
2025.12 - 2026.01
주요 역할
- FE 팀장 (9명 중 FE 3명)
- Git 총괄 / 디자인 총괄
- 메인 · 공연 상세 · 외출 플래너 · 검색 · 마이페이지 등 핵심 화면 설계 및 구현
- 플랫폼 전 페이지 레이아웃 · 반응형 · 다크모드 UI 구현
- TanStack Query 캐싱 전략 적용 및 Lighthouse 성능 개선
- 백엔드 협업 경험
사용 기술
시연 영상
프로젝트의 주요 기능과 인터랙션을 영상으로 확인해보세요.
Challenge & Solution
외출플래너 입력 과정 단순화
문제 정의
외출플래너 기능의 초기 작업 당시 사용자가 식사·이동·대기·기타 타입의 모든 일정을 여러 단계에 걸쳐 반복 입력해야 해 피로도가 높았습니다. 물론 일정의 등록이나 수정, 삭제와 같은 기본적인 기능은 동작했지만 실제 사용 흐름에서는 입력 횟수가 많아 이탈 가능성이 큰 구조였습니다.
해결 방안
각 목적지가 있는 일정의 경우 이동 항목이 자동으로 생성되는 방식으로 UX를 재설계해 사용자 입력 횟수를 최소화했습니다. 복잡하게 모든 일정 타입을 등록하는 기존 방식에서 입력 흐름 자체를 다시 설계함으로써 사용자가 더 적은 행동으로 같은 목표를 달성할 수 있도록 개선했습니다.
검색 API 과호출 최적화
문제 정의
기존 작업 방식은 검색 입력 시 사용자의 타이핑마다 API 요청이 발생하는 방식이었습니다. 이는 불필요한 API 요청으로 서버 리소스를 낭비하고, 네트워크 상황에 따라 응답이 지연되거나 사용자 경험이 떨어질 가능성이 있었습니다.
해결 방안
연속된 입력값에 Debounce 기법을 적용해 검색 요청을 제어했고, 평균 API 호출 횟수를 6회에서 1회로 줄여 서버 리소스를 83% 절감했습니다. 이를 통해 사용자는 더 안정적인 검색 경험을 얻고, 서비스는 불필요한 요청을 줄일 수 있었습니다.
TanStack Query 캐싱 전략 적용
문제 정의
기존 메인 페이지에서 공연 목록 조회 → 공연 ID별 티켓팅 플랫폼 정보 조회 → 슬라이드 렌더링 순으로 진행되어 초기 렌더링 시 로딩이 길어졌습니다. 최악의 경우 서버 렌더링이 지연되어 메인 페이지 접근까지 수초가 소요되는 문제가 발생했습니다.
해결 방안
자주 변경되지 않는 공연·아티스트 목록에 1시간 캐싱 전략을 적용하고, 메인 페이지 진입 시 가장 먼저 노출되는 공연 목록에는 prefetch 전략을 추가 적용했습니다. 그 결과 FCP가 2.1초 → 1.2초, LCP가 28.9초 → 16.2초로 개선되어 사용자 경험과 SEO 모두 향상되었습니다.
