iOS & Swift

Layerz 소개, 코드 없이 실제로 동작하는 iOS 앱을 그리는 디자인 도구

프로토타이핑 도구로 만든 화면은 그럴듯하게 "보이기만" 합니다. 버튼을 눌러도 미리 연결해 둔 화면으로 넘어갈 뿐, 데이터가 실제로 저장되지도, 서버와 통신하지도 않죠. 그래서 아이디어를 검증하려면 결국 누군가 코드를 짜야 했습니다.

이석우iOS Developer4분 읽기
Layerz 소개, 코드 없이 실제로 동작하는 iOS 앱을 그리는 디자인 도구 대표 이미지

프로토타이핑 도구로 만든 화면은 그럴듯하게 “보이기만” 합니다. 버튼을 눌러도 미리 연결해 둔 화면으로 넘어갈 뿐, 데이터가 실제로 저장되지도, 서버와 통신하지도 않죠. 그래서 아이디어를 검증하려면 결국 누군가 코드를 짜야 했습니다.

Layerz는 이 간극을 노린 도구입니다. 한 줄로 요약하면 코드 없이 디자인·데이터·동작·API 연동까지 정의하고, 그 자리에서 실제로 실행해 보는 iOS 앱 디자인 도구예요. Layerz Corp.이 만들었고, iPhone·iPad·Mac용 앱으로 무료 배포 중입니다.

Layerz 앱 디자이너가 Mac iPad iPhone에서 같은 프로젝트를 편집하는 공식 히어로 이미지
Mac·iPad·iPhone 어디서든 같은 프로젝트를 열어 편집합니다

핵심 요약입니다.

  1. 네이티브 iOS 컴포넌트(스택·리스트·탭, Auto Layout)를 캔버스에 배치해 화면을 만든다
  2. 데이터 스키마를 직접 정의하고 UI에 바인딩한다. 데이터가 바뀌면 화면이 자동으로 갱신된다
  3. Action Flow로 “버튼을 누르면 → 조건 확인 → 화면 이동/데이터 변경”을 노드로 연결한다
  4. OpenAPI(Swagger) 명세를 불러와 실제 API를 호출한다. 목업이 아니라 진짜 통신이다
  5. 빌드 없이 iPhone·iPad·Mac에서 즉시 실행해 본다

화면 그리기, 목업이 아니라 구조로

Layerz의 디자인 에디터는 자유 형태 드로잉 툴과 접근이 다릅니다. 사각형을 그려서 버튼처럼 보이게 만드는 게 아니라, 처음부터 iOS의 실제 레이아웃 부품 — 스택, 리스트, 탭 바 컨테이너 — 을 조립해요. Auto Layout 기반이라 기기 크기가 바뀌어도 화면이 따라 늘어납니다.

색상과 타이포그래피는 디자인 시스템 토큰으로 관리하고 라이트/다크 테마 전환도 지원합니다. 자주 쓰는 조합은 커스텀 컴포넌트로 묶어 재사용할 수 있고요. 개발자 입장에서 보면 SwiftUI의 사고방식(컴포넌트 조합, 데이터 바인딩, 토큰화된 스타일)을 시각 편집기로 옮겨 놓은 그림에 가깝습니다.

데이터와 동작, 여기서부터가 진짜 차별점

프로토타이핑 도구와 갈라지는 지점이 데이터입니다. Layerz 안에서 직접 데이터 스키마를 정의할 수 있어요. 필드 타입, 열거형(enum), 날짜까지 지정하고 이 데이터를 리스트나 텍스트 같은 UI 컴포넌트에 바인딩합니다. 조건으로 필터링·정렬한 리스트를 만들 수 있고 데이터는 디스크에 저장돼 앱을 다시 실행해도 유지됩니다.

동작은 Action Flow라는 노드 캔버스로 정의합니다. “버튼 탭 → 입력값 확인 → 조건 분기 → 데이터 추가 → 다른 화면으로 이동” 같은 흐름을 코드 대신 노드 연결로 만들어요. 알림창, 입력 프롬프트, 공유 시트, 사운드, 햅틱 같은 iOS 기본 동작들도 노드로 제공됩니다.

Layerz의 Design Data Action Flow API 통합이 즉시 실행 앱으로 이어지는 구조 다이어그램
네 가지 축이 하나의 실행 가능한 앱으로 모이는 구조입니다

API 연동까지 노코드로

가장 야심 찬 부분은 API 연동입니다. OpenAPI/Swagger 명세를 불러오면 엔드포인트 정의가 그대로 들어오고 인증과 재시도, 상태별 응답 처리까지 설정할 수 있습니다. 서버 응답(JSON)을 앱의 데이터 모델로 바꾸는 매핑은 Data Transformer라는 시각적 노드 캔버스에서 처리해요.

그래서 “실제 서버에서 상품 목록을 받아와 리스트에 뿌리고, 탭하면 상세로 이동하는 앱”을 코드 없이 만들어 그 자리에서 실행할 수 있습니다. 미리보기는 빌드 과정 없이 즉시 뜨고 iPhone·iPad·Mac 어디서든 같은 프로젝트를 열어 작업할 수 있습니다.

누구에게 유용할까

공식 홈페이지가 내세우는 대상은 넷입니다.

  • 메이커: 코드를 모르는 사람이 아이디어를 동작하는 형태로 구현할 때
  • 프로덕트 매니저: 기획서 대신 실제로 만져지는 프로토타입으로 아이디어를 검증할 때
  • 디자이너: “보이기만 하는” 시안을 “실제 데이터로 동작하는” 시안으로 끌어올릴 때
  • 개발자: 본 구현 전에 화면 구조·데이터 모델·동작 명세를 빠르게 확정할 때

특히 개발자에게는 명세 도구로서의 쓸모가 있어 보입니다. 화면·데이터·플로우가 전부 구조화되어 있으니, 기획 단계의 애매함을 코드 작성 전에 제거하는 용도로요.

UI 데이터 플로우 API 블록을 조립해 iOS 앱을 만드는 노코드 개념 일러스트
코드 대신 블록을 조립한다는 게 Layerz의 핵심 아이디어입니다

한계와 함께 보는 위치

물론 노코드 도구의 공통 질문은 Layerz에도 그대로 적용됩니다. 복잡한 비즈니스 로직, 커스텀 애니메이션, 서드파티 SDK 연동처럼 도구가 제공하는 노드 바깥의 일은 결국 코드의 영역입니다. Layerz의 포지션은 “앱 개발을 대체한다”보다는 “동작하는 프로토타입과 명세를 만드는 단계를 극단적으로 앞당긴다”에 가깝다고 보는 게 정확할 거예요.

iOS 생태계 전용(iPhone·iPad·Mac)이라는 점도 특징이자 제약입니다. 반대로 말하면 네이티브 iOS 컴포넌트와 Auto Layout을 그대로 쓰기 때문에 결과물이 iOS 앱답게 나온다는 뜻이기도 합니다.

아이디어는 있는데 코드가 발목을 잡고 있었다면, 혹은 팀의 기획 검증 사이클을 줄이고 싶었다면 한번 만져볼 가치가 있는 도구입니다. App Store와 Mac App Store에서 무료로 받을 수 있어요.