Page 와 캔버스
화면의 단위인 Page 와 디자인 공간
3 min read
Page 는 사용자에게 보여지는 하나의 화면이며, Layerz 에서 디자인의 기본 단위입니다. 앱은 여러 개의 Page 로 이루어지고, 각 Page 를 독립적으로 디자인한 뒤 서로 연결해 하나의 앱을 완성합니다.
Page 만들기
왼쪽 패널의 추가 메뉴에서 새 Page 를 만듭니다.
- Add Empty Page — 빈 Page
- Add List Page — List 가 준비된 Page
만든 Page 는 왼쪽 패널의 목록에 나타나고, 선택하면 가운데 캔버스에서 편집할 수 있습니다.
캔버스
캔버스는 Page 를 디자인하는 공간입니다. iPhone 크기의 Page 위에 UI Library 에서 컴포넌트를 끌어다 놓아 화면을 구성합니다. 확대/축소와 스크롤로 자유롭게 이동할 수 있고, 상단 도구 모음에서 디바이스(iPhone/iPad, 가로/세로)를 바꿀 수 있습니다.
Navigation Bar 설정
모든 Page 의 가장 바닥에는 Page 자체가 있고, 여기서 Navigation Bar 를 설정합니다. Page 를 선택하고 Inspector 를 보면 다음을 설정할 수 있습니다.
- Navigation Bar 표시 여부 (새 Page 는 기본적으로 켜져 있습니다)
- Title Text (지정하지 않으면 Page 의 Title 이 자동으로 사용됩니다)
- Large Title 표시 여부
- Appearance — Default / Blurred / Opaque / Transparent
- Tint Color
Navigation Bar 를 표시하면 그 위에 올릴 메뉴 버튼(Right Items / Left Items)을 설정할 수 있습니다. 각 메뉴의 모양을 정하고 이벤트를 연결하거나 하위 메뉴를 만들 수 있습니다.
여러 Page 를 만든 뒤 Action Flow 의 화면 이동이나 Tab Bar로 연결하면 실제 앱과 같은 흐름을 만들 수 있습니다.