iOS 라이브러리 개요

iOS 라이브러리 개요 (iOS Library Overview)

디자인 시스템의 빌딩 블록인 컴포넌트들로 구성된 Fluent iOS를 소개하는 문서예요. 네이티브 Apple 컴포넌트와 자연스럽게 어울리면서도 마이크로소프트만의 독특한 경험을 만들 수 있는 방법을 알려 드릴게요.

출처: 문서

본문

컴포넌트는 특정 UI 문제를 해결하기 위해 만들어진 디자인 시스템의 빌딩 블록이에요. Fluent iOS는 네이티브 Apple 컴포넌트와 자연스럽게 어울리는 맞춤형 컴포넌트 하위 집합으로, 플랫폼에 네이티브한 독특한 마이크로소프트 경험을 만들 수 있게 해 줘요.

먼저 설정이 필요하다면 start designing과 start developing 가이드를 확인하세요.

Note: Fluent iOS는 Fluent 2 디자인 언어와 토큰 시스템, 그리고 필요한 것만 가져갈 수 있도록 모듈화된 코드를 포함하도록 업그레이드되고 있어요. 이 컴포넌트들은 아직 개발 중이므로 프로덕션에서 사용할 때는 주의하세요. 변경 사항이 나중에 앱을 수정해야 할 수 있습니다. 더 많은 컴포넌트와 API가 제공되면 계속 추가할 거예요.

Resources (리소스)

Components (컴포넌트)

  • Activity indicator - 활동 인디케이터는 백그라운드 작업이 진행 중임을 알리고 시스템이 계속 작동하고 있음을 안심시켜 줘요.
  • Avatar - 아바타는 사람이나 그룹을 나타내는 이미지나 텍스트를 보여 주면서 상태와 활동 같은 추가 정보를 전달해요.
  • Avatar group - 아바타 그룹은 여러 아바타를 보여 줘요.
  • Button - 버튼은 단일 동작이나 이벤트를 트리거해요.
  • Card nudge - 카드 너지(card nudge)는 앱에서 무엇을 할 수 있는지 발견하도록 도와주는 짧은 메시지예요.
  • Heads-up display - 헤즈업 디스플레이(HUD)는 백플레이트 위에 나타나는 진행 표시기로, 진행 중인 백그라운드 작업에 대한 추가 텍스트 정보를 제공할 수 있어요.
  • Navigation bar - 내비게이션 바는 현재 화면과 관련된 정보와 동작을 제공해요.
  • Progress bar - 진행 바는 백그라운드 작업이 진행 중임을 알려 줘요.
  • Segmented control - 분할 컨트롤은 단일 가로 컨테이너에서 두 개 이상의 세그먼트로 구성된 집합 중 하나를 선택할 수 있게 해 줘요.
  • Shimmer - 스키머는 다른 UI 요소의 렌더링을 막지 않으면서 정보의 한 구역이 로딩 중임을 알려 줘요.
  • Text field - 텍스트 필드는 짧고 자유로운 형식의 텍스트 데이터를 입력할 수 있게 해 줘요.
  • Tooltip - 툴팁은 기본 인터페이스에서 사용자의 주의를 빼앗지 않으면서 보충적이고 문맥적인 정보를 제공해요.

더 알아보기 (Learn more)