춤을 사랑하고 커피를 좋아하며 개발을 즐깁니다.
새로운 도전을 모험하며, 끊임없는 성장을 통해 성취감을 느낍니다.
개발자로서의 성장을 위한 의지와 집념이 강합니다.
About me
김수민 웹 개발자(FE)
98.05.13
경기도 수원시 영통구
010-9086-2046
tnalsdl2046@gmail.com
Archiving
VelogSkills
Basic
HTML
CSS
JavaScript
TypeScript
Frontend
Next.js
React
Zustand
React-Query
SASS
Styled Components
Tailwind
Backend
Node.js
Express
MongoDB
Firebase
Deployment
AWS
Vercel
Tools
Git
GitHub
Figma
Claude
Cursor
Project
컷꾸 (Cut kku)
2026.06 (1人)
- 설명
- 포토부스(인생네컷 등)에서 찍은 사진에 스티커·텍스트·필터를 더해 나만의 프레임을 꾸미고 PNG로 다운로드할 수 있는 정적 웹 서비스입니다. 서버 없이 Vercel로 배포하여 모든 기능을 클라이언트 사이드에서 처리합니다.
- 결과
- 서버 없는 클라이언트 사이드 이미지 합성·다운로드 구현
- 기술 스택
- Next.js
- TypeScript
- Tailwind
- Zustand
- html-to-image
V-CORE
2026.05 (1人)
- 설명
- 패션·라이프스타일 커머스의 정적 상세 이미지를 360°로 돌려보고 직접 체감할 수 있는 제품 뷰어를 가정하여 만든 프로젝트입니다.
- 결과
- WebGL·Three.js·R3F 학습 및 인터랙티브 3D 뷰어 구현
- 기술 스택
- Next.js
- TypeScript
- Tailwind
- Three.js
- ReactThreeFiber
- Drei
- Zustand
i-reading 디자인 시스템
2026.02 (1人)
- 설명
- 지인의 부탁으로 LMS 서비스 i-reading에 사용될 컴포넌트 라이브러리를 단독으로 구축한 프로젝트입니다.
- 결과
- Figma 기반 15종 컴포넌트 라이브러리 단독 구축 및 Storybook 쇼룸 운영
- 기술 스택
- React
- TypeScript
- Tailwind
- StoryBook
- Radix-UI
- CVA
- Vite
포트폴리오 사이트
2025.01 (1人)
- 설명
- 현재 보고 계신 사이트이자 프론트엔드 개발자로서 저를 어필하기 위한 포트폴리오입니다.
- 결과
- 나를 어필할 수 있는 포트폴리오 완성
- 기술 스택
- Next.js
- TypeScript
- SASS
- FramerMotion
- Swiper
Investmetic
2024.10 ~ 2024.12 (프론트엔드 5人, 백엔드 6人, 디자이너 1人)
- 설명
- 투자 매매 전략 공유 및 중개소셜 플랫폼 Investmetic은 트레이더와 투자자들이 투자 전략의 성과를 공유하고 이를 보며 학습하여 본인의 스킬들을 향상시킬 수 있는 장을 마련합니다.
- 결과
- 기업연계 프로젝트 최우수상
- 기술 스택
- Next.js
- TypeScript
- Tanstack-Query
- Zustand
- SASS
- StoryBook
- MSW
- HighCharts
FE Pick
2024.10 ~ 2024.10 (1人)
- 설명
- 프론트엔드 스택의 기초 개념 퀴즈 플랫폼 FEPick은 프론트엔드 스택에 대해 공부하고 있는 주니어 개발자가 다양한 퀴즈를 통해 스스로의 학습 진도를 체크하면서 실력을 쌓아갈 수 있는 유익한 시간을 제공합니다.
- 결과
- 혼자서 시도해본 프로젝트의 전반적인 경험
- 기술 스택
- React
- TypeScript
- Tanstack-Query
- Zustand
- Emotion
- Node.js
- MongoDB
- AWS
Career
(주)한국글로벌널리지
2025.04 - (재직 중)frontend 개발
Next.js
React
Tailwind
Zustand
React-Query
멀티테넌트 LMS 플랫폼 구축
2025년 상반기 - 2026년 상반기- 기업별로 독립된 도메인·권한·UI를 갖으며 커스터마이징이 가능한 멀티테넌트 LMS 플랫폼
- TanStack Query HydrationBoundary와 Zustand useShallow 셀렉터로 초기 상태 캐싱 및 불필요한 리렌더 최소화
- Next.js 미들웨어 8단계 파이프라인(workspace 조회 → 세션 컨텍스트 전환 → 권한 평가 → 메뉴 rewrite)을 통해 테넌트별 라우팅을 처리
- 기존 SaaS형 어드민 대시보드를 플랫폼 아키텍처(멀티테넌트 라우팅·권한 체계·데이터 페칭 구조)에 맞춰 마이그레이션하여 관리자 기능을 플랫폼 내 하나의 도메인으로 통합
사용자 정의형 설문 및 평가 시스템(Form Builder) 구축
2026년 상반기- 객관식·체크박스·드롭다운·주관식·선형척도·파일업로드 6가지 질문 유형과 편집·미리보기·응답·결과·채점·제출 6개 라우터로 구성된 폼 도메인 전반을 FSD 4계층 구조로 설계·구현
- react-hook-form 기반 로컬 우선 상태 관리 + AbortController 디바운스 자동저장으로 직전 요청 자동 취소, react-dnd 드래그 앤 드롭으로 구글폼 수준의 인터랙티브 에디터 UX 구축
- 도메인 가이드(SKILL.md) 작성을 통해 신규 기능 고도화 시 필요한 단계별 체크리스트와 아키텍처 규약을 표준화하여 컨벤션 준수율 향상 및 온보딩 비용 단축
SaaS 기반 어드민 시스템 개발
2025년 중반기 - 2026년 상반기- 운영팀이 개발자 개입 없이 기업별 맞춤 교육 관리 시스템을 생성·운영할 수 있는 SaaS형 어드민 개발
- 기존 React SPA 환경을 Next.js 16 App Router로 전면 마이그레이션하고, SSR에서 AuthHydrator로 권한 정보를 초기 로드하여 클라이언트 깜빡임 없이 조건부 UI 렌더링
- 43개 재사용 데이터 컬럼 정의로 테이블 컴포넌트 시스템 구축, 동적 정렬·필터링·페이지네이션 통합
디자인 시스템 개발
2025년 상반기 - 2026년 상반기- 공통 컴포넌트 설계 및 구축을 통한 서비스 전반의 일관성과 재사용성 강화
- 개발 생산성 개선 및 Storybook 기반 협업 환경 구축