UI 컴포넌트 전체 — Layerz Docs

Layerz 가 제공하는 모든 UI 컴포넌트를 정리했습니다. 컴포넌트를 Page 에 추가하는 방법은 컴포넌트 추가하기 를, 속성 편집은 Inspector 를 참고하세요. 컴포넌트는 모두 데이터에 바인딩하거나 이벤트에 Action Flow를 연결할 수 있습니다.

Standard

View

UI 를 구성하는 빈 영역입니다. 중첩해서 화면 구조를 만들고, 배경색·테두리·모서리·그림자·그라데이션 등을 설정할 수 있습니다. Image 섹션에서 이미지나 SF Symbol 을 넣으면 이미지 표시용으로도 쓰입니다. 모서리를 Capsule 로 만들고 가로·세로를 같게 하면 원형(Oval)이 됩니다.

바인딩: 이미지(image)

Effect

Blur 또는 Glass 효과를 적용한 뷰입니다. 다른 콘텐츠 위에 올려 배경을 흐리게 하거나 유리 질감을 줍니다. (Glass 는 iOS 26 이상)

Image

이미지를 표시합니다. 프로젝트에 등록한 이미지나 SF Symbol 을 선택하고, 채우기 방식(Content Mode)을 지정합니다.

바인딩: 이미지(image) — 예: API 응답의 이미지 URL

Label

텍스트를 표시하는 가장 기본적인 컴포넌트입니다. 내용·색상·폰트·정렬·줄 수를 설정합니다. Auto Size 와 Auto Layout 을 함께 쓰면 내용에 맞게 크기가 자동 조절됩니다.

바인딩: 텍스트(string/number), 텍스트 색상

Container

List

같은 모양의 셀을 반복해서 보여 주는 목록입니다. Section 으로 나누고 Header/Footer 를 둘 수 있습니다. 배열 데이터를 바인딩하면 항목 수만큼 셀이 자동으로 반복됩니다. → List

Stack

여러 뷰를 수직/수평으로 정렬해 묶는 컨테이너입니다. Axis·Distribution·Alignment·Spacing 을 설정합니다. → Stack

Control

Button

눌러서 동작을 시작합니다. Type(Plain/Gray/Tinted/Filled/Glass 등), 아이콘, 색상, 크기, 모서리를 설정합니다. Touch 이벤트에 Action Flow를 연결하는 것이 핵심입니다.

바인딩: 전경색, 배경색, 활성화(enabled) / 이벤트: 있음

Text Field

한 줄 텍스트를 입력받습니다. 자리 표시자·폰트·색상·정렬·Border Style·Clear Button 을 설정합니다.

바인딩: 텍스트(string) — 양방향, 활성화

Text View

여러 줄의 긴 텍스트를 입력하거나 표시합니다. 편집 가능 여부를 지정할 수 있습니다.

바인딩: 텍스트(string) — 양방향

Activity Indicator

작업이 진행 중임을 알리는 로딩 표시입니다. Style 과 색상을 설정합니다.

Segmented Control

여러 옵션 중 하나를 선택하는 컨트롤입니다. 세그먼트 항목을 텍스트로 구성합니다.

바인딩: 활성화(enabled)

Slider

범위 안에서 연속 값을 선택합니다. 최소·최대값, 양 끝 아이콘, 손잡이·트랙 색상을 설정합니다.

바인딩: 값(number) — 양방향, 활성화

Toggle

켜짐/꺼짐 두 상태를 전환합니다. 설정의 on/off 처럼 자주 쓰입니다.

바인딩: 상태(boolean) — 양방향

Stepper

증감 버튼으로 값을 단계별로 조절합니다. 값·증감 단위·최소·최대값을 설정합니다.

바인딩: 값(number) — 양방향, 활성화

Page Control

여러 페이지 중 현재 위치를 점으로 표시합니다. 페이지 개수, 점 색상·이미지를 설정합니다.

바인딩: 활성화(enabled)

Progress

작업 진행률을 0~1 로 표시합니다. 스타일(선형/원형)과 색상을 설정합니다.

바인딩: 진행률(number)

Map

MapKit 기반의 인터랙티브 지도입니다. 지도 유형, Zoom/Scroll/Rotate/Pitch 사용 여부, 표시 영역(Edit Region)을 설정합니다.

바인딩: 위도(latitude), 경도(longitude)

Color Well

탭하면 시스템 색상 선택기가 열립니다.

바인딩: 색상 — 양방향

Date Picker

날짜·시간을 선택합니다. Mode(Time Only / Date Only / Date and Time)와 Style(Auto / Wheels / Compact / Inline)을 설정합니다.

Calendar

달력 전체를 화면에 포함시킵니다. 한 달 단위 달력을 그대로 보여 줄 때 사용합니다.

Web

앱 안에서 웹 콘텐츠를 표시합니다. URL 을 입력해 페이지를 띄우고, Action Flow의 Web View 제어 액션으로 로드·새로고침·뒤로/앞으로를 조작합니다.

바인딩(읽기): isLoading, loadingProgress, pageTitle, pageURL, canGoBack, canGoForward