지도, 시각화, 운영 도구를 실제 서비스로 완성합니다.

지도/GIS, 데이터 시각화, 인증, 배포까지 직접 다루며 데이터가 무거운 제품을 끝까지 굴리는 프론트엔드 개발자입니다.

소개

제가 잘하는 일은 지도, 영상, 운영 데이터처럼 무거운 제품을 사용자가 판단할 수 있는 화면으로 바꾸는 것입니다. 백엔드와 인프라를 먼저 겪었기 때문에 프론트엔드에서도 API, 데이터 모델, 인증, 배포, 장애 조건을 함께 봅니다.

제가 맡아온 문제는 이런 형태였습니다.

위성영상이 비어 보이던 병목

0.2초

WMTS 캐시와 좌표계 정합으로 탐색 응답 흐름을 줄였습니다.

잦은 네트워크/배포 장애

2년+

사내 네트워크와 Jenkins/Docker 배포 기반을 안정화했습니다.

AI 산출물 검증 지연

500노드

브라우저 파서와 Canvas 지식그래프로 분석 결과를 연결했습니다.

방송과 내부 운영의 분리

HLS + Timesheet

LiveKit/HLS 방송 경로와 Supabase 근태 모듈을 함께 구현했습니다.

지도/GIS를 제품 흐름의 중심에 둡니다.

단순 지도 표시보다 좌표계 정합, 타일 캐시, AOI 편집, 관측 데이터 레이어, 대량 마커 상태를 업무 흐름에 맞게 설계했습니다.

운영 기능을 프론트 밖까지 이어 붙입니다.

LiveKit/HLS 방송, FFmpeg/Nginx/CloudFront 배포 경로, Supabase Realtime 근태 모듈처럼 화면 뒤의 실행 조건까지 같이 만들었습니다.

제품이 계속 돌아가는 조건을 챙깁니다.

인증 토큰, 권한, 결제 콜백, 네트워크 장애, CI/CD, 사내 패키지 운영까지 다루며 기능 출시 이후의 유지보수 비용을 줄이는 쪽으로 일합니다.

경력

텔레픽스(주)

주임연구원 / SW개발팀

2022.07 ~

위성 데이터 플랫폼 전문 기업. 지도/GIS 프론트엔드, 데이터 시각화, 사내 디자인 시스템, 배포/네트워크 인프라를 함께 담당.

PROJECT 01

PIXATIVE v1/v2

OpenLayers

위성영상 GIS 플랫폼 / 프론트엔드 주도

영상 로딩 불가 흐름을 0.2초 응답 경로로 개선

01OpenLayers와 MapLibre를 프로젝트 성격에 맞게 분리하고, proj4 좌표계 정합 계층을 구성했습니다.

02WMTS 캐시 경로를 붙여 지도 탐색 중 빈 화면으로 멈추던 병목을 줄였습니다.

MapLibreproj4WMTSZustand

PROJECT 02

Bluebon / Bluebon-prod

SGP4

위성 미션 계획 / 프로덕션 확장

CLI 중심 궤도 계산을 웹 기반 운영 화면으로 전환

01TLE 기반 SGP4 궤도 전파, Mapbox/Deck.gl 레이어, Three.js 3D 뷰를 연결했습니다.

02Keycloak SSO와 FastAPI 프록시를 붙여 외부 운영 버전까지 확장했습니다.

Mapbox GLDeck.glThree.jsKeycloakFastAPI

PROJECT 03

LIC 플랫폼

Remix

B2G 운영 화면 / 지도·리포트

AOI 편집부터 PDF 리포트까지 한 화면 흐름으로 완수

01Remix SSR과 Mapbox GL 기반으로 관측소 데이터 5종, WKT/turf.js AOI 편집을 구현했습니다.

02모바일 Drawer와 PDF 리포트까지 포함해 현장 운영에 필요한 화면 흐름을 정리했습니다.

Mapbox GLWKTturf.jsPDF

PROJECT 04

멀티모달 AI 시각화

React

지식 그래프 / 원문 하이라이트

500노드 지식 그래프와 원문 근거를 같은 화면에서 추적

01LTF, Graph, Entity 산출물을 프론트엔드에서 직접 파싱해 시각화 데이터로 변환했습니다.

02react-force-graph와 Canvas로 그래프 노드, 문서 하이라이트, 엔티티 흐름을 연결했습니다.

Canvasreact-force-graphLTFEntity

PROJECT 05

telepix-ui

Radix UI

사내 디자인 시스템 / NPM 패키지

100+ 토큰과 Storybook 문서로 반복 UI 구현을 표준화

01Radix UI와 TailwindCSS 4 기반 컴포넌트, 토큰, 릴리즈 흐름을 운영했습니다.

02프로젝트마다 달라지던 폼, 버튼, 패널, 테이블 패턴을 패키지 기준으로 맞췄습니다.

TailwindCSS 4Storybook v9NPM

PROJECT 06

사내 인프라 전면 구축

Network

네트워크·배포·클라우드 운영

1~2일 단위 장애가 반복되던 환경을 2년+ 안정 운영으로 전환

01Switch, Router, 방화벽, VPN, DNS, VLAN을 직접 정비해 개발 조직의 운영 기반을 만들었습니다.

02Jenkins, Docker 배포와 AWS/Terraform 흐름을 정리해 프론트엔드 밖의 문제까지 처리했습니다.

JenkinsDockerAWSTerraform

Fruiting 증권 플랫폼

백엔드 유지보수 / 풀스택 지원

~ 2026.02

증권사 프로젝트에서 장기간 운영 이슈, 결제, 알림, 권한, 검색, 모바일 연동 흐름을 유지보수.

PROJECT 01

Fruiting 증권 플랫폼

Python

증권사 서비스 / 백엔드 유지보수

2026.02까지 4년간 결제·알림·회원·검색 흐름을 안정 운영

01BootPay 정기결제 등록/콜백, 회원탈퇴 시 예약결제 확인 등 돈이 오가는 운영 이슈를 직접 처리했습니다.

02Python/Django 백엔드, Elasticsearch 검색, Expo 푸시 토큰, React Native WebView/Push 초기 설정까지 대응했습니다.

DjangoNext.jsReduxElasticsearchBootPay

(주)아키아카

사원/매니저

2022.01 ~ 2022.07

공공기관 웹사이트 유지보수와 사내 개발 인프라 구축을 담당.

서울기록원/국가기록원/경찰청 기록물 사이트 Spring 기반 유지보수, 서울기록원은 풀스택 이슈 대응
Docker 기반 GitLab/Nexus, Apache 리버스 프록시, 도메인/포트포워딩 설정으로 코드와 빌드 산출물 관리 체계화

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

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

2021.06 ~ 2022.01

소규모 팀에서 지도 검색, 모바일 앱, 결제, 레거시 성능 개선을 풀스택으로 담당.

부동산 지도 검색 플랫폼 메인 개발. KakaoMap 기반 검색, Selenium 크롤러, IE11 호환 커스텀 차트 구현
강남3구 2~3천건 매물 검색 쿼리를 10초 -> 0.5초로 개선하고, 차량정비 검색 Timeout 4~5분 -> 2~20초로 단축
모바일 구인구직 앱에서 무한스크롤, 직접 구현한 채팅, Firebase Push 알림을 개발

프로젝트

기술 스택을 나열하기보다 문제를 어떻게 쪼개고 어떤 판단으로 결과를 만들었는지 중심으로 정리했습니다.

Bluebon / Bluebon-prod

사내 핵심 프로덕트 / 풀스택 참여

2024 -

위성 미션 계획 플랫폼. TLE 궤도 계산, 접근성 분석, 운영 인증 흐름까지 확장했습니다.

역할: 지도/3D 시각화, 궤도 계산 UI, 인증 연동
문제: CLI 중심 미션 계획은 비개발 직군이 검증하기 어렵고, 궤도/시간/관측 조건을 동시에 봐야 했습니다.
구현: TLE 기반 계산 결과를 지도 레이어, 3D 궤도, 시간 컨트롤에 연결하고 운영 인증은 별도 프록시 계층으로 분리했습니다.
결과: 사내 미션 계획 업무에 실사용되는 웹 플랫폼이 되었고, 외부 사업용 운영 버전으로 이어졌습니다.

satellite.js 기반 SGP4 궤도 전파로 위성 지상 궤적과 관측 접근성 분석을 구현했습니다.
Mapbox GL/Deck.gl 지도와 Three.js 3D 지구 뷰를 함께 구성해 미션 계획의 시간/공간 맥락을 시각화했습니다.
프로덕션 버전에서 Keycloak SSO, FastAPI 프록시, refresh token 재시도 흐름으로 운영 인증 구조를 보강했습니다.

Next.js 15Mapbox GLDeck.glThree.jsFastAPIKeycloak

운영 인증/프록시 구조까지 확장

PIXATIVE v1 -> v2

산업통상자원부 과제 / 프론트엔드 주도

2022.07 - 2024

위성영상 GIS 제공 플랫폼. 다좌표계 위성영상을 하나의 지도 경험으로 정리했습니다.

역할: 지도 렌더링, 좌표계 정합, 캐시 구조 개선
문제: 위성영상 원본 좌표계와 타일 응답 지연 때문에 사용자가 빈 지도를 보는 시간이 길었습니다.
구현: OpenLayers 래퍼와 proj4 변환 계층을 분리하고, WMTS 캐시를 영상 요청 경로 앞단에 배치했습니다.
결과: 지도 탐색 중 빈 화면 병목을 줄였고, 이후 v2 마이그레이션의 기준 구조가 됐습니다.

OpenLayers + MapLibre 이중 지도 시스템과 proj4 좌표계 변환으로 서로 다른 위성영상을 단일 맵에 정합했습니다.
WMTS Cache 서버를 붙여 네트워크 병목 시 영상이 멈추던 흐름을 0.2초 응답 경로로 줄였습니다.
v2에서는 Recoil -> Zustand, MUI -> TailwindCSS/Radix UI로 전환하며 운영 UI를 재정리했습니다.

Next.jsReactOpenLayersMapLibreZustand

로딩 불가 -> 0.2초

MateYou 플랫폼

외주 / 방송 인프라 + 내부 운영 모듈

2025

매칭 기반 플랫폼 내부에 라이브 방송, 스토어, 출근부/근태 관리까지 붙인 운영형 서비스입니다.

역할: 방송 UI/인프라, 출근부/근태 운영 모듈, 스토어 연동
문제: 방송은 송출/시청 경로가 분리되어야 했고, MateYou 내부 운영은 파트너 출근 상태와 주문 수령 완료 같은 실제 업무 조건까지 묶어야 했습니다.
구현: 송출은 LiveKit, 시청은 FFmpeg 기반 HLS + Nginx/CloudFront로 나누고, 출근부는 Supabase timesheet_ 테이블/RPC/Realtime과 React 라우트로 독립 모듈화했습니다.
결과: 라이브 미디어 인프라와 내부 운영/정산 흐름을 같은 제품 안에서 연결한 풀스택 사례로 정리할 수 있습니다.

LiveKit WebRTC 기반 실시간 방송 구조를 HLS 시청 경로로 확장하고 FFmpeg 트랜스코딩 파이프라인을 구성했습니다.
Nginx 리버스 프록시, CloudFront 배포, Docker Compose 기반 서버 구성을 연결해 송출/시청 경로를 분리했습니다.
MateYou 프론트 내부 /timesheet 기능으로 출근/휴게/퇴근 요청, 매니저 승인/반려, 실시간 출근자 현황, 근태 통계/정산 화면을 구현했습니다.
timesheet_ 네임스페이스 테이블, Supabase RPC/Realtime, 감사 로그, 스토어 수령 완료의 출근 상태 조건까지 서비스 흐름에 연결했습니다.

ReactTypeScriptSupabaseRealtimeLiveKitHLSFFmpegDockerNginxCloudFront

방송 인프라 + 출근부 운영 모듈 구현

Fruiting 증권 플랫폼

증권사 프로젝트 / 백엔드 유지보수

2022 - 2026.02

증권사 웹/백엔드 유지보수 프로젝트. 2026.02까지 장기간 운영 이슈와 결제/알림/검색 흐름을 담당했습니다.

역할: 백엔드 유지보수, 결제/알림/검색 흐름 개선
문제: 증권 서비스 특성상 화면 수정만으로 끝나지 않고 결제, 알림, 권한, 검색, 탈퇴 흐름이 서로 연결되어 있었습니다.
구현: 기존 서비스 구조를 유지하면서 콜백/토큰/권한 경계의 오류 가능성을 줄이는 방향으로 수정했습니다.
결과: 장기간 운영되는 서비스에서 안정적인 유지보수와 도메인 흐름 이해를 쌓은 프로젝트입니다.

Next.js/Redux 기반 화면 유지보수와 함께 Python/Django 백엔드의 권한, 댓글, 회원, 배포 이슈를 처리했습니다.
BootPay 정기결제 등록/콜백, Expo 푸시 토큰, 회원탈퇴 시 예약결제 확인 등 운영에 직접 닿는 흐름을 보강했습니다.
Elasticsearch 검색과 모바일 프로필, React Native WebView/Push 초기 설정까지 이어지는 유지보수 범위를 맡았습니다.

PythonDjangoNext.jsReduxBootPayExpoElasticsearch

2026.02까지 장기 유지보수

LIC 플랫폼

정부 R&D / B2G 운영 화면

2024

지역혁신클러스터 해양 관측 GIS. AOI, 관측소, 리포트 업무를 한 화면 흐름으로 묶었습니다.

역할: SSR 앱 구조, 지도 상호작용, 리포트 UX
문제: 관측 구역, 실시간 데이터, 문서 리포트가 흩어져 있어 운영자가 맥락을 잃기 쉬웠습니다.
구현: 지도 AOI를 중심에 두고 관측소 데이터와 리포트 CRUD를 같은 동선으로 배치했습니다.
결과: 복합 기능을 가진 B2G 플랫폼을 단일 프론트엔드 경험으로 정리했습니다.

Remix v2 SSR + Mapbox GL 기반으로 AOI 관리, 관측소 데이터, 리포트 작성 흐름을 구성했습니다.
WKT와 turf.js로 폴리곤 편집/계산 로직을 만들고 조위, 수온, 파고, 풍향, 풍속 데이터를 지도에 연결했습니다.
react-pdf 뷰어와 Vaul 모바일 Drawer를 붙여 데스크톱/모바일 운영자 화면을 함께 대응했습니다.

Remix v2Mapbox GLturf.jsreact-pdfVaul

AOI/관측소/리포트 통합

멀티모달 AI 시각화

미래도전과제 R&D / FE 단독 파싱

2022.09 - 2023.01AI

AI 산출물을 프론트엔드에서 직접 파싱하고 지식 그래프로 시각화했습니다.

역할: 파서 설계, 그래프 렌더링, 텍스트 연동 UX
문제: AI 산출물 포맷이 표준화되지 않아 백엔드 API를 기다리면 화면 검증이 지연되는 상황이었습니다.
구현: 프론트엔드 파싱 알고리즘을 직접 작성하고 MSW 기반 독립 개발 환경에서 데이터 흐름을 고정했습니다.
결과: 백엔드 없이 분석 결과 검증 화면을 먼저 완성했고, 모델 결과를 사람이 읽을 수 있는 그래프로 바꿨습니다.

LTF, Graph, Entity 산출물을 브라우저에서 직접 파싱해 Entity/Relation/Event 구조로 변환했습니다.
react-force-graph + Canvas API로 500개 노드 규모의 지식 그래프를 렌더링했습니다.
그래프 노드 호버와 원문 텍스트 토큰 하이라이트를 양방향으로 연결했습니다.

Reactreact-force-graphCanvas APIMSW

500노드 실시간 시각화

telepix-ui

사내 NPM 패키지 / 설계 및 운영

2024 -

사내 UI 디자인 시스템. 프로젝트마다 반복되던 UI 구현을 패키지로 표준화했습니다.

역할: 컴포넌트 API, 토큰, 번들/문서화
문제: 프로젝트별 UI 중복과 일관성 부족으로 신규 화면을 만들 때마다 같은 문제가 반복됐습니다.
구현: 토큰과 컴포넌트 레이어를 분리하고, Storybook 문서와 패키지 배포 흐름을 함께 만들었습니다.
결과: 반복 UI 구현 비용을 줄이고 사내 화면의 기본 품질선을 맞추는 기준 패키지가 됐습니다.

Radix UI + TailwindCSS 4 기반 컴포넌트 라이브러리와 100+ 시맨틱 디자인 토큰을 설계했습니다.
Rollup ESM/CJS 듀얼 번들링, Storybook v9 문서화, 접근성 애드온을 포함해 운영 가능한 패키지로 만들었습니다.
반복 UI 구현 비용을 줄이고 사내 화면의 기본 품질선을 맞추는 기준 패키지로 운영했습니다.

ReactRadix UITailwindCSS 4RollupStorybook

사내 공통 UI 패키지 운영

사내 인프라 전면 구축

네트워크, CI/CD, AWS

2023 -

프론트엔드 밖의 문제까지 직접 정리해 개발 조직의 배포/운영 기반을 만들었습니다.

역할: 네트워크/배포 인프라 설계와 운영
문제: 잦은 네트워크 장애와 수동 배포 때문에 개발 속도와 서비스 안정성이 모두 흔들렸습니다.
구현: 물리 네트워크, 내부 DNS/VPN, Docker 배포, Jenkins 파이프라인을 한 번에 정비했습니다.
결과: 개발팀이 자율적으로 배포할 수 있는 환경이 되었고, 네트워크 장애는 장기간 재발하지 않았습니다.

Switch/Router/방화벽/VPN/DNS 세팅, VLAN 분리, NAS 전용 회선을 직접 구성했습니다.
Jenkins + Docker(Portainer) 기반 CI/CD를 구축해 수동 배포와 상시 대기 구조를 줄였습니다.
사내 전용 서버에서 AWS로 운영 범위를 확장하고 Terraform IaC를 도입했습니다.

DockerJenkinsTerraformAWSPortainer

1~2일 장애 -> 2년+ 무중단

Orgentic

사이드 프로젝트 / 풀스택

2026AI

멀티 테넌트 AI 에이전트 오케스트레이션 플랫폼. 에이전트 작업 흐름을 그래프로 다룹니다.

Org -> Team -> Agent -> Task 4계층 멀티 테넌트 모델을 설계했습니다.
Claude Agent SDK + FastAPI 백엔드와 WebSocket 실시간 브로드캐스트를 연결했습니다.
@xyflow/react로 태스크 흐름, 에이전트 상태, 산출물을 추적하는 그래프 UI를 만들었습니다.

React 19FastAPIClaude Agent SDK@xyflow/reactWebSocket

멀티 테넌트 에이전트 흐름 시각화

GitHub ->

Lunchix

사내 사이드 프로젝트 / 풀스택

2025AI

AI 추천 맛집 지도. 벡터 검색과 공간 검색을 결합한 지도형 추천 서비스입니다.

OpenAI API + pgvector 임베딩으로 취향 기반 벡터 검색을 구성했습니다.
PostGIS 거리순 정렬과 AI 매칭 점수를 결합해 주변 식당 추천 알고리즘을 만들었습니다.
Kakao Map 시각화, Recharts 트렌드 분석, 크롤러와 어드민까지 풀스택으로 구성했습니다.

Next.jsKakaoMapOpenAIpgvectorPostGIS

Live ->

Comitsu

1인 개발 / TestFlight

2026

코스플레이어 일정/참여/알림 플랫폼. iOS 앱과 .NET 백엔드를 함께 만들었습니다.

SwiftUI iOS 앱과 Clean Architecture .NET 8 백엔드를 함께 설계했습니다.
이벤트 초대/참여, 캘린더 일정 공유, 검색/팔로우 소셜 기능을 구현했습니다.
FCM 푸시 알림, 딥링크, Keychain 인증, Docker/K8s 인프라 구성을 붙였습니다.

SwiftUIASP.NET CoreEntity FrameworkFirebase FCMDocker

TestFlight 배포 / FCM 알림

Stockelper

팀 프로젝트 / 프론트엔드

2025AI

AI 주식 투자 분석 플랫폼. 스트리밍 채팅과 금융 데이터 UI를 만들었습니다.

Next.js 15 + React 19 기반으로 SSE 스트리밍 AI 채팅 UI를 구현했습니다.
백테스팅 페이지, 포트폴리오 추천 테이블, 네트워크 관계 시각화 패널을 만들었습니다.
Prisma, TanStack Query, Docker/PM2 배포 흐름에 맞춰 화면과 데이터 로딩을 정리했습니다.

Next.js 15React 19PrismaTanStack QueryDocker

스킬

숙련도를 막대로 과장하지 않고, 어떤 프로젝트에서 어떤 문제를 풀었는지 기준으로 정리했습니다.

Frontend

React/Next.js 중심으로 지도, 대시보드, 운영툴을 반복적으로 만들었습니다.

React

지도/대시보드/AI UI 대부분의 기본 런타임

Next.js

App Router, Route Handler, 인증/배포 포함 풀스택 사용

TypeScript

데이터 모델, API 타입, 지도 레이어 상태 관리

Remix

LIC 플랫폼 SSR, 리포트/지도 운영 화면

TailwindCSS / Radix UI

telepix-ui 디자인 시스템과 제품 UI 표준화

GIS / Map

단순 지도 표시보다 좌표계, 타일, 레이어, 대용량 마커 문제를 많이 다뤘습니다.

OpenLayers

WMTS/WMS, proj4 좌표계 변환, 위성영상 정합

Mapbox GL / MapLibre

AOI, 마커/레이어, 미션 계획, 이 사이트의 Project Atlas

Leaflet

선박탐지 PoC, AIS 마커 회전, VWorld 위성타일

turf.js / PostGIS

AOI 폴리곤 계산, 위치 기반 추천/거리 정렬

Visualization

AI 산출물, 금융 데이터, 위성 궤도처럼 읽기 어려운 데이터를 화면으로 풀었습니다.

Canvas API

커스텀 그래프 렌더링, 이미지 필터, 차트 구현

react-force-graph / @xyflow

500노드 지식그래프, AI 에이전트 태스크 그래프

Three.js

지구/위성 3D 궤도, 이 사이트의 3D 히어로

Recharts / Chart.js

운영 대시보드, 트렌드/금융 차트

Backend / Data

프론트엔드에 필요한 API, DB, 인증 흐름은 직접 설계하고 검증합니다.

Python / Django

Fruiting 증권 플랫폼 4년 백엔드 유지보수, 권한/회원/결제/알림 운영 흐름

Supabase / Realtime

MateYou timesheet의 출근 상태, 승인 요청, 감사 로그, 실시간 출근자 현황

FastAPI / Flask

AI 연동, 크롤러, 프록시 API, 에이전트 백엔드

C# / ASP.NET Core

Comitsu Clean Architecture API, WPF 카메라 프로그램

PostgreSQL

pgvector, PostGIS, Prisma/EF 연동 프로젝트

Infra / Streaming

개발 환경, 배포 병목, 방송 인프라를 직접 해결한 경험이 강점입니다.

Docker / K8s

앱 배포, 스트리밍 서버, 백엔드 운영 환경

LiveKit / HLS / FFmpeg

방송 송출과 시청 경로 분리, 트랜스코딩 파이프라인

Nginx / CloudFront

라이브 스트림 프록시와 CDN 배포 경로

Jenkins / AWS / Terraform

사내 자율 배포 파이프라인과 IaC 운영

AI Product

AI API를 붙이는 수준을 넘어 결과를 검증하고 사람이 쓰는 UI로 만드는 데 초점을 둡니다.

Claude Code / Agent SDK

멀티 에이전트 작업 흐름, task graph, worktree 운영 실험

OpenAI / Gemini

추천, 생성, 분석 워크플로우와 스트리밍 UI

pgvector / RAG

식당 추천과 의미 기반 검색 실험

AI output parsing

LTF/Graph/Entity 결과를 FE에서 직접 구조화

연락

apitots@kakao.com GitHub 사이트 코드