최기환

GitLab Webhook -> n8n 워크플로우 -> MCP 기반 diff 수집 -> AI Agent -> GitLab API 포스팅 흐름으로 자동화했습니다.

/review 커맨드에 React Clean Code Scorecard 5개 지표(CC, LoC, Props, Drilling, Hooks)를 반영해 정량 리포트를 생성하도록 구성했습니다.

실제 diff 범위를 벗어난 추측을 제한하는 anti-hallucination 규칙을 적용해 결과 신뢰성을 관리했습니다.

반복적인 MR 문서 작성과 리뷰 보조 작업을 줄이는 것을 운영 목표로 두고 단계적으로 확장하고 있습니다.

Git 동기화 -> Markdown 파싱 -> 임베딩 생성 -> 벡터 인덱싱 배치를 구성해 150개 문서를 주기적으로 반영했습니다.

Top-K 10 기반 검색 경로를 운영해 벡터 검색 응답을 100ms 이하로 유지했습니다.

세션 문맥 25개 메시지를 유지하고, 한국어/영어/일본어 3개 언어 질의를 지원하도록 API를 설계했습니다.

ClickUp 문서 오전 자동 동기화와 주간 리포트 자동 발행을 추가해 운영 편의성을 높였습니다.

component-screenshot, figma-to-code, design-check, figma-design-pipeline의 4단계 워크플로우를 하나의 실행 경로로 통합했습니다.

Playwright 기반 Storybook 스크린샷과 pixelmatch 지표를 함께 사용해 정량/정성 검증 리포트를 생성했습니다.

Critical/Major 이슈가 남을 경우 최대 3회까지 자동 개선 루프를 재실행하도록 구성했습니다.

MCP 도구 호출에서 OpenAPI 문서를 직접 읽고 구조화된 스키마 정보를 반환하도록 서버를 구현했습니다.

패키지를 npm에 배포해 재사용 가능한 형태로 운영했습니다: https://www.npmjs.com/package/swagger-parser-mcp-server

내부 GitLab 기반 워크플로우와 연결해 API 문서 의존 분석 자동화에 활용했습니다.

GitLab MCP, Figma MCP, Playwright MCP, Context7, Sequential Thinking, Serena, task-master, Chrome DevTools 등 목적별 도구를 조합했습니다.

코드 리뷰 자동화, 디자인-코드 검증, E2E 테스트 연계를 하나의 개발 흐름으로 맞췄습니다.

팀 공통 워크플로우 문서를 정리해 도입 장벽을 낮추고 운영 일관성을 확보했습니다.

restart/start/stop 인터페이스의 PollingManager로 화면별 타이머를 묶어 선언적으로 폴링 주기를 제어하도록 일원화했습니다.

서로 영향을 주는 필터·조회 상태와 반복되던 저장/복원 로직을 중앙 저장소와 버전 기반 마이그레이션으로 정리해 수정 범위를 국소화했습니다.

API 전면 교체 시점에 Vue 연장 대신 React와 사내 디자인 시스템 기반으로 재구축해 구조 부채 누적을 줄였습니다.

카드형 2-depth 구조를 고밀도 그리드 1-depth 허브로 바꿔 한 화면 비교와 즉시 RTM/PA 이동 흐름을 확보했습니다.

useFrozenData 기반 데이터 스냅샷 유지, useDeferredValue 저우선 렌더, memo 최적화로 렌더 총량을 96.7% 줄이고 INP를 안정화했습니다.

table 태그 기반 구조는 virtualization, 고정 컬럼, 그룹 헤더, 리사이즈 조합에서 레이아웃 제약이 커 통합 테스트로 기존 동작을 고정한 뒤 div 기반 렌더링으로 마이그레이션했습니다.

Cell absolute 1차 구조에서 Row absolute + Cell flex 2차 구조로 재설계해 열 조작 동작과 레이아웃 제약을 일치시켰고, DOM 노드 90% 감소와 리사이즈 처리 22ms→0.5ms 개선을 확인했습니다.

행 가상화(virtualization)로 DOM 마운트 범위를 뷰포트 중심으로 제한하고, React.memo + areTableRowPropsEqual 비교 함수로 VirtualItem을 참조가 아닌 index/start/size 값으로 비교해 불필요한 리렌더를 줄였습니다.

columnSizing은 안정적으로 전달하고 셀·행 개별 상호작용 대신 테이블 레벨 이벤트 위임을 적용해 핸들러 수와 상호작용 처리 비용을 낮췄습니다.

Core - State - UI 계층 분리와 기능 호환표를 기준으로 Storybook 시나리오, 브라우저 통합 테스트, 회귀 타깃 문서를 함께 운영해 기능 조합 회귀를 관리했습니다.

line/area/bar/scatter/table 5개 차트 타입을 어댑터/레지스트리 구조로 묶고, 설정 폼·zod 검증 스키마·미리보기 컴포넌트를 타입별 모듈로 분리해 신규 위젯 추가 시 공통 빌더가 아니라 해당 타입만 확장하도록 재설계했습니다.

불필요한 전역 Zustand 스토어 20개를 Context API 기반 지역 스토어로 전환하고 storeFactory 로 Provider, selector hook, store API, persist/global 옵션을 단일 규약으로 추상화해 초기화 리렌더 50% 감소, 전역 상태 사이드 이펙트 제거, 보일러플레이트 70% 감소를 이끌었습니다.

webEnv 를 StateStorage(getItem/setItem/removeItem) 인터페이스로 추상화해 Zustand persist 미들웨어의 저장 엔진만 교체할 수 있게 만들었고, 기존 저장 로직을 유지한 채 로컬 스토리지 기반 대시보드 레이아웃 저장을 DB 영구 저장으로 하루 만에 마이그레이션했습니다.

One SQL Detail, Plan Change, SQL Scatter, Monaco 기반 SQL 에디터 등 SQL 분석 핵심 화면을 구현해 실행 계획 비교, diff 시트, 바인드 변수 하이라이팅·값 치환, 드릴다운 같은 분석 UX를 제품 기능으로 연결했습니다.

팀 공용 브라우저 진단 도구를 구축해 console.log 없이 SQL 응답을 실시간으로 확인하고 컴포넌트를 IDE로 바로 추적할 수 있게 해, 레거시 ExtJS 이슈의 원인 추적 진입 비용을 낮췄습니다.

전역 WS·IMXWS 공통 모듈에 JSDoc과 사용 예시 링크를 추가해 호출 규칙과 응답 해석 기준을 문서화하면서, 화면별 추측에 의존하던 통신 로직 분석 비용을 줄였습니다.

ExtJS 이벤트 콜백에서 function 문맥으로 this가 깨지던 지점을 추적해 arrow function으로 고정하고, 인스턴스 트리 선택 시 RTS 상태 검증이 잘못되던 문제를 바로잡았습니다.

mfo_v5_starter에 레포·서브모듈·환경 감지·config.json 생성·실행 절차를 중앙화해, 수 시간 걸리던 레거시 환경 셋업을 몇 분 내 시작 가능한 흐름으로 줄였습니다.