'일렉트론' 탈출한 MS 팀즈, 어떻게 바뀌었나

마이크로소프트가 지난달 27일 협업플랫폼 팀즈의 데스크톱앱을 새롭게 디자인해 선보였다. 성능을 두배로 높이고 앱의 무게를 절반으로 줄였으며, UX를 더 편리하게 개편했다. 이 과정에서 마이크로소프트는 팀즈 앱의 아키텍처를 새롭게 그렸다. 팀즈는 이를 통해 일렉트론, 앵귤러JS에서 벗어나 현대화된 앱으로 거듭났다.

마이크로소프트는 27일 새로운 팀즈 데스크톱 앱을 공개하면서, 새 앱에 도입된 아키텍처의 내용도 함께 공유했다.

2015년 출시된 기존 마이크로소프트 팀즈 데스크톱 앱은 호스트로 '일렉트론(electron)'을 사용하고, 웹 기반 프레임워크로 앵귤러JS를 채택했다. 다양한 커스텀 제어는 HTML/CSS를 사용했다. 이런 오픈소스 기반의 개발은 마이크로소프트 팀즈를 빠르게 개발할 수 있었던 원동력이었지만, 팀즈 기능의 개선과 혁신을 위해 새로운 차원의 현대화가 필요했다.

마이크로소프트가 새로운 윈도용 팀즈 미리보기를 공개했다.

일렉트론은 자바스크립트로 데스크톱 앱을 만들게 해주는 프레임워크다. 크로미엄과 노드JS를 내장해 하나의 자바스크립트 코드베이스로 다양한 운영체제에서 작동하는 앱을 만들 수 있다. 마이크로소프트 비주얼스튜디오코드, 브레이브 브라우저, 워드프레스, 슬랙, 왓츠앱, 스카이프 등의 데스크톱 앱이 일렉트론으로 작성된 앱이다. 일렉트론은 크로미엄과 노드JS를 내장하는 탓에 앱의 무게를 무겁게 한다. 일렉트론으로 작성된 앱은 한번에 많은 라이브러리를 활성화하므로 메모리와 CPU도 많이 소비한다.

마이크로소프트는 새로운 팀즈 앱의 호스트를 웹뷰2(WebView2)로 전환하고, 사용자 인터페이스의 앵귤러JS를 리액트로 전환했다. 데이터 처리를 메인 스레드에서 클라이언트데이터 레이어로 이동시켰으며, UX 제어 영역을 플루언트 UI 컬렉션으로 전환했다.

마이크로소프트는 우선 팀즈 클라이언트 앱에 리액트와 플루언트로 구축된 구성요소를 포함시켰다. 두개의 프레임워크를 모두 실행하기 때문에 속도저하와 사용량 증가가 나타났다. 그 다음 개인용 팀즈 앱을 새로운 아키텍처를 기반으로 재작성했다. 이후 개인용 팀즈 엡에 새 기능을 추가하고, 코드베이스를 확장해 성능 개선을 검증해갔다.

마이크로소프트 팀즈 기존 앱과 새 앱의 아키텍처 비교

플루언트는 마이크로소프트에서 개발한 반응형 크로스플랫폼 UI 프레임워크다. 플루언트 UI는 팀즈 UX 컨트롤의 공통 구성 요소를 표준화하고, 플랫폼 간 일관된 결과를 얻게 한다.

새 팀즈의 리액트로 전환은 더 작은 모듈식 코드베이스, 공유 가능한 구성 요소에 대한 지원 개선, 응답성 향상 등의 이점을 준다. 마이크로소프트는 리액트가 팀즈 시나리오에 더 적합하고 애플리케이션의 전반적인 성능에 유익하다고 설명했다.

새 팀즈는 클라이언트 데이터 레이어 도입으로 자바스크립트의 단일 스레드 특성에서 벗어났다. 데이터 관리를 별도로 빼냄으로써 기본 사용자 인터페이스 스레드에 경합을 추가하지 않고 데이터 가져오기, 저장, 규정준수 작업, 푸시 알림, 오프라인 기능 등을 병렬 스레드로 실행할 수 있게 됐다. 클라이언트 데이터 레이어는 그래프QL 계층을 통해 접근되며, 인터프로세스커뮤니케이션(IPC)이 계층 간 연결 역할을 수행한다.

웹뷰2는 마이크로소프트에서 2021년 윈도 운영체제용 통합 앱 플랫폼으로 새롭게 만든 '리유니언 프로젝트'의 구성요소 중 하나다. 앱 내의 웹 콘텐츠 통합을 제어하는 런타임이다. 마이크로소프트 엣지 브라우저를 렌더링 엔진으로 사용해 앱에서 웹 콘텐츠를 표시한다.

팀즈 앱에 웹뷰2를 도입함에 따라 앱의 자원을 엣지와 공유하게 돼 전반적인 메모리 사용량 감소와 디스크 공간 감소 효과를 거둘 수 있게 됐다. 웹뷰2는 시스템 자원을 더 효율적으로 사용하고, 기본 플랫폼과 통합을 개선하는 SDK로 사용할 수 있다. 특히 네이티브 코드와 통합하기 어렵다는 일렉트론의 약점을 극복하게 됐다.

마이크로소프트는 팀즈 앱에서 기본적인 아키텍처 변경 외에도 성능, 안정성, 사용자 용이성, 유연성 등을 위한 여러 투자를 이어왔다.

새로운 팀즈의 개선사항

코로나19 대유행 후 폭증한 영상 회의 수요에 대응하기 위해 팀즈 클라이언트의 비디오 렌더링 아키텍처도 재구축됐다. 비디오 관리를 개선하기 위해 더 효율적인 미팅 스테이지 레이아웃을 개발했고, 더 원활한 탐색을 위해 가상화된 목록을 개발했다. 미디어 처리를 위해 네이티브 컴포지터 및 렌더러로 전환했다. 새 비디오 아키텍처는 영상을 더 효율적으로 처리해 전력 소비를 50% 감소시키고, 7X7 그리드나 동적 보기 같은 고급 비디오 기능을 지원하게 했다.

대규모 회의 환경의 성능과 규모를 개선하기 위한 최적화 투자도 있었다. IPC 이벤트 일괄처리 및 감소, UI 렌더링 수 감소, 시끄러운 경험의 제거 등이 최적화 대상이었다. 이를 통해 회의 규모에 상관없이 애플리케이션 응답을 더 빠르게 하고, 회의 참여 대기시간을 일관되게 유지할 수 있게 됐다.

멀티 테넌트와 멀티 계정에 대한 지원도 개선됐다. 인증, 동기화, 알림 프로세스 등의 개선이 이뤄졌다. 사용자 스토리지 데이터는 테넌트와 계정 간에 격리된다. 사용자는 현재 활성화된 테넌트 또는 계정에 상관없이 동시에 연결된 모든 테넌트와 계정에서 원활하고 향상된 공동 작업 환경을 누릴 수 있다. 테넌트 전환 속도도 빨라졌다.

윈도 환경의 클라이언트 배포를 개선하기 위해 MSIX 지원을 구현했다. 설치 및 앱 업데이트 안정성이 대폭 향상됐고, 네트워크 대역폭과 디스크 공간 사용량이 감소했다. 관리자는 마이크로소프트 인튠으로 팀즈 배포를 관리하고 사용자 설치 부담을 줄일 수 있다.

팀즈는 고급 보안 기능을 위해 '신뢰할 수 있는 유형(Trusted Types)'을 추가하고 콘텐츠 보안 정책을 구현했다. 교차사이트스크립트(xss) 공격 보호가 강화됐고, MSIX는 프로그램 데이터 폴더에 앱을 설치하도록 해 설치 변경 공격으로부터 보호해준다.

팀즈 앱은 많은 양의 데이터와 스레드를 관리하는 문제를 해결하기 위해 '부분 데이터 모델'로 전환됐다. 이는 화면 렌더링에 필요한 데이터만 가져오므로, 메모리 및 디스크 활용도를 향상시킬 수 있다.

정책, 캘린더 이벤트 및 고정된 채널 업데이트를 풀링 기반 시스템에서 푸시 모델로 전환했다. 메모리 데이터캐시, 데이터 미리 가져오기, 코드 사전 로드 등 성능을 향상시키는 방안을 사용자 패턴을 기반으로 선택적으로 활용하는 동적 선택 기능이 추가됐다. 윈도와 웹뷰2 API는 사용하지 않는 메모리를 주기적으로 페이지 아웃한다.

성능 목표를 달성하기 위해 성능 인프라와 도구를 확장했다. 확장된 자동화된 테스트가 실행되고, 정해진 게이트와 풀 리퀘스트를 차단할 수 있는 실험 스코어카드를 통과해야 하며, 모든 체크인 후 성능 저하를 초래하는 모든 변경 사항은 되돌리거나 최적화하여 문제를 해결한다. 이 프로세스는 광범위한 대시보드, 알림 시스템, 전담 성능 팀에 의해 지원된다. 엣지와 지속적인 파트너십을 통해 모든 사용자에게 분리된 요소 도구 또는 심볼 통합 해제 지원 등의 도구 개선사항을 제공한다.

개발 프로세스에 lage를 채택에 더 빠른 빌드 시간을 달성했고, 테스트와 자동화 프레임워크로서 플레이라이트의 가치를 검증했다. 팀즈 앱에서 사용되는 플루언트 UI 리액트 컨트롤은 깃허브의 오픈소스 프로젝트로 공유됐다.

효율적인 키보드 사용, 키보드 단축키에 대한 상황에 맞는 도움말, 윈도11 고대비 지원 및 화면 판독기 사용자 지원 등 접근성 기능도 추가됐다.

새로운 팀즈 데스크톱 앱의 아키텍처

새로운 팀즈의 아키텍처 요소를 정리하면 다음과 같다. 기본 호스트는 엣지 웹뷰2를 활용하고, 그래프QL은 클라이언트 데이터 레이어를 추상화한다. IPC는 연결 에이전트 역할을 하고, 리액트JS, 타입스크립트, 플루언트 UI는 UX를 표준화하는데 활용된다. 팀즈 플랫폼에 구축된 앱은 웹뷰 래퍼의 오버헤드를 필요로 하지 않는다. 팀즈 플랫폼 상의 앱은 엣지 렌더 프로세스를 사용해 프로세스 외 iframe에서 호스팅된다.

마이크로소프트는 "새로운 팀즈는 윈도 인텔, AMD 및 ARM 플랫폼을 지원하며, 웹, 애플 M1/M2, 인텔맥, VDI 등 모든 주요 플랫폼에 제공될 예정"이라고 밝혔다.