안녕하세요,
프론트엔드 개발자 정연희입니다.

개요

전기차 이동형 충전 트레일러의 위치·배터리·주행 상태를 실시간으로 모니터링하는 관제 서비스. FE를 전담하여 상태 모델링, Mock API 환경 구축, 지도 기반 시각화를 구현.

주요 작업

• Frontend 유한 상태 머신 기반 UI 모델링

  차량 모델별 예약 라이프사이클이 달라 차종 추가 시마다 컴포넌트 내 중첩 분기문 수정 필요 및 버그 반복 발생의 문제가 있었습니다. 이를 해결하기 위해 차종 및 예약 상태를 키로 다음 상태, 버튼, API를 반환하는 상태 전이 객체(FSM)를 설계하여 컴포넌트 내 분기문을 완전히 제거하고, 신규 차종 추가 시 FSM 설정 객체만 추가하는 확장 구조를 확립했습니다.

• Testing 회귀 테스트를 통한 상태 전이 안전망 확보

  차종 증가에 따라 상태 전이 케이스가 다양해지면서, 신규 전이 추가 시 기존 전이의 오작동 위험이 있었습니다. 이에 Vitest로 FSM 로직의 단위 테스트를 작성하여 리팩토링 전 기존 동작을 테스트로 고정하였고, 구조 개선 시에도 기존 상태 전이가 안전하게 자동 검증되는 안전망을 구축했습니다.

• Frontend MSW 도입을 통한 독립적 개발 환경 구축

  물리 차량 통신 프로토콜 정의 및 백엔드 API 개발 지연으로 인해 프론트엔드 작업 병목이 발생했습니다. 개발 속도를 높이기 위해 MSW(Mock Service Worker)로 네트워크 레벨의 모킹 환경을 직접 구축하였고, 실제 API 없이도 전체 시나리오 테스트가 가능하도록 구성하여 백엔드와 완전한 병렬 개발을 수행해 프로젝트 전체 일정을 2주 단축했습니다.

• Frontend 지도 기반 실시간 관제 데이터 시각화

  다수 차량의 실시간 이동 경로와 배터리 현황을 지도 상에서 끊김 없이 모니터링해야 하는 요구사항이 있었습니다. Kakao Map API와 Socket.io를 연동하여 실시간 위치 및 상태 데이터를 지도에 매핑하였고, 대량의 데이터 인입 시에도 안정적으로 시각화가 유지되도록 구현했습니다.

성과

• FSM 추상화로 조건부 분기 코드 제거 및 컴포넌트 구조 단순화
• MSW 기반 병렬 개발 환경 구축으로 프로젝트 일정 2주 단축

개요

소형 자율주행 교육용 차량용 원격 데스크톱 솔루션. WebRTC 기반 화면 스트리밍·원격 제어 인터페이스를 담당.

주요 작업

• Frontend WebRTC 기반 원격 제어 인터페이스 설계

  HTTP/소켓 오버헤드로 인해 실시간 제어 명령 전송 시 지연이 발생하는 문제가 있었습니다. 이를 해결하기 위해 키보드 및 마우스 이벤트 전송을 WebSocket에서 WebRTC Data Channel로 전환하고, 5G/WiFi 및 내외부망 18개 시나리오 실측 테스트를 수행하여 HTTP 오버헤드를 제거하고 다양한 네트워크 환경에서 안정적인 제어 응답성을 확보했습니다.

• Frontend 차량 클라이언트 수신 부하 최적화

  고빈도 이벤트 전송 시 차량 클라이언트의 수신 버퍼 오버플로우 및 연산 병목이 우려되었습니다. 이를 방지하기 위해 송신단에서 디바운싱 및 마우스 좌표 샘플링 처리를 적용하여 전송 빈도를 제어했고, 수신 부하를 안정화하여 안정적인 제어 주기를 확보했습니다.

• Frontend 실시간 스트리밍 컴포넌트 및 재접속 복구 로직

  원격 환경 특성상 무선 네트워크 변동으로 인해 화면 송출이 유실되면 수동으로 재접속을 수행해야 하는 비효율이 있었습니다. 이를 개선하기 위해 GStreamer 스트림 프레임 전송 상태를 실시간 감지하여 WebRTC 커넥션 수명주기와 연동했고, 유실 및 핑 타임아웃 감지 시 자동으로 재접속 시그널링을 수행하도록 하여 영상 시청과 실시간 제어가 통합된 안정적인 원격 조작 환경을 구현했습니다.

성과

• WebRTC Data Channel 도입으로 제어 명령 전송 지연 500ms → 50ms 단축
• mousemove 이벤트 샘플링으로 이벤트 유실 및 화면 버벅임 해소
• 5G/WiFi·내외부망 18개 시나리오 전 구간 정상 동작 확인

개요

자율주행 개발에 필요한 환경 설정부터 모듈 실행·로그 관리까지 웹 UI로 통합한 개발 플랫폼. 사내 개발자용 내부 툴로 시작하여 교육생·실제 서비스로 확장되었으며, Django 템플릿 기반 서버 렌더링 구조를 React로 전환하는 마이그레이션을 주도하고, 성능 최적화와 배포 자동화까지 FE 전반을 담당.

주요 작업

• Frontend React 구조로의 점진적 마이그레이션

  Django 템플릿 기반의 서버-UI 강결합 구조로 인해 확장성에 한계가 있고 컴포넌트 재사용이 불가능했습니다. 이를 해결하기 위해 전환 PoC를 직접 주도하여 생산성을 입증한 뒤, UI 로직을 React 아키텍처 및 JSON 비동기 API 구조로 라우트 단위 점진적 마이그레이션을 수행하여 공통 컴포넌트 재사용이 가능한 독립적 프론트엔드 구조를 확립했습니다.

• Frontend 번들 사이즈 최적화

  서비스 기능 확대로 인해 초기 로딩(LCP) 속도가 3.8초까지 지연되어 진입 경험이 저하되는 성능 문제가 있었습니다. 이를 개선하기 위해 Webpack 라우트 단위 코드 스플리팅을 적용하고, 웹폰트 WOFF2 포맷 전환 및 이미지 WebP 변환 최적화를 도입하여 초기 번들 사이즈를 80% 감소시키고 로딩 속도를 3.8초에서 1.6초로 단축했습니다.

• ETC 배포 프로세스 자동화

  협업 브랜치 관리 기준 부재 및 수동 서버 배포 프로세스로 인해 월 평균 5건의 배포 장애가 발생했습니다. 배포 안정성을 위해 Git Flow 전략을 도입하고 가이드 문서를 전사 배포하였으며, GitHub Actions 기반의 CI/CD 파이프라인을 구축하여 배포 리드타임을 15분에서 2분으로 단축하고 배포 장애를 월 5건에서 1건 수준으로 감소시켰습니다.

• Frontend 실시간 통신 개편 (Polling → WebSocket)

  기존 HTTP Polling 방식의 주기적 요청으로 인해 실시간 데이터 동기화가 지연되고 관제 실시간성이 떨어지는 문제를 확인했습니다. 이를 해결하기 위해 Socket.io 기반의 양방향 웹소켓 통신 구조로 개편하고 Skeleton UI를 적용하여 데이터 지연 시간을 2초에서 0.5초로 75% 단축했습니다.

성과

• 초기 번들 사이즈 80% 감소, 로딩 속도 3.8초 → 1.6초 단축
• 배포 리드타임 15분 → 2분 단축, 배포 장애 월 5건 → 1건 감소
• 실시간 데이터 동기화 지연 2초 → 0.5초 단축

개요

교회 내 공간 예약을 카카오톡으로 관리하던 방식에서, 예약 후 관리자가 구글 캘린더에 일정을 직접 옮겨 적어야 했던 문제를 해결하기 위해 개발한 공간 예약 서비스. 장소 필터링, 실시간 예약 현황 확인, 구글 캘린더 동기화 구현.

주요 작업

• Frontend 사용자 인터뷰 기반 모바일 인터페이스 최적화

  사용자 인터뷰 결과 복잡한 예약 과정과 협소한 모바일 화면에서의 조작 불편함이 주요 이탈 요인으로 파악되었습니다. 이를 해결하기 위해 드래그앤드롭 기반 타임라인을 구축하고, 단일 화면 내에서 시간 선택부터 바텀시트 예약 제출까지 자연스럽게 이어지도록 조작 동선을 축소하여, 별도 마케팅 없이 일간 평균 사용자 30명을 안정적으로 유지하고 있습니다.

• Frontend Google Calendar API 기반으로 관리자 수동 작업 제거

  예약 등록 시 매번 구글 캘린더에 직접 재등록해야 하고, 수정·삭제 시 내역 비교 및 수동 반영으로 운영 리소스 낭비가 있었습니다. Google Calendar API를 연동하여 예약 등록·수정·삭제 상태 변경 시 캘린더 일정이 실시간 자동 동기화되도록 구현하여 관리자의 수동 작업을 완전히 제거했습니다 (최대 일 20건).

• Frontend 장소 필터링 및 중복 예약 방지

  원하는 장소 검색 필터링이 부재하고, 동일 시간 예약 충돌 현상이 지속되는 문제가 있었습니다. 태그 및 층 기반 필터링 기능을 구현하여 장소 탐색 편의성을 제고하고, Drizzle ORM 트랜잭션 격리 처리를 도입하여 예약 경쟁 조건(Race Condition)을 안전하게 제어함으로써 중복 예약을 원천 차단했습니다.

성과

• Google Calendar API 연동으로 관리자 수동 등록 작업 제거 (최대 일 20건)
• 일간 평균 사용자 30명 안정적 유지