Tech for good

[20210820_MeetUp] Building Apps for Microsoft Teams and Web with Fluid Framework 본문

IT/Cloud

[20210820_MeetUp] Building Apps for Microsoft Teams and Web with Fluid Framework

Diana Kang 2021. 8. 28. 00:57

 

MVP Watch Party
일시: 2021년 8월 20일(금) 오후 8시 - 오후 9시 30분

토의 진행자: 강연정, 이재석, 김홍석, 이희진
번역: 강연정


안녕하세요,

오늘은 'Fluid 기반 실시간 협업 애플리케이션 구축'에 대해 알아보도록 하겠습니다.

Microsoft Build 2021 세션 정보는 아래의 링크를 참고해주세요!

 

https://mybuild.microsoft.com/sessions/675d9c4a-771e-44b0-8559-979ac241b06e

 

Microsoft Build

Join us for the Microsoft Build 2-day, digital event to expand your skillset, find technical solutions, and innovate for the challenges of tomorrow.

mybuild.microsoft.com

 

 

 

 

https://www.youtube.com/watch?v=tPw5kFkXtt4

 

시작하기에 앞서, 위의 1분짜리 영상으로

Microsoft Fluid Components에 대해 파악하실 수 있습니다.

 

 

이번 빌드의 아젠다는 크게 세 가지로 나뉩니다.

 

1. 오픈소스 프로젝트 업데이트
2. Fluid 프레임워크와 Azure Service
3. Teams에 통합된 Fluid 기반 앱

 

 

 

Fluid Framework를 활용하면 이렇게 메모 앱을 만들 수도 있고,

 동기화된 공동 작업자의 상태를 파악할 수도 있습니다. 

오른쪽 상단의 요소를 변경할 때마다 장면이 즉시 업데이트되어 이를 반영합니다.

 

 

여러 문서에서 동시에 폰트 사이즈를 변경할 수도 있고, 업데이트 된 결과를 볼 수도 있습니다. 

 

Fluid Framework의 두 가지 핵심 비전으로는

'세계 최고 수준의 저지연성 협업 기술' '웹 에코시스템에서의 통합'을 꼽을 수 있습니다. 

 

 

 

 

이제 본론으로 들어가 Fluid Framework에 대해 알아보겠습니다.

Fluid Framework는 협업 앱을 만들기 위한 오픈 소스 기술입니다.

 

따라서 누구나 자유롭게 사용할 수 있으며

React, Angular, Vue 같은 다른 프레임워크와도 연동할 수 있습니다. 

 

 

 

이제 Fluid를 사용하여 협업 애플리케이션을 구축할 때의 이점에 대해 설명하고자 합니다. 

기존 방식에서는 주황색으로 보이는 캐시(Cache)나 웹 소켓(Websocket)을 설정해야 했습니다.  

즉, 어느 쪽이든 협업 앱을 구축하려면 로직을 추가하고 관리해야 하는 서비스를 추가해야만 했지요.

 

 

하지만 Fluid Service를 사용하면

아키텍처의 핵심 부분을 대체하면서도 성능을 향상시키고 엔지니어링 비용을 낮출 수 있습니다.

 

 

Fluid Framework로 만든 브레인스토밍 앱을 살펴보겠습니다.

브레인스토밍은 Fluid에 적합한데, 그 이유는

사람들이 공동으로 협력하여 사용할 때 더 좋은 결과를 낼 수 있으며

간소화된 서비스의 이점을 누릴 수 있기 때문입니다. 

 

 

Fluid Framework는 오픈소스로 공개되어

간소화된 개발 경험, 성능 향상 및 문서화에 집중하고 있습니다. 

Autodesk의 기여를 아래의 링크를 통해 살펴보실 수 있습니다. 

 

https://fluidframework.com/ 

 

Fluid Framework

Fluid Framework

fluidframework.com

하나의 Fluid Service에서 실행되는 애플리케이션은 다른 Fluid 서비스에서도 재구성될 수 있습니다.

이를 Azure Fluid Relay 라고 부릅니다.

 

 

Azure Fluid Relay Service는 Fluid의 모든 기능을 완전관리형 서비스로 제공합니다.

백엔드쪽을 Azure에서 지원해주기 때문에 편리하게 사용할 수 있는 것이 가장 큰 장점인 거 같습니다. 

 

 

Azure Fluid Relay에 대한 자세한 사항은 아래 링크를 통해 확인하실 수 있습니다.

 

https://fluidframework.com/docs/deployment/azure-frs/

 

Connect to an Azure Fluid Relay service

Connect to an Azure Fluid Relay service

fluidframework.com

Office 마법사 기능을 활용하여 여러 문서 관리를 보여준 

officeatwork회사의 데모 영상도 살펴보았습니다.

그럼 이제 Microsoft 365에서 Fluid가 작동하는 방식에 대해 살펴보겠습니다. 

 

Microsoft 365를 통해 Fluid 라이브러리를 사용하면

Teams내에 Fluid 기반 협업 애플리케이션을 쉽게 구축할 수 있습니다.

 

데이터는 SharePoint나 OneDrive에 자동 백업되므로

사용자는 클라이언트 경험과 비즈니스 로직만 고려하면 됩니다.

 

보안의 경우, Microsoft의 규정을 따르기 때문에 안정성을 보장할 수 있습니다.

 

 

 

Microsoft 365의 Fluid 라이브러리에는 협업 기반 Fluid Teams 앱 작성을 시작하는 데 필요한

모든 것이 포함되어 있습니다.

 

 

저는 개인적으로 ModayCoffee팀의 데모 영상이 가장 인상 깊었습니다.

이 부분 데모 영상은 아래 유튜브 링크를 통해 확인하실 수 있습니다. 

 

 

https://www.youtube.com/watch?v=PpPD14Zom9w 

 

 

이번 빌드를 통해 Fluid Framework에 대한 정보를 크게 세 가지로 나누어 살펴보았는데요.

첫번째는 Fluid Framework 오픈소스,
두번째는 Azure Fluid Relay Service,
세번째로는 Fluid Framework Microsoft 365 라이브러리에 대해 알아보는 시간을 가졌습니다.


웹 프론트 개발자들은 Fluid Framework를 활용하여

유용한 기능들을 간편하게 사용할 수 있을 것이라 생각됩니다.

 

그럼 지금까지 긴 글 읽어주셔서 감사합니다:)

다음 빌드 영상으로 돌아오겠습니다.