자신에 대한 고찰

계속된 예제 복습입니다. 이번 포스트에서 다룰 내용은 Button을 StackPanel상에 집어넣어서 애니메이션 효과를 줘보려고 합니다. 우선 애니메이션을 사용하려면 Storyboard를 잘 다룰줄 알아야 합니다.물론 이전 포스트들을 계속 지켜봤다면야 금방할 겁니다. 이번 시간의 주제는 버튼을 눌렀을 때 포인트가 되는 원이 자신이 원하는 방향으로 움직이게끔 하는겁니다. 하나씩 따라해봅시다. 일단 Wpf Applicaiton으로 Animation이란 프로젝트를 하나 생성합니다. 그리고 Grid를 하나 임의로 생성한 후 그 안에 Rectangle과 TextBlock을 하나 삽입해줍니다. 뭐 쉬운 방법으로 Rectangle과 TextBlock을 Grid로 묶는 방법이 되겠지요. Object 창에서는 다음과 같..

6월 30일에 진행되었던 Windows 8 코딩 캠프에 나온 Expression Blend 예제입니다. 한번 예제를 통해서 다시 들어가 보겠습니다. 저번과 마찬가지로 WPF Application으로 KeyPad라는 이름의 프로젝트를 생성합니다. 우선은 휴대폰에서 뜨는 키패드를 만들어보고자 합니다. 그런데 그러기에는 기본 MainWindow가 커보입니다. 그래서 Object 창에서 Window를 선택한 상태에서 크기를 적당히 조절해봅니다. 키패드니까 Height이 큰 방향으로 지정해주면 좋겠지요. 그러고 나서 해당 LayoutRoot안에 Grid를 삽입합니다. 방식은 화면 우측에 보이는 ToolBox내에서 위와 같은 Grid를 선택한 후 더블클릭을 해주면 Object 창에 삽입이 됩니다. 다만 크기가 처음..

지난 포스트에서 동영상을 인코딩하는 방법을 다룬데 이어서 이번에는 블랜드를 활용하여 코드로 이벤트를 만드는 작업을 조금더 보완하고자 합니다. 물론 이번에도 기존의 프로젝트가 있어야 진행이 되기 때문에 다음과 같이 첨부해드립니다. 받으셔서 블랜드로 실행시키면 됩니다. Interaction이라는 게 뭘까요? 제가 생각하기에는 사용자가 어떤 개체에 Action을 가했을 때 그 개체가 상호적으로 나타내는 Action이 아닐까 하는 생각을 해봅니다. 요새 많은 관심을 끌고 있는 UI나 UX의 분야가 바로 이 인터렉션의 상위 개념이고 이런 행동양식을 설계하는 것을 보통 인터렉션 디자인이라고 일컫는 것 같습니다. 아무튼 제일 효과적인 반응은 사용자가 목적으로 하는 개체를 선택했을 때 뭔가 깜빡이고 이동하는 애니메이션..

지난 시간에 다뤘던 Video Player을 더욱 풍성하게 해보는 작업을 하고 있습니다. 우선 첨부 파일을 받고 Expression Blend로 실행시켜주시기 바랍니다. 지금 이렇게 만든 Video는 실제로 돌아갑니다. 동영상 파일만 있다면요. 일단은 프로젝트에 동영상 파일을 하나 넣어봅시다. 프로젝트른 선택한 후 마우스 우클릭을 통해서 기존 파일을 포함시키는 작업을 해봅니다. 동영상 파일이 없으시다고 하는 분은 개인 계정 폴더내의 비디오 폴더를 들어가면 Sample 비디오가 있습니다. 그걸 포함시키면 됩니다. 자 이렇게 포함시켰습니다. 이제는 화면상의 까만 창에 삽입을 해야 되는데 일단 Object and timeline상에서 vPlayer_media를 선택한 후 Project창의 동영상을 마우스 우측..

이번 포스트에서 다룰 내용은 블랜드를 켰을때 가장 좌측에 있는 Object and Timeline의 기능에 대해서 알아보고자 합니다. 지난 시간에 한 내용과 조금 다르니 첨부파일을 여신 후 프로젝트를 실행시키면 되겠습니다. 계속 봐오던 것이지만 User Control이라고 하는 것은 페이지 상에 나타나있는 개체들 전부가 포함된 것을 의미합니다. 그리고 그걸 선택하면 그냥 전체 네모 하나만 선택되는데 이는 지금까지 만든 개체가 하나의 유저컨트롤로 사용될 수 있다는 겁니다. 그래서 다른 웹페이지에서 이런 개체를 불러다가 또 하나의 요소를 쓸 수 있다는 것이지요. 그다음으로 나오는 것이 바로 LayoutRoot인데 이건 하나의 Grid입니다. 그런데 User Control을 둘러싸는 grid라는 점에서 여타의..

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

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

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

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 툴이 생성됩니다. 이 툴을 사용하면 개체를 자유..

어떻게 SketchFlow라는 툴은 정말 계륵같은 존재인 듯합니다. 막상 겉에서 보기에는 좋아보이기는 하는데 실제로 건들여보면 굳이 이런 작업을 해야하나 싶을 정도로 느껴집니다. 하지만 윈도폰용 Sketchflow를 다룰 때도 말씀드렸지만 이 툴은 단순한 개발자의 툴이 아닌 기획자가 직접 그려보면서 앱의 개요을 만들 수 있기 때문에 그런 용도에서는 가장 최적화된 툴이 아닐까 싶네요. 아무튼 인터넷에 이와 관련한 강좌가 있어서 소개해보고자 합니다.우선 보신 분들도 아시겠지만 이 SketchFlow는 Expression Blend에 껴서 설치됩니다. 이번 포스팅에서 다룰 내용은 Silverlight를 활용해서 하나의 프로그램을 만들어보고자 합니다. 우선 Expression Blend를 여시고 지난번 윈폰용 ..