LayerzLAYERZ
Documentation

Layerz App Designer 에 관하여

Layerz App Designer 소개 및 기능 안내

8 min read

소개

Layerz App Designer 에 관심을 가지고 이 문서를 보러 와 주셔서 감사합니다. 앞으로 이 문서에서는 Layerz App Designer 라는 말 대신에 Layerz 라고 부르도록 하겠습니다.

Layerz 는 앱을 디자인하기 위한 앱입니다.

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

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

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

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

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

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

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

앱 디자인

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

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

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

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

Layerz 가 iPad App 인 이유

Layerz 는 iPad App 입니다. 네, 알고 있습니다. 최대의 생산성을 위해서는 Desktop 에서 사용할 수 있는 솔루션이 반드시 필요합니다. 그래서 Mac App 도 준비하고 있습니다.

하지만 Layerz 는 iOS 의 UI Component 를 그대로 사용해서, 당신이 디자인한 그대로 완벽히 앱으로서 동작함을 보여주기 위해, 편집기로서의 생산성과, 그 산출물인 앱으로서의 실행을 완벽하게 지원하기 위해서, 먼저 iPad 버전을 만들었습니다.

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

기능 목록

  • Scene Edit
    • 화면 단위의 디자인을 제공합니다. 모든 디자인 요소는 기능적으로 유기적으로 연결됩니다.
  • List Edit
    • 가장 많이 사용하게 될 디자인 요소는 정보를 리스트로 만들어 배치하는 일입니다. 하나의 스크롤 안에 각자 다른 레이아웃을 가지는 여러개의 섹션을 배치해서 디자인 할 수 있습니다.
  • Stack Edit
    • 디자인 요소들을 Auto Layout 을 이용하여 개별적으로 배치할 수도 있지만, Stack 을 이용하면 좀 더 구조화된 레이아웃을 만들 수 있습니다.
  • UI Component
    • OS 가 제공하는 UI Component 를 그대로 사용할 수 있습니다.
    • 지원하는 요소는 다음과 같습니다.
      • Image, Blur View, Label, Button, Text Input, Activity Indicator, Segmented Control, Slider, Switch, Stepper, Page Control, Progress, Map, Color Well, Date Picker, Calendar, Web View
      • 모든 UI 요소는 편집 가능한 속성을 가지고 있습니다.
  • Custom Design Component
    • 디자인한 레이아웃은 별도의 Component 로 저장하여 재활용할 수 있습니다.
    • Component 를 재활용했을 때 이를 Component Instance 또는 Instance 라고 부릅니다.
    • Instance 의 세부 속성들은 대부분 override 가 가능합니다.
  • App Navigation
    • Tab Bar, Push Navigation, Modal 등을 통해 여러 Scene 들을 연결할 수 있습니다.
  • Color System
    • 사용자 Color 를 관리할 수 있도록 지정합니다.
    • 모든 Color 는 Light Mode, Dark Mode 용 Color 를 동시에 지정할 수 있습니다.
    • OS 가 제공하는 기본 Color 를 곧바로 쓸 수 있습니다. 배경색과 Label 색만 써도 Dark Mode 를 곧바로 지원합니다.
    • iOS 의 Tint Color 시스템을 지원합니다.