Reached 10+ contributors, 14/07/2026 16:00 KST

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.

• sebastian-software/cuttledoc#173
• 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

프로젝트를 수행하며 발생한 문제들을 해결하고, 더 나은 사용자 경험 제공과 성능 향상을 목표로 새로운 기술을 적용해보며 학습을 꾸준히 합니다.

단순 UI 구현을 넘어, 렌더링 / 흐름 / 리소스 로딩 / 브라우저 & 런타임 메모리 관점까지 고려하며 문제의 근본 원인을 파악하고 구조적으로 해결하는데 집중합니다.

동료 피드백을 수용하여 부족한 부분을 지속적으로 개선하고자 노력합니다.

• 제조 AI 에이전트 플랫폼(AxFlow)의 프론트엔드를 초기 구축부터 운영까지 담당, 초기 렌더링 Critical Path를 52% 단축한 프론트엔드 개발자입니다.
• 초기 렌더링 경로 최적화, 캐시 구조 개선 등 성능/안정성 문제를 주도적으로 개선해왔습니다.
• DevTools 프로파일링 기반으로 병목을 진단하고, 코드 스플리팅·캐시 구조 재설계 등 구조적 개선으로 재발을 방지합니다.

• 결과: Google A2UI 프로토콜을 채택, 에이전트가 전송한 JSON 스키마를2 자체 디자인 시스템 컴포넌트로 동적 렌더링하는 클라이언트 렌더러 구현
• 문제: 에이전트가 생성하는 문서 양식이 템플릿마다 구조가 다르고, 필드 타입이 20종 이상으로 다양하여 정적 UI로는 대응 불가
• 조치:
  • fieldType 기반 재귀적 렌더 트리 설계 (row, column, group 등 레이아웃 + text, select, file 등 입력 요소)
  • react-hook-form 제네릭 통합으로 타입 안전한 동적 폼 제어
  • allowedFieldPaths 기반 필드 경로 검증으로 잘못된 스키마 방어

• 결과: BE/AI의 문서 청킹·파싱 시 장시간 처리로 발생하는 timeout 응답 단절을 해소, 청크 단위 점진적 렌더링으로 사용자 경험 연속성 확보
• 문제: 문서 생성 요청이 BE/AI 측 처리 시간에 의존하여, 일반 HTTP 요청으로는 timeout 발생 또는 완료까지 무응답 상태 지속
• 조치:
  • axios의 ReadableStream 미지원 한계를 파악, fetch + ReadableStream 기반 SSE 스트리밍으로 전환
  • readSSELines AsyncGenerator 유틸 구현 — 청크 경계 버퍼링으로 불완전 메시지 처리
  • 스트리밍/일반 요청 이중 경로 설계 (onChunk 유무로 분기), 기존 API 호환성 유지
  • 인증(401)·Rate Limit(429) 핸들링을 fetch 경로에도 일관 적용

• 결과: Critical Path 지연 시간 약 52% 단축 (7,868ms → 3,756ms)
• 문제: 초기 렌더링 경로에서 불필요하게 직렬화된 작업으로 인해 TTI가 지연됨
• 조치: 초기 진입(/main) 시 즉시 필요한 리소스만 로드하도록 구조 분리, 렌더링 병목 제거
• 검증: Chrome DevTools Performance / Lighthouse 기준 전후 비교 측정

• 결과: pre-cache 단계에서 불필요한 build manifest 리소스를 제외하여 캐시 안정성 개선
• 문제: pre-cache 대상이 과도해 캐시 신뢰성이 떨어지고 업데이트 시 변동성이 커짐
• 조치: 캐시 대상 리소스를 재정의하고 필수 리소스 중심으로 최소화

• 프로젝트 초기 구성: LinkBrain 프론트엔드 프로젝트를 zero-base에서 구축 (개발 환경, 디렉토리 구조, 린팅 설정)
• Tailwind CSS: v3.4.5 → v4.1.8 업그레이드 (영향 범위 점검, 점진적 마이그레이션)
• Next.js: v15.2.6 → v15.5.9 → v16.1.1 단계적 업그레이드 (변경 사항 검증 및 리스크 사전 점검)

• Linear 기반으로 2주 단위 스프린트에서 티켓/서브 티켓을 생성하고 우선순위를 관리
• Slack 개발 채널에서 신규 이슈/트렌드/기술 고민을 공유하며 논의 문화에 참여
• 백엔드 팀원들과 Spring AI 스터디를 진행하며 서버 구조와 AI 연계 흐름 이해 확장