자신에 대한 고찰

지난 포스트에 이어서 또 블랜드로 작업을 합니다. 계속 그 프로젝트로 진행하면 될것 같고 이번에 할 내용은 Blend상에서 배경의 색상에 그레디언트를 주는 방법을 해보고자 합니다. 전에는 Expression Design에서 했었지요? 그걸 블랜드상에서도 할수 있다는 겁니다. 자 일단은 프로젝트로 들어가보겠습니다. 그러고나서 LayoutRoot바로 아래에 있는 Rectangle을 잡게 되면 전체 플레이어의 배경이 잡히게 됩니다. 이 배경색을 수정하려면 다들 아시겠지면 Properties의 Brush를 수정해야 합니다. 여러가지 항목이 있습니다만 가장 외관상으로 잘 드러나는 것이 바로 Fill과 Stroke입니다. 디자인에서도 이야기했었지만 Fill은 그 개체의 안을 채우는 색, 그리고 Stroke는 테두리..

자 오랜만에 다시 블로그를 시작합니다. 이번시간에 다룬 내용은 Expression Blend를 이용해서 Layout Container를 사용하는 겁니다. Layout이라는 개념은 매우 중요합니다. 사람이 프로그램을 실행하면 가장 처음으로 접하는 것이 메뉴 UI와 그 바닥에 깔려있는 Layout이 되겠지요. 그래서 디자이너가 이런 개발을 함에 있어서도 중요한 역할을 차지하는 것이지요. 우선은 지난시간에 만든 Panel이 필요하는데 이는 첨부해드리겠습니다. 첨부된 파일중 폴더에 있는 Solution을 Expression Blend를 통해서 열면 다음과 같은 창이 뜨게 됩니다. 여기다가 이제 Layout을 구성하고자 합니다. 참고로 디자인을 하기 위해서는 전체 윈도우를 Design으로 해주는 것이 좋겠지요. ..

다음 내용은 지난 번에 만든 로고에 컬러와 효과를 주는 내용입니다. 화면에 나와있는 개체들은 Layer에서도 확인가능하다시피 각각 따로 나눠진 개체입니다. 그중 가장자리에 있는 두개의 날개의 색깔을 같이 바꾸려면 shift로 선택해서 properties의 색상을 바꿔주면 되지요. Stroke도 같이 바꿔주면 됩니다. 재미있는건 개체가 선택되어 있는 상태에서 shift+x를 누르게 되면 색상이 뒤바뀌게 됩니다. 이 상태에서 d 키를 누르면 다시 원래대로 돌아옵니다. 즉 default 상태로 돌아오게 되는 것이지요. 다음으로 해볼 것은 내부 원의 배경을 정하는 것인데 일단 내부 원을 잡은 다음 역시 색상파트를 보면 화살표가 있습니다. 그걸 펼치면 다음과 같은 창이 뜹니다. 여기서 다양한 질감을 고를 수 있게..

이번 시간에 다뤄볼 내용은 지난 포스트에서 언급했던 블랜드와 달리 전문적인 그래픽 처리 툴인 디자인에 관해서 언급해보고자 합니다. 단순하게 블랜드를 이용하면 기존의 Visual Studio보다는 화려하게 꾸밀 수 있지만 블랜드만 가지고는 당연히 앱을 만들 수 없습니다. 분명 그것을 구성할 개체가 필요한 것이고 사람들은 이 개체를 만들기 위해서 포토샵이나 일러스트레이트를 사용하는 거죠. 어떻게보면 Expression Design도 이런 툴 중 하나로 보시면 됩니다. 그래서 이번 포스트에선 블랜드에서 쓸 개체를 만드는 것이 주 목적이 될 것입니다. 물론 내용이 간단합니다. 그리고 형식이 포토샵과 유사하기 때문에 헷갈릴것 같지 않네요. 아무튼 자세한 건 동영상을 참고하시면 되고 지금 동영상은 Expressio..

이 분이 SketchFlow 강좌를 하신 분인데 오래전부터 Expression Blend에 대한 강의를 해오셨더군요. 사실 원래 있던 곳의 동영상 링크가 깨져있어서 이번 기회에 제 블로그에 다시 포스팅을 해보고자 합니다. 물론 이 동영상은 Expression Blend 2를 기반으로 되어 있지만 Expression Blend 4에서도 쓸 수 있을만한 자료라 여겨지네요. 사실 xaml은 Extensible Application Markup Language 의 약자로서 MS에서 만든 언어입니다. 실버라이트와 WPF에 대응해서 뭔가 시각적으로 표현하는데 있어서 도움을 주는 걸로 간단히 아실 수 있습니다. 제가 블로그에서 다루는 거의 모든 파트( 윈도우폰, 키넥트, 윈도우8, 블랜드..) 에서는 이 xaml이란..

드디어 SketchFlow 강의의 마지막입니다. 이번 시간에는 지금까지 만든 프로젝트를 외부파일로 빼는 방법에 대해서 알아보고자 합니다. 물론 이렇게 해야 외부 클라이언트한테 앱의 프로토타입을 보여주겠지요. 파일 크기가 큽니다. 이 프로젝트를 패키징이라는 과정을 거쳐야 어디서든 SketchFlow Player가 실행되면서 확인해볼 수 있는 것이지요. 이 메뉴를 통해서 Packaging을 수행하게 됩니다. 어디다가 저장할 건지를 묻는데 이 폴더를 확인해보면 다음과 같은 파일이 생성됩니다. 이 파일들이 의미하는 것이 무엇일까요? 바로 TestPage를 실행시켜보겠습니다. 우리가 Run Project를 통해서 실행시킨 결과와 동일한 창이 생성됩니다. 물론 네비게이션 맵도 형성되어 있고 각각의 스크린에 대한 피..

이제 거진 SketchFlow에서 다뤄볼만한 기능에 대해서 거의 다뤄봤습니다. 이번시간에 할 내용은 여러 사람이 협업을 할 경우 주고 받을 수 있는 피드백에 대해서 알아보도록 하겠습니다. 역시 샘플 파일을 첨부했으니 이걸로 실행시키면 됩니다. 자 이제 거의 모든 기능을 구현했으니 Player를 통해서 실행시킬 차례입니다. 클라이언트한테는 이 실행파일을 보여주면 될겁니다. 그런데 사람이란 항상 완벽할 수 없습니다. 어딘가에는 오류나 오타가 존재하고 이를 수정하기 위한 과정 중 하나로 피드백을 주고 받고는 합니다. 일단 f5키를 눌러서 실행하고 CheckOut Screen으로 넘어갑니다. 그런데 다른 사람이 보기에는 중간의 Shopping Cart가 너무 횡한 것 같습니다. 그래서 피드백을 주기위해서는 좌측..

이번 포스팅에서 다뤄볼 내용은 바로 샘플 데이터를 삽입하는 것입니다. 그냥 단순하게 프로토타입의 틀만 있는 것은 단순하니까 뭔가의 샘플 데이터를 삽입함으로써 조금더 풍부하게끔 보이게 하는 것이죠. 처음 뜨는 메인 화면에서 Board Screen을 선택해줍니다. 이번에 할 건은 가운데 왼쪽에 보이는 all Terrain에 스노우 보드 이미지를 삽입하는 겁니다. 지금 상태에서는 그 위치에 SketchRectangle이 들어가 있는데 다른 걸 넣어야 합니다. 그러니까 지금 보이는 개체는 없애줍니다. 이번에 새로넣어줘야 할 개체는 이겁니다. 우선 Assets에서 Style로 들어가면 SketchStyle에 ListBox라는 항목이 있습니다. 이걸 아까 지웠던 항목에 삽입해줍니다. 겉보기에는 아까의 SketchR..

간만에 올리는 포스팅입니다. 그냥 동방에 앉아있느니 이렇게라도 하면 시간이 잘 갈 것 같습니다. 이번 과정에서 해보고자 하는 것은 사용자의 행동에 따라서 어플이 변화하는 과정을 구현해보려고 합니다. 역시 지난 포스팅과 마찬가지로 첨부파일의 프로젝트를 하나씩 따라해보겠습니다. 우선 Boot Screen으로 들어가면 지난 시간에 구현했던 애니메이션이 나와있습니다. 이제 다음 동작은 물건이 들어있을 때 Check Out 버튼을 누르면 ReviewCart Screen으로 이동하는 것이겠지요. Checkout 버튼을 선택하면 Navigate To 라는 항목이 있습니다. 여기서 자신이 원하는 페이지를 선택하면 됩니다. 이 예제같은 경우는 ReviewCart이겠지요. 그럼 ReviewCart 로 넘어가서 Back버튼..

Expression Blend의 중요 기능 중 하나인 애니메이션을 이용해서 SketchFlow를 꾸면보는 시간을 가지겠습니다. 역시 첨부파일을 통해서 제공되고 이걸 Expression Blend로 여시면 되겠습니다. 자 Boots 페이지로 가면 전에 있는 페이지에 여러 부츠들이 놓여져 있는 것을 확인할 수 있습니다. 여기다가 애니메이션 효과를 삽입하기 위해서는 Window 항목에 있는 Sketchflow Animation이란 것을 활성화시켜야 합니다. 사실 이 항목을 켜면 디자인 뷰 위에 새로운 창이 활성화됩니다. 사실 Expression Blend라는 툴이 조금은 넓은 모니터 환경을 요구합니다. 물론 작은 모니터에서도 쓸 수 있지만 불편합니다. 되도록이면 데스크탑에서 넓은 화면에서 작업하시는 것을 추천..

이번 포스팅에서 해볼 일은 시각적으로 State에 따른 상황 변화를 줄 예정입니다. 이전과 마찬가지 첨부파일을 열고 Expression Blend로 열어봅시다. 자 우선 Flowmap 상의 LiveChat을 지난 시간에 링크를 건 것처럼 Bindings 창에 드래그를 해봅시다 그럼 당연히 Bindings 페이지 상에도 LiveChat Component가 생성될 겁니다. 그런데 생각을 해보면 항상 LiveChat 창이 떠 있어야 하는걸까요? 좀만 생각해봅시다. 상담원이 24시간 있는 것도 아닐거고 그리고 항상 떠 있는 것보다는 필요한 사람한테만 뜨는 건 어떨까요? 그래서 등장하는 개념이 바로 State입니다. 이 개념은 Expression 상에서도 Window - State 창을 통해서 확인할 수 있습니다..

다음 내용은 Navigation 기능을 삽입하는 겁니다. 역시 첨부파일을 통해서 따라가보도록 하겠습니다. 우선 Boards 페이지로 넘어가면 여러가지 버튼들이 있습니다. 이 중에서 CheckOut 버튼을 활성화시켜보겠습니다. 이 버튼을 선택한 후 마우스 우클릭으로 들어가면 맨 마지막에 Navigate To 항목이 있습니다. 당연히 Checkout 버튼을 누르면 checkcout 페이지로 넘어가야겠지요. 그걸 선택해줍니다. 이 메뉴에서는 Map상에 떠 있는 모든 페이지의 종류가 나타납니다. 만약 연결이 안되있는 페이지라도 이 페이지를 통해서 Navigate를 시켜주면 자동으로 선이 형성됩니다. 자 이제는 반대로 Check out 페이지로 갑니다. 지금 보이는 창에서는 버튼이 제대로 동작하는지는 확인할 수 ..

지난 포스팅에 이어서 4번째 내용입니다. 지난 시간과 마찬가지로 첨부파일을 통해서 계속 진행해보도록 하겠습니다. 처음보면 이런창으로 되어 있는데 이번 시간에 다룰 Component 개념을 설명하기 위해서 window에서 새로운 것을 삽입해야합니다. 바로 Object and timeline 창입니다. 상단 메뉴바에서 해당란을 선택해주시면 좌측하단에 다음과 같이 창이 삽입됩니다. Expression Blend에서 이 Objects and Timeline 창은 중요한 역할을 합니다. 물론 이미지를 변경시키거나 꾸미는 것은 아니지만 적어도 창의 배치를 어떻게 할지는 결정할 수 있습니다. 그리고 무엇보다도 애니메이션을 삽입할 수 있다는 게 큰 특징이지요. 사실 위의 Welcome 페이지에선 지난 시간에 배경을 삽..

4번째 강의인 Adding Sketch Style Controls to Enhance a Layout 입니다. 지난 시간에 사용한 Assets 중에서 Sketch안에 포함되어 있던 SketchStyle을 사용한 디자인입니다. 하나씩 스탭바이스탭으로 따라가보도록 하겠습니다. 이번 프로젝트도 지난 시간에 한 프로젝트를 그대로 따라해도 되지만 역시 바로 실행 할 수 있도록 첨부파일로 올려드립니다. 그걸 푸셔서 Expression Blend로 실행시키면 됩니다. 자 우선 Boards 부분을 열면 다음과 같은 화면이 있습니다. 뭔가 횡하기 때문에 뭔가로 채워보겠습니다. 우리가 쓸 Assets은 SketchStyle 중 Rectangle입니다. 바로 여기 있습니다. 여기서 선택한 후 원하는 위치로 드래그 앤 드롭을..

이번 포스팅에서는 Sketchflow를 통해서 기본적인 Layout을 잡는 작업에 대해서 언급해보도록 하겠습니다. 물론 이전 프로젝트를 계속 가져와서 사용해도 되겠지만 귀찮으므로 첨부파일을 풀어서 Expression Blend로 실행해보도록 하겠습니다. 딱 flow map이 보이는데 가장 처음에 있는 Start 스크린을 열어보면 참 횡합니다. 그래서 여기를 채워주도록 하겠습니다. 이 프로젝트 자체가 Snowboard 이기 때문에 여기는 산을 하나 그려줍니다. 자 개체를 그리기 위해서는 Pencil 툴을 사용해야 합니다. 그런데 툴바에 보면 Pen 툴밖에 없습니다. 어떻게 해야 될까요? 이때는 Pen 툴을 선택한 후 마우스로 홀드를 하면 안보이던 Pencil 툴이 생성됩니다. 이 툴을 사용하면 개체를 자유..