클릭하여 복사
PORTFOLIO / 2026
사용자와 동료의 경험을 고민합니다.

김기준

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
이미지 준비 중
사이드 프로젝트

Cursor Commerce Dashboard

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

Next.jsReact 19TypeScriptSupabaseTanStack QueryZustandTailwind CSSStorybookToss Payments
페이지 이동GitHub
이미지 준비 중
사이드 프로젝트

커뮤니티 앱 (Expo)

Expo Router 기반 크로스 플랫폼 커뮤니티 앱입니다. 로그인·회원가입 인증 플로우, 피드 목록, 마이페이지·설정 탭을 구성했고 TanStack Query로 서버 상태를 관리하며 axios 기반 API 레이어를 분리했습니다.

ExpoReact NativeTypeScriptExpo RouterTanStack QueryReact Navigation
페이지 이동GitHub
이미지 준비 중
초기 작업

프론트엔드 포트폴리오 사이트

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

HTMLCSSJavaScriptReactGSAPLocomotive Scroll
페이지 이동GitHub
이미지 준비 중
사이드 프로젝트

Portfolio — Next.js 인터랙티브 포트폴리오

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

Next.jsReact 19TypeScriptTailwind CSSGSAPThree.jsSupabase
페이지 이동GitHub
01 / 05

Skills

카테고리별로 묶은 기술 스택입니다. 항목을 누르면 역량과 사용 경험을 볼 수 있습니다.

Frontend

웹·앱 UI와 인터랙션

Backend

서버·API 설계 학습

Database

데이터·인증·실시간

Design

UI 설계·시각 작업

Collaboration

협업·문서·워크플로

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

합류 또는 프로젝트 제안 문의가 있으시다면 언제든 환영합니다. 메일을 보내주시면 보통 이틀 안에 답변드립니다.

가벼운 개발 이야기 커피챗이나 피드백도 좋아요. "요즘 어떤 스택에 관심 있으세요?" 같은 가벼운 질문 한 통 환영합니다 🙂

메일 보내기GitHub 보러가기