Frontend Developer2021 —

화면에서 서버까지,끝까지 만드는프론트엔드 개발자

프론트엔드를 중심에 두고, 필요하면 API·DB·배포까지 직접 만듭니다.
그래서 문제가 화면 밖에서 생겨도 어디서 생겼는지부터 살펴봅니다.

i.폐쇄망
지하철 안에 CCTV를 붙이고, 현장에서 고쳐 가며 운영했습니다
ii.매장 안
클라우드 웹앱과 주방 프린터 사이를 잇는 프로그램을 만들었습니다
iii.7.89ms → 0.058ms
돌아가던 앱을 다시 재서 저장 한 번을 이만큼 줄였습니다
iv.팀장 5번
백엔드도 알아서, 디자이너와 백엔드 사이에서 말을 잇고 일을 나눴습니다

명함에는 프론트엔드 개발자,
현장에서는 뚝딱이

일하는 방식을 길게 설명하는 것보다, 그동안 불린 이름을 보여 드리는 편이 빠를 것 같았습니다.

일단 만들어 보는 편입니다. React Native 앱은 처음 맡았지만 화면 구현부터 네이티브 설정, 릴리스 서명, Play Console 제출까지 555커밋을 쌓아 스토어에 올렸습니다. 올린 뒤에도 심사 대응과 버그 수정을 이어 가며 버전을 올렸습니다.

VGOLF 앱에서 있었던 일입니다

VGOLF6 works

2026년 — 매장 하드웨어와 앱 스토어까지 다뤄야 하는 서비스를 맡았습니다

골프장에서 매일 쓰는 서비스를 맡았습니다. 클라우드에 정적 배포된 웹앱이 매장 사설망 프린터에 닿지 못하는 문제는 로컬 에이전트 브릿지로 풀었고, 망분리된 미니 PC가 네트워크 없이 부팅해도 화면이 뜨도록 서비스워커를 설계했습니다.

그해 기록 6건 보기

2025.12 — 2026.09VGOLF F&B — ESC/POS 주방 프린팅, 오프라인 부팅 사이니지, WYSIWYG 편집기까지 단독 개발 (520커밋)
2026.01 — 03OnMeet — 팀장을 맡아 팀원들과 AI 회의록 화상회의 플랫폼을 기획부터 배포까지, 과정 내 수강생 우수상
2026.04제1회 코리아IT아카데미 바이브코딩 공모전 500팀 중 3위(장려상) — Argos 프론트엔드 담당, AI 에이전트 팀 파이프라인 설계
2026.06 — 09VGOLF 앱 — React Native 개발부터 Play Console 제출까지 (555커밋)
2026.04 —Tistory에 기술 정리와 실무 트러블슈팅 연재 시작
2026.09 —VGOLF 경기관제 PM30 — 모바일 저장소 분리, Recoil → zustand, 테스트 0 → 162개, 태블릿 기능 이관

주문 화면 — 카테고리 탭으로 나눈 메뉴판과 테이블별 주문서. NEW·BEST·시그니처 같은 태그와 품절 여부를 상태값으로 받아 조건부로 그립니다.

No. 01대표 작업

VGOLF F&B

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

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

기간: 2025.12 — 2026.09
소속: 플럭시티 · 클라우드팀
기술: Next.js, React, TypeScript, React Query, Recoil

로그인 — 카카오·네이버·구글·애플 네 가지 소셜 로그인과 이메일 가입을 함께 둡니다. 스토어 심사 요건이라 애플 로그인을 빼놓을 수 없었습니다.

메인 — 누적 라운드 수와 평균 스코어·베스트·핸디를 위에 두고, 아래로 최근 라운드가 이어집니다. 자동연동과 직접입력을 배지로 구분합니다.

스코어 목록 — 라운드마다 골프장·코스·동반자·타수를 카드로 봅니다. 저장이 끝나면 토스트로 알리고 목록을 새로 고칩니다.

No. 02대표 작업

VGOLF 앱

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

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

기간: 2026.06 — 2026.09
소속: 플럭시티 · 클라우드팀
기술: React Native, TypeScript, Zustand, React Query, Zod

현재 홀. GPS로 잡은 카트 위치에서 홀컵까지 남은 거리와 고저차를 코스 맵 위에 올립니다. 오른쪽은 티샷 순서를 정하는 패널.

No. 03

Vgolf

골프장 경기관제 — GPS 카트 추적 & 실시간 라운드 관리

매일 도는 경기관제 태블릿 — GPS 카트 추적과 지오펜싱 자동 홀 전환을 붙이고, 업데이트로 받는 파일을 72.9MB에서 8.5MB로 줄였습니다

기간: 2026.01 — 2026.09
소속: 플럭시티 · 클라우드팀
기술: React, TypeScript, Vite, Zustand, React Query

초기 진입 화면. 새 시안에 맞춰 다시 만들었습니다. 기기번호·클럽 로고·언어 선택과 앱·서버 버전이 한 화면에 있습니다.

현재 홀. GPS 위치를 코스 지도에 올리고 남은 거리·고저차·실시간 순위를 보여줍니다.

스코어 입력 — 전반·후반 표에서 4명의 홀별 스코어와 합계를 한 번에 봅니다.

No. 04

VGOLF 경기관제 PM30

태블릿 경기관제 앱을 소형 단말(PM30)로 옮기며 구조를 다시 세운 작업

태블릿·모바일 통합 앱에서 모바일만 떼어내 PM30 전용으로 재정비 — 상태 저장 1회 7.89ms → 0.058ms, 진입 번들 −56%, 테스트 0 → 162개

기간: 2026.09 — 현재
소속: 플럭시티 · 클라우드팀
기술: React, TypeScript, Vite, Zustand, React Query

서비스 소개 화면. 제1회 코리아IT아카데미 바이브코딩 공모전에서 500팀 중 3위(장려상)를 받은 작업입니다.

No. 05

Argos

AI 실시간 수업 분석 플랫폼

AI에게 코드만 맡기지 않고 규칙·역할·검증까지 파이프라인으로 짜서 돌린 바이브코딩 프로젝트 — 프론트엔드 약 16,000줄, 500팀 중 3위(장려상)

기간: 2026.04
소속: 코리아IT 바이브코딩 공모전
기술: Next.js, React, TypeScript, Supabase, PostgreSQL
수상: 제1회 코리아IT아카데미 바이브코딩 공모전(KIT 해커톤) 장려상 — 500팀 중 3위

AI가 회의를 기록하고 요약하는 B2B 화상회의 플랫폼. MSA 7개 서비스 · 5개 언어 · LiveKit 기반 WebRTC로 만들었습니다.

No. 06

OnMeet

AI 회의록 자동 생성 B2B 화상회의 SaaS 플랫폼

프론트엔드와 Polyglot MSA 7개 서비스 설계를 맡은 팀 프로젝트 — File Service Go 전환으로 메모리 96% 감소, LiveKit SFU로 대역폭 O(N²)→O(N)

기간: 2026.01 — 2026.03
소속: 코리아IT 풀스택 과정
기술: React, TypeScript, Zustand, React Query, Vite
수상: 코리아IT 풀스택 과정 수강생 우수상

관제 SI7 works

2025년 — 관제 현장에 CCTV를 붙이고, 공통 패키지를 만들었습니다

연초에는 프론트엔드 심화 과정과 스터디에서 개인 프로젝트를 연달아 했습니다. 번개팅에서 CI/CD를 처음부터 세우고, 해커톤에서 20시간 만에 MVP를 배포했습니다. 스터디에서 시작한 ChatFlow는 여름까지 이어 가며 웹소켓 실시간 채팅을 붙였습니다.

그해 기록 7건 보기

2025.01 — 03코드잇 프론트엔드 심화 우수 수료 · 번개팅, PPIYO 완주
2025.04플럭시티 DX 기술팀 입사
2025.05 — 09부산 도시철도 통합 관제 — WebRTC CCTV 현장 운영, 시설물 9종 API 연동
2025.06 — 08탄천 악취 모니터링 — Cesium 3D 위에 센서·드론·CALPUFF 확산을 올리고, 수집 API와 온프레미스 배포까지
2025.04 — 09Plug Platform — 디자인 시스템·공통 API 계층 모노레포화 (머지 PR 17건)
2025.10 — 11Plug Atlas — Cesium 지도 IoT 관제의 이벤트·알람 도메인 전반 구현
2025.11클라우드팀으로 이동 — VGOLF 프로덕션 서비스 합류

역사 전체를 3D로 띄우고 층을 바꿔 가며 봅니다. 왼쪽에서 설비 종류를 고르면 해당 장비만 도면 위에 남습니다. 상단에는 대합실·승강장·외부 온도와 미세먼지가 실시간으로 붙습니다.

No. 07대표 작업

부산 도시철도 통합 관제

3D 역사 관제 + WebRTC CCTV 실시간 스트리밍

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

기간: 2025.05 — 2025.09
소속: 플럭시티 · DX 기술팀
기술: React, TypeScript, Vite, Three.js, WebGL

처리장 전경을 3D로 띄우고 악취측정기 POI를 올립니다. POI를 누르면 황화수소·암모니아·휘발성유기화합물·복합악취 4종의 농도와 등급(정상·주의·경고·위험)이 뜨고, 임계점을 넘긴 측정기는 붉은 카드로 따로 표시됩니다.

No. 08

탄천 악취 모니터링

Cesium 3D 지형 위의 악취 측정 · 확산 시뮬레이션 관제

고정 센서 8대 · 드론 측정 · CALPUFF 확산 모델링을 Cesium 3D 지형 하나에 올려, 지금 수치와 퍼지는 방향을 같은 화면에서 보게 만든 악취 관제 — 화면부터 API·DB·배포까지 혼자 맡음

기간: 2025.06 — 2025.08
소속: 플럭시티 · DX 기술팀
기술: React, TypeScript, Vite, CesiumJS, Resium

대시보드 — 위성 지도 위에 공원을 얹고, 왼쪽으로 화재·온습도·변위 경고가 발생 순으로 쌓입니다. 각 알람에서 바로 조치로 넘어갈 수 있습니다.

No. 09

Plug Atlas

Cesium 실외 지도 기반 IoT 관제 — 이벤트 · 알람 시스템

센서가 언제 이벤트를 낼지 정하는 조건 관리부터 알람 수신·조치·통계까지, 관제의 이벤트 흐름 전체를 구현 — 머지된 PR 11건, +8,239 / −2,227줄

기간: 2025.10 — 2025.11
소속: 플럭시티 · DX 기술팀
기술: React, TypeScript, Vite, CesiumJS, Zustand

실내지도 편집 — 왼쪽 Asset 목록에서 센서·FAN·CCTV 같은 장비를 골라 3D 도면 위에 배치합니다. 층을 바꿔 가며 편집하고 배치한 장비에는 이름표가 붙습니다.

No. 10

Plug Platform

SI 프로젝트 공통 모노레포 — 디자인 시스템 · API 계층

프로젝트마다 복사되던 컴포넌트와 API 호출을 모노레포 패키지로 걷어낸 작업 — 머지된 PR 17건, +13,391 / −9,701줄

기간: 2025.04 — 2025.09
소속: 플럭시티 · DX 기술팀
기술: React, TypeScript, Vite, Tailwind CSS, Storybook

작은 프로젝트

스터디 · 활동

백엔드와 배포2 works

2024년 — 백엔드 부트캠프에서 서버와 배포를 직접 해 봤습니다

프론트만으로는 부족하다고 느껴 백엔드 부트캠프에 들어갔습니다. 같은 서비스를 세 번 만들었습니다 — BOOT_UP을 Spring 백엔드로, 다음엔 Vue 프론트로, 마지막엔 Docker와 GitHub Actions로 배포까지.

그해 기록 6건 보기

2024.04한화시스템 BEYOND SW Camp 6기(백엔드 트랙) 입과
2024.07BOOT_UP 2차 — Spring·QueryDSL 백엔드, 전역 예외처리와 응답 코드 체계 구현
2024.0799클럽 코테 스터디 참여, 주차 회고를 velog에 연재
2024.08BOOT_UP 3차 — Vue 프론트엔드 커밋 54건, DevOps 단계 담당
2024.08CalIT — 팀장을 맡아 프론트엔드를 혼자 개발, 100개 이상 API 연동
2024.10BEYOND SW Camp 수료, 프리코스 학생 대상 크로스 강의 진행

서비스 구성 — Nginx로 Vue를 내보내고, 회원·게시글·채팅·예약을 각각의 EC2 위 Spring Boot로 나눴습니다. 채팅은 Kafka, 이미지는 S3, 데이터는 RDS(MySQL)에 둡니다.

No. 14

BOOT_UP

부트캠프 수강생 커뮤니티 — 백엔드 · 프론트 · DevOps 전 단계

같은 서비스를 백엔드 → 프론트 → 배포까지 세 번에 나눠 만든 캠프 프로젝트 — 프론트 단계에서는 커밋 54건, DevOps 단계는 혼자 맡음

기간: 2024.07 — 2024.08
소속: 한화시스템 Beyond SW Camp
기술: Java, Spring Boot, QueryDSL, Gradle, Vue.js

작은 프로젝트

CalITNo. 15
2024.08 — 2024.10
개발자를 위한 대시보드 기반 스크럼 관리 시스템
프로젝트 팀장 · Frontend 단독 개발 (FE 1 / BE 4)

스터디 · 활동

Devlog Challengers스터디 참여자 — 프론트·백엔드 개발자 간 지식 교류 목적의 블로그 기반 기술 스터디2024.06 — 현재

디자인과 퍼블리싱1 works

2023년 — 공공기관 사이트 약 200페이지를 디자인부터 마크업까지 맡았습니다

공공기관 웹사이트를 만드는 회사로 옮겼습니다. 시안을 받아 옮기는 게 아니라 직접 디자인하고, 반응형 마크업과 PHP 연동까지 혼자 맡는 일이었습니다.

그해 기록 3건 보기

2023.11웹비즈 크리에이티브 입사 — 공공기관 SI 디자인 · 퍼블리싱 · PHP 연동
2023.11 —이민재단·싸템·양구수목원·사회보장정보원 등 6개 기관 약 200페이지 퍼블리싱을 혼자 맡음
2023.12리픽 — Vue·TypeScript 컴포넌트 설계와 Pinia 상태 관리, Storybook 문서화

2023.11 — 2024.026개 기관 사이트 UI/UX 디자인 · 반응형 퍼블리싱웹비즈 크리에이티브

No. 16

공공기관 웹 퍼블리싱

6개 기관 사이트 UI/UX 디자인 · 반응형 퍼블리싱

이민재단·싸템·양구수목원 등 공공기관 사이트 약 200개 페이지를 디자인부터 반응형 마크업까지 담당

기간: 2023.11 — 2024.02
소속: 웹비즈 크리에이티브
기술: HTML5, CSS3, JavaScript, PHP, jQuery

첫 실무 코드베이스1 works

2022년 — 코드 리뷰를 받는 실무 코드베이스에서 처음 일했습니다

블록체인 지갑 회사에서 인턴으로 일했습니다. React·TypeScript로 된 오픈소스 크롬 익스텐션이었고, 프론트엔드 시니어분 밑에서 티켓 단위로 기능을 받아 작업하며 렌더링 최적화, content script와 provider 주입 같은 깊은 부분까지 배웠습니다.

그해 기록 5건 보기