SPFx와 Copilot UX 컴포넌트, 무엇이 다를까요?

Microsoft 365 앱을 개발하다 보면 SPFx와 Copilot UX 컴포넌트라는 말을 함께 만나게 됩니다. 이름이 비슷한 기술처럼 느껴질 수 있지만, 둘은 서로 경쟁하는 선택지가 아닙니다. 서로 다른 층의 개념입니다.

한 문장으로 정리하면

SPFx는 앱을 만드는 개발 프레임워크이고, Copilot UX 컴포넌트는 SPFx로 만들 수 있는 컴포넌트 종류 중 하나입니다.

비유하면 SPFx는 건물을 짓는 방법과 도구이고, Copilot UX 컴포넌트는 그 도구로 만들어 Copilot 안에 놓는 방 하나에 가깝습니다.

SPFx는 무엇인가요?

SPFx는 SharePoint와 Microsoft 365를 확장하는 앱을 만들고, 빌드하고, 배포하는 개발 모델입니다. 개발자는 TypeScript와 React 같은 익숙한 웹 기술로 화면을 만들고, 결과물을 .sppkg 패키지로 묶어 SharePoint App Catalog에 배포할 수 있습니다.

SPFx로 만드는 대표적인 컴포넌트가 WebPart입니다. WebPart는 SharePoint 페이지나 Teams 탭 안에 표시됩니다.

Copilot UX 컴포넌트는 무엇인가요?

Copilot UX 컴포넌트는 SPFx에서 제공하는 또 다른 컴포넌트 종류입니다. Copilot 대화가 어떤 도구를 호출하면, 이 컴포넌트가 전달받은 조건을 바탕으로 대화 안에 카드나 표 같은 인터랙티브 화면을 그립니다.

컴포넌트만 있다고 사용자가 자연어로 부를 수 있는 것은 아닙니다. 이름, 지침, 대화 시작 문구, 어떤 도구를 언제 부를지를 정의하는 declarative agent가 함께 있어야 합니다.

셋은 어떻게 연결되나요?

예를 들어 사용자가 Copilot에 “릴리스 준비 상태를 보여줘”라고 묻는다고 해보겠습니다.

1. declarative agent가 요청을 릴리스 현황 조회 요청으로 이해합니다.
2. 에이전트가 ReleaseGateTool을 호출합니다.
3. Copilot UX 컴포넌트가 조회 조건을 받아 릴리스 보드를 표시합니다.

이때 SPFx는 에이전트 정의와 Copilot UX 컴포넌트의 코드, 필요한 WebPart를 함께 빌드하고 .sppkg로 배포하는 기반입니다. 같은 공용 화면을 Copilot용 컴포넌트와 SharePoint용 WebPart가 나눠 사용할 수도 있습니다.

SPFx 프로젝트와 배포 패키지
├─ Declarative agent: Copilot 요청을 해석하고 도구를 선택
├─ Copilot UX component: Copilot 대화 안에 인터랙티브 화면 표시
└─ WebPart: SharePoint 페이지나 Teams 탭에 같은 화면 표시

기억할 점

• SPFx는 만드는 기반, Copilot UX 컴포넌트는 그 안에서 만드는 UI 부품입니다.
• Declarative agent는 컴포넌트와 다릅니다. 에이전트는 요청과 도구를 연결하고, 컴포넌트는 실제 화면을 그립니다.
• “SPFx와 Copilot UX 컴포넌트 중 무엇을 쓸까?”가 아니라, “SPFx를 사용해 어떤 컴포넌트를 만들까?”라고 생각하면 구분하기 쉽습니다.

현재 Copilot UX 컴포넌트는 프리뷰 단계에서 Microsoft 365 Copilot에 화면을 표시합니다. 같은 UI를 SharePoint나 Teams에서도 제공하려면, 그 호스트에 맞는 WebPart를 SPFx 솔루션에 함께 넣으면 됩니다.

참고 자료

• Copilot UX 컴포넌트 개요
• 첫 SharePoint Copilot 앱 만들기