Documentation

화면 둘러보기

Layerz 편집기의 화면 구성 안내

3 min read

새 프로젝트를 열면 편집기가 나타납니다. 편집기는 크게 왼쪽 패널, 가운데 캔버스, 오른쪽 Inspector 로 이루어집니다.

화면 구성화면 구성

왼쪽 패널

앱을 이루는 요소들을 관리하는 곳입니다.

  1. Project — 프로젝트 전체를 탐색합니다.
  2. UI Library / Component — 화면에 올릴 UI 요소를 고릅니다. 여기서 원하는 컴포넌트를 가운데 캔버스로 Drag and Drop 합니다.
  3. 추가 메뉴 — 새 Page 나 새 커스텀 컴포넌트 를 만듭니다.
  4. Page / Component 목록 — 만들어 둔 모든 Page 와 커스텀 컴포넌트가 표시됩니다. 원하는 것을 선택해 편집합니다.
  5. Outline — 선택한 Page 의 Layer 구조를 트리로 보여 줍니다. 전체 구조를 파악하고 원하는 요소에 빠르게 접근할 수 있습니다.

이 패널에서는 디자인뿐 아니라 앱이 사용할 데이터, API, Action Flow 도 함께 관리합니다.

가운데 캔버스

디자인이 이루어지는 공간입니다. iPhone 크기의 Page 위에 컴포넌트를 배치합니다. 확대/축소와 스크롤로 화면을 자유롭게 탐색할 수 있습니다.

상단 도구 모음에서는 다음을 할 수 있습니다.

  • 디바이스 선택 — Page 의 크기를 iPhone, iPad, 가로/세로로 바꿉니다.
  • 시작 Page 설정 / Preview — 현재 Page 를 앱 시작점으로 지정하거나 즉시 미리보기합니다.
  • 현재 배율 표시

오른쪽 Inspector

선택한 컴포넌트의 속성(위치, 크기, 색상, 폰트 등)을 편집합니다. 자세한 내용은 속성 편집 (Inspector) 를 참고하세요.

iPhone 크기에서 시작하지만, 언제든 디바이스를 바꿔 iPad 나 가로 화면으로 디자인할 수 있습니다.