포트폴리오로

인쇄 창이 열리면 대상(프린터)을 PDF로 저장으로 바꾸고 저장하세요. 배경 그래픽은 켜지 않아도 됩니다.

최승은Seungeun Choi

실시간·3D·모바일 앱까지, 현장에서 쓰이는 서비스를 만들어 온 프론트엔드 개발자

plumxeun@gmail.comgithub.com/xeunniexeunnie.github.io

Summary

  • 폐쇄망 WebRTC CCTV, LiveKit SFU 화상회의, WebSocket·SSE 실시간 동기화 등 브라우저에서 다루기 까다로운 미디어·실시간 영역을 반복해서 맡아 왔습니다.
  • Three.js 3D 관제 시스템과 GPS 기반 골프장 운영 서비스처럼 실제 현장에서 매일 돌아가는 프로덕션을 개발하고, 현장 배포·즉시 수정까지 책임졌습니다.
  • React Native 앱을 개발부터 네이티브 설정·릴리스 서명·스토어 제출까지 단독으로 수행하며 웹 밖의 배포 파이프라인도 직접 다뤘습니다.
  • FSD 아키텍처, zod 2층 계약 테스트, API 응답 계약 문서화처럼 '왜 이렇게 했는지'가 남는 구조를 선호하고, 되돌린 결정도 근거와 함께 기록합니다.
Focus
React · TypeScript · Next.js
Realtime
WebRTC · WebSocket · SSE
Beyond Web
React Native · Three.js
Also
Kotlin · Go · Spring Boot

Skills

Frontend Core
ReactNext.jsTypeScriptVue.js
Realtime & 3D
WebRTCLiveKitWebSocketThree.jsWebGL
Testing & QA
StorybookJestTesting LibraryCypressPlaywright
Backend & Infra
Spring BootKotlinGoDockerKafkaRedis
Language
JavaScriptJava
Frameworks
SvelteZustandReact QueryReduxPinia
Database
MySQLPostgreSQLMongoDBMariaDBAmazon S3
DevOps
KubernetesJenkinsHAProxyNginxGCP
Monitoring
PrometheusGrafanaJMeterSentryCodecov

Experience

플럭시티 · 클라우드팀

2025.11 — 현재 · 정규직

골프장에서 매일 실사용되는 서비스의 제품 단위 책임자로 일하고 있습니다. GPS 좌표를 코스맵 픽셀로 변환하고, 움직이는 카트 위에서도 정확히 동작하는 터치 UX를 설계했으며, F&B 제품 전반과 React Native 앱을 스토어 제출까지 각각 단독으로 진행했습니다. 사설망 프린터, 망분리 단말, 스토어 심사처럼 브라우저 밖의 조건까지 고려해야 했습니다.

  • Vgolf 경기관제 태블릿 앱 — 500ms GPS 폴링 데이터를 Proj4로 코스맵 픽셀 좌표에 매핑, 홀 폴리곤 지오펜싱으로 진행 홀 자동 전환
  • 움직이는 카트 환경의 터치 UX — 진동·속도 변수를 고려해 useTap(30px 허용 임계값), Ghost Click 방지, 더블클릭 가드를 설계
  • VGOLF F&B 제품 전반 단독 개발 (10개월 · 520커밋) — 주문·관리자·주방 영수증 출력·매장 사이니지 서브시스템을 설계·구현
  • ESC/POS 열전사 프린팅 직접 구현 — 클라우드 정적배포 앱과 매장 사설망(192.168.x.x) 프린터가 닿지 못하는 구조를 로컬 에이전트 경유 raw TCP 브릿지로 해결

플럭시티 · DX 기술팀

2025.04 — 2025.11 · 정규직

3D·지도 기반 관제 SI의 프론트엔드 책임자로 일했습니다. 그 전 1년간 부트캠프와 스터디에서 익힌 것을 실무에서 본격적으로 쓴 곳입니다. 폐쇄망 현장에서 WebRTC CCTV를 운영까지 올렸고, 프로젝트마다 복사되던 컴포넌트와 API 호출을 모노레포 패키지로 옮겼습니다.

  • 3D 역사 관제 — 자체 엔진으로 GLTF 모델을 띄우고 층별 전환·POI·장치 상태를 하나의 실시간 관제 화면에 통합
  • 다중 CCTV 동시 스트리밍과 ICE 상태 기반 재연결 로직 구현
  • 부산 도시철도 통합 관제 — 협업처 관제 플랫폼 API 스펙에 맞춰 시설물 9종(조명·셔터·CCTV·화재감지·엘리베이터 등)과 제어 인터페이스를 타입으로 고정해 연결
  • WebRTC CCTV — RTCPeerConnection recvonly 트랜시버로 게이트웨이와 SDP를 교환해 RTSP 카메라를 브라우저에서 재생, 현장 운영 적용

웹비즈 크리에이티브

2023.11 — 2024.02 · 정규직

공공기관 SI를 맡았습니다. 디자인 시안부터 반응형 퍼블리싱, PHP 연동까지 혼자 진행하는 일이었고, 6개 기관 약 200페이지를 일정에 맞춰 넘겼습니다. 쓸 수 있는 기술은 제한적이었지만 마감과 접근성 기준을 지키는 법을 익혔습니다.

  • 공공기관 SI 전 과정 — 디자인 시안, 반응형 퍼블리싱, PHP 템플릿 연동까지 한 사람이 담당
  • 리픽 — Vue.js + TypeScript 컴포넌트 설계, Pinia 상태 관리, Storybook UI 문서화로 디자이너·백엔드와의 협업 접점을 체계화
  • 인천교육청 교육이음 — XD 기반 교육 플랫폼 UI/UX 디자인 + 반응형 퍼블리싱을 맡아 수행
  • 공공기관 6개 사이트 약 200페이지 — 이민재단(60) · 싸템(69) · 양구수목원(43) · 사회보장정보원(18) 등의 마크업을 전량 단독 수행

스탬퍼 (Cosmostation)

2022.09 — 2022.12 · 인턴

블록체인 생태계에서 React·TypeScript를 실무에 적용한 첫 현장입니다. 티켓 단위로 기능을 맡아 신규 체인 추가와 토큰 검색 페이지를 만들었고, 같은 기능을 리뷰 코멘트에 따라 여러 번 다시 올리며 '동작하는 코드'와 '리뷰를 통과하는 코드'의 차이를 배웠습니다.

  • Kujira 체인 추가 — 체인 상수·심볼 에셋·체인 목록 등록까지 신규 체인 온보딩 전 과정을 티켓 단위로 담당
  • ERC20·CW20 토큰 검색 페이지 제작 — 특정 체인 전용이던 CW20 검색을 전 체인 지원으로 확장
  • 검색 입력 디바운스 처리 — 입력마다 발생하던 조회를 줄이고, 직접 만든 로직을 공통 useDebounce 훅으로 정리
  • 리뷰 반영 반복 — 조건 판단 단순화, 불필요한 로그·주석 제거, 스타일 정리를 코멘트에 따라 여러 차례 다시 올림

아주대학교 커뮤니케이션팀

2021.08 — 2022.03 · 인턴

비개발 조직의 유일한 개발 담당이라 문제를 혼자 찾아 해결해야 했습니다. 직접 디자인해 올린 팝업의 반응을 Google Analytics로 확인하며, 만든 결과를 데이터로 확인하는 습관이 생겼습니다.

  • 교내 공식 웹사이트 유지보수 — 중복된 HTML 구조를 통합하고, CSS 네이밍 체계를 정리해 유지보수성 확보
  • 팝업 UI 직접 디자인·구현 후 Google Analytics로 반응 확인 — 코드가 사용자 행동에 미치는 영향을 체감
  • 레거시 리팩토링 — 불필요한 JS 로직 제거로 페이지 로딩 속도 개선 및 런타임 오류 감소
  • 계약 종료 후에도 외주 형태로 지속 유지보수 담당 — 신뢰 기반의 장기 협업 관계 유지

Selected Projects

부산 도시철도 통합 관제3D 역사 관제 + WebRTC CCTV 실시간 스트리밍

플럭시티 · 2025.05 — 2025.09

협업처 플랫폼 API 스펙에 맞춰 시설물 9종을 연결하고, WebRTC로 현장 CCTV를 붙여 실제 운영에 올린 도시철도 관제 화면

  • 협업처가 어떻게 구현했는지 알 수 없는 상태에서, 가능한 연결 방식을 미리 다 준비해 가서 현장에서 하나씩 붙여 보며 맞는 것을 찾아냄
  • WebRTC CCTV 연결 — RTCPeerConnection recvonly 트랜시버로 게이트웨이와 SDP를 교환해 RTSP 카메라를 브라우저에서 재생, 현장 운영 적용
  • ICE 상태 감시 + 스트림 정리 — failed/disconnected 시 연결을 닫고, 트랙 stop·srcObject 해제 후 재연결하는 경로를 분리
  • 협업처 플랫폼 API 스펙 기반 연결 — 조명·셔터·CCTV·화재감지·엘리베이터·에스컬레이터·물탱크·집수정·공기청정기 9종 + 역사 환경정보·이벤트 현황·제어 요청을 타입으로 고정
  • 서로 다른 두 백엔드를 한 화면에서 — 협업처 관제 플랫폼과 자사 API를 클라이언트 레벨에서 분리해 호출
ReactTypeScriptViteThree.jsWebGLWebRTCSSEZustandkyTailwind CSSpnpm

VGOLF 앱골프 라운드 기록 모바일 앱 (iOS · Android)

플럭시티 · 2026.06 — 2026.09

React Native 앱을 개발부터 스토어 제출까지 — 555커밋, zod 2층 계약 테스트로 무증상 데이터 오류를 화면 반영 전에 검출

  • React Native 앱 — 555커밋, 화면 21개, 16.5k LOC, iOS·Android 동시 대응
  • FSD 5레이어 + 세그먼트 구조 — 슬라이스 공개 API 규칙으로 '기능 삭제 = 폴더 삭제'가 성립하는 코드베이스
  • zod 2층 스키마(런타임·엄격) 실서버 계약 테스트 — 서버 par: null로 모든 홀이 더블보기로 표시되던 무증상 오류를 사전 검출
  • API 응답 불일치 12건을 영향·우선순위(P0/P1) 표로 문서화해 백엔드에 전달 — 하위 호환을 지키는 형태로 제안
  • 3겹 안전망(ErrorBoundary · 전역 핸들러 · QueryState) + axios 에러 6종 정규화 — 로딩·에러·빈 상태를 컴포넌트 3개로 수렴
React NativeTypeScriptZustandReact QueryZodReact Hook FormNativeWindReanimatedMMKVAxiosSentryJestiOSAndroidFigmaStorybook

VGOLF F&B주방 프린터부터 디지털 사이니지까지, 매장을 돌리는 F&B 시스템

플럭시티 · 2025.12 — 2026.09

10개월 520커밋 — 클라우드 웹앱을 매장 사설망 프린터와 잇고, 무네트워크 부팅 사이니지까지 붙인 매장 운영 시스템

  • 10개월 · 520커밋 — Next.js App Router 정적 export, TypeScript strict
  • ESC/POS 열전사 프린팅 직접 구현 — 80mm 주방 영수증 바이트열 생성 + EUC-KR 인코딩, CJK를 폭 2로 계산하는 고정폭 레이아웃 엔진
  • 클라우드→LAN 브릿지 설계 — 정적 배포 앱과 매장 사설망 프린터가 서로 닿지 못하는 구조를, 로컬 프린트 에이전트를 경유해 raw TCP로 해결
  • 오프라인 부팅 사이니지(DID) — 망분리 미니 PC가 네트워크 없이 부팅해도 화면이 뜨도록 서비스워커 문서 프리캐시 설계
  • WYSIWYG 사이니지 편집기 — 편집 화면과 실제 표출이 동일하게 렌더되도록 %오프셋 저장 + container-query 폰트 자동 스케일
Next.jsReactTypeScriptReact QueryRecoilPWAWorkboxSSEdnd kitpdf.jsExcelJSESC/POSIndexedDBSCSS

Other Projects

  • OnMeet2024 — 2026
    프론트 구현 + Polyglot MSA 7개 서비스 설계 — Go 전환으로 메모리 96% 감소, LiveKit SFU로 대역폭 O(N²)→O(N)
  • Plug Platform2025.04 — 2025.09
    프로젝트마다 복사되던 컴포넌트와 API 호출을 모노레포 패키지로 걷어낸 작업 — 머지된 PR 17건, +13,391 / −9,701줄
  • Plug Atlas2025.10 — 2025.11
    센서가 언제 이벤트를 낼지 정하는 조건 관리부터 알람 수신·조치·통계까지, 관제의 이벤트 흐름 전체를 구현 — 머지된 PR 11건, +8,239 / −2,227줄
  • VGOLF 경기관제 PM302026.09 — 현재
    태블릿·모바일 통합 앱에서 모바일만 떼어내 PM30 전용으로 재정비 — 상태 저장 1회 7.89ms → 0.058ms, 진입 번들 −56%, 테스트 0 → 162개
  • Vgolf2025 — 2026
    매일 운영되는 프로덕션 서비스 — GPS→Proj4 좌표 변환, 지오펜싱 자동 홀 전환, 움직이는 카트 위 터치 UX
  • 키키하이 (KiKiHi)2025.03 — 2025.09
    부품을 고르면 3D로 조립되는 커스텀 키보드 웹앱 — 부품 간 호환성 자동 검사와 실시간 3D 렌더링을 프론트에서 구현
  • VGOLF 스코어카드2026.01 — 2026.09
    인수인계받아 본업과 병행하며 9개월간 혼자 맡은 레거시 — 카카오·네이버 인앱브라우저에서 이미지 저장이 안 되던 문제를 재현부터 문서화까지 끝냄
  • 공공기관 웹 퍼블리싱2023.11 — 2024.02
    이민재단·싸템·양구수목원 등 공공기관 사이트 약 200개 페이지를 디자인부터 반응형 마크업까지 담당
  • Cosmostation 크롬 익스텐션2022.10 — 2022.12
    오픈소스 멀티체인 지갑에 Kujira 체인을 추가하고 ERC20·CW20 토큰 검색 페이지를 만들며, 리뷰를 반복해 반영한 첫 실무 경험
  • Argos2026.04
    수강 전·수업 중·수업 후·운영까지 전 주기를 AI로 분석하는 플랫폼 — 프론트엔드를 전담해 약 16,000줄 기여, 500팀 중 3위(장려상)
  • BOOT_UP2024.07 — 2024.08
    같은 서비스를 백엔드 → 프론트 → 배포까지 세 번에 나눠 만든 캠프 프로젝트 — 프론트 단계에서는 커밋 54건, DevOps 단계는 혼자 맡음
  • CalIT2024.08 — 2024.10
    프론트를 맡아 100+ API 연동, Kafka 채팅·Jenkins CI/CD·Prometheus 모니터링까지 풀스택 기여
  • 번개팅2025.02 — 2025.03
    PWA로 FCP 3.2s→1.2s, Zustand+RQ로 리렌더 50%↓ — Jest·Cypress·CircleCI 완전 자동화 CI/CD
  • PPIYO2025.01.11 — 2025.01.12
    20시간 해커톤 집중 개발 — 카카오 맵 API 기반 중간 거리 계산 + 1km 반경 추천 장소 시스템
  • ChatFlow2025.01 — 2025.03
    WebRTC 화상·음성·화면공유 + WebSocket 채팅 — Kubernetes 카나리 무중단 배포까지 풀스택 구현

Education

코드잇 프론트엔드 단기 심화 7기

2025.01 — 2025.03
  • Next.js, Framer Motion, Jest, Sentry, GA 등 프론트엔드 심화
  • 딥다이브 스터디 팀장, 프로젝트 투표 1위, 피어리뷰 1위

코리아IT 풀스택 과정

2024 — 2026
  • OnMeet — 팀장으로 AI 회의록 자동 생성 화상회의 플랫폼을 기획부터 배포까지 주도, 과정 내 수강생 우수상
  • 제1회 코리아IT아카데미 바이브코딩 공모전 500팀 중 3위, 장려상 — Argos 프론트엔드 전담

한화시스템 Beyond SW Camp 6기

2024.04 — 2024.10
  • Spring, Docker, K8s, Jenkins, ArgoCD 등 백엔드 풀스택
  • BOOT_UP — 같은 서비스를 백엔드·프론트(Vue)·DevOps 세 단계로 나눠 구현, 최종 프로젝트는 CalIT
  • 프리코스 학생 대상 프론트·백엔드 크로스 강의 진행

아주대학교

졸업

Activities

  • Gunbamz Study스터디 팀장 · 2025.01 — 현재
    프론트엔드 딥다이브 스터디를 기획하고 리드 — 주차마다 주제 하나를 실습까지 끌고 감
  • Front Ninjas Study스터디 팀장 · 2024.09 — 현재
    모던 자바스크립트 딥다이브, 우아한 타입스크립트 등 기술 서적 기반 이론→구현→발표 스터디
  • Devlog Challengers스터디 참여자 · 2024.06 — 현재
    프론트·백엔드 개발자 간 지식 교류 목적의 블로그 기반 기술 스터디
  • 삐약톤 (Google Developers 해커톤)Frontend Developer · 2024.06
    20시간 제한 해커톤에서 Figma → React + TypeScript로 MVP 완성
  • Kubernetes & Docker Study스터디 팀장 · 2025.01 — 2025.03
    Kubernetes 기반 마이크로서비스 아키텍처 학습 및 실습

Leadership & Community

  • 아주대학교 학보사 · Ajou Press정기자 → 미디어 편집장 · 2021.01 — 2022.12
    10명 이상 팀 관리, 주간 보도 기획 및 콘텐츠 퀄리티 총괄
  • Shalla 영어회화 동아리 · 서울경인 연합부회장 · 기획총무 · 2019.03 — 2021.08
    연 450명 이상 참여 행사 기획 및 운영 총괄
  • Nubi Ajou 글로벌 교류단 · 아주대학교대외홍보팀장 · 2021.02 — 2022.12
    국제 학생 대상 문화 교류 프로그램 대외 홍보 총괄
  • 링크 산학협력 서포터즈 · 링크사업단서포터즈 팀장 · 2021.08 — 2023.02
    창업 아이디어 공모전 홍보 기획 및 콘텐츠 운영 주도
  • 일자리 서포터즈 · 경기도기획팀장 · 2021.08 — 2022.03
    50개 이상 기업 연계 채용 박람회 기획·운영 총괄

Peer Reviews

입사 후보다 퇴사 때 많이 성장했다

개발팀장 · 개발팀장 · 웹비즈 크리에이티브

백엔드를 아는 프론트엔드

백엔드 개발자 · Backend Developer · 웹비즈 크리에이티브

본인의 실력에 안주하지 않는 사람

인턴 동기 · Frontend Developer · 스탬퍼(Cosmostation) 인턴

힘들고 지쳐도 QA 요구를 끝까지 들어주는 프론트엔드

기획 · 디자이너 · Product Designer · 삐약톤 해커톤 팀 (PPIYO)

의지할 수 있고 즐겁게 함께 일할 수 있었어요

동료 프론트엔드 · Frontend Developer · 플럭시티 클라우드팀

팀의 운영과 기술적 성장에 크게 기여하신 팀장

팀원 A · Frontend Developer · 코드잇 심화 팀 프로젝트

언젠가 다시 동료로 만나고 싶습니다

팀원 B · Frontend Developer · 코드잇 심화 팀 프로젝트

코드의 퀄리티를 높일 수 있었고

팀원 C · Frontend Developer · 코드잇 심화 팀 프로젝트
Seungeun Choi · Frontend Developerxeunnie.github.io/resume