애니메이션이 버벅인다는 말을 어디서부터 손대야 할지 정리한 글입니다. Reflow와 Repaint가 무엇인지 짚고, 렌더링 성능을 측정하는 도구와 실제 개선 전후를 영상·Performance 탭 기록으로 비교했습니다. || 
시작하기
안녕하세요. 비브로스 웹프론트엔드팀 양희창입니다. 
이번 시간에는 웹앱 성능을 최적화 할 수 있는 기법에는 무엇이 있는지 알아보고 실제 저희팀이 서비스 하고 있는 웹앱의 일부 코드에서 최적화 기법을 활용해 보는 시간을 가져보려고 합니다.
대상은 병원어드민으로 불리는 서비스로 환자가 사용하는 똑닥앱 편리한 사용을 위해(?) 병원에서 사용하는 어드민 웹앱입니다. 배민 사장님 사이트 라고 이해하면 편합니다 
웹 성능 최적화의 종류
우선 웹앱의 성능을 개선(최적화)할 수 있는 부분은 크게 2가지로 나눌 수 있습니다.
브라우저가 화면에 그려주는 성능을 높이는 방법 (렌더링 성능 최적화)
브라우저가 리소스를 불러오는 성능을 높이는 방법 (로딩 성능 최적화)
여기서 좀더 깊이 들어가보면 각 최적화의 기법은 다시 아래와 같이 대략 나눌 수 있습니다.
렌더링 성능 최적화
애니메이션 최적화 (Reflow, Repaint) 
로딩 성능 최적화
컴포넌트 Lazy Loading (Code Splitting)
한 페이지 안에서 컴포넌트 단위로 Lazy Loading 하는 방법
컴포넌트 Preloading
컴포넌트를 미리 불러오는 최적화 기법
이미지 Preloading
이미지를 미리 불러와서 화면에 빠르게 띄울 수 있는 기법
위에 나열된 여러가지 기법 중 이번 글에서 소개할 성능 최적화 주제는 렌더링 성능 최적화(애니메이션 최적화) 입니다.
오늘도 우리가 안된다고 하는 이유 (feat.디자이너)
안돼요, 아 아무튼 그거 안돼요
디자이너 A씨: 여기 이부분 애니메이ㅅ...
개발자 B씨: 안됩니다.
프론트엔드는 서비스의 최전선에서 고객이 직접 사용하는 웹 또는 앱을 만드는 직무 이므로 디자이너와 소통할 일이 굉장히 많은 편입니다. 또한 디자이너분들의 수준 높은 미적 감각으로 완성된 화려한 결과물을 구현해야 하는 경우가 생기죠.
하지만 우리는 안된다고 말합니다. (말하고 싶습니다)
왜 우리는 디자이너에게 안된다고 하는 걸까요? 그냥 단순히 귀찮고 싫은 걸까요? 아니면 대부분의 개발자들이 UI/UX 에 관심이 없는 성향이기 때문일까요?
저는 오히려 역설적이게도 개발자들이 평소에 가장 중요하게 생각하는 성능개선 측면에 있어서 디자인 요구사항이 웹앱의 성능에 큰 영향을 미치기 때문이라고 생각합니다. (적어도 웹은 더 치명적으로요)
알고리즘이나 코드 자체의 완성도, 논리적으로 설명 가능한 부분을 수정하는 것이 더 쉬운 개발자들에게 느낌적인 느낌(?)인 렌더링 성능 개선은 차라리 외면 하고 싶은 주제일지도 모릅니다. 
하지만 우리는 언제나 답을 찾을 겁니다. (늘 찾는 건 아니…)
렌더링 성능 개선을 위해 무엇을 할 수 있는 지 소개합니다.
렌더링 성능 개선에 앞서 알아야 할 것
Reflow, Repaint 의 개념
Reflow
브라우저가 문서 내 요소의 위치나 도형을 다시 계산하는 작업
Repaint
문서 내 레이아웃에 영향을 주지 않는 스타일 속성이 변경 되었을 때 발생
브라우저가 화면을 그리는 과정(Reflow, Repaint)은 아래와 같은 단계로 진행됩니다.
Repaint 에서는 Layout 과정이 생략됩니다.
DOM + CSS Object Model
HTML, CSS를 가공해서 DOM, CSSOM 으로 만듬
위 두가지를 조합해서 Render Tree 라는 구조를 만듬
Layout 이라는 단계에서 위치나 요소에 대한 크기를 실제로 계산을 합니다.
어느 위치에 어느정도의 사이즈로 있어야 하는지 브라우저가 계산 하는 과정입니다.
Paint 에서는 브라우저가 색을 채워 넣음
Composite
위 단계를 거쳐 쪼개진 각 레이어를 합성하는 과정을 거침
위 전체의 과정을 Critical Ren
시작하기
안녕하세요. 비브로스 웹프론트엔드팀 양희창입니다.
이번 시간에는 웹앱 성능을 최적화 할 수 있는 기법에는 무엇이 있는지 알아보고 실제 저희팀이 서비스 하고 있는 웹앱의 일부 코드에서 최적화 기법을 활용해 보는 시간을 가져보려고 합니다.
대상은 병원어드민으로 불리는 서비스로 환자가 사용하는 똑닥앱 편리한 사용을 위해(?) 병원에서 사용하는 어드민 웹앱입니다. 배민 사장님 사이트 라고 이해하면 편합니다
웹 성능 최적화의 종류
우선 웹앱의 성능을 개선(최적화)할 수 있는 부분은 크게 2가지로 나눌 수 있습니다.
브라우저가 화면에 그려주는 성능을 높이는 방법 (렌더링 성능 최적화)
브라우저가 리소스를 불러오는 성능을 높이는 방법 (로딩 성능 최적화)
여기서 좀더 깊이 들어가보면 각 최적화의 기법은 다시 아래와 같이 대략 나눌 수 있습니다.
렌더링 성능 최적화
애니메이션 최적화 (Reflow, Repaint)
로딩 성능 최적화
컴포넌트 Lazy Loading (Code Splitting)
한 페이지 안에서 컴포넌트 단위로 Lazy Loading 하는 방법
컴포넌트 Preloading
컴포넌트를 미리 불러오는 최적화 기법
이미지 Preloading
이미지를 미리 불러와서 화면에 빠르게 띄울 수 있는 기법
위에 나열된 여러가지 기법 중 이번 글에서 소개할 성능 최적화 주제는 렌더링 성능 최적화(애니메이션 최적화) 입니다.
오늘도 우리가 안된다고 하는 이유 (feat.디자이너)
안돼요, 아 아무튼 그거 안돼요
디자이너 A씨: 여기 이부분 애니메이ㅅ...
개발자 B씨: 안됩니다.
프론트엔드는 서비스의 최전선에서 고객이 직접 사용하는 웹 또는 앱을 만드는 직무 이므로 디자이너와 소통할 일이 굉장히 많은 편입니다. 또한 디자이너분들의 수준 높은 미적 감각으로 완성된 화려한 결과물을 구현해야 하는 경우가 생기죠.
하지만 우리는 안된다고 말합니다. (말하고 싶습니다)
왜 우리는 디자이너에게 안된다고 하는 걸까요? 그냥 단순히 귀찮고 싫은 걸까요? 아니면 대부분의 개발자들이 UI/UX 에 관심이 없는 성향이기 때문일까요?
저는 오히려 역설적이게도 개발자들이 평소에 가장 중요하게 생각하는 성능개선 측면에 있어서 디자인 요구사항이 웹앱의 성능에 큰 영향을 미치기 때문이라고 생각합니다. (적어도 웹은 더 치명적으로요)
알고리즘이나 코드 자체의 완성도, 논리적으로 설명 가능한 부분을 수정하는 것이 더 쉬운 개발자들에게 느낌적인 느낌(?)인 렌더링 성능 개선은 차라리 외면 하고 싶은 주제일지도 모릅니다.
하지만 우리는 언제나 답을 찾을 겁니다. (늘 찾는 건 아니…)
렌더링 성능 개선을 위해 무엇을 할 수 있는 지 소개합니다.
렌더링 성능 개선에 앞서 알아야 할 것
Reflow, Repaint 의 개념
Reflow
브라우저가 문서 내 요소의 위치나 도형을 다시 계산하는 작업
Repaint
문서 내 레이아웃에 영향을 주지 않는 스타일 속성이 변경 되었을 때 발생
브라우저가 화면을 그리는 과정(Reflow, Repaint)은 아래와 같은 단계로 진행됩니다.
Repaint 에서는 Layout 과정이 생략됩니다.
DOM + CSS Object Model
HTML, CSS를 가공해서 DOM, CSSOM 으로 만듬
위 두가지를 조합해서 Render Tree 라는 구조를 만듬
Layout 이라는 단계에서 위치나 요소에 대한 크기를 실제로 계산을 합니다.
어느 위치에 어느정도의 사이즈로 있어야 하는지 브라우저가 계산 하는 과정입니다.
Paint 에서는 브라우저가 색을 채워 넣음
Composite
위 단계를 거쳐 쪼개진 각 레이어를 합성하는 과정을 거침
위 전체의 과정을 Critical Ren