WebStudio 개선

해상도 높이기

개선 전

개선 후

• 웹에서는 디스플레이의 실제 물리적 픽셀 단위가 아니라 논리적인 픽셀 단위인 CSS 픽셀을 사용함
• Retina 디스플레이의 경우 : 1 CSS pixel = 2 실제 픽셀
• 일반 디스플레이의 경우 : 1 CSS pixel = 1 실제 픽셀
• 이렇게 하는 이유는 다양한 화면 해상도에서 일관된 크기를 유지하고 디바이스와 상관 없이 비슷한 크기로 보이도록 하기 위함임
• 그래서 실제 canvas의 가로, 세로를 영역의 2배로 하고 가로, 세로 1/2 까지만 이동 가능하게해서 1 CSS 픽셀당 실제 4개의 픽셀로 그리게 되어서 원본화질 유지

사용성 높이기

• 실제 캔버스가 아니라 보이는 영역에서만 움직일 수 있도록
• 화면 바깥을 클릭했을 때 요소 선택 해제되도록
• 드래그, 리사이즈 하다가 화면 바깥으로 나갔을 때도 작동되도록
• esc 누르면 선택 해제

성능 높이기

requestAnimationFrame, animationFrameRef

• 화면이 실제로 업데이트 될 때 만 그림을 그림

• 화면이 준비되면 그림을 그림

• 다른 탭을 보고있으면 쉼

• 컴퓨터가 바쁘면 조금 천천히 그림

  → 브라우저가 알아서 최적의 타이밍을 찾아서 배터리 소모 감소, 리소스 관리

// 계속 반복해서 그림을 그리는 방식
setInterval(() => {
  drawNextFrame();
}, 16); // 60fps를 목표로 함

function updateCanvas() {
  drawNextFrame();
  animationFrameRef.current = requestAnimationFrame(updateCanvas);
} 

프레임 레이트 제어

• 화면 송출을 30fps로 해서 프레임레이트도 30fps로 제한, 불필요한 렌더링 방지

캔버스 리사이징 최적화

• 실제로 필요할때만 캔버스 리사이징 수행
• 불필요한 리사이징 작업을 방지하여 성능 향상

useRef를 통한 참조 값 최적화

• 컴포넌트 리렌더링과 무관하게 값 유지
• 불필요한 재생성 방지

useCallback을 통한 함수 최적화

const updateCanvas = useCallback(
  (timestamp: number) => {
    // ...
  },
  [screenStream, mediaStream, camPosition, screenPosition, ref],
);

• 의존성이 변경될때만 재생성
• 불필요한 함수 재생성을 방지하여 메모리 사용량 감소

리소스 정리

return () => {
  if (animationFrameRef.current) {
    cancelAnimationFrame(animationFrameRef.current);
  }
};

• 컴포넌트 언마운트 시 애니메이션 프레임 정리
• 메모리 누수 방지

스튜디오 페이지에서 나갔을 때 스튜디오 상태 cleanup

• StudioPage 벗어날 때 cleanup 실행
• 메모리 누수 방지