최기환

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 런타임 오류를 줄였습니다.

Header, Positioning, Core Impact, Career, Case Study, Skills 등 12개 이력서 블록을 자가 등록 registry 패턴으로 구성해 새 블록 추가가 독립적인 폴더 단위 변경으로 끝나도록 설계했습니다.

A4 캔버스와 PDF 출력이 같은 디자인 토큰과 print CSS를 공유하도록 정리하고, 페이지 크기 고정·여러 페이지 출력·오버플로우 경고를 붙여 화면 미리보기와 출력 결과의 차이를 줄였습니다.

Zustand와 Immer 기반 상태 모델에 IndexedDB 저장, 스냅샷, 자동 백업, 저장 상태 표시를 연결해 로컬 작성 도구에서도 데이터 손실과 편집 흐름 끊김을 줄였습니다.

@dnd-kit 기반 블록 드롭·재정렬, 다중 블록 선택·이동, bulk removal을 구현해 이력서 내용을 코드 수정 없이 화면에서 재구성할 수 있게 했습니다.

링크 alias·favicon 칩, 헤더 연락처 자동 감지, JSON copy/paste, 압축 URL 기반 read-only A4 preview를 추가해 이력서 버전 재사용과 공유 흐름을 확장했습니다.