디자인을 코드로 다시 옮긴다
디자이너가 그린 화면을 개발자가 처음부터 다시 만들며 간격·상태가 달라집니다.
솔루션화면과 동작을 함께 만드는 앱 빌더개발 중
디자인 캔버스에서 화면을 만들고, 로직 그래프에서 버튼을 눌렀을 때의 동작을 노드로 잇습니다. 라우터·상태·데이터를 같은 도구에서 다루고, 결과는 코드로 내보냅니다.
- 디자인 캔버스
- 로직 그래프
- 4단계 10종 노드
- 상태 · 바인딩
- 실행 추적
- 코드 내보내기
비주얼 앱 빌더개발 중
화면은 디자인 도구에, 동작은 문서와 대화에 흩어져 있으면 구현 단계에서 의도가 빠집니다.
동작은 문서로만 전달된다
버튼을 누르면 무엇이 일어나는지가 화면 밖 문서에 있어 빠지거나 어긋납니다.
상태별 화면을 따로 그린다
기본·저장 중·오류 같은 상태 화면을 일일이 따로 만들어야 합니다.
설계 중인 주요 화면입니다. 왼쪽 목록에서 화면을 골라 보세요.
비주얼 앱 빌더 › 디자인 캔버스화면 예시
디자인 캔버스 · 사이트맵·컴포넌트·레이어 패널과 앱 미리보기, 속성·바인딩·접근성 패널로 페이지를 편집합니다.
데모는 이해를 돕기 위한 예시 화면과 예시 데이터로 동작합니다.
디자인 캔버스와 사이트맵
사이트맵 · 레이어
페이지와 레이아웃을 사이트맵으로 관리하고, 실제 앱 화면처럼 미리 보며 편집합니다.
로직 그래프
실행 추적
이벤트 → 조건 → 서비스 호출 → 주소 변경 → 알림처럼 동작을 노드로 잇고 실행 순서를 추적합니다.
4단계 10종 노드
입력 · 가공 · 상태 · 출력
입력·가공·상태·출력 4단계로 노드를 나눠, 무엇을 어디에 연결해야 하는지 규칙이 분명합니다.
컴포넌트 편집
상태 · 바인딩 · 접근성
컴포넌트의 상태별 모습과 내부 로직을 함께 정의하고, 바인딩과 접근성 속성까지 다룹니다.
미리보기 상태 전환
상태 · ?tab
기본·저장 중·오류 상태와 주소 쿼리를 바꿔 가며 화면을 확인합니다.
코드 내보내기
Angular 내보내기
만든 화면과 로직을 프런트엔드 코드로 내보냅니다.