T ― Y

소개 및 역할

삼성전자의 다양한 제품과 콘텐츠를 TV 애플리케이션에서 한 번에 경험할 수 있는 Tizen 기반 OTT형태의 웹앱입니다.

  • TV 웹앱 환경에서 사용자 경험을 위한 TV 컨트롤, 자연스러운 전환, 기기별 호환성 등의 최적화를 담당했습니다.
  • React + Typescript 환경에서 공통된 UI 컴포넌트, 레이아웃 개발 및 퍼블리싱을 담당했습니다.
  • Styled-components를 활용하여 스타일 작업을 진행했습니다.
  • 투입인원: 퍼블리셔 2명, 프론트엔드 3명, 기획 5명, 디자이너 2명, PM 1명

기여한 부분

  • spatial-navigation 라이브러리를 도입하여 TV 컨트롤러 기반 포커스 제어 기능을 구현 (구현과정→)

  • 삼성 스마트 TV Web Engine 환경에 따른 호환성 대응

    공식 문서를 참고하여 모델별 Web Engine(Chromium, Tizen 등)에 따라 지원되는 CSS 속성, 미디어 포맷, JavaScript API 사전 검토

    • Web Engine 버전에 따른 렌더링 오류 및 기능 미지원 이슈를 최소화
    • 최신 모델부터 구형 모델까지 일관된 화면과 기능 구현

  • 애니메이션 성능 최적화를 위해 브라우저의 Reflow 및 Repaint 비용 분석

    대표적으로 top/left와 transform의 렌더링 성능 차이를 검증하기위해, 시연용 샘플을 제작하고 실제 TV 디바이스 환경에서 테스트

    • 불필요한 Repaint를 줄이기 위해 GPU CSS 속성 중심으로 개선
    • Chrome DevTools의 Layers 패널을 활용해 레이어 생성 개수와 Paint count를 비교 분석
    • 결과적으로 화면 깜빡임과 노이즈 현상이 줄고, 애니메이션이 부드럽게 작동하여 렌더링 성능 개선

  • 비디오 · 이미지 로딩 상태에 따른 자연스러운 전환 제어

    • onLoad, onCanPlay, onLoadedData 등을 활용해 리소스의 로딩 상태를 감지하고 그에 따라 화면 렌더링을 제어
    • 비디오의 재생/일시정지 타이밍과 이미지 전환 시점을 동기화하여 부드럽고 안정적인 전환 효과 구현

사용 기술

  • Typescript

    타입을 정확히 명시하여 프로젝트의 안정성과 타입 추론으로 개발 편의성을 높이기 위해 사용했습니다.

  • Styled-components

    컴포넌트 단위로 스타일을 분리하고 전달된 props에 따라 조건부 스타일을 쉽게 적용(동적 스타일링)할 수 있다는 장점이 있어 선택하게 되었습니다.