팀 레이어 기술 블로그

글을 시작하며 보통 웹 페이지의 애니메이션을 구현할 때, 리페인트를 방지하고자 CSS의 animation, transition, transform 속성을 통해 구현을 할 수 있지만 보다 사용자와의 복잡한 상호작용을 구현하게 하기 위해서 자바스크립트를 활용해 스타일을 변화시켜야하는 경우도 있어요. 특정 영역을 클릭하거나, 웹 페이지를 스크롤 할 때 변화무쌍한 애니메이션 작업들이 그러해요. 간단하고 규칙적인 애니메이션은 CSS로만 요소의 좌표값이나, 스타일 크기를 변화시키고 세밀하고 디테일한 변화를 필요로하는 애니메이션의 경우에는 자바스크립트로 스타일 속성을 변경시키는 편인데요, 하지만 자바스크립트로 스타일을 변경시키게 되면 대개 너비 또는 위치 값을 변경시키는 요소들이기에 일반적인 CSS보다 성능이 좋지 못해요. 따라서 어쩔 수 없이 자바스크립트와의 상호 협력이 필요한 경우에는 이를 위한 최적화 기법이 필요해요. 브라우저 렌더링 단계 위에서 언급했듯 리페인트가 무엇인지, 리플로우가 무엇인지 한번 확인을 해볼게요. 브라우저는 위와 같은 과정들을 통해 브라우저 파이프라인을 그려요. JavaScript : 애니메이션 및 기타 작업 스크립트를 수행 (DOM 생성) Style : CSS 규칙을 어떤 요소에 적용할지 계산하는 과정 수행 (CSSOM 생성) Layout (Reflow) : 브라우저는 DOM과 CSSOM을 결합해 객체들의 위치와 크기 등을 계산하는 렌더 트리를 생성 Paint (Repaint) : 브라우저는 렌더 트리를 사용해 실제로 화면에 픽셀을 출력 (객체가 실제 화면에 그려지는 것을 의미) Composite : 브라우저는 화면에 출력되는 객체들을 합성해 최종 화면을 생성 (최적화 과정) 브라우저 프레임 60hz, 120hz과 같은 모니터 주사율이 있다고 했을 때, 이는 1초 동안 모니터 화면의 출력 빈도를 의미해요. 영화 또는 애니메이션을 보는 과정은 사실 짧은 간격으로 이루어진 사진을 이어보는 과정이에요. 이 각각의 장면을 frame이라고 칭하는데, 특정 시간 내에 보여지는 frame 갯수를 frame rate 혹은 frame per second (fps)라고 해요. 보통 사람의 눈은 1초에 60번 장면이 넘어가야 부드럽게 느낀다고 하며, 그래서 현재 기기들은 시각적인 효과를 위해 초당 60번 화면을 다시 그리도록 기본적으로 설계되어있어요. 이를 60fps 혹은 60hz라고 불리우는 이유예요.