개발 시작하기

개발 시작하기 (Start developing)

Fluent 2는 디자인에서 개발, 전달까지 매끄러운 메이커 경험을 제공해요. Fluent UI 코드 라이브러리에 이 쉬운 단계로 빠져들어 보세요.

출처: 문서

본문

플랫폼을 선택하세요 (Pick your platform)

앱을 필요로 하는 곳과 때에 맞춰 고객에게 전달하세요. Fluent의 응집력 있는 디자인 언어는 플랫폼별 Fluent UI 라이브러리 각각에 반영되어, 하나의 플랫폼에 대해 또는 전부에 대해 동일한 훌륭한 경험을 만들 수 있게 해줘요.

React (Fluent UI React v9)

도구와 요구사항 (Tooling and requirements)

React에서 Fluent 2 경험을 만들려면 Fluent UI React v9가 필요해요. Fluent UI React는 React와 TypeScript로 만들어졌고, 컴포넌트는 CSS in JS로 스타일링돼요. 우리는 Griffel을 사용해 스타일을 렌더링하고 필요할 때 DOM에 CSS를 삽입해요.

v9로 앱을 만들고 실행하려면 node.js와 yarn 같은 패키지 매니저가 필요해요.

Fluent UI React v9로 마이그레이션 (Migrating to Fluent UI React v9)

이전 버전의 Fluent UI React에서 마이그레이션 중인가요? Storybook의 Migration 주제를 확인하세요.

Fluent UI React v9 설치 (Installing Fluent UI React v9)

선호하는 패키지 매니저로 Fluent UI React를 프로젝트의 의존성으로 설치하세요.

npm install @fluentui/react-components
yarn add @fluentui/react-components

앱 설정 (Setting up your app)

루트에 FluentProvider와 테마를 가져오세요. 테마를 FluentProvider의 prop으로 전달하세요. 이는 앱 수준 설정을 정의해요. FluentProvider 안에서 렌더링할 다른 v9 컴포넌트를 필요하면 가져오세요.

import {
      FluentProvider,
      webLightTheme,
      Button
} from "@fluentui/react-components";

export default function App() {
      return (
          <FluentProvider theme={webLightTheme}>
              <Button appearance="primary">Hello Fluent UI React</Button>
          </FluentProvider>
      );
}

준비, 설정, 만들기 (Ready, set, make)

이제 준비 완료예요! Fluent로 완전히 접근 가능하고 즐거운 경험을 만들려면 컴포넌트 문서를 읽으세요. 질문이나 피드백이 있으면 GitHub에서 팀에 문의하세요.

Web Components (Fluent UI Web Components)

도구와 요구사항 (Tooling and requirements)

Fluent UI Web Components로 Fluent 2 경험을 만들려면 Fluent UI Web Components 패키지가 필요해요. 이것은 FAST Element와 TypeScript로 만들어졌고 JavaScript 모듈로 배포돼요.

패키지의 CDN 배포를 사용하지 않는다면, Fluent UI Web Components로 앱·웹사이트를 만들고 실행하려면 node.js와 NPM·Yarn·PNPM 같은 패키지 매니저가 필요해요.

Fluent UI Web Components 설치 (Installing Fluent UI Web Components)

Fluent UI는 앱의 의존성으로 설치해야 해요.

Yarn

yarn add @fluentui/web-components

NPM

npm i @fluentui/web-components

pnpm

pnpm add @fluentui/web-components

설정 (Setup)

Fluent UI Web Components는 CSS 변수 형태의 토큰으로 스타일링돼요. setTheme 유틸리티를 사용해 웹사이트나 애플리케이션에 테마를 제공할 수 있어요.

import { setTheme } from '@fluentui/web-components';
import { webLightTheme } from '@fluentui/tokens';

setTheme(webLightTheme);

사용법 (Usage)

이제 끝이에요. 앱에서 Fluent UI Web Components를 사용할 수 있어요.

이름 있는 import로 요소를 직접 정의하기

import { ButtonDefinition, FluentDesignSystem } from '@fluentui/web-components';

ButtonDefinition.define(FluentDesignSystem.registry);

iOS (Fluent UI Apple)

도구와 요구사항 (Tooling and requirements)

iOS에서 Fluent 2 경험을 만들려면 Fluent UI Apple이 필요해요. Fluent UI Apple은 iOS·iPadOS·MacOS에서 Fluent 디자인 시스템을 구현하는 네이티브 UIKit과 AppKit 컨트롤을 포함해요. Swift로 만들어졌고 Objective-C를 지원해요. 시작하려면 다음이 필요해요:

• iOS 14 이상 또는 MacOS 10.15 이상
• Xcode 14.1 이상
• Swift 5.7.1 이상

Fluent 2로 마이그레이션 (Migrating to Fluent 2)

Fluent UI Apple의 각 릴리스에서 우리는 더 많은 컴포넌트를 Fluent 2 디자인 언어에 정렬해요. 컴포넌트가 Fluent 2에 정렬되도록 토큰화되면, Fluent 1 버전은 더 이상 사용할 수 없어요. 무엇이 바뀌었거나 추가되었는지 릴리스 노트를 확인하세요. 업그레이드된 컴포넌트의 Fluent 1 버전이 필요하면, 그 컴포넌트가 토큰화되기 전 릴리스를 사용하세요.

Fluent UI Apple 설치 (Installing Fluent UI Apple)

Swift 패키지 매니저 사용

Xcode 프로젝트나 Package.swift 파일에서 fluentui-apple을 의존성으로 지정하세요.

dependencies: [
          .package(url: "https://github.com/microsoft/fluentui-apple.git",
          .upToNextMinor(from: "X.X.X")),
]

CocoaPods 사용

Podfile에서 Fluent UI를 지정하세요. 자세한 내용은 getting started 가이드를 참고하세요.

pod 'MicrosoftFluentUI', '~> X.X.X'

수동 설치

기존 Xcode 프로젝트에 수동으로 설치하려면 FluentUI Apple 저장소에서 최신 변경 사항을 다운로드하고 fluentui-apple 폴더를 프로젝트 폴더로 옮기세요.

ios/FluentUI.xcodeproj를 Xcode 프로젝트로 옮기세요. Xcode에서 your project > your target > General > Frameworks, Libraries, and Embedded Content를 선택하고 libFluentUI.a를 추가하세요.

데모 환경을 설정하려면 your project > your target > Build Phases > Copy Bundle Resources를 선택하고 FluentUIResources-iOS.bundle을 추가하세요.

Fluent UI Apple 가져오기 (Importing Fluent UI Apple)

라이브러리를 설치한 후 import 해서 Fluent 컴포넌트에 접근하세요.

Swift:

import FluentUI

Objective-C:

#import <FluentUI/FluentUI-Swift.h>

준비, 설정, 만들기 (Ready, set, make)

이제 준비 완료예요! 컴포넌트 문서를 읽어 완전히 접근 가능하고 즐거운 경험을 만드세요. 질문이나 피드백은 GitHub에서 팀에 문의하세요.

Android (Fluent UI Android)

도구와 요구사항 (Tooling and requirements)

Android에서 Fluent 2 경험을 만들려면 Fluent UI Android가 필요해요. Fluent UI Android는 Android에서 Fluent 디자인 시스템을 구현하는 네이티브 컨트롤을 포함해요. Kotlin으로 만들어졌어요. 시작하려면 다음이 필요해요:

• Android API 21 이상
• Android CompileSDK 33
• Kotlin 1.8.21
• Jetpack Compose BOM 2023.06.01
• Jetpack Compose Compiler 1.4.7
• Duo version 1.0.0-alpha01
• Android Studio Flamingo

Fluent 2로 마이그레이션 (Migrating to Fluent 2)

Fluent UI Android의 각 릴리스에서 우리는 더 많은 컴포넌트를 Fluent 2 디자인 언어에 정렬해요. 컴포넌트가 Fluent 2에 정렬되도록 토큰화되면, Fluent 1 버전은 같은 모듈에 남지만 모듈은 토큰화된 폴더와 토큰화되지 않은 폴더로 분리돼요. 무엇이 바뀌었거나 추가되었는지 릴리스 노트를 확인하세요.

Fluent UI Android 설치 (Installing Fluent UI Android)

Gradle 사용

우리 라이브러리는 MavenCentral로 게시되므로, 버전 0.0.17 이상을 사용하려면 프로젝트 수준 build.gradle 파일에 mavenCentral() 저장소가 추가되어 있어야 해요. 이전 버전을 사용한다면 jcenter()도 사용할 수 있어요. 단, 0.0.16 이하에서만 동작해요.

build.gradle의 의존성 블록 안에 FluentUI 라이브러리 줄을 추가하고, $version을 최신 FluentUI 버전으로 바꾸세요.

dependencies {
    ...
    implementation 'com.microsoft.fluentui:FluentUIAndroid:$version'
    ...
}

버전 0.0.12부터 애플리케이션은 필요에 따라 개별 모듈을 사용할 수 있어요. 예를 들어 BottomSheet 컴포넌트는 fluentui_drawer 모듈에 있어요. 다른 모듈에 의존하지 않고 BottomSheet를 사용하려면 build.gradle에 fluentui_drawer 모듈을 추가하세요. $version을 최신 fluentui_drawer 버전으로 바꾸세요.

dependencies {
    ...
    implementation 'com.microsoft.fluentui:fluentui_drawer:$version'
    ...
}

각 모듈의 내용과 모듈화에 대해 더 알아보려면 GitHub를 참고하세요.

Surface Duo 개발

듀얼 스크린 경험을 위해 앱을 향상시키려면 Surface Duo SDK를 사용하세요. SDK를 얻으려면 gradle 스크립트의 repositories 섹션에 다음 줄을 추가하세요.

maven {
    url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
}

모듈 수준 build.gradle 파일에 SDK 의존성을 추가하세요. 여기 표시된 것과 다를 수 있으므로 SDK의 현재 버전을 확인하세요.

implementation "com.microsoft.device:dualscreen-layout:1.0.0-alpha01"

Maven 사용

Maven으로 Fluent UI Android를 설치하려면 FluentUI 라이브러리를 의존성으로 추가하세요. ${version}을 최신 FluentUI 버전으로 바꾸세요.

<dependency>
  <groupId>com.microsoft.fluentui</groupId>
  <artifactId>FluentUIAndroid</artifactId>
  <version>${version}</version>
</dependency>

애플리케이션은 필요에 따라 특정 모듈을 사용할 수 있어요. ${version}을 필요한 컴포넌트의 최신 버전으로 바꾸세요.

<dependency>
  <groupId>com.microsoft.fluentui</groupId>
  <artifactId>fluentui_drawer</artifactId>
  <version>${version}</version>
</dependency>

수동 설치

기존 Xcode(프로젝트)에 수동 설치하려면 Fluent UI Android 저장소에서 최신 변경 사항을 다운로드하세요. 모듈화된 FluentUI 수동 설치는 필요한 모듈의 개별 AAR 파일을 빌드하는 것을 포함해요.

이 지침에 따라 FluentUI 모듈에서 AAR 파일을 빌드·출력하고, 프로젝트에 import 하고, 의존성으로 추가하세요. AAR 파일 생성이 어려우면 모듈을 선택하고 Build 메뉴에서 "Make Module 'fluentui_drawer'" 같은 것을 실행하세요.

일부 컴포넌트는 AAR 아티팩트로 이 라이브러리를 사용할 때 수동으로 추가해야 하는 의존성이 있어요. 그 의존성들은 출력에 포함되지 않기 때문이에요. 이 라이브러리 버전들이 우리가 FluentUI build.gradle에서 구현하는 최신 버전과 일치하는지 다시 확인하세요.

PeoplePickerView를 사용한다면 gradle 파일에 이 의존성을 포함하세요:

implementation 'com.splitwise:tokenautocomplete:2.0.8'

CalendarView나 DateTimePickerDialog를 사용한다면 gradle 파일에 이 의존성을 포함하세요:

implementation 'com.jakewharton.threetenabp:threetenabp:1.1.0'

데모 앱 사용 — 데모에서 사용 가능한 구현된 컨트롤의 전체 목록은 Demos에서 찾을 수 있어요. 구현된 컨트롤과 디자인 언어의 샘플을 보려면 Android Studio에서 FluentUI.Demo 모듈을 실행하세요.

Fluent UI Android 가져오기 (Importing Fluent UI Android)

라이브러리를 설치한 후 import 해서 Fluent 컴포넌트에 접근하세요.

전체 라이브러리를 import 하는 코드:

import com.microsoft.fluentui

단일 컴포넌트를 import 하는 코드:

import com.microsoft.fluentui.persona.AvatarView

XML에서:

<com.microsoft.fluentui.persona.AvatarView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:name="Mona Kane" />

준비, 설정, 만들기 (Ready, set, make)

이제 준비 완료예요! 완전히 접근 가능하고 즐거운 경험을 만들려면 컴포넌트 문서를 읽으세요. 질문이나 피드백은 GitHub에서 팀에 문의하세요.

WinUI의 Fluent (Fluent in WinUI)

Windows 경험을 만드는 빌딩 블록을 얻으려면 WinUI를 사용하세요. 이 컴포넌트들은 Fluent 디자인 언어를 통합하므로, Fluent 생태계 안에서 훌륭한 경험을 만들고 있다고 확신할 수 있어요. WinUI 3 documentation을 참고하세요.

더 알아보기 (Learn more)

• 디자인 시작하기 — Figma UI 키트
• Fluent 2의 새로운 기능 — 시스템 변경
• 디자인 토큰 — 토큰 시스템