Blend for Visual Studio 강의 - Blend 프로젝트 생성

요즘 전반적인 디자인이 미니멀리즘을 추구하고 있고, 윈도우 8로 넘어오면서 Flat 디자인이 대세가 된 만큼 깔끔한 시작 화면을 볼 수 있습니다. 디자인의 흐름이 그렇게 바뀌는 추세가 되었었는지, 마이크로소프트가 Metro 디자인으로 스타트를 시작하고, 애플이 바로 뒤따라가더니, 전세계 유수의 회사들이 모두 플랫 디자인을 중심으로 바꾸더군요.

(전 디자이너가 아닌 개발자 입장에서 소규모 회사라 디자인 잡무를 일부 합니다만... 플랫 디자인 정말 어렵네요. 물론 복잡한 디자인도 못하지만 간결한 디자인은 기술이 없어서 힘들지만요. 플랫한 디자인은 쉬운것 같지만 정말... 제 손을 타면 외이렇게 싼티가 작렬하는지 ^^;)

자, Visual Sutdio와 Blend를 설치하였으면 블랜드를 실행시켜 봅니다. 

Visual Studio의 공식 마크인 리본의 일부가 Blend 글자 뒤에 플랫하게 표현되어 있습니다. 디자이너가 작업한 것은 깔끔하면서도 고급지네요.

아래는 Blend를 실행한 화면입니다.

우리는 윈도우즈 스토어와 윈도우즈 폰의 유니버셜 앱을 만들기 위하여 디자인 측면에서 Blend를 사용할 예정입니다. 현재 윈도우즈 8.1 또는 윈도우즈 10에서의 유니버설 앱이란 동일한 데이터 집합과 기능을 이용하여 UI, 사용자 사용 패턴이 다른 데스크톱 및 테블릿용의 윈도우즈 스토어용 앱과 윈도우즈 폰의 윈도우즈 폰 스토어용 앱을 구성하는 것을 이야기 합니다.

Blend 카테고리의 글은 디자이너가 이해하기 쉽도록 쓰려고 하는데 그래도 이해가 어려우시다면 꾸준히 강의 내용을 보시고 따라해보신다면 어느순간 "아하~" 하는 순간이 올 것이라고 생각됩니다. 개발자도 제일 처음에 그러거든요. 그냥 따라 타자만 치고 프로그램을 구성해봅니다. 왜 그렇게 코드를 구성해야 하는지는 1년, 2년 지나다보면 자연스레 알게 됩니다. (덕분에 'Hello World!'라는 문구는 개발자 이외에도 꽤 많은 사람들이 알만한 문구가 되었지요)

지금부터는 XAML과 C#으로 이루어진 유니버셜 앱(범용 앱) 개발을 시작 해봅시다. (프론트 단 HTML과 비하인드 단 JavaScript로 구성 유니버셜 앱도 있지만, 강의에서 다루지는 않겠습니다.)

위에 나타나는 화면에서 새 프로젝트를 눌러볼까요?

새 프로젝트를 보시면 좌측에 HTML(스토어앱)과 XAML(스토어앱), WPF, Silverlight로 구성되어 있습니다.

1. HTML 프로젝트의 경우 윈도우 스토어 및 윈도우 폰 스토어용 앱 개발 프로젝트이며 프론트 단은 HTML로 구성하고, 비하인드 단은 JavaScript 로 구성하여 앱을 만들 수 있습니다.
   
   

2. XAML 프로젝트의 경우 윈도우 스토어 및 윈도우 폰 스토어용 앱 개발 프로젝트이며 프론트 단은 XAML로 구성하고, 비하인드 단은 C# 으로 이루어져 있습니다.
   
   

3. WPF 프로젝트의 경우 윈도우 데스크톱용 어플리케이션(응용프로그램) 개발 프로젝트이며, 프론트 단은 XAML로 구성되어 있고, 비하인드단은 C#으로 이루어져 있습니다.
   
   

4. Silverlight 프로젝트의 경우 웹 프로그램용 개발 프로젝트이며, 프론트 단은 XAML로 구성되어 있고, 비하인드단은 C# 으로 구성되어 있습니다.

1. 좌측을 XAML(스토어 앱)을 선택하시고 확장하면 범용 앱을 선택할 수 있습니다. 범용 앱을 선택하고 우측의 허브 응용 프로그램(유니버셜 응용 프로그램)을 선택합니다.
   
   
2. 프로젝트의 이름을 저는 TourDiary로 해보겠습니다. 금번 강의 주제를 여행 일지를 만드는 것으로 정했거든요!! 프로젝트의 이름은 향후 앱스토어에 등록될 이름과 같은 것이 좋으므로, 윈도우즈 개발자 센터에서 앱 등록에서 앱 이름을 먼저 검색해보고 결정하는 것이 좋습니다. 물론 현재 프로젝트의 이름이 앱의 이름과 다르다고 등록이 되지 않는 것은 아닙니다만, 우리는 동일한 규칙을 가져가는 것을 좋아...하니까요?
   
   
3. 프로젝트가 위치할 폴더 내 위치를 선택합니다. 대부분 프로젝트 단위별로 관리하기 때문에 기본 위치에 있는 것은 불편하실겁니다. 적당하게 자신에게 맞는 폴더로 수정합니다.
   
   
4. 언어와 버전은 개발 환경에 맞추어줍니다. 저는 강의를 C#으로 진행 할 예정이므로, 언어는 Visual C#을 선택합니다. 개발 환경이 c++에 맞추어져 있는 분은 c++로 선택하셔도 무방합니다(대부분 프로젝트의 생성은 개발자단에서 하고, 디자이너는 그 개발환경을 받아서 진행할 확률이 높습니다. 개발언어는 개발자와 상의합시다). 현재 강의에는 최신버전이 8.1이므로 버전을 8.1을로 놓고 확인 버튼을 선택합니다. 향후 개발 윈도우 10이 나올 경우 버전이 바뀔 수 있겠죠.

자, 프로젝트가 구성되었습니다. 초기의 화면보다 굉장히 복잡해졌죠? 코드가 막 추가되었구요. 그럼 다음 강의에서 한가지씩 알아보겠습니다. 천천히 따라오시면 누구나 만들 수 있을겁니다. 화이팅!!

시리즈 글

2015/03/14 - [프로그램 관련/Blend] - Microsoft Visual Studio 와 Blend 의 WPF
2015/03/15 - [프로그램 관련/Blend] - Blend for Visual Studio 강의 - Blend 다운로드 

2015/03/17 - [분류 전체보기] - Blend for Visual Studio 강의 - Blend 화면 구성(상단 메뉴-1)