Documentation

Page 와 캔버스

화면의 단위인 Page 와 디자인 공간

3 min read

Page 는 사용자에게 보여지는 하나의 화면이며, Layerz 에서 디자인의 기본 단위입니다. 앱은 여러 개의 Page 로 이루어지고, 각 Page 를 독립적으로 디자인한 뒤 서로 연결해 하나의 앱을 완성합니다.

Page 만들기

왼쪽 패널의 추가 메뉴에서 새 Page 를 만듭니다.

  • Add Empty Page — 빈 Page
  • Add List PageList 가 준비된 Page

만든 Page 는 왼쪽 패널의 목록에 나타나고, 선택하면 가운데 캔버스에서 편집할 수 있습니다.

캔버스

캔버스는 Page 를 디자인하는 공간입니다. iPhone 크기의 Page 위에 UI Library 에서 컴포넌트를 끌어다 놓아 화면을 구성합니다. 확대/축소와 스크롤로 자유롭게 이동할 수 있고, 상단 도구 모음에서 디바이스(iPhone/iPad, 가로/세로)를 바꿀 수 있습니다.

모든 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로 연결하면 실제 앱과 같은 흐름을 만들 수 있습니다.