// project
신약개발 SaaS
AI 기반 물질 탐색·설계·물성 예측을 지원하는 B2B SaaS 플랫폼. 프론트엔드 전반과 대규모 데이터 시각화 성능을 담당했고, 프론트엔드 신규 구축 + FSD 아키텍처 전환을 주도.
성능 최적화
- 산점도 드래그 리렌더 — JS 실행 약 80% 감소
- 계층형 트리 렌더링 — 10초 → 2초
- 대규모 테이블 렌더링 — 2.2초 → 0.53초
- 이미지 캡처 — 5.8초 → 2.6초(56%↓)
- 3D 뷰어 진입 데이터 — 20MB·10초 → 8KB·500ms
- 초기 번들 분리 — 라우트 번들 523KB → 22.3KB
아키텍처 · 개발 환경
- Next 14→16 / React 18→19 무중단 이관 — 빌드 약 55% 단축
- FSD 레이어 경계 강제 — 린트에서 시작해 계층 방향 전수검사로 승격, 커밋 시 차단 (도입 5주 후 앱 2개 1,210모듈 위반 0건)
- AI 코드 생성 규칙 정의 — 문서로만 있던 팀 규칙을 편집 시점 훅과 맥락별 스킬로
- OpenAPI → 데이터 페칭 훅 자동생성 — 계약 불일치를 빌드에서 차단
- TanStack Query v4→v5 이관 — 전역에 걸린 회귀 2건 대응
- 사용자 설정 서버 이관 — 저장 용량 초과 크래시 해소
- biome 단일 린터 전환 — eslint+prettier를 일원화해 로컬 전수 검사 55.3초 → 3.7초
- styled-components → Tailwind 전환 — 런타임 스타일 계산 오버헤드 제거
- 순환 종속성 시각화·제거 — 의존성 그래프로 순환 참조를 걷어내며 구조 개선
- 헤드리스 채팅 UI 사내 패키지 — 앱마다 다시 짜던 채팅 UI를 어댑터로 분리
신규 기능
- 대규모 실험 데이터 분석 도구 — 데이터를 쪼개 경향을 산점도로 시각화. 라벨 DnD·좌표 백분율 저장으로 리사이즈·재조회 시 위치 복원 (그래프 50개·마커 1,000개)
- AI Assistant 채팅 UI — parallel/intercept route로 모달·전체화면 동시 제공, 세션 리스트·중단 처리·수식 렌더
- WebGL 3D 뷰어 — 시퀀스 기반 3D 렌더링, 신뢰도 색상, 중복 로드로 인한 WebGL context 제한 해결
- 이미지 영역 하이라이팅 — 백엔드가 마킹한 SVG 요소를 순회하며 색 주입, 호버 시 그룹 확대
- 인증 입력 검증 정규화 — 화면별 중복 구현·문구 불일치 제거
- 3D ↔ 2D 도식 좌표 정합 — 연결선이 어긋나던 문제
- Journey 기반 온보딩 튜토리얼 — 산발된 튜토리얼 상태를 단일 store로 통합
실시간 (SSE · WebSocket)
- SSE 스트리밍 응답 렌더 — 커스텀 태그를 브라우저에서 직접 그려 서버 왕복 제거
- LLM 호출 한도 게이트 (풀스택) — 한도 초과를 거부 대신 대기열로
- 수평 확장 WebSocket 세션 라우팅 — 인스턴스를 늘려도 알림이 도달하게
- 실시간 알림 소켓 재연결 — 지수 백오프·세션 유지
인프라
- 앱별 독립 CD 파이프라인 — 배포 9분 → 5분대
- pnpm workspace 모노레포 — 앱 4 + 공유 패키지 5, npm → yarn Berry → pnpm 순차 이관
- 테스트·빌드 스택 현대화 — Storybook 8→10, Jest → Vitest, Cypress → Playwright
- 외부 연산 라이브러리 내재화 — CDN 로드 스크립트를 내부 번들로 옮겨 외부 의존성 리스크 축소
- 보안 · 계측 — Next.js DoS 취약점(CVE) 패치, 전환 퍼널 계측 파이프라인
// 연결됨 (21)
[[Plot Chart 드래그 렌더링 비용 80% 감소]][[수천 노드 트리를 10초에서 2초로 — 라이브러리를 포크해서]][[데이터 테이블 2.2초 → 0.53초 — 가상화만으론 부족했던 이유]][[이미지 내보내기 5.8초 → 2.6초]][[3D 뷰어 진입 데이터 20MB → 8KB]][[시각화 라이브러리 초기 번들 523KB → 22.3KB]][[Next.js 메이저 연속 이관 — 15의 비동기화, 16의 React 19]][[FSD 레이어 경계를 린터로 강제 — 사람 리뷰 대신 규칙으로]][[AI 코드 생성 규칙 — 편집 시점 훅과 맥락별 스킬로]][[OpenAPI 스펙에서 TanStack Query 훅을 자동생성]][[TanStack Query v4→v5 이관 — 204 무한 루프·queryKey 무효화 전역 대응]][[로컬스토리지 용량 초과 크래시 → 서버 이관 + 방어적 파싱]][[헤드리스 채팅 UI 킷 — 어댑터로 백엔드 포맷과 UI를 분리]][[인증 입력 검증 — 스키마로 단일 정의해 화면별 중복 제거]][[3D 데이터를 2D 도식에 얹을 때 좌표가 어긋나던 문제 — 테두리 중심 정렬]][[LLM 스트리밍 응답 안의 커스텀 태그를 브라우저에서 렌더]][[LLM 호출 한도 — 인스턴스별 카운터로는 못 막음]][[수평 확장 WebSocket — 어느 인스턴스에 붙었는지 찾아 보내기]][[실시간 알림 소켓 재연결 — 지수 백오프와 세션 유지]][[모노레포 CD를 서비스별로 쪼개기 — 한 배포가 남을 안 건드리게]][[Resume]]