3일차. WinUI 앱 디자인 기초

© Microsoft 2020

   UWP는 마이크로소프트의 플루언트 디자인(Fluent Design)과 그 디자인을 구축하는 Windows UI 라이브러리(WinUI)를 사용할 수 있습니다. 그리고 이 플루언트 디자인에서는 탐색(Navigation)/명령(Command)/콘텐트(Content) 이렇게 세 가지 구조를 권장하고 있습니다. 디자인에 대한 내용은 게시글 한두개 정도로 요약하기 어렵고, 자세한 내용들은 계속해서 풀어 나갈 예정이기 때문에 자세한 내용은 마이크로소프트 문서를 참고하세요.

 

 

탐색 Navigation

  플루언트 디자인에서 좋은 탐색이란 일관성, 단순함, 명료함을 지키는 것입니다. 일관성은 사용자의 기대를 충족시키는 것입니다. 사용자가 친숙한 표준 컨트롤을 사용하고 아이콘과 위치 스타일링에 대한 표준 규칙을 사용하여 사용자의 탐색이 예측 능하고 직관적이게 만들어야 합니다. 단순함은 필요한 것 외에는 하지 않는 것 입니다. 중요한 대상에 쉽게 엑세스할 수 있도록 중요하지 않은 항목은 숨기면 사용자가 원하는 항목에 더 빨리 접근할 수 있게 됩니다. 명료함은 명확한 경로와 옵션을 제공하는 것입니다. 탐색 옵션을 명확하게 만들고 페이지 간 관계를 명료하게 만들면 사용자가 헤매지 않고 탐색할 수 있게 만들어줍니다.

 

컨트롤 : 프레임, 위쪽 탐색, 탭, 피벗, 왼쪽 탐색, 마스터/디테일, 하이퍼링크 등

 

 

명령 Command

   명령은 사용자가 어떤 작업을 수행할 수 있게 해주는 대화형 UI 요소입니다. 명령에는 일반적인 명령 요소와 명령 요소를 호스트하는 명령 화면, 명령 요소가 지원하는 상호 작용 및 제공하는 환경으로 구성됩니다. 일반적인 명령 환경에는 정보 전송 또는 제출, 설정 및 옵션 선택, 콘텐츠 검색 및 필터링, 파일 열기, 저장, 삭제, 콘텐츠 편집 또는 만들기 등이 있습니다. 또한 독창적인 명령 환경을 디자인 할 수도 있습니다. (링크)

 

컨트롤 : 버튼, 목록, 선택 컨트롤(체크박스, 라디오버튼, 토글스위치), 달력, 날짜 및 시간 선택기, 자동 제안 상자 등

 

 

콘텐트 Content

   콘텐츠의 종류는 매우 다양합니다. 따라서 콘텐트의 유형도 아주 많습니다. 예를 들면 사진 편집 앱은 사진이 콘텐트이고, 여행 앱은 여행 목적지에 대한 정보와 지도가 콘텐트인 식입니다. WinUI에서 제공하는 일반적인 페이지 패턴은 방문 페이지, 컬렉션 페이지, 마스터/디테일 페이지, 디테일 페에지, 양식(Form) 페이지 등이 있습니다. 자세한 내용은 콘텐츠 기본 사항 문서(링크)를 참고하세요

 

 

 

 

참고

docs.microsoft.com/ko-kr/windows/uwp/design/basics/

디자인 기본 사항 - UWP applications