미리보기

“기획부터 배포까지, 프론트엔드 혼자서 다 해봤습니다”

단독 프론트엔드 개발자로 근무하며 총 6개의 웹 프로젝트를 주도적으로 수행했습니다.
Vite 기반 SPA를 Next.js 14 App Router로 마이그레이션하고, SSR·SEO 최적화, 퍼포먼스 개선(업로드 속도 80% 단축), PG/PayPal 결제 연동, 콘텐츠 보안(우클릭·캡처 방지), i18n(다국어 지원) 등 다양한 실무 과제를 해결했습니다.
또한 AWS EC2, Vercel, PM2 기반의 배포 자동화부터 Supabase·Google API·Cron Job을 활용한 백엔드 연동, WebAssembly(ffmpeg.wasm) 기반 동영상 처리까지 경험했습니다.
Figma를 활용하여 디자인 시스템을 만들어 UI/UX를 구현하며, GA4 및 Facebook Pixel 등 마케팅 도구 연동으로 운영에도 기여했습니다.

"속도도 SEO도 놓칠 수 없어서, Vite 버리고 Next.js 14로 갈아탔습니다"

• 담당 업무: 프론트엔드 개발 (단독)

• 기술 스택: React, Next.js 14 (App Router), Zustand, AWS EC2, NginX, PM2, Tailwind CSS, Mui

• 성과 및 주요 작업:

  • SEO 최적화

    • 정확한 메타 데이터 렌더링으로 검색엔진 노출이 개선

    • 소셜미디어 공유 시 링크 미리보기 품질이 향상.

  • 성능 개선

    • Core Web Vitals 점수를 51점 → 93점으로 대폭 향상

  • 유지보수 효율 증대

    • UI 라이브러리 통합, 상태 관리 구조 개선, Fetch API 래퍼 커스터마이징 등

  • PM2 기반 AWS EC2 무중단 배포 환경 구축

"결제 연동부터 콘텐츠 보안, 속도 최적화까지 — 혼자서 한 회사의 프론트엔드를 책임졌습니다"

• 담당 업무: 프론트엔드 개발 (단독 진행)

• 기술 스택: React.js, Next.js, Tailwind CSS, Vite, GA4, Figma 등

• 성과 및 주요 작업:

  • PG 결제 서비스 연동 → 수익 창출 기반 마련 및 결제 경험 개선

  • 이미지 업로드 평균 시간 15초 → 3초로 최적화

  • 보안 강화 (우클릭 방지, 캡처 버튼 비활성화) 및 UI 개선

  • GA4, Facebook Pixel 연동으로 사용자 분석 기반 구축

"기획부터 디자인, 개발까지—혼자 만든 초정밀 인터랙티브 웹사이트"

• 담당 업무: 기획(프로젝트 개요서), 디자인(와이어프레임, 공통 컴포넌트 등), 프론트엔드 개발(단독)

• 기술 스택: React, Next.js, TypeScript, Tailwind CSS, Figma

• 성과 및 주요 작업:

  • 와이어프레임 및 디자인 시스템 수립

  • 고급 스크롤 애니메이션 구현

    • 엔딩 크레딧 효과, 부분 원 페이지 스크롤, 인터랙티브 애니메이션 구현.

    • Apple Magic Mouse, 트랙패드 및 iOS 대응 UX 최적화

  • 기획·디자인·개발 역량을 종합적으로 증명하며 전사적 기여

"문서 자동화, 서버 유지 자동화까지, 혼자서 풀스택으로 Gemgem Center를 구축했습니다"

• 담당 업무: 풀스택 개발 (웹 개발 단독 진행)

• 팀 구성: 총 3명 (PM, 디자이너, 웹 개발자)

• 기술 스택: Next.js, Supabase, Google API, Zod 등.

• 성과 및 주요 작업:

  • 고객문의 자동화 시스템 (Google Sheets/Docs 연동)

  • Supabase 비활성화 대응용 Cron Job 도입

  • Zod 기반 입력값 검증 및 첨부파일 업로드 기능 추가

  • 네이버 검색 색인 문제 해결 → 검색 노출 확보

"글로벌 유저를 위한 i18n 적용과 UX 개선으로 서비스 가치를 높였습니다"

• 담당 업무: 프론트엔드 개발

• 기술 스택: Next.js, Tailwind CSS 등

• 성과 및 주요 작업

  • 영어권 사용자를 위한 다국어(i18n) 지원 및 UI 안정성 확보

  • SNS 공유 기능, 커스텀 에러 페이지 등 사용자 친화 기능 추가

  • 이미지/비디오 API 교체에 따른 코드 리팩토링

  • PayPal 연동을 통해 해외 결제 수단 확장

"이미지에서 비디오로, 콘텐츠 비즈니스의 확장을 직접 구현했습니다"

• 담당 업무: 프론트엔드 개발

• 기술 스택: React.js, ffmpeg.wasm, AWS EC2, NginX

• 성과 및 주요 작업:

  • ffmpeg.wasm 기반 클라이언트 비디오 압축 및 워터마크 삽입

  • AWS EC2 + Nginx를 활용한 정적 배포

  • 신규 비즈니스 영역인 영상 콘텐츠 서비스 런칭 기여