2024.01 ~ 현재
이에이트NDXPRO AI NDXPRO ADMIN WEB NDX CLOUD NDXPRO PMIS NDXPRO EPC Samsung Thync
잠실, 대한민국
플랫폼 개발팀 프론트엔드 개발자 | 주임 연구원
TypeScriptReactNext.jsNest.jsTanStack-QueryZustandRecoilTailwind CSSShadcnMotionD3.jsCanvas APISocket.ioWebRTCStorybookFigmaDockerSentryAWS
- 엔터프라이즈 B2B SaaS 솔루션 설계 및 개발
- NDXPRO AI: 현대자동차 R&D 문서 분석 및 근거 기반 질의응답 플랫폼에서 Canvas + D3 Force 기반 지식 그래프 시각화 SDK를 설계·구현
- NDXPRO ADMIN WEB: 온톨로지 기반 지식 모델의 관계 탐색·시각화를 위한 다이어그램 설계·구현
- NDX CLOUD: 대용량 이미지 메타데이터 처리 및 업로드 아키텍처를 최적화하여 메모리 사용량 96% 절감, 업로드 시간 50% 단축, 서버 부하 70% 감소
- NDXPRO PMIS: WBS 기반 Gantt Chart 아키텍처를 설계하고 Virtualization 및 Optimistic UI를 적용해 DOM 렌더링 성능 40% 개선
- NDXPRO EPC / Samsung Thync: SVG 기반 2D 뷰어, iframe + postMessage 통신 구조, Unreal WebView 환경의 SSO/권한 관리 아키텍처 구현
- 프론트엔드 플랫폼 아키텍처 구축 및 표준화
- 모노레포 아키텍처, 공용 UI 패키지, 공통 템플릿, 디자인 시스템, 브랜치 전략을 정립하여 프론트엔드 개발 환경 표준화
- Jenkins + Docker 기반 CI/CD 구축과 Vite + Yarn Berry(PnP) 전환을 통해 CI 빌드 시간 약 80% 단축 (10분 → 1~2분)
- AI 코딩 도구 및 LLM 기반 워크플로우 도입을 주도하고, 팀 내 활용 사례와 가이드를 정립하여 개발 생산성 및 문서화 효율 향상
- 코드 리뷰 문화 정착 및 기술 세션 주도를 통해 팀 내 코드 품질 기준 정립 및 지식 공유 확산
- 글로벌 기술 세션 참가 및 파트너십 기회 발굴
- NIPA 주관 GSMP 프로그램 선정(팀 대표), 워싱턴 D.C. 현지 행사 참가 및 글로벌 파트너 대상 기술 소개
현대자동차 R&D 기술 문서 분석 및 근거 기반 질의응답 플랫폼
그래프 시각화 SDK 설계 및 개발
- 대량 렌더링에 강한 Sigma.js를 검토했으나 LLM 응답에 따른 단계적 확장과 애니메이션 타이밍 제어에 한계가 있어 Canvas + D3 Force 기반으로 직접 설계
- 렌더링/데이터/이벤트/뷰포트/드래그 등 역할별 Manager로 분리해 기능 간 의존성을 최소화하고, 이벤트 기반 API로 외부에서 그래프 상태 변화에 쉽게 대응할 수 있도록 설계
- 화면 밖 노드 렌더링을 생략하고 물리 시뮬레이션 alpha 값을 상황별로 조정해 수천 개 노드에서도 60fps 유지
- 노드 연결 생성 시 플로우 애니메이션으로 관계 방향을 시각화해 사용자가 데이터 흐름을 직관적으로 파악 가능
- 팀 내 다른 프로젝트에서도 사용할 수 있도록 패키지로 분리하고 API/아키텍처 문서 정리
LLM 스트리밍 기반 실시간 그래프 시각화
- 소켓 이벤트가 빠르게 연속으로 들어올 때 애니메이션이 겹쳐서 UX가 깨지는 문제를 이벤트 큐로 해결, 노드 추가 → 포커스 → 하이라이트 순서를 보장해 사용자가 그래프 변화를 따라갈 수 있도록 개선
- 세션 생성, 연결 상태, 타임아웃 처리 등 소켓 라이프사이클 전체를 직접 설계하여 연결 실패 시에도 UI가 정상적으로 동작
- 처음에는 핵심 노드만 보여주고 클릭 시 API로 연결 데이터를 조회해 확장하는 방식으로 초기 로딩 속도와 정보 과부하 문제를 동시에 해결
- 새 세션 생성이나 대화 초기화 시 그래프도 함께 리셋되도록 Store 간 연동 처리
NGSI-LD 기반 디지털 트윈 데이터를 정제하고 모델링·운영하는 NDXPRO 핵심 플랫폼
Data Manager V4 & V3 아키텍처 설계 및 고도화
- 데이터 모델 간 관계를 시각화하는 다이어그램 SDK 설계, Dagre로 계층형 레이아웃을 자동 계산해 복잡한 관계도 깔끔하게 표현
- 관계 클릭 시 연결된 모델을 API로 조회해 on-demand로 확장, 새로 추가된 노드에 자동 포커스
- 같은 타입의 관계는 그룹 노드로 묶어 시각적 복잡도를 줄이고, 재귀적으로 하위 관계까지 탐색 가능하도록 설계
- 줌/팬, 마우스 휠 줌, fitToScreen 등 뷰포트 제어를 직접 구현해 UX 개선
- 데이터 모델 CRUD와 다이어그램 상태를 연동해 변경 사항이 즉시 반영되도록 구현
드론·지상 촬영 이미지를 사진측량 기반으로 정사영상 지도, 3D 모델, 포인트클라우드를 생성·시각화하는 클라우드 플랫폼
대용량 이미지 메타데이터 처리 아키텍처 최적화
- JPEG APP1 마커 분석을 통한 선택적 데이터 읽기 전략 설계로 메모리 96% 절약 (20GB → 800MB)
- 병렬 처리 아키텍처 설계 및 구현으로 메타데이터 추출 시간 95% 단축 (6분 40초 → 20초)
- AWS S3 Presigned URL 기반 직접 업로드 아키텍처 설계로 백엔드 의존성 제거
- 배치 요청 및 동시 스트림 업로드 전략을 통한 처리 효율성 극대화로 업로드 시간 50% 단축 (20분 → 10분) 및 서버 부하 70% 감소
프로젝트 전체적인 관리를 통합한 웹 솔루션
WBS 기반 Gantt Chart 아키텍처 설계 및 최적화
- 복잡한 프로젝트 데이터 시각화를 위한 확장 가능한 Gantt Chart 아키텍처 설계 및 구현
- Optimistic UI 패턴을 적용한 실시간 구조/일정 수정 시스템 구축
- Virtualization을 통한 대규모 데이터 렌더링 최적화로 DOM 렌더링 성능 40% 개선
설계, 조달, 시공 전 과정을 1D·2D·3D 데이터로 통합 시각화하는 웹 솔루션
2D 도면 뷰어 및 대시보드 아키텍처 설계
- SVG 기반 2D 도면 뷰어 아키텍처 설계 및 좌표 변환 시스템을 통한 확대/축소 상태에서의 마크업 위치 정확도 보장
- 사용자 맞춤형 대시보드 레이아웃 아키텍처 설계 및 Recoil Persist를 활용한 상태 지속성 구현
- iframe + postMessage API 기반 마이크로프론트엔드 아키텍처로 외부 3D Viewer와의 실시간 데이터 통신 시스템 구축
상일동 삼성물산 BEMS 시스템의 Unreal 앱 내 사용자·자산 관리를 위한 웹뷰 기반의 관리 시스템
Unreal 연동 인증 시스템 아키텍처 설계
- SSO 및 일반 로그인을 통합 지원하는 인증 아키텍처 설계 및 구현
- 최초 로그인 시 자동 사용자 등록 및 권한 승인을 위한 워크플로우 설계 및 구현
- 백엔드 리소스 제약 상황에서 NestJS 기반 인증/권한 관리 마이크로서비스 아키텍처 설계 및 구축