최기환

UI 아키텍처 개편

Problem 기존의 카드형 UI는 정보 밀도가 낮아, Oracle, Tibero 등 이기종 DB의 다수 인스턴스 상태를 한눈에 파악하고 제품(MaxGauge)으로 연계하려는 고객의 니즈를 충족시키기 어려움.

Action 정보 밀도가 높은 데이터 그리드 기반 뷰로 전면 개편하고, 사내 디자인 시스템을 적용하여 UI 일관성 확보 및 가독성 개선. 통합 테스트를 선행 작성하여 레거시 기능의 안전한 마이그레이션 보장.

Result 수십 개의 인스턴스 상태를 한눈에 관제 가능한 환경 구현으로 고객 만족도 증대.

---

데이터 관리 표준화

Problem 분산된 폴링 로직과 레거시 API 간의 강한 결합으로 인해 네트워크 비효율 발생 및 유지보수 난이도 상승.

Action TanStack Query 기반의 아키텍처를 적용하여 비동기 데이터 관리를 표준화 및 복잡한 폴링 로직 제거.

Result 선언적인 데이터 페칭 구조 도입으로 코드 복잡도 최소화 및 유지보수성 향상.

렌더링 아키텍처 개선

Problem <table> 태그의 테이블 모델 렌더링 특성으로 인해 레이아웃 격리가 불가능하여, 컬럼 리사이징 시 전체 리플로우 발생 및 가상화 적용에 기술적 제약 존재.

Action <table>에서 div + Absolute Positioning 기반으로 전환하여 레이아웃 격리 및 렌더링 독립성 확보. 9분할 그리드 구조로 행/열 동시 고정 및 섹션 간 스크롤 동기화 구현. ARIA 어트리뷰트로 접근성 보완.

Result 가상화 및 메모이제이션을 통해 렌더링 성능 90% 개선. 트리 구조, 셀 병합, Sticky Tree, 행/열 고정 등 20개 이상 기능 구현.

---

useEffect 의존성 해소

Problem 비제어 방식으로만 동작하며 내부 상태 동기화를 위해 useEffect에 과도하게 의존하는 구조로, 기능 추가 시 사이드 이펙트 관리 난이도가 급증.

Action 제어/비제어 패턴을 모두 지원하도록 설계를 변경하여, 컴포넌트 사용의 일관성을 확보하고 외부에서 상태를 주입받을 수 있는 확장성 마련.

Result 상태 동기화를 위해 남발되던 불필요한 useEffect 100% 제거하고 예측 가능한 데이터 흐름 구축.

---

기능 복잡성 관리

Problem 가상화, 정렬, 필터링, 행/열 고정, 트리 확장, Sticky Tree 등 수많은 기능이 복잡하게 얽혀 있어 기능 조합의 호환성 파악이 어려웠고, 스펙 관리 난이도가 급증.

Action 기능 호환성 매트릭스(대칭표)를 도입하여 기능 간 호환 여부를 한눈에 파악할 수 있는 스펙 관리 체계 구축. 이를 기반으로 테스트 케이스와 문서를 체계적으로 관리.

Result 500개 이상의 통합 테스트 작성으로 회귀 방지 및 안정성 확보.

컴포넌트 구현 방식 통일

Problem 작업자마다 상이한 컴포넌트 구현 방식으로 인해 협업 비효율 및 유지보수 복잡도 증가.

Action Compound Component 패턴과 CVA를 도입하여 팀 내 컴포넌트 구현 방식을 통일하고 확장성 확보.

Result 일관된 컴포넌트 API로 팀 내 협업 효율성 향상 및 유지보수 복잡도 감소.

---

디자인 토큰 마이그레이션

Problem 코드베이스 전반에 하드코딩된 원시 값이 산재하여 테마 적용 불가능.

Action jscodeshift를 활용해 원시 값을 의미론적 토큰으로 일괄 변환(AST)하고, ESLint 커스텀 룰을 적용해 원시 값 사용을 컴파일 단계에 감지해 에러를 발생시켜 안전하게 이관.

Result 원시 토큰 기반으로 작성된 모든 코드를 의미론적 토큰 기반으로 마이그레이션. ESLint 기반의 강제성 부여로 디자인 토큰 누락률 0% 유지.

---

Storybook 자동화

Problem Storybook 작성에 많은 시간이 소요되며, 작성자에 따라 산출물의 품질과 양식이 달라지는 문제.

Action Storybook 작성을 위한 공통 프롬프트 규칙을 정립하여 입력값에 따른 비결정성을 제거하고 일관된 문서 생성 유도.

Result Storybook 작성 시간을 수 시간에서 10분 내외로 90% 이상 단축하고 문서 품질 표준화.

인스턴스 관리 스펙 정의

Problem 인스턴스 관리 관련 기능의 명확한 스펙이 부재하여, 정상 동작임에도 버그로 오인되어 반복적으로 보고되는 상황 발생. 스펙 부재로 인해 기대 동작 판단이 어렵고, 동일한 문의가 반복됨.

Action 반복 보고되는 케이스들을 분석하여 버그와 스펙 미정의 영역을 식별. 인스턴스 관리 권한 기능의 기본 스펙을 정의하고 팀 내 문서화하여 공유.

Result 스펙 문서화로 버그 여부 판단 기준 명확화, 불필요한 반복 보고 감소.

CI/CD Report Hub

Problem 기존에는 GitLab Artifacts를 다운로드해야만 테스트 결과를 확인할 수 있어 피드백 루프가 느림.

Action Nest.js와 MinIO를 연동하여 Zip 파일 내부 리소스를 다운로드 없이 스트리밍하는 뷰어 구축. Runner에서 생성된 리포트를 CLI 명령어 한 줄로 쉽게 업로드할 수 있도록 Docker 기반의 CI SDK 배포. 별도의 DB 없이 파일 시스템과 아티팩트 내 JSON 메타데이터만을 활용해 운영 복잡도를 최소화.

Result 리포트 접근 시간을 3분에서 5초 내외로 단축하고 즉각적인 피드백 루프 형성.

---

GitLab AI Ops

Problem 코드 리뷰 시 AI의 도움을 받기 위해 외부 툴로 컨텍스트를 복사/붙여넣기 해야 하는 비효율 발생.

Action N8N과 GitLab Webhook을 연동하여 MR 댓글에서 즉시 실행 가능한 Slash Command 시스템 구축. /ai <질문>(질의응답), /mr(MR 본문 자동 생성), /graph(변경 사항 시각화) 기능을 제공하여 팀원들이 리뷰 컨텍스트 내에서 AI와 협업하도록 유도.

Result 코드 리뷰 단계에서 문맥 전환 없이 AI 활용이 가능해져 리뷰 품질 및 속도 향상.

---

Legacy Tooling

Problem ExtJS 기반 레거시 시스템의 복잡한 구조로 디버깅이 어렵고, 로컬 개발 환경 세팅에 반나절 이상 소요되어 신규 입사자 온보딩 비용 과다.

Action Chrome Extension으로 postMessage를 사용해 실시간 ExtJS 전역 객체 상태 변경 추적, SQL 실행 실시간 추적, 컴포넌트 트리 시각화 기능을 가진 디버깅 도구 개발. Starter Kit으로 분산된 소스를 Git Submodule로 통합하고, 대화형 CLI를 통해 환경 설정을 자동화.

Result 신규 입사자 환경 세팅 시간을 수 시간에서 5분으로 획기적 단축.