Product Performance & DX · 2025.06 ~
솔리드 커넥션
“성능 개선은 초를 줄이는 일이 아니라, 사용자가 가치에 도달하는 경로를 짧게 만드는 일이었습니다.”
교환학생 플랫폼에서 홈 성능, 커뮤니티 퍼널, 대학 catalog 배포 경계, React 19/Next 16 업그레이드, 운영 자동화를 제품 지표와 배포 책임 기준으로 정리했습니다. LCP 91.2% 개선, 이탈률 21% → 16%, SSG 대상 188개 → 35개 분리를 만들었습니다.
역할
프론트엔드 성능 개선, 운영 자동화, 배포 경계 설계
팀
오픈소스/사이드 프로젝트
기여
성능·DX 개선 주도
Live preview
실제 서비스 화면
교환학생 정보 탐색과 커뮤니티 진입 흐름을 실제 서비스 화면으로 확인할 수 있습니다.
91.2%
홈 LCP 개선
21% → 16%
이탈률 개선
188 → 35
SSG 대상 분리
7.5s
Turbopack compile
01 · Problem
문제
트래픽은 있었지만 홈 LCP와 로그인 중심 커뮤니티 진입 때문에 사용자가 가치에 도달하기 전 이탈했습니다. 대학 catalog SSG는 main web 배포와 묶여 작은 수정도 전체 배포 비용으로 번졌습니다.
02 · Role
역할
프론트엔드 성능 개선, 운영 자동화, 배포 경계 설계 · 오픈소스/사이드 프로젝트 · 성능·DX 개선 주도
Next.jsReact 19TurbopackTurborepoVercelGoogle AnalyticsBrunoAI InspectorFirestore
03 · Approach
해결 과정
- 1 GA와 Performance 패널로 LCP, 이탈률, 커뮤니티 도달률을 먼저 수치화했습니다.
- 2 LCP 후보 이미지와 비핵심 섹션 로딩을 분리하고, 커뮤니티는 로그인보다 가치 노출이 먼저 오도록 바꿨습니다.
- 3 대학 catalog를 별도 Next.js zone으로 빼 SEO 요구와 main web 배포 책임을 분리했습니다.
- 4 React 19/Next 16 호환 작업과 Turbopack 전환을 나눠 리뷰 범위와 회귀 지점을 줄였습니다.
- 5 Bruno codegen과 큐 기반 운영 인스펙터로 반복 운영 작업과 품질 확인 루프를 자동화했습니다.
04 · Results
성과
홈 LCP
9.961s→ 0.874s
91.2% 개선
홈 이탈률
21%→ 16%
5%p 개선
정적 생성 대상
188개→ 35개
main web 배포 부담 축소
SSG 생성 시간
5.6s→ 1.626s
약 71% 단축
Next compile
webpack build→ Turbopack 7.5s
Next 16 기본 빌더 전환 준비
05 · Records
관련 기록
다음 프로젝트