TIL 2021.12.16 정글에서 세상으로 + 하드웨어 가속

💻개발 

🍎프론트엔드

 

https://fe-developers.kakaoent.com/2021/211202-gpu-intersection-observer/?fbclid=IwAR1TPz5pppsVtfGWx2tMNIaZURgjm8fjbHqHzsbvcs7QqfrqoyRt1y7sxek 

카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?

 

최근에 사용해보았던 새로운 앱 중에 가장 인상이 깊었던 것은 바로 '카카오 웹툰' 이었다.

 

각 웹툰 작품의 소개 마다 live 2d 기술을 접목시킨 움짤을 넣었는데, 이게 작품의 화풍을 뚜렷하게 각인 시켜주고, 작품 속의 인물이 실제로 움직이는 모습을 보여줘서 생동감을 불어넣었다.

 

이게 모든 작품의 소개마다 들어가있고, 심지어 여러 작품을 한번에 보는 페이지에서 조차 페이지를 스크롤 하면서 내릴때마다 전부 한번씩 출력이 되니, 카카오 웹툰 개발자들의 기술력에 감탄을 하지 않을 수 없었는데, 아니나 다를까 이에 대한 포스팅이 나왔다.

 

웹의 경우 앱만큼의 성능을 기대하기는 힘들기에, 이를 하드웨어 가속을 통해 해결했다는 것이 주요 내용이다. 추가적으로 많은 대용량의 정보를 유저가 요청할 때(스크롤을 내릴때) 이미지, 영상등의 큰 용량의 요소들을 lazy load하는 방법의 일환으로 intersection observer API를 사용했다고 나와있다.

 

카카오 웹툰에서 사용한 방식은 tranform:translate3d 스타일 이다.

 

하드웨어 가속은 웹브라우저에게 특정 요소를 자체 레이어로 '승격' 시키라고 지시해주고, 승격된 레이어는 Graphic Layer로 할당되어 GPU 메모리에 할당되어 하드웨어가 계산하게 만든다. 따라서 브라우저가 요소를 랜더링 할 때 단순히 cpu만 사용했었지만, gpu도 한손 거들게 요청하는 느낌인것같다.

 

내가 생각할 때 하드웨어 가속이라는 영역은 앱, 웹 모두를 지원하는 크로스 플렛폼에선 웹이 앱만큼의 그래픽 성능을 따라갈 수 있게끔 하는 필수적인 요소라고 느껴진다. 그리고 앞으로 웹이 더더욱 많은 행동을 처리할 수 있게끔 하는 핵심 기술 중 하나라고 보인다.

 

추후 개인 프로젝트에 반드시 하드웨어 가속이 필요할 만큼의 애니메이션을 집어넣어서 이 기술의 성능을 톡톡히 맛보고 싶다. 

 

---

😃삶 + 마무리 할 말

 

오늘 드디어 sw 사관학교 정글을 수료했다

 

5개월간의 여정은 길었다면 길었고, 짧다면 짧았다. 정글이 끝나니 사회라는 진정한 정글이 시작되는구나.

 

지금의 나는 부족하고 개발자로서 한 사람 몫을 하지 못한다. 그렇지만, 내가 할 수 있는 것은 어제의 나보다 조금더 발전해나가는 것 뿐이다.

 

하지만 참 다행이도, 목적지까진 한참 남은 여정이지만, 가슴 한켠에 설렘이 계속해서 자리잡아있다.

 

설렘이 있기에, 이는 행군이 아니라, 여행이 될 것이다.