KR20220106946A

KR20220106946A - User interface distribution method for multi-device interaction

Info

Publication number: KR20220106946A
Application number: KR1020220091130A
Authority: KR
Inventors: 신인식; 오상은; 김아현; 이선재; 고용민
Original assignee: 한국과학기술원
Priority date: 2019-10-16
Filing date: 2022-07-22
Publication date: 2022-08-01
Also published as: WO2021075919A1; KR20210045342A; KR102426198B1; KR102660531B1

Abstract

The present invention relates to a user interface distribution method for multi-device interaction and, more specifically, to a user interface distribution method for providing support so that a plurality of screens of a smart device can be used as a user interface in a flexible and fast manner without modification of the code of an application used on the device. According to the present invention, the user interface distribution method separates a subtree containing a target UI object of a host device and transferring the subtree to a guest device to make it possible to render the target UI object on an external device without modifying the application. In addition, the interaction between UI objects of the distributed device and host application logic is performed in a form of a local function call, so the local function call within the device is converted into an RPC call among devices transparently. Therefore, the interaction between devices can be maintained without modification of the application.

Description

User interface distribution method for multi-device interaction

본 발명은 다중 기기 상호작용을 위한 사용자 인터페이스 분산 방법에 관한 것으로서, 더욱 상세하게는 기기에서 사용하는 애플리케이션의 소스 코드를 수정함이 없이 유연하고 빠른 방식으로 다수의 스마트 기기의 화면들을 사용자 인터페이스로서 사용하도록 지원하기 위한 사용자 인터페이스 분산 방법에 관한 것이다.The present invention relates to a method of distributing a user interface for multi-device interaction, and more particularly, using the screens of a plurality of smart devices as a user interface in a flexible and fast manner without modifying the source code of the application used in the device. It relates to a user interface distribution method to support

도 1은 모바일 기기에서 사용자가 라이브 스트리밍 앱을 통하여 라이브 방송을 보는 중, 다른 시청자들과 채팅을 하기 위한 채팅창 사용자 인터페이스(user interface, UI)와 방송 영상 화면이 오버랩되는 상황을 도시한 도면이다.1 is a diagram illustrating a situation in which a user interface (UI) of a chat window for chatting with other viewers and a broadcast video screen overlap while a user is watching a live broadcast through a live streaming app on a mobile device.

도 1과 같이, 사용자가 보는 본 영상 화면과 UI 화면이 겹치게 되는 다양한 상황은, 본 영상을 온전한 화면으로 즐기고 싶은 사용자에게는 큰 불편함을 초래하는 문제점이 있었다. 이 외에도, 여러 기기에서 앱과 이를 위한 UI를 분산시켜 사용하고 싶은 필요가 존재하였다.As shown in FIG. 1 , various situations in which the user's main image screen and the UI screen overlap each other has a problem of causing great inconvenience to users who want to enjoy the main image as a full screen. In addition to this, there was a need to distribute the app and the UI for it across multiple devices.

이러한 문제점을 해결하기 위하여 이하에 기재한 논문 1(UIWear: Easily Adapting User Interfaces for Wearable Devices)에서는, 모바일 앱이 주어지면 그 앱의 일부 UI들을 이용하여 스마트워치 앱을 자동으로 만들어주는 개발 도구를 제시하였다. 그러나 논문 1에서는 개발 단계에서 정해진 UI들만 스마트워치에서 사용할 수 있다는 한계가 존재한다. 그러나 논문 1에서는 기존 모바일 앱에 대한 수정을 요구하며, 커스터마이징된 UI들은 제대로 지원할 수 없는 한계가 존재한다.In order to solve this problem, in Paper 1 (UIWear: Easily Adapting User Interfaces for Wearable Devices), a development tool that automatically creates a smartwatch app using some UIs of the mobile app is presented. did. However, in Paper 1, there is a limitation that only the UIs determined in the development stage can be used in the smart watch. However, in Paper 1, modifications to the existing mobile app are required, and customized UIs have limitations that cannot be properly supported.

또한 이하에 기재한 논문 2(CollaDroid: Automatic Augmentation of Android Application with Lightweight Interactive Collaboration)에서는 모바일 앱의 UI들을 다른 기기로 옮길 수 있도록 기존 앱들을 수정할 수 있는 개발 도구를 제시하였다. 그러나 논문 2에서도 기존 모바일 앱에 대한 수정을 요구하며, 커스터마이징된 UI들은 제대로 지원할 수 없는 한계가 존재한다.In addition, in Paper 2 (CollaDroid: Automatic Augmentation of Android Application with Lightweight Interactive Collaboration) described below, a development tool that can modify existing apps is presented so that UIs of mobile apps can be moved to other devices. However, thesis 2 also requires modifications to the existing mobile app, and there is a limit that the customized UI cannot be properly supported.

1. UIWear: Easily Adapting User Interfaces for Wearable Devices (MobiCom 2017)1. UIWear: Easily Adapting User Interfaces for Wearable Devices (MobiCom 2017) 2. CollaDroid: Automatic Augmentation of Android Application with Lightweight Interactive Collaboration (CSCW 2017)2. CollaDroid: Automatic Augmentation of Android Application with Lightweight Interactive Collaboration (CSCW 2017)

본 발명은 이와 같은 문제점을 해결하기 위해 창안된 것으로서, 호스트 기기(host device)의 타겟 UI 객체를 포함하는 subtree를 분리하여 외부 기기(guest device)로 옮김으로써, 앱을 수정하지 않고도 타겟 UI 객체를 외부 기기에서 렌더링할 수 있도록 하며, 또한 분산된 기기의 UI 객체들과 호스트 애플리케이션 로직(host app logic) 간의 상호작용은 로컬 함수 호출 형태로 이루어지기 때문에, 기기 내에서의 로컬 함수 호출을 기기 간 RPC 호출로 투명(transparent)하게 변환함으로써, 역시 앱을 수정하지 않고도 기기 간의 상호작용을 유지하도록 하는 방법을 제공하는데 그 목적이 있다.The present invention was devised to solve such a problem, and by separating the subtree including the target UI object of the host device and moving it to the external device (guest device), the target UI object is created without modifying the app. It enables rendering on an external device, and since interaction between UI objects on a distributed device and host application logic is done in the form of a local function call, the local function call within the device is converted to RPC between devices. By making the calls transparent, it also aims to provide a way to maintain interaction between devices without modifying the app.

이와 같은 목적을 달성하기 위하여 본 발명에 따른 제1 스마트 기기(이하 '호스트 기기(host device)'라 한다)의 특정 애플리케이션 수행시, 상기 호스트 기기의 플랫폼 역할을 수행하는 프로그램(이하 '호스트 플랫폼'이라 한다)의 동작에 의해 제2 스마트 기기(이하 '게스트 기기(guest device)'라 한다)로 사용자 인터페이스(user interface, UI)를 분산시키기 위한, 컴퓨터로 구현되는 방법은, (a) 근거리에 위치하여 게스트 기기로 사용될 수 있는 기기의 리스트 및, 다른 기기와의 다중 UI 화면을 이용하는 상호작용이 가능한 애플리케이션(이하 '상호작용 애플리케이션'이라 한다)의 리스트를 호스트 기기 화면에 디스플레이 하는 단계; (b) 사용자의 입력에 따라 선택된 기기(이하 '게스트 기기'라 한다)로, 사용자의 입력에 따라 선택된 애플리케이션의 패키지 파일을 송신하는 단계; 및, (c) 상기 단계(b)의 애플리케이션 중 하나의 애플리케이션(이하 '호스트 앱'이라 한다)의 동작 중, 상기 호스트 앱에서 사용하는 UI 객체(UI object)를 상기 단계(b)에서 선택된 게스트 기기로 송신하는 단계를 포함하고, 상기 단계(c)에서 선택된 게스트 기기로 송신하는 정보에는, 사용자의 선택에 따라, 상기 UI를 상기 게스트 기기로 이동(migration)할 것인지 또는 복사(replication)할 것인지에 대한 정보를 더 포함하고, 복사(replication)로 선택된 경우, 상기 단계(c) 이후, (d) 상기 선택된 UI를 렌더링(rendering)하여 상기 호스트 기기의 화면에 디스플레이하는 단계를 더 포함하며, 복사(replication)로 선택된 경우, 또는 이동(migration)으로 선택된 경우, 상기 단계(c) 이후, 상기 호스트 기기 화면에 디스플레이되는 UI 상태의 업데이트(이하 UI 상태의 업데이트를 'UI 업데이트'라 한다)를 위한 호스트 앱의 함수 호출(local function call)시, (e) 상기 함수 호출을 상기 호스트 앱이 인식하지 못하는 가운데 가로채어, 이를 기기간 함수 호출(cross-device function calls)(이하 ‘RPC(remote procedure call)’라 한다) 메시지로 변환하여 상기 게스트 기기로 송신하는 단계를 더 포함하고, 이로써 동일 기기 내에서의 UI 사용을 위한 함수 호출(local function call) 기능만을 가지고 있는 기존의 호스트 앱의 코드를 전혀 수정하지 않고도, 그 호스트 앱이 전혀 인식하지 못하는 가운데 호스트 플랫폼의 동작에 의해 기기간 함수 호출(cross-device function calls)이 이루어지게 되도록 한다.In order to achieve the above object, when a specific application of the first smart device (hereinafter referred to as 'host device') according to the present invention is executed, a program (hereinafter referred to as 'host platform') that performs the role of a platform of the host device A computer-implemented method for distributing a user interface (UI) to a second smart device (hereinafter referred to as a 'guest device') by the operation of Displaying a list of devices that are located and can be used as a guest device and a list of applications that can interact using a multi-UI screen with other devices (hereinafter referred to as 'interaction applications') on the screen of the host device; (b) transmitting the package file of the application selected according to the user's input to the device selected according to the user's input (hereinafter referred to as 'guest device'); And, (c) during the operation of one of the applications (hereinafter referred to as 'host app') among the applications of step (b), a UI object used in the host app is selected in step (b) by the guest The information transmitted to the guest device selected in step (c) includes, according to the user's selection, whether to migrate or replicate the UI to the guest device. further comprising information about, and when selected as replication, after step (c), (d) rendering the selected UI and displaying the selected UI on the screen of the host device, copying ( replication) or migration, after step (c), a host for updating the UI state displayed on the screen of the host device (hereinafter, the update of the UI state is referred to as 'UI update'). When making a local function call of an app, (e) intercepting the function call without the host app recognizing it, and making cross-device function calls (hereinafter 'remote procedure call (RPC)') and) converting the message into a message and sending it to the guest device, thereby not modifying the code of the existing host app, which has only a local function call function for UI use in the same device. It allows cross-device function calls to be made by the behavior of the host platform without any knowledge of the host app.

상기 단계(a) 이전에, (a0) 상기 호스트 기기에 설치된 상호작용 애플리케이션의 코드로부터 해당 애플리케이션에서 사용하는 UI 객체의 후보군(candidates)을 추출하여 저장하는 정적 코드 분석(static code analysis)'을 수행하는 단계를 더 포함할 수 있고, 상기 정적 코드 분석의 입력은 애플리케이션 코드 전체가 되며, 상기 정적 코드 분석의 출력은 해당 애플리케이션에서 사용하는 UI 객체 및 UI 자원들의 후보군(candidates)일 수 있다.Prior to step (a), (a0) performing 'static code analysis of extracting and storing candidates for UI objects used in the corresponding application from the code of the interactive application installed in the host device' and the input of the static code analysis becomes the entire application code, and the output of the static code analysis may be a candidate group of UI objects and UI resources used in the corresponding application.

상기 단계(c)는, (c11) 상기 호스트 앱의 동작 중, 상기 호스트 앱에서 사용하는 UI 중에서, 게스트 기기로 보내기 위한 UI element의 선택을 위한 사용자의 입력을 수신하는 단계; (c12) 상기 단계(a0)에서 추출된 UI 객체 후보군 중, 상기 단계(c11)에서 선택된 UI element를 게스트 기기에서 실행하기 위하여 실제로 사용되는 UI 객체를 추출하는 단계; (c13) 상기 단계(c12)에서 추출된 UI 객체를 상기 게스트 기기로 송신하는 단계; 및, (c14) 상기 단계(c11)에서 선택된 UI element를 호스트 플랫폼의 플랫폼 레이아웃 파일에 저장하는 단계를 포함할 수 있다.The step (c) may include (c11) receiving a user input for selecting a UI element to be sent to a guest device from among the UIs used by the host app during the operation of the host app; (c12) extracting a UI object actually used to execute the UI element selected in step (c11) in a guest device from among the UI object candidates extracted in step (a0); (c13) transmitting the UI object extracted in step (c12) to the guest device; and, (c14) storing the UI element selected in step (c11) in a platform layout file of the host platform.

상기 단계(c)는, (c21) 상기 호스트 앱의 동작 중, 해당 앱의 레이아웃 파일 또는 호스트 플랫폼의 플랫폼 레이아웃 파일(이하 통칭하여 ‘레이아웃 파일’이라 한다)을 파싱(parsing) 하는 단계; (c22) 상기 레이아웃 파일에 설정되어 있는 UI 객체를 추출하는 단계; 및, (c23) 상기 단계(c22)에서 추출된 UI 객체를 상기 게스트 기기로 송신하는 단계를 포함할 수 있다.The step (c) includes: (c21) parsing the layout file of the corresponding app or the platform layout file of the host platform (hereinafter collectively referred to as a 'layout file') during the operation of the host app; (c22) extracting a UI object set in the layout file; and, (c23) transmitting the UI object extracted in step (c22) to the guest device.

상기 단계(c)에서, 상기 UI 객체가 포함된 화면 전체를 게스트 기기로 보내주는 미러링(mirroring)을 수행할 수 있다.In step (c), mirroring of sending the entire screen including the UI object to the guest device may be performed.

상기 호스트 기기와 게스트 기기는, 기본 플랫폼으로서 같은 플랫폼을 사용하거나, 또는, 서로 다른 기본 플랫폼을 사용하는 경우에는 상기 호스트 앱이 플랫폼에 무관한 코드를 사용하는 앱일 수 있다.The host device and the guest device may use the same platform as a basic platform or, when using different basic platforms, the host app may be an app using a code independent of the platform.

복사(replication)로 선택된 경우, 상기 UI 업데이트를 위한 호스트 앱의 함수 호출이, 상기 게스트 기기에서의 사용자 입력에 의해 발생되는 경우, 상기 단계(e) 이전에, (e01) 상기 게스트 기기로부터, 상기 UI를 통하여 사용자에 의해 입력된 데이터를 수신하여 상기 호스트 기기 화면에 디스플레이하는 단계를 더 포함할 수 있다.When replication is selected, when a function call of the host app for updating the UI is generated by a user input in the guest device, before step (e), (e01) from the guest device, the The method may further include receiving data input by the user through the UI and displaying the received data on the screen of the host device.

복사(replication)로 선택된 경우, 상기 UI 업데이트를 위한 호스트 앱의 함수 호출이, 상기 호스트 기기에서의 사용자 입력에 의해 발생되는 경우, 상기 단계(e) 이전에, (e02) 상기 호스트 기기의 UI를 통하여 사용자에 의해 입력된 데이터를 수신하는 단계를 더 포함할 수 있다.When replication is selected, when a function call of the host app for updating the UI is generated by a user input in the host device, before step (e), (e02) the UI of the host device It may further include the step of receiving data input by the user through the.

복사(replication)로 선택된 경우, (g) 호스트 기기에서 UI 업데이트를 수행하는 단계를 더 포함할 수 있다.When replication is selected, the method may further include (g) performing a UI update in the host device.

복사(replication)로 선택된 경우, (h1) 상기 게스트 기기로부터 사용자 입력 데이터를 수신시 이를 호스트 기기 화면의 UI를 통하여 디스플레이하는 단계를 더 포함할 수 있다.The method may further include (h1) receiving user input data from the guest device and displaying it through a UI of a screen of the host device when replication is selected.

복사(replication)로 선택된 경우, (h21) 상기 호스트 기기의 UI를 통하여 사용자에 의해 입력된 데이터를 수신시 이를 호스트 기기 화면의 UI를 통하여 디스플레이하는 단계; 및, (h22) 상기 사용자에 의해 입력된 데이터를 게스트 기기로 송신하는 단계를 더 포함할 수 있다.when replication is selected, (h21) displaying data inputted by a user through the UI of the host device through the UI of the host device screen when receiving data; and, (h22) transmitting the data input by the user to the guest device.

상기 단계(e)는, (e11) 상기 함수의 호출시, 미리 교체 설정되어 있는 코드변환함수가 호출되는 단계; (e12) 상기 코드변환함수에 의해 상기 함수를 RPC 메시지로 변환하는 단계; 및, (e13) 상기 RPC 메시지를 상기 게스트 기기로 송신하는 단계를 포함할 수 있다.The step (e), (e11) when the function is called, a code conversion function set in advance is called; (e12) converting the function into an RPC message by the code conversion function; and, (e13) transmitting the RPC message to the guest device.

상기 단계(e) 이후, (f1) 상기 RPC 호출 수행 후에 돌아올 리턴 어드레스를 저장하는 단계; (f2) 상기 게스트 기기로부터 상기 RPC 호출에 대한 리턴값 또는 에러 코드를 수신하는 단계; 및, (f3) 상기 리턴 어드레스로 돌아가 다음 단계를 수행하는 단계를 더 포함할 수 있다.after the step (e), (f1) storing a return address to be returned after performing the RPC call; (f2) receiving a return value or an error code for the RPC call from the guest device; and, (f3) returning to the return address and performing the next step.

이동(migration)으로 선택된 경우, (i) 상기 게스트 기기로부터 호스트 앱 함수 호출을 위한 RPC 메시지를 수신한 경우, 해당 호스트 앱 함수를 호출하는 단계를 더 포함할 수 있다.The method may further include: (i) calling the corresponding host app function when receiving an RPC message for calling the host app function from the guest device when migration is selected.

상기 RPC 메시지의 포함 인자(argument)가 참조형 인자(reference type argument)인 경우, 상기 RPC 메시지와 함께, 상기 참조형 인자가 가리키는 데이터 값을 상기 게스트 기기로 송신할 수 있다.When the inclusion argument of the RPC message is a reference type argument, a data value indicated by the reference type argument may be transmitted together with the RPC message to the guest device.

본 발명의 다른 측면에 따르면, 제1 스마트 기기(이하 '호스트 기기(host device)'라 한다)의 특정 애플리케이션 수행시, 제2 스마트 기기(이하 '게스트 기기(guest device)'라 한다)의 플랫폼 역할을 수행하는 프로그램(이하 '게스트 플랫폼'이라 한다)의 동작에 의해, 상기 호스트 기기로부터 사용자 인터페이스(user interface, UI)를 받아 상기 게스트 기기에서 상기 UI를 수행하기 위한, 컴퓨터로 구현되는 방법은, (a) 호스트 기기로부터, 사용자의 입력에 따라 선택된 애플리케이션(이하 '호스트 앱'이라 한다)의 패키지 파일을 수신하는 단계; (b) 호스트 기기로부터 UI 객체(UI object)를 수신하는 단계; 및, (c) 상기 단계(b)에서 수신한 UI 객체에 따라 UI를 렌더링(rendering)하여 상기 게스트 기기의 화면에 디스플레이하는 단계를 포함하고, 상기 단계(b)에서 수신하는 정보에는, 상기 UI가 상기 게스트 기기로 이동(migration)되는 것인지 또는 복사(replication)되는 것인지에 대한 정보를 더 포함하며, 상기 UI가 상기 게스트 기기로 이동(migration)된 경우, (j1) 상기 게스트 기기의 UI를 통하여 사용자에 의해 입력된 데이터를 수신하는 단계; 및, (j2) 상기 단계(j1)에서 입력된 데이터에 따라, 호스트 앱 수행을 위한 함수 호출(local function call)을 인지한 경우, 이를 가로채어 RPC(remote procedure call)로 변환하여 상기 호스트 기기로 송신하는 단계를 더 포함한다.According to another aspect of the present invention, when a specific application is executed by a first smart device (hereinafter referred to as a 'host device'), the platform of the second smart device (hereinafter referred to as a 'guest device') A computer-implemented method for receiving a user interface (UI) from the host device and performing the UI in the guest device by the operation of a program that performs a role (hereinafter referred to as a 'guest platform') , (a) receiving, from a host device, a package file of an application selected according to a user's input (hereinafter referred to as a 'host app'); (b) receiving a UI object (UI object) from the host device; and, (c) rendering a UI according to the UI object received in step (b) and displaying it on the screen of the guest device, wherein the information received in step (b) includes the UI further includes information on whether the is moved to the guest device or copied (replication), and when the UI is migrated to the guest device, (j1) a user through the UI of the guest device receiving data input by and (j2) when a local function call for executing the host app is recognized according to the data input in the step (j1), it is intercepted and converted into a remote procedure call (RPC) to the host device It further comprises the step of transmitting.

상기 단계(b)에서, 상기 UI 객체가 포함된 화면 전체를 수신한 경우, 상기 단계(b)와 단계(c) 사이에, (b1) 상기 수신한 화면에서, UI element의 선택을 위한 사용자의 입력을 수신하는 단계를 더 포함할 수 있고, 상기 단계(c)의 수신한 UI 객체는, 상기 단계(b1)에서 선택된 UI element에 대한 UI 객체일 수 있다.In the step (b), when the entire screen including the UI object is received, between steps (b) and (c), (b1) the user for selecting a UI element in the received screen The method may further include receiving an input, and the UI object received in step (c) may be a UI object for the UI element selected in step (b1).

상기 단계(c) 이후, (d) 상기 호스트 기기로부터, 상기 게스트 기기 화면에 디스플레이되는 UI 상태의 업데이트(이하 UI 상태의 업데이트를 'UI 업데이트'라 한다)를 위한 기기간 함수 호출(cross-device function calls)(이하 ‘RPC(remote procedure call)’라 한다) 메시지 메시지를 수신한 경우, 상기 호스트 기기 화면의 UI에 대한 UI 업데이트를 수행하는 단계를 더 포함할 수 있다.After step (c), (d) a cross-device function is called from the host device to update the UI state displayed on the screen of the guest device (hereinafter, the update of the UI state is referred to as 'UI update'). calls) (hereinafter referred to as 'remote procedure call (RPC)') message, the method may further include performing a UI update on the UI of the screen of the host device.

상기 UI가 상기 게스트 기기로 복사(replication)된 경우, (e) 상기 게스트 기기의 UI를 통하여 사용자에 의해 입력된 데이터를 수신한 경우, 그 데이터를 상기 호스트 기기로 송신하는 단계를 더 포함할 수 있다.The method may further include, when the UI is copied to the guest device, (e) when data input by a user through the UI of the guest device is received, transmitting the data to the host device. have.

상기 호스트 기기로부터 분산되는 사용자 인터페이스를 수행하기 위한, 컴퓨터로 구현되는 방법은, (f) 상기 단계(e)에서 수신한 데이터에 따라, 호스트 앱 수행을 위한 함수 호출(local function call)을 인지하는 단계를 더 포함할 수 있고, 이 경우 호출된 함수를 RPC(remote procedure call)로 변환하지 않는(suppression) 것일 수 있다.A computer-implemented method for executing a user interface distributed from the host device is (f) recognizing a local function call for executing a host app according to the data received in step (e) It may further include a step, and in this case, it may be that the called function is not converted to a remote procedure call (RPC) (suppression).

상기 단계(f) 이후, (g) 상기 호스트 기기로부터 수신하는, 상기 단계(f)에서 호출된 함수의 리턴값을 수신하여, 상기 호출된 함수 수행 다음 단계로 진행하는 단계를 더 포함할 수 있다.After the step (f), the method may further include (g) receiving a return value of the function called in step (f) received from the host device, and proceeding to the next step of performing the called function. .

상기 UI가 상기 게스트 기기로 복사(replication)된 경우, (h) 상기 호스트 기기로부터 사용자 입력 데이터를 수신시, 이를 게스트 기기 화면의 UI를 통하여 디스플레이하는 단계를 더 포함할 수 있다.The method may further include, when the UI is replicated to the guest device, (h) receiving user input data from the host device, and displaying it through a UI on a screen of the guest device.

상기 호스트 기기로부터 분산되는 사용자 인터페이스를 수행하기 위한, 컴퓨터로 구현되는 방법은, (i) 상기 단계(h)에서 수신한 데이터에 따라, 호스트 앱 수행을 위한 함수 호출(local function call)을 인지하는 단계를 더 포함할 수 있고, 이 경우 호출된 함수를 RPC(remote procedure call)로 변환하지 않는(suppression) 것일 수 있다.A computer-implemented method for executing a user interface distributed from the host device is (i) recognizing a local function call for executing a host app according to the data received in step (h) It may further include a step, and in this case, it may be that the called function is not converted to a remote procedure call (RPC) (suppression).

상기 단계(j2)는, (j21) 상기 함수의 호출시, 미리 교체 설정되어 있는 코드변환함수가 호출되는 단계; (j22) 상기 코드변환함수에 의해 상기 함수를 RPC 메시지로 변환하는 단계; 및, (j23) 상기 RPC 메시지를 호스트 기기로 송신하는 단계를 포함할 수 있다.The step (j2), (j21) when the function is called, a code conversion function set in advance is called; (j22) converting the function into an RPC message by the code conversion function; and (j23) transmitting the RPC message to the host device.

상기 단계(f) 이후, 또는 상기 단계(i) 이후, 상기 호스트 기기로부터 수신하는, 상기 단계(f) 또는 상기 단계(i)에서 호출된 함수의 리턴값을 수신하여, 상기 호출된 함수 수행 다음 단계로 진행하는 단계를 더 포함할 수 있다.After step (f) or after step (i), the return value of the function called in step (f) or step (i) received from the host device is received, and the called function is executed after It may further include a step of proceeding to a step.

본 발명의 또 다른 측면에 따르면, 특정 애플리케이션 수행시, 제2 스마트 기기(이하 '게스트 기기(guest device)'라 한다)로 사용자 인터페이스(user interface, UI)를 분산시키는 기능을 수행하는 제1 스마트 기기(이하 '호스트 기기(host device)'라 한다)는, 적어도 하나의 프로세서; 및 컴퓨터로 실행가능한 명령을 저장하는 적어도 하나의 메모리를 포함하되, 상기 적어도 하나의 메모리에 저장된 상기 컴퓨터로 실행가능한 명령은, 상기 적어도 하나의 프로세서에 의하여, (a) 근거리에 위치하여 게스트 기기로 사용될 수 있는 기기의 리스트 및, 다른 기기와의 다중 UI 화면을 이용하는 상호작용이 가능한 애플리케이션(이하 '상호작용 애플리케이션'이라 한다)의 리스트를 호스트 기기 화면에 디스플레이 하는 단계; (b) 사용자의 입력에 따라 선택된 기기(이하 '게스트 기기'라 한다)로, 사용자의 입력에 따라 선택된 애플리케이션의 패키지 파일을 송신하는 단계; 및, (c) 상기 단계(b)의 애플리케이션 중 하나의 애플리케이션(이하 '호스트 앱'이라 한다)의 동작 중, 상기 호스트 앱에서 사용하는 UI 객체(UI object)를 상기 단계(b)에서 선택된 게스트 기기로 송신하는 단계가 실행되도록 하고, 상기 단계(c)에서 선택된 게스트 기기로 송신하는 정보에는, 사용자의 선택에 따라, 상기 UI를 상기 게스트 기기로 이동(migration)할 것인지 또는 복사(replication)할 것인지에 대한 정보를 더 포함하고, 복사(replication)로 선택된 경우, 상기 단계(c) 이후, (d) 상기 선택된 UI를 렌더링(rendering)하여 상기 호스트 기기의 화면에 디스플레이하는 단계가 더 실행되도록 하며, 복사(replication)로 선택된 경우, 또는 이동(migration)으로 선택된 경우, 상기 단계(c) 이후, 상기 호스트 기기 화면에 디스플레이되는 UI 상태의 업데이트(이하 UI 상태의 업데이트를 'UI 업데이트'라 한다)를 위한 호스트 앱의 함수 호출(local function call)시, (e) 상기 함수 호출을 상기 호스트 앱이 인식하지 못하는 가운데 가로채어, 이를 기기간 함수 호출(cross-device function calls)(이하 ‘RPC(remote procedure call)’라 한다) 메시지로 변환하여 상기 게스트 기기로 송신하는 단계가 더 실행되도록 하고, 이로써 동일 기기 내에서의 UI 사용을 위한 함수 호출(local function call) 기능만을 가지고 있는 기존의 호스트 앱의 코드를 전혀 수정하지 않고도, 그 호스트 앱이 전혀 인식하지 못하는 가운데 호스트 플랫폼의 동작에 의해 기기간 함수 호출(cross-device function calls)이 이루어지게 되도록 한다.According to another aspect of the present invention, a first smart device that performs a function of distributing a user interface (UI) to a second smart device (hereinafter referred to as a 'guest device') when a specific application is executed The device (hereinafter referred to as a 'host device') may include at least one processor; and at least one memory for storing computer-executable instructions, wherein the computer-executable instructions stored in the at least one memory are transmitted by the at least one processor (a) to a guest device located in a local area. displaying a list of devices that can be used and a list of applications that can interact using a multi-UI screen with other devices (hereinafter referred to as 'interaction applications') on the host device screen; (b) transmitting the package file of the application selected according to the user's input to the device selected according to the user's input (hereinafter referred to as 'guest device'); And, (c) during the operation of one of the applications (hereinafter referred to as 'host app') among the applications of step (b), a UI object used in the host app is selected in step (b) by the guest The step of transmitting to the device is executed, and the information to be transmitted to the guest device selected in step (c) includes whether to migrate or replicate the UI to the guest device according to the user's selection. further including information on whether or not it is, and when selected as a copy, after the step (c), (d) rendering the selected UI and displaying it on the screen of the host device to be further executed, When selected as replication or migration, after step (c), the update of the UI state displayed on the screen of the host device (hereinafter, the update of the UI state is referred to as 'UI update') When a local function call of a host app for )') message and sending it to the guest device is further executed, so that the code of the existing host app, which has only a local function call function for UI use in the same device, is Allows cross-device function calls to be made by the behavior of the host platform without any modification at all and completely unknown to the host app.

본 발명의 또 다른 측면에 따르면, 제1 스마트 기기(이하 '호스트 기기(host device)'라 한다)의 특정 애플리케이션 수행시, 상기 호스트 기기로부터 사용자 인터페이스(user interface, UI)를 받아, 상기 UI를 수행하는 제2 스마트 기기(이하 '게스트 기기(guest device)'라 한다)는, 적어도 하나의 프로세서; 및 컴퓨터로 실행가능한 명령을 저장하는 적어도 하나의 메모리를 포함하되, 상기 적어도 하나의 메모리에 저장된 상기 컴퓨터로 실행가능한 명령은, 상기 적어도 하나의 프로세서에 의하여, (a) 호스트 기기로부터, 사용자의 입력에 따라 선택된 애플리케이션(이하 '호스트 앱'이라 한다)의 패키지 파일을 수신하는 단계; (b) 호스트 기기로부터 UI 객체(UI object)를 수신하는 단계; 및, (c) 상기 단계(b)에서 수신한 UI 객체에 따라 UI를 렌더링(rendering)하여 상기 게스트 기기의 화면에 디스플레이하는 단계가 실행되도록 하고, 상기 단계(b)에서 수신하는 정보에는, 상기 UI가 상기 게스트 기기로 이동(migration)되는 것인지 또는 복사(replication)되는 것인지에 대한 정보를 더 포함하며, 상기 UI가 상기 게스트 기기로 이동(migration)된 경우, (j1) 상기 게스트 기기의 UI를 통하여 사용자에 의해 입력된 데이터를 수신하는 단계; 및, (j2) 상기 단계(j1)에서 입력된 데이터에 따라, 호스트 앱 수행을 위한 함수 호출(local function call)을 인지한 경우, 이를 가로채어 RPC(remote procedure call)로 변환하여 상기 호스트 기기로 송신하는 단계가 더 실행되도록 한다.According to another aspect of the present invention, when a specific application of a first smart device (hereinafter referred to as a 'host device') is executed, a user interface (UI) is received from the host device, and the UI is displayed. The performing second smart device (hereinafter referred to as 'guest device') may include at least one processor; and at least one memory storing computer-executable instructions, wherein the computer-executable instructions stored in the at least one memory are executed by the at least one processor: (a) from a host device; receiving a package file of the selected application (hereinafter referred to as 'host app') according to the method; (b) receiving a UI object (UI object) from the host device; and (c) rendering the UI according to the UI object received in step (b) and displaying it on the screen of the guest device, and the information received in step (b) includes, It further includes information on whether the UI is migrated or copied to the guest device, and when the UI is migrated to the guest device, (j1) through the UI of the guest device receiving data input by a user; and (j2) when a local function call for executing the host app is recognized according to the data input in the step (j1), it is intercepted and converted into a remote procedure call (RPC) to the host device The sending step is further executed.

본 발명의 또 다른 측면에 따르면, 제1 스마트 기기(이하 '호스트 기기(host device)'라 한다)의 특정 애플리케이션 수행시, 제2 스마트 기기(이하 '게스트 기기(guest device)'라 한다)로 사용자 인터페이스(user interface, UI)를 분산시키기 위하여 상기 호스트 기기 상에서 동작하는, 비일시적 저장매체에 저장된 컴퓨터 프로그램(이하 '호스트 플랫폼'이라 한다)은, 비일시적 저장 매체에 저장되며, 프로세서에 의하여, (a) 근거리에 위치하여 게스트 기기로 사용될 수 있는 기기의 리스트 및, 다른 기기와의 다중 UI 화면을 이용하는 상호작용이 가능한 애플리케이션(이하 '상호작용 애플리케이션'이라 한다)의 리스트를 호스트 기기 화면에 디스플레이 하는 단계; (b) 사용자의 입력에 따라 선택된 기기(이하 '게스트 기기'라 한다)로, 사용자의 입력에 따라 선택된 애플리케이션의 패키지 파일을 송신하는 단계; 및, (c) 상기 단계(b)의 애플리케이션 중 하나의 애플리케이션(이하 '호스트 앱'이라 한다)의 동작 중, 상기 호스트 앱에서 사용하는 UI 객체(UI object)를 상기 단계(b)에서 선택된 게스트 기기로 송신하는 단계가 실행되도록 하는 명령을 포함하고, 상기 단계(c)에서 선택된 게스트 기기로 송신하는 정보에는, 사용자의 선택에 따라, 상기 UI를 상기 게스트 기기로 이동(migration)할 것인지 또는 복사(replication)할 것인지에 대한 정보를 더 포함하고, 복사(replication)로 선택된 경우, 상기 단계(c) 이후, (d) 상기 선택된 UI를 렌더링(rendering)하여 상기 호스트 기기의 화면에 디스플레이하는 단계가 실행되도록 하는 명령을 더 포함하며, 복사(replication)로 선택된 경우, 또는 이동(migration)으로 선택된 경우, 상기 단계(c) 이후, 상기 호스트 기기 화면에 디스플레이되는 UI 상태의 업데이트(이하 UI 상태의 업데이트를 'UI 업데이트'라 한다)를 위한 호스트 앱의 함수 호출(local function call)시, (e) 상기 함수 호출을 상기 호스트 앱이 인식하지 못하는 가운데 가로채어, 이를 기기간 함수 호출(cross-device function calls)(이하 ‘RPC(remote procedure call)’라 한다) 메시지로 변환하여 상기 게스트 기기로 송신하는 단계가 실행되도록 하는 명령을 더 포함하고, 이로써 동일 기기 내에서의 UI 사용을 위한 함수 호출(local function call) 기능만을 가지고 있는 기존의 호스트 앱의 코드를 전혀 수정하지 않고도, 그 호스트 앱이 전혀 인식하지 못하는 가운데 호스트 플랫폼의 동작에 의해 기기간 함수 호출(cross-device function calls)이 이루어지게 되도록 한다.According to another aspect of the present invention, when a specific application is executed by a first smart device (hereinafter referred to as a 'host device'), a second smart device (hereinafter referred to as a 'guest device') is used. A computer program stored in a non-transitory storage medium (hereinafter referred to as a 'host platform') that operates on the host device to distribute a user interface (UI) is stored in the non-transitory storage medium, and is (a) A list of devices that can be used as a guest device located in a short distance and a list of applications that can interact using a multi-UI screen with other devices (hereinafter referred to as 'interaction applications') are displayed on the screen of the host device to do; (b) transmitting the package file of the application selected according to the user's input to the device selected according to the user's input (hereinafter referred to as 'guest device'); And, (c) during the operation of one of the applications (hereinafter referred to as 'host app') among the applications of step (b), a UI object used in the host app is selected in step (b) by the guest a command for executing the step of transmitting to the device; and the information to be transmitted to the guest device selected in step (c) includes whether to migrate or copy the UI to the guest device according to the user's selection Further including information on whether to (replication), and if selected as a copy (replication), after the step (c), (d) the step of rendering the selected UI (rendering) and displaying it on the screen of the host device is executed It further includes a command to make it happen, and when selected as replication or migration, after step (c), updating the UI state displayed on the screen of the host device (hereinafter referred to as updating the UI state) When calling a local function call of the host app for 'UI update'), (e) intercepting the function call without the host app recognizing it, and calling it cross-device function calls (hereinafter referred to as 'remote procedure call (RPC)') further includes a command for converting a message into a message and transmitting the message to the guest device to be executed, thereby calling a function for UI use in the same device (local function call) ) function, cross-device function calls are made by the operation of the host platform without the host app recognizing it at all, without modifying the code of the existing host app.

본 발명의 또 다른 측면에 따르면, 제1 스마트 기기(이하 '호스트 기기(host device)'라 한다)의 특정 애플리케이션 수행시, 상기 호스트 기기로부터 사용자 인터페이스(user interface, UI)를 받아 제2 스마트 기기(이하 '게스트 기기(guest divece)'라 한다)에서 상기 UI를 수행하기 위하여 상기 게스트 기기 상에서 동작하는, 비일시적 저장매체에 저장된 컴퓨터 프로그램(이하 '게스트 플랫폼'이라 한다)은, 비일시적 저장매체에 저장되며, 프로세서에 의하여, (a) 호스트 기기로부터, 사용자의 입력에 따라 선택된 애플리케이션(이하 '호스트 앱'이라 한다)의 패키지 파일을 수신하는 단계; (b) 호스트 기기로부터 UI 객체(UI object)를 수신하는 단계; 및, (c) 상기 단계(b)에서 수신한 UI 객체에 따라 UI를 렌더링(rendering)하여 상기 게스트 기기의 화면에 디스플레이하는 단계가 실행되도록 하는 명령을 포함하고, 상기 단계(b)에서 수신하는 정보에는, 상기 UI가 상기 게스트 기기로 이동(migration)되는 것인지 또는 복사(replication)되는 것인지에 대한 정보를 더 포함하며, 상기 UI가 상기 게스트 기기로 이동(migration)된 경우, (j1) 상기 게스트 기기의 UI를 통하여 사용자에 의해 입력된 데이터를 수신하는 단계; 및, (j2) 상기 단계(j1)에서 입력된 데이터에 따라, 호스트 앱 수행을 위한 함수 호출(local function call)을 인지한 경우, 이를 가로채어 RPC(remote procedure call)로 변환하여 상기 호스트 기기로 송신하는 단계가 실행되도록 하는 명령을 더 포함한다.According to another aspect of the present invention, when a specific application is executed by a first smart device (hereinafter referred to as a 'host device'), the second smart device receives a user interface (UI) from the host device A computer program (hereinafter referred to as a 'guest divece') stored in a non-transitory storage medium (hereinafter referred to as a 'guest divece') that operates on the guest device to perform the UI in the 'guest divece' is a non-transitory storage medium stored in, by the processor, (a) receiving, from a host device, a package file of an application selected according to a user's input (hereinafter referred to as a 'host app'); (b) receiving a UI object (UI object) from the host device; and, (c) rendering a UI according to the UI object received in step (b) and displaying it on the screen of the guest device to be executed, and receiving in step (b) The information further includes information on whether the UI is migrated or copied to the guest device, and when the UI is migrated to the guest device, (j1) the guest device receiving data input by a user through a UI of and (j2) when a local function call for executing the host app is recognized according to the data input in the step (j1), it is intercepted and converted into a remote procedure call (RPC) to the host device instructions for causing the sending step to be executed.

본 발명에 의하면, 호스트 기기(host device)의 타겟 UI 객체를 포함하는 subtree를 분리하여 외부 기기(guest device)로 옮김으로써, 앱을 수정하지 않고도 타겟 UI 객체를 외부 기기에서 렌더링할 수 있도록 하며, 또한 분산된 기기의 UI 객체들과 호스트 애플리케이션 로직(host app logic) 간의 상호작용은 로컬 함수 호출 형태로 이루어지기 때문에, 기기 내에서의 로컬 함수 호출을 기기 간 RPC 호출로 투명(transparent)하게 변환함으로써, 역시 앱을 수정하지 않고도 기기 간의 상호작용을 유지하도록 하는 방법을 제공하는 효과가 있다.According to the present invention, by separating the subtree including the target UI object of the host device and moving it to the external device (guest device), the target UI object can be rendered in the external device without modifying the app, In addition, since the interaction between the UI objects of the distributed device and the host application logic is made in the form of a local function call, by transparently converting a local function call within the device into an RPC call between devices, , also has the effect of providing a way to maintain interaction between devices without modifying the app.

도 1은 모바일 기기에서 사용자가 라이브 스트리밍 앱을 통하여 라이브 방송을 보는 중, 다른 시청자들과 채팅을 하기 위한 채팅창 사용자 인터페이스(user interface, UI)와 방송 영상 화면이 오버랩되는 상황을 도시한 도면.
도 2는 본 발명에 따른 사용자 인터페이스 분산 방법을 이용하여 채팅창 UI를 다른 기기(guest device)로 분산시킨 상황을 도시한 도면.
도 3은 본 발명이 적용되는 기본 플랫폼의 일 실시예인 안드로이드(android)의 UI 구조를 도시한 도면.
도 4는 본 발명에 따른 사용자 인터페이스 분산 방법을 수행하는 전체적인 프로세스를 나타내는 순서도.
도 5는 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 분산(distribution)을 설명하기 위한 모식도.
도 6은 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 상호작용(interaction)을 설명하기 위한 모식도.
도 7은 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 이동(migration) 프로세스 중, UI 업데이트를 나타내는 순서도.
도 8은 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 이동(migration) 프로세스 중, 사용자의 UI 입력을 통한 호스트 앱 함수 호출을 나타내는 순서도.
도 9는 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 이동(migration) 프로세스에 대한 모식도.
도 10은 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 복사(replication) 프로세스 중, UI 업데이트를 나타내는 순서도.
도 11은 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 복사(replication) 프로세스 중, 사용자의 UI 입력을 통한 호스트 앱 함수 호출을 나타내는 순서도.
도 12는 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 복사(replication) 프로세스에 대한 모식도.
도 13은 이동(migration) 또는 복사(replication)될 UI 객체들을 앱 개발자가 미리 설정해 두는 방식의 일 실시예를 나타낸 도면.1 is a diagram illustrating a situation in which a user interface (UI) of a chat window for chatting with other viewers overlaps a broadcast video screen while a user is watching a live broadcast through a live streaming app on a mobile device.
2 is a diagram illustrating a situation in which a chat window UI is distributed to other devices (guest devices) using the user interface distribution method according to the present invention.
3 is a diagram illustrating a UI structure of Android, which is an embodiment of a basic platform to which the present invention is applied.
4 is a flowchart showing the overall process of performing the user interface distribution method according to the present invention.
5 is a schematic diagram for explaining UI distribution in the user interface distribution method according to the present invention.
6 is a schematic diagram for explaining UI interaction in the user interface distribution method according to the present invention.
7 is a flowchart illustrating a UI update during a UI migration process in a user interface distribution method according to the present invention;
8 is a flowchart illustrating a host app function call through a user's UI input during a UI migration process in the user interface distribution method according to the present invention;
9 is a schematic diagram of a UI migration process in a user interface distribution method according to the present invention;
10 is a flowchart illustrating a UI update during a UI replication process in a user interface distribution method according to the present invention;
11 is a flowchart illustrating a host app function call through a user's UI input during a UI replication process in the user interface distribution method according to the present invention;
12 is a schematic diagram of a UI replication process in a user interface distribution method according to the present invention;
13 is a diagram illustrating an embodiment of a method in which an app developer sets UI objects to be moved or copied in advance.

이하 첨부된 도면을 참조로 본 발명의 바람직한 실시예를 상세히 설명하기로 한다. 이에 앞서, 본 명세서 및 청구범위에 사용된 용어나 단어는 통상적이거나 사전적인 의미로 한정해서 해석되어서는 아니되며, 발명자는 그 자신의 발명을 가장 최선의 방법으로 설명하기 위해 용어의 개념을 적절하게 정의할 수 있다는 원칙에 입각하여 본 발명의 기술적 사상에 부합하는 의미와 개념으로 해석되어야만 한다. 따라서, 본 명세서에 기재된 실시예와 도면에 도시된 구성은 본 발명의 가장 바람직한 일 실시예에 불과할 뿐이고 본 발명의 기술적 사상을 모두 대변하는 것은 아니므로, 본 출원시점에 있어서 이들을 대체할 수 있는 다양한 균등물과 변형예들이 있을 수 있음을 이해하여야 한다.Hereinafter, preferred embodiments of the present invention will be described in detail with reference to the accompanying drawings. Prior to this, the terms or words used in the present specification and claims should not be construed as being limited to conventional or dictionary meanings, and the inventor should properly understand the concept of the term in order to best describe his invention. Based on the principle that it can be defined, it should be interpreted as meaning and concept consistent with the technical idea of the present invention. Therefore, the configuration shown in the embodiments and drawings described in the present specification is merely the most preferred embodiment of the present invention and does not represent all of the technical spirit of the present invention, so at the time of the present application, various It should be understood that there may be equivalents and variations.

도 2는 본 발명에 따른 사용자 인터페이스 분산 방법을 이용하여 채팅창 UI를 다른 기기(guest device)로 분산시킨 상황을 도시한 도면이다.2 is a diagram illustrating a situation in which a chat window UI is distributed to other devices (guest devices) using the user interface distribution method according to the present invention.

본 발명은, 사용자가 도 1의 채팅창 UI를 도 2(b)와 같이 다른 기기로 옮기도록 지원하여, 도 2(a)와 같이 원 기기에서 스트리밍을 전체 화면으로 즐길 수 있도록 해줌으로써, 더 나은 사용성을 제공해 줄 수 있다. 이러한 실시예 외에도 애플리케이션 UI들을 여러 기기에 유연하게 배치함으로써, 여러 가지의 유용한 실시예들이 만들어 질 수 있다.The present invention supports the user to move the chat window UI of FIG. 1 to another device as shown in FIG. It can provide better usability. In addition to these embodiments, various useful embodiments can be made by flexibly disposing application UIs on various devices.

도 3은 본 발명이 적용되는 기본 플랫폼의 일 실시예인 안드로이드(android)의 UI 구조를 도시한 도면이다.3 is a diagram illustrating a UI structure of Android, which is an embodiment of a basic platform to which the present invention is applied.

UI는 UI 요소(이하 'UI element'라 한다)들의 모음(collection)으로 구성되어 있다. UI element란, 예를 들어 도 3에 도시된 바와 같이 텍스트 입력 창, 각 버튼들 등을 의미한다. 사용자 입장에서 UI element는, 사용자가 애플리케이션과 상호작용(interact)할 수 있는 가장 작은 단위이다.The UI is composed of a collection of UI elements (hereinafter referred to as 'UI elements'). The UI element means, for example, a text input window, each button, and the like, as shown in FIG. 3 . From a user's point of view, a UI element is the smallest unit that a user can interact with an application.

본 발명이 적용되는 기본 플랫폼의 일 실시예인 안드로이드는 2가지 타입의 UI 객체(UI object), 즉, 도 3에 도시된 바와 같은 레이아웃(layout)과 위젯(widget)을 가진다. 이러한 레이아웃과 위젯은 'UI tree'라는 트리(tree) 구조로 관리(maintain)되며, 이러한 UI 객체는 프로그램 코드(code)와 데이터를 포함한다. 위젯은 도 3에 도시된 바와 같이 각 UI element(예를 들어, 버튼)와 일대일로 매핑되는 그래픽 성분(graphical componet)이고, 레이아웃은 각 UI 객체들이 기기의 스크린에서 어떤 방식으로 위치하는지를 관리(manage)하는 그래픽 성분 데이터이다.Android, which is an embodiment of a basic platform to which the present invention is applied, has two types of UI objects, namely, a layout and a widget as shown in FIG. 3 . These layouts and widgets are maintained in a tree structure called 'UI tree', and these UI objects include program code and data. A widget is a graphic component that is mapped one-to-one with each UI element (eg, a button) as shown in FIG. 3, and the layout manages how each UI object is positioned on the screen of the device. ) is the graphic component data.

각 UI 객체는 그래픽 상태(graphical states) 및 비 그래픽 상태(non-graphical states)의 2가지 카테고리의 상태로 모아지는 상태 데이터들을 관리(maintain)한다. 그래픽 상태란 색깔, 텍스트, 그림, 애니메이션 등과 같은, 렌더링(rendering) 중에 필요한 데이터이고, 비 그래픽 상태란 렌더링과 관계없는 그 외의 모든 데이터를 의미하는데, 주로 애플리케이션 로직과 관련된 데이터이다.Each UI object maintains state data collected in two categories of states of graphic states and non-graphical states. The graphic state is data required during rendering, such as color, text, picture, animation, etc., and the non-graphic state refers to all other data unrelated to rendering, mainly data related to application logic.

이하에서는 이러한 그래픽 상태 데이터를 'UI 자원(UI resources)'이라 칭하기로 한다. 즉, 앞서 UI 객체는 레이아웃(layout)과 위젯(widget)을 가지며, 프로그램 코드(code)와 데이터를 포함한다고 했는데, 프로그램 코드와 데이터를 총칭하여 데이터라 할 때, 이와 같은 그래픽 상태 데이터, 즉 UI 자원과 비 그래픽 상태 데이터를 합하여 UI 객체라 표현하기로 한다. 각 UI element는 주로 화면에 나타나는 각 UI 요소들을 나타내는 용어이고, UI 객체는 주로 프로그램 코드와 데이터라는 관점에서 본 용어이나, 이하에서는 큰 구분을 두지 않고 사용하기로 한다.Hereinafter, such graphic state data will be referred to as 'UI resources'. That is, it was said earlier that the UI object has a layout and a widget, and includes program code and data. The sum of resources and non-graphic state data is expressed as a UI object. Each UI element is a term that mainly represents each UI element that appears on the screen, and the UI object is a term mainly viewed from the perspective of program code and data.

도 4는 본 발명에 따른 사용자 인터페이스 분산 방법을 수행하는 전체적인 프로세스를 나타내는 순서도이고, 도 5는 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 분산(distribution)을 설명하기 위한 모식도이다.4 is a flowchart showing an overall process of performing the user interface distribution method according to the present invention, and FIG. 5 is a schematic diagram for explaining UI distribution in the user interface distribution method according to the present invention.

본 발명은, 호스트 기기(10)와 외부 기기, 즉, 게스트 기기(50)가 기본 플랫폼으로서 같은 플랫폼을 사용하는 경우이거나, 서로 다른 기본 플랫폼을 사용하더라도 앱 코드가 플랫폼에 무관(platform-independent)하게 실행할 수 있는 경우(예를 들어 Web App 등)에 적용될 수 있다. 여기서 기본 플랫폼이란 이하에서 설명하는 본 발명의 호스트 플랫폼 및 게스트 플랫폼이 구현되기 이전에 호스트 기기(10) 및 게스트 기기(50) 각각에서 동작하는 플랫폼(예를 들어 Android)을 말한다.In the present invention, when the host device 10 and the external device, that is, the guest device 50, use the same platform as a basic platform, or even if different basic platforms are used, the app code is platform-independent. It can be applied in cases where it can be run efficiently (eg, Web App, etc.). Here, the basic platform refers to a platform (eg, Android) operating in each of the host device 10 and the guest device 50 before the host platform and the guest platform of the present invention described below are implemented.

스마트 기기(smart device)인 호스트 기기(10)에서 본 발명의 사용자 인터페이스 분산 방법을 수행하는 플랫폼 프로그램(이하 '호스트 플랫폼'이라 한다)(100)은, 호스트 기기(10)에 특정 애플리케이션 프로그램(이하 '앱'이라 한다)이 설치되면, 그 앱의 애플리케이션 코드를 분석하여, 해당 애플리케이션에서 사용하는 UI 객체 및 UI 자원들의 후보군(candidates)을 추출하여 저장한다(S401). 이를 이하에서는 '정적 코드 분석(static code analysis)'이라 한다.A platform program (hereinafter referred to as a 'host platform') 100 for performing the user interface distribution method of the present invention in the host device 10, which is a smart device, is a specific application program (hereinafter referred to as 'host platform') in the host device 10 . When the 'app') is installed, the application code of the app is analyzed, and candidate groups of UI objects and UI resources used in the corresponding application are extracted and stored (S401). This is hereinafter referred to as 'static code analysis'.

즉, 정적 코드 분석 과정의 입력은 애플리케이션 코드 전체가 되며, 그에 따른 정적 코드 분석 과정의 출력은 해당 애플리케이션에서 사용하는 UI 객체 및 UI 자원들의 후보군(candidates)이 되는 것이다. UI 객체 및 UI 자원들의 후보군(candidates)의 실시예로는, 해당 UI의 형태 정보를 가진 객체, 해당 UI에 사용되는 텍스트(text), 색(color) 등이 포함될 수 있으며, 필요에 따라 UI의 백그라운드 이미지나, UI가 움직이는 역동성을 가지는 경우, 그러한 UI 애니메이션 정보 등이 포함될 수 있다.That is, the input of the static code analysis process becomes the entire application code, and the output of the static code analysis process accordingly becomes a candidate group of UI objects and UI resources used in the corresponding application. Examples of candidate groups of UI objects and UI resources include an object having shape information of the corresponding UI, text used in the UI, color, etc., and, if necessary, When a background image or UI has moving dynamics, such UI animation information may be included.

호스트 플랫폼(100)은 사용자의 요청에 따라, 근거리에 위치한 다른 스마트 기기인 게스트 기기(50)로 사용될 수 있는 기기의 리스트 및, 호스트 기기(10)에 설치되어 있는 앱 중 다른 기기와의 다중 UI 화면을 이용하는 상호작용이 가능한 앱(이하 '상호작용 앱'이라 한다)의 리스트를 호스트 기기(10) 화면에 디스플레이 해 준다(S402).In response to a user's request, the host platform 100 provides a list of devices that can be used as the guest device 50 , which is another smart device located in a short distance, and a multi-UI with other devices among apps installed in the host device 10 . A list of interactive apps (hereinafter referred to as 'interactive apps') using the screen is displayed on the screen of the host device 10 (S402).

사용자는 UI 상호작용할 기기를 선택하고(이하 선택된 기기를 '게스트 기기(50)'라 한다)(S403), 또한 UI 상호작용을 사용할 앱을 선택한다(S403). 호스트 플랫폼(100)은, 선택된 앱의 패키지 파일(이하 '앱 패키지 파일(APK)'이라 한다)을 선택된 게스트 기기(50)로 송신하고(S404), 게스트 기기(50)에서 본 발명의 사용자 인터페이스 분산 방법을 수행하는 플랫폼 프로그램(이하 '게스트 플랫폼'이라 한다)(500)은, 앱 패키지 파일을 수신하여 게스트 기기(50)에 설치한다(S405).The user selects a device for UI interaction (hereinafter, the selected device is referred to as a 'guest device 50') (S403), and also selects an app to use for UI interaction (S403). The host platform 100 transmits the package file of the selected app (hereinafter referred to as 'app package file (APK)') to the selected guest device 50 (S404), and the user interface of the present invention in the guest device 50 The platform program (hereinafter referred to as 'guest platform') 500 performing the distribution method receives the app package file and installs it in the guest device 50 (S405).

사용자는 단계 S402에서 언급한 상호작용 앱 리스트 중 하나의 앱(이하 '호스트 앱'이라 한다)을 구동하고(S406), 호스트 앱 동작 중, 호스트 앱에서 사용하는 UI 중 하나를 구동한다(S407). 예를 들어 스포츠 등의 중계방송을 위한 앱 동작 중에, 다른 사용자들과의 채팅을 위한 채팅 UI를 구동할 수 있다.The user drives one of the interactive apps list mentioned in step S402 (hereinafter referred to as a 'host app') (S406), and drives one of the UIs used in the host app while the host app is operating (S407) . For example, a chat UI for chatting with other users may be driven while an app for relay broadcasting such as sports is being operated.

호스트 앱의 동작 중, 이와 같이 구동된 UI에서, 게스트 기기(50)로 보내기 위한 UI element의 선택을 위한 사용자의 입력을 수신한다(S408). 예를 들어 구동되어 호스트 기기(10) 화면에 디스플레이된 UI 중, 일부 UI element 만을 선택하여 게스트 기기(50)로 보낼 수 있는데 이에 대한 모식도가 도 5에 도시되어 있다.During the operation of the host app, a user input for selecting a UI element to be sent to the guest device 50 is received in the thus driven UI (S408). For example, among the UIs that are driven and displayed on the screen of the host device 10 , only some UI elements can be selected and sent to the guest device 50 , and a schematic diagram thereof is shown in FIG. 5 .

이와 같이 게스트 기기(50)로 보내기 위한 UI element의 선택을 위한 사용자의 입력을 수신하면(S408), 단계 S401에서 추출된 UI 객체 및 UI 자원 후보군 중, 상기 단계 S408에서 선택된 UI element를 게스트 기기(50)에서 실행하기 위하여 실제로 사용되는 UI 객체(UI 자원과 비 그래픽 상태 데이터가 포함된)를 추출하는데(S409), 이러한 과정을 이하 '동작중 객체 추적(runtime object tracking)'이라 한다). 전술한 바와 같이 각 UI element는 주로 화면에 나타나는 각 UI 구성요소들을 나타내는 용어이고, UI 객체는 주로 프로그램 코드와 데이터라는 관점에서 본 용어로서 화면상의 UI element들이 그와 같이 실행되어 화면에 나타내도록 하기 위한, 모든 데이터, 즉, 그래픽 데이터인 UI 자원과 비 그래픽 상태 데이터가 포함된 개념의 용어이다. 따라서, 게스트 기기(50)로 UI를 보내는 경우, 'UI element'를 보낸다는 표현과 'UI 객체'를 보낸다는 표현이 동일한 의미로 사용될 수 있으며, 이하에서는 'UI 객체'를 보낸다는 표현으로 주로 사용하기로 한다.When a user input for selecting a UI element to be sent to the guest device 50 is received in this way (S408), the UI element selected in step S408 from the UI object and UI resource candidate group extracted in step S401 is transferred to the guest device ( 50) to extract the UI object (including UI resources and non-graphic state data) actually used for execution (S409). This process is hereinafter referred to as 'runtime object tracking'). As described above, each UI element is a term mainly representing each UI component that appears on the screen, and the UI object is a term mainly viewed from the viewpoint of program code and data, so that the UI elements on the screen are executed as such and displayed on the screen. It is a term that includes all data, that is, UI resources, which are graphic data, and non-graphic state data. Therefore, in the case of sending a UI to the guest device 50 , an expression of sending a 'UI element' and an expression of sending a 'UI object' may be used with the same meaning, and hereinafter, mainly as an expression of sending a 'UI object' decide to use

한편, 예를 들어 호스트 기기(10)가 스마트 TV 등과 같이 사용자가 UI element를 선택하기 어려운 기기인 경우, 게스트 기기(50)의 사용자가 사용할 UI element를 직접 선택하도록 할 수도 있다. 이 경우, 호스트 기기(10)는 UI 객체가 포함된 화면 전체를 게스트 기기(50)로 보내주는 미러링(mirroring)을 수행할 수 있으며, 게스트 기기(50)의 사용자는 받은 화면에서 사용할 UI element를 선택하여 사용할 수 있다.Meanwhile, when the host device 10 is a device in which it is difficult for the user to select a UI element, such as a smart TV, for example, the user of the guest device 50 may directly select a UI element to be used. In this case, the host device 10 may perform mirroring of sending the entire screen including the UI object to the guest device 50 , and the user of the guest device 50 selects a UI element to be used on the received screen. You can choose to use it.

UI 객체를 게스트 기기(50)에 전송하는 또 다른 실시예로는, 게스트 기기(50)로 보내기 위한 UI 객체를 전술한 바와 같이 사용자의 선택(S408)에 의하지 않고, 미리 앱 개발자에 의하여 설정해 놓는 방법이 있다. 도 13은 그와 같이 이동(migration) 또는 복사(replication)될 UI 객체들을 앱 개발자가 미리 설정해 두는 방식의 일 실시예를 나타낸다.As another embodiment of transmitting the UI object to the guest device 50, the UI object for sending to the guest device 50 is set in advance by the app developer, not according to the user's selection (S408) as described above. There is a way. 13 shows an embodiment of a method in which an app developer presets UI objects to be moved or replicated as described above.

즉, 앱 개발자는, 런타임(runtime)에 이동(migration) 또는 복사(replication) 방식으로 게스트 기기(50)에 전달할 UI 객체(UI 자원과 비 그래픽 상태 데이터가 포함된)를 미리 해당 앱의 메타데이터 파일인 앱 레이아웃(layout) 파일에 명시(설정)해 놓는다. 이러한 앱 레이아웃 파일은, XML 형식으로 작성될 수 있으며, 앱 동작시 파싱(parsing) 되어 그에 맞는 UI 객체들이 구성되어 화면에 그려지게 된다. That is, the app developer, in advance, a UI object (including UI resources and non-graphic state data) to be delivered to the guest device 50 in a migration or replication method at runtime, the metadata of the app It is specified (set) in the app layout file, which is a file. Such an app layout file may be written in an XML format, and is parsed when the app is operating so that UI objects corresponding thereto are constructed and drawn on the screen.

본 발명에서는 앱 개발자가 게스트 기기(50)로 이동(migration) 또는 복사(replication)에 의해 전달할 UI 객체를 명시할 수 있도록 새로운 태그와 property들을 앱 레이아웃 파일에 제공한다. 즉, 도 13을 참조하면, <UIMigration> 또는 <UIReplication> 태그 영역을 설정하여 migration/replication 될 UI 객체들을 앱 개발자가 미리 정해둘 수 있다. 또한 android:UI_migration=“true”와 같은 새로운 XML property를 추가하여 개별 UI 객체에 대한 설정이 가능하다.In the present invention, new tags and properties are provided to the app layout file so that the app developer can specify the UI object to be delivered by migration or replication to the guest device 50 . That is, referring to FIG. 13 , the app developer may predetermine UI objects to be migrated/replicated by setting the <UIMigration> or <UIReplication> tag area. Also, by adding a new XML property such as android:UI_migration=“true”, it is possible to configure individual UI objects.

또는, 런타임(runtime)에 이동(migration) 또는 복사(replication) 방식으로 게스트 기기(50)에 전달할 UI 객체를, 앱 레이아웃 파일이 아닌, 호스트 플랫폼 개발자가 작성하여 호스트 기기(10)에 저장되어 있는 플랫폼 레이아웃 파일에 명시(설정)해 놓을 수도 있다. 플랫폼 레이아웃 파일에 UI 객체를 설정하는 방식은, 전술한 앱 레이아웃 파일에 설정하는 방식과 같다.Alternatively, a UI object to be delivered to the guest device 50 by a migration or replication method at runtime is written by the host platform developer, not the app layout file, and stored in the host device 10 It can also be specified (set) in the platform layout file. The method of setting the UI object in the platform layout file is the same as the method of setting the above-mentioned app layout file.

이에 따라 호스트 플랫폼은 새롭게 추가된 태그와 property를 파싱(parsing)하여 어떤 UI 객체들을 어떤 외부기기로 옮길지를, 사용자 개입없이 자동으로 선택할 수 있다. 즉, 호스트 기기(10)의 앱 사용자는, 앱을 구동한 후 UI를 게스트 기기로 전달하겠다고 선택만 하면, 앱 레이아웃 파일 또는 플랫폼 레이아웃 파일에 설정되어 있는 해당 UI의 UI 객체를, 호스트 플랫폼이 게스트 기기(50)로 전송해주게 되는 것이다. Accordingly, the host platform can automatically select which UI objects to move to which external device by parsing the newly added tags and properties without user intervention. That is, when the app user of the host device 10 runs the app and then selects to deliver the UI to the guest device, the host platform transfers the UI object of the corresponding UI set in the app layout file or the platform layout file to the guest device. It will be transmitted to the device (50).

한편, 호스트 플랫폼(100)은, UI element가 사용자에 의해 선택되어, 선택된 UI element에 대한 UI 객체를 게스트 기기(50)로 전달한 경우에, 선택된 UI element를 호스트 플랫폼(100)의 플랫폼 레이아웃 파일에 저장할 수 있다. 이와 같이 하여 이후에는 사용자가 선택할 필요없이 플랫폼 레이아웃 파일에 그와 같이 저장된 UI element에 대한 UI 객체를, 호스트 플랫폼이 게스트 기기(50)로 전송해주도록 할 수 있다. On the other hand, when the UI element is selected by the user and the UI object for the selected UI element is delivered to the guest device 50 , the host platform 100 transfers the selected UI element to the platform layout file of the host platform 100 . can be saved In this way, thereafter, the host platform can transmit the UI object for the UI element stored in the platform layout file to the guest device 50 without the user having to select it.

이렇게 추출된 UI 객체 및 UI 자원을 호스트 플랫폼(100)이 게스트 기기(50)로 송신하고(S410), 게스트 플랫폼(500)은, 단계 S410에서 수신한 UI element에 대한 UI 객체에 따라 UI를 렌더링(rendering)하여 게스트 기기(50)의 화면에 디스플레이하게 된다(S411). 단계 S410에서, 선택된 게스트 기기(50)로 송신하는 정보에는, 사용자에 의해 선택된 UI를 게스트 기기(50)로, 이동(migration)할 것인지 또는 복사(replication)할 것인지에 대한 정보를 더 포함할 수 있다.The host platform 100 transmits the extracted UI object and UI resource to the guest device 50 (S410), and the guest platform 500 renders the UI according to the UI object for the UI element received in step S410. (rendering) is displayed on the screen of the guest device 50 (S411). In step S410 , the information transmitted to the selected guest device 50 may further include information on whether to migrate or replicate the UI selected by the user to the guest device 50 . .

이후, 이와 같은 UI를 통하여 호스트 기기(10)와 게스트 기기(50) 간의 상호작용(interaction)이 발생하는데, 이에 대하여는 도 6 내지 도 12를 참조하여 후술하기로 한다.Thereafter, interaction between the host device 10 and the guest device 50 occurs through the UI, which will be described later with reference to FIGS. 6 to 12 .

도 6은 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 상호작용(interaction)을 설명하기 위한 모식도이다.6 is a schematic diagram for explaining UI interaction in the user interface distribution method according to the present invention.

도 6에 도시된 'UI thread'란 각 앱이 가진, UI tree를 다루고 UI 객체의 상태를 업데이트하는 기능을 말한다. 예를 들어 UI thread는 사용자가 버튼 클릭시, 버튼 클릭과 관련된 이벤트 처리기(event handler)를 수행시킨다.The 'UI thread' shown in FIG. 6 refers to a function of handling a UI tree and updating the state of a UI object that each app has. For example, when the user clicks a button, the UI thread executes an event handler related to the button click.

게스트 기기(50) 화면에 UI를 디스플레이 하자마자, 호스트 플랫폼과 게스트 플랫폼은, 사용자로 하여금 호스트와 게스트의 UI를 통해 마치 UI가 같은 기기에 있는 것처럼 호스트 앱과 상호작용을 할 수 있도록 해준다.As soon as the UI is displayed on the screen of the guest device 50 , the host platform and the guest platform allow the user to interact with the host app through the UI of the host and the guest as if the UI is on the same device.

예를 들어, 사용자는 호스트 기기(10)에 비디오 클립의 어느 부분을 디스플레이할지를 결정하기 위해, 게스트 기기(50) 화면에서 비디오 진행 바(video progress bar)를 움직일(swipe) 수 있다. 호스트 플랫폼과 게스트 플랫폼은 이러한 상호작용을 가능하게 하는데, 필요시 기기내 함수 호출(local function calls)을 기기간 함수 호출(cross-device function calls)로 변환함으로써 이를 수행하게 된다. For example, the user may swipe a video progress bar on the guest device 50 screen to determine which portion of the video clip to display on the host device 10 . The host platform and guest platform enable this interaction, by translating local function calls into cross-device function calls when necessary.

도 6을 참조하면, 게스트 기기 화면에서 사용자의 입력(input)에 의해 게스트 기기 화면 상에서 UI 상태의 업데이트가 일어나는 경우, 사용자의 입력에 따라 게스트 기기(50)의 래퍼 앱(wrapper app)(60)의 UI thread가 수신한 사용자 입력 데이터는 게스트 플랫폼(500)에 의해 호스트 기기(10)의 호스트 앱(20)으로 보내지고(request), 호스트 앱(20)은 UI 업데이트를 위한 함수 호출(local function call)을 하게 되는데, 이때 호스트 플랫폼(100)이 이를 가로채 기기간 함수 호출(cross-device function calls)로 변환하여 게스트 기기(50)로 보내고, 이를 게스트 플랫폼(500)이 UI 업데이트를 위한 함수 호출(local function call)로 다시 변환하여 UI 업데이트를 수행하게 되는 것이다.Referring to FIG. 6 , when a UI state update occurs on the guest device screen by a user's input on the guest device screen, a wrapper app 60 of the guest device 50 according to the user's input User input data received by the UI thread of the guest platform 500 is sent to the host app 20 of the host device 10 by the guest platform 500, and the host app 20 calls a function for UI update (local function) call), at this time, the host platform 100 intercepts them, converts them into cross-device function calls, and sends them to the guest device 50, and the guest platform 500 calls a function for UI update. (local function call) is converted back to perform UI update.

이러한 방식은, 기존에 호스트 기기(10)에서 사용되던 호스트 앱(20)이 코드의 수정없이 그대로 동작하면서도, 호스트 플랫폼(100)의 동작에 의해 호스트 앱(20)의 함수 호출(local function call)이 가로채어져 기기간 함수 호출(cross-device function calls)로 변환하여 게스트 기기(50)로 보냄으로써 UI를 다른 기기에서 사용할 수 있게 된다. 즉, 동일 기기 내에서의 UI 사용을 위한 함수 호출(local function call) 기능만을 가지고 있는 기존의 호스트 앱(20)의 코드를 전혀 수정하지 않고도, 그 호스트 앱(20)이 전혀 인식하지 못하는 가운데 호스트 플랫폼(100)의 동작에 의해 기기간 함수 호출(cross-device function calls)이 이루어지게 되는 것이다.In this way, the host app 20 previously used in the host device 10 operates as it is without modification of the code, while calling the function of the host app 20 by the operation of the host platform 100 (local function call) This is intercepted and converted into cross-device function calls and sent to the guest device 50 so that the UI can be used by other devices. That is, without modifying the code of the existing host app 20 that has only a local function call function for UI use in the same device, the host app 20 does not recognize the host at all. Cross-device function calls are made by the operation of the platform 100 .

게스트 기기(50)에서도, 게스트 플랫폼(500)이, 그와 같이 수신한 호스트 기기(10)로부터의 기기간 함수 호출(cross-device function calls)을 가로채어, 게스트 기기(50) 내에서의 함수 호출(local function call)로 바꾸어 줌으로써, 게스트 기기에서도 자연스럽게 UI 처리가 수행되게 된다.Also in the guest device 50 , the guest platform 500 intercepts cross-device function calls from the host device 10 received as such, and calls the function in the guest device 50 . (local function call), UI processing is performed naturally in the guest device.

전술한 방식은 게스트 기기(50)의 함수 호출(local function call)이 호스트 기기로의 기기간 함수 호출(cross-device function calls)로 변환되고, 그러한 기기간 함수 호출(cross-device function calls)을 호스트 기기에서 처리하는 과정에서도 동일하게 적용된다.In the above-described manner, local function calls of the guest device 50 are converted into cross-device function calls to the host device, and the cross-device function calls are converted into cross-device function calls to the host device. The same applies to the process in .

그와 같이 UI를 기기 내에서 사용하도록 되어 있는 기존 앱의 수정없이, 호스트 플랫폼(100)과 게스트 플랫폼(500)의 가로채기 동작에 의해 이루어지는 기기간 함수 호출(cross-device function calls)의 구체적 구현 방법의 일 실시예로서 코드변환함수 방식을 사용할 수 있는데, 이에 대하여는 후술한다.As such, a concrete implementation method of cross-device function calls made by the intercepting operation of the host platform 100 and the guest platform 500 without modification of an existing app intended to use the UI within the device. A code conversion function method can be used as an embodiment of the , which will be described later.

이와 같은 UI 상호작용(interaction)에 대하여는, UI 이동(migration)과 UI 복사(replication)로 분류하여, 각각 도 7 내지 도 9 및, 도 10 내지 도 12를 참조하여 이하에서 후술하기로 한다.Such UI interaction is classified into UI migration and UI replication, and will be described below with reference to FIGS. 7 to 9 and 10 to 12 , respectively.

도 7은 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 이동(migration) 프로세스 중, UI 업데이트를 나타내는 순서도이고, 도 8은 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 이동(migration) 프로세스 중, 사용자의 UI 입력을 통한 호스트 앱 함수 호출을 나타내는 순서도이며, 도 9는 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 이동(migration) 프로세스에 대한 모식도이다.7 is a flowchart illustrating a UI update during a UI migration process in the user interface distribution method according to the present invention, and FIG. 8 is a UI migration process, a user in the user interface distribution method according to the present invention. It is a flowchart showing a host app function call through UI input of , and FIG. 9 is a schematic diagram of a UI migration process in the user interface distribution method according to the present invention.

전술한 바와 같이 도 4의 단계 S410에서, 선택된 게스트 기기(50)로 송신하는 정보에는, 사용자에 의해 선택된 UI를 게스트 기기(50)로, 이동(migration)할 것인지 또는 복사(replication)할 것인지에 대한 정보를 더 포함할 수 있는데, 도 7 내지 도 9는 이동(migration)으로 선택된 경우의 프로세스이다.As described above, in step S410 of FIG. 4 , the information transmitted to the selected guest device 50 includes information on whether to migrate or replicate the UI selected by the user to the guest device 50 . It may further include information, and FIGS. 7 to 9 are processes when migration is selected.

먼저, 도 7은 UI 이동(migration) 프로세스 중에서도, 대체적으로 UI 업데이트를 나타내는 순서도로서, 도 9에서는 주로 A-->B의 과정을 나타낸다.First, FIG. 7 is a flowchart showing a UI update in general among UI migration processes, and FIG. 9 mainly shows a process A-->B.

게스트 기기(50) 화면에 디스플레이되는 UI 상태의 업데이트(이하 'UI 업데이트'라 한다)는 호스트 앱의 함수 호출(local function call)시(S701)에 의해 이루어진다.The update of the UI state displayed on the screen of the guest device 50 (hereinafter referred to as 'UI update') is performed by a local function call of the host app (S701).

UI 업데이트란, 예를 들어, 호스트 앱을 통하여 방송 스트리밍 중, 비디오 진행 바(video progress bar)가 계속 진행하게 되는데, 이러한 비디오 진행 바도 일종의 UI로서, UI 상태가 계속 바뀌는 것으로서 UI 업데이트가 일어나고 있는 것이다. 이러한 UI 업데이트는 반드시 호스트 앱의 함수 호출에 의해 수행된다. 즉, 이 경우는 게스트 기기(50)에서의 UI를 통한 사용자의 입력없이, 호스트 앱의 수행에 따른 호스트 앱의 함수 호출에 의해 UI 업데이트가 일어나는 경우이다. 도 7의 단계 S701이 그러한 경우라 할 수 있다.UI update, for example, during broadcast streaming through the host app, a video progress bar (video progress bar) continues to progress, such a video progress bar is also a kind of UI, the UI state is constantly changing as the UI update is occurring. . These UI updates are always performed by function calls in the host app. That is, in this case, the UI update occurs by a function call of the host app according to the execution of the host app without a user input through the UI in the guest device 50 . Step S701 of FIG. 7 may be said to be such a case.

또는 게스트 기기 화면에서 UI를 통한 사용자 입력이 수신되었을 때, 이를 호스트 기기(10)로 송신하여, 이에 따른 호스트 앱에 의한 함수 호출에 의해 게스트 기기에서의 UI 업데이트가 일어날 수도 있다. 예를 들어 사용자가 게스트 기기에서 특정 버튼 입력시, 게스트 기기 화면상의 UI 색깔이 변경되는 경우가 있을 수 있다. 도 8에는 그러한 경우가 나타나 있으며, 이후 도 8을 참조하여 상세히 후술하기로 한다.Alternatively, when a user input through the UI is received on the guest device screen, it is transmitted to the host device 10, and the UI update in the guest device may occur by a function call by the host app accordingly. For example, when the user inputs a specific button in the guest device, the color of the UI on the screen of the guest device may be changed. 8 shows such a case, which will be described later in detail with reference to FIG. 8 .

이와 같은 호스트 앱의 함수 호출(local function call)을 호스트 플랫폼(100)은, 기기간 함수 호출(cross-device function calls), 즉, RPC(remote procedure call) 메시지로 변환하여(S702) 게스트 기기(50)로 송신하게 된다(S703). 이것은 도 9에서 A-->B 화살표 위에 표시된 RPC를 의미한다. 본 발명에서는, 호스트 기기(10) 내부의 앱에서 호출되는 기기내 함수 호출(local function call)을 호스트 플랫폼(100)이 가로채어, 앱이 인식하지 못하는 가운데 기기간 함수 호출(cross-device function calls)로 변환하여 게스트 기기(50)로 보내거나, 또는 게스트 기기(50) 내부의 앱(정확하게는 래퍼 앱(wrapper app)(60))에서 호출되는 기기내 함수 호출(local function call)을 게스트 플랫폼(500)이 가로채어, 앱이 인식하지 못하는 가운데 기기간 함수 호출(cross-device function calls)로 변환하여 호스트 기기(10)로 보내는 것인데, 본 발명에서 사용하는 ‘RPC(remote procedure call)’란 바로 이러한 경우의 기기간 함수 호출(cross-device function calls)을 나타내는 용어로 사용된다.The host platform 100 converts such a local function call of the host app into a cross-device function call, that is, a remote procedure call (RPC) message (S702), and the guest device 50 ) to transmit (S703). This means the RPC indicated above the arrow A-->B in FIG. 9 . In the present invention, the host platform 100 intercepts a local function call called from an app inside the host device 10, and cross-device function calls are performed without the app being recognized. converted to and sent to the guest device 50, or an in-device function call (local function call) called from an app inside the guest device 50 (to be precise, a wrapper app 60) to the guest platform ( 500) intercepts it, converts it into cross-device function calls without the app recognizing it, and sends it to the host device 10. 'RPC (remote procedure call)' used in the present invention is Used as a term for cross-device function calls in cases.

이 과정(S701 내지 S703)을 더욱 상세히 설명하면, 게스트 기기(50) 화면에 디스플레이되는 UI 상태의 업데이트(이하 'UI 업데이트'라 한다)를 위한 상기 호스트 앱의 함수 호출(local function call)시(S701), 그 함수에 대하여 미리 교체 설정되어 있는 코드변환함수가 호스트 앱에 의해 호출되고(S701), 코드변환함수에 의해 그 함수를 RPC 메시지로 변환하여(S702), 그 RPC 메시지를 게스트 기기(50)로 송신하는 것이다(S703). 이러한 코드변환함수는 호스트 플랫폼(100) 또는 게스트 플랫폼(500)에 포함되는 함수이며, 따라서 코드변환함수에 의해 수행되는 동작을 이후에는 호스트 플랫폼(100) 또는 게스트 플랫폼(500)에 의해 수행되는 것으로도 표현하기로 한다.When this process (S701 to S703) is described in more detail, when a local function call of the host app for updating the UI state displayed on the screen of the guest device 50 (hereinafter referred to as 'UI update') ( S701), a code conversion function set in advance for the function is called by the host app (S701), and the function is converted into an RPC message by the code conversion function (S702), and the RPC message is transmitted to the guest device ( 50) (S703). This code conversion function is a function included in the host platform 100 or the guest platform 500, and therefore the operation performed by the code conversion function is later performed by the host platform 100 or the guest platform 500. also to be expressed.

이때, RPC 메시지의 포함 인자(argument)가 기기 의존적인 인자, 즉, 참조형 인자(reference type argument)인 경우, RPC 메시지와 함께, 그 참조형 인자가 가리키는 데이터 값을 게스트 기기(50)로 함께 송신하게 된다.In this case, when the inclusion argument of the RPC message is a device-dependent factor, that is, a reference type argument, the data value indicated by the reference type argument is transmitted to the guest device 50 together with the RPC message. will send

이와 같이 게스트 플랫폼(500)이 호스트 기기(10)로부터 게스트 기기(50) 화면에 디스플레이되는 UI 상태의 업데이트(이하 'UI 업데이트'라 한다)를 위한 RPC(remote procedure call) 메시지를 수신한 경우(S703), 게스트 플랫폼(500)은 그 RPC 메시지를 다시 게스트 기기 내 함수 호출(local function call)로 변환하여 해당 UI 업데이트를 수행한다(S704). 이와 같이 RPC 메시지를 보낸 후 호스트 플랫폼(100)은, RPC 호출 수행 후에 돌아올 리턴 어드레스를 저장하고, 게스트 기기(50)로부터 RPC 호출에 대한 리턴값 또는 에러 코드를 수신하게 되면, 그 리턴 어드레스로 돌아가 다음 단계를 수행하게 되는 것이다.As such, when the guest platform 500 receives a remote procedure call (RPC) message for updating the UI state displayed on the screen of the guest device 50 (hereinafter referred to as 'UI update') from the host device 10 ( S703), the guest platform 500 converts the RPC message back to a local function call in the guest device and performs a corresponding UI update (S704). After sending the RPC message in this way, the host platform 100 stores a return address to be returned after performing the RPC call, and when receiving a return value or error code for the RPC call from the guest device 50, returns to the return address The next step will be

다음으로, 도 8은 UI 이동(migration) 프로세스 중에서도, 사용자의 UI 입력을 통한 호스트 앱 함수 호출을 나타내는 순서도로서, 도 9에서는 주로 B-->C의 과정을 나타낸다.Next, FIG. 8 is a flowchart illustrating a host app function call through a user's UI input among the UI migration processes, and FIG. 9 mainly shows a process B-->C.

이 상기 UI를 통한 사용자의 입력(S801)에 따라, 호스트 앱 수행을 위한 함수 호출(local function call)(S802)을 인지한 경우, 게스트 플랫폼(500)은 이를 RPC(remote procedure call)로 변환하여(S803) 상기 호스트 기기(10)로 송신하게 되고(S804), 이를 수신한 호스트 플랫폼(100)은 그 RPC 메시지를 다시 호스트 기기 내 함수 호출(local function call)로 변환하여 해당 호스트 앱 함수 호출을 수행한다(S805). 이와 같은 경우는 예를 들어 게스트 기기에서 사용자가 play-pause를 위한 토글 버튼(toggle button)을 눌렀을 때, 호스트 기기에서 스트리밍 앱 화면이 정지-재생 등으로 바뀌는 상황이 있을 수 있다.When a local function call (S802) for executing the host app is recognized according to the user's input (S801) through the UI, the guest platform 500 converts it into a remote procedure call (RPC), (S803) is transmitted to the host device 10 (S804), and the host platform 100 receiving the RPC message converts the RPC message back to a local function call in the host device to call the corresponding host app function is performed (S805). In this case, for example, when the user presses a toggle button for play-pause in the guest device, there may be a situation in which the streaming app screen is changed to pause-play in the host device.

이 과정(S801 내지 S805)을 더욱 상세히 설명하면, 사용자 입력에 따른 호스트 앱의 함수 호출(local function call)시(S802), 미리 교체 설정되어 있는 코드변환함수가 게스트 앱에 의해 호출되고(S802), 코드변환함수에 의해 그 함수를 RPC 메시지로 변환하여(S803), 그 RPC 메시지를 호스트 기기(10)로 송신하는 것이다(S804).If this process (S801 to S805) will be described in more detail, when a function call of the host app according to a user input (local function call) is made (S802), a code conversion function set in advance is called by the guest app (S802) , the function is converted into an RPC message by the code conversion function (S803), and the RPC message is transmitted to the host device 10 (S804).

만약 단계 S801에서의 사용자의 입력에 따라, 게스트 기기에서의 UI에 대한 업데이트가 일어나야 하는 상황이라면, 도 8에서 단계 S805의 호스트 앱 함수 호출(S805)에 의한 호스트 앱의 로직 수행에 따라 게스트 기기(50)에서의 UI 업데이트를 위한 함수 호출(S806)이 일어나게 된다. 이에 따라 호스트 플랫폼(100)은 이를 RPC(remote procedure call)로 변환하여(S807) 그 RPC 메시지를 게스트 기기(50)로 송신하게 되고(S808), 게스트 기기(50)에서는, 게스트 플랫폼(500)에 의해 UI 업데이트를 수행하게 된다(S809). 이와 같은 단계 S806 내지 S809의 프로세스는 도 9에 도시되어 있지 않다.If it is a situation in which an update of the UI in the guest device needs to occur according to the user input in step S801, the guest device ( 50), a function call for UI update (S806) occurs. Accordingly, the host platform 100 converts it into a remote procedure call (RPC) (S807) and transmits the RPC message to the guest device 50 (S808), and in the guest device 50, the guest platform 500 UI update is performed by (S809). Such processes of steps S806 to S809 are not shown in FIG. 9 .

도 10은 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 복사(replication) 프로세스 중, UI 업데이트를 나타내는 순서도이고, 도 11은 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 복사(replication) 프로세스 중, 사용자의 UI 입력을 통한 호스트 앱 함수 호출을 나타내는 순서도이며. 도 12는 본 발명에 따른 사용자 인터페이스 분산 방법에서, UI 복사(replication) 프로세스에 대한 모식도이다.10 is a flowchart illustrating a UI update during a UI replication process in a user interface distribution method according to the present invention, and FIG. 11 is a UI replication process, a user in the user interface distribution method according to the present invention. Flowchart showing host app function calls via UI input of 12 is a schematic diagram of a UI replication process in the user interface distribution method according to the present invention.

전술한 바와 같이 도 4의 단계 S410에서, 선택된 게스트 기기(50)로 송신하는 정보에는, 사용자에 의해 선택된 UI를 게스트 기기(50)로, 이동(migration)할 것인지 또는 복사(replication)할 것인지에 대한 정보를 더 포함할 수 있는데, 도 10 내지 도 12는 복사(replication)로 선택된 경우의 프로세스이다.As described above, in step S410 of FIG. 4 , the information transmitted to the selected guest device 50 includes information on whether to migrate or replicate the UI selected by the user to the guest device 50 . It may further include information, and FIGS. 10 to 12 are processes in a case where replication is selected.

먼저, 도 10은 UI 복사(replication) 프로세스 중에서도, UI 업데이트를 나타내는 순서도로서, 도 12에서는 주로 A-->B의 과정을 나타낸다.First, FIG. 10 is a flowchart illustrating a UI update among UI replication processes, and FIG. 12 mainly shows a process A-->B.

UI를 통한 사용자 입력에 의한 UI 업데이트는, UI 이동(migration)의 경우와 달리, 게스트 기기(50) 뿐 아니라, 호스트 기기(10)에서의 사용자 입력에 의해서도 일어날 수 있으며, 도 10의 단계 S1002 내지 S1009는 게스트 기기(50) UI를 통한 사용자 입력에 의해 발생되는 UI 업데이트를 나타내며, 도 10의 단계 S1010 내지 S1017은 호스트 기기(10) UI를 통한 사용자 입력에 의해 발생되는 UI 업데이트를 나타낸다. 다만. 도 12에서는 편의상 호스트 기기(10) UI를 통한 사용자 입력에 의해 발생되는 UI 업데이트 과정, 즉, A-->B(Local call, RPC)만을 도시하였다.UI update by user input through UI may occur by user input from not only the guest device 50 but also the host device 10, unlike in the case of UI migration, in steps S1002 to S1009 represents a UI update generated by a user input through the UI of the guest device 50 , and steps S1010 to S1017 of FIG. 10 represent a UI update generated by a user input through the UI of the host device 10 . but. In FIG. 12 , only the UI update process generated by a user input through the UI of the host device 10 , that is, A-->B (Local call, RPC) is illustrated for convenience.

도 10을 참조하면, 복사(replication)로 선택된 경우, 호스트 플랫폼(100)은, 도 4의 단계(S410)에서 게스트 기기로 송신하는, 사용자에 의해 선택된 UI element의 UI 객체 및 UI 자원과 동일한 UI 데이터를 가지고, UI를 렌더링하여 호스트 기기 화면에 디스플레이 한다(S1001). 즉, 게스트 기기(50) 화면에서와 동일한 UI가 호스트 기기(10) 화면에도 표시되는 것이다.Referring to FIG. 10 , when selected as replication, the host platform 100 transmits to the guest device in step S410 of FIG. 4 , the same UI as the UI object and UI resource of the UI element selected by the user. With the data, the UI is rendered and displayed on the screen of the host device (S1001). That is, the same UI as on the screen of the guest device 50 is also displayed on the screen of the host device 10 .

이후, 게스트 플랫폼(500)은, 게스트 기기(50) UI를 통하여 사용자에 의해 입력된(S1002) 데이터를 지속적으로 호스트 기기(10)을 송신하고(S1003), 호스트 기기(10)는 이를 수신하여 호스트 기기(10) 화면에 디스플레이한다(S1004). 즉, 당연히 그 사용자의 입력 데이터는, 입력된 게스트 기기(50)에도 디스플레이되고(S1002), 동시에 호스트 기기(10) 화면에도 디스플레이 되는 것이다(S1004).Thereafter, the guest platform 500 continuously transmits the data input by the user through the guest device 50 UI (S1002) to the host device 10 (S1003), and the host device 10 receives it It is displayed on the screen of the host device 10 (S1004). That is, of course, the user's input data is displayed on the input guest device 50 (S1002) and simultaneously displayed on the screen of the host device 10 (S1004).

이후, 상기 호스트 기기(10) 화면 및 게스트 기기(50) 화면에서의 UI 업데이트를 위한 상기 호스트 앱의 함수 호출(local function call)시(S1005), 호스트 플랫폼(100)은, 호출된 함수에 의해 호스트 기기(10) 내에서도 UI 업데이트를 수행시키고(S1009), 또한 호스트 플랫폼(100)은 동일한 함수 호출을 RPC(remote procedure call) 메시지로 변환하여(S1006) 게스트 기기(50)로 송신하고(S1007), 이에 의해 게스트 기기(50) 내에서도 동일한 UI 업데이트가 수행된다(S1008).Thereafter, when a function call (local function call) of the host app for UI update on the screen of the host device 10 and the screen of the guest device 50 is called (S1005), the host platform 100 is UI update is also performed within the host device 10 (S1009), and the host platform 100 converts the same function call into a remote procedure call (RPC) message (S1006) and transmits it to the guest device 50 (S1007) , thereby the same UI update is performed in the guest device 50 (S1008).

전술한 바와 같이, RPC 메시지의 포함 인자(argument)가 기기 의존형 인자인 참조형 인자(reference type argument)인 경우, RPC 메시지와 함께, 그 참조형 인자가 가리키는 데이터 값을 게스트 기기(50)로 함께 송신한다.As described above, when the inclusion argument of the RPC message is a reference type argument, which is a device-dependent factor, the data value indicated by the reference type argument is transmitted to the guest device 50 together with the RPC message. send

단계 S1010 이후는 사용자가 호스트 기기(10)를 통하여 데이터를 입력하는 경우를 나타낸다. 호스트 플랫폼(100)은, 호스트 기기(10) UI를 통하여 사용자에 의해 입력된(S1010) 데이터를 지속적으로 게스트 기기(50)로 송신하고(S1011), 게스트 기기(50)는 이를 수신하여 게스트 기기(50) 화면에 디스플레이한다(S1012). 즉, 당연히 그 사용자의 입력 데이터는, 입력된 호스트 기기(10)에도 디스플레이되고(S1010), 동시에 게스트 기기(10) 화면에도 디스플레이 되는 것이다(S1012). 이 경우 입력된(S1010) 데이터의 게스트 기기(50)로의 송신은(S1011), RPC 메시지에 의해 이루어질 수 있으며, 그러한 데이터의 게스트 기기(50) 화면에의 디스플레이(S1012)는, UI 업데이트 방식으로 이루어질 수 있다.After step S1010 , the user inputs data through the host device 10 . The host platform 100 continuously transmits ( S1010 ) data input by the user through the host device 10 UI to the guest device 50 ( S1011 ), and the guest device 50 receives the data to the guest device (50) It is displayed on the screen (S1012). That is, of course, the user's input data is displayed on the input host device 10 (S1010) and simultaneously displayed on the screen of the guest device 10 (S1012). In this case, the transmission of the input (S1010) data to the guest device 50 (S1011) can be made by an RPC message, and the display (S1012) of the data on the guest device 50 screen (S1012) is a UI update method. can be done

다만, 이 경우에도, 호스트 기기(50)에서의 UI를 통한 사용자의 입력에 따른 단계(S1010,S1011) 없이, 호스트 앱의 수행에 따른 호스트 앱의 함수 호출(S1013)에 의해 UI 업데이트가 일어날 수도 있다. 이는 UI 이동(migration)의 도 7의 단계 S701와 유사하다.However, even in this case, the UI update may occur by a function call (S1013) of the host app according to the execution of the host app without steps (S1010, S1011) according to the user's input through the UI in the host device 50 have. This is similar to step S701 of FIG. 7 of UI migration.

이후, 상기 호스트 기기(10) 화면 및 게스트 기기(50) 화면에서의 UI 업데이트를 위한 상기 호스트 앱의 함수 호출(local function call)시(S1013), 호스트 플랫폼(100)은, 호출된 함수에 의해 호스트 기기(10) 내에서도 UI 업데이트를 수행시키고(S1017), 또한 호스트 플랫폼(100)은, 동일한 함수 호출을 RPC(remote procedure call) 메시지로 변환하여(S1014) 게스트 기기(50)로 송신하고(S1015), 이에 의해 게스트 기기(50) 내에서도 동일한 UI 업데이트가 수행된다(S1016).Thereafter, when a function call (local function call) of the host app for UI update on the screen of the host device 10 and the screen of the guest device 50 is called (S1013), the host platform 100 is UI update is also performed within the host device 10 (S1017), and the host platform 100 converts the same function call into a remote procedure call (RPC) message (S1014) and transmits it to the guest device 50 (S1015) ), thereby performing the same UI update in the guest device 50 (S1016).

전술한 단계 S1005 내지 단계 S1007, 그리고 S1013 내지 단계 S1015를 더욱 상세히 설명하면, 호스트 앱에 의한 함수의 호출시(S1005,S1013), 그 함수에 대하여 미리 교체 설정되어 있는 코드변환함수가 호출되고, 그 코드변환함수에 의해, 호스트 기기(10) 내에서는 호출되는 그 함수를 호출하는 동시에(S1009,S1017), 또한 그 코드변환함수에 의해 그 함수를 RPC 메시지로 변환하여(S1006,S1014), 그 RPC 메시지를 게스트 기기(50)로 송신하는 것이다(S1007,S1015).When the above-described steps S1005 to S1007, and S1013 to S1015 are described in more detail, when the function is called by the host app (S1005, S1013), the code conversion function set in advance for the function is called, and the By the code conversion function, the function to be called in the host device 10 is called at the same time (S1009, S1017), and the function is converted into an RPC message by the code conversion function (S1006, S1014), the RPC The message is transmitted to the guest device 50 (S1007, S1015).

다음으로, 도 11은 UI 복사(replication) 프로세스 중에서도, 사용자의 UI 입력을 통한 호스트 앱 함수 호출을 나타내는 순서도로서, 도 12에서는 B-->C(Local call, 억제(suppression))의 과정을 나타낸다.Next, FIG. 11 is a flowchart illustrating a host app function call through a user's UI input among the UI replication process. In FIG. 12, B-->C (Local call, suppression) process is shown. .

UI를 통한 사용자 입력에 의한 호스트 앱 함수 호출은, UI 이동(migration)의 경우와 달리, 게스트 기기(50) 뿐 아니라, 호스트 기기(10)에서의 사용자 입력에 의해서도 일어날 수 있으며, 도 11의 단계 S1101 내지 S1104는 게스트 기기(50) UI를 통한 사용자 입력에 의해 발생되는 호스트 앱 함수 호출을 나타내며, 도 11의 단계 S1107, S1108, S1112는 호스트 기기(10) UI를 통한 사용자 입력에 의해 발생되는 호스트 앱 함수 호출(B-->C, Local call)을 도시하였다.The host app function call by user input through the UI may occur not only in the guest device 50 but also in response to a user input in the host device 10, unlike in the case of UI migration, as shown in the step of FIG. S1101 to S1104 indicate a host app function call generated by a user input through the guest device 50 UI, and steps S1107, S1108, and S1112 of FIG. 11 are hosts generated by user input through the host device 10 UI. App function call (B-->C, Local call) is shown.

도 11을 참조하면, 게스트 플랫폼(500)은, 게스트 기기(50) UI를 통하여 사용자에 의해 입력된(S1101) 데이터를 지속적으로 호스트 기기(10)로 송신하고(S1102), 호스트 기기(10)는 이를 수신하여 호스트 기기(10) 화면에 디스플레이한다(S1103). 즉, 당연히 그 사용자의 입력 데이터는, 입력된 게스트 기기(50)에도 디스플레이되고(S1101), 동시에 호스트 기기(10) 화면에도 디스플레이 되는 것이다(S1103). 이후, 상기 호스트 기기(10)에서는 호스트 앱 함수 호출(Local call, 도 12 참조)을 수행한다(S1104, B-->C, 도 12 참조).Referring to FIG. 11 , the guest platform 500 continuously transmits data input by the user through the guest device 50 UI (S1101) to the host device 10 (S1102), and the host device 10 receives it and displays it on the screen of the host device 10 (S1103). That is, of course, the user's input data is displayed on the input guest device 50 (S1101) and simultaneously displayed on the screen of the host device 10 (S1103). Thereafter, the host device 10 performs a host app function call (local call, see FIG. 12 ) (S1104, B-->C, see FIG. 12 ).

마찬가지로, 호스트 플랫폼(100)은, 호스트 기기(50) UI를 통하여 사용자에 의해 입력된(S1107) 데이터를 지속적으로 게스트 기기(10)로 송신하고(S1108), 게스트 기기(10)는 이를 수신하여 게스트 기기(10) 화면에 디스플레이한다(S1109). 즉, 당연히 그 사용자의 입력 데이터는, 입력된 호스트 기기(50)에도 디스플레이되고(S1107), 동시에 게스트 기기(50) 화면에도 디스플레이 되는 것이다(S1109). 이 경우 입력된(S1107) 데이터의 게스트 기기(50)로의 송신은(S1108), RPC 메시지에 의해 이루어질 수 있으며, 그러한 데이터의 게스트 기기(50) 화면에의 디스플레이(S1109)는, UI 업데이트 방식으로 이루어질 수 있다. 이후, 상기 호스트 기기(10)에서는 호스트 앱 함수 호출(Local call, 도 12 참조)을 수행한다(S1112, B-->C, 도 12 참조).Similarly, the host platform 100 continuously transmits (S1107) data input by the user through the host device 50 UI to the guest device 10 (S1108), and the guest device 10 receives it It is displayed on the screen of the guest device 10 (S1109). That is, of course, the user's input data is displayed on the input host device 50 (S1107) and simultaneously displayed on the screen of the guest device 50 (S1109). In this case, the transmission of the input (S1107) data to the guest device 50 (S1108) can be made by an RPC message, and the display (S1109) of the data on the guest device 50 screen (S1109) is a UI update method. can be done Thereafter, the host device 10 performs a host app function call (local call, see FIG. 12 ) (S1112, B-->C, see FIG. 12 ).

그러나 이 경우, 호스트 기기(10), 또는 게스트 기기(50) UI를 통한 사용자의 입력에 따라, 게스트 플랫폼(500)이 호스트 앱 수행을 위한 함수 호출(local function call)을 인지한 경우(S1105,S1110), 이를 RPC(remote procedure call)로 변환하지 않는다(suppression, 도 12 참조)(S1106,S1111). 이것이 도 7 내지 도 9의 UI 이동(migration)의 경우와 다른 점이다. 그 이유는 다음과 같다.However, in this case, in response to a user input through the host device 10 or the guest device 50 UI, when the guest platform 500 recognizes a local function call for executing the host app (S1105, S1110), it is not converted to a remote procedure call (RPC) (suppression, see FIG. 12) (S1106, S1111). This is different from the case of UI migration of FIGS. 7 to 9 . The reason for this is as follows.

즉, 예를 들어 호스트 기기(10) 또는 게스트 기기(50)에서 UI를 통해 사용자가 play-pause 토글 버튼을 눌렀다면, 이러한 입력은 전술한 바와 같이 게스트 기기(50)의 UI 뿐만 아니라 호스트 기기(10)의 UI에도 전달되고, 이에 의해 호스트 기기에서는 호스트 앱에 의한 화면의 재생-->일지정지가 수행된다. 만약 UI 이동(migration)의 경우와 같이 게스트 기기(50)의 함수 호출에 의해 RPC 메시지가 호스트 기기(10)로 전달된다면, 다시 호스트 앱의 해당 함수가 호출되어 일시정지-->재생으로 다시 수행되는 오류가 날 것이다. 이를 방지하기 위해 RPC 메시지 변환 억제(suppression, S1106,S1111)가 일어나는 것이다.That is, for example, if the user presses the play-pause toggle button through the UI in the host device 10 or the guest device 50, this input is not only the UI of the guest device 50 but also the host device ( It is also transmitted to the UI of 10), whereby playback-->pause of the screen by the host app is performed in the host device. If the RPC message is delivered to the host device 10 by the function call of the guest device 50 as in the case of UI migration, the corresponding function of the host app is called again and pause-->play is performed again. error will occur. In order to prevent this, RPC message conversion suppression (suppression, S1106, S1111) occurs.

게스트 기기(50)에서는, 호스트 기기(10)로부터 수신하는, 단계 S1105, S1110에서 호출된 함수의 리턴값을 수신하여, 그 호출된 함수 수행 다음 단계로 진행하게 된다(S1106,S1111).The guest device 50 receives the return value of the function called in steps S1105 and S1110, received from the host device 10, and proceeds to the next step of performing the called function (S1106, S1111).

10: 호스트 기기(10)(host device)
20: 호스트 앱(host app)
21: 호스트 앱의 패키지 파일
50: 게스트 기기(guest device)
60: 게스트 기기의 래퍼 앱(wrapper app)
100: 호스트 플랫폼
500: 게스트 플랫폼10: host device 10 (host device)
20: host app
21: Host app's package file
50: guest device
60: wrapper app on guest device
100: host platform
500: guest platform

Claims

When a specific application is executed by the first smart device (hereinafter referred to as a 'host device'), the second smart device by the operation of a program (hereinafter referred to as a 'host platform') that performs the role of a platform of the host device As a computer-implemented method for distributing a user interface (UI) to (hereinafter referred to as 'guest device'),
(a) displaying a list of devices that can be used as the guest device and a list of applications that can interact using a multi-UI screen with other devices (hereinafter referred to as 'interaction applications') on a screen of the host device;
(b) transmitting the package file of the application selected according to the user's input to the device selected according to the user's input (hereinafter referred to as 'guest device'); and,
(c) During operation of one of the applications in step (b) (hereinafter referred to as a 'host app'), a UI object used in the host app is transferred to the guest device selected in step (b). transmitting;
Setting a UI object to be delivered to the guest device by a migration or replication method at runtime in the app layout file of the host app,
The information to be transmitted to the guest device selected in step (c) includes,
According to the user's selection, further comprising information on whether to move (migration) or copy (replication) the UI to the guest device,
If replication or migration is selected,
After step (c), when a local function call of the host app for updating the UI state displayed on the screen of the host device (hereinafter, the update of the UI state is referred to as 'UI update'),
(e) converting the function call into a cross-device function call (hereinafter referred to as 'remote procedure call (RPC)') message and transmitting to the guest device,
A computer-implemented method for distributing a user interface to guest devices.

The method according to claim 1,
Prior to step (a),
(a0) further comprising the step of performing static code analysis of extracting and storing candidates for UI objects used in the corresponding application from the code of the interactive application installed in the host device;
The input of the static code analysis becomes the entire application code,
A computer-implemented method for distributing a user interface to a guest device, characterized in that the output of the static code analysis is a candidate group of UI objects and UI resources used in the corresponding application.

3. The method according to claim 2,
The step (c) is,
(c11) receiving a user input for selecting a UI element to be sent to a guest device from among UIs used by the host app during operation of the host app;
(c12) extracting a UI object actually used to execute the UI element selected in step (c11) in a guest device from among the UI object candidates extracted in step (a0);
(c13) transmitting the UI object extracted in step (c12) to the guest device; and,
(c14) storing the UI element selected in step (c11) in a platform layout file of the host platform
A computer-implemented method for distributing a user interface to a guest device, comprising:

3. The method according to claim 2,
The step (c) is,
(c21) parsing a layout file of the host app or a platform layout file of a host platform (hereinafter collectively referred to as a 'layout file') during the operation of the host app;
(c22) extracting a UI object set in the layout file; and,
(c23) transmitting the UI object extracted in step (c22) to the guest device
A computer-implemented method for distributing a user interface to a guest device, comprising:

3. The method according to claim 2,
In step (c),
A computer-implemented method for distributing a user interface to a guest device, characterized in that mirroring is performed to send the entire screen including the UI object to the guest device.

The method according to claim 1,
The host device and the guest device,
use the same platform as the base platform; or
A computer-implemented method for distributing a user interface to a guest device, characterized in that the host app is an app that uses a code independent of the platform when different basic platforms are used.

The method according to claim 1,
The step (e) is,
(e11) when the function is called, a code conversion function set in advance is called;
(e12) converting the function into an RPC message by the code conversion function; and,
(e13) transmitting the RPC message to the guest device
A computer-implemented method for distributing a guest device user interface, comprising:

8. The method according to claim 1 or 7,
When the inclusion argument of the RPC message is a reference type argument, transmitting the data value indicated by the reference type argument together with the RPC message to the guest device
A computer-implemented method for distributing a guest device user interface, comprising:

When a specific application is executed on the first smart device (hereinafter referred to as 'host device'), a program (hereinafter referred to as ''guest device'') that serves as a platform for the second smart device (hereinafter referred to as 'guest device'). A computer-implemented method for receiving a user interface (UI) from the host device and performing the UI in the guest device by the operation of a guest platform, the method comprising:
(a) receiving, from a host device, a package file of an application (hereinafter referred to as a 'host app') selected according to a user input in the guest device;
(b) receiving, from the host device, a UI object in the guest device; and,
(c) rendering a UI according to the UI object received in step (b) and displaying it on the screen of the guest device,
The information received in step (b) includes,
It further includes information on whether the UI is moved to the guest device or copied (replication),
When the UI is moved to the guest device,
(j1) receiving data input by a user through the UI of the guest device; and,
(j2) When a local function call for executing the host app is recognized according to the data input in the step (j1), the guest platform converts the function call into a remote procedure call (RPC) and the Further comprising the step of sending to the host device,
A computer-implemented method for performing a user interface distributed from a host device.

10. The method of claim 9,
In step (b), when the entire screen including the UI object is received,
Between step (b) and step (c),
(b1) further comprising the step of receiving a user input for selection of a UI element in the received screen,
The UI object received in step (c) is,
Being a UI object for the UI element selected in step (b1)
A computer-implemented method for performing a user interface distributed from a host device, characterized in that.

10. The method of claim 9,
When the UI is copied to the guest device,
(e) when data input by a user through the UI of the guest device is received, transmitting the data to the host device;
A computer-implemented method for performing a user interface distributed from a host device, further comprising a.

12. The method of claim 11,
(f) recognizing a local function call for executing a host app according to the data received in step (e); and
(g) receiving the return value of the function called in step (f) received from the host device, and proceeding to the next step of performing the called function A computer-implemented method for performing a user interface that is

10. The method of claim 9,
When the UI is copied to the guest device,
(h) when receiving user input data from the host device, displaying it through a UI of a screen of the guest device; and
(i) according to the data received in step (h), further comprising the step of recognizing a function call (local function call) for executing the host app,
A computer-implemented method for performing a user interface distributed from a host device, characterized in that receiving the return value of the function called in step (i) and proceeding to the next step of executing the called function.

10. The method of claim 9,
The step (j2) is,
(j21) when the function is called, a code conversion function set in advance is called;
(j22) converting the function into an RPC message by the code conversion function; and,
(j23) transmitting the RPC message to the host device
A computer-implemented method for performing a user interface distributed from a host device, comprising:

When a specific application is executed on the first smart device (hereinafter referred to as a 'host device'), a user interface (UI) is displayed as a second smart device (hereinafter referred to as a 'guest device'). A computer program (hereinafter referred to as a 'host platform') stored in a non-transitory storage medium that operates on the host device for distribution,
It is stored in a non-transitory storage medium, and by the processor,
(a) displaying a list of devices that can be used as the guest device and a list of applications that can interact using a multi-UI screen with other devices (hereinafter referred to as 'interaction applications') on a screen of the host device;
(b) transmitting the package file of the application selected according to the user's input to the device selected according to the user's input (hereinafter referred to as 'guest device'); and,
(c) During operation of one of the applications in step (b) (hereinafter referred to as a 'host app'), a UI object used in the host app is transferred to the guest device selected in step (b). step of sending
contains a command that causes it to be executed,
Setting a UI object to be delivered to the guest device in a migration or replication method at runtime in the metadata file of the host app,
The information to be transmitted to the guest device selected in step (c) includes,
According to the user's selection, further comprising information on whether to move (migration) or copy (replication) the UI to the guest device,
If replication or migration is selected,
After step (c), when a local function call of the host app for updating the UI state displayed on the screen of the host device (hereinafter, the update of the UI state is referred to as 'UI update'),
(e) converting the function call into a cross-device function call (hereinafter referred to as 'remote procedure call (RPC)') message and transmitting it to the guest device
A computer program stored in a non-transitory storage medium further comprising instructions to be executed.

When a specific application is executed by the first smart device (hereinafter referred to as a 'host device'), a user interface (UI) is received from the host device and a second smart device (hereinafter referred to as a 'guest divece)'') as a computer program (hereinafter referred to as 'guest platform') stored in a non-transitory storage medium that operates on the guest device to perform the UI,
It is stored in a non-transitory storage medium, and by the processor,
(a) receiving, from a host device, a package file of an application selected according to a user's input (hereinafter referred to as a 'host app');
(b) receiving a UI object (UI object) from the host device; and,
(c) rendering the UI according to the UI object received in step (b) and displaying it on the screen of the guest device
contains a command that causes it to be executed,
The information received in step (b) includes,
It further includes information on whether the UI is moved to the guest device or copied (replication),
When the UI is moved to the guest device,
(j1) receiving data input by a user through the UI of the guest device; and,
(j2) When a local function call for executing the host app is recognized according to the data input in the step (j1), the guest platform converts the function call into a remote procedure call (RPC) and the Steps to send to the host device
A computer program stored in a non-transitory storage medium, further comprising instructions to be executed.