Product
· Mnet Plus 방송 콘텐츠 관리 시스템 개발
· 방송 메타데이터 및 미디어 자산 통합 관리

Engineering
· Refine + React 18 + TypeScript
· Ant Design 컴포넌트 시스템
· React Hook Form + Zod 폼 관리

Product
· 크리에이터/에이전시 통합 관리 플랫폼 개발
· 크리에이터 성과/수익/스케줄 관리 기능 제공

Engineering
· Vite + React 기반 CSR 구현
· Relay를 활용한 GraphQL 통합
· Relay Store를 통한 글로벌 상태 관리
· Fragment 기반 컴포넌트 설계
· GitHub Actions 기반 정적 리소스 자동 배포 시스템 구축

Engineering
· 코드 스플리팅, 트리쉐이킹 등으로 Overall LCP 약 40% 이상 개선 (2.x초 → 0.8 ~ 1.2초)

Product
· 입장효과를 가진 유저가 방송방에 입장할 경우 라이브 방송을 시청하고 있는 모든 유저에게 실시간으로 애니메이션을 노출시킴
· 시청자가 호스트에게 선물을 전송할 경우 실시간으로 애니메이션을 노출시킴

Product
· 실시간 인터랙티브 효과 시스템 개발
· 입장 효과 및 선물 애니메이션 실시간 동기화

Engineering
· STOMP 프로토콜 기반 WebSocket 구현
· 클라이언트 사이드 큐 시스템 구현
· WEBP 이미지 시퀀스 렌더링
· RAF 기반 타이밍 최적화

Product
· 실시간 방송 시스템의 화질/음질 개선
· 라이브/VOD 통합 플랫폼으로 확장

Background
· 기존 방송 플랫폼의 전면 재구성(Rewrite)을 위해 4명 규모의 프론트엔드 팀을 리드
· 특히 호스트의 방송 송출 환경 개선을 위해 반응형에서 적응형 웹으로 전환하여 디바이스 최적화된 리치 기능 제공을 목표로 함

Technical Challenge
· 적응형 웹 전환을 통한 호스트 송출 기능 강화
· 마이크로 프론트엔드 아키텍처 적용

Engineering
· 적응형 웹 아키텍처 적용
· React Query를 통한 서버 상태 관리
· Jotai 기반 클라이언트 상태 관리
· Redux/Redux-Observable에서 마이그레이션
· WebRTC SDK 통합 및 성능 최적화
· Next.js SSR 기반 초기 로딩 최적화
· Turborepo 기반 모노레포 구축

Product
· 저비용 기반의 호스트-유저 간 관계 형성 기능 개발
· 크리에이터를 위한 지속 가능한 수익 모델 구축

Engineering
· Vite + React 기반 웹 애플리케이션
· 네이티브 앱 WebView 연동
· Relay를 통한 GraphQL 데이터 관리
· GitHub Actions 기반 자동화
· Fragment 기반 컴포넌트 설계

Product
· WebRTC 스트리밍 SDK 개발 및 아키텍처 개선
· 재사용 가능한 모듈화 설계로 확장성 확보

Background
· 단일 방송방(LiveRoom) 페이지에서만 구현되어 있던 WebRTC 스트리밍 기능을 재사용 가능한 SDK로 분리하여, 프로필 페이지나 메인 피드 등 다양한 화면에서 방송 시청이 가능하도록 아키텍처를 개선
· Agora RTC SDK의 구조와 디자인 패턴을 참고하여 자체 WebRTC SDK 설계에 적용

Technical Challenge
· 특정 페이지에 강하게 결합된 WebRTC 로직을 분리
· 상태 관리 및 의존성 주입을 통한 모듈화
· STOMP 프로토콜 기반 실시간 통신 구조화
· Agora RTC의 Event-driven 아키텍처 패턴 적용

Engineering
· WebRTC SDK 코어
1. 이벤트 기반 WebRTC 클라이언트 구현
2. RTC Client/Stream 인터페이스 설계
3. ICE/STUN/TURN 서버 연동 및 최적화
4. MediaStream API를 활용한 스트림 처리

· 미디어 서버 연동
1. STOMP 프로토콜 기반 실시간 통신 구현
2. STOMP over WebSocket 연결 관리
3. 미디어 서버와 브로커 패턴 기반 통신

· 아키텍처 설계
1. Dependency Injection 패턴 적용
2. React Context API를 활용한 상태 관리
3. Factory Pattern으로 컴포넌트 생성 추상화
4. EventEmitter를 활용한 이벤트 기반 통신

Product
· HLS 기반 실시간 방송 시청 플랫폼 개발
· 네트워크 상태에 따른 적응형 스트리밍으로 안정적인 시청 경험 제공

Engineering
· hls.js를 활용한 HTTP Live Streaming 구현
· Live Streaming 전용 커스텀 플레이어 구현
· RTMP/HLS URL 및 스트림 키 관리 화면 구현
· OBS 브라우저 소스용 최적화된 웹 페이지 개발

Product
· Hakuna 앱의 Level 페이지를 WebView에서 React Native로 전환
· 네이티브에 가까운 UX 제공 및 빠른 화면 로딩 구현

Engineering
· React Native 환경 구축
· React Query를 통한 서버 상태 관리
· GitHub Actions를 통한 CI/CD 구축
· CodePush를 활용한 JavaScript 번들 배포
· Nexus Repository에 네이티브 아티팩트 업로드
· tailwind-rn을 활용한 일관된 디자인 시스템 구축

Background
· 기존 모바일 환경에서의 어뷰징 모니터링 한계 극복
· 데스크톱 환경에서 다수의 방송 동시 모니터링 필요성

Product
· 데스크톱 환경의 N분할 모니터링 시스템 구현

Engineering
· 웹 개발 파트 담당
· React (CRA) 기반 SPA 구현
· STOMP 프로토콜 기반한 웹소켓 실시간 스트리밍 데이터 처리
· postMessage API를 활용한 iframe-부모 창 간 통신 구현
· RequestAnimationFrame을 활용한 렌더링 최적화

Product
· 실시간 메시지 전송 및 채팅방 관리

Engineering
· 주요 기능들을 WebView로 제공하는 서비스이며 WebView 개발 파트 담당자로 프로젝트를 진행
· JavascriptInterface (Native to WebView) 정의 및 구현
· STOMP 프로토콜을 이용한 웹소켓 핸들링으로 실시간 데이터 처리 구현
· 리스트 가상화 (List Virtualization) 를 통한 채팅 목록 최적화

Product
· 부동산 P2P 플랫폼 데스크탑 웹 어플리케이션 개발

Engineering
· Nuxt.js

실무 필수 기능 및 인기 서비스 클론 코딩 강좌 제공

IC (Individual Contributor) & Technical Leadership:
· Frontend Unit Lead: 3-4명 규모 팀 리드
· 기술 스택 선정 및 아키텍처 설계
· 코드 리뷰 프로세스 확립

주요 개발
· WebView
· 반응형/적응형 웹
· React Native

기술 스택
· Frontend: React, Next.js, TypeScript
· State: React Query, Jotai, Redux
· API: GraphQL, Relay, REST
· Mobile: React Native, WebView
· Communication: STOMP, WebSocket
· Build: Turborepo, Vite
· CI/CD: GitHub Actions, CodePush

역할
· IC (Individual Contributor)

주요 개발
· 적응형 웹

기술 스택
· Frontend: Vue.js, Nuxt.js, JavaScript
· State: Vuex
· Style: SCSS
· Build: Webpack
· API: REST

역할
· IC (Individual Contributor)

주요 개발
· 적응형 웹

기술 스택
· Frontend: React.js, Javascript
· State: Redux
· Build: Webpack
· API: REST

16201050642H