FE 개발기: OffscreenCanvas로 웹 사진 편집기 '포토스' 성능 개선한 경험

FE 플랫폼팀이 개발한 웹 사진 편집기 '포토스'는 다음 카페와 티스토리 등에서 사용되며, 고화질 이미지 처리 시 메인 스레드 부하로 인한 성능 문제가 제기되었습니다. 이를 해결하기 위해 OffscreenCanvas Web API를 활용해 캔버스 로직을 Worker 스레드로 분리하는 방안을 조사하고 적용했습니다.

데모 페이지를 통해 Canvas Animation과 WebGL Image Filter를 비교 검증한 결과, 메인 스레드를 인위적으로 블록 시켰을 때 일반 Canvas는 애니메이션이 멈추지만 OffscreenCanvas는 Worker 스레드에서 끊김 없이 정상 동작함을 확인했습니다. 또한 WebGL 필터링 시에도 메인 스레드 블록의 영향을 받지 않고 함수가 실행되는 것을 퍼포먼스 탭으로 확인했습니다.

적용 과정에서 몇 가지 이슈가 발생했습니다. 먼저 필터 변경 시마다 Worker를 생성하고 OffscreenCanvas를 넘기려다 'detached' 에러가 발생했으며, 이는 OffscreenCanvas 생성 후 재할당하지 않고 postMessage로 캔버스를 보내지 않도록 수정하여 해결했습니다. 다음으로 OffscreenCanvas에는 width, height 속성이 없어 기존 코드의 canvas.style 사용 시 에러가 발생하므로 명시적 정의가 필요했습니다. 마지막으로 Worker 스레드에서는 DOM의 Image API를 사용할 수 없어 fetch API와 createImageBitmap을 사용해 이미지 비트맵을 생성하는 방식으로 변경했습니다.

현재 Chrome과 Edge는 지원되지만 Firefox는 개발 중이며 Safari와 IE는 지원되지 않아 분기 처리가 필요합니다. OffscreenCanvas는 기존 캔버스 코드 재사용성이 높고 러닝 커브가 낮아, 캔버스 기반 서비스의 메인 스레드 부하를 줄이는 데 효과적인 대안으로 평가됩니다.