김기준

1995 · 경기 부천

Experience

회사에서 기여한 프로젝트들입니다.

웹 개발
대량 문자 발송 플랫폼 리뉴얼
Frontend Developer
SMS·LMS·MMS 대량 발송 및 실시간 양방향 소통 웹 서비스의 구조 재설계와 성능 고도화를 담당했습니다.
주요 성과
- Feature 단위 폴더 구조와 SOLID 원칙 기반 컴포넌트 재설계로 100개 이상 컴포넌트 약 30% 감소
- CRA → Vite 마이그레이션으로 빌드 속도 약 30% 단축, 초기 로딩 1초 이내 개선
- TanStack Virtual 도입으로 10만 건 주소록 스크롤 렉 해소
- 모바일 앱 내재화 착수 및 불필요 코드·외주 의존 구조 정리로 약 800MB 규모 코드베이스 경량화
- Cursor Rules·Figma MCP 기반 AI 개발 환경 구축으로 팀 컨벤션 일관성 확보
사용 기술
ReactTypeScriptViteMUIZustandTanStack QueryTanStack VirtualStorybookWebSocketFCM
앱 개발
대량 문자 발송 플랫폼 앱
Frontend Developer
대용량 문자 발송 서비스를 모바일에서도 누구나 쉽게 이용할 수 있도록 React Native 기반 앱을 설계·개발했습니다. 네이티브 화면과 WebView 하이브리드 구조를 병행하며, 초기 구현 이후 Feature 단위 구조 정비와 상태·UI 로직 리팩토링을 거쳐 주소록 관리부터 발송·결제·상태 확인까지 이어지는 사용자 여정을 모바일 환경에 맞게 재구성했습니다.
주요 성과
- SMS·LMS·MMS 대량 발송을 모바일에서 완결할 수 있는 단계형 발송 플로우 설계 — 대상 선택, 메시지 작성, 발송·결과 확인까지 일관된 UX로 통합
- 입력 검증과 단계별 가이드 UI로 발송 실수를 줄이고, 비전문 사용자도 안정적으로 서비스를 이용할 수 있도록 사용성 개선
- 개인·그룹 주소록 관리 및 대량 발송용 연락처 필터·선택 기능 구현, 대규모 연락처 환경을 고려한 데이터 구조 최적화로 성능 안정성 확보
- WebSocket 기반 실시간 양방향 통신으로 채팅·발송 상태를 즉시 동기화하고, 프론트·백엔드 간 이벤트 스트림을 일관되게 처리
- WebView 기반 하이브리드 화면 구성으로 웹 서비스 자산을 앱 내에 통합, 네이티브·웹 경계에 맞춘 인증·결제(EasyPay) 연동 처리
- Android·iOS 스토어 배포 및 빌드·심사 이슈 대응, 크로스 플랫폼 환경에서 UI·기능 패리티 유지
- 운영 단계에서 Zustand·TanStack Query 기반 상태·서버 데이터 레이어를 리팩토링하여 유지보수성과 기능 확장 대응력 강화
사용 기술
React NativeTypeScriptZustandTanStack QueryWebSocketWebViewEasyPay
통합 웹 개발
스마트오더 · 키오스크 · POS 통합 시스템
Frontend Developer
카페 운영 인력 부족 문제를 해결하기 위한 통합 주문·결제·관리 시스템을 백엔드 개발자와 2인 체제로 기획부터 운영까지 구축했습니다.
주요 성과
- 오프라인·온라인 결제 로직 추상화 및 SSE 기반 실시간 주문 수신·관리자 화면 동기화
- Optimistic Update와 문자 알림 연동으로 주문 처리 시간 2~3분 → 30초 이내 단축
- 일 평균 주문량 여름 평일 50건 → 90~100건, 주말 150건 이상으로 증가
- SEO 불필요·실시간 처리 중심 서비스 특성에 맞춰 React SPA 아키텍처 선정
사용 기술
ReactTypeScriptTailwind CSSZustandTanStack QuerySSENicePayEasyPay

Projects

개인적으로 만들어 본 사이드 프로젝트들입니다.

사이드 프로젝트

MyPage — 개인 블로그·커뮤니티

Supabase 기반 서버리스 환경에서 토픽 작성·공유, 댓글·좋아요, 팔로우, DM, 실시간 알림을 구현한 개인 웹앱입니다. BlockNote 에디터와 React Hook Form·Zod 검증으로 글 작성 UX를 구성하고, TanStack Query와 Zustand로 서버·클라이언트 상태를 분리했습니다.

React 19TypeScriptViteSupabaseTanStack QueryZustandBlockNoteTailwind CSSshadcn/ui

페이지 이동 GitHub

사이드 프로젝트

Commerce Dashboard

일반 커머스(홈·상품·장바구니·체크아웃)와 어드민 대시보드를 한 저장소에서 다루는 풀스택 프론트엔드 프로젝트입니다. Supabase Auth·RLS·Postgres 마이그레이션을 연동하고, Figma Commerce 템플릿 기준으로 디자인 토큰을 맞췄으며 Talk to Figma MCP로 컴포넌트 스펙을 동기화했습니다.

Next.jsReact 19TypeScriptSupabaseTanStack QueryZustandTailwind CSSStorybookToss Payments

페이지 이동 GitHub

초기 작업

Legacy Portfolio

프론트엔드 개발을 처음 배우며 만든 초기 포트폴리오입니다. HTML·CSS·JavaScript로 직접 퍼블리싱하고, GSAP·Locomotive Scroll 같은 라이브러리를 익히기 위해 스크롤 애니메이션과 가로 스크롤 섹션을 실험했습니다. 지금 보면 다소 투박하지만, 그때의 시도들이 이후 작업의 출발점이 되었습니다.

HTMLCSSJavaScriptReactGSAPLocomotive Scroll

페이지 이동 GitHub

사이드 프로젝트

Portfolio

Next.js 16 App Router 기반 단일 페이지 포트폴리오입니다. 커스텀 스크롤 루트와 GSAP ScrollTrigger로 섹션 스냅·가로 프로젝트 슬라이드를 구현했고, Three.js WebGL 파티클 배경과 Skills 카드 3D 틸트 인터랙션을 적용했습니다. Supabase topic 테이블과 연동해 블로그 portfolio 카테고리 글이 Projects 섹션에 자동 반영됩니다.

Next.jsReact 19TypeScriptTailwind CSSGSAPThree.jsSupabase

페이지 이동 GitHub

01 / 04

똑똑, 함께 일할 사람을 찾고 계신가요?

좋은 팀과 재미있는 프로젝트를 만나는 것을 기대하고 있습니다. 협업이나 합류 제안이 있으시다면 언제든 편하게 연락 주세요. 하루 이내 바로 답변드립니다!

새로운 기술을 배우고 프로젝트에 적용하는 과정에서 큰 즐거움을 느낍니다. 맡은 일은 끝까지 책임지고, 팀과 함께 더 좋은 결과를 만드는 것을 중요하게 생각합니다. 레거시와 새로운 기술 사이에서 정답을 고집하기보다, 현재 팀과 서비스에 가장 적합한 선택을 고민합니다. 작은 문제라도 그냥 지나치지 않고 직접 해결해 보며 서비스를 개선하는 개발자가 되고자 합니다. 꾸준히 성장하며 함께 일하고 싶은 프론트엔드 개발자 김기준입니다.

편하게 연락주시면 감사하겠습니다

메일 보내기 GitHub 보러가기