추연호 — 프론트엔드 엔지니어

About

6년차 프론트엔드 엔지니어입니다. 제품을 더 빠르고 견고하게 만들 수 있는 환경과 도구를 만들어 왔습니다. 여러 조직과 수십 개 제품이 함께 쓰는 사내 표준 프레임워크와 Vue 2와 3를 동시에 지원하는 디자인시스템을 구축했습니다. 20개 이상의 공통 패키지를 운영하며, 공개 API를 어떻게 설계하고, 기존 제품을 깨뜨리지 않으면서 기능을 확장하는 방법, 변경사항을 전파하고 제품에 자연스럽게 반영되도록 하는 방법들을 터득해왔습니다. 공통적인 문제를 발견하고, 해결 방법을 모듈화하여 제품 개발자의 경험을 개선하는 일에 보람을 느낍니다.

Impacts

30+ 제품

20여 개 공용 패키지를 30여 개 제품이 소비하는 사내 표준 생태계 구축

팀 내부 11개 제품과 외부 3개 조직, 19개 제품으로 확산 — auth · analytics · i18n · logger · api-client · api-sdk 등 24종 패키지와 9개의 공용 설정 패키지를 설계·배포. 사내 패키지 레지스트리와 릴리즈 채널 및 운영 정책 수립

As Code

품질 규율과 인프라를 개인의 손이 아니라 코드·파이프라인으로 강제하는 구조로 전환

필수 CI 게이트를 정의하고 아키텍처·타입·슬라이스 경계를 파이프라인에서 차단 — 기존 위반은 baseline으로 동결하고 신규 위반을 강제 · CloudFront 캐시 정책·Sentry 설정 등 콘솔에서 수동 관리하던 인프라를 Terraform으로 코드화해 변경을 코드 리뷰로 추적하고 재현·롤백 가능하게 함

Vue 2 / 3

Vue 2 / 3를 동시 지원하는 디자인 시스템으로 제품 채택 범위를 확대

Vue 2→3 전환기로, 제품마다 쓰는 Vue 버전이 달랐던 상황 — 공용 컴포넌트 23종의 API를 버전 중립적으로 설계하고 단일 코드베이스가 두 버전을 모두 지원하게 해, Vue 버전 제약으로 공용 UI를 사용할 수 없던 레거시 제품까지 확산

무배포 구성

Server-Driven UI로 화면 구성을 프론트 재배포 없이 인하우스에서 제어

기존 UI 구성을 바꾸기 위해, 프론트 소스 수정 및 재배포가 필요했던 것을 Server-Driven UI 으로 이관 — 국가별·언어별 기준에 따라 노출 UI를 운영자가 직접 설정

20 → 80

스토어 SSR 전환으로 Lighthouse 성능을 4배 개선

레거시 CSR 코드 베이스에서 상태 있는 싱글톤의 교차 요청 상태 오염(Cross-Request State Pollution) 문제를 근본적으로 해결 · CloudFront 캐시 정책을 활용하여 성능 개선

−33%

모노레포 CI 빌드 시간을 199초 → 133초로 단축

빌드 산출물 대신 소스를 직접 참조하는 Source Exports로 전환 — 번들 동등성(−0.98kB)을 검증해 회귀 없음을 확인하고 온보딩 빌드 실패를 제거