Windows 앱용 스타일

  • 아티클

스타일은 앱을 돋보이게 만듭니다. 이 섹션의 스타일 지침은 색상, 입력 체계, 아크릴 재질이나 표시 같은 새로운 기능을 통해 Fluent Design을 만드는 데 도움이 됩니다.

Windows UI 라이브러리(WinUI)를 사용하여 UI 구성 요소 전반에 최신 스타일을 전달합니다. 현재 Windows 앱 Fluent 스타일로 앱을 최신 상태로 유지하기 위해 최신 WinUI 버전을 사용해야 합니다. 이 작업을 수행하는 방법에 대한 자세한 내용은 XAML 스타일을 참조하세요.

Image depicting a color gradient.

색상

색은 앱의 다양한 수준의 정보를 통해 탐색하는 직관적인 방식을 제공하며 상호 작용 모델을 강화하는 데 중요한 도구 역할을 합니다.

Image depicting typography.

입력 체계

언어의 시각적 표현인 입력 체계의 주요 작업은 명확성입니다. 입력 체계의 스타일이 그 목표에 방해하는 행동과 같은 영향을 미쳐선 안됩니다. 다음 지침은 사용자가 콘텐츠를 쉽게 이해할 수 있도록 입력 체계를 사용하는 방법을 집중적으로 다룹니다.

Image depicting icons.

아이콘

좋은 아이콘은 입력 체계 및 나머지 디자인 언어와 조화를 이룹니다. 은유를 혼합하지 않으며 필요한 사항만 가능한 빠르고 단순하게 전달합니다.

Image depicting acrylic.

아크릴

멋진 반투명 표면을 생성하는 브러시인 아크릴을 사용하여 깊이감을 줍니다.

Image depicting reveal focus.

포커스 표시

포커스 표시는 Xbox One, 텔레비전 화면 등 몰입 시청 환경에 조명 효과를 더하고 포커스 가능한 요소의 테두리에 애니메이션 효과를 줍니다.

Image depicting sound.

소리

소리는 애플리케이션의 사용자 환경을 완성하고 모든 플랫폼에서 Windows 느낌을 일치시키는 데 필요한 추가 오디오 이점을 제공합니다.

Short movie with a blinking cursor and then the words Writing style being typed out.

쓰기 스타일

쓰기 스타일에 따라 열악한 사용자 환경이 될 수도 있고 좋은 사용자 환경이 될 수도 있습니다.

XAML 브러시

XAML 프레임워크를 사용하여 다양한 방법으로 앱 모양을 사용자 지정할 수 있습니다. 스타일을 사용하면 컨트롤 속성을 설정하고 이 설정을 재사용하여 여러 컨트롤에서 일관된 모양을 얻을 수 있습니다.

XAML 스타일

XAML 프레임워크를 사용하여 다양한 방법으로 앱 모양을 사용자 지정할 수 있습니다. 스타일을 사용하면 컨트롤 속성을 설정하고 이 설정을 재사용하여 여러 컨트롤에서 일관된 모양을 얻을 수 있습니다.

간격

Windows 애플리케이션을 최적화하고 앱의 기능과 상호 작용 요구 사항에 가장 적합한 사용자 환경을 제공할 수 있습니다.

모서리 반경

따뜻함과 신뢰감을 주기 위한 것으로, 사용자가 시각적으로 처리하기 쉬운 UI를 생성합니다.