2022년 A2 감상문

A2 라이브러리 개발기@webtoon/psd

팀 : 네이버 웹툰

발표자님: 이동현, 강예형

 

발표의 전체적인 내용

이번 발표는 webtoon 팀에서 포토샵 파일인 .psd나 psb 파일을 웹 상에서 metadata나 실제 이미지를 미리보기 형식으로 보고 싶어 실제로 이 라이브러리를 구현했던 과정을 공유해주셨습니다.

발표는 두 파트로 나눠서 진행됐습니다. 첫 번째 파트는 실제 포토샵 파일을 읽고 데이터를 파싱하는 방법에 대한 과정을 공유해주셨고, 두 번째 파트는 성능개선을 중점으로 발표를 진행해 주셨습니다.

 

들으면서 들었던 생각

저번 스터디 때 필자도 toastify 라이브러리를 제작해볼 계획이었는데 어찌저찌 흐지부지 됐던 경험이 있어서 집중해서 들어본 것 같습니다. 저번 인턴 지원에 실패했던 당근도 이런 라이브러리 구현이 업무에 포함되어있던 것을 보면, 여러 회사 팀에서 이미 구현된 패키지를 사용하기 보다는 여러가지 이유(성능, 지원 가능 정도)로 자신만의 패키지를 구현해서 사용하기를 선호하는 것 같습니다.

 

인상 깊었던 부분

인상 깊었던 부분은 두 번째 성능 개선 파트에서 파싱 과정 중 병목 현상이 생기는 원인을 찾고 그 원인을 해결하는 과정을 공유해주시는 파트였습니다.

성능 개선 해결 방안으로는 WebAssembly언어를 사용하는 것이었습니다. WebAssembly 언어를 사용하면서 겪은 문제과 해결 방안을 고안해낸 과정 또한 발표에 포함되어 있어 굉장히 재밌었습니다. (자세한 발표 내용은 생략하도록 하겠습니다.)

새로운 라이브러리를 기획하면서 겪은 트러블 슈팅 과정을 알 수 있어 좋았고, WebAssembly, javascript에 대한 브라우저별 최적화를 확인해볼 수 있는 좋은 기회였습니다.

 

기억해 두면 좋을 점

• WebAssembly
  • 장점
    • 웹 브라우저에서 고성능 작업을 위한 기술
    • 기계어에 가까운 저수준의 바이트코드를 실행
    • JS보다 빠른 해독과 최적화
    • 다양한 하드웨어와 OS에서 실행가능하므로 여러 브라우저에서 실행이 가능하다.
  • 단점
    • 사람이 직접 읽고 쓰기에는 어렵다. → 다른 언어로 만든 코드를 WebAssembly 바이트코드로 컴파일해서 사용한다.
    • JS와 독립적인 메모리 공간을 사용 → 성능 손실!
    • 실행하기 위해 JS의 도움이 필요 → 개발, 배포 과정이 복잡해짐
• 브라우저
  • chrome의 js 최적화는 최고다
  • WebAssembly를 사용할 경우 브라우저간 디코딩 시간 차이는 줄어든다.

 

 

영상 링크 : https://www.youtube.com/watch?v=R2pBPqLXZNs