WIT – NTS UIT Blog

(번역) CSS GPU 애니메이션 제대로 하기

Posted by in Research, Translation

원문: https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/ 본 번역문은 원작자인 Sergey Chikuyonok의 동의하에 번역 및 게시되었습니다. 이제 대부분의 사람들이 모던 웹 브라우저가 GPU를 사용해서 웹 페이지의 일부를 렌더링 한다는 사실을 알고 있습니다. 예를 들어,  trasnform 속성을 사용해서 CSS 애니메이션을 구현하면 left나   top 속성을 썼을 때 보다 훨씬 부드러워 보입니다. 그러나 만약 “어떻게 GPU를 사용해서 부드러운 애니메이션을 만들어 낼 수 있을까요?”라는 질문을 던져본다면, 아마 들려오는 대답은 ” transform: translateZ(0)이나  will-change를 쓰세요”라는 말일 것입니다. 우리는 마치 IE6 대응을 위해  zoom:1을 사용하는 것처럼, 이 두가지 속성을 GPU가 애니메이션 작업을(혹은 브라우저 벤더들이 좋아하는 방식으로 표현하자면, ‘컴포지팅’을) 할 수 있도록 준비 하는 용도로 사용하기 시작했습니다. 하지만 간단하게 데모로 만들어…read more

HTML5 비디오 플레이어 마크업 작업기

Posted by in Research

서론 네이버 메인에는 광고가 군데군데 들어가 있는데, 저는 이 중에 롤링보드라는 영역의 비디오 플레이어 마크업 작업을 진행해야 하는 상황이었습니다. 기존에는 플래시로 광고 영상 플레이어가 구현이 되어 있었기 때문에, 이를 순수 HTML5로 변환하는 작업이었습니다. 그림 1: 네이버 메인 롤링보드 영역 처음 해보는 플레이어 마크업 이었기 때문에, 어떻게 시작을 해야 할지 약간 감이 잡히지 않아서 본격적인 마크업을 시작하기 전에 다른 서비스를 레퍼런스 삼아 분석해 보기로 하였고, 주요 비디오 스트리밍 서비스 사이트 3개(유투브, 비메오, 네이버TV)를 조사해 보았습니다. 이 글에서는 레퍼런스 사이트들의 UI와 마크업 구조를 먼저 살펴보고, 실제 구현했던 마크업 구조는 어떤 식으로 개발하였는지 그리고 작업을 하면서…read more