프론트엔드 플랫폼 설계 및 AI Native 개발 환경 구축

• 제품별로 분산된 프론트엔드 개발 환경을 모노레포로 통합하고 공통 설정과 의존성을 표준화해 신규 제품의 초기 셋업 최소화
• 레거시 CRA 기반 빌드 시스템을 Vite로 전환하고 CI 파이프라인을 최적화해 빌드 시간 약 80% 단축 (10분 → 1~2분)
• 사내 Sentry를 구축해 제품별 프론트엔드 오류를 통합 모니터링하고 알림 기반 장애 대응 체계 마련
• 디자인 토큰과 공통 UI 컴포넌트 기반의 디자인 시스템을 구축하고 디자이너의 UI 변경사항이 코드에 반영되는 과정을 AI Native 워크플로로 재편
• 팀의 AI Native 전환을 주도하며 역할별 서브에이전트와 공통 규칙 및 스킬을 활용한 프론트엔드 개발 환경 설계
• 에이전트의 불필요한 코드 생성과 반복 오류를 줄이기 위해 아키텍처 가드레일과 자동 검증 루프를 설계하고 반복되는 오류 패턴을 규칙으로 환원

현대차 R&D 데이터 통합 플랫폼 

R&D 데이터를 온톨로지 기반 지식 그래프로 통합하는 플랫폼. PoC부터 본사업까지 프론트엔드 아키텍처 설계와 개발 담당.

• 온톨로지 데이터 매핑, 지식 그래프 시각화, GraphRAG 스트리밍 UI 등 핵심 기능 개발 주도
• 프레임워크 비의존 코어와 React 어댑터를 분리하고 데이터 조회를 외부에 위임하는 구조로 설계해 제품 간 재사용 가능한 그래프 시각화 SDK 구축
• Cytoscape.js, Sigma.js로 전체 그래프를 한 화면에 그리는 방식을 검토했으나 노드가 많을수록 관계를 읽기 어렵다고 판단해, 핵심 노드에서 출발해 필요한 관계만 펼쳐 가는 탐색형 UX로 전환
• 레이아웃 계산은 d3-force에 맡기고 렌더링과 상호작용은 Canvas 2D로 직접 구현해 노드 표현을 제품에 맞추고, 노드 확장 시 기존 배치를 유지해 탐색 맥락 보존
• 명령형 API와 Zustand 외부 스토어로 그래프 시뮬레이션과 React 상태 갱신을 분리해 애니메이션 중 불필요한 리렌더링 방지
• 고객사 보안 환경에 맞춘 서비스 연동, Harbor, Kubernetes, ArgoCD 기반 GitOps 배포, SonarQube와 Black Duck 보안 검증까지 릴리스 대응 주도

디지털 트윈 연합 통합 포털 

과학기술정보통신부 디지털 트윈 연합 사업의 통합 포털. Next.js와 NestJS 기반 1인 풀스택으로 설계하고 개발.

• 페이지 성격에 따라 SSG, ISR, 동적 SSR, RSC 하이드레이션으로 렌더링 전략을 분리. 권한 페이지는 쿠키 기반 동적 렌더링으로 캐시 노출을 구조적으로 차단하고 공지는 태그 기반 재검증으로 최신성 유지
• Next.js BFF가 토큰을 HttpOnly 쿠키로만 보관하고 API에는 Bearer로 중계하는 구조를 설계해 XSS 토큰 탈취를 차단하고 SameSite와 Origin 검증으로 별도 토큰 없이 CSRF 방어
• 세부마다 제각각이던 인증 체계를 통합 셸로 일원화하고 공공 연구기관들의 산출물을 iframe으로 연계. 기관 간 연동 방식과 일정을 직접 협의
• 3단계 RBAC와 기관 단위 조직 모델을 설계하고 사용자, 기관, 공지, 게시판 어드민까지 포털 운영 기반 구현

자사 제품군 (PMIS, NDX Cloud 등)