배경
PPCWIZ는 아마존 셀러의 스폰서드 광고를 규칙 기반으로 분석하고 입찰가를 자동 조정하는 SaaS다. 합류 시점에 1세대 프론트가 있었지만 이어받지 않기로 했고, package.json만 있는 빈 저장소에서 webpack/babel 빌드 환경부터 직접 구축해 2세대 SPA(wiz-view)를 처음부터 만들었다. 디자인 시스템이 따로 없어 UI/UX 디자인도 Sketch로 직접 수행했다.
측정으로 검증하는 성능 개선
초기 로딩이 5초에 달하는 문제를 webpack-bundle-analyzer로 병목부터 특정했다. 코드 스플리팅 두 방식(React.lazy, react-loadable), moment 로케일과 lodash 최적화, antd 아이콘 alias 치환을 적용할 때마다 Chrome DevTools 3G 스로틀링으로 직접 측정하는 사이클을 반복해 1.2초까지 단축했다.
혼자 만드는 규모가 커질수록 패턴이 필요했다. 범용 UI 컴포넌트 40여 개와 HOC 8종, makeStoreHooks(훅 팩토리)·createPromiseThunk(제네릭 비동기 thunk)를 직접 설계했고, 이 기준들을 CSS/SCSS 가이드·React 스타일 가이드 등 약 6,300줄의 팀 문서로 남겼다.

