KR20230115340A - 사용자 인터페이스 애플리케이션들을 개발하기 위한시스템 및 방법 - Google Patents

Abstract

사용자 인터페이스 애플리케이션을 설계하기 위한 컴퓨터에 의해 구현되는 방법이 시각적 흐름 언어와 모델 뷰 흐름 아키텍처를 사용한다. 시각적 흐름 언어는 컴포넌트들을 포함할 수 있으며, 그 컴포넌트들은 블록들과 노드들을 포함한다. 호출 스트림들과 데이터 흐름들이 사용자에 의해 정의될 수 있다. 애플리케이션 흐름 로직 그래프가 생성된다. 애플리케이션 흐름 로직 그래프는 사용자 인터페이스 애플리케이션을 생성하는데 사용될 수 있다.

Description

사용자 인터페이스 애플리케이션들을 개발하기 위한 시스템 및 방법

본 개시는 대체로 기업 애플리케이션들을 위한 사용자 인터페이스들을 구축하는 것에 관한 것이다. 더 상세하게는, 본 발명은 사용자 인터페이스 애플리케이션들을 설계하고 구현하기 위한 아키텍처 및 시각적 흐름 언어(visual flow language)에 관한 것이다.

기업 애플리케이션들을 위한 사용자 인터페이스 설계는 기존에는 회사의 데이터, 사용자 인터페이스(User Interface)(UI), 및 통합들을 사용하여 안전하고 확장 가능한 프론트엔드 앱들을 구축하기 위한 코딩 지식을 요구했다. MVC(model-view-controller), MVP(model-view-presenter), 및 MVVM(model view viewModel)과 같은 기존의 도구들은 심각한 한계가 있다.

본 개시의 실시예들은 위에서 설명된 문제들의 견지에서 개발되었다.

본 개시는 사용자 인터페이스 애플리케이션을 설계하고 배포하기 위한 시스템들 및 방법들에 관한 것이다. 하나의 실시예에서, 설계 스튜디오가 시각적 흐름 언어를 사용하여 애플리케이션들을 설계하기 위해 제공된다. 시각적 흐름 언어는 복수의 상이한 컴포넌트 유형들을 포함하며, 각각의 컴포넌트는 적어도 하나의 블록을 가지며, 블록은 적어도 하나의 노드를 포함한다. 사용자들은 노드들 사이에 호출 스트림(call stream) 접속들 및 데이터 매핑들을 형성할 수 있다. 각각의 컴포넌트는 자신 소유의 해당 모델을 캡슐화할 수 있다. 애플리케이션 로직 흐름 그래프가 사용자 인터페이스 애플리케이션을 정의하기 위해 사용자 선택들에 기초하여 생성될 수 있다.

그러나, 특징들 및 장점들의 이 리스트가 모든 것을 포함하지 않고 많은 추가적인 특징들 및 장점들은 본 개시의 범위 내에서 생각되고 속한다는 것이 이해되어야 한다. 더구나, 본 개시에서 사용되는 언어는 가독성 및 교육 목적으로 주로 선택되었고, 여기에 개시된 요지의 범위를 제한하지 않는다는 것이 이해되어야 한다.

본 개시가 첨부 도면들의 그림들에서 제한이 아니라 예로서 예시되며 그 도면들에서 유사한 참조 번호들은 유사한 엘리먼트들을 지칭하는데 사용된다.
도 1a는 일 구현예에 따른 사용자 인터페이스 애플리케이션들을 개발하기 위한 시스템을 예시하는 블록도이다.
도 1b는 일 구현예에 따른 UI 설계 스튜디오의 특징들의 일 예를 예시하는 블록도이다.
도 1c는 일 구현예에 따른 사용자 애플리케이션 아키텍처 계층을 예시하는 블록도이다.
도 1d는 일 구현예에 따른 도커 이미지들을 사용하는 배포 전략들의 일 예를 예시한다.
도 1e는 일 구현예에 따른 서버 기반 구현의 일 예를 예시한다.
도 2는 일 구현예에 따른 모델 뷰 흐름(Model View Flow)(MVF) 아키텍처를 예시하는 블록도이다.
도 3은 일 구현예에 따른 애플리케이션 로직 그래프를 예시한다.
도 4는 일 구현예에 따른 컴포넌트 유형들의 예들을 예시한다.
도 5a 및 도 5b는 일 구현예에 따른 블록들 및 노드들을 갖는 컴포넌트들의 예들을 예시한다.
도 6은 일 구현예에 따른 블록 유형들의 예들을 예시한다.
도 7은 일 구현예에 따른 노드 유형 시각화의 일 예를 예시한다.
도 8a는 일 구현예에 따른 컴포넌트들 사이의 흐름들 및 흐름 강조표시(highlighting)의 예들을 예시한다.
도 8b는 일 구현예에 따른 컴포넌트들 사이의 흐름의 일 예를 예시한다.
도 9a 및 도 9b는 일 구현예에 따른 시블링(sibling) 인터페이스 구성을 예시한다.
도 10a 및 도 10b는 일 구현예에 따른 부모 인터페이스 구성을 예시한다.
도 11a는 일 구현예에 따른 UIflow 설계 스튜디오의 주요 섹션들의 일 예를 예시한다.
도 11b는 일 구현예에 따른 UI의 미리보기, 흐름 패널의 UIflow, 카탈로그 패널, 및 검사기 패널을 도시하는 일 예를 예시한다.
도 11c는 UIflow 설계의 일 예를 예시한다.
도 11d는 카탈로그 패널의 일 예를 예시한다.
도 11e는 검사기 패널의 일 예를 예시한다.
도 12는 일 구현예에 따른 사용자맞춤화(custom) 코드 컴포넌트들의 생성을 예시한다.
도 13은 일 구현예에 따른 방법의 흐름도이다.
도 14는 일 구현예에 따른 방법의 흐름도이다.
도 15는 일 구현예에 따른 다른 예시적인 방법의 흐름도이다.

아키텍처 개요

소프트웨어를 코딩할 필요 없이 사용자 인터페이스 애플리케이션들을 설계하기 위한 시스템 및 방법이 개시된다. 이는 소프트웨어 애플리케이션들을 개발하기 위한 시각적 흐름 언어(VFL 또는 Flowlang)를 포함하는 모델 뷰 흐름(MVF) 아키텍처를 포함한다. Flowlang은 애플리케이션 빌더들(사용자들)이 코드 없는 방식으로 애플리케이션들을 구축하는 것을 가능하게 하는, MVF의 위에 구축되는 시각적 언어이다. MVF 아키텍처로 애플리케이션을 구축하기 위해 시각적 언어를 사용하는 것은 절대적으로 요구되지는 않는다. 애플리케이션들은 또한 전통적인(텍스트 코드) 방식으로 구축될 수 있다. 그러나, Flowlang은 애플리케이션들을 쉽게 구축할 수 있게 한다.

MVF는 컴포넌트로부터의 이벤트로 시작하고 하나 이상의 다른 컴포넌트들의 방법들을 호출함으로써 완료되는 UI 스트림들을 통해 애플리케이션 로직 및 상태를 모델링한다. MVF에서, 방법 파라미터들은 다른 상태기반 컴포넌트들에 대한 데이터 매핑을 통해 획득된다. MVF의 일 양태는 데이터 매핑이 복잡한 애플리케이션 흐름들을 지원한다는 것이다. 이는, 소프트웨어 설계 패턴이 튜링(Turing)을 완성하게 하는 것을 허용하고, 현대적인 프로그래밍 언어들을 모방하는 로직의 완전히 비선형적인 실행을 허용하는 것과 같은 이점을 제공한다. MVF 애플리케이션들은 시각적으로 작성될 수 있지만, 더 일반적으로 그것들은 또한 코드에서 텍스트로 작성될 수 있다.

도 1a의 예를 참조하면, UI 설계 스튜디오(102)가 사용자 인터페이스 애플리케이션들을 설계하기 위해 시각적 흐름 언어(Flowlang)를 지원한다. UI 설계 스튜디오(102)는, 예를 들어, 컴퓨팅 디바이스 또는 서버 상에 구현될 수 있다. 배포 지원 아키텍처(202)가 UI 설계 스튜디오(102)의 출력을 사용하여 UI 설계의 배포를 지원하는 상이한 방식들로 구현될 수 있다. 배포 지원 아키텍처(202)는 앱 정의들 및 앱 자산들과 같은 UI 아티팩트들을 포함할 수 있다. 이는 UI 설계를 배포하는 것을 지원하는 UI 서버를 포함할 수 있다. 사용자 애플리케이션 계층(302)이 브라우저에서 프런트 엔드 UI 앱을 갖는 것으로 예시된다.

하나의 구현예에서, 시각적 흐름 언어를 사용하는 애플리케이션 흐름 그래프 설계 페이즈가 있다. 하나의 실시예에서는, 설계 페이즈에서, 사용자가 카탈로그로부터 컴포넌트들을 선택하며, 컴포넌트들을 적소에 드래그 앤 드롭하고, 예를 들어, 호출 스트림 접속들 또는 데이터 매핑 접속들을 사용하여 컴포넌트들의 노드들 사이에 접속들을 형성할 수 있다. 컴포넌트들의 특징들 또는 특성들을 구성/사용자맞춤화하는 단계들이 수행될 수 있다. 구축 페이즈에서, 애플리케이션 정의 파일이 생성되고 UI 애플리케이션을 구축하는데 사용될 수 있다. 그러나, 최종 사용자의 입장에서, 코딩을 하지 않고서도 시각적 흐름 언어를 사용하여 UI 애플리케이션을 설계할 수 있다. 다른 소프트웨어(예컨대, 흐름 엔진)는 자동으로 애플리케이션 흐름 그래프를 조사하며, 로직 그래프를 생성하고 다른 단계들을 수행하여 최종 UI 애플리케이션을 구축하기 위해 MVF 아키텍처에 포함된다.

도 1b는 UI 설계 스튜디오(102)의 일 예를 예시한다. 패널들은 뷰 모델을 생성하도록 통합 설계 환경(integrated design environment)(IDE)에서 지원될 수 있다. 패널들은 테마 패널, 트리 패널, 뷰 패널, 흐름 패널, 검사기 패널, 및 컴포넌트 카탈로그 패널을 포함할 수 있다. Flowlang은 통합 개발 환경(Integrated Development Environment)(IDE)의 위에 구축된 작성 도구이다. UI 설계 스튜디오 애플리케이션은, 일부 구현예들에서, 비주얼 스튜디오(Visual Studio)(VS) 코드 플러그 인 모듈을 포함할 수 있다.

컴포넌트 패널이 사용자가 다양한 상이한 컴포넌트 유형들로부터 컴포넌트를 선택하는데 도움이 된다. 예를 들어, 드래그 앤 드롭 기능이 컴포넌트를 선택하며, 애플리케이션 흐름 패널 상으로 끌어서 놓기 위해 지원될 수 있다. 애플리케이션 트리가 설계 프로세스 중에 구축되면, UI 트리 패널은 컴포넌트들 및 다른 속성들의 현재 리스트와 같은 것들을 요약할 수 있다. 스타일들과 테마들을 구성하기 위한 패널이 제공될 수 있다. 예를 들어, UI의 시각적 외관에 대한 다양한 조정들뿐만 아니라, 회사별 컬러 스킴과 같은 특정 최종 고객에 특화된 스타일들이 지원될 수 있다. 애플리케이션 흐름 패널은 시각적 흐름 언어를 사용하여 애플리케이션 흐름 그래프를 설계하기 위해 포함될 수 있다. UI 앱의 미리보기가 디스플레이되는 것을 허가하기 위해 UI 미리보기 패널이 포함될 수 있다.

앱 흐름 로직은 컴포넌트들 사이에 시각적으로 구성될 수 있다. 이는 앱 개발자들이 진정으로 고유하고 사용자맞춤화된 컴포넌트들 및 애플리케이션들을 만드는 것을 가능하게 하는 한편, 표준 컴포넌트들을 사용하여 단지 앱들을 빠르게 만들고자 하는 앱 개발자들을 또한 지원한다. 이는 또한 제품 관리자들, 설계자들, 및 품질 보증(quality assurance)(QA)과 같은 다른 역할들이 코드를 작성하는 방법을 알지 못해도 애플리케이션 흐름들을 이해, 수정, 및 구성하는 것을 가능하게 한다.

일부 구현예들에서, 시각적 흐름 언어를 사용하여 생성된 애플리케이션 흐름 그래프는 클라우드 또는 기업 구현과 같은 배포 지원 아키텍처가 브라우저에서 UI 앱의 배포를 지원하게 해주기 위해 애플리케이션 정의 파일들(또는 유사한 정보)을 생성하는데 사용된다. 예를 들어, 흐름 패널에서 UI 애플리케이션을 시각적으로 설계하는 것은 애플리케이션들을 컴파일하는데 사용되는 애플리케이션 로직 그래프를 생성하는데 사용될 수 있고, 클라이언트(즉, 브라우저 또는 모바일 앱)에서 애플리케이션 로직을 실행하는데 사용될 수 있다. 애플리케이션 로직 그래프를 설명하는 파일들은, 예를 들어, 배포 지원 계층으로 전달될 수 있거나 또는 그렇지 않으면 애플리케이션 정의 파일들을 생성하는데 사용될 수 있다.

도 1c는 사용자 애플리케이션 계층(302)의 일 예를 예시한다. 뷰 모델이 흐름 엔진, 앱 상태 모듈, 앱 빌더 모델 및 레이아웃 엔진을 지원한다. 그러나 구현예들은 또한 구현 세부사항들에 의존하여 가능하다.

최종 UI 앱의 배포는 클라우드를 통해와 같은 상이한 방식들로 구현될 수 있다. UIflow 클라우드 기반 구현예가, 예를 들어, 상업적 클라우드 서비스들(예컨대, Amazon Web Services®(AWS)) 및 클라우드 지원 특징들 이를테면 관계형 데이터베이스 서비스(relational database service)(RDS), live EB Web server®, .com EB Web server®, 및 App Compiler EB worker®를 사용하는 것을 포함할 수 있다. 하나의 구현예에서, S3 cloud storage®가 애플리케이션 정의들(App Def) 및 애플리케이션 정적 자산들(App Static Assets)을 저장할 수 있다.

도 1d는 배포 전략들의 다른 예를 예시한다. 배포 지원 계층은 기업 네트워크를 통해 또는 클라우드에서 구현될 수 있다. 일부 구현예들에서, 도커가 애플리케이션들을 위한 컨테이너들을 생성하는 개방형 플랫폼인 경우 도커 이미지가 사용될 수 있다.

도 1e는 일 구현예의 일부 양태들이 서버의 비일시적 메모리에 저장된 컴퓨터 프로그램 명령들로서 구현될 수 있는 방법을 예시한다. 다시 말하면, 원칙적으로, 기업이 서버 기반 시스템에서 MVF 및 Flowlang를 구현할 수 있다.

MVF 개괄적 설명

도 2는 흐름 엔진(205)과 컴포넌트들의 일 예를 예시하며, 여기서 컴포넌트들은 데이터 컴포넌트들(210), UI 컴포넌트들(218), 흐름들을 지시하기 위한 로직 컴포넌트들(도 2에 도시되지 않음), 및 데이터를 변환하기 위한 변환 컴포넌트들(도 2에 도시되지 않음)과 같은 다양한 유형들을 포함할 수 있다. MVF 아키텍처에서, 각각의 컴포넌트는 자신의 모델을 캡슐화한다. 예를 들어, 데이터 컴포넌트(210)는 자신의 모델(212)을 캡슐화했고 UI 컴포넌트(218)는 자신의 모델(214)을 캡슐화한다.

UI 컴포넌트들은 사용자 생성 이벤트들(예컨대, 버튼 클릭, 입력 변경 등)과 모델 이벤트들(예컨대, 버튼 변형 변경됨)을 내보낸다. 데이터 컴포넌트들은 모델 변경 이벤트들(예컨대, 반환된 요청-응답, 웹소켓 푸시 등)을 내보낸다.

UI 컴포넌트들은 애플리케이션의 UI 트리를 만들고, 시각적이다. UI 컴포넌트들은 방법들을 가지고 이벤트들을 발생시킬 수 있다. UI 컴포넌트들은 상태 정보를 또한 저장할 수 있다.

로직 컴포넌트들은 UI와 다른 컴포넌트들 사이의 "접착제(glue)"이다. 그것들은 입력들을 받고 그것들을 출력들로 변환한다. 그것들은 또한 호출 스트림들 수신하고 그 스트림들을 분할할 수 있거나, 또는 스트림들을 라우팅하기 위한 내장된 (로직 스위치들과 같은) 로직을 가진다.

하나의 구현예에서, 흐름 엔진은 이들 이벤트들을 청취하고, 로직 컴포넌트들을 통과하고 다른 UI 컴포넌트들 또는 데이터 컴포넌트들에 대한 액션들을 호출하는 로직 그래프를 순회(traverse)한다.

하나의 구현예에서, MVF는 전체 애플리케이션 로직 계층을 방향성 그래프로서 모델링하고, 그 컴포넌트들은 자신들이 캡슐화하는 자신들 소유의 각각의 모델들을 담당한다. 애플리케이션 소프트웨어에서, 흐름 구성(flow construct)은 애플리케이션이 기능하는 방법을 제어하기 위하여 애플리케이션 로직 그래프를 순회하는 흐름 엔진으로서 구현된다.

도 3은 일반적인 애플리케이션 로직 그래프를 예시한다. 애플리케이션 로직은 호출 라인들 및 데이터 라인들이라는 상이한 두 가지 종류의 에지들이 있는 방향성 그래프로서 나타낸다. 이벤트가 시스템에서 검출될 때, 새로운 스트림이 시작되고, 흐름 엔진은 이벤트가 발생한 컴포넌트로 시작하여 로직 그래프를 순회하기 시작한다. 도 3에서, 호출 라인들은 파선들로서 예시되고, 데이터 매핑 라인들은 실선들에 의해 예시된다.

도 4는 UI 컴포넌트 유형, 데이터 컴포넌트 유형, 로직 컴포넌트 유형, 및 변환 컴포넌트 유형이라는 MVF 애플리케이션들의 네 가지 컴포넌트 유형들을 예시한다. 모든 호출 스트림들은 UI 컴포넌트 또는 데이터 컴포넌트 이벤트로 시작하고, UI 컴포넌트 또는 데이터 컴포넌트 액션으로 종료한다. 로직 컴포넌트들은 흐름들을 지시하는데 사용된다. 로직 컴포넌트들은 UI 컴포넌트들을 함께 "접착"하는데 사용된다. 로직 컴포넌트들은 변환들, 분기들, 및 디버깅을 포함한다. 변환 컴포넌트들은 입력 파라미터들에 필요한 데이터를 다른 변환 컴포넌트들로, 또는 입력 파라미터들을 UI 컴포넌트들 또는 데이터 컴포넌트들을 위한 액션들로 변환하는데 사용된다. 개별 컴포넌트가 하나를 초과하는 데이터 매핑을 입력으로서 그리고 하나를 초과하는 호출 스트림을 출력으로서 가지고 있을 수 있다는 것에 주의한다.

컴포넌트들은 통합 컴포넌트들을 또한 포함할 수 있다. UI 컴포넌트들은 애플리케이션의 시각적 양태들을 만들어낸다. 통합 컴포넌트들은 나머지, 또는 Stripe®, Twilio®, Salesforce®, AWS® 등과 같은 다른 서비스들로부터 데이터에 액세스하는 벤더 특정 컴포넌트들을 포함할 수 있다. 통합 컴포넌트들은 앱 외부의 시스템들에 접속하는데 사용된다. 예들은 Restful 컴포넌트들, Salesforce® 또는 AWS®를 위한 서드 파티 통합 컴포넌트들, 또는 Websocket 컴포넌트들을 포함한다. 하나의 구현예에서, 통합 컴포넌트들은 방법들을 가지고, 이벤트들을 발생시킬 수 있다. 그것들은 상태를 저장하지 않는다.

하나의 구현예에서, UI 컴포넌트들은 임의의 수의 다른 컴포넌트 유형들 또는 원시 컴포넌트들을 포함할 수 있다. 원시 컴포넌트들은 텍스트, 텍스트 입력들, 또는 아이콘들과 같은 다른 UI 컴포넌트들을 포함할 수 없는 UI 컴포넌트들이다. 특정한 블록 유형들의 경우, 노드들은 구성 가능할 수 있다. 데이터 어댑터들은 객체들 및 배열들을 구축하고 추출하는 변환 블록들을 결합함으로써 시각적으로 생성된다.

계층구조가 컴포넌트들, 컴포넌트들 내의 블록들, 및 블록들 내의 노드들에 대해 제공될 수 있다. 컴포넌트들의 예들은 UI 컴포넌트들, 데이터 컴포넌트들, 로직 컴포넌트들, 및 변환 컴포넌트들을 포함한다.

도 5a는 두 개의 컴포넌트들의 초기 선택을 예시하고 도 5b는 두 개의 컴포넌트들의 노드들 사이에 접속들을 형성하는 것을 예시한다. 도 5a 및 도 5b에 예시된 바와 같이, 컴포넌트들은 설계 스튜디오에서 선택될 수 있다. 개별 컴포넌트가 하나 이상의 블록들을 가질 수 있다. 일부 예들에서, 블록들은 구성 가능하다. 일부 구현예들에서, 마우스 조작들(예컨대, 드래깅, 드로핑, 마우스 클릭들/마우스 업(mouse-up)들)은 컴포넌트들을 이동시키며, 컴포넌트들을 삽입하며, 컴포넌트들을 구성하고, 컴포넌트들 사이에 호출 스트림 또는 데이터 매핑 접속들을 형성하는데 사용될 수 있다. 다시 말하면, 하나의 블록이 호출 스트림 또는 데이터 매핑에 의해 다른 노드들에 커플링되는 노드들을 가지는 하나 이상의 블록들을 개별 컴포넌트가 포함할 수 있다. 개별 컴포넌트가, 컴포넌트의 유형에 의존하여, 자신의 구성을 위한 옵션들을 제공할 수 있다.

도 6은 액션 블록, 비동기 콜백이 있는 액션 블록, 게터(getter) 블록, 입력 파라미터들을 요구하는 게터 블록, 및 재생(playback)이 있는 이벤트 블록에 대응하는 블록 유형들의 일부 예들을 예시한다.

도 7은 비접속 호출 입력 노드들, 비접속 데이터 입력 노드들, 접속 호출 입력 노드들, 접속 데이터 입력 노드들, 비접속 호출 출력 노드들, 비접속 호출 출력 노드들, 및 접속 데이터 출력 노드들을 나타내는 노드 유형 시각적 처리들의 일 예를 예시한다.

하나의 구현예에서, 컴포넌트들의 런타임 생성은 두 가지 주요 방식들로 관리된다. 먼저, 클래스들/인스턴스들에 의해 관리된다. 컴포넌트가 인스턴스 또는 클래스 중 어느 하나로 변환될 수 있다. 컴포넌트가 클래스 모드에 있으면, 생성자(constructor) 액션이 이용 가능하고, 호출 스트림들은 클래스의 인스턴스들을 생성하는 액션에 접속될 수 있다. 컴포넌트가 컬렉션 모드에 있으면, 사용자들은 컴포넌트들의 컬렉션들을 관리하는 메서드들을 가지는 컬렉션 컴포넌트들을 사용할 수 있다. 클래스들/인스턴스들의 사용은 런타임 컴포넌트 생성에 큰 도움이 된다. 앱 개발자들은 사용자 행동에 기초하여 런타임에 하나 이상의 컴포넌트들을 동적으로 인스턴스화하는 방법을 필요로 한다. 일 예로서, UI 컴포넌트가 클래스의 "constructor()" 메서드를 호출함으로써 런타임에 인스턴스를 생성하는데 사용될 수 있는 클래스로서 설정될 수 있다. 이는 앱 개발자들이 컴포넌트들을 편집기의 인스턴스들로서 구성한 다음, 그것을 컴포넌트가 런타임에 인스턴스화될 수 있도록 클래스로 토글하는 것을 가능하게 한다.

하나의 구현예에서, 애플리케이션이 미리보기 패널에서 또는 팝아웃(popped-out) 윈도우에서 중 어느 하나에서 실행될 때, 흐름 패널 시각적 언어는 실행되고 있는 흐름들을 강조표시하여 사용자들이 실행되고 있는 로직을 볼 수 있도록 한다. 또한, 사용자는 라이브 값 검사기를 통해 각각의 컴포넌트에 대한 데이터 값들을 검사할 수 있다.

도 8a는 실행되고 있는 흐름들을 강조표시하는 흐름 패널 언어가 있는 컴포넌트들의 일 예를 예시한다. 이 예에는, 여러 UI 컴포넌트들, 여러 로직 컴포넌트들, 및 여러 데이터 컴포넌트들이 있다. 이제 도 8a의 흐름들 중 일부를 고려한다:

1. 사용자는 데이터를 저장하기 위해 "Button" 컴포넌트를 클릭한다. 호출 스트림이 생성된다;

2. 호출 스트림은 "If Else" 컴포넌트를 호출한다. 이 컴포넌트는 조건을 입력으로서 요구한다. 그 컴포넌트는 "Checkbox" 컴포넌트 상의 "isChecked" 데이터 접근자(accessor)로부터 참/거짓을 회수한다;

3. 이 예에서, "Checkbox" 컴포넌트는 체크되며, 그래서 참 조건 호출 스트림이 실행되어, 데이터를 저장하기 위해 "Request" 컴포넌트를 호출한다;

4. "Request" 컴포넌트는 파라미터로서 저장될 값을 요구한다. 파라미터의 값은 "Truncate" 컴포넌트에 의해 제공되며; 및

5. truncate 컴포넌트는 입력을 받고 그 값을 절단한다. 입력 파라미터는 "str"이며, 이는 텍스트 입력 컴포넌트의 값으로부터 획득된다.

도 8b는 시각적으로 제시되는 흐름의 간단한 예를 예시한다. 이 예에는, 네 개의 UI 컴포넌트들과 하나의 로직 컴포넌트가 있다. 이 예의 흐름의 설명이 이제 제공된다. 이벤트가 컴포넌트 A에서 발생하며, 이는 로직 컴포넌트 C의 입력 노드에 의해 수신된다. 이 예에서, 로직 컴포넌트 C는 UI 스트림을 UI 호출 스트림(2) 및 UI 호출 스트림(4)이라는 두 개의 스트림들로 분할하는 스플리터이다. 제1 UI 호출 스트림(2)은 UI 컴포넌트 D 속으로 흐른다. 이 예에서, UI 스트림(2)으로부터의 메서드 호출이 UI 컴포넌트 B로부터 데이터 매핑(3)을 통해 값이 회수되는 파라미터를 요구한다. 이 예에서, 로직 컴포넌트 C의 스플리터는 호출 실행을 재개하고 UI 호출 스트림(4)이 UI 컴포넌트 E 속으로 흐른다. 이 예에서, 호출 스트림(4)으로부터의 메서드 호출이 컴포넌트 B의 상태로부터 데이터 매핑에 의해 값이 회수되는 파라미터를 요구한다.

이론적으로, 이 예시적인 흐름은 코드에서 텍스트로 나타내어질 수 있다. 그러나, 간단한 예라도 프로그래머가 정확하게 코딩하고 디버깅해야 하는 많은 관계들이 있는 다수의 코드 라인들을 빠르게 생성한다. 그 결과, UI를 빠르고 쉽게 설계하고 디버깅하는 것이 어렵다.

Flowlang에서 흐름을 생성하는 예시적인 방법이 이제 설명될 것이다. 흐름을 생성하는 방법이 특정 컴포넌트로부터 새로운 흐름을 트리거할 이벤트를 식별하는 것을 먼저 포함할 수 있다. 둘째, 접속이 로직 컴포넌트의 이벤트 노드로부터 호출 노드로 (좌측에서 우측으로) 생성될 수 있고 UI 또는 데이터 컴포넌트에 도달하기까지 반복될 수 있다. 이것들은 하류의 접속들이다. 셋째, UI 또는 데이터 컴포넌트가 입력 파라미터들을 요구하면, 사용자는 입력 파라미터들을 변환 컴포넌트에 (우측에서 좌측으로) 접속하고 UI 컴포넌트 또는 데이터 컴포넌트에 접속하기까지 반복한다. 이것들은 업스트림 접속들이다.

하나의 예에서, 인터페이스 생성은 상이한 방식들로 지원될 수 있다. 사용자들은 네스트식(nested) 컴포넌트 내부의 컴포넌트에 파라미터들에 대해 값들을 전송하거나 또는 호출을 트리거하는 방식을 필요로 한다. 일부 예들에서, 사용자들은 하나 이상의 노드들을 경계 박스의 외부로 단순히 드래그하여 호출들 및 데이터 매핑 노드들을 포함 컴포넌트에 노출시키는 하나 이상의 인터페이스들을 생성한다. 입력 또는 출력 인터페이스의 생성은 사용자가 입력 노드를 드래그할지(입력 인터페이스를 생성할지) 또는 사용자가 출력 노드를 드래그할지(출력 인터페이스를 생성할지)에 따라 달라진다. 현존 인터페이스의 삭제가 가능하다. 현존 인터페이스의 재순서화(reordering)가 가능하다. 일부 예들에서, 사용자들은 소스 컴포넌트와 타깃 컴포넌트 사이에 인터페이스들을 생성할 목적지 컴포넌트를 특정함으로써 다수의 인터페이스들을 생성할 수 있다. 각각의 수준에서 하나의 노드에 대해 하나의 인터페이스만이 있을 수 있다.

도 9a 및 도 9b는 시블링 인터페이스 구성을 예시한다. 도 9a는 컴포넌트 A에서부터 컴포넌트 B로 에지를 드래그하는 것을 예시한다. 도 9b는 컴포넌트 B에 대한 인터페이스를 생성하기 위한 마우스-업을 예시한다. 다시 말하면, 간단한 마우스 동작들이 시블링 인터페이스들을 생성하는데 사용될 수 있다.

도 10a 및 도 10b는 부모 인터페이스 구성을 예시한다. 도 10a에서, 사용자가 부모 컴포넌트 경계 외부로 에지를 드래그한다. 도 10b에서, 마우스-업이 부모 컴포넌트에 대한 인터페이스를 형성하는데 사용된다.

도 11a는 UIflow 스튜디오의 일 예를 예시한다. 이는 헤더 및 내비게이션 섹션, 미리보기 패널, 흐름 패널, 검사기 패널, 컴포넌트 카탈로그 및 계층들 패널, 그리고 컨텍스트 브레드크럼즈(breadcrumbs)를 포함할 수 있다. 도 11b는 사용자 인터페이스(상단 중간), 흐름 패널(하단 중간), 검사기 패널(맨 우측), 및 컴포넌트 카탈로그(맨 좌측)의 미리보기를 도시하는 스크린샷을 예시한다. 도 11c는 많은 컴포넌트들과 컴포넌트들 사이의 접속들이 있는 복잡한 흐름도를 예시하는 흐름 패널을 더 상세히 예시한다. 도 11d는 사용자에 의해 선택될 수 있는 예시적인 컴포넌트 세트를 갖는 컴포넌트 카탈로그의 일 예를 예시한다. 컴포넌트 카탈로그는, 예를 들어, 아바타 배지(badge), 버튼 차트, 칩, 컨테이너, 대화상자(dialog), 아이콘, 이미지, 양식(form), 선형 진행 링크, 진행 스피너(spinner), 선택, 탭 패널들, 텍스트, 텍스트 입력을 위한 UI 컴포넌트들을 포함할 수 있다. 로직 컴포넌트들은, 예를 들어, 변환, 객체 생성, 값들 얻기(get values), 문자열 템플릿, 분기, 스플리터, 스위치를 포함할 수 있다. 다른 컴포넌트들은 디버그 및 콘솔을 포함할 수 있다. Stripe®, Twilio®, Salesforce®, AWS® 등과 같은 벤더 특정 통합들 또는 일반 Rest 컴포넌트들과 같은 통합 컴포넌트들이 또한 포함될 수 있다. 일부 구현예들에서, 사용자가 컴포넌트 카탈로그로부터 애플리케이션 흐름 패널 상으로 컨테이너들을 끌어다 놓는다. 사용자들은 또한 아래에서 더 상세히 설명되는 바와 같이 컴포넌트들을 구성하고 컴포넌트들의 노드들 사이에 호출 스트림들 또는 데이터 매핑들을 형성할 수 있다.

도 11e는 검사기 패널의 일 예를 예시한다. 검사기 패널은, 예를 들어, 컨테이너 스타일들, 레이아웃 스타일들, 간격(spacing), 정렬, 라벨들, 및 다른 세부사항들을 검사하는 것을 지원할 수 있다.

사용자맞춤화 컴포넌트들의 생성이 지원될 수 있다. 예를 들어, 컴포넌트 카탈로그는 앱 개발자들에 의해 생성된 사용자맞춤화 컴포넌트들의 기여로 시간이 지남에 따라 보완되는 지원된 기본 컴포넌트들의 초기 세트를 가질 수 있다. 추가적인 사용자맞춤화 컴포넌트들은 앱 개발자들에 의해 생성되고 컴포넌트 카탈로그에 추가될 수 있다. 하나의 구현예에서, 앱 개발자들은 VS 코드(여기서 비주얼 스튜디오 코드는 웹 및 클라우드 애플리케이션들을 구축하고 디버깅하기 위해 리파인되고 최적화된 코드 편집기임)와 같은 IDE들에 입주한 IDE 플러그인을 통해 사용자맞춤화 컴포넌트들을 생성할 수 있다. 컴포넌트 카탈로그가 제공되지 않거나 또는 시장에서 발견될 수 없는 컴포넌트가 있으면, 앱 개발자들은 사용자맞춤화 컴포넌트들을 생성할 유연성을 가진다. 그들은 올바른 인터페이스들을 구현하면서 자신들의 선택 언어(예컨대, 웹의 경우 이는 타입스크립트 또는 자바스크립트를 일 예로 할 것임)로 코드를 작성함으로써 그렇게 할 수 있다. 이들 사용자맞춤화 컴포넌트들은 UIflow 클라우드에 전송될 수 있고, 앱 개발자가 이들 컴포넌트들을 흐름 패널 속으로 끌어다 놓고 다른 컴포넌트들과 와이어 업(wire up)하는데 이용 가능하게 될 수 있다.

하나의 구현예에서, UI 프레임워크 컴포넌트들은 UI 컴포넌트들로서 래핑될 수 있고, 임의의 서드 파티 벤더 API들 또는 통합들이 데이터 컴포넌트로서 래핑될 수 있다. 일단 준비되면, 이들 컴포넌트들은 사용자가 컴포넌트들 사이에 흐름들 및 데이터 매핑들을 모델링하는 것을 시작할 수 있는 UIflow 미리보기 패널 또는 흐름 패널 속으로 드래그될 수 있다. 도 12는 사용자맞춤화 코드 컴포넌트가 생성될 수 있는 방법을 예시한다. UI 프레임워크 컴포넌트들은 UI 컴포넌트들로서 래핑될 수 있다. 추가로, 임의의 서드 파티 API들 또는 통합들이 데이터 컴포넌트로서 래핑될 수 있다. 일단 준비되면, 사용자맞춤화 컴포넌트들은 사용자가 컴포넌트들 사이에 흐름들 및 데이터 어핑(aping)을 모델링하기 위해 그것들을 사용할 수 있도록 UI 미리보기 패널 또는 흐름 패널 속으로 드래그될 수 있다.

도 13은 일 예에 따른 방법의 흐름도이다. 블록 1305에서 사용자가 컴포넌트들을 선택한다. 블록 1310에서, 사용자가 컴포넌트에서 블록 유형들을 구성하는 것과 같은 컴포넌트들을 옵션적으로 구성할 수 있다. 블록 1315에서, 사용자가 애플리케이션 흐름 그래프를 형성하기 위해 선택된 컴포넌트들의 노드들 사이에 호출 스트림들 및 데이터 매핑들을 정의한다. 애플리케이션 흐름 그래프는 UI 애플리케이션을 생성하는데 사용된다. 블록 1320에서, 사용자가 UI 애플리케이션을 옵션적으로 미리보기할 수 있다. 블록 1325에서, 사용자는 사용자 애플리케이션의 테스트를 옵션적으로 수행할 수 있다. 블록 1330에서, 사용자는 이를테면 중단점들을 사용하여 애플리케이션을 통해 단계별로 실행함으로써 UI 애플리케이션을 옵션적으로 디버깅할 수 있다. 블록 1335에서 UI 애플리케이션을 생성하는데 필요한 정의 파일들(또는 다른 정보)이 생성된다. 블록 1340에서 UI 애플리케이션이 배포된다.

도 14는 일 예에 따른 더 상세한 방법의 흐름도이다. 블록 1405에서, 사용자가 UI 컴포넌트들, 데이터 컴포넌트들, 로직 컴포넌트들, 및 변환 컴포넌트들을 포함할 수 있는 컴포넌트 카탈로그로부터 컴포넌트들을 선택한다. 블록 1410에서, 사용자가 구성 가능한 선택된 컴포넌트들을 옵션적으로 구성할 수 있다. 블록 1415에서, 사용자가 애플리케이션 흐름 성장을 형성하기 위해 UI 커맨드들(예컨대, 마우스 커맨드들)을 통해 선택된 컴포넌트들의 노드들 사이에 호출 스트림들 및 데이터 매핑들을 정의한다. 블록 1420에서, 사용자가 옵션적으로 해당 UI 애플리케이션을 미리보기한다. 블록 1425에서, 사용자가 이를테면 중단점들을 설정하고 애플리케이션을 통해 단계별로 실행함으로써, UI 애플리케이션을 옵션적으로 디버깅할 수 있다. 블록 1430에서, 애플리케이션 정의 파일들이 UI 애플리케이션에 대해 생성된다. 블록 1435에서, 도커 파일들이 생성된다. 블록 1440에서, UI 애플리케이션이 도커 파일들을 사용하여 배포된다.

도 15는 다른 동작 방법의 흐름도이다. 블록 1505에서, 시스템은 컴포넌트들을 선택하기 위해 사용자 컴포넌트를 수신하였으며, 여기서 각각의 컴포넌트는 컴포넌트 동작을 모델링하기 위한 각각의 컴포넌트 모델을 포함한다. 블록 1410에서, 시스템은 선택된 컴포넌트들의 노드들 사이에 호출 스트림들 및 데이터 매핑을 정의하기 위해 사용자 인터페이스 커맨드들을 수신하였다. 블록 1415에서, 시스템은 UI 스트림들을 통해 애플리케이션 로직 및 상태를 모델링한다. 블록 1420에서, 시스템은, 흐름 엔진을 통해, UI 애플리케이션에 대해 애플리케이션 로직 그래프를 순회한다. 블록 1425에서, 시스템은 UI 애플리케이션을 기술하는 파일들을 생성한다.

FlowLang의 다른 양태들

Flowlang에서, 모든 블록 입력들 및 출력들은 강하게 유형화되며, 이는 데이터 유형들이 설계 시간에 알려진다는 것을 의미한다. 이는 애플리케이션이 실행되기 전에 시스템이 사용자에게 에러 또는 경고들을 전달할 수 있는 정적 분석을 허가한다.

Flowlang은 디버깅을 지원하는 특징들을 포함할 수 있다. 예를 들어, Flowlang의 일부 구현예들에서 사용자들은 흐름들을 실행하기 위하여 개별 컴포넌트들에 대한 중단점들을 설정할 수 있고 컴포넌트들을 일시중지할 수 있어서 사용자가 특정 시점에서 컴포넌트 값들을 검사한 다음 "다음(next)" 버튼을 누름으로써 실행 흐름을 계속할 수 있다. 실행 흐름을 통해 단계별로 실행하도록 중단점들을 설정하는 것은 재귀적인 로직의 루프들 또는 섹션들을 디버깅할 때 특히 유용하다.

일부 구현예들에서, 흐름 패널은, 호출 접속들 또는 데이터 매핑 접속들 중 어느 하나에 대해, 앱 개발자들이 상이한 접속들에서 중단점들을 추가하는 것을 가능하게 한다. 앱이 실행될 때, 호출 실행은 (전통적인 코드 디버깅과 유사하게) 각각의 중단점에서 중지되고 앱 개발자들은 디버깅 목적으로 실행의 해당 지점에서 값들의 모두를 검사할 수 있다. 앱 개발자들은 중단점들에서 데이터 값들을 변경하여 애플리케이션 흐름의 나머지에 영향을 미칠 수 있다. 앱 개발자들은 애플리케이션이 디버그 모드에서 실행중인 동안 컴포넌트들 및 접속들을 강조표시함으로써 실행 경로를 시각적으로 볼 수 있다. 앱 개발자들은 각각의 실행 유닛을 통해 단계별로 실행하고(step over/into/out와 유사함) 애플리케이션이 각각의 단계에서 어떻게 실행되는지를 관찰할 수 있다. 앱 개발자들은 당면한 문제를 재현하기 위해 애플리케이션의 전체 상태를 저장하고 로딩할 수 있다.

일부 예들에서, 기능 테스트들이 지원될 수 있다. 앱 개발자들은 기능 테스트들을 생성하기 위해 동일한 시각적 언어를 사용할 것이다. 테스팅 환경은 개발 환경에서 이들 테스트들을 호스팅할 것이고 스케줄링된 시간 또는 액션에 대해 테스터들이 단일 또는 다수의 테스트들(테스트 스위트)을 수동으로 또는 자동으로 실행하는 것을 허용할 것이다.

다양한 다른 특징 및 최적화들이 지원될 수 있다. 하나의 구현예에서, MVF 호출 스트림들은 파선들로 나타내어지는 한편 MVF 데이터 매핑들은 실선들로 나타내어진다. 하나의 구현예에서, 호출 노드들(노드들의 입출력 쌍)만이 함께 접속될 수 있다. 하나의 구현예에서, 데이터 매핑 노드들(노드들의 입출력 쌍)만이 (송신되고 있는 데이터의 유형에 기초하여) 함께 접속될 수 있다.

일부 구현예들에서, 앱 개발자들은 상이한 방식들로 호출 스트림들을 강조표시할 수 있을 것이다. 하나의 예는 컴포넌트에 마우스 오버하는 것 또는 컴포넌트를 선택하는 것을 포함하며, 이는 모든 인바운드 및 아웃바운드 접속들이 강조표시되는 결과를 초래할 수 있다. 다른 예는 출력 노드에 마우스 오버하는 것 또는 출력 노드를 선택하는 것을 포함하며, 이는 모든 하류의 호출 스트림들이 강조표시되는 결과를 초래한다. 또 다른 예는 입력 노드에 마우스 오버하는 것 또는 입력 노드를 선택하는 것을 포함하며, 이는 모든 업스트림 호출 스트림들이 강조표시되는 결과를 초래한다.

하나의 구현예에서, 노드 재순서화가 지원된다. 더 보기 좋은 흐름 그래프들을 생성하기 위하여, 앱 개발자들은 접속 중첩을 감소하기 위하여, 입력 및 출력 노드들을 드래그함으로써 입력 및 출력 노드들을 재순서화할 수 있을 것이다.

하나의 구현예에서, 자동 레이아웃 특징이 지원된다. 일부 구현예들에서, 흐름 패널은 최소한의 스트림 크로스오버들로 가능한 최상의 레이아웃을 생성하기 위하여 컴포넌트들 및 노드들을 자동으로 위치시킬 "자동 레이아웃 특징"을 또한 가질 것이다.

사용자가 컴포넌트들을 자유롭게 이동시키도록 하는 포지셔닝 가이드들이 제공될 수 있으며, 흐름 패널은 중심, 좌측 에지, 및 우측 에지 정렬들에 기초하여 컴포넌트를 다른 컴포넌트들과 정렬하기 위하여 수직 및 수평 가이드 라인들을 그릴 것이다.

사용자들이 컴포넌트들을 이동할 때 접속들(예컨대, 호출 스트리밍 접속들 또는 데이터 매핑 접속들)이 고무 밴드처럼 탄성을 유지하도록 하는 접속 탄력성이 지원될 수 있다.

앱 개발자가 하나의 컴포넌트에서부터 다른 컴포넌트로 메서드를 노출시키기 원할 때, 관련된 액션들의 링크를 클릭하고, "인터페이스 생성"을 클릭한 다음, 인터페이스를 노출할 컴포넌트를 선택하는 옵션을 가지도록 하는 자동 인터페이스 생성이 또한 지원될 수 있다. 이는 전체 접속을 만들기 위해 올바른 수준에서 인터페이스 접속들을 자동으로 생성할 것이다.

컴포넌트들 및 접속들의 버전 호환성이 지원될 수 있다. 컴포넌트의 더 최신 버전이 이용 가능하면, 앱 개발자는 모든 호환성 체크가 통과되면 컴포넌트를 수동으로 또는 자동으로 업그레이드하도록 선택할 수 있다. 앱 개발자들은 더 새로운 버전의 컴포넌트들이 이용 가능한지 여부를 시각적으로 통지받을 수 있다. 앱 개발자들은 애플리케이션에서 사용되는 비호환 컴포넌트가 있을 때를 통지받을 것이다.

자동 제안(머신 러닝에 기초함)은 관련 컴포넌트들/접속들에 대해 지원될 수 있다. 일부 구현예들에서, 머신 러닝 기법들이 UI 설계자들을 돕기 위한 제안들을 하는데 사용된다. 최종 UIflow 그래프들에 대한 데이터와 UIflow 그래프들의 설계 중의 사용자 선택들은 훈련 세트 데이터베이스에 저장될 수 있다. 머신 러닝 알고리즘들은 UI 설계자들을 돕는데 사용될 수 있다. 현존 애플리케이션 흐름 그래프들을 훈련 세트들로서 사용함으로써, 어떤 컴포넌트들이 자동으로 추가될 다음 컴포넌트로서 관련이 있는지를 GPT-3와 같은 머신 러닝 알고리즘들을 사용하여 제안하는 것/예측하는 것을 시작할 수 있다. 마찬가지로, 접속들에 대해 제안들이 만들어질 수 있다. 이들 모델들은 또한 잠재적인 비효율성을 식별할 수 있고 당면한 목표들을 충족시키기 위한 더 나은 방식들을 제안할 수 있다.

라이브 협업이 또한 지원될 수 있어서. 다수의 앱 개발자들이 동일한 앱 및 동일한 분기에 로그인될 때, 그들은 라이브로 협업할 수 있도록 할 수 있다.

위의 설명에서, 설명을 목적으로, 수많은 특정 세부사항들이 언급되었다. 그러나, 개시된 기술들은 이들 특정 세부사항들의 임의의 주어진 서브세트 없이 실시될 수 있다는 것이 명백할 것이다. 다른 사례들에서, 구조들 및 디바이스들이 블록도 형태로 도시된다. 예를 들어, 개시된 기술들은 사용자 인터페이스들 및 특정 하드웨어를 참조하여 위의 일부 구현예들에서 설명된다.

"하나의 실시예", "일부 실시예들" 또는 "일 실시예"에 대한 본 명세서에서의 언급은 그 실시예에 관련하여 설명되는 특정한 특징, 구조, 또는 특성이 개시된 기술들의 적어도 일부 실시예들에 포함된다는 것을 의미한다. 명세서에서의 다양한 장소들에서의 "일부 실시예들에서"라는 문구의 출현은 반드시 모두가 동일한 실시예를 대해 언급하는 것은 아니다.

위의 상세한 설명들의 일부 부분들은 컴퓨터 메모리 내의 데이터 비트들에 대한 동작들의 프로세스들 및 심볼적인 표현들의 측면에서 제시되었다. 프로세스가 일반적으로 결과로 이어지는 자기 일관적 시퀀스의 단계들로 간주될 수 있다. 그 단계들은 물리량들의 물리적 조작들을 수반할 수 있다. 이들 수량들은 저장, 전달, 결합, 비교, 및 아니면 조작될 수 있는 전기적 또는 자기적 신호들의 형태를 취한다. 이들 신호들은 비트들, 값들, 엘리먼트들, 심볼들, 캐릭터들, 용어들, 숫자들 등의 형태로 지칭될 수 있다.

이들 및 유사한 용어들은 적절한 물리량들과 연관될 수 있고 이들 양들에 적용되는 라벨들로 간주될 수 있다. 이전의 논의로부터 명백하듯이 구체적으로 다르게 언급되지 않는 한, 설명 전체를 통해, 예컨대 "프로세싱하는" 또는 "컴퓨팅하는" 또는 "계산하는" 또는 "결정하는" 또는 "디스플레이하는" 등과 같은 용어들을 이용한 논의들은, 컴퓨터 시스템의 레지스터들 및 메모리들 내의 물리적(전자적) 양들로서 표현되는 데이터를 컴퓨터 시스템 메모리들 또는 레지스터들 또는 다른 그러한 정보 스토리지, 송신 또는 디스플레이 디바이스들 내의 물리량들로 유사하게 표현되는 다른 데이터로 조작 및 변환하는 컴퓨터 시스템, 또는 유사한 전자 컴퓨팅 디바이스의 액션 및 프로세스들을 지칭할 수 있다는 것이 이해된다.

개시된 기술들은 본 개시에서의 동작들을 수행하기 위한 장치에 또한 관련될 수 있다. 이 장치는 요구된 목적들을 위해 특별히 구성될 수 있거나, 또는 그것은 컴퓨터에 저장된 컴퓨터 프로그램에 의해 선택적으로 활성화되거나 또는 재구성되는 일반 목적 컴퓨터를 포함할 수 있다.

개시된 기술들은 전적으로 하드웨어 구현예, 전적으로 소프트웨어 구현예 또는 소프트웨어 엘리먼트 및 하드웨어 엘리먼트 양쪽 모두를 포함하는 일 구현예의 형태를 취할 수 있다. 일부 구현예들에서, 그 기술은 펌웨어, 상주 소프트웨어, 마이크로코드 등을 비제한적으로 포함하는 소프트웨어로 구현된다.

더욱이, 개시된 기술들은 컴퓨터 또는 임의의 명령 실행 시스템에 의한 사용을 위해 또는 컴퓨터 또는 임의의 명령 실행 시스템에 관련하여 프로그램 코드를 제공하는 비일시적 컴퓨터 사용가능 또는 컴퓨터 판독가능 매체로부터 액세스 가능한 컴퓨터 프로그램 제품의 형태를 취할 수 있다. 이 설명의 목적으로, 컴퓨터 사용가능 또는 컴퓨터 판독가능 매체는 명령 실행 시스템, 장치, 또는 디바이스에 의해 또는 관련하여 사용하기 위한 프로그램을 포함, 저장, 통신, 전파, 또는 전송할 수 있는 임의의 장치일 수 있다.

프로그램 코드를 저장 및/또는 실행하기에 적합한 컴퓨팅 시스템 또는 데이터 프로세싱 시스템은 시스템 버스를 통해 메모리 엘리먼트들에 직접적으로 또는 간접적으로 커플링되는 적어도 하나의 프로세서(예컨대, 하드웨어 프로세서)를 포함할 것이다. 메모리 엘리먼트들은 프로그램 코드의 실제 실행 동안 채용되는 국부 메모리, 벌크 스토리지, 및 실행 동안 코드가 벌크 스토리지로부터 검색되어야 하는 횟수를 줄이기 위하여 적어도 일부 프로그램 코드의 임시 저장을 제공하는 캐시 메모리들을 포함할 수 있다.

입출력 또는 I/O 디바이스들(비제한적으로, 키보드들, 디스플레이들, 포인팅 디바이스들 등을 포함함)은 직접적으로 또는 개재 I/O 제어기들을 통해 중 어느 하나로 시스템에 커플링될 수 있다.

네트워크 어댑터들은 데이터 프로세싱 시스템이 사설 또는 공공 네트워크들의 개재를 통해 다른 데이터 프로세싱 시스템들 또는 원격 프린터들 또는 저장 디바이스들에 커플링되는 것을 가능하게 하도록 시스템에 또한 커플링될 수 있다. 모뎀들, 케이블 모뎀들 및 이더넷 카드들은 현재 이용 가능한 네트워크 어댑터 유형들 중 단지 일부이다.

마지막으로, 본 개시에서 제시된 프로세스들 및 디스플레이들은 임의의 특정 컴퓨터 또는 다른 장치에 본질적으로 관련되지 않을 수 있다. 다양한 일반 목적 시스템들이 본원에서의 교시들에 따른 프로그램들과 함께 사용될 수 있거나, 또는 요구된 방법 단계들을 수행하기 위한 더욱 특수한 장치들을 구성하는데 편리함을 입증할 수 있다. 다양한 이들 시스템들에 대한 요구된 구조는 아래의 설명으로부터 나타날 것이다. 추가적으로, 개시된 기술들은 임의의 특정 프로그래밍 언어를 참조하여 설명되지 않았다. 다양한 프로그래밍 언어들이 본 개시에서 설명된 바와 같은 기술들의 교시들을 구현하는데 사용될 수 있다는 것이 이해될 것이다.

본원의 기법들 및 기술들의 구현예들의 앞서의 설명은 예시 및 설명의 목적으로 제시되었다. 본원의 기법들 및 기술들을 개시된 정밀한 형태로 제한하거나 포괄하도록 의도되지는 않는다. 많은 수정들 및 변형들이 위의 교시들의 관점에서 가능하다. 본원의 기법들 및 기술들의 범위는 이 상세한 설명에 의해 제한되지 않도록 의도된다. 본원의 기법들 및 기술들은 정신 또는 필수적인 특성들로부터 벗어남 없이 다른 특정 형태들로 구현될 수 있다. 비슷하게, 모듈들, 루틴들, 특징들, 속성들, 수법들 및 다른 양태들의 특정 명명 및 구분은 필수적이지도 중요하지도 않고, 본원의 기법들 및 기술들 또는 그것의 특징들을 구현하는 메커니즘들은 상이한 이름들, 구분들 및/또는 포맷들을 가질 수 있다. 더욱이, 본원 기술의 모듈들, 루틴들, 특징들, 속성들, 수법들 및 다른 양태들은 소프트웨어, 하드웨어, 펌웨어 또는 세 가지의 임의의 조합으로서 구현될 수 있다. 또한, 일 예가 모듈인 컴포넌트가 소프트웨어로서 구현되는 어디에서나, 컴포넌트는 자립형 프로그램으로서, 더 큰 프로그램의 일부로서, 복수의 개별 프로그램들로서, 정적으로 또는 동적으로 링크된 라이브러리로서, 커널 로딩가능 모듈로서, 디바이스 드라이버로서, 및/또는 컴퓨터 프로그래밍에서 현재 또는 미래에 알려지는 모든 및 임의의 다른 방식으로 구현될 수 있다. 추가로, 본원의 기법들 및 기술들은 임의의 특정 프로그래밍 언어로의 구현으로, 또는 임의의 특정 운영 체제 또는 환경에 대해 제한되지 않는다. 따라서, 본원 기법들 및 기술들의 개시는 제한이 아니라, 예시적인 것으로 의도된다.

Claims (20)

1. 시스템으로서,
   프로세서, 메모리, 및 컴퓨터 프로그램 명령들을 포함하며,
   컴퓨터 프로그램 명령들은,
   컴포넌트 카탈로그를 포함하여, 사용자 인터페이스 애플리케이션들을 구축하기 위한 시각적 흐름 언어를 갖는 사용자 인터페이스 설계 스튜디오 ― 상기 컴포넌트 카탈로그의 각각의 컴포넌트는, 상기 사용자 인터페이스 설계 스튜디오의 흐름 패널에서, 사용자 인터페이스를 작동시키는 양태를 표현하기 위해 선택 가능하고, 각각의 컴포넌트는 컴포넌트 모델을 캡슐화하고 하나 이상의 노드들을 기술하는 적어도 하나의 블록을 가짐 ― 를 구현하기 위한 것이며,
   사용자가 사용자 인터페이스 애플리케이션을 정의하기 위해 선택된 컴포넌트들의 노드들 사이에 호출 스트림들 및 데이터 매핑들을 정의할 수 있는,
   시스템.
2. 제1항에 있어서, 상기 컴포넌트 카탈로그의 상기 컴포넌트들은 UI 컴포넌트들과 데이터 컴포넌트들을 포함하는, 시스템.
3. 제1항에 있어서, 상기 컴포넌트 카탈로그의 상기 컴포넌트들은 로직 컴포넌트들과 변환 컴포넌트들을 더 포함하는, 시스템.
4. 제1항에 있어서, 애플리케이션 로직 그래픽이 상기 정의된 사용자 인터페이스 애플리케이션에 기초하여 생성되는, 시스템.
5. 제1항에 있어서, 상기 사용자 인터페이스 설계 스튜디오는 설계된 사용자 인터페이스 애플리케이션을 미리보기하기 위한 미리보기 패널을 포함하는, 시스템.
6. 제1항에 있어서, 상기 사용자 인터페이스 설계 스튜디오는, 사용자 정의 중단점들과 상기 정의된 중단점들을 통해 상기 정의된 사용자 인터페이스 애플리케이션을 단계별로 실행하는 것을 지원하는 디버거를 포함하는, 시스템.
7. 제1항에 있어서, 적어도 하나의 컴포넌트는 사용자에 의해 맞춤화되는, 시스템.
8. 제1항에 있어서, 상기 정의된 사용자 인터페이스 애플리케이션을 배포하기 위해 상기 정의된 사용자 인터페이스 애플리케이션에 대해 파일들이 생성되는, 시스템.
9. 제9항에 있어서, 상기 정의된 사용자 인터페이스 애플리케이션을 클라우드 및 기업 네트워크 중 적어도 하나를 통해 브라우저에 배포하기 위해 도커 이미지가 생성되는, 시스템.
10. 컴퓨터에 의해 구현되는 방법으로서,
    시각적 흐름 언어로 나타내어진 사용자 인터페이스 애플리케이션의 컴포넌트들의 사용자 선택을 수신하는 단계;
    상기 사용자 선택의 컴포넌트들의 노드들 사이의 호출 스트림들 및 데이터 매핑의 사용자 선택을 수신하는 단계;
    수신된 사용자 선택의 컴포넌트들 그리고 수신된 사용자 선택의 호출 스트림들 및 데이터 매핑들에 기초하여 애플리케이션 흐름 그래프를 생성하는 단계; 및
    상기 애플리케이션 흐름 그래프에 기초하여 사용자 인터페이스 애플리케이션을 배포하는데 필요한 정보를 생성하는 단계
    를 포함하는, 컴퓨터에 의해 구현되는 방법.
11. 제10항에 있어서, 각각의 컴포넌트는 캡슐화된 컴포넌트 모델을 포함하는, 컴퓨터에 의해 구현되는 방법.
12. 제11항에 있어서, UI 스트림들을 통해 애플리케이션 로직 및 상태를 모델링하는 단계를 더 포함하는, 컴퓨터에 의해 구현되는 방법.
13. 제12항에 있어서, UI 컴포넌트들, 로직 컴포넌트들, 데이터 컴포넌트들, 및 변환 컴포넌트들을 포함하는 컴포넌트들의 카탈로그를 제공하는 단계를 더 포함하는, 컴퓨터에 의해 구현되는 방법.
14. 컴퓨터에 의해 구현되는 방법으로서,
    사용자가 컴포넌트들의 선택과 컴포넌트들 사이의 정의된 호출 스트림들 및 데이터 매핑들로부터 상이한 컴포넌트 유형들을 선택하기 위한 시각적 흐름 언어를 제공하는 단계;
    컴포넌트들, 호출 스트림들, 및 데이터 매핑들을 정의하기 위해 상기 시각적 흐름 언어를 통해 입력된 사용자 커맨드들을 수신하는 단계; 및
    사용자 인터페이스 애플리케이션을 생성하는 단계
    를 포함하는, 컴퓨터에 의해 구현되는 방법.
15. 제14항에 있어서, 상기 사용자 인터페이스 애플리케이션을 정의하는 도커 이미지를 생성하는 단계와 생성된 도커 이미지를 사용하여 상기 사용자 인터페이스를 배포하는 단계를 더 포함하는, 컴퓨터에 의해 구현되는 방법.
16. 제14항에 있어서, 상기 상이한 컴포넌트 유형들은 UI 컴포넌트들, 로직 컴포넌트들, 데이터 컴포넌트들, 및 변환 컴포넌트들을 포함하는, 컴퓨터에 의해 구현되는 방법.
17. 제14항에 있어서, UI 스트림들을 통해 애플리케이션 로직 및 상태를 모델링하는 단계를 더 포함하는, 컴퓨터에 의해 구현되는 방법.
18. 제14항에 있어서, 수신된 사용자 선택의 컴포넌트들 및 수신된 사용자 선택의 호출 스트림들 및 데이터 매핑들에 기초하여 애플리케이션 흐름 그래프를 생성하는 단계를 더 포함하는, 컴퓨터에 의해 구현되는 방법.
19. 제14항에 있어서, 상기 사용자 인터페이스 애플리케이션에 대한 애플리케이션 로직 그래프를 생성하는 단계를 더 포함하는, 컴퓨터에 의해 구현되는 방법.
20. 프런트 엔드 UI 애플리케이션을 설계하는 컴퓨터에 의해 구현되는 방법으로서,
    사용자 인터페이스 애플리케이션을 설계하기 위한 시각적 흐름 언어를 포함하는 설계 스튜디오를 제공하는 단계; 및
    상기 시각적 흐름 언어로 표현된 UI 애플리케이션에 기초하여 애플리케이션 로직 그래프를 생성하는 흐름 엔진
    을 포함하는, 컴퓨터에 의해 구현되는 방법.

Images