Layerz로 앱 디자인하기

Layerz는 앱을 디자인하고 프로토타이핑하는 도구입니다. iPad에 최적화되어 있고, iPhone과 Mac에서도 같은 방식으로 앱을 만들 수 있습니다.

화면 디자인부터 세부 구현까지 모든 부분이 iOS 네이티브로 동작합니다. 그래서 만들고 있는 상태가 그대로 앱이 됩니다. 네이티브 100%를 지키기 위해 Mac에서는 Mac Catalyst로 동작합니다.

App Store에 Layerz App Designer라는 이름으로 올라가 있습니다. 무료로 모든 기능을 써서 앱을 만들어볼 수 있습니다.

만든 앱으로 무엇을 할 수 있나요

먼저 이 질문부터 정리하고 시작하는 게 좋겠습니다. Layerz로 앱을 만든 다음에는 세 가지 길이 있습니다.

• 직접 쓰기 — 편집기에서 언제든 Preview로 만든 앱을 실행해볼 수 있습니다. iPad와 Mac에는 Run 액션도 있어서, 별도 창에서 완전히 독립적으로 실제 앱처럼 쓸 수 있습니다.
• 다른 사람에게 공유하기 — Layerz는 Document 앱입니다. 파일을 건네주고 상대가 Layerz를 설치하면 그대로 실행됩니다.
• 앱으로 배포하기 — Layerz 파일을 앱으로 만드는 Xcode 프로젝트를 공개하고 있습니다. 프로젝트를 받아 만든 파일을 넣고, bundle ID와 개발자 설정만 맞추면 정상적인 방법으로 배포할 수 있습니다. → github.com/layerzapp/LayerzX

메인 화면

앱을 설치하면 먼저 메인 화면이 보입니다. 아직 편집기는 열려 있지 않은 상태입니다. Layerz는 Document 앱이라, Finder에서 작업하던 파일을 실행하면 곧바로 편집기가 열립니다.

메인 화면은 앱을 조금 더 편하게 만들기 위한 재료들을 소개하는 자리입니다. Template 목록에서는 어떤 앱을 만들 수 있는지 예제를 볼 수 있고, 바로 실행하거나 그대로 편집 단계로 넘어갈 수 있습니다.

그 외에 Layerz에서 쓸 수 있는 Component와 Action Flow에 대한 설명이 있습니다. Layerz를 쉽게 쓰는 방법에 대한 내용은 여기에 계속 추가될 예정입니다. 화면 가장 아래쪽에는 새 프로젝트를 만들거나 기존 프로젝트를 여는 메뉴가 있습니다.

프로젝트 시작하기

여기서부터는 Mac 버전을 기준으로 설명하겠습니다. iPad는 사용법이 거의 같고, iPhone은 화면이 좁아 일부 다르지만 개념은 완전히 동일합니다. 한 곳에서 익숙해지면 어느 플랫폼에서든 그대로 작업할 수 있습니다.

프로젝트가 어떻게 구성되는지 빠르게 보고 싶다면 Template 목록에서 맘에 드는 프로젝트를 골라 Start Editing을 선택하면 됩니다. 여기서는 개념을 먼저 전하기 위해 빈 프로젝트로 시작하겠습니다.

메인 화면 메뉴 가장 아래의 Start for Free를 선택하면 프로젝트 시작 패널이 나옵니다. 이름을 정하고 Empty Project를 선택한 뒤 Create를 누릅니다. Layerz Pro로 업그레이드한 경우에는 대신 New Project 메뉴가 나오고, 파일을 원하는 위치에 저장할 수 있습니다.

프로젝트가 열리면 앱의 개요가 보이고, 왼쪽에 앱을 구성하는 기능들로 가는 버튼이 있습니다.

이제 각 탭이 무엇을 담당하는지 하나씩 보겠습니다.

App Info

앱 아이콘을 설정하고, 이 앱이 무엇인지 Description에 적어두는 곳입니다.

앱을 만들어 나갈수록 디자인과 데이터 설정, 액션이 늘어납니다. App Info 페이지에서 그 전체를 한 번에 확인할 수 있습니다.

Screens

앱 디자인에 대한 모든 것을 하는 곳입니다. 기본 단위는 아이폰의 한 화면에 해당하는 Screen입니다.

Screens 탭으로 가면 빈 Screen 하나가 있습니다. 아래쪽 도구 버튼 중 두 번째 + add를 누르면 Screen에 추가할 수 있는 Component 목록이 나옵니다. (Mac에는 add 버튼이 없고 왼쪽 패널이 항상 열려 있습니다. Mac Catalyst의 기술적인 이유입니다.)

여기서 원하는 Component를 Screen 위로 드래그해 놓을 수 있습니다. 아무거나 하나 끌어다 놓아보세요. Component가 놓일 위치가 미리 표시되고 좌표도 같이 나옵니다.

그런데 이 좌표는 단순히 원점으로부터의 거리가 아닙니다. Component를 이리저리 움직여 보면 위치에 따라 기준점이 계속 달라지는 것을 볼 수 있습니다.

이것이 Layerz 디자인의 가장 큰 특징인 Auto Layout입니다. Component는 추가될 때 그 위치에서 가장 자연스러운 Auto Layout 속성을 부여받습니다.

가장 간단히 설명하면 이렇습니다. 왼쪽에 있는 Component는 왼쪽을 기준으로, 오른쪽에 붙어 있으면 오른쪽을 기준으로 위치를 잡습니다. 정가운데에 있다면 가운데 기준이 됩니다. 이렇게 정해지고 나면 Screen 크기가 바뀌어도 원래 의도한 자리에 계속 남아 있습니다.

기준은 부모 뷰뿐 아니라 옆에 있는 다른 뷰도 될 수 있습니다. 방금 놓은 Component 근처로 새 Component를 하나 더 끌어다 놓아보면, 그 Component를 기준으로 위치가 표시되는 것을 볼 수 있습니다. 아래쪽에 놓았다면 새 Component는 원래 있던 Component를 따라 함께 움직입니다. 원래 있던 것을 선택해 옮겨보면 Auto Layout이 무엇인지 바로 이해가 될 겁니다.

Auto Layout은 처음 추가할 때 자동으로 정해지지만 당연히 편집할 수 있습니다. 기준이 되는 위치를 바꾸는 것이죠.

선택한 Component 가운데를 보면 익숙하지 않은 Anchor Handle이 있습니다. 이 핸들을 드래그해 관계를 맺고 싶은 다른 Component로 연결하면 어떤 관계를 맺을지 메뉴가 나옵니다. 원하는 설정을 고르기만 하면 됩니다.

Screen 위의 Component를 선택하면 오른쪽 Inspector에서 설정을 바꿀 수 있습니다. 설정은 Component 종류마다 다르니 이것저것 만져보며 감각을 익혀보세요. 색과 폰트 변경이 가장 기본입니다.

Inspector의 일부 항목에는 주황색 + 버튼이 있습니다. Data와 Binding을 설정하는 버튼입니다. Data 탭에서 Data를 정의하고 여기서 바인딩하면, Data가 바뀔 때 UI도 같이 바뀝니다.

Components

Screen 위에 View를 하나 올리고, 그 위에 Component를 몇 개 더 추가한 뒤 다시 View를 선택해 보세요. View Inspector의 첫 섹션인 Info에 Create Component 버튼이 있습니다.

이 버튼을 누르면 지금 View가 Custom Component로 등록되어 디자인할 때 계속 재활용할 수 있습니다. Custom Component를 편집하면 사용한 모든 곳에 반영되고, 개별적으로는 거의 모든 속성을 override할 수 있습니다.

여기까지가 디자인의 기본입니다. 더 상세한 내용은 다른 글에서 다루겠습니다.

Design System

방금 본 Custom Component 재사용만으로도 Design System을 구축할 수 있습니다. 다만 Color, Font, 그 밖의 여러 Value를 관리하기 위한 Design System 탭을 따로 두고 있습니다. 지금은 Color와 Font를 관리할 수 있고, 계속 확장해 나갈 예정입니다.

무엇보다 중요한 건 Design System을 통해 Theme를 지원한다는 점입니다. Theme는 원하는 만큼 만들 수 있고, 디자인 도중 언제든 적용해 여러 조건을 실시간으로 비교해볼 수 있습니다.

Assets

앱에 보이는 Assets는 따로 관리되어야 합니다. 쓸 이미지는 모두 여기서 관리하고, 디자인할 때 불러다 씁니다. Image, Video, Audio, Lottie, Filter를 한곳에서 관리하세요.

Image, Video, Audio, Lottie는 UI를 디자인할 때 해당 View Type에 지정해서 씁니다.

Filter는 이미지에 효과를 입힙니다. 이미지 뷰와 카메라 뷰에 지정할 수 있고, 여러 필터 효과를 체인으로 구성해 사실상 무수히 많은 효과를 만들어낼 수 있습니다.

Data

앱 디자인은 어떤 도구를 쓰든 빈 캔버스에서 시작합니다. 하지만 그 디자인이 앱으로 동작하게 만드는 건 Data와의 연동입니다. 정적이지 않고 늘 변하는 Data를 관리하고 UI에 바인딩해야 진짜 앱이 됩니다.

Data는 가장 널리 쓰이는 JSON 구조로 설계합니다. 만드는 방법은 직관적입니다. 이름과 타입을 정의하고, Object 타입이면 자신의 Field 목록을 정의합니다. Array로 지정하면 해당 타입의 리스트가 됩니다.

만든 뒤에는 UI에 바인딩만 하면 됩니다. Screen Editor에서 Component를 선택하고 Inspector를 보면, 바인딩할 수 있는 항목에 주황색 + 버튼이 있습니다. 이 버튼이 있는 곳은 전부 Data와 연결할 수 있다는 뜻입니다. 눌러서 미리 정의해둔 Data 중 하나를 고르면 끝입니다.

이제 Data가 곧바로 UI에 반영되고, Text Field나 Toggle Switch처럼 사용자가 값을 바꿀 수 있는 Component는 반대로 Data를 자동으로 업데이트해 줍니다.

Data Schema

Data는 문자, 숫자, Bool 같은 기본 타입을 지원합니다. 여기에 더해 재사용 가능한 타입을 Data Schema로 정의할 수 있습니다.

가장 쉬운 예가 연락처입니다. 새 Data Schema를 만들고 이름, 전화번호, 주소 항목을 추가해 두면, 이 Schema를 Data에서 타입으로 쓸 수 있습니다. 한 번 정의한 Schema는 언제든 수정할 수 있습니다.

API

Data를 가장 생기 있게 유지하는 방법은 외부 API를 호출해 받아오는 것입니다. 이 탭은 API를 정의하는 일만 담당합니다. 여기서 정의한 API는 Action Flow를 통해 호출되어 Data를 업데이트합니다.

API를 관리하는 일은 원래 까다롭지만, OpenAPI 스펙을 그대로 가져와 추가할 수 있어 수월합니다.

Services

UI는 아니지만 앱에 필요한 요소들을 관리합니다. 지금은 Timer, Battery, Connectivity, Audio가 있습니다.

Action Flows

Data가 앱 디자인에 진짜 데이터를 공급한다면, Action Flow는 그 Data를 가공하는 일을 맡습니다. 그뿐 아니라 Screen을 다른 Screen으로 이동시키거나 사용자에게 Alert을 보여주는 등, 앱을 실제로 동작시키는 일도 담당합니다. API로 Data를 받아와 업데이트하는 것도 여기서 정의합니다.

앱을 동작시키는 여러 종류의 Action이 있고, 이것들을 원하는 순서로 나열해 원하는 동작을 만들어냅니다. Action Flow는 사용자 상호작용을 트리거로 실행할 수 있습니다. 버튼을 눌러 다음 Screen으로 이동하거나, Screen에 진입했을 때 자동으로 API를 호출해 Data를 받아오는 식입니다.

마치며

여기까지가 Layerz App Designer에 대한 간단한 소개였습니다. Layerz는 iOS 시스템을 다루는 많은 기능을 제공해서, 누구든 코드 없이도 원하는 앱을 안정적으로 만들 수 있는 환경을 지향합니다. 앞으로도 기능은 계속 추가될 예정입니다.

Layerz로 원하는 앱을 디자인하고 만들어보세요.