안녕하세요, 정진희입니다.
저번에 이어 진행하도록 하겠습니다.
저번시간은 스케치플로우에 하단에 위치하고 있는 Map으로 페이지 및 전체 어플리케이션의 플로우를 만들어보았습니다.
이번 시간에는 사전에 만든 플로우 스케치를 가지고 아트보드에서 각 페이지 구성을 해보도록 하겠습니다.
이번 시간에는 사전에 만든 플로우 스케치를 가지고 아트보드에서 각 페이지 구성을 해보도록 하겠습니다.
임의로 어플리케이션의 플로우 및 구조를 생각해보고 시작해볼텐데요.
자신이 만들 어플리케이션이 어떤 순서로 진행될 것인지 아이디어를 직접 스케치를 합니다.
러프하게 그린 스케치를 보시면
로그인 화면에서 시작 -> Main -> Sub 1/2/3/4가 있고 Sub4를 클릭하면 로그인 페이지로 다시 돌아가는 맵입니다.
이것을 바탕으로 스케치 플로우를 제작해 보겠는데요.
저번시간에 이미 맵 패널에서 만들어 보았기 때문에 맵은 다 그리실 수 있으실 거라 생각합니다.
1) 그래서 다음과 같이 먼저 구조적인 뼈대를 잡았습니다. 스케치에서 그린 것과 동일하게 느껴지실 겁니다.
2) 여기서 공통적으로 들어가는 로고를 첨부해 보도록 할텐데요.
저번시간과 마찬가지로 컴포넌트 스크린을 삽입한 것과 같이 삽입해보도록 하겠습니다.
이와 같은 방법으로 다른 페이지에도 똑같이 적용시켜줍니다.
다음과 같이 적용이 되었습니다. 보기엔 조금 거추장? 스럽게 되었지만, 이제 각 페이지에 로고를 하나하나 만들 필요없게
되고 컴포넌트 파일만 수정하면 전체 적용이 될 것입니다. 한번 로고 컴포넌트 스크린을 꾸며보도록 하겠습니다.
3) 맵의 로고를 더블클릭하면 화면이 나타나게 됩니다.
화면에 로고의 글씨를 써보도록 하겠습니다. 스케치플로우에서 제공하는 컨트롤 스타일을 써보도록 하겠습니다.
Assets 탭에서 스케치플로우 선택 -> 스타일에서 BasicTextBlock을 선택하여, 아트보드위에 드래그 해 놓습니다.
4) Logo 스크린 화면에 임의로 로고 명과 컴포넌트의 Height값을 100 width : Auto, 그리드 색을 Black으로 주었습니다.
저장해서 다시 빌드해 보시면 로그인 페이지에 이렇게 뜰텐데요.
아까 연결한 나머지 페이지들 Main 및 Sub 페이지에도 다음과 같은 화면으로 동일하게 구성되어 있는 것을 보실 수 있습니다.
이 컴포넌트의 정렬을 좌우정렬 stretch로 적용합니다.
5) 로그인 페이지를 열어서 화면을 구성하도록 하겠습니다.
로그인페이지를 더블클릭하셔서 오픈하신 후 Asset 패널에서 자신이 사용하고자 하는 컨트롤들을 가져다 씁니다.
6) 이렇게 스케치 플로우에서 제공하는 컨트롤들을 가지고 만들어보았습니다.
마찬가지로 Assets에 있는 컨트롤로 메인페이지와 Sub페이지를 만들어줍니다.
화면에 그려주는 컨트롤들은 다 제공되기 때문에 가져다 쓰실 일 외에는 힘들일 필요 없이 이렇게 쓰실 수 있습니다.
구조적인 것을 생각하고 나면 그리는 데에는 시간이 별로 걸리지 않는 것 같습니다.
다음강좌에서 진행하도록 하겠습니다.
