Blazor Fluent UI
이 튜토리얼은 .NET 8을 지원하는 Microsoft.FluentUI.AspNetCore.Components 라이브러리 버전 4.5.0에 초점을 맞추고 있습니다. 이 라이브러리를 사용하면 Microsoft 공식 Fluent UI Web Components를 래핑한 컴포넌트뿐만 아니라 Fluent Design System을 활용하거나 Fluent UI를 사용하기 쉽게 만드는 컴포넌트도 사용할 수 있습니다.
Fluent UI 사용 기본 절차
시작하기 전에
- 이 튜토리얼은
.NET 8과 Blazor에 대한 기본적인 지식을 가정합니다. .NET 6과.NET 7을 지원하는 이전 버전도 사용할 수 있으나, 여기서는 최신 버전인.NET 8을 기준으로 설명합니다.
1단계: 패키지 설치
먼저, 프로젝트에 Microsoft.FluentUI.AspNetCore.Components NuGet 패키지를 설치해야 합니다. IDE의 NuGet 패키지 관리자를 사용하거나 CLI에서 다음 명령어를 실행합니다.
dotnet add package Microsoft.FluentUI.AspNetCore.Components
FluentUI 관련 전체 패키지는 다음과 같이 4개의 컴포넌트가 있습니다.
Install-Package Microsoft.FluentUI.AspNetCore.Components
Install-Package Microsoft.FluentUI.AspNetCore.Components.Icons
Install-Package Microsoft.FluentUI.AspNetCore.Components.Emoji
Install-Package Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter
<ItemGroup>
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.5.0" />
</ItemGroup>
2단계: 스크립트 추가
Fluent UI Web Components를 사용하기 위해 필요한 스크립트 파일을 프로젝트에 추가해야 합니다. 서버 사이드 렌더링(SSR)을 사용하는 경우, App.razor 파일에 다음 스크립트 태그를 포함시켜야 합니다.
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>
프로젝트 템플릿을 사용해 프로젝트를 생성한 경우, 스크립트 삽입은 선택한 옵션에 따라 자동으로 처리됩니다.
3단계: 스타일 추가
컴포넌트가 예상대로 작동하려면 구성된 스코프 CSS 파일을 추가해야 합니다. 이는 index.html, _Layout.cshtml, 또는 App.razor 파일의 <head> 섹션에 다음 라인을 추가함으로써 수행할 수 있습니다.
<link href="{PROJECT_NAME}.styles.css" rel="stylesheet" />
{PROJECT_NAME}을 프로젝트의 실제 이름으로 교체해야 합니다.
4단계: Reboot CSS 사용
Fluent UI 컴포넌트를 사용하여 사이트를 구축하는 데 도움이 되는 요소별 CSS 변경사항을 모아둔 Reboot CSS를 추가할 수 있습니다. <head> 섹션에 다음을 추가합니다.
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
5단계: 프로그램 설정
Program.cs 파일에 필요한 서비스를 설정해야 합니다. 이 부분에 대한 자세한 설명은 공식 문서의 코드 설정 섹션을 참조하세요.
6단계: 컴포넌트 사용
패키지 설치 후, Fluent UI Blazor 컴포넌트를 다른 Blazor 컴포넌트와 같은 방식으로 사용할 수 있습니다. 뷰에 다음 using 문을 추가합니다.
@using Microsoft.FluentUI.AspNetCore.Components
예를 들어, FluentCard와 FluentButton을 사용하는 간단한 예시는 다음과 같습니다.
@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 프로젝트에서 Fluent UI Blazor 컴포넌트를 활용하여 현대적이고 매력적인 사용자 인터페이스를 구성하는 방법을 단계별로 살펴보겠습니다. Fluent UI를 활용함으로써, 사용자에게 더욱 직관적이고 즐거운 경험을 제공할 수 있습니다.
1. Razor 컴포넌트 준비하기
먼저, Fluent UI 컴포넌트를 사용하기 위해 Razor 컴포넌트를 준비합니다. 아래 예시에서는 FluentButtonTestComponent.razor 파일을 DotNetNote\Components 디렉터리에 생성하고, 그 안에 Fluent UI의 FluentCard와 FluentButton 컴포넌트를 사용하는 간단한 UI를 정의합니다.
@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>
이 컴포넌트는 간단한 카드 형태로 "Hello World!" 메시지와 함께 클릭 가능한 버튼을 보여줍니다.
2. 컨트롤러 설정하기
다음으로, MVC 패턴의 컨트롤러 부분에 해당 컴포넌트를 뷰에서 사용할 수 있도록 설정합니다. FluentUITestsController를 DotNetNote\Controllers 디렉터리에 생성하고, Index 액션 메서드를 통해 해당 뷰를 호출할 수 있게 합니다.
namespace DotNetNote.Controllers;
public class FluentUITestsController : Controller
{
public IActionResult Index() => View();
}
3. 뷰 구성하기
마지막으로, 앞서 준비한 Razor 컴포넌트를 MVC 뷰에서 렌더링합니다. Index.cshtml 파일을 DotNetNote\Views\FluentUITests 디렉터리에 생성하고, 필요한 스타일시트와 스크립트를 포함시킨 후 FluentButtonTestComponent 컴포넌트를 서버 사이드에서 미리 렌더링(render-mode="ServerPrerendered")하여 사용자에게 보여줍니다.
@{
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 애플리케이션 내에서 Fluent UI 컴포넌트를 사용하여 현대적인 사용자 인터페이스를 구현할 수 있습니다. 사용자는 FluentUITests 컨트롤러의 Index 액션에 접근함으로써, 정의한 컴포넌트를 볼 수 있게 됩니다.