미리보기

Front-End Developer

• 웹 프론트엔드 개발 - Vue.js, Nuxt.js

• 레거시 웹 유지보수 - VanillaJs, Backbone.js

• 플랫폼 주요 서비스 개발 - 전시, 모바일라이브커머스, 상품

• 레거시 프로젝트 마이그레이션 참여

Key Contributions

• 레거시 코드의 점진적 마이그레이션: Backbone 및 기존 Vue.js 기반 코드를 Nuxt.js로 단계적으로 전환하며, 코드 구조 개선과 기술 부채 해소를 병행

• 뷰-로직 분리 및 컴포넌트 재설계: 뷰와 로직이 얽혀 있던 기존 코드를 역할 중심으로 분리하고, 재사용 가능한 컴포넌트 단위로 설계해 유지보수성과 협업 효율성 향상

• SSR 기반 성능 및 SEO 개선: Nuxt.js의 서버사이드 렌더링을 활용해 초기 페이지 로딩 속도를 개선하고, 검색 엔진 최적화(SEO) 대응력 강화

Tech Stack

Vue.js, Nuxt.js, Javascript, Typescript, Vuex, Pinia, SSR

Key Contributions

• 다양한 영상 소스를 통합한 피드 페이지 구축 : 유튜브, 인스타그램, 리뷰 영상, 사내 영상 시스템 등 다양한 출처의 영상을 한 화면에서 피드 형식으로 제공

• 다수 영상 탐색 최적화를 위한 Virtual Scroll + 자동재생 연동 : Virtual Scroll과 자동재생 옵저버 기능을 연동하여, 스크롤·스와이프 시 자연스럽게 영상이 재생되도록 구현

• YouTube Embed API 기반 커스텀 플레이어 개발 : YouTube embed 플레이어와 자체 UI를 유기적으로 연결해 일관된 사용자 경험 제공 및 인터랙션 기능 강화

Tech Stack

Nuxt.js, Typescript, Pinia, SSR

Key Contributions

• 상품 상세 페이지 내 영상 기반 구좌 신설: 숏츠, 라이브쇼, 홈탭 배너 영상 노출 영역을 추가하여, 사용자가 상품에 대한 흥미를 영상으로 유도하고 정보 탐색을 확장할 수 있도록 개발

• 앱 기능과의 유기적 연동: WebView 기반 영역에서 AppInterface를 활용해 라이브커머스 알림 신청 등 네이티브 기능과의 연동을 구현, 웹-앱 간 상호작용 강화

• 성과: 상단 숏츠 배너 일평균 9119건 재생, 라이브쇼 영상 영역 일평균 6002건 재생, 하단 연관숏츠영역 일평균 4939건 재생

Tech Stack

Vue.js, Javascript, Vuex, WebView

Key Contributions

• 스와이핑 기반 숏폼 탐색 UI 개발: 콘텐츠 탐색을 위한 상세 페이지 구현

• 콘텐츠 큐레이션 강화를 위한 숏츠탭 구축: 무한스크롤의 격자형 UI를 통해 사용자 관심도 기반 콘텐츠 노출 강화

• 자동 재생 정책 통합: 자동재생 옵저버 기반 렌더링 제어와 브라우저 자동재생 정책을 정리하고 통합하여, 다양한 기기/환경에서도 안정적으로 동작하도록 개발

Tech Stack

Vue.js, Javascript, Vuex

Key Contributions

• AWS IVS 플레이어 도입: IVS 플레이어를 도입으로 초저지연 스트리밍 환경을 구축하여 실시간성과 안정성 확보하고, timedMetaData를 사용하여 이벤트성 기능 개발

• 채팅 기능 구현: AWS Chime을 도입하여 실시간 채팅 기능을 연동하였고, 비용 이슈를 해결하기 위해 소켓사용 데이터를 api로 전환하는 작업

• 다채널 라이브 시스템 구축: 스와이프 UI를 통해 여러 라이브 채널 간 원활한 전환 구현하여 동시다채널 방송 시스템을 구축함

• 통합 상태 관리 설계: API, 소켓, 플레이어 이벤트를 유기적으로 연동하는 store 구조 설계

Tech Stack

Vue.js, Javascript, SCSS, Vuex, AWS Chime, AWS IVS Player