LayerzLAYERZ
Documentation

Layerz App Designer 에 관하여

Layerz App Designer 소개 및 기능 안내

7 min read

소개

Layerz 에 관심을 가지고 이 문서를 보러 와 주셔서 감사합니다.

Layerz 는 앱을 디자인하고 디자인한 그대로 앱으로 만들 수 있는 iPad, iPhone, mac 용 앱입니다.

앱을 디자인할 수 있는 여러가지 방법이 있지만, Layerz 는 다른 디자인 툴들과 다른 방식을 취하고 있습니다.

디자인 툴은 본래 캔버스 위에 자유롭게 드로잉 하는 방법을 제공합니다. 자유로운 툴은 디자이너의 창작의 한계를 두지 않고 자유롭게 무엇이든지 디자인 할 수 있습니다. 하지만 앱 디자인에서는 디자인과 실제 제품 사이의 간극을 만드는 원인이기도 합니다.

자유롭게 그려진 디자인은 개발자에 의해 코드로 옮겨지게 되고, 이 과정에서 구현되지 못하는 부분들이 생겨나며, 결국은 다른 디자인으로 바꿔야 하는 결정의 과정을 거치게 됩니다.

Layerz 에서는 모든 디자인하는 행위가 앱이 실제로 구성되는 것과 동일한 방법으로 디자인하게 되기 때문에, 여러분이 한 디자인은 곧바로 앱이 됩니다.

이를 위해 편집기를 열면 iPhone 크기의 Page 을 볼 수 있고 여기에 원하는 디자인 요소를 Drag and Drop 으로 올려 놓는 방법을 사용하게 됩니다. 이 때 추가되는 디자인 요소들은 Auto Layout, Stack, List 등의 방법으로 Page 이라는 화면 위에 언제나 정돈되어 배치되게 됩니다.

그리고 디자이너가 직접 만든 디자인 뿐만 아니라, 앱으로서 OS 가 제공하는 기본 Component 들을 대부분 사용할 수 있게 했습니다. 여기에는 Label, Button, Toggle 와 같은 기본적인 Component 와 Web View, Map View 같은 조금 더 복잡한 Component 도 있습니다.

Layerz 를 이용하면 실제로 앱이 어떻게 동작하는지 자연스럽게 알게 되고, 빠르게 실용적인 앱 디자인을 할 수 있습니다.

앱 디자인

Layerz 는 OS 에 어울리는 앱 디자인을 가장 빠르고 쉽게 하기 위해서, OS 가 제공하는 Native 한 방법론 및 UI Component 들을 대부분 사용할 수 있습니다.

Page 은 화면에 보여지는 하나의 화면이라고 정의할 수 있습니다.

Layerz 안에서 여러개의 Page 을 만들고 각가의 Page 을 독립적으로 디자인 한 후, Tab Bar, Navigation Push, Modal 등을 이용해서 실제 앱과 동일한 Flow 를 만들 수 있습니다.

이렇게 하면 완벽한 Prototyping 이 가능합니다.

Layerz 가 iPad App 인 이유

Layerz 는 기본적으로 iPad App 입니다. 하지만 iPhone 과 mac 에서 완전히 동일하게 사용할 수 있습니다.

Layerz 가 iOS 를 기준으로 만들어진 이유는 디자인하는 산출물 자체가 iOS 의 Component 들로 이루어졌기 때문입니다. Tab Bar, Navigation Bar, Toggle Switch 등을 포함한 많은 Component 를 그대로 이용해서 디자인을 할 수 있고, iOS 의 버전이 올라감에 따라 Component 들의 디자인이 업그레이드 되면 그 디자인도 그대로 반영이 됩니다.

모든 기능은 iPhone과 mac 에서도 100% 동작합니다.

iPhone 에서는 화면 크기의 제약으로 인해 편집 기능을 이용하기가 조금 불편하겠지만, Preview 를 했을 때는 보통 앱을 실행했을 때와 완벽히 동일한 경험을 할 수 있는 게 강력한 장점입니다.

mac 에서는 보다 넓은 화면에서 마우스를 이용해, 보다 편하게 작업할 수 있습니다. 또한 mac 에서는 Preview 외에 Run 모드를 제공해서, mac 에서 실행되는 Native iOS 앱을 그대로 실행해볼 수 있습니다.

Layerz 로 앱 만들기

Layerz 에서 앱은 세 가지가 한 곳에 모인 것입니다 — 디자인(Design), 데이터(Data), 동작(Behavior). 그리고 빌드 없이 곧바로 실행됩니다.

  • 디자인 — Page 위에 네이티브 UI 컴포넌트를 배치해 화면을 만듭니다.
  • 데이터 — 앱이 다루는 정보를 정의하고 화면에 바인딩합니다. → 왜 데이터인가
  • 동작 — Action Flow 로 "이렇게 하면 이렇게 동작한다" 를 코드 없이 정의합니다. → Action Flow 란
  • 연결 — 실제 API 와 통신해 살아 있는 데이터를 다룹니다. → OpenAPI / Swagger 가져오기