2025.04 - 2026.01프론트엔드 개발회사 프로젝트
더블유웍스 그룹웨어 SaaS
근태, 인사, 전자결재, ERP, CRM, PMS 도메인과 Electron 채팅 앱을 개발하며, 데이터 유실, 대기 시간, 배포 안정성 문제를 제품 구조로 개선했습니다.
- 약 6초 → 0.1초
- 채팅방 생성 시간 단축
- 88.8%
- 중복 IPC 리스너 축소
- 0.9초
- FCP 개선
문제전자결재 작성 내용이 세션 만료로 유실되고, 채팅방 생성 요청과 IPC 이벤트가 중복되어 대기 시간과 입력 지연이 발생했습니다.
ReactTypeScriptReact QueryZustandElectronSocket.IOIPCPlaywrightGitHub ActionsAWS
- 인사, 근태, 전자결재, ERP, CRM, PMS 사용자, 운영 화면 개발
- 전자결재 기안 자동 임시저장으로 세션 만료, 이탈 시 데이터 유실 가능성 감소
- Refresh Token을 httpOnly Cookie로 전환해 JavaScript 접근 제한
- 채팅방 생성 흐름 재설계: 약 6초 → 0.1초
- IPC 이벤트 등록 단일화: 134회 → 15회
- 코드 스플리팅으로 FCP 3.1초 → 2.2초
2026.08 - 현재제품 설계, 프론트엔드 및 백엔드 개발개인 프로젝트
JHWorks AI Groupware
출장 경비 요청을 누락 정보 확인, 규정 근거와 미리보기, 초안 저장과 결재까지 연결한 독립 그룹웨어입니다. 디자인 토큰 기반 업무 홈과 서버의 권한·상태 전이 검증을 함께 구현했습니다.
문제출장 후 지출 내역과 규정을 따로 찾아 결재 양식에 다시 입력하고, 누락·중복 지출을 사람이 확인해야 합니다. AI가 모르는 정보를 채우거나 확인 없이 제출하면 실제 업무 데이터가 잘못됩니다.
Next.jsTypeScriptFastAPIPostgreSQLpgvectorOpenAI APICloud RunSupabaseDocker
- CES 경비 정산과 근거가 있는 누락·중복 후보 점검
- 디자인 토큰, 반응형 업무 홈과 키보드 단축키
- 전자결재 상태 전이와 낙관적 동시성 제어
- 결정적 휴가 계산과 사용자 범위의 업무 데이터 조회
- 정책 RAG, Structured Output, 제한된 Function Calling
- 명시적 확인과 멱등 저장, 독립된 제출 확인
2026.01 - 2026.06프론트엔드 개발회사 프로젝트
직구라운드 글로벌 B2B/B2C 플랫폼
검색, 거래, 실시간 채팅, 다국어, 검색 노출 구조를 개발하고, 공유 가능한 검색 상태와 안정적인 다국어 변경 체계를 구축했습니다.
- 51.8%
- Storybook 빌드 시간 단축
- 800+
- i18n 사용처 구조 개편
- 3개 언어
- 24개 페이지 검색 노출 정비
문제글로벌 거래 화면의 상태가 복잡하고, 다국어 키 충돌이 조용히 오류를 만들며, 개발 도구의 긴 빌드 시간이 반복 작업을 늦추고 있었습니다.
Next.jsReactTypeScriptReact QueryTailwind CSSnext-intlSTOMPtiptapStorybookJSON-LD
- 상품, 공급사 통합 검색과 공급, 구매, 견적, 정산 관리 화면 구현
- 탭, 정렬, 페이지네이션 URL 동기화 기반 SSR 검색 화면 설계
- B2B 견적, 정산 문서 PDF, Excel 생성 기능 구현
- STOMP 기반 1:1 채팅과 WebSocket 전용 토큰 인증 구조 구현
- i18n 네임스페이스 도입 및 CI 단계 중복, 누락 검증
- Plate.js에서 tiptap으로 에디터 전환
2026.02 - 현재풀스택 설계 및 개발개인 프로젝트
Game Park
여러 웹 게임을 독립적으로 개발하고 공통 프로토콜로 플랫폼에 연결하는 풀스택 게임 플랫폼을 설계, 개발했습니다.
- 4종
- 플랫폼에 연결한 게임
- 실시간
- Socket.IO 멀티플레이어
- 1줄
- 초기 프로젝트 생성
문제게임마다 플랫폼 연동과 개발 환경을 반복해서 구성해야 했고, 실시간 게임의 상태 동기화와 일관된 확장 구조가 필요했습니다.
TypeScriptReactNext.jsNestJSPrismaPostgreSQLSocket.IOCanvas
- iframe + postMessage 프로토콜 기반 게임 통합 구조 설계
- Next.js, NestJS, Prisma, PostgreSQL 풀스택 구성
- Socket.IO 매칭 대기열, 멀티플레이어, 랭킹 시스템 구현
- Canvas 게임 루프와 결정론적 상태 처리
2026.06풀스택 개발회사 프로젝트
사내 카페 운영 도구
개발실이 직접 처리하던 사원증 등록과 메뉴 관리를 인사팀, 운영 담당자가 직접 수행할 수 있도록 Electron 기반 운영 도구를 제안하고 개발, 배포했습니다.
- 1개 도구
- 회원, 사원증, 메뉴 통합 관리
- 셀프서비스
- 개발실 의존 운영 업무 전환
- 실운영
- 패키징, 공증 후 현장 배포
문제신규 입사자 사원증 등록과 메뉴 변경 때마다 개발자가 DB를 직접 수정해야 해, 담당자 부재 시 대기와 입력 오류 위험이 발생했습니다.
ElectronTypeScriptIPCREST APINFCmacOS Notarization
- NFC 카드 리더기 기반 신규 입사자 사원증 등록 흐름 구현
- 회원, 사원증, 메뉴 CRUD를 운영 담당자용 기능으로 통합
- Electron 앱, REST API, 하드웨어를 연결한 현장 운영 프로그램 개발
- macOS 패키징, 공증 적용
2024.10 - 2025.03프론트엔드 개발회사 프로젝트
tebekAI
디자이너와 2인 팀으로 AI 이미지 처리 SaaS의 업로드, 처리, 결과, 인증, 결제, 운영 흐름을 개발했습니다.
- 5종
- AI 이미지 처리 서비스
- 2인 팀
- 디자이너와 제품 전반 개발
문제서로 다른 AI 이미지 서비스마다 업로드, 처리 요청, 결과 확인 흐름이 반복되고, 인증, 결제, 운영 기능을 함께 구축해야 했습니다.
ReactJavaScriptReact QueryReact RouterAxiosRechartsToss PaymentsCSS Modules
- 실종아동 유사도, 독립운동가, 미술품 찾기, 명화 변환, 품질 개선 화면 구현
- 업로드, 처리, 결과 흐름 공통 컴포넌트화
- Toss Payments 기반 크레딧 결제 흐름 구현
- 인증, 세션 관리와 사용자, 관리자 권한 분기
2023.04 - 2023.05프론트엔드 개발개인 프로젝트
Oreuda — GitHub 관리 서비스
개발자를 위한 GitHub 관리 서비스에서 Chrome Extension, 랜딩 페이지, GUI 결과물의 Markdown 파싱 기능을 개발했습니다.
Next.jsReactTypeScriptChrome Extension API
- Chrome Extension 개발 및 웹스토어 배포
- GUI 결과물을 Markdown으로 변환하는 README 파서 구현
- 랜딩 페이지와 GitHub 연동 사용자 흐름 개발