김영인

정량 지표로 성능을 개선하고 유지 가능한 구조를 설계하는 프론트엔드 개발자
김영인 프로필 사진

Summary

1. 정량 지표와 도메인 문제를 바탕으로 성능·데이터 흐름·보안 UX를 함께 설계하는 프론트엔드 개발자입니다. 2. 인터랙션 성능 최적화로 프레임 드랍 80% 개선 및 INP 80ms대를 달성했으며, 이미지 전달 경로 분리와 `priority` 선요청 전략으로 Cold 기준 LCP 4.69s → 2.81s(약 40% 단축)의 사용자 경험을 구축한 경험이 있습니다. 3. 토큰 갱신 시 발생하는 동시 401 에러를 Singleton Promise와 재시도 큐로 해결해 인증 흐름을 안정화했으며, Client-only 인증 흐름을 BFF 하이브리드 패턴으로 전환해 인증 요청을 same-origin으로 통합하고 서버 간 요청에 x-internal-key 검증 계층을 추가한 경험이 있습니다. 4. RHF + Zod 기반 폼 아키텍처 리팩터링으로 단일 훅에 혼재된 상태·검증·분기를 책임 분리하여 핵심 훅 74%(592→78줄), 조립 컴포넌트 77%(230→53줄) 감소를 달성했으며, FSD 구조와 ESLint/Husky 자동화를 도입해 팀의 코드 품질과 정합성을 유지한 경험이 있습니다. 5. Claude Code·Cursor AI를 실무 워크플로에 통합해 설계 검토·반복 구현·리팩터링을 가속화하고 있습니다.

Skills

Languages
TypeScript, JavaScript
Frontend
React, Next.js(App Router), HTML5, CSS3, Radix UI, shadcn/ui
Styling
Tailwind CSS, Styled Components
Data/State
TanStack Query(React Query), Zustand, Redux Toolkit
Forms/Validation
React Hook Form, Zod
Testing
Vitest, React Testing Library, Playwright, MSW
Backend/DB
Supabase(PostgreSQL/Auth/Storage), MySQL
Image/Media
ImageKit (CDN/이미지 변환)
Notifications
Firebase Cloud Messaging
DevOps/Tools
Git, GitHub, Vercel, AWS(S3), ESLint 9, Husky, lint-staged
AI Tools
Claude Code, Cursor AI

Projects

Harvester-LALA Service Link | Private Repo
2026.01 ~ 2026.04 | 창업 프로젝트(스타트업 전환 중, 6명) | 프론트엔드 리드(인증, 폼 아키텍처 리팩터링, 레이아웃 구조 설계, 성능 최적화, 알림, CI/CD 구축)
댓글 수집 및 AI 분석 기반으로, 사용자의 추가 관여 없이 평판을 자동 수집·분석·관리하는 B2B 웹 서비스

Skills Next.js 15, React 18, TypeScript 5, TanStack Query 5, Zustand 4, Axios, React Hook Form, Zod, Tailwind CSS, Radix UI, FCM, Vitest, MSW, Playwright, ESLint 9, Husky

Key Achievements

  • [인터랙션 성능] 레이아웃 사이드바 리사이즈에서 고빈도 이벤트로 프레임 드랍/버벅임 발생 → requestAnimationFrame 기반 스케줄링 적용 → 프레임 드랍 80%+ 개선 및 INP 80ms대 안정화
    기술 블로그: AppSidebar WAI-ARIA & rAF 최적화
  • [상태/캐싱] 시나리오 토글에서 객체 배열 정렬 불일치로 쿼리 키가 흔들려 최대 4~5회 API 재호출 → 정렬된 집합 기반 리팩터링 및 쿼리 키 재설계 → 동일 조합은 최초 1회 호출 후 stale 전 추가 0회로 캐시 재사용
    기술 블로그: TanStack Query 캐시 키 안정화로 댓글·증거 조회 성능 개선하기
  • [인증] 클라이언트 진입점에 인증 흐름이 분산되어 동시 401 시 최대 5회 중복 refresh, 보호 경로 접근 시 클라이언트 렌더 후 후처리로 화면 깜빡임 발생 → BFF 하이브리드 전환(same-origin /api/auth/*) + 미들웨어로 보호 경로 1차 차단 + refreshViewer Singleton Promise(진입점 간) + 인터셉터 failedQueue(요청 간) 결합 → refresh 5회→1회 수렴, 보호 경로 깜빡임 0회, 외부 인증 도메인 직접 호출 0건
    기술 블로그: Signleton Promise 기반 JWT 유저 인증 기능 구현
  • [폼 아키텍처] 단일 훅 592줄에 상태·검증·Create/Edit 분기가 혼재해 변경 영향 범위 예측 불가 → RHF + Zod 도입, 스키마 base/create/edit 계층화, FormProvider Context 조립으로 책임 분리 → 핵심 훅 74% 감소(592→78줄), 조립 컴포넌트 77% 감소(230→53줄), 검증 규칙을 Zod 스키마 단일 출처로 통일

Basic Implementations

  • App Router + FSD 레이어 표준화(ESLint 의존성 방향 고정), WAI-ARIA·키보드 조작 반영
  • FCM+BroadcastChannel 멀티탭 알림 동기화, Vitest+MSW 유닛→통합→E2E 인증 테스트·회귀 차단, DTO 불일치 Swagger/노션 문서화로 협업 비용 절감
Myblog Service Link | GitHub
2025.08 ~ 2025.09 | 개인 프로젝트(100%) | 기획·설계·구현·배포 전담
Velog에서 부족했던 해시태그 AND 필터·검색을 직접 구현해, 내용이 기억나지 않을 때 해시태그로 빠르게 재탐색할 수 있는 위키형 개인 기술 블로그

Skills Next.js 15, React 19, TypeScript 5, TanStack Query 5, Zustand 5, Supabase(PostgreSQL/Auth/Storage), Tailwind CSS 4, shadcn/ui, Zod

Key Achievements

  • [성능/캐시] 동일 게시글 재방문에도 매번 DB 조회, SSR/CSR queryKey 불일치로 hydration 후 중복 fetch 발생 → unstable_cache + 태그 3종 분리(posts·comments·hashtags)로 무효화 범위 제어, cache-tags.ts로 태그·키 중앙화, 목록·검색을 prefetch/dehydrate/HydrationBoundary 단일 계약으로 통일, polling 제거 → mutation 후 revalidateTag + invalidateQueries 연결 → 캐시 히트 시 DB 쿼리 0건(Supabase API 로그 기준), 백그라운드 불필요 요청 0건
  • [SEO] 검색 유입을 위해 색인 품질을 높일 필요 → App Router metadata/ generateMetadata로 페이지별 title/description/OG/JSON-LD를 구성하고 sitemap.xml, robots.txt, semantic tags를 정리 → 색인 대상 페이지 100% 커버(sitemap·robots·JSON-LD 정합)
  • [검색/필터 UX] 뒤로가기·새로고침·URL 공유 후에도 동일 필터 조합 재현이 어려워 탐색 흐름이 끊김 → URLSearchParams 동기화와 useInfiniteQuery 기반 검색을 구성하고, Supabase RPC get_posts_with_all_hashtags로 다중 해시태그 AND/정렬을 서버 처리 → 동일 조건 재현

Basic Implementations

  • useInfiniteQuery + IntersectionObserver 무한 스크롤, Suspense/Skeleton
  • Supabase OAuth/RLS/Middleware/Server Actions로 Admin-only 쓰기·수정·삭제 권한 제어
  • 마크다운 실시간 미리보기, 드래그&드롭 이미지 업로드, Zod 검증으로 입력 신뢰도 확보
  • 잘못된 HTML 중첩으로 인한 hydration 오류 차단 — next/image·GFM·구문 강조·Mermaid 커스텀 컴포넌트로 마크다운 렌더 안정화
  • QueryClient 분리 및 쿼리 키 팩토리로 캐시 invalidate 키를 일관화하고 좋아요 동기화 정책 적용
승룡이네집 도서 검색 시스템 Service Link | GitHub
2025.03 ~ 2025.04 | 개인 프로젝트(100%) | 프론트엔드 (기획·설계·구현·배포)
군 복무 중 700~800권 규모 도서에 대한 검색 시스템이 없고, 수기/분산 관리로 자료와 실제 위치가 어긋나던 문제를 해결하기 위해 개발한 도서 위치 안내 서비스

Skills Next.js 15, React 19, TypeScript, Tailwind CSS, Supabase(PostgreSQL), ImageKit CDN, Vercel

Key Achievements

  • [성능(LCP)] Cold Start에서 LCP가 4.69s 까지 지연 → ImageKit CDN 경로 분리 + next/image priority/sizes/ 로더 최적화 → 4.69s→2.81s(약 40% 단축), 전송 용량 76KB→26KB로 개선
  • [전환 성능] 검색 후 상세 페이지 진입 후 지도 이미지 요청이 늦게 시작돼 전환 직후 체감 지연 → onMouseEnter/onPointerDown에서 new Image() preload로 네비게이션 전 요청 → ~5.8s→~4.3s로 전환 타임라인 개선
  • [데이터 흐름] 모달 마운트 후 useEffect → Server Action → DB 조회 → location 확정 → 이미지 렌더로 이어지는 순차 워터폴 → href에 ?loc=N URL 파라미터 전달, useSearchParams()로 마운트 시점에 location 동기 확정 (hard navigation은 DB 폴백 유지) → soft navigation 경로 Server Action 호출 0건, 모달 이미지 transferSize 0B(캐시 히트) · ~1ms 렌더, skeleton 표시 구간 소멸
  • [UX] Hard navigation으로 맥락이 끊겨 탐색 효율 저하 → Intercepting/Parallel route 모달과 스크롤 잠금, 모달 top 보정 적용 → 연속 검색/위치 확인 UX 안정화

Basic Implementations

  • URL query로 검색 상태 유지(새로고침/공유 재현)
  • Suspense/Skeleton + 반응형 레이아웃과 모달 스크롤 잠금
  • generateMetadata로 검색/상세 SEO 및 OG 동적 구성
  • ImageKit/next/image 전달 최적화 + 터치 대응(preload onPointerDown)

Education

동국대학교(서울) 식품생명공학과 졸업 2018.02 ~ 2023.07

교양 수업에서 프로그래밍을 처음 접한 후, 소프트웨어로 문제를 해결하고 서비스를 직접 배포할 수 있다는 점에 매력을 느껴 졸업 전 개발자로 전향을 결심했습니다.