if(kakao)dev2022 후기: 사진편집기! 이것DOM 적용해볼GL?

👏🏻 if(kakao)dev2022

2022년 12월 08일 진행되었던 카카오 기술 컨퍼런스 프론트엔드 발표 중 몇가지를 정리해볼까 하는데

그 중에서 가장 먼저 눈길을 끌고 재밌었던 "사진편집기! 이것DOM 적용해볼GL?" 강연에 대해 생각을 정리해볼까 한다.

일단 부트캠프 메인 프로젝트에서 우리팀이 시간상 구현못했던 기능 중

가장 아쉬웠던 기능이 사진 편집이였기에..

더 흥미가 갔던것 같다.

 

이 강연은 크게 

사진 편집기를 WebGL방식으로 바꾼 이야기와,

사진 스티커를 (Canvas가 아닌)DOM 방식으로 바꾼 이야기로 나뉜다.

 

일단 이중에서 첫번째 WebGL에 대한 이야기가 basic하고 

두번째 스티커에 대한 이야기는 좀더 specific한 감이 있어서

 

블로그엔 먼저 첫번째 주제에 대한 이야기를 해볼까한다.

 

---

📸 사진편집기! 이것DOM 적용해볼GL?

• 발표자: sky.blue
• 영상링크: https://youtu.be/kI1Jh4_74Ac
• 발표 주제: 카페, 스토리, 브런치에서 사용되는 사진 편집기를WebGL을 이용하여 업데이트한 이야기

재밌게 들었다!! 안 들으신 분 있다면 추천!!👍🏻

---

💡 WebGL이 사진 편집에도 쓰이는구나!

three.js를 이용해서 3D관련해서만 WebGL을 접했던 나로서는

WebGL이 3D에 사용된다는 사실이 신선하게 느껴졌다.

기존 API를 종료하면서 IE11과 JS 개발을 지원하기 때문에 결정했다고 한다.

 

---

🤔 GPU를 쓰는게 왜 좋다 그럴까?

 

이 부분은 이번 강연하고 별개로

좀 더 추가적으로 덧붙여서 정리하는 것인데

 

WebGL은 GPU를 사용하는 것이 장점으로 꼽힌다.

근데 난 그게 왜 장점인걸까 궁금했다.

 

그래서 이 부분에 대해서 좀 더 조사해 봤다.

GPU를 사용한 하드웨어 렌더링은

이는 CPU이용한 소프트웨어 렌더링 방식보다 효율적이라고 한다.

 

3D 렌더링 전문인 GPU에서 일을 처리하는게

컴퓨터 메인 프로세서 CPU에서 처리하는 것보다  더 효율적일 수 밖에 없다.

 

그치만, 소프트웨어 렌더링은 GPU성능에 의존성이 없어 대중적이라고도 볼 수 있다고 한다.

 

---

😗 이 밖에도 WebGL은

 

추가적으로 조사하면서 알게된 사실인데

WebGL은 클라이언트 기반 렌더링으로,

3D scene을 만들 수 있는 각 요소를 서버로부터 받지만,

렌더링은 클라이언트의 그래픽 하드웨어를 이용해 작업을 수행한다고 한다.

 

또한 openGL과 달리, 자바스크립트의 변수 할당 규칙에 따라

메모리를 자동으로 관리할 수 있어 편리하다.

 

이 밖에도 Js개발이 지원되기 때문에 컴파일이 필요없다는 점도 장점이다.

더 자세한 내용은 아래 블로그 참조!

참고 블로그: https://codingcoding.tistory.com/621

 

---

✨ 사진 편집기 WebGL 로 진화 결과

 

WebGL 방식은 카카오에서 기존에 사용하던 API방식에 비해

더 빠른 속도로 편집을 가능하게 했으며,

추가로 블러의 크기와 강도를 조절하게 하며,

모자이크 갯수 제한을 무한대로 늘렸다고 한다.

---

🎖WebGL 사진 편집기 예시보기

 

코드 예시를 보면서 따라가보고 싶어서

오픈소스를 찾다보니 괜찮은 레포를 발견했다.

https://github.com/evanw/webgl-filter

GitHub - evanw/webgl-filter: An image editor in WebGL

이 레포가 webGL을 이용해서 사진 필터를 적용하고 있어서

요즘 뜯어보고 있다.

관심있음 들어가보시길...

---

🤔 마치며

이 부분 말고 뒤에 나오는 스티커를 붙이는 방식에 따라

오류를 핸들링하는 과정도 굉장히 흥미로웠다.

내가 편하게 사용하고 있는 서비스들을 편할 수 있도록 해준

개발자들의 노고에 다시한번 감사드리는 강연이었다..😂ㅋㅋㅋ

 

사진 편집기를 클론해보는 과정이 끝나면 한번 스티커도 도전해보고 싶다.