
김지환
풀스택 엔지니어 | 고객 워크플로우·현장 배포
- 문제 정의
- 요구사항 조율
- 풀스택 개발
- 현장 배포
- 운영 개선
자기소개
운영 담당자와 사용자의 업무 흐름에서 병목을 찾고, 해결 범위를 조율해 실제 현장에서 사용하는 소프트웨어로 구현합니다. Electron·웹·API·실시간 통신을 연결하며 설계부터 배포와 운영 개선까지 책임져 왔습니다.
“현장의 문제를 이해하고, 작동하는 제품으로 끝까지 전달합니다.”
기술 스택
- Frontend
- TypeScript · JavaScript · React · Next.js · React Query · Zustand · Tailwind CSS
- Desktop & Realtime
- Electron · IPC · Socket.IO · STOMP · NFC 카드 리더기
- Backend
- Node.js · NestJS · Prisma · PostgreSQL · REST API
- Quality & Delivery
- Playwright · Storybook · GitHub Actions · AWS S3 · CloudFront · macOS Notarization
경력
주식회사 더블티 · 풀스택 개발자 · 프론트엔드 중심
B2B SaaS 그룹웨어, 글로벌 커머스 플랫폼, 사내 운영 도구를 개발했습니다. 사용자 화면부터 권한·상태·예외 처리, 실시간 통신, 운영자 도구, 배포 환경까지 연결했습니다.
- 사내 카페의 NFC 사원증·메뉴 관리 업무를 운영 담당자 셀프서비스 도구로 전환
- 더블유웍스 채팅방 생성 6초 → 0.1초, 중복 IPC 리스너 134회 → 15회
- 직구라운드 i18n 800여 사용처 구조 개편, Storybook 빌드 28.9초 → 13.9초
태백넷 · 프론트엔드 개발자
AI 이미지 처리 SaaS tebekAI를 디자이너와 2인 팀으로 개발했습니다. 이미지 처리 서비스, 인증, 결제, 관리자 기능까지 사용자 흐름 전반을 구현했습니다.
- AI 이미지 처리 서비스 5종의 화면과 공통 처리 흐름 구현
- Toss Payments 기반 크레딧 결제와 사용자·관리자 권한 분기 구현
- 경찰청 실종검색 OpenAPI·카카오 검색 API 연동
주요 프로젝트
사내 카페 운영 도구 · 풀스택 개발
개발실이 직접 처리하던 사원증 등록과 메뉴 관리를 인사팀·운영 담당자가 직접 수행할 수 있도록 Electron 기반 운영 도구를 제안하고 개발·배포했습니다.
- Electron
- TypeScript
- IPC
- REST API
- NFC
- macOS Notarization
- NFC 카드 리더기 기반 신규 입사자 사원증 등록 흐름 구현
- 회원·사원증·메뉴 CRUD를 운영 담당자용 기능으로 통합
- Electron 앱·REST API·하드웨어를 연결한 현장 운영 프로그램 개발
- macOS 패키징·공증 적용
더블유웍스 그룹웨어 SaaS · 프론트엔드 개발
근태·인사·전자결재·ERP·CRM·PMS 도메인과 Electron 채팅 앱을 개발하며, 데이터 유실·대기 시간·배포 안정성 문제를 제품 구조로 개선했습니다.
- React
- TypeScript
- React Query
- Zustand
- Electron
- Socket.IO
- IPC
- Playwright
- GitHub Actions
- AWS
- 인사·근태·전자결재·ERP·CRM·PMS 사용자·운영 화면 개발
- 전자결재 기안 자동 임시저장으로 세션 만료·이탈 시 데이터 유실 가능성 감소
- Refresh Token을 httpOnly Cookie로 전환해 JavaScript 접근 제한
- 채팅방 생성 흐름 재설계: 약 6초 → 0.1초
- IPC 이벤트 등록 단일화: 134회 → 15회
- 코드 스플리팅으로 FCP 3.1초 → 2.2초
- GitHub Actions와 S3·CloudFront 기반 배포·자동 업데이트 구축
- Windows 코드 서명과 macOS 공증 적용
Game Park · 풀스택 설계 및 개발
여러 웹 게임을 독립적으로 개발하고 공통 프로토콜로 플랫폼에 연결하는 풀스택 게임 플랫폼을 설계·개발했습니다.
- TypeScript
- React
- Next.js
- NestJS
- Prisma
- PostgreSQL
- Socket.IO
- Canvas
- iframe + postMessage 프로토콜 기반 게임 통합 구조 설계
- Next.js·NestJS·Prisma·PostgreSQL 풀스택 구성
- Socket.IO 매칭 대기열·멀티플레이어·랭킹 시스템 구현
- Canvas 게임 루프와 결정론적 상태 처리
- 새 게임의 공통 구조를 생성하는 보일러플레이트 구축
- 카붐·한들·신화 디펜스·네모네모 퍼즐 출시
직구라운드 글로벌 B2B/B2C 플랫폼 · 프론트엔드 개발
검색·거래·실시간 채팅·다국어·검색 노출 구조를 개발하고, 공유 가능한 검색 상태와 안정적인 다국어 변경 체계를 구축했습니다.
- Next.js
- React
- TypeScript
- React Query
- Tailwind CSS
- next-intl
- STOMP
- tiptap
- Storybook
- JSON-LD
- 상품·공급사 통합 검색과 공급·구매·견적·정산 관리 화면 구현
- 탭·정렬·페이지네이션 URL 동기화 기반 SSR 검색 화면 설계
- B2B 견적·정산 문서 PDF·Excel 생성 기능 구현
- STOMP 기반 1:1 채팅과 WebSocket 전용 토큰 인증 구조 구현
- i18n 네임스페이스 도입 및 CI 단계 중복·누락 검증
- Plate.js에서 tiptap으로 에디터 전환
- 3개 언어·24개 페이지 SEO 구조와 메타데이터 생성 규칙 정비
- Storybook webpack → Vite 전환
tebekAI · 프론트엔드 개발
디자이너와 2인 팀으로 AI 이미지 처리 SaaS의 업로드·처리·결과·인증·결제·운영 흐름을 개발했습니다.
- React
- JavaScript
- React Query
- React Router
- Axios
- Recharts
- Toss Payments
- CSS Modules
- 실종아동 유사도·독립운동가·미술품 찾기, 명화 변환, 품질 개선 화면 구현
- 업로드·처리·결과 흐름 공통 컴포넌트화
- Toss Payments 기반 크레딧 결제 흐름 구현
- 인증·세션 관리와 사용자·관리자 권한 분기
- Recharts 기반 운영 통계·관리 화면 개발
Oreuda — GitHub 관리 서비스 · 프론트엔드 개발
개발자를 위한 GitHub 관리 서비스에서 Chrome Extension, 랜딩 페이지, GUI 결과물의 Markdown 파싱 기능을 개발했습니다.
- Next.js
- React
- TypeScript
- Chrome Extension API
- Chrome Extension 개발 및 웹스토어 배포
- GUI 결과물을 Markdown으로 변환하는 README 파서 구현
- 랜딩 페이지와 GitHub 연동 사용자 흐름 개발
실무 교육
삼성청년SW아카데미
8기 · 웹 개발 교육 수료
Java, JavaScript, MySQL, Spring, React 기반 웹 개발과 팀 프로젝트를 수행했습니다.