Blazor Fluent UI (v4.11.8 기준)
이 튜토리얼은 .NET 8을 지원하는 Microsoft.FluentUI.AspNetCore.Components 라이브러리 버전 4.11.8에 초점을 맞추고 있습니다.
이 라이브러리를 사용하면 Microsoft 공식 Fluent UI Web Components를 Blazor에서 쉽게 사용할 수 있으며, Fluent Design System 기반의 현대적 UI 컴포넌트를 활용할 수 있습니다.
공식 문서 및 데모: https://www.fluentui-blazor.net
최신 변경 사항: https://www.fluentui-blazor.net/WhatsNew
Fluent UI 사용 기본 절차
시작하기 전에
- 이 튜토리얼은
.NET 8과 Blazor에 대한 기본적인 지식을 가정합니다. .NET 6및.NET 7을 지원하는 구버전도 있으나, 본 가이드는 최신 버전인 .NET 8 기준으로 설명합니다.
1단계: NuGet 패키지 설치
IDE의 NuGet 패키지 관리자 또는 CLI에서 다음 명령어를 사용하여 설치합니다:
dotnet add package Microsoft.FluentUI.AspNetCore.Components
관련 구성요소 패키지는 다음과 같이 총 4개가 있습니다:
dotnet add package Microsoft.FluentUI.AspNetCore.Components
dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons
dotnet add package Microsoft.FluentUI.AspNetCore.Components.Emoji
dotnet add package Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter
.csproj 파일 예시:
<ItemGroup>
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.11.8" />
</ItemGroup>
2단계: 스크립트 추가
Fluent UI Web Components의 JS 모듈을 로드해야 합니다.
서버 렌더링(Blazor Server)에서는 보통 App.razor 또는 _Host.cshtml에 다음을 추가합니다:
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>
주의: 프로젝트 템플릿에 따라 이 부분이 자동 포함될 수도 있습니다.
3단계: 스타일시트 추가
프로젝트에 CSS 스코프 파일을 포함시켜야 컴포넌트가 정상 동작합니다.
Blazor WebAssembly는 wwwroot/index.html, Blazor Server는 _Layout.cshtml 또는 App.razor의 <head>에 추가합니다:
<link href="{PROJECT_NAME}.styles.css" rel="stylesheet" />
{PROJECT_NAME}은 프로젝트의 실제 이름으로 바꿔주세요.
4단계: Reboot CSS 사용 (선택)
Fluent UI의 기본 스타일 개선용 Reboot CSS도 제공합니다:
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
5단계: Program.cs 설정
Blazor Server에서는 다음과 같이 Program.cs에서 Fluent UI 서비스를 등록합니다:
builder.Services.AddFluentUIComponents();
추가 설정 및 서비스 구성은 공식 문서를 참조하세요.
6단계: 컴포넌트 사용 예제
Razor 컴포넌트 또는 페이지 상단에 다음을 추가합니다:
@using Microsoft.FluentUI.AspNetCore.Components
샘플:
<FluentCard Width="400px" Height="250px">
<h2>Hello World!</h2>
<FluentButton Appearance="@Appearance.Accent">Click Me</FluentButton>
</FluentCard>
ASP.NET Core MVC에서 사용하기
ASP.NET Core MVC에서도 Blazor Server 방식으로 Fluent UI 컴포넌트를 사용할 수 있습니다.
1. Razor 컴포넌트 준비하기
DotNetNote\Components\FluentButtonTestComponent.razor 파일을 생성하여 다음 내용을 작성합니다:
@using Microsoft.FluentUI.AspNetCore.Components
<h3>Fluent Button Test Component</h3>
<FluentCard Width="400px" Height="250px">
<h2>Hello World!</h2>
<FluentButton Appearance="@Appearance.Accent">Click Me</FluentButton>
</FluentCard>
2. 컨트롤러 구성
DotNetNote\Controllers\FluentUITestsController.cs를 생성합니다:
namespace DotNetNote.Controllers;
public class FluentUITestsController : Controller
{
public IActionResult Index() => View();
}
3. 뷰 구성
DotNetNote\Views\FluentUITests\Index.cshtml 파일을 생성하고 다음을 입력합니다:
@{
Layout = null; // 필요한 경우만
}
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>
<component type="typeof(DotNetNote.Components.FluentButtonTestComponent)" render-mode="ServerPrerendered" />
결과 미리보기
그림: MVC 페이지에 포함된 Blazor 컴포넌트
데모 실행:
https://www.dotnetnote.com/FluentUITests
이렇게 설정하면 ASP.NET Core MVC 애플리케이션 내에서도 Blazor 기반 Fluent UI 컴포넌트를 이용하여 일관되고 현대적인 사용자 인터페이스를 구현할 수 있습니다.