디테일과 간결함에 주의를 기울이는 프론트엔드 개발자

3년간 SI 환경에서 다양한 프론트엔드 프로젝트를 경험하며 성장해온 개발자입니다. Next.js 기반의 대시보드, 관리자 페이지, 기업 웹사이트 등 업종과 요구사항이 다른 10여 개 프로젝트의 프론트엔드를 담당했습니다.

코드를 작성할 때 가장 중요하게 생각하는 건 '사용자가 막히는 지점이 없는가'입니다. 로딩 상태 하나, 에러 메시지 하나도 사용자 경험의 빈틈이 될 수 있다고 믿기에, 엣지 케이스까지 고려한 견고한 UI 구현에 집중합니다.

🌐 Portfolio: jaerinjaerin.vercel.app

Frontend

Mobile

Database & Tools

• Next.js & TypeScript를 활용하여 프로젝트의 개발과 운영이 가능합니다.
• Motion(Framer Motion) & GSAP를 사용하여 부드러운 애니메이션과 인터랙티브한 사용자 경험을 제공하는 웹사이트 개발이 가능합니다.
• AWS 인프라(S3, CloudFront)와 다국어 지원(next-intl), 모니터링(Sentry, Google Analytics)을 통해 글로벌 서비스 운영 환경을 이해하고 있습니다.
• 서버 컴포넌트에서 DB 직접 접근 패턴과 SWR 캐시 전략을 조합하여 네트워크 오버헤드를 제거하고 실시간 데이터 동기화가 가능합니다.

지오펜스 기반 장소 도착 알림 애플리케이션

Flutter | Hive | GoRouter | Geolocator | 2025.08 - 2025.12

• Naver Local API + Geocode API 조합으로 주소 검색 실패율 감소
• 전역 상태 기반 발송 이력 관리로 푸시 알림 중복 발송 방지
• Firebase Google Analytics 연동 및 iOS App Store 배포

인터랙티브 지도와 타임라인으로 시각화한 웹 사이트

Next.js 15 | TypeScript | Mapbox GL | Zustand | 2025.10 - 2025.12

• Mapbox GL 클러스터링으로 100개 이상의 데이터를 지도에서 자연스럽게 탐색 가능
• 뷰포트 감지 커스텀 훅으로 Drawer 열림 시 마커 가려짐 이슈 해결
• Lighthouse 성능 최적화로 Performance 점수 52→78점 개선, 초기 로딩 52% 개선

AI 기반 이미지 생성 및 3D 모델 제작 SaaS 플랫폼

Next.js 15 | TypeScript | Three.js | NextAuth v4 | 2025.03 - 2025.08

• 서버 컴포넌트에서 DB 직접 접근하여 네트워크 오버헤드 제거, 초기 렌더링 속도 개선
• Google Sheets 자동 저장 + Discord 실시간 알림으로 팀 협업 효율 향상
• NextAuth v4 + Prisma로 소셜 로그인(Google/Kakao) 통합 인증 구현

삼성 S+ 다국어 지원(i18n) 게이미피케이션 퀴즈 플랫폼

Next.js 14 | TypeScript | next-intl | Sentry | Google Analytics | 2024.09 - 2025.01

• Accept-Language 헤더 파싱으로 사용자 언어 자동 감지, 50개국 언어 대응
• Sentry 에러 모니터링 도입으로 평균 대응 시간 30% 감소
• AWS SES + next-intl로 50개국 언어별 이메일 템플릿 구축, 인증 메일 자동 발송

• 웹 사이트 최적화와 성능 개선, 꼭 해야하나요? - 2025.11.28
• 허점이 없는 UI로 UX를 향상시키기 - 2025.08.23
• 다국어를 지원하는 페이지 만들기 - 2025.01.06

이 레포지토리는 macOS 스타일 인터페이스를 가진 인터랙티브 포트폴리오 웹사이트입니다. GSAP를 활용한 드래그 인터랙션과 윈도우 관리 시스템을 구현했습니다.

Tech: Next.js 16, React 19, TypeScript, GSAP, Tailwind CSS 4, Zustand

📖 기술 문서 보기