비즈니스 임팩트
•
예약 취소율 30% → 7% 유지 (3개월 이상)
•
MAU 1,000명 달성
•
운영 자동화로 사업주의 수동 관리 부담 최소화 및 고객 만족도 제고
Frontend 설계
기술적 과제 및 성과
1. 데이터 응답 및 렌더링 최적화
AS-IS
•
GraphQL 도입 초기 서버 네트워크 레이턴시 최적화가 어려운 상황에서 클라이언트 레벨에서 렌더링과 네트워크 지연이 직렬로 처리되어 UX 체감지연이 발생하는 문제를 정의하고, 데이터 페칭(Network I/O)과 렌더링을 디커플링해 체감 지연을 줄이고 응답성 개선 (blog 참조)
•
Relay Fragement기반 구조 마이그레이션을 통해 지점,날짜,클래스 리스트,타임슬롯을 컴포넌트 단위 데이터 의존성으로 명시적 선언
•
특히 초기 v0 API는 구현 위주로 진행되어 데이터 요청시 admin과 front 양쪽에서 overfetching 과 underfetching문제가 반복 → 데이터의 일관된 방식과 덜 민감함 구조를 고려하게 됨.
TO-BE
•
수업 검색 UI 에서 클래스 수 증가 시 초기 API 호출 O(n) → O(1) 최적화 , API 응답시간 46% 단축
•
날짜 선택, 클래스 검색결과 렌더링 사이 사용자 이벤트 10ms 내 네트워크 요청 시작 기존 대비 71% 응답성 개선
•
Profiler 렌더링 처리시간 26%단축 / 사용자 수(GA) 110% 이상 증가에도 안정성 유지
•
시스템 도입 후 예약 취소율/노쇼율 3배 (25→7%) 로 낮추고, 3개월 이상 평균 7%대 유지
2. Type-Safe한 프론트엔드 API 레이어 자동 타입 생성 파이프라인
AS-IS
•
기존 REST API 환경에서 타입 불일치로 인한 런타임 오류 빈발 및 API 스키마 변경 시 수동 코드 업데이트로 인한 개발 비효율성 발생
◦
기획이 변경되어 API 개발을 하게 되면 어드민, 프론트, 백엔드 전체 계층에서 요청/응답 흐름을 반복적으로 대응 → 더 적은 수정 범위로, 더 빠르게 변화에 대응할 수 있는 방법은 없을까를 고민하게 됨
TO-BE
•
GraphQL + Relay 기반 타입 시스템을 도입하여 스키마 중심 개발 환경 구축
◦
Fastify 서버에 mercurius를 등록해, 동일한 서버에서 REST API와 GraphQL API 동시 제공
◦
Schema-first 접근으로 GraphQL API 설계 및 스토어, 클래스, 타임슬롯 리졸버 구현
•
메타프로그래밍 기반 자동 코드 생성 도구(Relay Compiler, GraphQL Code Generator) 활용을 통해 프론트, 백엔드, 어드민 데이터 계층의 표준화 및 타입 자동 동기화 개선
3. Relay 스펙 커서 기반 페이지네이션 구조 개선을 통해 클래스 예약 목록 조회 요청 최적화
GraphQL Relay 스펙에 맞춰 커서 기반 페이지네이션을 구현하면서, 신뢰성 있는 페이징 처리가 가능해졌습니다. 기존 오프셋 기반 페이징 방식은 데이터 추가나 삭제가 발생하면 잘못된 페이지로 이동하는 문제가 있었지만, 커서 기반 페이징은 각 항목의 고유 커서를 기준으로 페이지를 구분하기 때문에 데이터 변경 상황에서도 일관된 사용자 경험을 제공할 수 있다는 장점을 얻었습니다.
또한, Relay 스펙을 따르면서 페이지네이션 구조를 명확하게 설계할 수 있었고, 프론트엔드와 백엔드 간 데이터 연결 규칙을 표준화해 유지보수성과 확장성도 높일 수 있었습니다.