[Windows 8] Building Metro Style App (1)

오늘 MS 본사에서 Windows 8 관련 App Camp가 열렸습니다. 무엇보다도 국내에서 처음으로 열린 세미나여서 그런지 사람들의 관심이 많았습니다. 물론 저도 갔다 왔습니다.

 

 

앞으로도 더 공부를 해봐야 할 의욕이 생깁니다. 아무튼 오늘 다뤄볼 내용은 며칠전에 공개되었던 Hands On Lab 자료를 바탕으로 해보고자 합니다. 여러분들은 그냥 같이 그림보면서 따라하시면 좋을 것 같습니다.

자 우선 C#으로 할 예정이므로 Blank Application으로 프로젝트를 하나 생성합니다. 저는 이름을 XAMLlab1이라고 했습니다.

 

 

일단 저희가 먼저 살펴볼 파일은 바로 Package.appxmanifest입니다. 사실 여기를 코드적으로 건드릴 일이 없습니다. 여기의 설정은 거의 마우스클릭으로만 이뤄지기 때문이지요. 하지만 이 부분을 안해준다면 100% Windows Store에 올릴 수 없습니다. 이 부분은 후에 다루기로 하겠습니다. 우선은 Metro Style인 만큼 앱이 외관상으로 드러나는 아이콘이 중요하겠지요.Windows 8에서는 이런 아이콘 모양을 Tile이라고 합니다. 이 타일을 수정해보도록 합니다. 이 부분을 수정하는 부분은 Application UI입니다.

 

여기서는 App의 이름, App의 로고,Splash screen 등을 삽입할 수 있습니다. 앱의 외관을 수정하려면 당연히 로고부분을 수정해야겠지요. 편리하게도 삽입되어야 할 로고의 크기를 지시하고 있습니다.

 

 

위에 나온대로 하자면 로고는 총 3개가 필요한데 이 차이는 무엇일까요? 한번 봅시다.

 

 

위의 이미지가 바로 Logo와 wide Logo의 차이입니다. 보시면 Wide Logo의 폭이 일반 로고에 비해서 두배정도 차이가 나는 것으로 볼 수 있습니다. 그럼 Small Logo는 어디서 찾을 수 있을까요? 답은 바로 시멘틱 줌아웃입니다. 메트로 UI 에서 컨트롤을 누른채 마우스 휠을 내리면 다음과 같이 뜹니다.

 

 

보시면 아시겠지만 일반 로고일때의 모양과 Small 로고일 때의 모양이 차이를 나타내고 있습니다. 그냥 쉽게 말하자면 Windows xp에서의 빠른 실행버튼이라고 보시면 될까요? 이런 모양의 차이로 조금더 사용자에게 편의를 제공할 수 있습니다. 자 그럼 아이콘을 만들어 봅시다. 윈도 키 + Q를 누르시면 바로 검색 모드로 들어갑니다.  거기서 Paint라고 검색하면 그림판을 실행시킬 수 있습니다.

 

 

이제 Logo를 만드려면 Size를 조절해야 합니다. 그림판을 많이 보신 분은 아시겠지만 Resize라는 항목이 있습니다. 여기서 150x150 310x150, 30x30 의 사이즈를 생성하면 됩니다.

 

 

참 안 고쳐지면 위의 Aspect Ratio에 되어 있는 체크를 해제하면 됩니다.  저는 이렇게 만들어봤습니다.

 

 

그렇게 만든 이미지들을 아까 Application UI의 Logo 쪽에 삽입하면 됩니다. 삽입하면 다음과 같이 되겠지요.

 

 

물론 저는 각각의 로고의 크기의 이름을 저런식으로 처리를 했고요.

자 다음으로 확인해볼 부분은 바로 Splash Screen입니다. 원래의 Splash Screen은 그냥 빈 화면입니다. 역시 이것도 만들어서 삽입해봅니다.

 

 

우선 이 이미지의 배경을 기억하셔야 합니다. 뭐든 그렇지만 말입니다. 이 배경색을 맞춰져야 SplashScreen이 호출될때 어색하지 않습니다.

이제 로고의 이름을 표시할 건지를 결정합니다. 그항목도 로고의 삽입부분 바로 밑에 있습니다. 여기서 배경색과 글자의 유형 및 와이드와 일반 로고에도 이 앱의 이름을 띄울 것인지를 결정할 수 있습니다.

 

 

다음은 아까 SplashScreen의 배경색을 기억한 것을 써먹어야 할 차례입니다. 역시 이부분도 SplashScreen 삽입부분 바로 아래 있습니다. 저는 배경이 흰색이니까 이 색을 적용시켜보겠습니다.

 

지금까지 한 내용들을 한번 확인해볼까요?

 

 

 

조금 어색하긴 해도 상황에 따라서 로고의 모양이 다르게 나오는 것을 확인할 수 있습니다. 그리고 참 Small Logo일때도 BackGround색을 흰색으로 하면 적절하겠지요.

간단하게 로고를 삽입하는 것에 대해서 언급해봤습니다.