본문 바로가기
C#

[C#] - Visual Studio에서 Metro UI Framework 추가하기

by CHML 2016. 10. 3.
1. Metro 디자인

Metro 디자인은 과도한 그래픽을 제외하고, 콘텐츠를 주로 하는 UI를 설계하는 것을 원칙으로 한다. 원래 Metro 디자인은 마이크로소프트에서 윈도우 폰과 윈도우 8, 윈도우 10의 개발을 위해 발전되었으나, 최근에는 웹 어플리케이션과 앱 어플리케이션 등 다양한 디자인 분야에서 이용되고 있다.

Metro 디자인의 가장 큰 특징은 단색, 그라데이션의 제거 등과 같은 심플함이다. Metro 디자인의 심플한 아이콘과 콘텐츠 위주의 구성은 직관적이며, 누구나 쉽게 디자인 할 수 있다. 반대로 애플의 iOS 등은 실물을 단순화한듯한 디자인을 많이 이용하는데, 이는 Metro 디자인과 비교할 때 많은 차이점이 있다 [그림 1].


[그림 1] 애플의 다지인 컨셉과 마이크로소프트의 Metro 디자인 컨셉


디자인을 보는 관점은 개인에 따라 다르기 때문에 애플과 Metro의 디자인 컨셉 중, 어느것이 더 좋은지는 결정할 수 없는 문제이다. 그러나 한 가지 확실한 것은 나와 같이 전문적인 디자이너가 아닌 사람에게는 Metro 디자인 기반의 어플리케이션이 더욱 만들기 쉽다는 것이다.

Visual Studio에서는 Metro UI Framework를 추가하여 Metro 디자인이 적용된 요소들을 이용할 수 있다. 다음의 링크에서는 Metro UI Framework에서 제공하는 요소들을 보여준다. 다음 항목에서는 Metro UI Framework를 Visual Studio C# 프로젝트에 추가하는 방법을 설명한다.


2. Metro UI Framework 추가하기

이 항목에서는 Microsoft Visual Studio 2015를 기준으로 C# 프로젝트에 Metro UI Framework를 추가하는 방법에 대해 설명한다.


1) Visual Studio에서 Window Forms 응용 프로그램 C# 프로젝트를 생성한다.




2) 도구 - 확장 및 업데이트 - 온라인 항목에서 "NuGet Package"를 검색하여 NuGet Package Manager를 설치한다.




3) NuGet Package Manager의 설치가 끝나면, 도구 - NuGet 패키지 관리자 - 패키지 관리자 콘솔을 클릭한다.




4) 패키지 관리자 콘솔에 "Install-Package MetroFramework"를 입력한다.




5) MetroFramework의 설치가 완료되면, Visual Studio 솔루션 탐색기의 참조 항목에 MetroFramework가 추가된 것을 볼 수 있다.




6) Visual Studio 도구 상자에 마우스 오른쪽 버튼을 클릭하여 탭을 추가한다. 탭의 이름은 임의로 설정해도 상관없으며, 이 글에서는 MetroUI라는 이름으로 탭을 생성하였다.




7) 프로젝트 폴더에 추가된 MetroFramework.dll의 경로를 확인한다.

MetroFramework.dll은 프로젝트 폴더의 packages\MetroFramework.RunTime.1.2.0.3\lib\net40-Client에 있으며, 프로젝트 폴더의 경로를 모를 경우에는 Visual Studio 솔루션 탐색기에서 프로젝트 아이콘에 마우스 오른쪽 버튼을 클릭하여 "파일 탐색기에서 폴더 열기 항목"을 클릭한다. 그 다음 탐색기에서 한 단계 뒤로 가면, packages 폴더를 확인할 수 있다.




8) Visual Studio 도구 상자에서 이전에 생성한 새로운 탭에 마우스 오른쪽 버튼을 클릭한 다음, "항목 선택"을 클릭한다.




9) MetroFramework.dll을 추가한다.

이전 단계에서 "항목 선택"을 클릭하면 나타나는 창에서 ".NET Framework 구성 요소" 탭의 찾아보기를 클릭하여 7번째 단계에서 확인한 MetroFramework.dll을 추가한다.





10) Visual Studio 도구 상자의 새롭게 생성한 탭에 Metro 디자인 기반의 요소들이 생성된 것을 확인할 수 있다.




11) 마지막으로, 코드 상에 "using MetroFramework.Forms;"를 추가하고, Form이 상속받는 객체를 Form에서 MetroForm으로 수정한다.




12) 모든 과정이 정상적으로 수행되었다면, 다음과 같이 form의 디자인이 변경된 것을 확인할 수 있다.





'C#' 카테고리의 다른 글

[C#] - Microsoft Text Analytics API  (0) 2016.10.09
[C#] - Microsoft Emotion API  (4) 2016.10.05
[C#] - 클래스 정의와 상속  (0) 2016.09.15
[C#] - 메소드 (Method)  (0) 2016.09.15