최기환

LangGraph durable execution과 PostgreSQL 체크포인트를 적용해, 에이전트가 사람 승인 대기나 서버 중단 후에도 상태를 보존하고 재개할 수 있는 구조를 구축했습니다.

automation 라벨이 붙은 이슈를 triage → clarification → work → publish 4단계로 자동 해결하는 상태 머신 기반 파이프라인을 설계했습니다.

@autobot 멘션 시 의도를 분류해 코드 리뷰, QA, 문서화 등 적합한 전문가 에이전트로 라우팅하는 멀티에이전트 시스템을 구현했습니다.

MR 단위 공유 메모리와 discussion 단위 체크포인트를 분리해, 이전 처리 결과는 같은 MR 안에서 재사용하면서 승인·재개 신호는 원래 discussion에서만 처리되도록 만들었습니다.

Work agent가 실행 계획의 target files와 진단 단계의 suspicious files를 벗어나 수정하지 않도록 Plan Adherence 미들웨어를 추가하고, 범위 밖 파일 편집과 위험한 shell command 차단을 테스트로 고정했습니다.

웹훅 동시 처리를 Piscina 워커 풀로 병렬화하고, Langfuse(LLM 트레이싱) · Sentry · OpenTelemetry를 통합해 에이전트 동작 전반의 추적·디버깅 경로를 확보했습니다.

이슈·MR·배포·문서 근거를 SQL rollup으로 집계하는 broad-list 질의 경로를 추가하고, dispatch·manifest·federated search 테스트로 라우팅 계약을 검증했습니다.

검색 응답 row별 score와 rerank/diversify keep·drop reason을 trace에 기록해, 검색 품질 문제를 결과 테이블에서 판단 근거까지 따라갈 수 있도록 만들었습니다.

trace에서 발견한 품질 이슈를 재현 케이스로 승격하는 API와 UI를 추가해, 일회성 디버깅을 회귀 테스트 후보로 전환할 수 있는 흐름을 마련했습니다.

TaskAnalyzer 채팅에서 GraphRAG 응답(answer·citations·graph·trace_events·tool_calls)을 SSE 이벤트로 정규화하고, 근거가 있는 답변은 별도 LLM 재작성 없이 인용·그래프·도구 실행 상태와 함께 렌더링하도록 테스트로 고정했습니다.

OpenAPI 3.0.x 중심의 스키마 문서를 파싱하고 Swagger 2.0 문서 로드를 허용해 구조화된 스키마 정보를 반환하는 도구를 구현했습니다. 초기에는 MCP 서버로 운영했으나, 프로젝트 내장 스킬(.agents/skills/)로 전환해 외부 의존성을 제거하고 개발 환경에 직접 통합했습니다.

전체 스펙을 매번 조회하는 방식에서 스냅샷 기반 diff 비교로 전환하고, 포맷 차이를 정규화해 실질적인 API 변경(breaking/non-breaking)만 자동 분류하도록 개선했습니다.

AI 에이전트가 API 명세 변경을 자동 감지하고 영향 범위를 분석해 대응하는 흐름을 구축함으로써, 변경 대응에 드는 수동 작업을 제거했습니다.

GitLab MCP(코드 접근), Figma MCP(디자인 연계), Playwright MCP(E2E 테스트), Context7(최신 문서 조회), Sequential Thinking(추론 보조), Serena, task-master, Chrome DevTools 등 목적별 도구를 조합해 개발 각 단계를 AI가 지원하는 흐름으로 연결했습니다.

MaxGauge-VI 페이지 구현 자동화 스킬에서 기획·디자인 Figma를 REST API로 병렬 분석하고, source contract와 DOM 텍스트 시그니처를 기준으로 visual eval/repair 루프를 실행해 에이전트 산출물을 스크린샷 diff와 요구사항 텍스트로 검증하도록 정리했습니다.

팀 공통 워크플로우 문서를 작성해 MCP 설정 방법부터 각 도구의 적용 시점까지 정리함으로써, 팀원이 설정 없이 바로 동일한 AI 환경에서 시작할 수 있도록 도입 장벽을 낮췄습니다.

Linear GraphQL 페이지네이션, 프로젝트 slug 목록, 선택적 assignee, 필수 라벨, blocker, active/terminal state 필터를 조합해 실행 후보 이슈를 정규화하는 트래커 어댑터를 구현했습니다.

GenServer 오케스트레이터가 이슈 claim, 상태별 동시성 제한, worker monitor, retry backoff, running issue reconciliation, stall 감지, 완료 워크스페이스 정리를 한 곳에서 조정하도록 설계했습니다.

워크플로우 설정의 필수 라벨·terminal state·sandbox policy 검증과 max turns 종료·retry queue 보존 경로를 ExUnit 테스트로 고정해 잘못된 입력이나 장기 실행 이슈가 오케스트레이터 상태를 흐리지 않도록 했습니다.

이슈 식별자를 sanitize한 워크스페이스를 만들고, after_create·before_run·after_run·before_remove hook의 fatal/best-effort 동작을 분리해 워크스페이스 준비 책임을 설정 파일로 위임했습니다.

Codex app-server JSON-RPC adapter가 session/turn 요청과 비동기 이벤트를 매핑하고, session id·turn count·token usage·rate limit 이벤트를 오케스트레이터 snapshot에 반영하도록 ExUnit 테스트로 고정했습니다.

useBufferedSnapshot으로 인터랙션 중 라이브 스냅샷을 고정하고, useFrozenLayout과 startTransition으로 레이아웃·갱신 우선순위를 분리해 드래그 30틱 기준 위젯 누적 리렌더를 150회에서 5회로 줄였습니다.

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

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

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

위젯 빌더를 line/area/bar/stackedBar/lineBar/scatter/pie/scoreboard/table/text/image 11개 시각화 플러그인과 공통 step/schema 흐름으로 재구성해 대상 인스턴스 선택, 메트릭 입력, 시각화 전환의 확장 지점을 코드화했습니다.

SQL·Object·Session 상세 화면을 PageLayout detail 타입과 DetailShell 헤더 흐름으로 재구성해 앵커 탭, 접힘 사이드바, 상세 식별자 표시를 공통 레이아웃 계약으로 묶었습니다.

Feature Flag 기반으로 대시보드 변경을 고객사별로 격리해 배포 영향 범위를 제어했습니다.

통합 테스트로 기존 동작을 고정한 뒤 table 태그에서 div 기반 렌더링으로 마이그레이션했습니다. 셀 배치를 absolute에서 Row absolute + Cell flex 구조로 재설계해 열 조작과 레이아웃이 일치하도록 맞췄습니다.

행 가상화, 이벤트 위임, React.memo 적용 후 10,000행 데모에서 폴링 갱신 CPU 피크 58%→28%, JS 힙 138MB→98MB 개선을 측정했습니다.

행 가상화로 실제 DOM 마운트를 뷰포트 범위로 제한하고, React.memo에 값 기반 비교 함수를 적용해 스크롤 중 불필요한 리렌더를 억제했습니다.

셀·행마다 개별 핸들러를 붙이는 대신 테이블 레벨 이벤트 위임을 적용해 핸들러 수와 상호작용 처리 비용을 낮췄습니다.

검색·정렬·페이지네이션 옵션을 query 상태 모델로 정규화하는 기반을 만들고, 컬럼 가시성 변경·고정 컬럼 재마운트·행 DnD 모드 조합에서 상태가 어긋나지 않도록 단위 테스트와 브라우저 테스트로 회귀 조건을 고정했습니다.

컬럼 편집 모달을 표시/숨김 transfer-list로 재구성하고, 검색·순서 이동·pin 고정·미저장 변경 확인 흐름을 분리했습니다. column edit 상태·적용·reorder 단위 테스트와 ColumnEditing Storybook 브라우저·VRT 테스트로 컬럼 편집 회귀를 고정했습니다.

내장 TableFilter를 TanStack Table feature로 추가해 문자열·숫자 컬럼 조건, AND/OR 조합, 내부·외부 facet 값 추천, 필터 태그 UI를 지원하고, 상태 모델 단위 테스트와 Storybook 브라우저 테스트로 필터 추가·조합·추천값 회귀를 고정했습니다.

Table.Toolbar/Content/Footer 컴파운드 API를 추가해 제목·검색·페이지네이션·컬럼 편집·내보내기·복사 위젯을 JSX 슬롯으로 조합하도록 열고, 기존 options 경로와 우선순위·검색 동기화·액션 트리거를 Compound Storybook 브라우저 테스트로 고정했습니다.

v1.13.0에서 행 콘텐츠 확장 패널을 가상화 표시 리스트의 별도 panel 아이템으로 분리하고, 안정 키 기반 측정 캐시로 펼침/접힘 후 다른 행 높이가 오염되지 않게 했습니다. rowDisplayMapping 단위 테스트와 ExpandableContent 브라우저 테스트로 패널 렌더·집계 제외·측정 회귀를 고정했습니다.

medium/small Table Size 옵션을 SSoT 토큰으로 분리해 행·헤더·푸터 높이와 built-in 셀 포맷 밀도를 함께 동기화하고, Size 브라우저 테스트와 검색 필터 memo 경계 테스트로 디자인 밀도·검색 조합 회귀를 고정했습니다.

CodeText 셀 포맷을 copyText·href·onCopy·onNavigate 액션 모델로 확장해 SQL·명령어 셀의 텍스트 복사와 상세 이동을 분리하고, CellFormats·RowClick 브라우저 테스트로 행 클릭과 셀 액션 충돌을 고정했습니다.

셀 툴팁을 브라우저 title 속성에서 @exem-ui/react Tooltip 합성으로 전환해 hover 지연·최대 폭·긴 문자열 줄바꿈을 일관화하고, TooltipMaxLength 브라우저 테스트로 잘림/무제한 노출과 폭 제한 회귀를 고정했습니다.

UI와 로직을 헤드리스 구조로 분리하고, 기능별 descriptor와 columnContract 컴파일 단계로 데이터·그룹·유틸리티 컬럼의 검색·필터·정렬·DnD 대상 여부를 표준화했습니다. Storybook 시나리오, 단위 테스트, 브라우저 통합 테스트로 컬럼 가시성·복사·Excel export·DnD 조합 회귀를 관리했습니다.

PR마다 복잡도·코드 중복·함수 길이 등 7개 품질 지표를 CI에서 자동 검사해 리뷰 전 품질 기준선을 보장하는 게이트를 구축했습니다.

TailwindCSS v4, Vite 8, Storybook 10.3 전환과 npm 스코프 마이그레이션을 병행했습니다. 이후 Atlaskit DnD 의존성을 제거하고 자체 Pointer Events 기반 DnD 엔진으로 열·행 재정렬 흐름을 통합했습니다.

전역 Zustand 스토어를 Context API 기반 지역 스토어로 전환하고, 스토어 생성을 팩토리 함수로 추상화해 소비 코드가 특정 스토어 구현보다 Provider 경계에 의존하도록 정리했습니다.

Zustand persist 미들웨어의 저장 엔진을 인터페이스로 추상화해, 화면 로직을 유지한 채 로컬 스토리지 기반 레이아웃 저장을 DB 영구 저장으로 교체할 수 있게 만들었습니다.

line·area·bar·scatter·table 5개 차트 타입을 어댑터/레지스트리 구조로 묶어, 신규 위젯 추가 시 공통 빌더를 건드리지 않고 해당 타입 모듈만 확장하도록 재설계했습니다.

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

SQL Detail·Text/Plan/Bind·Object Detail·Search SQL·Parallel Session 등 SQL Analysis 전체 화면군을 레거시에서 차세대 FSD 구조로 전담 마이그레이션했습니다.

보안 취약점 자동 분석(Secret Detection), 테스트 커버리지 리포트, MR별 Storybook 프리뷰 환경을 포함한 GitLab CI/CD 파이프라인을 구축했습니다.

MSW 기반 API 모킹 환경을 도입해 백엔드 의존 없는 개발 테스트 흐름을 체계화하고, Sentry 에러 모니터링을 통합했습니다.

mfo_v5_starter에 레포·서브모듈·환경 감지·config.json 생성·실행 절차를 중앙화하고, PJS/RTS/Colima/Jetty 호환성 이슈를 코드로 고정해 레거시 개발 환경을 pnpm run dev 중심의 재현 가능한 로컬 풀스택 흐름으로 정리했습니다.

Chrome DevTools 기반 Sencha/ExtJS 진단 확장의 MV3 스캐폴드와 frame/runtime probe, panel shell까지 구현하고, 실제 SQL monitor·IDE 연계는 후속 범위로 분리했습니다.

레거시 SQL 참조·실행 payload를 Oracle/PostgreSQL 기준으로 점검하는 sql:report와 sql:lint-runtime 흐름을 만들고, 오류·경고·DB 분기·소스 경로별로 필터링 가능한 브라우저 리포트 UI까지 연결했습니다.

Mock DB 기반 E2E를 기능 영역별 스위트와 MR 전용 scenario/resolver 레이어로 재구성하고, 250개 MR 후보를 브라우저 경로·REST/WS ledger clean gate·리포트 아티팩트로 추적하는 회귀 하네스를 정비했습니다.

@exem/design-studio 코어 패키지와 Design Studio 템플릿에 멀티 프로젝트 워크스페이스, page/i18n/screen-spec/policy 문서와 페이지별 MSW operations/handler 레지스트리 스캐폴딩·검증, pageOnlyCommit 가드, MockReady 런타임, iframe 미리보기·SNB 라우팅을 묶어 실제 프로젝트에서 dependency로 재사용 가능한 페이지 단위 검증 하네스로 공용화했습니다.

Playwright로 실제 렌더된 테이블 헤더를 읽어 screen-spec drift를 검출·동기화하는 스크립트를 만들고, SQL 분석 13개 화면의 screen-spec.yaml과 table-columns.csv를 실제 화면 기준으로 정합시켰습니다.

Design Studio workspace에 lock-service 기반 page lock과 Claude terminal bridge의 agent_runs 스냅샷·heartbeat·stale busy-run 만료, session worktree manager, per-session preview proxy를 연결하고, IA tree의 페이지별 에이전트 상태와 원격 생성·삭제 표시를 Fastify·브라우저 테스트로 고정했습니다.

Design Studio 문서 저장을 로컬 커밋과 백그라운드 공유로 분리하고, 3-way sync·기획자 입력 보존·실패/timeout 표면화·session worktree 회수 race와 지속형 동기화 카드·PTY 진행 문구를 테스트로 고정해 병렬 에이전트 작업에서 변경 상태가 조용히 사라지지 않도록 sync/save 계약을 코드화했습니다.

Vitest Browser와 Playwright 기반 통합 테스트로 preview shell bridge, same-origin iframe navigation, page 파라미터 정규화, 디자인 인스펙터 속성 탐색·드래그/리사이즈 핸들, 디자이너 노트 handoff와 JSX source-line 매핑을 고정해 Design Studio 미리보기·핸드오프 회귀를 코드 레벨에서 추적했습니다.

WebSocket 공통 모듈에 JSDoc과 사용 예시를 추가해 호출 규칙과 응답 해석 기준을 문서화하고, 화면별 추측에 의존하던 통신 로직 분석 부담을 줄였습니다.

브라우저 기반 검증 중 발견된 RTM 프레임 초기화 순서, SQL Elapsed Time 필터 값 shape, 설정 화면의 빈 선택 상태 예외를 추적해 초기화 순서 보정과 입력 정규화로 레거시 ExtJS 런타임 오류를 줄였습니다.