김형진 / KIM HYUNGJIN
AI Product Engineer · Frontend-focused Full Stack Engineer
제품의 화면에서 데이터와 현장 시스템까지.
방송과 관제, Android·Web 애플리케이션을 개발해 왔습니다. 현재는 스마트 중계 시스템의 백엔드 구축을 리드하며, DRS Intelligence의 데이터·사용자 흐름을 설계하고 있습니다.
현재 프로젝트
진행 중인 백엔드 구축과 데이터·사용자 흐름 설계를 구분해 소개합니다.
01Backend / Connected Systems
스마트 중계 시스템
기존 항만 중계 흐름의 동작 규칙을 새 시스템으로 옮기면서, 메시지 라우팅·재처리·실시간 집계의 기준을 일관되게 정해야 했습니다. 운영 규칙을 개별 처리 로직에 흩어두지 않고, 메시지 경로와 재시도·DLQ 정책을 먼저 명시하는 방식으로 접근했습니다.
Spring Boot·Kotlin 기반 메시지 처리 API와 재처리 구조를 설계하고, Artemis의 라우팅·재시도·DLQ 기준을 정의했습니다. Flink 집계 파이프라인과 함께 운영 대응 규칙, 배포 전 중복·누락 시나리오 점검 절차를 정리했습니다. 차세대 스마트 중계 시스템의 백엔드를 설계·구축 중입니다. 메시지 처리 정책과 실시간 집계 구조를 담당하고 있습니다.
02Connected Systems / AI Experience
DRS Intelligence
통신 규격과 화면이 분리된 항만 시스템에서 운영자가 여러 신호와 영상을 직접 맞춰 상황을 해석해야 했습니다. 데이터를 연결하는 구조와 사람이 근거를 확인하고 판단하는 흐름을 함께 설계했습니다. AI의 제안과 관리자의 실행 권한도 분리했습니다.
수집–정형화–처리 레이어를 나누고, 관제 화면과 시뮬레이터에서 사용하는 데이터 구조·화면 흐름을 정의했습니다. 상황 설명 → 근거 확인 → 대응 방안 → 관리자 실행으로 이어지는 Copilot 흐름과 승인 경계를 설계했습니다. 데이터 연결 구조와 관제·Copilot 사용자 흐름의 설계 사례입니다. 화면과 데모에서 근거 확인부터 사람의 실행 판단까지의 흐름을 보여줍니다.
데모 영상
대표 제품 경험
직접 구현하고 출시한 제품부터 사용자 환경 대응과 제품 리딩까지.
01Mobile / AI-connected Application
Codex Remote
PC 앞이 아닌 시간에는 AI Coding Agent의 작업을 확인하고 대화를 이어가기 어려워, 짧은 공백 시간에도 개발 맥락을 연결할 방법이 필요했습니다. Cursor Remote의 확장 프로그램–PC 서버–모바일 앱 구조를 재사용해 Codex CLI와 모바일 경험을 연결했습니다.
모바일에서 Codex 세션에 프롬프트를 보내고 응답을 실시간으로 받는 상호작용을 구현했습니다. 로컬·릴레이 연결과 토큰 기반 인증 구조를 계승하고, iOS·Android 앱과 VS Code 확장으로 제품화했습니다. App Store·Google Play·VS Marketplace에 배포해 PC 앞이 아닌 시간에도 Codex 작업과 상호작용할 수 있는 제품을 만들었습니다.
02Product / Technical Leadership
ViewCube
팀 내에서 사용자 맞춤의 범위와 기준이 합의되지 않아, 어떤 기능과 데이터 구조부터 만들지 정하는 일이 먼저 필요했습니다. PO 역할을 맡아 사용자 맞춤의 기준을 정의하고, 대시보드·템플릿·위젯을 구분해 기획과 설계·개발을 연결했습니다.
Next.js와 react-grid-layout으로 드래그·크기 조절이 가능한 편집기를 만들고 GraphQL 데이터 연동을 구현했습니다. 개발 과정에서 발견한 겹침 허용·자동 정렬 설정의 레이아웃 문제를 react-grid-layout 수정 기여로 연결했습니다. 사용자가 관제 화면을 직접 구성하는 제품을 구현했고 TTA GS 1등급 인증(2024)을 획득했습니다. 레이아웃 수정 내용은 PR #1782에서 확인할 수 있습니다.
데모 영상
03Mobile / User Experience
모야모
고연령 사용자가 화면을 크게 확대하는 환경에서 텍스트와 버튼·리스트의 배치가 깨지고 주요 기능에 접근하기 어려웠습니다. 일반적인 모바일 화면 기준보다 실제 확대 사용 조건을 기준으로 UI 구조를 다시 검토했습니다.
확대 환경에 맞춰 텍스트·버튼·리스트 구조를 조정하고 핵심 기능의 접근 문제에 대응했습니다. Kotlin·MVVM·RxJava 기반 상용 Android 앱을 개발·운영하며 사진 중심 서비스의 개인정보 처리 이슈도 다뤘습니다. 사용자의 실제 사용 조건을 반영해 앱 UI를 개선하고 상용 서비스를 운영했습니다. 화면 구현뿐 아니라 접근성과 데이터 취급을 함께 고려한 경험입니다.
04Mobile / Web / Service
BBChat
다국어 번역 메신저의 사용자 기능과 번역 요청·완료 처리, 운영 업무를 하나의 서비스 흐름으로 연결해야 했습니다. 화면 구조와 상태 흐름을 직접 설계하면서, Client만이 아니라 운영 도구와 인프라까지 함께 이해하는 방향으로 범위를 넓혔습니다.
React·MobX 기반 프론트엔드와 Android 앱을 개발·유지보수하고 번역 운영 Backoffice를 구현했습니다. AWS 인프라 구축·운영과 Apache Spark 기반 통계 시스템을 다루며 서비스 운영에 필요한 영역을 연결했습니다. Web·Android·Backoffice와 인프라를 함께 다루는 서비스 개발 경험을 쌓았습니다. 이후 애플리케이션의 문제를 Client 하나에 한정하지 않게 된 계기였습니다.
그 외 프로젝트 경험
각 프로젝트의 문제 해결 과정과 화면을 확인할 수 있습니다.
Meal Plan
아이의 식단을 정할 때 선호·영양·안전 조건과 준비 시간을 함께 고려해야 해, 매일 반복되는 결정의 부담이 컸습니다. 추천 결과만 제시하기보다 역할별 AI 에이전트와 설명 화면을 연결해 보호자가 판단할 수 있는 흐름을 만들었습니다.
메뉴 생성, 연령·알레르기 조건 검토, 추천 근거 설명을 담당하는 에이전트를 분리해 연결했습니다. AI 영양사 회의와 결과 리포트 화면을 나누고, 선호·재료 상황과 추천 근거를 함께 보여주도록 구성했습니다. 추천을 보호자의 의사결정으로 연결하는 프로토타입을 만들었습니다. 메뉴뿐 아니라 선택 근거와 조건을 확인하는 경험에 집중했습니다.
- AI 에이전트 오케스트레이션 기반 식단 의사결정 지원 프로젝트
- 아이 선호/날씨/재료 상황을 반영한 메뉴 후보 제안
- 추천 근거(트렌드·영양·가성비)와 안전 조건을 함께 설명하는 리포트 제공
- 링크: Meal Plan 서비스 보기 ↗
Cursor Remote
육아 중 PC를 떠나는 시간이 반복돼 개발 흐름이 끊겼고, 모바일로 짧은 시간에도 작업 맥락을 이어갈 방법이 필요했습니다. 휴대폰에서 전체 IDE를 재현하기보다, 프롬프트와 응답을 이어가는 모바일 우선 원격 개발 흐름을 설계했습니다.
Cursor IDE 확장·PC 서버·Flutter 모바일 앱을 연결하고 WebSocket 기반 양방향 상호작용을 구현했습니다. 같은 네트워크의 직접 연결과 다른 네트워크의 릴레이 연결을 나눠 원격 사용 흐름을 구성했습니다. 모바일에서 Cursor AI와 상호작용하는 원격 개발 도구를 만들었고, 이 구조를 이후 Codex Remote로 확장했습니다.
- 육아 중 짧은 공백 시간에도 개발 맥락을 유지하기 위한 모바일-우선 원격 개발 실험
- Cursor IDE 확장 + PC 서버 + 모바일 앱을 연결하는 구조로 실사용 시나리오 검증
- 링크: VS Marketplace ↗
- 링크: Cursor Remote 웹 ↗
인천공항 자율주행 버스 관제
차량·노선·이벤트를 지도에 동시에 표현할 때 확대·이동 시 렌더링 성능이 저하됐고, 폐쇄망과 강화된 보안 정책도 고려해야 했습니다. 지도 표시 성능과 운영 환경의 제약을 함께 다루면서 현장에서 사용할 수 있는 관제 UI를 구축했습니다.
GeoServer를 활용해 지도 오브젝트 표시를 최적화하고 차량·노선 상태를 보여주는 관제 SPA를 구현했습니다. 노선 등록·관리와 이벤트 모니터링을 연결하고, 폐쇄망 설정과 공항 보안 정책에 맞춰 개발·운영했습니다. 인천공항 T1 주차장–공항 구간의 자율주행 버스 관제 화면을 구축했습니다. 지도 성능과 제한된 인프라 조건을 함께 다룬 경험입니다.
- 인천공항 T1 주차장–공항 구간 자율주행 버스 관제 솔루션 개발
- GeoServer 기반 지도 오브젝트 렌더링 최적화
- 폐쇄망과 강화된 보안 정책 환경에서 안정적 개발 및 운영 대응
M& STUDIO
TV·라디오 생방송은 지연·중단이 방송 사고로 이어질 수 있고, 방송 중에도 포맷과 요구사항이 바뀌는 환경이었습니다. 메시지 수집·처리와 방송 송출의 안정성을 우선으로 두고, 현장의 변경 요구를 운영 흐름 안에서 반영했습니다.
실시간 참여 메시지 처리와 송출 도구를 개발하고, 대량 메시지·화면 처리 최적화와 방송 포맷 대응을 수행했습니다. PD·작가와 요구를 조율하며 자막 형태와 운영 도구를 개선하고 장기간 유지보수했습니다. 국내 주요 방송사 프로그램에 적용된 솔루션을 10년 이상 개발·운영했습니다. M& STUDIO는 2009년 GS 인증을 획득했습니다.
- 생방송 참여 메시지 처리 시스템 설계/개발
- 방송 중 실시간 요구사항 변경 대응 및 안정적 반영
- 오디션 프로그램 자막 형태 표준화와 사용자 피드백 확보
- 대량 메시지/화면 처리 최적화를 통한 성능 개선
교량 균열 검출 시스템
현장 진동은 자이로센서의 하드웨어 보정만으로 충분히 다루기 어려워, 영상에서 균열을 검출하기 위한 소프트웨어 보정이 필요했습니다. 원격제어 로봇 카메라 영상의 흔들림을 고려한 균열 검출 알고리즘을 제안하고 직접 소프트웨어로 구현했습니다.
하드웨어 보정과 소프트웨어 흔들림 보정을 연결하는 이미지 처리 흐름을 설계했습니다. 제안한 알고리즘을 기반으로 균열 검출 소프트웨어를 설계·개발하고 관련 논문을 발표했습니다. 현장 영상의 제약을 알고리즘과 애플리케이션으로 연결한 연구·개발 경험입니다. 시스템 구조와 이미지 처리 화면을 함께 제시합니다.
- 자이로센서 기반 하드웨어 보정 + 소프트웨어 흔들림 보정 파이프라인 설계
- 원격제어 로봇 카메라 영상 기반 균열 검출 알고리즘 단독 제안
- 제안 알고리즘 기반 균열 검출 소프트웨어 단독 설계/개발
- 관련 논문 발표
Open Source
react-grid-layout ↗
React에서 드래그·크기 조절과 반응형 배치를 지원하는 그리드 레이아웃 라이브러리입니다. ViewCube의 대시보드 편집 기능에 활용했습니다.
기여
allowOverlap=true·compactType=null 조합에서 레이아웃이 의도치 않게 재배치되는 오류를 수정하고, 겹침 허용 설정을 정렬 로직에 전달하도록 보완했습니다.
airbnb/Showkase ↗
Jetpack Compose의 컴포넌트·색상·타이포그래피를 탐색하고 미리 볼 수 있는 Android UI 카탈로그 라이브러리입니다. 다크 모드·글자 확대 등 다양한 조건에서 UI를 확인할 수 있습니다.
BulletGraph ↗
Android용 Bullet Graph 위젯 라이브러리입니다. 블록·원형·선형 그래프와 값 범위에 따른 마커의 가로 위치 계산을 지원합니다.