10분 만에 첫 앱 만들기

이 튜토리얼은 Layerz 의 핵심을 한 번에 관통합니다. 간단한 할 일 목록 앱 을 만들면서, 앱이 디자인(Design) · 데이터(Data) · 동작(Behavior) 세 가지로 이루어지고 빌드 없이 곧바로 실행된다는 것을 직접 경험하게 됩니다. 전체 과정은 10분이면 충분합니다.

1. 화면 디자인하기

새 프로젝트를 만들면 빈 Screen 하나가 캔버스에 나타납니다.

1. UI Library 를 열고 List 를 캔버스로 Drag and Drop 합니다. List 는 같은 모양의 셀을 반복해서 보여 주는 컴포넌트입니다.
2. 셀 안에 Label 을 하나 올려놓습니다. 이 Label 이 각 할 일의 제목이 됩니다.
3. 화면 위쪽에 Text Field 와 Button 을 하나씩 올려놓습니다. 새 할 일을 입력하고 추가하는 데 씁니다.

아직 셀은 비어 있습니다. 다음 단계에서 데이터를 연결하면 화면이 채워집니다.

2. 데이터 준비하기

목업과 실제로 동작하는 앱의 차이는 데이터입니다.

1. 왼쪽 패널의 Data 에서 Data Schema 를 하나 만들고 이름을 Todo 라고 합니다.
2. Todo 에 title (string) 필드를 추가합니다.
3. Todo 타입의 배열(Array) 데이터를 만들고, 샘플 할 일 몇 개를 넣어 둡니다.

자세한 내용은 Data Schema 를 참고하세요.

3. 데이터를 화면에 바인딩하기

만든 데이터를 디자인에 연결할 차례입니다. 이것을 바인딩(Binding) 이라고 합니다.

1. List 를 선택하고 방금 만든 Todo 배열을 바인딩합니다. → 배열에 든 할 일 수만큼 셀이 자동으로 채워집니다.
2. 셀 안의 Label 을 선택하고 title 필드에 바인딩합니다.

데이터를 바꾸면 화면도 스스로 바뀝니다. 바로 이 지점이 정적인 그림과 살아 있는 앱의 경계입니다. 자세한 내용은 UI 에 데이터 바인딩하기 를 참고하세요.

4. 동작 추가하기 (Action Flow)

이제 추가 버튼을 눌렀을 때 새 할 일이 목록에 들어가도록 만듭니다. 동작은 Action Flow 로 정의합니다.

1. Button 을 선택하고 Touch 이벤트에 Action Flow 를 연결합니다.
2. Update Data 액션을 추가해, Text Field 의 입력값을 Todo 배열에 Append 모드로 추가합니다.

이제 버튼을 누르면 입력한 할 일이 목록에 추가됩니다. "이벤트가 플로우를 부르고, 플로우가 데이터를 바꾸고, 데이터가 화면을 갱신한다" — 이것이 Layerz 의 동작 모델입니다. 자세한 내용은 Action Flow 란 을 참고하세요.

5. 실행하기

끝났습니다. 빌드도, 기다림도 없습니다. Preview 를 누르면 방금 만든 앱이 곧바로 실행됩니다.

할 일을 입력하고 추가해 보세요. 실제로 동작하는 앱입니다. iPhone, iPad, Mac 어디서나 같은 프로젝트로 이어서 작업하고, Light/Dark 테마도 바로 전환할 수 있습니다.