깨지면 사람보다 파이프라인이 먼저 알게 만든다.

기술 스택

앱 4 · 공통 패키지 3 · 원격 저장소 6을 단일 이미지로 통합하는 환경에서 쓰는 것들.

언어

TypeScriptJavaScript

프레임워크

React 18Vue 3

상태·데이터

TanStack QueryZustandPiniaWebSocketSSE

빌드

ViteWebpackesbuildModule Federationpnpm 모노레포

테스트·품질

VitestStorybook (portable stories)SonarQubedependency-cruiser

CI·인프라

GitLab CIJenkinsDockerKubernetes (on-prem 배포 대상)POSIX ShellSentry (소스맵 업로드 경로)

AI 개발 도구

LLM 게이트웨이 구축·운영Ollama (로컬 모델)Claude CodeCodex

빌드는 성공하는데 배포하면 죽는 결함, upstream에서 고쳤다

CI가 원리적으로 못 잡는 조용한 실패 — 이슈 등록부터 릴리스 반영까지 하루.

문제

eager: true shared 사용 시 프로덕션 빌드 산출물이 부팅 시점에 크래시. 빌드는 EXIT 0·경고 0으로 정상 종료 — 배포 후 런타임에만 드러난다.

접근

5개 버전 영향 매트릭스로 결함 도입 버전을 실측 정정(1.16.1 → 1.17.0). 재현 필요조건 3가지를 분리해 파일 6개 최소 재현으로 축소. 원인이 번들러가 아니라 플러그인의 정규식 후처리임을 산출물 수준에서 특정 — 네임스페이스 import가 "함수 호출이 없다"는 이유로 삭제되고 있었다.

결과

첫 수정안이 기존 테스트를 깨뜨리자 판정 기준 자체를 "호출되는가"에서 "참조되는가"로 교체. PR 머지 → v1.20.3 릴리스, upstream 테스트 1,017개 통과. "빌드 성공"과 "산출물이 동작함"은 다른 명제다.

// 플러그인 후처리: Vite preload 헬퍼를 지우려는 정규식이 모듈 경로를 보지 않고
  // `{ _ as X }` 형태의 import를 전부 매칭한 뒤, X의 "함수 호출"이 없으면 문장째 삭제한다.
  // 네임스페이스 import는 값으로만 참조되므로 여기 걸려 지워졌다.
  if (!hasCall(local, chunk)) dropImportStatement()          // 판정: 호출되는가

  // 수정(v1.20.3): 판정 기준을 "참조되는가"로 교체 — 기존 동작 보존, 결함만 제거
  if (!new RegExp(`\\b${local}\\b`).test(chunk)) dropImportStatement()

이종 번들러 Module Federation — 돌아가던 MFA에 Vite를 붙이고, 운영 데이터로 다시 설계했다

"Vite를 쓰려면 전체를 마이그레이션해야 한다"는 팀 내 전제를 POC 하나로 반박했다.

문제

기존 솔루션은 Webpack + Vue 3이고, 팀은 합류 전인 2023년부터 Webpack 내장 Module Federation으로 Remote를 운영하고 있었다. 신규 Host는 React + Vite로 만들려 했는데 "Vite를 쓰려면 전체를 Vite로 마이그레이션해야 한다"는 전제가 붙어 기술 전환 자체가 막혀 있었다.

접근

그 전제를 검증부터 했다 — @module-federation/vite로 Vite(Host) ↔ Webpack(Remote) 런타임 통신이 성립함을 POC로 먼저 입증하고 Host 측 Vite MF 도입을 주도했다. React Query와 Vue Query가 단일 Query Client를 공유하도록 통합해 두 프레임워크가 같은 API 캐시를 참조한다. 이후 타 팀 소유 Remote의 빌드 설정을 webpack 내장 ModuleFederationPlugin에서 @module-federation/enhanced(MF 2.0)로 전환하고 런타임을 0.21.6 → 2.8.1로 올렸으며, remote 로딩을 remoteEntry.js 직접 참조에서 mf-manifest.json 기반으로 이관했다 — manifest의 publicPath가 루트로 내려오는 환경은 런타임 플러그인으로 방어하고 remoteEntry 경로는 폴백으로 남겼다.

결과

2025년 3월 릴리스 이후 수십 개 고객사 프로덕션에서 장애 없이 가동 중. 전체 재작성 없이 신규는 Vite, 기존은 Webpack을 유지하는 점진적 경로를 확보한 것이 핵심 결과이고, 이 경로로 이후 Remote 2종이 각 팀 손으로 Vite에 이전했다. 개발 서버 HMR이 10초대에서 1초 미만으로 바뀐 것은 그 덕에 따라온 이득이다. 이어 6개월 운영 데이터로 런타임 유연성의 비용(파드 4개 상주·월 2~3건 통합 장애)을 정량화해 통합 빌드 아키텍처 전환을 설계했다 — 자신이 붙인 구조의 비용을 데이터로 측정해 배포 단위를 다시 그리는 것도 같은 사이클의 일부다.

통합 빌드 아키텍처 — 파드 4개를 1개로 합치고, 런타임 통합은 남겼다

마이크로 프론트엔드는 배포 빈도가 높은 조직에서 값을 낸다. 저빈도 온프레미스 모델에서는 아니었다.

문제

런타임 통합만으로 운영한 첫 6개월간 K8s 파드 4개 상주, 공통 컴포넌트 4중 중복, 월 2~3건 런타임 통합 장애가 남았다. 고객사 데이터센터에 직접 설치되는 제품이라 상주 파드 하나가 그대로 설치·운영 비용이다.

판단

운영 모니터링 데이터로 그 비용을 정량화해 판정 기준을 배포 빈도로 세웠다 — 독립 배포를 실제로 자주 하는 조직이라야 런타임 통합이 값을 낸다. 분기 단위로 릴리스하는 온프레미스 모델에서는 통합 빌드가 우수하다는 결론에 도달했고, 사내 표준으로 문서화했다.

조치

모노레포를 도입해 Remote 3종 + Host를 한 번에 빌드하고 산출물 전부를 단일 nginx 이미지에 적재했다. 바뀐 것은 배포 단위뿐이고 모듈 통합은 여전히 런타임 Module Federation이다 — 각 팀의 저장소와 독립 개발 흐름은 그대로 뒀다.

결과

앱별 독립 파드 4 → 단일 이미지·파드 1. 2026년 6~7월에 구현해 고객사 환경에 배포·운영 중이고, 같은 모노레포를 기반으로 솔루션 공통 디자인 시스템을 개발하고 있다. 아키텍처는 조직의 배포 빈도에 종속된다 — 유행이 아니라 그게 판정 기준이다.

스택

pnpm 모노레포Module FederationDockerKubernetesnginx

반복 운영을 구조로 없앴다 — 하루 두 번 멈추던 배포를 0으로

사람이 매번 확인하던 일을 파이프라인과 스크립트로 옮겼다.

문제

한 팀의 dev tip이 깨지면 전 팀 배포가 막혔다 — 통합 빌드 전면 차단이 하루 2회. 타 팀 브랜치 상태를 사람이 확인하고 배포를 조율하고 있었다.

접근

소스 핀으로 결합을 끊었다 — 트리거한 솔루션만 브랜치 최신, 나머지는 마지막 성공 커밋으로 고정. 파이프라인 로직을 검증 가능한 POSIX 셸로 분리해 특성화 테스트 65건으로 고정하고, 커밋 1개로 되돌릴 수 있는 킬 스위치를 함께 설계했다.

자동화

실패 사실만 알리던 CI 리포트를, SonarQube Web API로 깨진 품질 게이트 조건과 신규 이슈를 조회해 MR 댓글에 표로 붙이도록 바꿨다. 초안이던 에러 키워드 매칭이 실제 실패 로그 4종(build·lint·e2e·coverage)에서 새는 것을 확인하고 러너 구간 절단 방식으로 재설계.

결과

통합 빌드 전면 차단 하루 2회 → 0회. 사람이 기억하던 것을 파이프라인이 기억하게 만드는 것까지가 조치다.

스택

JenkinsGitLab CIDockerPOSIX ShellSonarQube APIModule Federation

CI 636초 → 158초 — 채택한 조치만큼 철회한 조치가 산출물

잡을 빠르게 만드는 것과 파이프라인을 빠르게 만드는 것은 다른 문제였다.

규명

정적분석 350초 중 269초가 분석이 아니라 파일 트리 순회 — pnpm 심볼릭 링크가 실파일 7.5만 개를 33만 경로로 부풀리고 있었다. CPU를 두 배로 늘려도 총시간이 그대로인 원인을 스케줄링(큐잉 76초 + 스테이지 직렬화 82초)으로 특정해 사장시간 82초 → 3초.

규율

직접 넣은 조치 1건을 실측으로 철회하고, 다른 1건은 산술이 반대임을 확인해 착수 전에 기각. 절감폭 −68%짜리 안은 "이후 모든 테스트가 실행 순서를 의식해야 하는 영구 부채"라는 이유로 의도적 보류. 대조군 표준편차가 목표 효과를 압도하자 "측정 불가"를 계산으로 판정하고 중단. 좋은 수치가 항상 채택 근거는 아니다.

결과

파이프라인 636초 → 158초(4.0배), 정적분석 잡 350초 → 80초(4.4배).

리포트를 받아 적지 않고 원본 데이터를 코드와 대조했다

「잠재결함 928건」이라는 정적분석 리포트에서 먼저 규명한 것은 도구의 측정 범위 결함이었다.

규명

분석 도구가 Vue SFC 251개(Understand 리포트 기준, 화면 계층 전부)를 한 건도 읽지 않았고 alias import를 해석하지 못한다는 측정 범위 결함을 리포트 원본 데이터 파싱으로 규명. 「미사용 함수」 1,320건 중 표본 10파일에서 진짜는 1건, 보안 경고 131건의 실질 취약점은 0건이었다.

조치

실제 조치 대상만 P0~P3로 추려 에픽 1건 + 티켓 14건으로 재구성. 라우터 순환을 끊는 내비게이션 late-binding 서비스를 도입하고, 계층 역전을 해소하고, 경계 ESLint 규칙이 루트 파일로 새던 우회 구멍을 막았다.

결과

벤더와 동일한 산식 기준으로 순환 의존 195건 → 3건, 기술부채비율 3.84% → 3.02%. 남은 3건은 Module Federation으로 타 팀 앱에 노출된 상태 미러 계약이라 의도한 잔여분으로 기록했다. 받은 결론이 아니라 원본 데이터가 판정 근거다.

스택

dependency-cruiserSonarQubeTypeScript ASTESLint

Storybook을 보여주는 도구에서 막아주는 게이트로

storybook build가 "번들이 만들어지는가"만 보고 스토리 런타임 실패를 통과시키던 구멍을 막았다.

문제

Storybook 두 벌 중 하나는 CI 검증도 배포도 없었고, storybook build는 번들 생성만 확인해 스토리 런타임 실패를 통과시켰다. 조사 중 공통 컴포넌트 패키지 테스트 23개가 CI에서 한 번도 돌지 않고 있었다는 사실도 발견했다 — 전 잡이 host만 --filter하고 있었다.

접근

중복 Storybook 한 벌을 철거하고(1,370줄) 설정만 있고 무동작인 죽은 의존성 3종을 제거했다. 렌더 스모크는 portable stories(composeStories)로 전 스토리를 jsdom에 실제 마운트한다 — 권장 경로 addon-vitest는 CI에 브라우저 인프라를 요구해 배제했다. 비주얼 회귀는 솔루션 4종 × 라이트/다크 8테마에서 컴포넌트 17개 대표 샷 136장으로 시작해 현재 264장까지 늘리고, 리눅스 컨테이너 baseline으로 고정했다.

검증

게이트가 실제로 무는지 역방향으로 확인했다 — 스토리를 고의로 throw 시켜 exit=1, 스킨 CSS 색 294개를 치환해 정확히 해당 조합 17장만 실패하고 나머지는 전부 통과함을 확인. 로컬 macOS에서는 안 드러나는 IPv6 바인딩 버그 (vite preview가 ::1에만 붙어 CI 컨테이너에서 타임아웃)도 사전에 검출했다. baseline 갱신 절차를 문서로 고정해 "스킨을 의도적으로 바꾸면 잡이 상시 빨간불"이 되는 방치 경로를 차단했다.

결과

공통 컴포넌트 패키지 CI 검증 0 → 전량, 비주얼 회귀 264장.

스택

Storybookportable storiesVitestjsdomGitLab CI

E2E 식별자 자동 부여 — 가장 자신 있던 결론을 스스로 반증했다

이미 발행한 문서를 정정하고 주입 축을 컴파일 타임으로 재설계. 남길 만한 것은 결과가 아니라 검증 과정이다.

반증

"호스트 1회 배선으로 타 팀 공수 70~85 인일 소거"라는 자기 결론을 적대적 검증으로 기각 — 런타임 정보로는 데이터 건수·권한·정렬에 흔들리지 않는 식별자를 만들 수 없다 (실측: 라우트당 동종 컴포넌트 26개 이상).

설계

Vue 컴파일러 nodeTransform으로 빌드 타임 주입. 템플릿 AST에서 업무 의미를 추출하는 9단계 폴백 + 위치 기반 스냅샷 병합으로 문구 수정이 테스트를 깨뜨리지 않게. 해결 안 되는 구간은 "해결했다" 대신 미보증 등급으로 정직하게 표기.

상태

Host 앱 범위로 설계·구현해 MR을 머지했으나 되돌렸고, 현재 운영에는 반영돼 있지 않다. 검증 빌드 측정치는 보증 등급 요소 자동 라벨 도달률 83.2%·식별자 충돌 0건이지만 프로덕션 성과로 주장하지 않는다. 남은 것은 과정이다 — 플러그인 테스트가 프로덕션과 다른 컴파일 옵션으로 돌던 사각지대를 발견하고 빌드 산출물 스냅샷 대조 검증을 추가해 숨은 결함 3건을 잡았다.

경력 · 교육

경력

오케스트로 · Frontend Engineer 2023.09 ~ 현재 온프레미스 클라우드 관리 플랫폼(B2B 어드민) — 프론트엔드 플랫폼·빌드 아키텍처 [금융 도메인] KB IQ+ 레거시 시스템 개선(2023.10 ~ 2023.12) — KB 통합관리포털, ActiveX 제거·표준 웹 전환, JSP + Vue.js

자이트론 · 자율주행 SW 개발팀 인턴 2020.09 ~ 2020.12 모형차 기반 자율주행 SW 개발 — YOLO 기반 사람 트래킹, 자율주행 대회 베이스코드 제작 (Python · ROS · AutoWare)

교육

삼성 청년 SW 아카데미(SSAFY) 8기 2022.07 ~ 2023.06 1년 과정 수료 — 기본 6개월 + 심화 6개월, 팀 프로젝트 4건

강남대학교 IoT전자공학과 2014.03 ~ 2021.02 고용노동부장관상 수상(AI 스마트 양식 시스템 '만선') · 한국정보처리학회 논문 게재

자격

SQLD SQL 개발자 · 2022.12