@ GS칼텍스2024Full-Stack
GS Caltex VOC AI Dashboard
Sole architect and engineer of the VOC AI Dashboard, manual review replaced by 1,000+/day auto-classification across 4 integrated channels.
View details
AI Product Engineer
★ Case 03 / 5Product Engineer Donghyun Kang
GS Caltex EnergyPlus App (Performance)
Home-screen entry took over 3 seconds; pulled it down to 1.
GS칼텍스Frontend2024.10 ~ In progress
01.Discover
"The app feels too slow" — the most common complaint at home-screen entry.
The complaint was one line. "The app feels too slow." The moment people pointed to was home-screen entry — the few seconds between opening the app and the first screen filling in. Instead of guessing, I measured: Lighthouse 33, LCP 3.03s. What users called "slow" was the time the first paint was blocked.
The answer was not "build the features better" but "which of the things already in here are actually needed?" Dependencies left over from the Vue 2 era, a 5MB font, API calls fetching the same data twice — removing code came before writing faster code.
Field notes
Note 01
The "slow" complaint clustered around home-screen entry
The problem started with one user sentence and got objectified through LCP and Lighthouse.
Note 02
A 5MB font was blocking the first screen
One Pretend variant at 1KB could carry the same design.
Note 03
Vue 2-era dependencies were still sitting in the bundle
Moving to the Composition API was also the excuse to clean the code up.
02.Build with AI
Subtract, do not add.
Decision 01
Vue 2 → Vue 3 migration
BeforeOptions API, layered-on mixins, dead code in the bundle
AfterComposition API, clearer boundaries, tree-shakeable
tradeoffMigration cost vs. long-term maintainability and team learning
Decision 02
Lightweight Pretend font
Before5MB font — blocking the first paint
After1KB, same tone preserved
tradeoffBrand font vs. first-paint speed — marketing and design had to be brought along
Decision 03
JS bundle diet
Removed unused libraries and added code splitting; bundle down 43%. A repeating cycle of diagnose, then remove.
Decision 04
Dedup the duplicate API calls
Different components were hitting the same endpoint separately; consolidated those into one call. The network waterfall got shorter.
03.Prove with metrics
Only the results you can read off an instrument.
LCP
3.03 → 1.07s
−65%
Lighthouse
33 → 65
Performance score
FCP
−51%
First paint
JS bundle / font
−43% / 5MB → 1KB
Resource diet
What this case is really about
“An engineer who pulls performance down by subtracting from what is already there, not by adding more.”
Discover
Turned the "app feels too slow" complaint on the home screen into measurable LCP and Lighthouse numbers.
Build
Across Vue 3 migration, fonts, bundle, and API calls, picked the subtract-first option each time.
Prove
LCP down 65%, Lighthouse 33 → 65, bundle down 43% — all on the same instruments.
Linked principlesSubtraction over AdditionEvidence-Driven
App Showcase
Real screens, in production
What happens when product, design, dev, and ops all run through one pair of hands.
More work
