김영인

사용자 경험 개선에 집중하는 프론트엔드 개발자
김영인 프로필 사진

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를 실무 워크플로에 통합해 설계 검토·반복 구현·리팩터링을 가속화하고 있습니다. AI 제안을 도메인 컨텍스트와 대조·검증하며 수용 여부를 판단하는 방식으로, 생산성과 코드 품질을 동시에 유지합니다.

Skills

Languages
TypeScript, JavaScript(ES6+)
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

Harvesters-LALA Service Link | Private Repo
2026.01 ~ 진행 중 | 팀 프로젝트(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(role/aria-*) 및 키보드 조작 핸들러 반영
  • FCM 알림 파이프라인 통합 + BroadcastChannel 멀티탭 동기화
  • Vitest+MSW로 유닛→통합→E2E 인증 테스트 인프라 구축 및 회귀 차단
  • 도메인별 DTO 불일치를 Swagger/노션 문서화로 체계화하여 백엔드 협업 비용 절감
Myblog Service Link | GitHub
2025.08 ~ 2025.09 | 개인 프로젝트(100%) | 기획·설계·구현·배포 전담
"다른 사람은 읽을 수 있지만, 업로드는 나만 가능한" 기술 블로그로, 기존 블로그 플랫폼에서 부족했던 해시태그 기반 분류·검색을 직접 구현해 내가 쓴 글을 위키처럼 빠르게 다시 찾을 수 있도록 설계한 서비스

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를 정리 → Lighthouse SEO 100점
  • [검색/필터 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