Documentation

Screen 과 캔버스

화면의 단위인 Screen 과 디자인 공간

3 min read

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

Screen 만들기

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

  • Add Empty Screen — 빈 Screen
  • Add List ScreenList 가 준비된 Screen

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

캔버스

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

모든 Screen 의 가장 바닥에는 Screen 자체가 있고, 여기서 Navigation Bar 를 설정합니다. Screen 을 선택하고 Inspector 를 보면 다음을 설정할 수 있습니다.

  • Navigation Bar 표시 여부 (새 Screen 은 기본적으로 켜져 있습니다)
  • Title Text (지정하지 않으면 Screen 의 Title 이 자동으로 사용됩니다)
  • Large Title 표시 여부
  • Appearance — Default / Blurred / Opaque / Transparent
  • Tint Color

Navigation Bar 를 표시하면 그 위에 올릴 메뉴 버튼(Right Items / Left Items)을 설정할 수 있습니다. 각 메뉴의 모양을 정하고 이벤트를 연결하거나 하위 메뉴를 만들 수 있습니다.

여러 Screen 을 만든 뒤 Action Flow 의 화면 이동이나 Tab Bar로 연결하면 실제 앱과 같은 흐름을 만들 수 있습니다.