Selected work
어떤 문제를 맡았고, 어떤 기준으로 의사결정했으며, 그 결과 제품과 팀에 어떤 변화가 있었는지 정리했습니다.
01 / 2024.11 - 재직중
단독 FE / 구조 설계 / 공통 컴포넌트
반복 구현되던 입력·실행·결과 UI를 npm 패키지로 분리·publish해 3개 이상 Agent 프로젝트의 개발·유지보수 비용을 줄였습니다.
Decision. 반복 인터랙션을 npm 패키지로 publish하고, 도메인별 UI는 소비 앱에서만 확장했습니다.
반복 UI·store·훅 영역 약 60% 재사용 (추정)
React · TypeScript · Zustand · React Query · SSE
02 / 2024.11 - 재직중
DAISY FE / 시계열 탐색·차트 성능
DAISY 운영 데이터 자동 수집 이후 대량 시계열 탐색 UI에서 서버 LTTB·상태 분리·캔버스 렌더 경량화로 인터랙션 지연을 줄였습니다.
Decision. 서버 LTTB 다운샘플링, 화면·데이터 상태 분리, 고빈도 구간의 캔버스 렌더 파이프라인 단순화를 결합했습니다.
5천만 포인트급 시계열 탐색
React · TypeScript · Zustand · React Query · Canvas
03 / 2024.11 - 재직중
FE / UX 흐름 설계 / 상태 모델링
파이프라인 캔버스의 연결 UX·렌더링을 개선하고 단계·상태·결과 표현을 재정렬해 QA와 신규 사용자의 온보딩 비용을 낮췄습니다.
Decision. 타입별 색상 핸들로 연결 가능 여부를 표시하고, React Flow Node/Edge memo로 불필요 리렌더를 제거했습니다.
새 노드 생성 지연 2000ms → 20ms 이하
React Flow · UX Flow Design · State Modeling