Index

프로젝트

한 땀 한 땀
짠 것들입니다

누군가 오늘도 쓰고 있는 화면들이라 넘긴 뒤에도 계속 살핍니다. 고칠 게 보이면 지금도 고칩니다.

회사·학업·팀·제품군으로 걸러 볼 수 있습니다. 상세 페이지에는 무엇이 문제였고 그때 어떻게 판단했는지를 적어 두었습니다. 궁금한 것부터 골라 보셔도 됩니다.

19
i.전체
11
ii.회사에서
15
iii.화면이 남아 있는 것
유형
회사

19of19

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

No. 01대표 작업Plug Platform

부산 도시철도 통합 관제

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

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

유형
회사
기간
2025.05 — 2025.09
소속
플럭시티 · DX 기술팀
기술
React, TypeScript, Vite, Three.js, WebGL 외 6
자세히 보기
주문 화면 — 카테고리 탭으로 나눈 메뉴판과 테이블별 주문서. NEW·BEST·시그니처 같은 태그와 품절 여부를 상태값으로 받아 조건부로 그립니다.

No. 02대표 작업VGOLF

VGOLF F&B

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

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

유형
회사
기간
2025.12 — 2026.09
소속
플럭시티 · 클라우드팀
기술
Next.js, React, TypeScript, React Query, Recoil 외 9
자세히 보기
로그인 — 카카오·네이버·구글·애플 네 가지 소셜 로그인과 이메일 가입을 함께 둡니다. 스토어 심사 요건이라 애플 로그인을 빼놓을 수 없었습니다.메인 — 누적 라운드 수와 평균 스코어·베스트·핸디를 위에 두고, 아래로 최근 라운드가 이어집니다. 자동연동과 직접입력을 배지로 구분합니다.스코어 목록 — 라운드마다 골프장·코스·동반자·타수를 카드로 봅니다. 저장이 끝나면 토스트로 알리고 목록을 새로 고칩니다.

No. 03대표 작업VGOLF

VGOLF 앱

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

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

유형
회사
기간
2026.06 — 2026.09
소속
플럭시티 · 클라우드팀
기술
React Native, TypeScript, Zustand, React Query, Zod 외 11
자세히 보기
현재 홀. GPS로 잡은 카트 위치에서 홀컵까지 남은 거리와 고저차를 코스 맵 위에 올립니다. 오른쪽은 티샷 순서를 정하는 패널.

No. 04VGOLF

Vgolf

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

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

유형
회사
기간
2026.01 — 2026.09
소속
플럭시티 · 클라우드팀
기술
React, TypeScript, Vite, Zustand, React Query 외 8
자세히 보기
초기 진입 화면. 새 시안에 맞춰 다시 만들었습니다. 기기번호·클럽 로고·언어 선택과 앱·서버 버전이 한 화면에 있습니다.현재 홀. GPS 위치를 코스 지도에 올리고 남은 거리·고저차·실시간 순위를 보여줍니다.스코어 입력 — 전반·후반 표에서 4명의 홀별 스코어와 합계를 한 번에 봅니다.

No. 05VGOLF

VGOLF 경기관제 PM30

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

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

유형
회사
기간
2026.09 — 현재
소속
플럭시티 · 클라우드팀
기술
React, TypeScript, Vite, Zustand, React Query 외 9
자세히 보기
처리장 전경을 3D로 띄우고 악취측정기 POI를 올립니다. POI를 누르면 황화수소·암모니아·휘발성유기화합물·복합악취 4종의 농도와 등급(정상·주의·경고·위험)이 뜨고, 임계점을 넘긴 측정기는 붉은 카드로 따로 표시됩니다.

No. 06

탄천 악취 모니터링

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

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

유형
회사
기간
2025.06 — 2025.08
소속
플럭시티 · DX 기술팀
기술
React, TypeScript, Vite, CesiumJS, Resium 외 16
자세히 보기
서비스 소개 화면. 제1회 코리아IT아카데미 바이브코딩 공모전에서 500팀 중 3위(장려상)를 받은 작업입니다.

No. 07

Argos

AI 실시간 수업 분석 플랫폼

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

유형
개인
기간
2026.04
소속
코리아IT 바이브코딩 공모전
기술
Next.js, React, TypeScript, Supabase, PostgreSQL 외 9
수상
제1회 코리아IT아카데미 바이브코딩 공모전(KIT 해커톤) 장려상 — 500팀 중 3위
자세히 보기
AI가 회의를 기록하고 요약하는 B2B 화상회의 플랫폼. MSA 7개 서비스 · 5개 언어 · LiveKit 기반 WebRTC로 만들었습니다.

No. 08

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 외 21
수상
코리아IT 풀스택 과정 수강생 우수상
자세히 보기
대시보드 — 위성 지도 위에 공원을 얹고, 왼쪽으로 화재·온습도·변위 경고가 발생 순으로 쌓입니다. 각 알람에서 바로 조치로 넘어갈 수 있습니다.

No. 09Plug Platform

Plug Atlas

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

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

유형
회사
기간
2025.10 — 2025.11
소속
플럭시티 · DX 기술팀
기술
React, TypeScript, Vite, CesiumJS, Zustand 외 4
자세히 보기
실내지도 편집 — 왼쪽 Asset 목록에서 센서·FAN·CCTV 같은 장비를 골라 3D 도면 위에 배치합니다. 층을 바꿔 가며 편집하고 배치한 장비에는 이름표가 붙습니다.

No. 10Plug Platform

Plug Platform

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

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

유형
회사
기간
2025.04 — 2025.09
소속
플럭시티 · DX 기술팀
기술
React, TypeScript, Vite, Tailwind CSS, Storybook 외 6
자세히 보기
라운드가 끝나면 이 페이지 링크가 발송됩니다. 요약(이글·버디·파·보기)과 팀 스코어를 먼저 보여주고, 아래에 전·후반 홀별 표가 이어집니다. 참가자 이름은 서비스가 자체적으로 가운데를 가립니다.

No. 11VGOLF

VGOLF 스코어카드

라운드 결과 공유 웹 — 인앱브라우저 이미지 저장

인수인계받아 본업과 병행하며 9개월간 맡은 레거시 — 카카오·네이버 인앱브라우저에서 이미지 저장이 안 되던 문제를 재현부터 문서화까지 정리

유형
회사
기간
2026.01 — 2026.09
소속
플럭시티 · 클라우드팀
기술
React, TypeScript, Vite, Recoil, React Router 외 5
자세히 보기
토큰 가져오기 — 지원 목록에서 이름으로 검색해 고르고, 목록에 없으면 직접 추가합니다. 검색 입력에는 디바운스를 걸었습니다.지갑 메인 — 체인별 잔액과 위임·보상 현황 아래로, 가져온 토큰이 코인 목록에 이어서 붙습니다.체인 선택 — EVM 네트워크와 Cosmos 생태계 체인을 나눠 보여 줍니다. 새로 추가한 체인도 이 목록에 이어서 붙습니다.

No. 14

Cosmostation 크롬 익스텐션

멀티체인 지갑 — 토큰 검색 페이지 · 체인 추가

오픈소스 멀티체인 지갑에 Kujira 체인을 추가하고 ERC20·CW20 토큰 검색 페이지를 만들며, 리뷰를 반복해 반영한 첫 실무 경험

유형
회사
기간
2022.10 — 2022.12
소속
스탬퍼 (Cosmostation)
기술
React, TypeScript, Redux, Emotion, Webpack 외 1
자세히 보기
서비스 구성 — Nginx로 Vue를 내보내고, 회원·게시글·채팅·예약을 각각의 EC2 위 Spring Boot로 나눴습니다. 채팅은 Kafka, 이미지는 S3, 데이터는 RDS(MySQL)에 둡니다.

No. 15

BOOT_UP

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

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

유형
개인
기간
2024.07 — 2024.08
소속
한화시스템 Beyond SW Camp
기술
Java, Spring Boot, QueryDSL, Gradle, Vue.js 외 11
자세히 보기

Addenda

부트캠프·스터디 프로젝트 4개

20시간 해커톤부터 두 달짜리 팀 프로젝트까지 기간과 팀 구성, 스택이 제각각입니다. 한 서비스의 백엔드·프론트·DevOps를 모두 맡아 본 것도 있습니다.