안녕하세요,

김지동

프론트엔드 개발자

React/Next.js 기반 프론트엔드 개발자. 위성 GIS 플랫폼부터 AI 에이전트 시스템까지, 복잡한 데이터를 직관적인 인터페이스로 만드는 일을 합니다.

About

~5년

실무 경력

20+개

GIS 플랫폼 구축

100+ 컴포넌트

디자인 시스템

76개

프로젝트 경험

AI 에이전트 플랫폼 설계부터 LLM API 연동, 벡터 검색까지 — AI를 활용한 프로덕트를 직접 만듭니다.

Experience

텔레픽스(주)

주임연구원 / SW개발팀

2022.07 ~ 재직중

위성 데이터 플랫폼 전문 기업. 프론트엔드 개발 및 사내 인프라/디자인 시스템 구축.

  • PIXATIVE v1→v2: 위성영상 GIS 플랫폼. OpenLayers + MapLibre 이중 지도, WMTS 캐시로 로딩 불가→0.2초 개선
  • Bluebon: 위성 미션 계획 풀스택. SGP4 궤도 전파, Three.js 3D, ~25K LOC
  • telepix-ui: Radix UI + TailwindCSS 사내 디자인 시스템. 37K LOC, Storybook v9
  • LIC 플랫폼: Remix v2 SSR + Mapbox, 텔레픽스 최대 FE 프로젝트 ~11K LOC
  • 멀티모달 AI 시각화: react-force-graph 500노드, XML 파싱 알고리즘 자체 설계 742줄
  • 사내 인프라 전면 개선: 네트워크(2년+ 무중단), Jenkins CI/CD, AWS IaC(Terraform)

(주)아키아카

사원/매니저

2022.01 ~ 2022.07

공공기관 웹사이트 유지보수. Spring 백엔드, Docker 기반 GitLab/Nexus 구축.

(주)웹비즈크리에이티브

사원 / SW개발팀 (메인 개발자)

2021.06 ~ 2022.01

풀스택 개발. 부동산 지도 검색, 모바일 앱, 글로벌 쇼핑몰.

  • 검색 쿼리 10초→0.5초 (95% 개선), Timeout 4분→2초 (90%+ 단축)

Projects

PIXATIVE v1→v2

위성영상 GIS 제공 플랫폼 — 산업통상자원부 과제

  • OpenLayers + MapLibre 이중 지도 시스템 설계, proj4 좌표계 변환으로 다양한 좌표체계 위성영상을 단일 맵에 정합
  • WMTS Cache 서버 도입으로 네트워크 병목 시 로딩 불가 상태를 0.2초로 개선
  • v2에서 Recoil→Zustand, MUI→TailwindCSS 마이그레이션 주도
Next.jsReactOpenLayersMapLibreZustand

로딩 불가 → 0.2초

Bluebon

위성 미션 계획 풀스택 플랫폼 — 사내 핵심 프로덕트

  • SGP4 궤도 전파 알고리즘으로 위성 지상 궤적 계산 및 관측 접근성 분석 구현
  • Three.js로 지구-위성 3D 시각화, supercluster로 대량 마커 클러스터링
  • Drizzle ORM + LibSQL 풀스택 아키텍처, NextAuth 인증, zod 스키마 검증
Next.js 15Three.jsMapbox GLDrizzle ORM

telepix-ui

사내 UI 디자인 시스템 — NPM 패키지로 배포

  • Radix UI + TailwindCSS 4 기반 컴포넌트 라이브러리 설계, 100+ 시맨틱 디자인 토큰
  • Rollup ESM/CJS 듀얼 번들링, Storybook v9 문서화 (a11y 접근성 포함)
  • v0.8.5까지 반복 릴리즈, 사내 전 프로젝트에서 공통 사용
ReactRadix UITailwindCSS 4RollupStorybook

LIC 플랫폼

지역혁신클러스터 해양 관측 GIS — 정부 R&D

  • Remix v2 SSR + Mapbox GL 통합, WKT 기반 AOI 폴리곤 시스템
  • 5개 관측소 항목(조위/수온/파고/풍향/풍속) 실시간 데이터 시각화
  • react-pdf 리포트 뷰어, Vaul 모바일 Drawer — 텔레픽스 최대 규모 FE 프로젝트
Remix v2Mapbox GLturf.jsreact-pdf

멀티모달 AI 시각화

AI

AI 분석 결과를 지식 그래프로 시각화 — 미래도전과제 R&D

  • AI 산출물 3개 파일(LTF, Graph, Entity)을 FE에서 직접 파싱하는 알고리즘 자체 설계
  • react-force-graph + Canvas API로 최대 500노드 그래프 렌더링
  • 그래프 노드 호버 시 원문 텍스트 토큰 하이라이트 양방향 연동
Reactreact-force-graphCanvas APIMSW

500노드 실시간 시각화

Orgentic

AI

멀티 테넌트 AI 에이전트 오케스트레이션 플랫폼 — 사이드 프로젝트

  • 4계층 구조(Org→Team→Agent→Task) 멀티 테넌트 아키텍처 설계
  • Claude Agent SDK + FastAPI 백엔드, WebSocket 실시간 브로드캐스트
  • @xyflow/react로 에이전트 간 태스크 흐름 그래프 시각화
React 19FastAPIClaude Agent SDK@xyflow/react

사내 인프라 전면 구축

네트워크부터 CI/CD, 클라우드까지 자발적으로 구축

  • Switch/Router/방화벽/VPN/DNS 세팅, VLAN 분리 → 1~2일 중단 → 2년+ 무중단
  • Jenkins + Docker(Portainer) CI/CD 파이프라인 → 배포 담당자 상시 대기 → 팀 자율 배포
  • 사내 전용 서버 → AWS 이관, Terraform IaC 도입
DockerJenkinsTerraformAWSPortainer

2년+ 무중단 운영

신송식당지도 (Lunchix)

AI

AI 추천 맛집 지도 — 사내 사이드 프로젝트

  • OpenAI API + pgvector 임베딩으로 벡터/공간 하이브리드 검색 구현
  • PostGIS 기반 거리순 정렬 + AI 취향 매칭 결합 추천 알고리즘
  • Kakao Map 시각화, Recharts 트렌드 분석, 크롤러 + 어드민 풀스택 구성
Next.jsKakaoMapOpenAIpgvectorPostGIS

Skills

Frontend

React(20+)Next.js(12+)TypeScript(44)Remix(3)TailwindCSSFramer Motion

GIS / 지도

OpenLayers(5)Mapbox GL / MapLibre(8)Leaflet(4)KakaoMap(3)

데이터 시각화

Canvas API(9)Recharts(4)react-force-graph(4)Three.js(2)

Backend

Python (FastAPI)(8)C# (.NET / WPF)(6)Rust (Axum)(1)

Infra / DevOps

Docker(12)Jenkins / GitHub ActionsTerraformAWS

AI Tools

Claude CodeClaude Agent SDKOpenAI APIGemini

Contact

© 2026 김지동