화면 둘러보기
Layerz 편집기의 화면 구성 안내
3 min read
새 프로젝트를 열면 편집기가 나타납니다. 편집기는 크게 왼쪽 패널, 가운데 캔버스, 오른쪽 Inspector 로 이루어집니다.
화면 구성왼쪽 패널
앱을 이루는 요소들을 관리하는 곳입니다.
- Project — 프로젝트 전체를 탐색합니다.
- UI Library / Component — 화면에 올릴 UI 요소를 고릅니다. 여기서 원하는 컴포넌트를 가운데 캔버스로 Drag and Drop 합니다.
- 추가 메뉴 — 새 Page 나 새 커스텀 컴포넌트 를 만듭니다.
- Page / Component 목록 — 만들어 둔 모든 Page 와 커스텀 컴포넌트가 표시됩니다. 원하는 것을 선택해 편집합니다.
- Outline — 선택한 Page 의 Layer 구조를 트리로 보여 줍니다. 전체 구조를 파악하고 원하는 요소에 빠르게 접근할 수 있습니다.
이 패널에서는 디자인뿐 아니라 앱이 사용할 데이터, API, Action Flow 도 함께 관리합니다.
가운데 캔버스
디자인이 이루어지는 공간입니다. iPhone 크기의 Page 위에 컴포넌트를 배치합니다. 확대/축소와 스크롤로 화면을 자유롭게 탐색할 수 있습니다.
상단 도구 모음에서는 다음을 할 수 있습니다.
- 디바이스 선택 — Page 의 크기를 iPhone, iPad, 가로/세로로 바꿉니다.
- 시작 Page 설정 / Preview — 현재 Page 를 앱 시작점으로 지정하거나 즉시 미리보기합니다.
- 현재 배율 표시
오른쪽 Inspector
선택한 컴포넌트의 속성(위치, 크기, 색상, 폰트 등)을 편집합니다. 자세한 내용은 속성 편집 (Inspector) 를 참고하세요.
iPhone 크기에서 시작하지만, 언제든 디바이스를 바꿔 iPad 나 가로 화면으로 디자인할 수 있습니다.