렌더링 성능 개선 없이 사용자 경험을 개선하는게.. 가능한가요?

실제 실행 시간을 줄이기 (노란색 막대의 시간 줄이기)

 

렌더링 성능을 개선하는건 사실 가장 핵심적인 최적화 방법 중 하나에요.

브라우저의 렌더링 성능은 "단위 작업"들이 얼마나 빨리 처리되는지에 따라 달라져요. 개발자도구의 그 노란색 막대는 "렌더링 작업을 처리하는 시간"을 나타내는데, 이 막대가 짧을수록 브라우저가 더 빨리 화면을 갱신할 수 있습니다.

• 작업을 병렬화하거나, 작은 작업으로 분리해서 한 번에 처리되는 양을 줄이면, 막대가 줄어드는 효과를 볼 수 있어요.
• 최적화 기법으로는 debouncing, throttling, lazy loading 같은 방법들이 있어요.
• 특히 중요한 건, 실제로 한 번에 처리하는 작업량을 줄이는 것입니다.

예시: 대용량 데이터를 렌더링할 때, 한 번에 데이터를 모두 그리는 대신 부분적으로 그려서 성능을 개선하는 방식이죠.

왜냐면, 한 번의 자바스크립트 막대가 실행되는 시간이 길어지면 그만큼 웹 페이지의 반응 속도가 느려지게 되기 때문이에요.

 

예시:

• setTimeout, requestAnimationFrame, Web Workers 등을 사용해서 비동기적으로 작업을 처리하거나,
• JavaScript 코드 분할(Lazy Loading)을 통해 필요한 코드만 불러오는 방식 등으로 시간을 줄일 수 있어요.

이렇게 해서 실행 시간을 줄이는 건 근본적인 해결책이지만, 때로는 실행 시간을 바로 줄이는 것이 어려운 경우도 있어.

 

 

인터랙션을 통한 눈속임 (로딩바, 프로그레스 바)

이 부분은 사용성 측면에서 매우 중요한 전략입니다. 사용자가 기다릴 때 불편함을 느끼지 않도록 하는 데 초점을 맞춘 방법이에요.

여기서 말하는 눈속임은, 사용자가 "작업이 진행 중"이라는 느낌을 받게 하여, 그동안 느리게 처리되는 작업을 "빠르게 진행되는 것처럼 보이게" 만드는 방법입니다.

예시:

1. 로딩바:
   • 예를 들어, 파일을 업로드할 때 파일이 크다면, 그 진행 상태를 프로그레스 바로 표시해서 사용자가 기다리는 동안 작업이 진행 중임을 알 수 있게 해줘.
   • 이렇게 하면 사용자는 긴 대기 시간을 어떻게든 기다리게 할 수 있어.
2. 조각내기(Chunking):
   • 큰 작업(예: 긴 계산, 데이터 처리)을 여러 개의 작은 덩어리로 쪼개서 순차적으로 실행하는것. 즉, 렌더링 작업을 더 작은 단위로 나누고, 병렬 처리하는 방식으로 최적화하여 실행 시간을 줄이고
     그 중간 중간에 로딩 애니메이션이나 작은 인터랙션을 넣어서 사용자가 기다릴 수 있도록 만듭니다.
   • 예를 들어, 이미지 처리 같은 무거운 작업을 작은 부분으로 나누어서 하나씩 처리하면서 로딩바를 표시해 줄 수 있습니다.
   • 이렇게 하면 사용자는 작은 작업이 완료되는 것을 볼 수 있기 때문에 큰 작업을 한 번에 처리하는 것보다 덜 지루하게 기다릴 수 있게될 것 입니다.