프론트엔드 서비스 최적화? 토스에서는 '이렇게' 합니다!
TMT1. 최적화의 트레이드오프와 성능 평가의 중요성
최적화를 통해 유저의 시간을 줄이는 것은 결국 다른 요소의 희생을 의미한다. 초기 로딩 속도가 느린 이유는 여러 가지가 있으며, 이를 해결하기 위해 사용자의 빠른 입력을 빠르게 처리해야 한다. 최적화는 항상 적절한 시점을 판단하는 것이 중요하며, 이를 위해서는 프로파일링과 측정을 먼저 실시하는 것이 필요하다. 최적화의 필요 시점을 잘못 판단하면 실질적인 성능개선을 이끌어낼 수 없으며, 좋은 환경에서만 테스트하지 않고 최악의 상황 기준으로 테스트해야 한다고 주장한다. 최적화는 성능 개선을 위한 트레이드오프의 일종이고, 그 희생의 요소는 메모리, 코드 양, 개발자의 시간 등 다양하다.
2. 프론트엔드 최적화: 초기 로딩 속도의 중요성
초기 로딩 속도는 프론트엔드 최적화에서 중요한 두 가지 측면 중 하나로, 다른 하나는 런타임 반응성이다. 초기 로딩 속도가 느린 이유로는 대역폭, 지연 시간, 자바스크립트 실행 시간이 제시된다. 대역폭은 데이터 전송의 속도를 대변하며, 더 많은 트럭이 있을수록 더 많은 데이터를 빠르게 전송할 수 있다는 비유로 설명된다. 쌀 가마니를 줄이거나 트럭을 늘리는 것으로 로딩 속도를 개선할 수 있으며, 이로 인해 데이터 전송 효율이 증가한다. 지연 시간은 네트워크 품질에 영향을 받으며, 좋은 인터넷 환경에서는 데이터 전송이 신속하게 이루어지지만, 불량 인터넷 환경에서는 느리게 진행된다.
3. 프론트엔드 서비스 최적화를 위한 전략
캐싱은 데이터 요청을 줄이기 위해 자주 사용하는 요소를 미리 저장하는 전략이다. 이를 통해 로딩 속도를 빠르게 할 수 있다. 새로운 기술인 리액트 네이티브를 도입하는 이유는 데이터를 네트워크가 아닌 기계에서 직접 로딩함으로써 접근성을 향상시키기 위함이다. 데이터를 캐싱할 때, 사용자 요청에 따라 우선순위 있게 데이터를 가져오는 것이 중요하다. 예를 들어, 배고픈 사람 10명과 덜 배고픈 사람 90명의 상황을 비유로 들 수 있다. 로딩할 리소스의 쪼개기 전략이 적절하지 않으면 사용자 경험이 저하될 수 있다. 개발자는 이를 잘 조절해야 한다. 최적화가 필요한 요소를 결정하는 것은 매우 중요하다. 사용자가 필요로 하지 않는 요소는 미리 저장하지 않아도 좋음으로 전략을 세워야 한다/
4. 런타임 성능 최적화와 사용자 경험 향상
초기 로딩 속도뿐만 아니라 앱의 반응성과 성능이 중요한 요소로 강조되며, 이러한 성능은 사용자 경험에 큰 영향을 미친다. 데우스 프로젝트는 토스에서 개발 중인 디자인 편집기로, 고속 반응성을 요구하며 이를 통해 사용자가 느끼는 지연을 최소화해야 한다. 런타임 성능 최적화를 위해 프레임 퍼 세컨드(FPS)와 리렌더링 횟수를 점검하는 것이 중요하며, 이를 위한 다양한 도구들이 소개된다. FPS 측정을 위해 프로파일러 도구를 활용하여 성능 저하의 원인을 분석하고, 주로 메인 스레드를 블락하는 JS 코드가 문제임을 인식할 수 있다. 런타임 성능은 실제 성능과 체감 성능으로 나눌 수 있으며, 체감 성능은 사용자에게 느껴지는 반응성을 의미한다. 성능 최적화를 위해서는 불필요한 상태 업데이트를 줄이고, 상태를 효과적으로 관리하는 것이 핵심이며, 특히 메모이제이션 기법을 통해 리렌더링 성능을 개선할 수 있다.