[SketchFlow 따라하기] Building a Basic Layout

이번 포스팅에서는 Sketchflow를 통해서 기본적인 Layout을 잡는 작업에 대해서 언급해보도록 하겠습니다. 물론 이전 프로젝트를 계속 가져와서 사용해도 되겠지만 귀찮으므로 첨부파일을 풀어서 Expression Blend로 실행해보도록 하겠습니다.

03.zip

딱 flow map이 보이는데 가장 처음에 있는 Start 스크린을 열어보면 참 횡합니다. 그래서 여기를 채워주도록 하겠습니다. 이 프로젝트 자체가 Snowboard 이기 때문에 여기는 산을 하나 그려줍니다. 

자 개체를 그리기 위해서는 Pencil 툴을 사용해야 합니다. 그런데 툴바에 보면 Pen 툴밖에 없습니다. 어떻게 해야 될까요?

이때는 Pen 툴을 선택한 후 마우스로 홀드를 하면 안보이던 Pencil 툴이 생성됩니다.

이 툴을 사용하면 개체를 자유롭게 그릴 수 있습니다. 와콤같은 타블렛 디지타이져가 있다면 조금더 효과적인 표현이 가능하겠지요. 마우스만 가지고는 누른 상태로 그려주면 됩니다. 

그림이 생각보다 잘 안 그려지네요. 뭐 아무튼 이렇게 그리고 이제 타이틀을 붙여야 합니다. 타이틀을 붙이기 위해서는 물론 일반 Assets에서 TextBox를 불러와도 되지만 글자배치를 가운데모임으로 정확하게 정해주는 개체가 있습니다. 바로 TitleCenter-Stretch입니다. 그건 다음 위치에서 찾을 수 있습니다. 

Asset에서 여러가지 항목중에 중간에 Style이라는 항목이 있습니다. 거기서 세부항목인 SketchStyle이라는 곳을 들어가면 맨 밑에 원하는 개체가 존재합니다. 

이걸 더블클릭해주면 자동으로 타이틀이 생성됩니다. 하지만 가운데에 생성되지는 않지요. 이걸 Selection 툴을 사용해서 옮겨줍니다. 단축키로는 V이지요. 

그런데 보면 저렇게 Titlebox가 폭이 정해져 있어서 계속 글자가 내려갑니다. 그렇기 때문에 가장자리에 있는 크기 조절 버튼으로 적절히 수정해줍니다. 물론 이때도 selection tool을 쓰면 편리합니다. 

이런 식으로 그림도 그릴 수 있는 것이 바로 Sketchflow입니다. 여기다가 Note Sketch라는 Assets을 삽입하면 진짜 메모지처럼 화면에 삽입되기도 합니다. 물론 이건 피드백을 줄 경우에 이렇게 줄 수도 있는 것이겠지요.

이런식으로 가능하다는 것이지요. 

이번에는 Welcome 페이지에 그림을 삽입하는 방법을 알아보겠습니다. flowmap에서 Welcome 페이지로 전환되면 역시 횡합니다. 여기에 그림을 삽입하려면 다음과 같이 하면 됩니다. 물론 지금 올라와 있는 페이지는 Welcome 페이지이여야 합니다. 

그림 파일은 아까 첨부파일속에 같이 있습니다. 그중 bg_Welcome이라는 파일을 추가시켜 봅니다. 

이렇게 미리보기도 지원이 됩니다. 이걸 백그라운드로 쓰기 위해서는 그대로 선택한 후 페이지에 놓아주면 됩니다. 

그런데 생각해보니까 아까 welcome이라는 문구가 있었는데 이렇게 배경이미지로 쓰면서 사라졌습니다. 그 이유는 바로 이런 개체가 Stack의 형식으로 쌓이기 때문입니다. 간단하게 말하자면 층층이 쌓인다는 거지요. 결국 이걸 해결하기 위해서는 밑에 깔려있는 Welcome이란 TitleCenter를 위로 올려야 합니다. 아니면 배경이미지를 맨 아래로 내리던가요. 저는 후자의 방법을 해보겠습니다. 이미지를 선택한 상태에서 마우스 우클릭을 하면 Order라는 항목이 있습니다. 

여기에 다양한 항목이 있습니다. 여러분 파워포인트에서도 맨앞으로 빼기 맨뒤로 빼기 기능이 있으신건 아시죠? 그런 개념입니다. 여기서 맨마지막 항목을 선택해주면 배경이미지가 제일 마지막으로 깔리게 됩니다.

물론 지금은 개체가 두개이기 때문에 이렇게 성립하는 겁니다. 만약 여러개의 개체가 중첩되어 있다면 이런 과정을 반복해줘야 하겠지요.

이제 다음으로 설명할 개념은 snap과 gridline 입니다. 이 항목은 메인 화면의 좌측 하단에 있습니다.

지금과 같은 상황이 바로 snap grid를 켠 상태입니다. 일명 눈금자라고 하지요. 보통 디자인을 할 때에는 이렇게 눈금을 줘서 정밀하게 위치를 수정할 수 있습니다. 개체의 이동을 이 격자무늬에 맞춰서 이동하고 싶으면 그 옆의 snapping to gridline 기능을 켜시면 됩니다.

참고로 grid의 간격을 수정할 수도 있습니다. Tools - option - Artboard를 들어가시면 각각의 spacing을 조절할 수 있지요.

자 한번 snapping to gridline을 테스트 해보기 위해서 하나의 개체를 삽입해봅니다. 그리고 이동시켜보면 뭔가가 딱딱 맞게 이동하는 것을 확인할 수 있을 겁니다. 우선은 SketchStyle 속에 Rectangle을 삽입합니다. 그리고 그 안에 Button 개체를 네개 삽입합니다.

참고로 같은 개체를 복제할 때 단축키는 Alt 입니다. 보통 다른 파일 이동시에 복제는 ctrl을 누르고 했었지만 Blend에서는 alt를 누른 상태에서 드래그를 해야 복제됩니다. 이걸 이용하면 같은 개체를 손쉽게 이동시킬 수 있지요.

자 위와 같이 버튼을 네개 삽입했습니다. 물론 snapping to gridline을 활성화 시켰을때는 위와 같은 현상이 발생하지 않겠지만 아니라면 위와 같이 배열이 안된 상태가 나타날 수 있습니다. 이때 일일이 위치를 수정할 것이 아니라 키가 있습니다. 

우선 하나의 버튼을 누른 상태에서 shift를 동시에 누르고 정렬해주고자 하는 개체를 선택하면 다음과 같이 그룹처럼 지어집니다. 

이상태에서 상단 메뉴중 object- align을 선택해주면 배열을 어떤 식을 하겠냐는 항목이 세밀하게 나와있습니다. 여기서 Bottom Edge를 선택해주면 기준은 아래가 되겠지요.

지금 상태는 버튼이 그룹처럼 인식되었기 때문에 화살표키를 통해서 자유롭게 이동시킬 수 있습니다. 

참고로 버튼안의 내용물은 버튼을 더블클릭하면서 수정할 수 있습니다. 예제에서는 다음과 같이 수정했네요.

마지막으로 아까 켜놓았던 gridline을 끄면 

보기에도 깔끔한 네비게이션 바가 생성되었네요. 여기까지가 기본적인 Layout을 만들면서 Sketchflow의 기능을 다뤄봤습니다.