자신에 대한 고찰

한창 윈도폰 공부를 할때 프로토타입을 만든다고 해서 많이 썼던 내용이 바로 이 Blend & SketchFlow인데, 이번 Windows 8이 나오면서 같이 Release되었습니다.Preview 버전으로 8/15에 공개되었고( 그러고보니까 VS 2012와 같이 공개되었네요.) 기존에 나왔던 플랫폼과 대응됩니다. 한번 보시죠. 당연히 Windows store app을 개발하기 위해서는 기존의 VS 2010이 아닌 VS2012에서 지원할 것이고 나머지는 기존 Blend 4에서도 작업할 수 있는 것을 동일하게 Sketchflow에서도 처리할 수 있게 되었습니다. 참고로 이번 Preview 버전은 2013년 7월까지 사용할 수 있기 때문에 한번쯤 궁금하신 분은 써보셔도 좋을 거 같습니다.( 물론 Preview ..

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

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

자 이제 마지막입니다. 물론 항상 말했던 것이지만 이내용과 소스는 http://www.microsoft.com/design/toolbox/tutorials/using-sketchflow/part5/default.aspx 에서 받을 수 있으며 영어를 동반한 동영상 데모도 있으니 참고하시기 바랍니다. 이번 시간에 할 내용은 ListBox를 형성하고 그에 대한 애니메이션과 트리거를 설계하는 겁니다. 말은 어렵게 했지만 실제 원문에서도 볼 수 있는 것처럼 3페이지만에 끝나는 내용입니다. 지금 디자인뷰에 떠 있는 TopPicks 부분을 펼치면 알겠지만 안의 내용물들이 ListBox로 되어 있습니다. 이제 이 ListBox에 대한 State를 형성해보도록 하겠습니다. 우선 State창에서 새로운 State를 형성합..

역시 예제 파일은 있습니다. 지난 시간에는 결과물도 포함되어 있었지만 이번에는 실습 준비물만 있습니다. 이번 시간에 할 내용은 일러스트레이트에서 파일을 importing하고 transition을 사용해서 애니메이션 생성하는 것을 주로 다뤄보고자 합니다. 우선 프로젝트를 연 후 기존에 Sketchflow map에 형성해 두었던 것중 안썼던 AdvSearch를 선택합니다.그리고 Assets에서 Pivot control을 찾아서 거기에 삽입합니다. 아마 예제 파일은 여기까지 되어 있는 것 같습니다. 그 Pivot을 열면 여러가지 PivotItem들이 들어있는데 그중에 우리는 RecipePivotItem에 추가를 시켜야 합니다. 그런데 일전에 Panorama를 할때도 이야기 했었지만 앞의 개체가 보여지는 한 다..

지난 시간에 이어서 이번에도 예제파일이 있습니다. 물론 원문은 http://www.microsoft.com/design/toolbox/tutorials/using-sketchflow/part3/ 이고 역시 첨부 파일을 다운로드 받을 수 있습니다. 이번 시간에 할 건 이미지를 삽입하는 방법, Transform을 사용한 개체 변형, 데이터를 삽입하는 곳의 디자인을 변경하는 일을 해보고자 합니다. 우선 압축을 푸시고 Lesson3_Start 관련 프로젝트를 블랜드로 열어주시기 바랍니다. 지난 시간에 TopPicksPanoItem까지 했으니 이번에는 세번째 페이지인 FavoritePanoItem을 채울 차례입니다. 이제 Data창을 여시면 전에는 삽입하지 않았던 샘플 데이터들이 들어가 있습니다. 여기서 우리가 ..