• 제조 AI 에이전트 플랫폼(AxFlow)의 Document Agent 단일 구조에서 Agent + Workflow 확장 개편을 주도하고, FE 아키텍처 및 공통 스키마 설계를 총괄한 프론트엔드 엔지니어입니다.
• Google A2UI 프로토콜 및 SSE 스트리밍 기반 동적 UI 렌더러 구축, 데이터 시각화 공통 컴포넌트 총괄을 통해 비정형 AI 응답 및 대용량 데이터 렌더링 환경을 표준화했습니다.
• 테스트 인프라(Playwright, Storybook, Vitest) 구축 및 에이전트 판단 재현 설계를 통해 품질 기준을 수립하고, Critical Path 최적화(52% 단축)로 서비스 안정성을 개선했습니다.

1. 워크플로우 FE 아키텍처 총괄 및 Agent + Workflow 확장 개편

• 문제: 기존 Document Agent 중심 구조로는 복잡한 제조 현장의 다단계 작업 흐름(Workflow) 및 에이전트 간 연쇄 작용을 유연하게 표현하기 어려운 한계 존재
• 조치:
  • 단일 에이전트 구조에서 Agent + Workflow 확장 구조로 FE 아키텍처 전면 개편 및 공통 스키마 설계 주도
  • 문서 생성 에이전트 이관(14건) 진행 및 데이터 시각화 공통 컴포넌트 설계/총괄
  • 작업장, 운영(Ops), 실험실·평가 등 핵심 도메인 메뉴의 FE 오너로서 서비스 전반의 도메인 파편화 해소
• 결과: 확장 가능한 워크플로우 파이프라인 기반을 마련하여 신규 에이전트 및 연동 기능의 신속한 통합 구조 확보

2. Google A2UI 프로토콜 기반 선언적 동적 UI 렌더러 구축

• 문제: AI 에이전트가 생성하는 문서 양식이 템플릿마다 구조가 다르고, 20종 이상의 다양한 필드 타입이 존재하여 정적 UI 컴포넌트 방식으로는 지속적인 변경 요구 대응 불가
• 조치:
  • fieldType 기반 재귀적 렌더 트리(Render Tree) 설계 및 레이아웃/입력 요소 분리
  • react-hook-form 제네릭 연동을 통한 타입 안전한 동적 폼 제어
  • allowedFieldPaths 기반 필드 경로 검증 로직으로 비정상 스키마 사전 차단 및 렌더링 안정성 확보
• 결과: 비정형 AI 응답에 유연하게 대응하는 렌더러를 구축하여, 신규 문서 양식 추가 시 프론트엔드 코드 수정 및 배포 없이 JSON 스키마 정의만으로 즉시 대응 가능한 파이프라인 확보

3. SSE 기반 실시간 문서 생성 스트리밍 파이프라인 구축

• 문제: BE/AI 측의 문서 청킹·파싱 처리가 장시간 소요됨에 따라, 기존 단일 HTTP 요청 구조에서 타임아웃 응답 단절 및 대기 시간 동안의 사용자 불만 유발
• 조치:
  • axios의 ReadableStream 미지원 한계를 분석하고, fetch + ReadableStream 기반 SSE 스트리밍 체계로 전면 전환
  • AsyncGenerator 기반 readSSELines 유틸 구현으로 청크 경계 버퍼링 및 불완전 메시지 파싱 처리
  • onChunk 파라미터 유무에 따른 이중 경로 설계로 기존 API 호환성 유지 및 401/429 예외 핸들링 표준화
• 결과: AI 문서 생성 시 발생하던 요청 타임아웃 및 무응답 대기 상태를 해소하고, 청크 단위 점진적 렌더링을 통해 이탈 없는 연속적 사용자 경험(UX) 제공

4. 품질 보증을 위한 테스트 인프라 구축 및 테스트 가능성 설계

• 문제: AI 에이전트의 비확정적 응답 특성으로 인해 UI 및 작업 흐름에 대한 무작위 결함 진단 및 정밀한 회귀 테스트(Regression Test) 실행의 어려움 발생
• 조치:
  • Playwright, Storybook, Vitest 기반의 통합 테스트 인프라 구축 및 조직 내 테스트 커버리지 기준 수립
  • 에이전트 판단 재현 설계를 통해 비확정적 AI 실행 경로를 결정론적으로 모킹(Mocking) 및 검증 가능한 구조로 개편
• 결과: 테스트 가능성(Testability) 확보를 통해 에이전트 워크플로우의 렌더링/로직 결함을 사전에 검증할 수 있는 안정적 개발 환경 구축

5. Critical Path 최적화 및 초기 렌더링 성능 개선

• 문제: 초기 서비스 진입(/main) 시 직렬화된 리소스 로딩 및 과도한 서비스 워커 프리캐시(Pre-cache) 세팅으로 인해 초기 렌더링 지연 발생
• 조치:
  • Chrome DevTools 프로파일링을 통해 초기 진입 시 불필요한 리소스 로드 병목 지점 진단
  • 코드 스플리팅(Code Splitting) 및 렌더링 경로 분리로 핵심 리소스 즉시 로드 구조 전환
  • Service Worker 프리캐시 대상을 필수 리소스 중심으로 재정의하여 캐시 변동성 최소화 및 캐시 신뢰성 향상
• 결과: 초기 진입 경로의 불필요한 작업 병목을 제거하여 Critical Path 지연 시간을 52% 단축하고, 사용자 체감 TTI(Time to Interactive) 유의미하게 개선

기타 담당 업무 및 마이그레이션

• 프로젝트 Zero-base 구축: 린팅(ESLint/Prettier), 디렉토리 구조, 개발 환경 초기 세팅 전담
• 코어 라이브러리 마이그레이션: Tailwind CSS (v3 → v4), Next.js (v15 → v16) 단계적 업그레이드 및 점진적 영역 영향도 검증
• Linear 기반으로 2주 단위 스프린트에서 티켓/서브 티켓을 생성하고 우선순위를 관리
• Slack 개발 채널에서 신규 이슈/트렌드/기술 고민을 공유하며 논의 문화에 참여

Reached 20+ contributors,

Deployed Link: https://pypi.org/project/ai-driven-e2e/#description

Automatically repair broken Playwright E2E tests. When a UI change renames or restructures an element and a test's selector breaks, the engine diagnoses the failure, patches the broken selector/wait, verifies the new selector against the live DOM, then re-runs the test until it passes (or a retry cap is hit) and writes the fix back — as a local CLI or a CI GitHub Action that opens a patch PR.

• VIDAKHOSHPEY22/news-daily-bot#2
• VIDAKHOSHPEY22/news-daily-bot#3 (worked as a collaborator)
• jiunshinn/serve-emul#46
• jiunshinn/serve-emul#45
• facebook/astryx#4292
• facebook/astryx#4284
• facebook/astryx#3747
• meursyphus/flitter#91
• meursyphus/headless-chart#8
• meursyphus/headless-chart#12