AI/IoT 기반 보안 플랫폼 스타트업에서 프론트엔드 개발자로 근무하며, 대규모 서비스의 핵심 기능을 설계하고 구현하고 있습니다.

• 🖥️ 온보딩 가이드 시스템 전체 설계 및 구현 — 스포트라이트, 툴팁, 인터랙션 애니메이션
• 📹 실시간 영상 모니터링 위젯 구현 — HLS → WebRTC 전환, 열화상 카메라 연동
• 🌐 다국어(i18n) 자동화 파이프라인 구축 — Google Sheets · GitHub Actions · Slack 알림 연동
• 🔐 인증/라우팅 플로우 설계 — 프로젝트 생성 단계별 진입, 강제 로그아웃 세션 처리
• 🖥️ Electron 데스크탑 앱 메인 개발 — Slack · Notion · Figma · Gmail 통합 알림 위젯

Frontend

라이브러리 / 상태관리

Backend & Desktop

DevOps / 실시간

CCTV·센서·엣지 디바이스를 연결해 AI로 위험을 탐지하고 실시간 관제하는 B2B 엔터프라이즈 서비스 6개 레포지토리(ENT · AUTH · ADMIN · Mini · Design System · Translate)로 구성된 제품군에 참여

공통 기술: React 18 TypeScript TanStack Query Zustand Axios Vite

[ENT-FE] 메인 관제 앱 — 핵심 기능 다수 담당

• 온보딩 가이드 시스템 전체 구현: 스포트라이트 인터랙션, 단계별 툴팁(GSAP), 퀵 가이드 패널, 진행 상태 API 연동
• 실시간 영상 모니터링 위젯: HLS.js → WebRTC 전환, 열화상 카메라(듀얼) 연동, freeze 감지 및 자동 재연결
• 배치도 위젯: react-konva 기반 비콘 오버레이, 이미지 등록/정렬, 탭 구조
• 다국어(i18n): react-i18next 기반 일본어 포함 번역 텍스트 추출·적용, 언어별 레이아웃 수정
• 피처플래그 시스템 도입 및 정식 기능 전환 관리, 팀원 PR 코드 리뷰 및 머지 담당

추가 기술: HLS.js WebRTC react-konva xyflow react-grid-layout GSAP socket.io-client i18next

[AUTH-FE] 인증 · 프로젝트 온보딩 — 핵심 기능 기여

• 프로젝트 생성 단계별 플로우 구현 (멤버 초대 → 사용 용도 선택 → 완료)
• FLOW_OWNED_PATHS 도입 및 공통 라우팅 API 추출로 라우팅 구조 정리
• 강제 로그아웃 시 서버 세션 무효화, 헬스체크 기반 외부 네트워크 감지

[ADMIN-FE] 관리자 콘솔 — 핵심 기능 기여

• 프로젝트 생성·수정·삭제·비활성화 모달 및 API 연동
• 엣지 디바이스 할당·해제·목록 조회 API 연동 및 설정 팝업
• Google Sheets 연동, 슬랙 알림 활성화, 이메일 도메인 검증

[Mini-FE] 경량 실시간 관제 화면 — 기여

• HLS → WebRTC 전환, Socket.io 기반 브라우저 간 모듈 생성·수정·삭제 실시간 동기화
• freeze 감지·자동 재연결, 쿨다운 기반 호출 빈도 제어

추가 기술: HLS.js WebRTC Socket.io react-konva

[Design System] 공용 컴포넌트 라이브러리 — 메인 개발자 ·

• Input · SearchBar · Avatar · AvatarStack · Checkbox · Radio · Chip 컴포넌트 설계 및 구현
• useInputState 훅, InputTrailing 분리 등 Input 계층 구조 설계
• style-dictionary 기반 디자인 토큰 CSS 자동 생성, npm 자동 배포 GitHub Actions 구축

추가 기술: style-dictionary npm GitHub Actions

[Translate-FE] i18n 자동화 파이프라인 — 메인 개발자

• Google Sheets ↔ 서비스 레포 간 번역 키 자동 동기화 파이프라인 전체 구축
• deprecated 번역 키 감지·마킹 로직, import/pull 워크플로우 동시 실행 시 rebase 충돌 수정
• 자동 번역 실패 Slack 멘션 및 원인 분류, Sheets API 쓰기 쿼터 초과 방지 재시도 로직

추가 기술: Node.js Google Sheets API GitHub Actions Slack API

Slack · Notion · Figma · Gmail 알림을 하나의 macOS 트레이 앱으로 통합

메인 개발자

• Electron IPC 아키텍처 설계 및 메인/렌더러 프로세스 전체 구현
• Slack · Notion · Figma · Gmail(IMAP) 서비스 커넥터 구현
• OAuth 2.0 콜백 포트 폴백, 빌드 타임 Client ID/Secret 주입
• Groq AI API 연동 메시지 요약 기능 및 provider별 에러 분류
• 서비스별 폴링 주기·수집 기간 커스터마이징, 긴 메시지 더보기/접기 UX
• 다크/라이트 모드 토글 및 시스템 테마 연동
• GitHub Actions CI/CD, macOS 코드 서명·공증, 자동 업데이트(electron-updater) 파이프라인 구축

Electron React TypeScript IPC OAuth 2.0 IMAP Groq AI GitHub Actions

회의를 녹음·AI 요약하고 칸반보드·캘린더로 일정을 관리하는 협업 서비스

WebRTC · 실시간 통신 · AI 연동 담당

• WebRTC 회의방 구현 및 coturn STUN/TURN 서버 연동
• AI 요약 연동: 회의 생성자만 AI 서버 호출, 일반 사용자 요약 완료 실시간 동기화
• 녹음 버튼 생성자 전용 표시, 회의당 녹음 1회 제한, 1분 미만 녹음 버튼 비활성화
• Socket.io 서버 CORS 설정, 한글 채팅 마지막 문자 중복 전송 버그 수정
• leaveRoom 조건 및 리다이렉트 플로우 정리, fetch → axios 전면 마이그레이션

React Vite Socket.io WebRTC Express MySQL JWT FullCalendar DnD Kit

음식 사진을 업로드하면 AI가 분석·추천해주는 서비스

백엔드 · 프론트엔드 공동 기여

• Backend: 프로젝트 초기 설정, JWT 인증(로그인/회원가입), 이미지 등록·삭제 API, 환경변수 보안 처리, enum 리팩토링
• Frontend: 이미지 검색 기능, 키워드·이미지 데이터 처리, 컴파일 에러 수정

Java Spring Boot JWT Next.js TypeScript Zustand Tailwind CSS styled-components