[SketchFlow 따라하기] Adding SketchStyle Controls to Enhance a SketchFlow Layout

4번째 강의인 Adding Sketch Style Controls to Enhance a Layout 입니다. 지난 시간에 사용한 Assets 중에서 Sketch안에 포함되어 있던 SketchStyle을 사용한 디자인입니다. 하나씩 스탭바이스탭으로 따라가보도록 하겠습니다. 이번 프로젝트도 지난 시간에 한 프로젝트를 그대로 따라해도 되지만 역시 바로 실행 할 수 있도록 첨부파일로 올려드립니다. 그걸 푸셔서 Expression Blend로 실행시키면 됩니다.

04.zip

 자 우선 Boards 부분을 열면 다음과 같은 화면이 있습니다.

뭔가 횡하기 때문에 뭔가로 채워보겠습니다. 우리가 쓸 Assets은 SketchStyle 중 Rectangle입니다. 바로 여기 있습니다.

여기서 선택한 후 원하는 위치로 드래그 앤 드롭을 해주면 됩니다. 다음과 같이 구성해보도록 합니다. 

다음으로 삽입해볼 것은 CheckOut 버튼입니다. 이 역시 SketchStyle중에서 Button을 선택해주면 됩니다.

물론 안에 있는 내용물도 더블 클릭해서 위와 같이 수정해줄 수 있습니다. 그런데 단순히 이렇게만 두기는 뭔가가 아쉽습니다. 물론 다른 Assets이나 Control을 삽입할 수 있고요. 이번 첨부파일에 들어있는 프로젝트에는 Control에 관한 Assets 들을 모아놓은 페이지가 따로 있습니다. 바로 SketchStyle_Controls 입니다. 

맵을 통해서 들어오면 위와 같이 Control Assets 들을 확인할 수 있습니다. 그럼 이런 개체들이 실제에선 어떻게 돌아갈까요? 한번 시뮬레이션을 해보면 됩니다. 지금 있는 상태에서 f5키를 누르거나 

위와 같이 프로젝트내에 Run Project를 실행시키면 가상의 시뮬레이션이 뜨게 됩니다. 여기서 좌측 상단의 MAP 버튼을 누르게 되면 메인 스크린에 다음과 같이 뜨게 됩니다.

이 창은 가상의 시뮬레이션이기 때문에 실제로 버튼을 눌렀을 때에 대한 인터렉션을 체험할 수 있습니다. 가령 체크박스를 눌러본다던가 라디오버튼의 활성화된 상태도 직접 체험할 수 있는 겁니다. 

자 이런 Control에 대한 인터렉션을 체험하셨으면 다시 원래의 블랜드로 돌아옵니다. 그리고 Checkout 페이지로 넘어가면 다음과 같은 창이 떠 있을 겁니다.

음 우선 다른 곳과 달리 Zip Code를 입력하는 란과 State 란이 비워져 있네요. 우리는 State란에는 ComboBox를, Zipcode에는 TextBox를 삽입할 겁니다. 한번 삽입해봅시다. 

ZipCode에 대한 TextBox는 삽입하기 쉽습니다. 유의할 점은 TextBox를 삽입할 때 기본으로 삽입되어 있는 문구가 있다는 겁니다. 그 부분을 지워주셔야 위처럼 빈 상태에서 입력을 시작할 수 있습니다. 다음은 ComboBox입니다. 이 역시 SketchStyle에서 삽입할 수 있습니다

그런데 보아하니 ComboBox가 있고 comboBoxItem이 있습니다. 두개의 차이는 무엇일까요?

위의 인터렉션을 보셨을 때도 아시겠지만 ComboBox는 그냥 그 틀만 제공되는 겁니다. 그 안에 Item을 삽입해야 아까와 같은 예제를 체험할 수 있는 겁니다. 뭔가 실감나는 프로토타입을 위해서라면 당연히 Item을 삽입해야 되겠지요?

그럼 문제는 어떻게 해야 ComboBox에 Item을  삽입하냐는 겁니다. 방법은 이렇습니다. 

우선은 comboBox을 삽입하고 마우스 우클릭하면 여러 항목이 있습니다. 

그 중에 사진에 보이는 것처럼 Add ComboBoxItem을 선택해주시면 됩니다.

위와 같이 여러개를 삽입할 수도 있습니다.

(참고로 3개이상 삽입할 경우에는 이 Item 이 위로 정렬되는데 이때는 뒤의 Asset과 겹쳐서 수정이 잘 안됩니다. 이때는 Collapsed 같은 기능을 써서 수정해야 되는데 다음에 언급하겠습니다.)

자 이제 ComboBoxItem도 삽입했으니 한번 f5키를 눌러서 테스트 해봅니다. 다음은 결과 영상입니다.

Item으로 삽입했던 것들이 정상적으로 뜨는 것을 확인할 수 있었습니다.

저번에는 단순히 Asset의 삽입에 대해서만 다뤘었는데 오늘은 Control들을 삽입해보면서 직접 테스트까지 해봤습니다.