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

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

Engineering
· 주요 기능들을 Next.js 기반의 웹 어플리케이션(SSR)으로 제공하는 서비스이며 웹 개발 파트 담당자로 프로젝트를 진행
· STOMP 프로토콜을 이용한 웹소켓 핸들링으로 실시간 데이터 처리 구현

Product
· 실시간성을 유지하면서 고화질, 고음질의 방송을 지원하는 커뮤니케이션 기술 성능 강화
· 라이브 방송 외에도 예고 영상, 추천 라이브 등 실시간 및 비실시간 방송을 즐길 수 있도록 시스템 개선

Engineering
· Next.js 기반의 웹 애플리케이션(SSR)으로 주요 기능 제공
· Web Frontend Unit Lead 역할로 프로젝트 진행
· 반응형 웹 사이트를 적응형 웹 사이트로 전환
· 모노레포 아키텍처 도입 (Turborepo 활용)
· 재사용 가능한 공통 컴포넌트 라이브러리 구현
· WebRTC SDK 통합 및 최적화
· 상태 관리 시스템 개선

• 기존: Redux, Redux-Observable

• 신규: React Query (서버 상태 관리) 및 Jotai (클라이언트 상태 관리) 도입으로 마이크로 상태 관리 구현

Product
· 호스트/크리에이터와 유저 간의 친밀한 관계를 기존 기프팅에 비해 더 저렴한(affordable) 금액으로 형성할 수 있는 기능 제공
· 호스트/크리에이터에게 지속적이고 안정적인 매출 수단을 제공하여 하쿠나 플랫폼 내에서 지속적으로 콘텐츠를 생산할 수 있는 환경 조성

Engineering
· Next.js 기반의 개발 환경 구축
· WebView를 통한 주요 기능 제공 및 WebView 개발 파트 담당
· JavascriptInterface를 통한 네이티브 앱과 WebView 간 통신 구현
· CI/CD 파이프라인 구축 (Next.js 정적 리소스 자동 배포)
· GraphQL 클라이언트로 Relay 도입 및 통합

Engineering
· WebRTC 방송 시청 기능 개선 및 확장

• 기존: 라이브룸에서만 WebRTC 방송 시청 가능

• 개선: WebRTC 코드를 SDK로 분리하여 다양한 환경에서 재사용 가능하도록 구현

· WebRTC SDK 개발

• 핵심 인터페이스 구현:
  · Peer Connect: 피어 간 연결 관리
  · Media Server Broker: 미디어 서버와의 통신 중개

• 모듈화된 설계로 유연성 및 확장성 향상

· 아키텍처 개선

• React Context API를 활용한 의존성 주입 구현

• 컴포넌트 간 결합도 낮춤 (decoupling)으로 유지보수성 향상

Product
· HLS (HTTP Live Streaming) 방송 시청 기능 구현

• 사용자에게 더 넓은 범위의 디바이스와 네트워크 환경에서 안정적인 스트리밍 경험 제공

Engineering
· 주요 기능들을 Next.js 기반의 웹 어플리케이션(SSR)으로 제공하는 서비스이며 웹 개발 파트 담당자로 프로젝트를 진행
· HLS 스트리밍 통합

• hls.js 라이브러리 연동 및 최적화

• 적응형 비트레이트 스트리밍 구현으로 네트워크 상태에 따른 품질 자동 조절

· 방송 설정 인터페이스 개발

• 스트리머를 위한 직관적인 방송 설정 UI/UX 구현

• 인코딩 설정, 스트림 키 관리 등 핵심 기능 통합

· 방송 시청 플레이어 개발

• 사용자 친화적인 컨트롤러 디자인

• 실시간 채팅, 화질 선택 등 부가 기능 통합

• 다양한 디바이스 해상도에 대응하는 반응형 레이아웃 구현

Product
· Hakuna App의 Level 페이지를 WebView에서 Embedded React Native로 전환

Engineering
· React Native 개발 환경 구축
· React Query를 도입하여 API 요청 상태 관리
· GitHub Actions의 특정 브랜치 머지 트리거를 통해 JavaScript 번들의 CodePush 배포 자동화
· GitHub Actions의 태그 푸시 트리거를 통해 Nexus Repository에 네이티브 아티팩트 업로드

Product
· 라이브 스트리밍 서비스의 어뷰징 관리를 위한 모니터링 도구 개발
· 모니터링 요원들이 데스크톱 화면에서 다수(N개)의 라이브 방송을 동시에 모니터링할 수 있는 기능 제공

Engineering
· 데스크톱 웹 애플리케이션으로 주요 기능 구현
· 웹 개발 파트 담당자로 프로젝트 진행
· CRA(Create React App)를 사용한 프로젝트 환경 구축
· iframe을 활용한 N분할 라이브룸 모니터링 기능 개발

• 다수의 라이브 스트림을 동시에 표시 및 관리

• 효율적인 리소스 관리를 통한 성능 최적화

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

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

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

Engineering
· Nuxt.js

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

개발 환경 및 기술 스택

1. 프론트엔드 개발
   · Vue.js 프레임워크 사용
   · Nuxt.js를 활용한 서버사이드 렌더링(SSR) 구현
   · PC 및 모바일 웹(MW) 대응 개발

2. 핵심 기술
   · Vue.js: 반응형 사용자 인터페이스 구축
   · Nuxt.js: SEO 최적화 및 성능 향상을 위한 SSR 구현
   · Vuex: 상태 관리 라이브러리로 복잡한 애플리케이션 상태 관리
   · TypeScript: 정적 타입 검사를 통한 코드 안정성 및 개발 생산성 향상

주요 제품 및 기능

1. 부동산 P2P 플랫폼 개발
   · 투자자와 대출자를 연결하는 중개 시스템 구축
   · 부동산 물건 정보 제공 및 검색 기능
   · 투자 포트폴리오 관리 도구
   · 실시간 투자 현황 및 수익률 계산기
   · 안전한 거래를 위한 에스크로 시스템 연동

2. 사용자 경험 최적화
   · 반응형 디자인을 통한 PC와 모바일 환경 모두 지원
   · 직관적인 UI/UX 설계로 복잡한 금융 정보를 쉽게 이해할 수 있도록 구현

개발 환경 및 기술 스택

1. 프론트엔드 개발
   · React 기반의 Single Page Application (SPA) 구현
   · 자체 솔루션을 활용한 커스텀 CMS (Content Management System) 개발

2. 핵심 기술
   · React: 컴포넌트 기반의 사용자 인터페이스 구축
   · 자체 솔루션: 기업 특화 요구사항에 맞춘 커스텀 기능 구현

주요 제품 및 기능

1. 맞춤형 CMS 플랫폼 개발
   · 직관적이고 사용자 친화적인 콘텐츠 관리 인터페이스 구현
   · 다양한 유형의 콘텐츠(텍스트, 이미지, 비디오 등) 지원
   · 실시간 미리보기 및 편집 기능 · 버전 관리 및 롤백 기능

2. 성능 최적화
   · 코드 스플리팅을 통한 초기 로딩 시간 최소화
   · 메모이제이션을 활용한 불필요한 리렌더링 방지
   · 효율적인 상태 관리를 통한 애플리케이션 성능 향상

3. 확장성 및 유지보수성
   · 모듈화된 구조로 새로운 기능 추가 용이
   · 재사용 가능한 컴포넌트 라이브러리 구축
   · 일관된 코딩 스타일과 문서화를 통한 유지보수성 강화

16201050642H