개발자 / 오픈소스 / 오피스ㆍ협업 / 클라우드

팀즈 서드파티 앱의 확장성을 높이는 ‘라이브 셰어 SDK’

Simon Bisson | InfoWorld 2022.06.20
팀즈(Teams)는 이전에도 마이크로소프트에서 전략적으로 중요한 제품이었지만, 코로나 사태 이후 그 위상이 더 높아졌다. 많은 기업이 재택근무를 선택하면서 하이브리드 업무 방식을 도입하는 게 점점 더 중요해지고 있기 때문이다. 

팀즈는 보통 회의나 협업을 위한 앱으로 유명하지만, 사실 핵심 차별점은 플랫폼 기술이라는 점이다. 처음 출시됐을 때부터 팀즈는 커뮤니케이션 및 협업 관련 앱을 만드는 플랫폼이었다. 즉, 실시간 협업 애플리케이션 개발에 필요한 기반 기술을 제공하고, 현업부서 시스템에 필요한 엔드포인트 역할을 수행하며 로우 코드 도구로 활용되고 있다. 

라이브 셰어 SDK 개념 알아보기

팀즈를 플랫폼이라고 생각하면 왜 마이크로소프트 빌드(Build) 컨퍼런스에 매해 팀즈 주제의 발표 세션이 있는지 이해가 될 것이다. 올해 열린 빌드에선 새로운 자바스크립트 SDK와 API 관련한 중요 업데이트를 볼 수 있었는데, 가장 흥미로운 점은 팀즈의 협업 및 회의 기능을 실시간 애플리케이션 개발 플랫폼인 플루이드 프레임워크(Fluid Framework)에서 지원한다는 소식이었다. 그렇게 해서 나온 것이 ‘라이브 셰어 SDK(Live Share SDK)’다.
 
ⓒ 라이브 셰어로 만든 앱 예시. 출처:마이크로소프트

라이브 셰어 SDK를 이용하면 팀즈 내 화상 회의 화면에 새로운 협업 기능을 추가할 수 있다. 이를 통해 사용자는 다른 팀원의 화면을 쉽게 회의 화면에 공유할 수 있다. 마이크로소프트는 이미 비슷한 기능을 비주얼 스튜디오에서 라이브 셰어(Live Share)라는 이름으로 제공한다. 비주얼 스튜디오의 라이브 셰어는 페어 프로그래밍을 위한 도구로, 이용하는 환경이 달라도 쉽게 코드 창을 누구에게나 공유할 수 있다.

팀즈의 라이브 셰어 SDK는 플루이드 프레임워크에서 지원되며 이를 통해 여러 메시 네트워크에서 생성되는 인스턴스 상태를 전달해준다. 개발자는 회의 화면에서 볼 수 있는 특정 기능을 코드로 작성하고 이를 플루이드 컨테이너에 담을 수 있다. 이때 별도의 백엔드 코드는 따로 작성하지 않아도 되기 때문에 개발자는 최소한의 코드로 협업 기능을 개발할 수 있다. 결과적으로 팀즈에 원하는 기능을 자유롭게 추가해 맞춤형 앱으로 만들 수 있다. 

가령 화상 회의 중에 코드나 와이어프레임(UX용어로 화면 단위의 레이아웃을 설계한 결과물)을 곧바로 팀즈 화면에 띄우고, 실시간으로 주석을 달면서 회의를 진행할 수 있는 것이다. 음성이나 영상 관련 기술은 팀즈 자체에서 알아서 관리해준다. 라이브 셰어 SDK는 오픈소스 기술로 깃허브에서 다운로드할 수 있다. 

라이브 셰어 앱 만들기 

이미 플루이드 프레임워크를 이용해본 사용자가 있다면 라이브 셰어 SDK 기술을 쉽게 이해할 수 있다. 라이브 셰어는 자바스크립트 패키지이며 NPM이나 얀(Yarn)을 통해 설치할 수 있다. 또한 팀즈 자바스크립트(Teams JavaScript) 및 플루이드 프레임워크(Fluid Framework) 패키지에 의존성을 갖는다. 두 패키지가 미리 설치되지 않았다면 SDK가 알아서 필요한 패키지를 설치한다. 패키지가 미리 설치되어 있더라도 혹시 모를 오류를 대비해 버전이 맞는지 확인해야 한다. 현재 기준으로 팀즈 자바스크립트 패키지 2.0.0-experimental.0 버전과 플루이드 프레임워크 0.59.0 버전이 모두 필요하다. 

라이브 셰어는 아직 프리뷰 단계로 사용하는 데 몇 가지 제한이 있다. 일단 라이브 셰어로 만든 기능은 예약된 회의에서만 이용할 수 있다. 다른 유형의 회의에선 앱을 실행하기 어렵다. 회의 참여자는 사전에 초대받아야 하고 앱에 액세스하려면 팀원은 회의 초대를 수락하고 캘린더에 추가해야 한다. 

팀즈 라이브 셰어 앱은 일반적인 팀즈 확장 프로그램 중 하나로 보면 된다. 아직 팀즈 개발자 툴에 통합되지 않았기 때문에 새 기능을 사용하려면 수동으로 권한을 주고받는 과정이 필요하다. 앱의 호스트 URL도 따로 확인해야 한다. 나중에는 이런 수동 작업 필요 없이 팀즈 SDK에서 바로 라이브 셰어 기능을 지원할 것으로 보인다. 

필요한 작업을 다 마쳤다면 원하는 기능을 바로 작성하면 된다. 앱은 회의에 연결된 후 각 사용자의 팀즈 세션에서 앱의 인스턴스가 회의와 함께 시작된다. 코드를 작성하면, 팀즈 SDK가 초기화된 후 플루이드 프레임워크 컨테이너를 생성돼 클라이언트 사이의 동기화를 처리한다. 컨텐츠를 동기화하는 부분에선 따로 분산 데이터 구조가 설정된다. 플루이드 프레임워크는 여러 데이터 구조를 가지고 있어서 앱에 맞는 구조를 선택해야 한다. 

가장 많이 선택되는 데이터 구조는 JSON 객체를 위한 키 밸류 스토어인 셰어드맵(SharedMap)이다. 셰어드맵은 공유 이미지 상에 그려진 좌표를 전송하며, 텍스트의 공동 편집을 도와주는 데이터 구조인 셰어드스트링(SharedString)과 결합할 수 있다. 두 데이터구조는 세션 사이에서 지속되고 회의가 끝난 후 리포트를 구성하고 오프라인으로 이용할 수 있는 컨텐츠를 제공한다. 

라이브 셰어는 플루이드 이전 프레임워크에선 볼 수 없는 임시 객체(Ephemeral Objects)라는 새로운 기능을 제공한다. 이는 플루이드 컨테이너에 저장되지 않지만, 사용자의 애플리케이션에서 여전히 액세스할 수 있는 새로운 공유 객체 유형이다. 사용자의 참석을 관리하거나 회의에서 포인터 같은 프레젠테이션 툴을 추가하는 데 사용할 수 있다. 이런 유형은 다른 실시간 플루이드 툴을 이용해 공유되지만, 플루이드 데이터 구조 안으로 명시적으로 저장하지 않았다면 회의 후 없어진다.  

임시이벤트(EphemeralEvent)라는 데이터 구조도 주목할 만한데, 이는 회의 중 클라이언트 사이에서 메시지를 전송해, 누군가가 들어왔는지 나갔는지를 보여주는 역할을 수행한다. 만약 알림을 받으려면 코드를 추가하고 비동기 방식으로 실행해야 한다. 실제로 플루이드 데이터 구조와 라이브 셰어 임시 객체 구조를 위해 사용하는 대부분의 코드는 비동기 형태여야 한다. 그렇지 않은 경우 작성한 코드는 회의 중 어느 때든 발생할 수 있는 이벤트를 찾고 응답해야 한다. 

라이브 셰어에서 미디어 처리하기 

라이브 셰어는 플루이드 프레임워크에서 제공하는 협업 툴을 이용해 문자 기반 컨텐츠를 담을 때 사용하기 적합하다. 또한 미디어 동기화를 지원하는 별도의 패키지 안에서 익스텐션 기술을 제공한다. 개발자는 임시 객체를 추가해 미디어 제어 및 현황을 확인하고, HTML 미디어 요소에서 재생을 동기화할 수 있다. 회의에서 영상 발표 자료를 만들고 있다면, 라이브 셰어 앱은 승인된 이용자가 재생을 멈추고 논의하거나 장면에 주석을 달도록 허용할 수 있다. 

또한 라이브 셰어를 이용하면 팀즈로 라이브 이벤트를 진행할 때도 도움을 받을 수 있다. 실시간 영상을 중지하고 건너뛸 수 있는 기능을 할 수 있는데, 특히 교육을 진행할 때 유용하다. 예를 들어 사용자가 퀴즈 정답을 말하거나 덧글을 쓸 때는 모두 영상을 멈추고 필요할 때 다시 영상을 재생시킬 수 있다. 이런 기능으로 화상 교육 과정에서 누군가가 뒤처지지 않고 모든 사람의 의견을 들을 수 있는 환경을 만들 수 있다. 

비주얼 스튜디오에서 유용했던 라이브 셰어 기능을 팀즈 회의에서도 이용할 수 있다는 건 좋은 일이다. 그러나 실시간 협업 툴을 제작하는 일은 마냥 쉬운 일이 아니라는 걸 잊지 말아야 한다. 팀즈 라이브 셰어는 공유 데이터 구조를 생성하고 관리하는 것을 단순화해주지만, 공유 데이터 변경을 사용자 경험에 반영하려면 일련의 비동기적 이벤트를 처리하는 툴을 여전히 제작해야 한다. 플루이드 프레임워크 같은 툴을 활용하면 좋겠지만 이 경우 복잡하고 관리하기 어려운 이벤트 파싱 코드가 만들어질 가능성이 높다. 

그렇다면 팀즈 라이브 셰어를 어떻게 활용해야 할까? 단순한 앱을 만들 때 이용하는 것이 가장 좋다. 다시 말해 이해하기 쉬운 데이터 구조를 공유하는 툴을 만들어야 한다. 예를 들어 칸반 보드 같은 앱을 만들고, 스탠드업 미팅 과정에서 이용할 수 있게 추가적으로 텍스트 및 음성 채팅, 편집 기능을 제공할 수 있다. 프로젝트 매니저는 이런 앱을 이용해 프로젝트의 진행 상황을 신속히 파악할 수 있을 것이다. 

라이브 셰어의 데이터 구조를 이해했다면, 앱을 보다 확장해 사용자가 원하는 기능을 새롭게 추가할 수 있다. 어떤 앱이든 결과물은 회의실 모니터와 개인 데스크톱 모두에서 원활히 작용하는 형태여야 한다. 이를 통해 하이브리드 업무 환경으로 분리된 직원을 연결할 수 있을 것이다. 
editor@itworld.co.kr

회사명 : 한국IDG | 제호: ITWorld | 주소 : 서울시 중구 세종대로 23, 4층 우)04512
| 등록번호 : 서울 아00743 등록발행일자 : 2009년 01월 19일

발행인 : 박형미 | 편집인 : 박재곤 | 청소년보호책임자 : 한정규
| 사업자 등록번호 : 214-87-22467 Tel : 02-558-6950

Copyright © 2024 International Data Group. All rights reserved.