Figma를 빠르게 유지하기
(figma.com)- 프로젝트가 점점 복잡해지며 성능 테스트를 위한 자원도 많이 증가해 새로운 테스트 시스템이 필요해졌음.
- 모든 코드 변경 사항에 대해 테스트를 진행하면서, 10분 안에 테스트가 완료되고, 결과를 상세하게 분석할 수 있는 꿈의 테스트 시스템을 원함.
- Figma의 성능은 주로 CPU와 GPU에 영향을 받았으며, 여러 방식의 장단점을 고려해 크게 2가지 시스템으로 구성함.
- 클라우드 기반 시스템
- Headless Chromium을 실행하는 GPU가 있는 VM을 사용하여 병렬로 테스트를 실행하여 10분 내 테스트가 완료되도록 함.
- VM 특성상 외부 요인에 영향을 쉽게 받으므로 20%가량의 여유를 둠.
- 하드웨어 기반 시스템
- 오래된 노트북(구형 맥북, Windows 노트북, 크롬북 등)들로 구성된 시스템에서 모든 테스트를 예약하여 순차적으로 실행.
- 테스트는 오래 걸리지만, 실제 장치에서 나타나는 미묘한 성능 변화를 상세하게 추적함.
- 두 가지 테스트 시스템을 구성하고 나서 성능 개선을 위해 노력한 결과 긍정적인 결과를 얻을 수 있었음.
- 렌더링 성능 개선
- GPU가 최신 CPU가 없는 환경에서 렌더링 성능을 개선하기 위한 노력.
- 스트레스 테스트를 통해 상세하게 조사한 결과, 일부 기능이 몇몇 하드웨어에서 큰 오버헤드를 발생시키고 있었음.
- 렌더링 시간을 상세하게 분할하여 로컬 작업에 우선을 둔 새로운 알고리즘을 구현하여 구형 하드웨어에서 효과적으로 성능을 개선함.
- FigJam 성능 개선
- 테스트를 작성하는 건 어려웠지만, 기존에 고객 문의나 지표를 보고 수정하던 방식에서, 테스트를 보고 미리 문제를 수정할 수 있게 됨.
- CSS의 미묘한 성능 차이 등으로 인해 쉽게 발견하기 어려운 문제도 테스트를 수십 번 반복하며 발견하고 수정할 수 있었음.
- 특히 성능 저하가 일어난 코드의 변경 사항을 정확하게 추적할 수 있어 도움이 됨.
- 성능 개선은 까다로운 영역이지만, 사람이 생각하는 것과 실제는 다른 경우가 많으므로 테스트와 성능 측정이 아주 중요함.
테스트를 통해 성능 개선을 한 건 좋은데... 여전히 Figma는 심각하게 느린 것 같아요.
HN 댓글에도 엄청나게 느리다는 불만이 꽤 많네요. -_-
특히 Adobe에 인수된 이후에 엄청나게 느려졌다고 느끼는데 (그 전에는 생각보다 빨랐는데...)
기분 탓이겠죠?
HN 스레드의 AI 요약
- skhameneh: 웹어셈블리로 선구적인 작업을 하고 GitHub에서 탐색 과정을 공유한 Figma의 전 CTO Evan Wallace에게 찬사를 보냅니다.
- imslavko: Evan과 Jamie의 이전 블로그 게시물을 공유하며 Figma의 WebAssembly로의 전환, 성능 테스트 및 시간 경과에 따른 개선 사항을 자세히 설명합니다.
- fhub: 에반 월리스가 2012년에 Figma를 공동 설립하고 2021년 퇴사하기 전까지 10년간 CTO로 근무했음을 언급합니다.
- antoineMoPa: 기업이 후자에서 타협해야 한다고 가정할 때 Figma가 상업적 성공과 기술적 우수성을 모두 달성한 것에 놀라움을 표합니다.
- tobyjsullivan: 대부분의 스타트업이 품질보다 기능에 우선순위를 두는 반면, 몇몇 스타트업은 새로운 기술을 혁신하여 상업화할 수 있는 만큼 Figma는 예외라고 설명합니다.
- tmpz22: 현재 표준은 지속적 통합 패스가 되어야 한다며 최근 제품을 기반으로 소프트웨어에 대한 편협한 기대치를 비판합니다.
- yellow_lead: Figma의 20% 오차 범위를 고려할 때 다른 사람들은 노이즈가 많은 성능 테스트 환경을 어떻게 처리하는지 의문을 제기합니다.
- imslavko: Figma의 보조 하드웨어 기반 테스트 시스템과 가상 머신의 편차를 해결하기 위해 기준선을 계산하는 방법에 대해 자세히 설명합니다.
- koenbok: 전용 테스트 Mac Mini로 15%의 편차에 직면하여 궁극적으로 사용자 모니터링이 가장 신뢰할 수 있다는 것을 알게 된 Shares Framer.
- chrisdbanks: 유럽에서 로드 시간 문제와 이미지가 빠르게 로드되지 않는 것을 보고 Figma가 미국 외 지역에서 적절하게 테스트하는지 의문을 제기합니다.