강동현.

AI 프로덕트 엔지니어

★ 사례 03 / 5프로덕트 엔지니어 강동현

에너지플러스 앱 - GS칼텍스

홈 진입까지 3초 넘는 로딩은 1초까지 끌어내린다.

GS칼텍스프론트엔드2024.10 ~ 진행 중

01.발견

"앱이 너무 느려요" — 홈 진입에서 가장 자주 들어온 불만이었다.

사용자 불만은 한 줄이었다. "앱이 너무 느려요." 가장 자주 짚힌 시점은 홈 진입이었다 — 앱을 열고 첫 화면이 채워지기까지의 그 몇 초였다. 추측 대신 측정으로 객관화했다: Lighthouse 33점, LCP 3.03초. 사용자가 말한 "느리다"의 정체는 첫 페인트가 막혀 있던 시간이었다.

답은 "기능을 더 잘 만들자"가 아니라 "들어가 있던 것 중에 진짜 필요한 게 뭐였나"였다. Vue2 시점에 누적된 의존성, 5MB짜리 폰트, 같은 데이터를 두 번 부르는 API 호출 — 더 빠른 코드보다 빼는 코드가 먼저였다.

관찰 노트

관찰 01

"느리다"는 불만이 홈 진입에 몰려 있었다

문제 정의의 출발점은 사용자 한 줄이었고, 그걸 LCP · Lighthouse 로 객관화했다

관찰 02

5MB 폰트가 첫 화면을 막고 있었다

Pretend 한 종이 1KB로 같은 시안을 표현 가능했다

관찰 03

Vue2 시점 의존성이 번들에 그대로 남아 있었다

Composition API 전환은 코드 정리의 명분이기도 했다

02.AI로 빠르게

더하기가 아니라 빼기.

결정 01

Vue2 → Vue3 마이그레이션

BeforeOptions API · 누적된 mixins · 번들에 쓰지 않는 코드

AfterComposition API · 경계 명확 · 트리쉐이킹 가능

tradeoff마이그레이션 비용 vs 장기 유지보수성 / 팀 학습

결정 02

Pretend 경량 폰트

Before5MB 폰트 — 첫 페인트 블로킹

After1KB · 같은 톤 유지

tradeoff브랜드 폰트 vs 첫 페인트 속도 (마케팅·디자인팀 설득 필요)

결정 03

JS 번들 다이어트

안 쓰는 라이브러리 제거 + 코드 스플리팅으로 번들 43% 감소. 진단 → 제거의 반복 사이클.

결정 04

API 중복 호출 정리

같은 endpoint를 다른 컴포넌트가 따로 부르던 패턴을 한 곳으로 통합. 네트워크 waterfall 단축.

03.지표로 증명

숫자로 잡히는 결과만.

LCP

3.03 → 1.07초

−65%

Lighthouse

33 → 65점

성능 점수

FCP

−51%

첫 페인트

JS 번들 / 폰트

−43% / 5MB → 1KB

리소스 다이어트

이 사례가 말하는 것

“성능을 기능으로 더하지 않고, 들어 있던 것에서 빼는 방식으로 끌어내리는 엔지니어.”

발견

사용자 불만("앱이 너무 느려요" · 홈 진입)을 LCP · Lighthouse 측정으로 객관화함

제작

Vue3 마이그·폰트·번들·API 4축에서 빼기 우선 결정

증명

LCP −65%, Lighthouse 33→65, 번들 −43%로 객관 측정 가능한 성과

연결 원칙Subtraction over AdditionEvidence-Driven

App Showcase

실제 동작하는 화면

기획·디자인·개발·운영을 한 손에서 통과시킨 결과.

More work