프론트엔드 개발자

이예민

내가 직접 사용하고 싶을 만큼, 사소한 디테일에도 진심이 담긴 제품을 만들고자 합니다.
프로젝트 구조가 내가 구상한 대로 깔끔하게 구성되고, 하나씩 맞물려 돌아가는 순간 가장 큰 몰입과 즐거움을 느낍니다.
UI 디테일을 놓치지 않기 위해 끝까지 고민하며, 사용자 입장에서 매끄럽게 느껴지는 경험을 만드는 것을 중요하게 생각합니다.
예상치 못한 에러가 발생해도 멈추지 않고 끝까지 파고드는 개발자가 되고 싶습니다.

성실함

유연함

목표 지향적

꼼꼼함

열정적

포트폴리오

깃허브

<h4>실시간 로그 기반 사용자 행동 분석 및 오류 대응을 위한 플레이어 통합 분석 시스템</h4>네이버 클라우드 Video Player Enhancement 부가 상품<ul><li>Highcharts로 시각화 컴포넌트 개발</li><li>공통 필터 구조 설계 -&gt; 페이지 간 필터 유지 및 sessionStorage 연동</li><li>OTP + 이메일 기반 2차 인증 로직 구현</li><li>Nuxt i18n 활용해 한국어·영어·일본어 다국어 지원</li></ul>기술 스택: <code>Vue</code>, <code>Nuxt</code>, <code>JavaScript</code>, <code>TailwindCSS</code>, <code>Highcharts</code>, <code>i18n</code>

Media Analytics

<h4>커스터마이징 가능한 웹 기반 고성능 플레이어</h4>네이버 클라우드 내 미디어 섹션 상품<ul><li>네이버 클라우드 기획자들과 협업을 통해 정책 및 요구 사항 적용</li><li>상품 문의 인입 시 피드백 도움</li><li>정기, 서스펜스 배포 후 버그 발생 시 수정 및 QA 진행</li></ul>기술 스택: <code>Vue</code>, <code>JavaScript</code>

Video Player Enhancement

<h4>쇼핑몰 내 숏폼 콘텐츠를 상품과 연동하고, 위젯으로 삽입 가능한 영상 커머스 플랫폼</h4><ul><li>기존 Live24위젯에 통합되어 있던 구조에서 별도로 분리, 번들 사이즈 약 40% 감소<ul><li>Swiper.js로 3D 큐브(인스타그램 스토리 UI) 위젯 개발</li><li>플로팅 UI 등 다양한 숏폼 재생 형태 구현</li></ul></li><li>Highcharts로 시청 시간, 클릭율 등 전환 지표 시각화</li></ul>기술 스택: <code>Vue</code>, <code>Nuxt</code>, <code>TailwindCSS</code>, <code>Firebase</code>, <code>Highcharts</code>, <code>Swiper.js</code>

Shorts24

<h4>설치 한 번으로 실시간 방송과 다시보기를 통한 영상 커머스를 구현하는 플랫폼</h4><ul><li>실시간 방송 종료 후 생성되는 HLS 영상을 편집하는 트리머 기능 구현<ul><li>HLS 영상을 2% 단위로 탐색해 주요 장면 캡처 후 타임라인 구성</li><li>GSAP 기반 드래그 API로 시작/종료 막대 조작 UX 구성</li></ul></li><li>공통 Alert 시스템<ul><li>Pinia + 전역 레이아웃 기반으로 설계 및 적용</li><li>모든 컴포넌트에서 간편하게 알림 노출 가능하도록 전역 구조 설계</li></ul></li></ul>기술 스택: <code>Vue</code>, <code>Nuxt</code>, <code>JavaScript</code>, <code>TailwindCSS</code>, <code>Pinia</code>, <code>HLS.js</code>, <code>GSAP</code>

Live24

<h4>라이브 방송 시작 시 사용자에게 푸시 알림을 전송하는 FCM 기반의 PWA 앱</h4><ul><li>Next.js 기반으로 PWA 구성 및 설치형 모바일 앱 구현</li><li>클라이언트에서 FCM 토큰 생성 → 서버 전달 및 저장 처리</li><li>서버와 협업하여 저장된 토큰에 대해 방송 시작 시 푸시 알림 전송 흐름 구현</li><li>Firebase Cloud Messaging API 연동 및 테스트 주도</li></ul>기술 스택: <code>React</code>, <code>Next.js</code>, <code>TypeScript</code>, <code>Firebase</code>, <code>Firebase</code>, <code>PWAw</code>

Live24 알림 앱 (PWA)

<ul><li>Media Analytics 개발<ul><li>Video Player Enhancement 로그 기반 주요 지표(재생 성공 수, 재생 시간 등) 시각화</li><li>공통 필터 시스템 구현 -&gt; 모든 페이지에서 동일 조건 비교 가능</li><li>OTP + 이메일 기반 2차 인증 기능 개발</li></ul></li><li>Video Player Enhancement 유지보수<ul><li>네이버 클라우드 내 상품인 VPE 개발 및 유지보수</li></ul></li><li>카페24 기반 숏폼 커머스 앱 쇼츠24 개발<ul><li>숏폼 콘텐츠 재생 위젯 개발 (3D 큐브 전환 UI 포함)</li><li>숏폼 로그 수집 및 분석 탭 시각화 구현</li></ul></li><li>라이브 커머스 앱 라이브24 내 영상 편집 도구 개발<ul><li>HLS 기반 비디오 트리머 개발 -&gt; 2% 단위 탐색 후 캡처 -&gt; 타임라인 구현</li><li>시작/종료 지점 지정 -&gt;서버에 구간 정보 전달</li><li>사용자 직관성 고려한 인터페이스 설계</li></ul></li><li>라이브 커머스 앱 라이브24의 알림 받기 PWA 개발<ul><li>Firebase Cloud Messagin API를 이용해 쇼핑몰 라이브 시 알림 구현</li></ul></li></ul>