KR102576664B1 - 그래픽 사용자 인터페이스의 프로토타입 제작 방법 및 그 시스템 - Google Patents

Abstract

그래픽 사용자 인터페이스의 프로토타입 제작 방법 및 그 시스템이 제공된다. 본 개시의 몇몇 실시예들에 따른 그래픽 사용자 인터페이스의 프로토타입 제작 방법은, 프로토타입 제작 인터페이스를 사용자에게 제공하는 단계, 프로토타입 제작 인터페이스를 통해 제작되는 타깃 GUI(Graphical User Interface) 화면에 배치된 적어도 하나의 객체 중에서 타깃 객체를 결정하는 단계, 기 제작된 GUI 화면 샘플들을 이용하여 타깃 객체에 대한 추천 모션을 결정하는 단계 및 추천 모션을 사용자에게 제공하는 단계를 포함할 수 있다. 이러한 방법에 따르면, GUI 프로토타입의 제작 편의성은 크게 향상되고 제작 난이도는 크게 감소될 수 있다.

Description

그래픽 사용자 인터페이스의 프로토타입 제작 방법 및 그 시스템{METHOD FOR BUILDING PROTOTYPE OF GRAPHICAL USER INTERFACE AND SYSTEM THEREOF}

본 개시는 그래픽 사용자 인터페이스의 프로토타입 제작 방법 및 그 시스템에 관한 것으로, 보다 상세하게는, 머신러닝(machine-learning) 기술을 이용하여 그래픽 사용자 인터페이스의 프로토타입 제작을 지원하는 방법 및 그 방법을 수행하는 시스템에 관한 것이다.

단말 제조사들, 애플리케이션 제조사들 및 온라인 서비스 제공자들은 제품(또는 서비스)의 사용 편의성 증대를 위해 그래픽 사용자 인터페이스(Graphical User Interface, 이하 'GUI'로 칭함)의 디자인에 많은 노력을 기울이고 있다. 또한, 이러한 GUI의 디자인 과정에는, GUI의 프로토타입을 제작하기 위한 다양한 툴들이 이용된다.

디자이너는 단말, 애플리케이션 또는 온라인 서비스(이하, '애플리케이션'으로 통칭함)에 GUI를 적용하기 전에, GUI의 프로토타입을 통해 사용자 편의성, 사용자 인터랙션 및 다양한 시각적 효과를 확인할 수 있다. 또한, 디자이너는 애플리케이션 기획자 및 개발자 등과 같은 제3자에게 GUI 프로토타입을 공유하여, 서로 의견을 교환할 수 있다.

한편, 대다수의 디자이너들은 현재 GUI 화면에 적합한 객체의 모션을 기술하는 데에 많은 어려움을 느끼거나 원하는 심상(또는 자신의 디자인 의도)을 효과적으로 나타내는 객체의 모션을 결정하기 위해 상당한 시간을 투입하고 있다. 사실, 특정 GUI 화면에 적합한 객체의 모션을 구체적으로 기술하거나 빠른 시간 내에 떠올리는 것은 숙련된 디자이너에게도 쉽지 않은 일이다.

한국등록특허 제10-1426918호 (2014.08.05 공고)

본 개시의 몇몇 실시예들을 통해 해결하고자 하는 기술적 과제는, 그래픽 사용자 인터페이스(Graphical User Interface, 이하 'GUI'로 칭함) 프로토타입의 제작 편의성을 향상시킬 수 있는 방법 및 그 방법을 수행하는 시스템을 제공하는 것이다.

본 개시의 몇몇 실시예들을 통해 해결하고자 하는 다른 기술적 과제는, GUI 프로토타입의 제작 품질을 향상시킬 수 있는 방법 및 그 방법을 수행하는 시스템을 제공하는 것이다.

본 개시의 몇몇 실시예들을 통해 해결하고자 하는 또 다른 기술적 과제는, GUI 프로토타입의 제작 난이도를 감소시킬 수 있는 방법 및 그 방법을 수행하는 시스템을 제공하는 것이다.

본 개시의 몇몇 실시예들을 통해 해결하고자 하는 또 다른 기술적 과제는, GUI 프로토타입의 제작 속도를 증가시키고 제작 효율성을 향상시킬 수 있는 방법 및 그 방법을 수행하는 시스템을 제공하는 것이다.

본 개시의 기술적 과제들은 이상에서 언급한 기술적 과제들로 제한되지 않으며, 언급되지 않은 또 다른 기술적 과제들은 아래의 기재로부터 본 개시의 기술분야에서의 통상의 기술자에게 명확하게 이해될 수 있을 것이다.

상술한 기술적 과제를 해결하기 위한 본 개시의 몇몇 실시예들에 따른 그래픽 사용자 인터페이스의 프로토타입 제작 방법은, 적어도 하나의 컴퓨팅 장치에 의해 수행되는 방법으로서, 프로토타입 제작 인터페이스를 사용자에게 제공하는 단계, 상기 프로토타입 제작 인터페이스를 통해 제작되는 타깃 GUI(Graphical User Interface) 화면에 배치된 적어도 하나의 객체 중에서 타깃 객체를 결정하는 단계, 기 제작된 GUI 화면 샘플들을 이용하여 상기 타깃 객체에 대한 추천 모션을 결정하는 단계 - 상기 GUI 화면 샘플들은 모션 객체를 포함함 - 및 상기 추천 모션을 상기 사용자에게 제공하는 단계를 포함할 수 있다.

몇몇 실시예들에서, 상기 타깃 객체를 결정하는 단계는, GUI 화면 정보를 입력받아 모션 객체를 예측하도록 학습된 모델을 획득하는 단계, 상기 학습된 모델을 통해 상기 타깃 GUI 화면에 배치된 상기 적어도 하나의 객체 중에서 모션 객체를 예측하는 단계 및 상기 예측된 모션 객체를 상기 타깃 객체로 결정하는 단계를 포함할 수 있다.

몇몇 실시예들에서, 상기 타깃 객체에 대한 추천 모션을 결정하는 단계는, 상기 추천 모션에 대한 모션 요소의 값을 결정하는 단계를 포함하고, 상기 모션 요소는 목적지, 상기 목적지까지의 이동 시간, 속도 및 가속도 중 적어도 하나를 포함할 수 있다.

몇몇 실시예들에서, 상기 타깃 객체에 대한 추천 모션을 결정하는 단계는, 객체의 속성 정보를 기준으로 하여, 상기 GUI 화면 샘플들과 상기 타깃 GUI 화면 간의 유사도를 산출하는 단계, 상기 유사도를 기초로 상기 GUI 화면 샘플들 중에서 레퍼런스 샘플을 선별하는 단계 및 상기 레퍼런스 샘플의 모션 객체를 이용하여 상기 추천 모션을 결정하는 단계를 포함할 수 있다.

몇몇 실시예들에서, 상기 타깃 객체에 대한 추천 모션을 결정하는 단계는, 상기 GUI 화면 샘플들을 이용하여 학습된 모델을 획득하는 단계 - 상기 모델은 상기 GUI 화면 샘플들의 정보를 입력받아 객체의 모션을 예측하도록 학습된 것임 - 및 상기 학습된 모델에 상기 타깃 GUI 화면의 정보를 입력하여 상기 추천 모션을 예측하는 단계를 포함할 수 있다.

몇몇 실시예들에서, 상기 타깃 객체에 대한 추천 모션을 결정하는 단계는, 상기 타깃 GUI 화면의 태스크 또는 디자인 패턴을 기초로 상기 GUI 화면 샘플들 중에서 레퍼런스 샘플을 선별하는 단계 및 상기 레퍼런스 샘플의 모션 객체를 이용하여 상기 추천 모션을 결정하는 단계를 포함할 수 있다.

몇몇 실시예들에서, 상기 타깃 객체에 대한 추천 모션을 결정하는 단계는, 상기 사용자로부터 상기 타깃 객체에 대한 모션 디스크립션(description)을 입력받는 단계, 상기 모션 디스크립션에서 상기 사용자의 디자인 의도를 추출하는 단계, 상기 GUI 화면 샘플들을 이용하여 학습된 모델을 획득하는 단계 - 상기 모델은 상기 GUI 화면 샘플들의 디자인 의도를 입력받아 객체의 모션을 예측하도록 학습된 것임 - 및 상기 학습된 모델을 통해 상기 사용자의 디자인 의도에 부합하는 상기 타깃 객체의 추천 모션을 예측하는 단계를 포함할 수 있다.

몇몇 실시예들에서, 객체의 속성에 기반하여 모션을 결정하는 룰셋을 획득하는 단계 및 상기 타깃 객체의 속성 정보에 상기 룰셋을 적용하여 다른 추천 모션을 결정하는 단계를 더 포함할 수 있다.

몇몇 실시예들에서, 상기 타깃 객체에 대한 추천 모션을 결정하는 단계는, 상기 GUI 화면 샘플들의 모션 객체를 이용하여 상기 타깃 객체의 모션 요소의 값을 결정하는 단계 및 상기 타깃 객체의 속성 정보를 기초로 상기 모션 요소의 값을 보정하여 상기 추천 모션을 결정하는 단계를 포함할 수 있다.

몇몇 실시예들에서, 객체들의 관계에 기반하여 모션을 결정하는 룰셋을 획득하는 단계, 상기 타깃 GUI 화면을 분석하여 상기 타깃 객체와 상기 타깃 GUI 화면에 배치된 다른 객체와의 관계 정보를 추출하는 단계 및 상기 추출된 관계 정보에 상기 룰셋을 적용하여 다른 추천 모션을 결정하는 단계를 더 포함할 수 있다.

몇몇 실시예들에서, 상기 타깃 GUI 화면과 연관된 다른 GUI 화면을 획득하는 단계 - 상기 다른 GUI 화면과 상기 타깃 GUI 화면 간에는 표시 속성의 변화가 존재함 -, 상기 타깃 GUI 화면과 상기 다른 GUI 화면을 비교하여 상기 표시 속성의 타입과 변화 정도를 식별하는 단계 및 상기 식별 결과에 기초하여 상기 타깃 객체의 다른 추천 모션을 결정하는 단계를 더 포함할 수 있다.

상술한 기술적 과제를 해결하기 위한 본 개시의 몇몇 실시예들에 따른 그래픽 사용자 인터페이스의 프로토타입 제작 시스템은, 하나 이상의 프로세서 및 인스트럭션들을 저장하는 메모리를 포함하고, 상기 하나 이상의 프로세서는, 상기 저장된 인스트럭션들을 실행시킴으로써, 프로토타입 제작 인터페이스를 사용자에게 제공하는 동작, 상기 프로토타입 제작 인터페이스를 통해 제작되는 GUI(Graphical User Interface) 화면에 배치된 적어도 하나의 객체 중에서 타깃 객체를 결정하는 동작, 기 제작된 GUI 화면 샘플들을 이용하여 상기 타깃 객체에 대한 추천 모션을 결정하는 동작 및 상기 추천 모션을 상기 사용자에게 제공하는 동작을 수행할 수 있다.

상술한 기술적 과제를 해결하기 위한 본 개시의 몇몇 실시예들에 따른 컴퓨터 프로그램은, 컴퓨팅 장치와 결합되어, 프로토타입 제작 인터페이스를 사용자에게 제공하는 단계, 상기 프로토타입 제작 인터페이스를 통해 제작되는 타깃 GUI(Graphical User Interface) 화면에 배치된 적어도 하나의 객체 중에서 타깃 객체를 결정하는 단계, 기 제작된 GUI 화면 샘플들을 이용하여 상기 타깃 객체에 대한 추천 모션을 결정하는 단계 - 상기 GUI 화면 샘플들은 모션 객체를 포함함 - 및 상기 추천 모션을 상기 사용자에게 제공하는 단계를 실행시키기 위하여 컴퓨터로 판독가능한 기록매체에 저장될 수 있다.

본 개시의 몇몇 실시예들에 따르면, 제작 중인 그래픽 사용자 인터페이스(Graphical User Interface, 이하 'GUI'로 칭함) 화면에 배치된 타깃 객체에 대한 추천 모션이 사용자(e.g., 디자이너)에게 제공될 수 있다. 가령, 기 제작된 GUI 화면 샘플들의 모션 객체를 참조하여 타깃 객체에 대한 추천 모션이 사용자에게 제공될 수 있다. 이에 따라, GUI 프로토타입 제작의 편의성은 향상되고 제작 난이도는 크게 감소될 수 있다. 뿐만 아니라, GUI 프로토타입 제작에 소요되는 비용은 감소되고 제작된 GUI 프로토타입의 품질은 향상될 수 있다.

또한, GUI 화면의 태스크와 디자인 패턴을 고려하여 타깃 객체의 추천 모션을 결정함으로써, 추천 정확도와 사용자 만족도가 더욱 향상될 수 있다.

또한, 사용자가 입력한 모션 디스크립션(description)을 반영하여 타깃 객체에 대한 추천 모션이 결정될 수 있다. 가령, 모션에 대한 개략적인 설명이 주어지면, 학습된 모델 등을 이용하여 주어진 설명에 부합하는 추천 모션이 정확하게 결정될 수 있다. 이에 따라, GUI 프로토타입의 제작 편의성은 더욱 향상되고 제작 난이도는 더욱 감소될 수 있다.

또한, 타깃 객체의 속성 정보와 다른 객체와의 관계를 고려함으로써 상황에 맞는 자연스러운 모션이 타깃 객체의 추천 모션으로 결정될 수 있다(e.g., 크기가 큰 타깃 객체에게 빠른 속도의 모션이 추천되는 경우 등이 방지될 수 있음).

또한, 타깃 객체 또는 다른 객체의 표시 속성 변화를 고려함으로써 상황에 맞는 자연스러운 모션이 타깃 객체의 추천 모션으로 결정될 수 있다(e.g., 크기 변화가 큰 타깃 객체에게 느린 속도의 모션이 추천되는 경우 등이 방지될 수 있음).

본 개시의 기술적 사상에 따른 효과들은 이상에서 언급한 효과들로 제한되지 않으며, 언급되지 않은 또 다른 효과들은 아래의 기재로부터 통상의 기술자에게 명확하게 이해될 수 있을 것이다.

도 1은 본 개시의 몇몇 실시예들에 따른 프로토타입 제작 장치의 동작 환경을 설명하기 위한 예시적인 구성도이다.
도 2 및 도 3은 본 개시의 몇몇 실시예들에 따른 프로토타입 제작 장치의 추천 모션 결정 과정을 설명하기 위한 예시적인 도면들이다.
도 4는 본 개시의 몇몇 실시예들에 따른 그래픽 사용자 인터페이스(Graphical User Interface, 이하 'GUI'로 칭함)의 프로토타입 제공 방법을 개략적으로 나타내는 예시적인 흐름도이다.
도 5 내지 도 7은 본 개시의 몇몇 실시예들에 따른 타깃 객체 결정 방법을 설명하기 위한 예시적인 도면이다.
도 8은 본 개시의 몇몇 실시예들에 따른 GUI 화면 유사도 산출 방법을 설명하기 위한 예시적인 도면이다.
도 9는 본 개시의 다른 몇몇 실시예들에 따른 GUI 화면 유사도 산출 방법을 설명하기 위한 예시적인 도면이다.
도 10 내지 도 12는 본 개시의 몇몇 실시예들에 따라 머신러닝 모델을 이용하여 타깃 객체의 추천 모션을 예측하는 방법을 설명하기 위한 예시적인 도면들이다.
도 13은 본 개시의 다른 몇몇 실시예들에 따라 머신러닝 모델을 이용하여 타깃 객체의 추천 모션을 예측하는 방법을 설명하기 위한 예시적인 도면들이다.
도 14는 본 개시의 또 다른 몇몇 실시예들에 따라 머신러닝 모델을 이용하여 타깃 객체의 추천 모션을 예측하는 방법을 설명하기 위한 예시적인 도면들이다.
도 15는 본 개시의 몇몇 실시예들에 따른 추천 모션 제공 방법을 설명하기 위한 예시적인 도면이다.
도 16은 본 개시의 다른 몇몇 실시예들에 따른 추천 모션 제공 방법을 설명하기 위한 예시적인 도면이다.
도 17은 본 개시의 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법을 설명하기 위한 예시적인 흐름도이다.
도 18은 본 개시의 몇몇 실시예들에 따라 머신러닝 모델을 이용하여 GUI 화면의 디자인 패턴을 결정하는 방법을 설명하기 위한 예시적인 도면이다.
도 19는 본 개시의 또 다른 몇몇 실시예들에 따라 머신러닝 모델을 이용하여 GUI 화면의 디자인 패턴 및/또는 태스크에 따른 타깃 객체의 추천 모션을 예측하는 방법을 설명하기 위한 예시적인 도면이다.
도 20은 본 개시의 또 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법을 개략적으로 나타내는 예시적인 흐름도이다.
도 21 및 도 22는 본 개시의 몇몇 실시예들에 따라 머신러닝 모델을 이용하여 모션 디스크립션에서 사용자의 디자인 의도 등을 추출하는 방법을 설명하기 위한 예시적인 도면이다.
도 23은 본 개시의 몇몇 실시예들에 따라 머신러닝 모델을 이용하여 GUI 화면의 디자인 의도에 따른 타깃 객체의 추천 모션을 예측하는 방법을 설명하기 위한 예시적인 도면이다.
도 24는 본 개시의 또 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법을 개략적으로 나타내는 예시적인 흐름도이다.
도 25는 본 개시의 몇몇 실시예들에 따라 타깃 객체의 속성 정보를 기초로 추천 모션을 결정하는 방법을 설명하기 위한 예시적인 도면이다.
도 26은 본 개시의 몇몇 실시예들에 따라 타깃 객체와 다른 객체와의 관계 정보를 기초로 추천 모션을 결정하는 방법을 설명하기 위한 예시적인 도면이다.
도 27은 본 개시의 또 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법을 개략적으로 나타내는 예시적인 흐름도이다.
도 28 및 도 29는 또 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법에서 참조될 수 있는 리스폰스 적용 전후의 GUI 화면들을 예시한다.
도 30은 본 개시의 몇몇 실시예들에 따라 리스폰스 정보를 기초로 추천 모션을 결정하는 방법을 설명하기 위한 예시적인 도면이다.
도 31은 본 개시의 다른 몇몇 실시예들에 따라 리스폰스 정보를 기초로 추천 모션을 결정하는 방법을 설명하기 위한 예시적인 도면이다.
도 32는 본 개시의 몇몇 실시예들에 따른 프로토타입 제작 장치 등을 구현할 수 있는 예시적인 컴퓨팅 장치를 도시한다.

이하, 첨부된 도면을 참조하여 본 개시의 다양한 실시예들을 상세히 설명한다. 본 개시의 이점 및 특징, 그리고 그것들을 달성하는 방법은 첨부되는 도면과 함께 상세하게 후술되어 있는 실시예들을 참조하면 명확해질 것이다. 그러나, 본 개시의 기술적 사상은 이하의 실시예들에 한정되는 것이 아니라 서로 다른 다양한 형태로 구현될 수 있으며, 단지 이하의 실시예들은 본 개시의 기술적 사상을 완전하도록 하고, 본 개시가 속한 기술분야에서 통상의 지식을 가진 자에게 본 개시의 범주를 완전하게 알려주기 위해 제공되는 것이며, 본 개시의 기술적 사상은 청구항의 범주에 의해 정의될 뿐이다.

본 개시의 다양한 실시예들을 설명함에 있어, 관련된 공지 구성 또는 기능에 대한 구체적인 설명이 본 개시의 요지를 흐릴 수 있다고 판단되는 경우에는 그 상세한 설명은 생략한다.

다른 정의가 없다면, 이하의 실시예들에서 사용되는 용어(기술 및 과학적 용어를 포함)는 본 개시가 속한 기술분야에서 통상의 지식을 가진 자에게 공통적으로 이해될 수 있는 의미로 사용될 수 있으나, 이는 관련 분야에 종사하는 기술자의 의도 또는 판례, 새로운 기술의 출현 등에 따라 달라질 수도 있다. 본 개시에서 사용된 용어는 실시예들을 설명하기 위한 것이며 본 개시의 범주를 제한하고자 하는 것은 아니다.

이하의 실시예들에서 사용되는 단수의 표현은 문맥상 명백하게 단수인 것으로 특정되지 않는 한, 복수의 개념을 포함한다. 또한, 복수의 표현은 문맥상 명백하게 복수인 것으로 특정되지 않는 한, 단수의 개념을 포함한다.

또한, 이하의 실시예들에서 사용되는 제1, 제2, A, B, (a), (b) 등의 용어는 어떤 구성요소를 다른 구성요소와 구별하기 위해 사용되는 것일 뿐, 그 용어에 의해 해당 구성요소의 본질이나 차례 또는 순서 등이 한정되지는 않는다.

본 개시의 다양한 실시예들에 대한 설명에 앞서, 이하의 실시예들에서 이용될 수 있는 용어의 개념을 명확하게 하도록 한다.

이하의 실시예들에서, '제작자' 또는 '저작자'는 그래픽 사용자 인터페이스(Graphical User Interface, 이하 'GUI'로 칭함)의 프로토타입을 만드는 자, 예컨대 디자이너를 의미할 수 있다. 또한, '제작/저작 장치'는 GUI 프로토타입을 제작하기 위해 제작자가 이용하는 컴퓨팅 장치/시스템을 의미할 수 있다. 제작/저작 장치는 경우에 따라 '제작/저작 시스템'으로 명명될 수도 있다.

이하의 실시예들에서, '열람자'는 제작된 GUI 프로토타입을 제공받아서 열람하는 자, 예컨대 개발자, 기획자 및/또는 의사결정권자 등을 의미할 수 있다. 또한, '열람 장치'는 프로토타입의 열람을 위해 열람자가 이용하는 컴퓨팅 장치/시스템을 의미할 수 있다. 열람 장치는 프로토타입을 실행하거나 프로토타입에 대한 인터랙션 시나리오를 재현 또는 재생하는 장치로 이해될 수도 있다. 열람 장치는 제작 대상 GUI가 궁극적으로 실행될 타깃 장치와 동일한 유형의 장치일 수도 있다. 열람 장치는 경우에 따라 '열람 시스템'으로 명명될 수도 있다.

이하의 실시예들에서, '트리거(trigger)'는 GUI 상의 시각적 변화 및/또는 GUI가 구현된 장치의 임의의 반응(reaction) 내지는 피드백(feedback)을 유발하는 이벤트를 의미할 수 있다. 트리거는 GUI 상에서의 사용자 입력, 센서 등 기타 외부 입력 또는 GUI 상에 발생한 다른 이벤트일 수 있다. 트리거는 GUI가 적용된 장치에 구비된 터치 스크린에 대한 터치 입력 또는 제스처, 마우스나 키보드 등의 장치를 통한 사용자 입력, 해당 장치에 구비된 센서(예컨대, 카메라, 마이크, 가속도 센서, 자이로 센서, 근접 센서, 지자기 센서 등)나 해당 장치 외부에서 해당 장치에게 데이터를 제공하는 센서(예컨대, 조도 센서, 온도 센서, 인체감지 센서 등)의 측정 데이터에 의해 발생되는 이벤트일 수 있다. 한편, 트리거는 트리거의 발생 조건에 따라 서로 다른 리스폰스를 유발하도록 정의될 수도 있다.

이하의 실시예들에서, '리스폰스(response)'는 트리거에 의해 유발되는 반응(또는 액션)을 의미할 수 있다. 예를 들어, 리스폰스는 GUI의 객체의 표시 속성(e.g., 위치, 크기, 투명도, 색상, 방위각 등)의 변화일 수 있다. 이 경우, 리스폰스의 출력(또는 적용/실행)이란 객체의 표시 속성을 변경하는 오퍼레이션의 실행을 의미할 수 있다. 다른 예로서, 리스폰스는 GUI가 구현된 장치의 햅틱 피드백이나 사운드 피드백일 수 있다. 한편, 리스폰스는 다른 리스폰스를 유발하는 트리거로서 기능할 수도 있다.

이하의 실시예들에서, '인터랙션 세트(interaction set)'는 트리거 및 트리거에 의해 유발되는 리스폰스의 묶음(collection)을 의미할 수 있다.

이하의 실시예들에서, '인터랙션(interaction)'은 GUI 상에서 감지되는 이벤트의 발생 및 이에 응답한 일련의 반응의 과정을 포괄적으로 지칭하는 용어일 수 있다. 그래픽 사용자 인터페이스는 GUI 객체들 및 일련의 인터랙션들로 구성될 수 있다.

이하의 실시예들에서, '인터랙션 시나리오(interaction scenario)'는 GUI의 프로토타입에 적용된 인터랙션들의 적어도 일부를 순차적으로 또는 순서 없이 재현하기 위한 데이터를 의미할 수 있다.

이하, 첨부된 도면들을 참조하여 본 개시의 다양한 실시예들에 대하여 상세하게 설명한다.

도 1은 본 개시의 몇몇 실시예들에 따른 프로토타입 제작 장치(10)의 동작 환경을 나타내는 예시적인 구성도이다.

도 1에 도시된 바와 같이, 프로토타입 제작 장치(10)는 프로토타입 열람 장치(12) 및/또는 프로토타입 제공 서버(11)와 연계하여 동작할 수 있다. 연계 동작하는 장치들은 '프로토타입 제작 시스템'으로 통칭될 수 있으며, 경우에 따라서는 프로토타입 제작 장치(10)가 '프로토타입 제작 시스템'으로 칭해질 수도 있다. 이하에서는, 설명의 편의상 프로토타입 제작 장치(10)를 '제작 장치(10)'로 약칭하도록 하며, 이해의 편의를 제공하기 위해 제작 장치(10)에 앞서 다른 장치들(11, 12)에 대하여 먼저 설명하도록 한다.

프로토타입 제공 서버(11)는 프로토타입 제공 기능을 제공하는 컴퓨팅 장치/시스템일 수 있다. 가령, 프로토타입 제공 서버(11)는 제작 장치(10)로부터 GUI 프로토타입(e.g., 애플리케이션 등의 GUI 프로토타입), 인터랙션 시나리오 등을 수신하여 프로토타입 열람 장치(12)에게 제공할 수 있다. 프로토타입 제공 서버(11)는 파일 서버, 웹 서버 등과 같이 다양한 프로토콜을 통해 데이터를 송수신하고 교환하는 임의의 서버일 수 있으나, 본 개시의 범위가 이에 한정되는 것은 아니다.

프로토타입 제공 서버(11)는 기 제작된 GUI 프로토타입 샘플들을 관리하고 제공할 수 있다. 가령, 프로토타입 제공 서버(11)는 제작 장치(10), 프로토타입 열람 장치(12) 등의 요청에 응답하여 GUI 프로토타입 샘플을 제공할 수 있다. 각각의 GUI 프로토타입 샘플은 다수의 GUI 화면 샘플들로 구성될 수 있는데, 프로토타입 제공 서버(10)는 GUI 프로토타입 샘플들, GUI 화면 샘플들을 소정의 기준(e.g., 태스크, 의도, 심상, 디자인 패턴 등)에 따라 분류하여 관리할 수 있다. 또한, 프로토타입 제공 서버(10)는 그러한 샘플들을 데이터베이스(DB)에 저장하여 관리할 수도 있다. GUI 프로토타입 샘플 데이터는 트리거, 리스폰스, 객체 속성 등에 관한 다양한 데이터를 포함할 수 있다.

경우에 따라, 프로토타입 제공 서버(11)는 웹 인터페이스를 통해 GUI 프로토타입 제작 기능을 제공할 수도 있다. 즉, 제작 장치(10)의 사용자가 웹 인터페이스를 통해 프로토타입 제공 서버(11)에 접속하여 GUI 프로토타입을 제작할 수도 있다.

다음으로, 프로토타입 열람 장치(12)는 GUI 프로토타입에 대한 열람 또는 실행 기능을 제공하는 컴퓨팅 장치/시스템을 의미할 수 있다. 또는, 상술한 바와 같이, 프로토타입 열람 장치(10)는 GUI 프로토타입을 열람하기 위해 열람자가 이용하는 컴퓨팅 장치/시스템을 의미할 수 있다. 이하의 실시예들에서, '프로토타입의 열람'과 '프로토타입의 실행'은 동일한 의미로 사용될 수 있다. 프로토타입 열람 장치(12)는 GUI 프로토타입에 대한 인터랙션 시나리오를 재현 또는 재생하는 기능을 구비할 수도 있다. 프로토타입 열람 장치(12)는 제작 장치(10) 또는 프로토타입 제공 서버(11)로부터 프로토타입 및/또는 인터랙션 시나리오를 획득할 수 있다.

프로토타입 열람 장치(12)는 제작 대상 GUI가 적용될 타깃 장치와 동일한 유형의 장치일 수도 있고 상이한 유형의 장치일 수도 있다. 프로토타입 열람 장치(12)가 타깃 장치와 상이한 유형의 장치일 경우, 프로토타입 열람 장치(12)는 타깃 장치의 환경(e.g., 디스플레이 등)을 모사하는 GUI를 통해 프로토타입을 디스플레이하고 실행시킬 수 있다.

다음으로, 제작 장치(10)는 GUI 프로토타입에 대한 제작 기능을 제공하는 컴퓨팅 장치/시스템을 의미할 수 있다. 또는, 상술한 바와 같이, 제작 장치(10)는 프로토타입을 제작하기 위해 제작자가 이용하는 컴퓨팅 장치/시스템을 의미할 수 있다. 이하의 설명에서, '제작자'는 제작 장치(10)의 '사용자'로 명명될 수도 있다.

예를 들어, 제작 장치(10)는 GUI 프로토타입을 제작하는 툴(e.g., 프로토타이핑 툴)을 실행시킴으로써 사용자에게 제작 기능을 제공할 수 있다. 그러나, 본 개시의 범위가 이에 한정되는 것은 아니며, 제작 장치(10)는 웹 인터페이스를 통해 사용자(제작자)에게 GUI 프로토타입 제작 기능을 제공할 수도 있다. 제작 장치(10)는 프로토타입에 대한 인터랙션 시나리오 생성 기능을 더 제공할 수도 있다.

제작 장치(10)는 제작된 GUI 프로토타입을 프로토타입 제공 서버(11) 또는 프로토타입 열람 장치(12)에게 제공할 수 있다. 제작 장치(10)는 제작 대상 GUI가 적용될 타깃 장치와 동일한 유형의 장치일 수도 있고 상이한 유형의 장치일 수도 있다. 프로토타입의 제작 및/또는 시연 과정에서, 타깃 장치가 제작 장치(10)에 유선 또는 무선으로 연결되어, 프로토타입에 포함될 트리거를 입력 또는 정의하거나 트리거에 의해 유발되는 리스폰스를 확인하기 위해 이용될 수도 있다.

본 개시의 다양한 실시예들에 따르면, 도 2에 도시된 바와 같이, 제작 장치(10)가 학습된 모델(21, 즉 머신러닝 모델)을 통해 타깃 객체에 적합한 모션 정보(24, 즉 추천 모션의 정보)를 예측하여 사용자에게 제공할 수 있다. 구체적으로, 기 제작된 GUI 화면 샘플들의 데이터(e.g., 화면 이미지, 객체의 속성 정보, 모션 정보 등)를 학습함으로써 모션 정보를 예측하는 모델(21)이 구축될 수 있다. 이러한 학습은 제작 장치(10)에 의해 수행될 수도 있고 프로토타입 제공 서버(11) 또는 별도의 장치/시스템에 의해 수행될 수도 있다. 다음으로, 제작 장치(10)는 학습된 모델(21)에 GUI 화면 정보(23)를 입력(피딩(feeding))하여 타깃 객체에 적합한 모션 정보(24, e.g., 목적지, 시간, 속도/가속도 등)를 예측할 수 있다. 가령, 사용자가 도 3에 예시된 바와 같은 GUI 화면(31)을 제작한다고 가정하자. 이러한 경우, 제작 장치(10)는 학습된 모델(21)을 이용하여 여러가지 모션들(33 내지 35) 중에서 타깃 객체(32)에 가장 적합한 모션을 결정하고 결정된 모션을 사용자에게 추천(제안)할 수 있다. 그렇게 함으로써, GUI 프로토타입의 제작 난이도는 크게 감소되고 제작 편의성은 크게 향상될 수 있다. 추천 모션을 결정하는 방법에 관한 다양한 실시예들에 대해서는 추후 도 4 이하의 도면들을 참조하여 보다 상세하게 설명하도록 한다. 이하의 설명에서, 머신러닝 모델은 편의상 '모델'로 약칭될 수도 있다.

참고로, 도 3 이하의 도면들에서 음영 처리된 객체(e.g., 31)는 타깃 객체 또는 모션 객체를 의미하고, 'M'은 모션(Motion)을 의미하며, 화살표의 굵기는 속도의 크기(빠르기)를 의미한다.

또한, 도 2는 학습된 모델(21)이 제작 장치(10)에 위치하는 것처럼 도시하고 있으나, 경우에 따라 학습된 모델(21)은 프로토타입 제공 서버(11)에 위치할 수도 있다. 이러한 경우, 제작 장치(10)는 프로토타입 제공 서버(11)를 통해(즉, 요청-응답을 통해) 타깃 객체의 모션 정보(24)를 예측할 수 있다.

상술한 장치들(10 내지 12)은 적어도 하나의 컴퓨팅 장치로 구현될 수 있다. 예를 들어, 제작 장치(10)의 모든 기능이 하나의 컴퓨팅 장치에서 구현될 수도 있고, 제작 장치(10)의 제1 기능은 제1 컴퓨팅 장치에서 구현되고 제2 기능은 제2 컴퓨팅 장치에서 구현될 수도 있다. 또는, 제작 장치(10)의 특정 기능이 복수의 컴퓨팅 장치들에서 구현될 수도 있다.

컴퓨팅 장치는 컴퓨팅(프로세싱) 기능을 구비한 임의의 장치를 모두 포함할 수 있으며, 이러한 장치의 일 예시에 대해서는 도 32를 참조하도록 한다. 컴퓨팅 장치는 다양한 구성요소들(e.g. 메모리, 프로세서 등)이 상호작용하는 집합체이므로, 경우에 따라 '컴퓨팅 시스템'으로 명명될 수도 있다. 또한, 컴퓨팅 시스템이라는 용어는 복수의 컴퓨팅 장치들이 상호작용하는 집합체라는 의미도 포함할 수 있다.

도 1에 도시된 바와 같이, 상술한 장치들(10 내지 12)은 네트워크를 통해 통신할 수 있다. 여기서, 네트워크는 근거리 통신망(Local Area Network; LAN), 광역 통신망(Wide Area Network; WAN), 이동 통신망(mobile radio communication network), Wibro(Wireless Broadband Internet) 등과 같은 모든 종류의 유/무선 네트워크로 구현될 수 있다.

지금까지 도 1 내지 도 3을 참조하여 본 개시의 몇몇 실시예들에 따른 제작 장치(10)의 동작 환경에 대하여 설명하였다. 이하에서는, 도 4 이하의 도면들을 참조하여 상술한 제작 장치(10) 등에서 수행될 수 있는 다양한 방법들에 대하여 설명하도록 한다.

이하에서는, 이해의 편의를 제공하기 위해, 후술될 방법들의 모든 단계/동작들이 상술한 제작 장치(10)에서 수행되는 것을 가정하여 설명을 이어가도록 한다. 따라서, 특정 단계/동작의 주체가 생략된 경우, 제작 장치(10)에서 수행되는 것으로 이해될 수 있다. 또한, 이하에서는, 본 개시의 명료함을 위해, 실시예에 따라 참조번호를 변경해가며 설명을 이어가도록 한다.

먼저, 도 4 내지 도 16을 참조하여 본 개시의 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법에 대하여 설명하도록 한다.

도 4는 본 개시의 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법을 개략적으로 나타내는 예시적인 흐름도이다. 단, 이는 본 개시의 목적을 달성하기 위한 바람직한 실시예일뿐이며, 필요에 따라 일부 단계가 추가되거나 삭제될 수 있음은 물론이다.

도 4에 도시된 바와 같이, 본 실시예들은 프로토타입 제작 인터페이스를 제공하는 단계 41에서 시작될 수 있다. 가령, 제작 장치(10)는 사용자의 요청에 응답하여 프로토타입 제작 툴(프로그램)을 실행시킴으로써 GUI 기반의 프로토타입 제작 인터페이스를 사용자에게 제공할 수 있다.

프로토타입 제작 인터페이스는 GUI 프로토타입에 대한 다양한 제작 기능을 사용자에게 제공할 수 있다. 예를 들어, 프로토타입 제작 인터페이스는 객체(e.g., 버튼, 체크박스 등과 같은 GUI 객체), 트리거, 리스폰스, 인터랙션 등을 정의, 생성, 수정, 삭제하는 기능을 제공할 수 있다. 그러나, 본 개시의 범위가 이에 한정되는 것은 아니다. 사용자는 프로토타입 제작 인터페이스를 통해 자신이 원하는 GUI 프로토타입을 자유롭게 제작할 수 있다. 본 개시의 논지를 흐릴 염려가 있으므로, 프로토타입 제작 인터페이스에 대한 더 이상의 자세한 설명은 생략하도록 한다.

단계 S42에서, 제작 중인 GUI 화면(이하, '타깃 GUI 화면'으로 칭함)에 배치된 적어도 하나의 객체 중에서 타깃 객체가 결정될 수 있다. 예를 들어, 제작 장치(10)는 사용자의 입력(e.g., 객체 선택 등)에 기초하여 하나 이상의 객체를 타깃 객체로 결정할 수 있다. 타깃 객체는 모션(또는 리스폰스)이 적용(설정)될 객체를 의미할 수 있다.

몇몇 실시예들에서는, 학습된 모델을 이용하여 타깃 객체가 자동으로 결정되거나 추천될 수 있다(e.g., 추천의 경우에는 최종적으로 사용자의 선택에 의해 타깃 객체가 결정될 수 있음). 가령, 모델(e.g., 도 6 참고)에 의해 출력된 특정 객체의 컨피던스 스코어(즉, 타깃 GUI 화면의 특정 객체가 모션 객체에 해당할 확률)가 기준치 이상인 경우, 제작 장치(10)는 특정 객체에 모션을 적용할 것을 사용자에게 추천(제안)할 수도 있다(즉, 해당 객체를 타깃 객체로 추천함). 보다 이해의 편의를 제공하기 위해, 도 5 내지 도 7을 참조하여 본 실시예들에 대하여 부연 설명하도록 한다.

도 5는 본 개시의 몇몇 실시예들에 따른 타깃 객체 결정 방법을 설명하기 위한 예시적인 도면이다.

도 5에 도시된 바와 같이, 제작 장치(10)는 학습된 모델(50, e.g., 머신러닝 모델, 딥러닝 모델)을 통해 하나 이상의 객체(53)를 타깃 객체로 결정할 수 있다. 구체적으로, 모델(51)은 GUI 화면 정보를 입력받아 모션 객체(또는 모션 영역)을 예측하도록 구성될 수 있고 기 제작된 GUI 화면 샘플들의 데이터를 이용하여 학습될 수 있다.

GUI 화면 정보는 GUI 화면에 대한 다양한 정보를 제한없이 포함할 수 있다. 예를 들어, GUI 화면 정보는 GUI 화면의 이미지, GUI 화면의 속성(e.g., 식별자(ID), 명칭, 레이아웃, 배경 색상, 객체 개수, 태스크, 디자인 패턴, 사용자의 디자인 의도 등), 객체의 속성 등에 관한 정보를 포함할 수 있다. 그러나, 이에 한정되는 것은 아니다.

객체의 속성 정보는 예를 들어 식별자, 명칭, 표시 속성(e.g., 타입, 위치, 색상, 크기, 모양, 투명도, 방위각 등), 모션(e.g., 모션 객체인지 여부, 목적지, 시간, 모션 패턴, 속도/가속도, 경로, 모션 이펙트 등) 등에 관한 정보를 포함할 수 있으나, 이에 한정되는 것은 아니다. 객체의 속성 정보는 편의상 '객체 정보'로 명명될 수도 있다.

제작 장치(10)는 타깃 GUI 화면(51)의 이미지, 객체들(e.g., 53, 54 등)의 속성 정보(55) 등을 학습된 모델(51)에 입력(피딩)하여 타깃 GUI 화면(52)에 적합한 모션 객체(53 참고)를 예측(결정)할 수 있다. 그리고, 제작 장치(10)는 예측된 객체(53)를 타깃 객체로 결정하거나 사용자에게 추천할 수 있다.

또는, 제작 장치(10)는 학습된 모델(51)을 통해 타깃 GUI 화면(52)의 모션 영역(e.g., 모션이 설정되면 좋을 것으로 판단되는 영역)을 예측(결정)하고 모션 영역에 가까이 위치한 객체를 타깃 객체로 결정하거나 사용자에게 추천할 수도 있다.

참고로, 도 5는 이해의 편의를 위해 모델(51)의 예측 결과를 바운딩 박스 형태(56 참고)로 도시하고 있으나, 그것이 모델(51)의 실제 출력 형태를 의미하는 것은 아니며, 모델(51)의 출력은 다양한 형태로 구성될 수 있다. 가령, 모델(51)은 모션 객체의 식별자, 위치(e.g., 좌표), 각 객체가 모션 객체에 해당할 확률(즉, 컨피던스 스코어)를 출력하도록 구성될 수도 있다.

모델(51)의 예시적인 세부 구조는 도 6에 도시되어 있다.

도 6에 도시된 바와 같이, 모델(51)은 임베딩 레이어들(61-1, 61-2), 인코더(62) 및 예측 레이어(65)를 포함하여 구성될 수 있다. 경우에 따라, 모델(51)은 다른 레이어를 더 포함할 수도 있고 일부 레이어가 생략된 형태로 구성될 수도 있다.

임베딩 레이어(61-1, 이하 '제1 임베딩 레이어'로 칭함)는 각 객체에 대한 정보(e.g., 66)를 입력받아 해당 객체의 임베딩(즉, 객체 단위의 임베딩)을 생성할 수 있다. 제1 임베딩 레이어(61-1)는 예를 들어 완전연결 레이어(fully-connected layer) 또는 MLP(Multi-Layer Perceptron)와 같은 신경망 레이어로 구현될 수 있을 것이나, 본 개시의 범위가 이에 한정되는 것은 아니다.

경우에 따라, 객체의 일부 속성 정보는 제1 임베딩 레이어(61-1)에서 출력되는 객체 임베딩에 반영(e.g., 덧셈, 곱셈, 접합 등)될 수도 있다. 가령, 객체의 위치 정보(또는 타입 정보 등)가 적절한 형태로 인코딩되어 제1 임베딩 레이어(61-1)의 출력 임베딩에 반영될 수도 있다. 이러한 경우, 인코더(62)가 객체의 위치 정보(또는 타입 정보 등)를 더 고려하여 인코딩을 수행함으로써 객체 단위의 최종 임베딩(e.g., 68)을 생성하게 된다.

다음으로, 임베딩 레이어(61-2. 이하 '제2 임베딩 레이어'로 칭함)는 GUI 화면 이미지(67)를 입력받아 해당 이미지의 임베딩을 생성할 수 있다. 제2 임베딩 레이어(61-2)는 예를 들어 완전연결 레이어, MLP 또는 컨볼루션 레이어(convolutional layer)와 같은 신경망 레이어로 구현될 수 있을 것이나, 본 개시의 범위가 이에 한정되는 것은 아니다. GUI 화면 이미지(67)의 임베딩은 GUI 화면 이미지(67)의 전반적인 디자인 정보(또는 컨텍스트)를 인코더(62)로 전달하는 역할을 담당할 수 있다.

경우에 따라, 임베딩 레이어(e.g., 61-1)는 '임베더(embedder)', '임베딩 모듈(embedding module)' 등과 같이 명명될 수도 있다.

다음으로, 인코더(62)는 입력된 임베딩(정보)들을 인코딩하여 객체 단위의 임베딩들(e.g., 68)을 생성(출력)할 수 있다. 도시된 바와 같이, 인코더(62)는 적어도 하나의 셀프어텐션(self-attention) 레이어(63)와 적어도 하나의 피드포워드(feed-forward) 레이어(64)를 포함하여 구성될 수 있다. 셀프어텐션 레이어(63)는 입력된 객체 임베딩들 간의 연관성, 객체 임베딩들과 GUI 화면 이미지(67)의 임베딩 간의 연관성 등을 분석할 수 있고, 피드포워드 레이어(64)는 분석 결과를 애그리게이팅(aggregating)할 수 있다. 당해 기술 분야의 종사자라면, 셀프어텐션 레이어(63)와 피드포워드 레이어(64)의 구조 및 동작 원리에 대해 이미 숙지하고 있을 것인 바, 이에 대한 설명은 생략하도록 한다.

경우에 따라, 셀프어텐션 레이어(63)와 피드포워드 레이어(64)는 각각 '셀프어텐션 모듈', '피드포워드 모듈' 등과 같이 명명될 수도 있다.

다음으로, 예측 레이어(65)는 객체 단위의 임베딩(e.g., 68)을 입력받아 해당 객체가 모션 객체인지 여부를 예측할 수 있다. 다시 말해, 예측 레이어(65)는 객체 단위의 임베딩(e.g., 68)을 입력받아 모션 객체에 대한 컨피던스 스코어(69)를 출력할 수 있다. 예측 레이어(65)는 이진 분류를 수행하는 신경망 레이어(e.g., 완전연결 레이어, MLP 등)로 구현될 수 있을 것이나, 본 개시의 범위가 이에 한정되는 것은 아니다.

경우에 따라, 예측 레이어(65)는 '예측기(predictor)', '예측 모듈(predicting module)' 등과 같이 명명될 수도 있다.

상술한 모델(51)은 모션 객체 예측 태스크(즉, 예측 레이어(65)가 수행하는 태스크)를 통해 학습될 수 있다. 즉, 모델(51)의 가중치 파라미터들은 기 제작된 GUI 샘플들의 데이터를 이용하여 모션 객체 예측 태스크를 수행(e.g., 특정 객체가 모션 객체에 해당하는지 여부를 예측함)함으로써 산출된 손실(e.g., 예측 결과와 정답 간의 크로스엔트로피 손실)을 역전파함으로써 업데이트될 수 있다.

경우에 따라, 상술한 모델(51)은 모션 정보 예측 태스크(e.g., 다른 예측 레이어를 통해 모션 요소의 값을 예측하는 태스크)를 더 수행함으로써 학습될 수도 있다. 모션 정보 예측 태스크에 대해서는 후술하도록 한다.

한편, 몇몇 실시예들에서는, 도 7에 도시된 바와 같이, 모델(51)이 서로 연관된 다수의 GUI 화면들(71, e.g., 리스폰스 적용 전후의 GUI 화면들, 하이퍼링크 등을 통해 연결된 페이지들 등)의 정보를 입력받아 모션 객체(72 및 73 참고)를 예측하도록 구성될 수도 있다. 이러한 경우, GUI 화면의 연관 관계를 보다 정확하게 분석하기 위해, 모델(51)이 서로 연결된 다수의 인코더(e.g., 62)들을 포함하여 구성될 수도 있다(e.g., RNN(Recurrent Neural Network)과 같은 구조). 이러한 실시예들에 따르면, 모델(51)이 GUI 화면의 컨텍스트를 보다 정확하게 파악할 수 있게 되므로, 모션 객체가 더욱 정확하게 예측될 수 있다.

또한, 몇몇 실시예들에서는, 모델(51)이 CNN(Convolutional Neural Network) 기반으로 구현될 수도 있다. 구체적으로, 모델(51)이 GUI 화면 이미지를 입력받아 모션 객체(또는 모션 영역)를 예측하도록 구성되고 기 제작된 GUI 화면 샘플들의 데이터(e.g., GUI 화면 이미지와 모션 객체/영역 정보)를 이용하여 학습될 수도 있다.

다시 도 4를 참조하여 설명한다.

단계 S43에서, 기 제작된 GUI 화면 샘플들(즉, 모션 객체를 포함하는 GUI 화면들)의 데이터를 이용하여 타깃 객체에 대한 추천 모션이 결정될 수 있다. 가령, 제작 장치(10)는 추천 모션을 구성하는 모든 모션 요소의 값을 예측하거나 사용자로부터 값이 입력되지 않은 특정 모션 요소의 값을 예측함으로써(e.g., 일부 모션 요소의 값은 사용자로부터 입력된 경우) 추천 모션을 결정할 수 있다. 이러한 과정은 사용자의 요청(e.g., 버튼 클릭 등)에 응답하여 수행될 수도 있고 미리 설정된 조건이 만족됨에 따라 자동으로 수행될 수도 있다(e.g., GUI 화면의 특정 영역 또는 타깃 객체 상에 커서가 일정 시간 이상 호버링(hovering)하는 경우에 자동으로 수행되는 등). 경우에 따라서는, 미리 설정된 조건(e.g., 5에 도시된 모델(51)이 출력한 타깃 객체의 컨피던스 스코어가 기준치 이상인 경우 등)이 만족됨 따라 제작 장치(10)가 사용자에게 추천 모션을 받아볼 것을 제안할 수도 있다. 추천 모션의 개수는 1개일 수도 있고 여러 개일 수도 있다.

모션 요소는 객체의 모션(또는 모션 정보)를 구성하는 요소 또는 객체의 모션을 정의하기 위한 요소를 의미할 수 있다. 모션 요소의 예로는 목적지(e.g., 목적지 좌표), 시간(즉, 목적지까지의 이동 시간), 속도/가속도, 모션 패턴(e.g., 직선 이동 패턴, 곡선 이동 패턴, 지그재그 이동 패턴 등) 등을 들 수 있을 것이나, 본 개시의 범위가 이에 한정되는 것은 아니다.

경우에 따라, 모션의 개념은 위치 변화 없이 객체의 표시 속성(e.g., 크기, 색상 등)이 변화하는 것까지 포괄할 수도 있으며, 이러한 경우에는 객체의 표시 속성도 모션 요소에 포함될 수 있다.

한편, 타깃 객체의 추천 모션을 결정하는 구체적인 방식은 실시예들에 따라 달라질 수 있다.

몇몇 실시예들에서는, 도 8에 도시된 바와 같이, 디자인 유사도(또는 시각적/이미지 유사도)에 기초하여 기 제작된 GUI 화면 샘플(82)과 타깃 GUI 화면(81) 간의 유사도가 산출될 수 있다. 이때, GUI 화면 샘플(82)은 모션 객체(83)를 포함하는 것일 수 있다. 가령, 제작 장치(10)는 객체의 표시 속성(e.g., 타입, 크기, 색상, 모양, 위치)과 GUI 화면의 표시 속성(e.g., 디자인 패턴, 객체의 개수 등)을 기준으로 하여 디자인 유사도를 산출할 수 있다. 그리고, 제작 장치(10)는 유사도가 기준치 이상인 GUI 화면 샘플(e.g., 82)을 레퍼런스 샘플로 선별하고, 레퍼런스 샘플(e.g., 82)의 모션 객체(e.g., 83)를 이용(e.g., 모션 정보 참조)하여 타깃 객체에 대한 추천 모션을 결정할 수 있다. 이를테면, 제작 장치(10)는 해당 모션 객체(e.g., 83)의 모션 정보(즉, 모션 요소들의 값)를 참조하여 추천 모션의 정보를 결정할 수 있다.

다른 몇몇 실시예들에서는, 도 9에 도시된 바와 같이, 임베딩 유사도(96)(또는 피처 유사도)에 기초하여 기 제작된 GUI 화면 샘플(94)과 타깃 GUI 화면(92) 간의 유사도가 산출될 수 있다. 가령, 제작 장치(10)는 인코더(91)(또는 피처 추출기)를 통해 타깃 GUI 화면(92)과 기 제작된 GUI 화면 샘플(94) 각각에 대한 임베딩(93, 95)을 생성할 수 있다. 이때, 인코더(91)는 사전학습된(pretrained) 모델(e.g., VGG16 등과 같은 피처 추출기)일 수도 있고 대조 학습(contrastive learning) 태스크 등을 통해 학습된 모델일 수도 있다. 인코더(91)는 GUI 화면 이미지만을 입력받도록 구성될 수도 있고 다른 정보(e.g., 객체 속성 정보 등)를 더 입력받도록 구성될 수도 있다. 앞선 실시예들과 유사하게, 제작 장치(10)는 임베딩 유사도(96)가 기준치 이상인 GUI 화면 샘플을 레퍼런스 샘플로 선별하고 레퍼런스 샘플의 모션 객체를 이용하여 타깃 객체에 대한 추천 모션을 결정할 수 있다.

또 다른 몇몇 실시예들에서는, 도 10에 도시된 바와 같이, 학습된 모델(101)을 이용하여 타깃 객체(103)에 대한 추천 모션 정보(104)가 예측될 수 있다. 구체적으로, 모델(101)은 기 제작된 GUI 화면 샘플들(즉, 모션 정보가 주어진 샘플들)을 이용하여 모션 객체의 모션 정보(e.g., 목적지, 시간, 속도 등)를 예측하도록 학습된 것일 수 있다. 가령, 도 11에 도시된 바와 같이, 모델(101)은 GUI 화면 정보를 분석하는 모듈(111, e.g., 임베딩 레이어, 인코더 등)과 서로 다른 모션 요소의 값을 예측하는 복수의 예측 레이어들(e.g., 112, 114)를 포함하여 구성될 수 있다. 이러한 구조의 모델(101)은 기 제작된 GUI 화면 샘플들의 데이터를 이용하여 서로 다른 모션 요소의 값을 예측하는 태스크를 수행함으로써 학습될 수 있다(e.g., 제1 예측 레이어(112)를 통해 목적지 예측 태스크를 수행하고 제2 예측 레이어(114)를 통해 속도 예측 태스크를 수행함으로써 학습됨). 그리고, 제작 장치(10)는 학습된 모델(101)에 타깃 화면(102)의 정보를 입력(피딩)하고 예측 레이어들(e.g., 112, 114)을 통해 타깃 객체(103)의 추천 모션에 대한 요소 값들(e.g., 113, 115)을 예측할 수 있다.

참고로, 도 10 등의 도면에서 GUI 화면(e.g., 102)이 모델(e.g., 101)로 입력되는 것은 GUI 화면(e.g., 102)의 정보(e.g., GUI 화면의 이미지, 화면 속성 정보, 객체 속성 정보 등)가 모델(e.g., 101)로 입력되는 것을 의미할 수 있으며, 입력 정보의 종류는 얼마든지 달라질 수 있다.

도 12는 모델(101)의 예시적인 세부 구조를 도시하고 있다.

도 12에 도시된 바와 같이, 모델(101)은 임베딩 레이어들(121-1, 121-2), 인코더(122) 및 예측 레이어(125)를 포함하여 구성될 수 있다. 여기서, 예측 레이어(125)는 서로 다른 모션 요소(129 참고)의 값을 예측하는 복수의 예측 레이어들로 구성될 수도 있다. 경우에 따라, 모델(101)은 다른 레이어를 더 포함할 수도 있고 일부 레이어가 생략된 형태로 구성될 수도 있다.

모델(101)의 구성요소들(e.g., 121-1 등)과 관련 정보들(e.g., 126 내지 128 등)에 대해서는 도 6의 설명 내용을 참고하도록 한다. 참고로, 모델(101)은 도 6에 도시된 모델(51)과 실질적으로 동일한 것일 수도 있다(즉, 타깃 객체 결정 단계 S42에 이용된 모델(51)이 추천 모션 결정 단계 S43에 다시 이용될 수 있음).

상술한 모델(101)은 모션 정보 예측 태스크(즉, 예측 레이어(125)가 수행하는 태스크)를 통해 학습될 수 있다. 즉, 모델(101)의 가중치 파라미터들은 기 제작된 GUI 샘플들의 데이터를 이용하여 모션 정보 예측 태스크(e.g., 목적지, 시간, 속도 등을 예측하는 태스크)를 수행함으로써 산출된 손실(e.g., 예측 값과 정답 간의 회귀 손실)을 역전파함으로써 업데이트될 수 있다.

또 다른 몇몇 실시예들에서는, 도 13에 도시된 바와 같이, 타깃 GUI 화면(132)의 태스크 정보(134)를 학습된 모델(131)에 더 입력하여 타깃 객체(133)의 추천 모션 정보(135)가 예측될 수 있다. 모델(131)은 기 제작된 GUI 화면 샘플들의 태스크 정보를 더 입력받아 모션 객체의 모션 정보를 예측하도록 학습된 것일 수 있다. 이렇게 학습된 모델(131)은 타깃 GUI 화면(132)의 태스크를 더 고려하여 추천 모션 정보(135)를 예측할 수 있게 된다. 태스크 정보(134)에 대해서는 도 17 등의 설명 내용을 참고하도록 한다.

또 다른 몇몇 실시예들에서는, 도 14에 도시된 바와 같이, 태스크별로 모션 정보를 예측하는 모델들(e.g., 143 내지 145)이 구축될 수 있다. 가령, 제1 모델(143)은 제1 태스크('A' 참고)와 관련된 GUI 화면 샘플들을 학습함으로써 구축될 수 있고, 제2 모델(144)은 제2 태스크('B' 참고)와 관련된 GUI 화면 샘플들을 학습함으로써 구축될 수 있다. 이와 같은 경우, 제작 장치(10)는 복수의 모델들(e.g., 143 내지 145) 중에서 타깃 GUI 화면(141)의 태스크에 대응되는 모델(e.g., 143)을 선택하고 선택된 모델(e.g., 143)을 이용하여 타깃 객체(142)의 추천 모션 정보를 예측할 수 있다.

또 다른 몇몇 실시예들에서는, 상술한 실시예들의 다양한 조합에 기초하여 타깃 객체에 대한 추천 모션이 결정될 수도 있다. 가령, 제작 장치(10)는 레퍼런스 샘플의 모션 객체를 이용하여 모션 요소에 대한 제1 값을 결정하고 학습된 모델(e.g., 101)을 통해 동일한 모션 요소에 대한 제2 값을 예측할 수도 있다. 그리고, 제작 장치(10)는 제1 값과 제2 값에 대한 가중치합 등을 통해 해당 모션 요소의 최종 값을 도출하는 방식으로 추천 모션의 요소 값들을 결정할 수도 있다. 이때, 두 값에 부여되는 가중치는 모델(101)의 성능(e.g., 평가 오차(손실)의 크기 등), 학습 정도(e.g., 에폭수)에 기초하여 결정될 수 있을 것이나(e.g., 성능이 높을수록 제2 값에 부여되는 가중치는 커지고 제1 값에 부여되는 가중치는 작아짐), 본 개시의 범위가 이에 한정되는 것은 아니다.

다시 도 4를 참조하여 설명한다.

단계 S44에서, 타깃 객체의 추천 모션이 사용자에게 제공될 수 있다. 가령, 제작 장치(10)는 프로토타입 제작 인터페이스의 특정 영역에 추천 모션의 영상을 디스플레이할 수도 있고, 추천 모션의 요소 값들을 디스플레이할 수도 있다.

몇몇 실시예들에서는, 도 15에 도시된 바와 같이, 프리뷰창(153)을 통해 타깃 객체의 추천 모션 영상이 디스플레이될 수 있다(재생바 154 참고). 가령, 제작 장치(10)는 프로토타입 제작 인터페이스의 메인 영역에 타깃 GUI 화면(151)을 디스플레이하고 타깃 객체(152)의 인접 위치(또는 다른 위치)에 프리뷰창(153)을 생성하여 타깃 객체(152)의 추천 모션 영상을 디스플레이할 수 있다. 도 15는 타깃 객체(152)에 대한 호버링 이벤트(e.g., 커서(155)가 객체 상에 일정 시간 이상 호버링하는 경우에 발생되는 이벤트)에 응답하여 추천 모션 영상을 디스플레이하는 경우를 예로서 도시하고 있으나, 본 개시의 범위가 이에 한정되는 것은 아니다. 경우에 따라, 제작 장치(10)는 추천 모션의 요소 값들(156)을 함께 디스플레이할 수도 있다. 또한, 제작 장치(10)는 요소 값들(156)을 변경하는 사용자의 입력이 수신되면, 변경된 값을 추천 모션 영상에 반영하여 업데이트하고 프리뷰창(153)을 통해 업데이트된 영상을 디스플레이할 수도 있다.

다른 몇몇 실시예들에서는, 도 16에 도시된 바와 같이, 타깃 GUI 화면(161) 상에서 타깃 객체(162)의 추천 모션(163)이 디스플레이(재생)될 수도 있다. 이때, 제작 장치(10)는 재생바(164)를 통해 재생 위치 등에 대한 조절 기능을 제공할 수도 있고, 현재 재생 시점의 모션 정보(165, e.g., 객체의 현재 위치, 경과된 시간, 현재 속도 등)를 함께 제공할 수도 있다. 경우에 따라, 제작 장치(10)는 모션 정보(165)의 변경(e.g., 사용자에 의해 특정 요소의 값이 변경됨)에 따라 추천 모션(163)을 업데이트하여 디스플레이하는 기능(즉, 일종의 모션 시뮬레이션 기능)을 사용자에게 더 제공할 수도 있다.

또 다른 몇몇 실시예들에서는, 추천 모션에 대한 사용자의 부정적인 피드백(e.g., 프리뷰창 닫기 버튼 클릭, 불만족 버튼 클릭, 취소 버튼 클릭 등)에 기초하여 제작 장치(10)가 다른 추천 모션을 사용자에게 더 제공할 수도 있다. 가령, 제작 장치(10)는 사용자의 부정적인 피드백에 응답하여 다른 방식으로 추천 모션을 다시 결정하여 제공할 수도 있고 타깃 객체를 다른 객체로 변경하여 추천 모션을 다시 제공할 수도 있다.

또 다른 몇몇 실시예들에서는, 추천 모션을 수용하는 사용자 입력(e.g., 만족 버튼 클릭, 추천 모션 반영 버튼 클릭 등)에 응답하여 제작 장치(10)가 추천 모션을 타깃 GUI 화면에 반영할 수 있다(즉, 추천 모션을 타깃 객체에 설정(적용)함). 그렇게 함으로써, GUI 프로토타입의 제작 속도가 크게 향상될 수 있다.

또 다른 몇몇 실시예들에서는, 상술한 실시예들의 다양한 조합에 기초하여 추천 모션이 제공될 수도 있다.

지금까지 도 4 내지 도 15를 참조하여 본 개시의 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법에 대하여 설명하였다. 상술한 바에 따르면, 기 제작된 GUI 화면 샘플들의 모션 객체를 참조하여 타깃 객체에 대한 추천 모션이 결정되고 결정된 추천 모션이 사용자에게 제공될 수 있다. 이러한 경우, GUI 프로토타입 제작의 편의성은 향상되고 제작 난이도는 크게 감소될 수 있다. 뿐만 아니라, GUI 프로토타입 제작에 소요되는 비용은 감소되고 제작된 GUI 프로토타입의 품질은 향상될 수 있다.

이하에서는, 도 17 내지 도 19를 참조하여 본 개시의 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법에 대하여 설명하도록 한다. 이하에서는, 본 개시의 명료함을 위해, 앞선 실시예들과 중복되는 내용에 대한 설명은 생략하도록 하며, 앞선 실시예들의 기술 사상은 별도의 기재가 없더라도 후술될 실시예들에 적용될 수 있다. 또한, 후술될 실시예들의 기술 사상도 별도의 기재 없이 앞선 실시예들에 적용될 수 있다.

도 17은 본 개시의 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법을 개략적으로 나타내는 예시적인 흐름도이다.

도 17에 도시된 바와 같이, 본 실시예들은 타깃 GUI 화면의 태스크 및/또는 디자인 패턴에 기초하여(또는 더 기초) 타깃 객체에 대한 추천 모션을 결정하는 방법에 관한 것이다. 도 17은 태스크와 디자인 패턴 모두에 기초하여 타깃 객체의 추천 모션을 결정하는 경우를 예로서 도시하고 있으나, 둘 중 어느 하나에 기초하여 타깃 객체의 추천 모션이 결정될 수도 있음은 물론이다. 타깃 객체는 앞선 실시예들과 유사한 방식으로 결정될 수 있다.

GUI 화면의 태스크는 해당 GUI 화면의 목적, 용도 또는 수행 기능(e.g., 애플리케이션 내에서 해당 GUI 화면이 담당하는 기능)을 의미하는 것으로, 예를 들어, 쇼핑 앱과 관련된 GUI 화면이라면, 상품 정보 제공, 구매 처리, 에러 정보 제공 등과 같은 태스크가 존재할 수 있다.

또한, GUI 화면의 디자인 패턴은 예를 들어 캐러셀(carousel), 모달(modal), 플립(flip) 등과 같은 패턴을 의미할 수 있다. 태스크와 디자인 패턴의 종류는 미리 정의되어 있을 수 있다.

구체적으로, 단계 S171에서, 타깃 GUI 화면의 태스크와 디자인 패턴이 결정될 수 있다. 가령, 제작 장치(10)는 사용자로부터 타깃 GUI 화면의 태스크와 디자인 패턴에 관한 정보를 입력받을 수 있다(e.g., 타깃 GUI 화면의 태스크와 디자인 패턴이 사용자에 의해 설정되는 GUI 화면의 속성 정보인 경우).

몇몇 실시예들에서는, 도 18에 도시된 바와 같이, 학습된 모델(181)을 이용하여 타깃 GUI 화면(e.g., 182, 184)의 디자인 패턴(e.g., 183, 185)이 결정(예측)될 수 있다. 타깃 GUI 화면의 태스크도 유사한 방식으로 결정(예측)될 수 있다. 구체적으로, 모델(181)은 GUI 화면 정보(e.g., 화면 이미지)를 입력받아 디자인 패턴을 예측하도록 학습된 모델(즉, 분류 모델)일 수 있고, 이러한 모델(181)은 예를 들어 디자인 패턴 정보(즉, 정답/레이블)가 주어진 GUI 화면 샘플들을 학습함으로써 구축될 수 있다. 본 실시예들에서, 제작 장치(10)는 학습된 모델(181)을 통해 GUI 화면(e.g., 182, 184)의 디자인 패턴(183, 185)을 예측할 수 있다. 가령, 모델(181)이 GUI 화면 이미지를 입력받아 디자인 패턴별 컨피던스 스코어를 출력하도록 구성된 CNN 기반 모델인 경우, 제작 장치(10)는 타깃 GUI 화면(e.g., 182, 184)의 이미지를 학습된 모델(181)에 입력하여 디자인 패턴의 종류를 예측할 수 있다(e.g., 컨피던스 스코어가 가장 높은 디자인 패턴으로 예측함).

다른 몇몇 실시예들에서는, 이미지 처리 기법을 통해 타깃 GUI 화면의 이미지를 분석함으로써 타깃 GUI 화면의 디자인 패턴이 결정될 수 있다.

또 다른 몇몇 실시예들에서는, 상술한 실시예들의 다양한 조합에 기초하여 타깃 GUI 화면의 디자인 패턴이 결정될 수도 있다.

단계 S172에서, 결정된 태스크와 디자인 패턴에 기초하여 타깃 객체에 대한 추천 모션이 결정될 수 있다. 다만, 그 구체적인 방식은 실시예에 따라 달라질 수 있다.

몇몇 실시예들에서는, 제작 장치(10)가 기 제작된 GUI 화면 샘플들 중에서 동일 또는 유사 태스크의 GUI 화면 샘플을 레퍼런스 샘플로 선별할 수 있다. 또는, 제작 장치(10)가 동일 또는 유사 디자인 패턴의 GUI 화면 샘플을 레퍼런스 샘플로 선별할 수 있다. 그리고, 제작 장치(10)는 레퍼런스 샘플의 모션 객체를 이용하여 타깃 객체의 추천 모션을 결정할 수 있다.

다른 몇몇 실시예들에서는, 도 19에 도시된 바와 같이, 학습된 모델(191)을 통해 타깃 객체(194)에 대한 추천 모션 정보(195)가 예측될 수 있다. 구체적으로, 모델(191)은 디자인 패턴 및/또는 태스크 정보(192)를 더 입력받아 모션 정보(195)를 예측하도록 학습된 것일 수 있다(도 13의 설명 내용 참고). 이렇게 학습된 모델(191)은 타깃 GUI 화면(193)의 디자인 패턴 및/또는 태스크를 더 고려하여 추천 모션 정보(195)를 예측할 수 있게 된다. 경우에 따라, 제작 장치(10)는 복수의 모델들 중에서 타깃 GUI 화면(193)의 디자인 패턴 및/또는 태스크에 대응되는 모델을 선택하고, 선택된 모델을 이용하여 타깃 객체(194)의 추천 모션 정보를 예측할 수도 있다(도 14의 설명 내용 참고).

또 다른 몇몇 실시예들에서는, 상술한 실시예들의 다양한 조합에 기초하여 타깃 객체에 대한 추천 모션이 결정될 수도 있다.

지금까지 도 17 내지 도 19를 참조하여 본 개시의 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법에 대하여 설명하였다. 상술한 바에 따르면, 타깃 GUI 화면의 태스크와 디자인 패턴을 고려하여 타깃 객체의 추천 모션을 결정함으로써, 추천 정확도와 사용자 만족도가 더욱 향상될 수 있다.

이하에서는, 도 20 내지 도 23을 참조하여 본 개시의 또 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법에 대하여 설명하도록 한다.

도 20은 본 개시의 또 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법을 개략적으로 나타내는 예시적인 흐름도이다. 단, 이는 본 개시의 목적을 달성하기 위한 바람직한 실시예일뿐이며, 필요에 따라 일부 단계가 추가되거나 삭제될 수 있음은 물론이다.

도 20에 도시된 바와 같이, 본 실시예들은 사용자의 모션 디스크립션(motion description)에 담긴 디자인 의도, 심상 등을 고려하여 타깃 객체에 대한 추천 모션을 결정하는 방법에 관한 것이다.

여기서, 모션 디스크립션은 사용자가 원하는 모션에 대한 설명을 의미할 수 있다. 모션 디스크립션은 예를 들어 모션을 통해 표현(전달)하고자 하는 심상(e.g., 모션에 대한 개략적인 느낌) 또는 디자인 의도, 모션에 대한 구체적인 묘사, 모션에 대한 제약 조건 등을 포함할 수 있을 것이나, 본 개시의 범위가 이에 한정되는 것은 아니다.

본 실시예들도 프로토타입 제작 인터페이스를 제공하는 단계 S201에서 시작될 수 있다.

단계 S202에서, 사용자로부터 모션 디스크립션이 입력될 수 있다. 모션 디스크립션을 입력받는 방식은 어떠한 방식이 되더라도 무방하다. 가령, 제작 장치(10)는 키보드 등을 통해 텍스트 형태의 모션 디스크립션을 입력받을 수도 있고 마이크 등을 통해 음성 형태의 모션 디스크립션을 입력받을 수도 있다. 또는, 제작 장치(10)는 카메라 등을 통해 영상, 제스처 기반의 모션 디스크립션을 입력받을 수도 있다. 입력된 모션 디스크립션은 적절한 인식 기법(e.g., 음성 인식, 제스처 인식 등)을 통해 분석이 용이한 형태의 데이터(e.g., 텍스트)로 변환될 수 있다.

몇몇 실시예들에서는, 보다 정확한 모션 디스크립션을 획득하기 위해, 제작 장치(10)가 선택 가능한 옵션들을 사용자에게 제공할 수 있다. 가령, 제작 장치(10)는 사용자가 원하는 모션의 심상 또는 사용자의 디자인 의도를 보다 정확하게 파악하기 위해 미리 정의된 옵션들을 제공하고, 사용자가 선택한 옵션에 기초하여 모션 디스크립션(또는 디자인 의도, 심상 등)을 결정할 수 있다. 이때, 위 옵션들은 GUI 화면의 태스크별로 미리 정의되어 있을 수도 있다(e.g., GUI 화면의 태스크가 에러 정보 제공인 경우, '가벼운 경고', '무거운 경고' 등이 옵션들로 제공될 수 있음).

모션 디스크립션의 다양한 예시들에 대해서는 하기의 표 1을 참조하도록 한다.

모션 디스크립션	천천히 움직이다가 빠르게 움직인다
	빠르게 나타났다가 스르륵 사라진다
	띠용하고 위아래로 흔들린다
	점점 빠르게 또는 점점 느리게
	무거운 물체가 이동하는 느낌
	가벼운 경고

단계 S203에서, 모션 디스크립션을 기초로 타깃 객체에 대한 추천 모션이 결정될 수 있다. 가령, 제작 장치(10)는 모션 디스크립션을 분석하여 사용자의 디자인 의도, 모션 패턴 등을 추출하고 추출 결과에 기초하여 추천 모션을 결정할 수 있다. 다만, 그 구체적인 방식은 실시예에 따라 달라질 수 있다.

몇몇 실시예들에서는, 제작 장치(10)가 텍스트 분석 기법(e.g., 품사 분석, 개체명 인식 등)을 통해 모션 디스크립션에서 사용자의 디자인 의도를 추출할 수 있다. 그리고, 제작 장치(10)는 미리 정의된 복수의 모션 패턴들 중에서 해당 디자인 의도에 대응되는 모션 패턴을 결정하고 결정된 모션 패턴을 기초로 추천 모션을 결정할 수 있다. 디자인 의도의 종류는 미리 정의되어 있을 수 있고, 디자인 의도와 모션 패턴과의 대응 관계도 미리 정의되어 있을 수 있다.

다른 몇몇 실시예들에서는, 제작 장치(10)가 텍스트 분석 기법을 통해 모션 디스크립션에서 사용자의 디자인 의도(또는 모션 패턴 등)를 추출할 수 있다. 다음으로, 제작 장치(10)는 기 제작된 GUI 샘플들 중에서 동일 또는 유사한 디자인 의도(또는 모션 패턴 등)을 갖는 GUI 샘플을 레퍼런스 샘플로 선별할 수 있다. 그리고, 제작 장치(10)는 레퍼런스 샘플의 모션 객체를 이용하여 타깃 객체에 대한 추천 모션을 결정할 수 있다.

또 다른 몇몇 실시예들에서는, 도 21에 도시된 바와 같이, 학습된 모델(211)을 통해 사용자의 디자인 의도(214)(또는 모션 패턴 등)가 예측될 수 있다. 구체적으로, 모델(211)은 텍스트 형태의 모션 디스크립션(212)을 입력받아 디자인 의도(214) 및/또는 모션 패턴(e.g., 모션 패턴별 컨피던스 스코어(213)를 출력하도록 구성될 수 있음)을 예측하도록 학습된 것일 수 있다. 이러한 모델(211)은 디자인 의도(또는 모션 패턴) 정보가 주어진 모션 디스크립션 샘플들을 학습함으로써 구축될 수 있다. 본 실시예들에 따르면, 학습된 모델(211)을 이용하여 사용자의 디자인 의도, 사용자가 표현하고자 하는 모션 패턴 등이 정확하게 예측될 수 있다.

모델(211)의 예시적인 세부 구조는 도 22에 도시되어 있다.

도 22에 도시된 바와 같이, 모델(211)은 임베딩 레이어(221), 인코더(222) 및 예측 레이어(225)를 포함하여 구성될 수 있다. 경우에 따라, 모델(211)은 다른 레이어를 더 포함할 수도 있고 일부 레이어가 생략된 형태로 구성될 수도 있다.

임베딩 레이어(221)는 모션 디스크립션을 구성하는 토큰들 각각에 대한 임베딩을 생성할 수 있다. 가령, 임베딩 레이어(221)는 토큰의 원-핫(one-hot) 벡터를 입력받아 해당 토큰의 임베딩을 생성할 수 있다. 또한, 임베딩 레이어(221)는 미리 정의된 특수 토큰(226, e.g., CLS 토큰)을 더 입력받을 수 있다. 특수 토큰(226)에 대한 최종 임베딩(227)은 모션 디스크립션을 대표하는 임베딩으로 이용될 수 있는데, 당해 기술 분야의 종사자라면 CLS 토큰의 기능에 대해 이미 숙지하고 있을 것인 바, 이에 대한 설명은 생략하도록 한다. 임베딩 레이어(221)는 예를 들어 완전연결 레이어 또는 MLP와 같은 신경망 레이어로 구현될 수 있을 것이나, 본 개시의 범위가 이에 한정되는 것은 아니다.

다음으로, 인코더(222)는 입력된 임베딩(정보)들을 인코딩하여 토큰 단위의 임베딩들(e.g., 227)을 생성(출력)할 수 있다. 인코더(222)는 셀프어텐션 레이어(223)와 피드포워드 레이어(224)를 포함하여 구성될 수 있는데, 이들에 대해서는 도 6의 설명 내용을 참고하도록 한다.

다음으로, 예측 레이어(225)는 모션 디스크립션의 대표 임베딩(e.g., 227)을 입력받아 디자인 의도(228)(또는 모션 패턴)를 예측할 수 있다. 다시 말해, 예측 레이어(225)는 대표 임베딩(e.g., 227)을 입력받아 디자인 의도(또는 모션 패턴)에 대한 컨피던스 스코어를 출력할 수 있다. 여기서, 대표 임베딩(227)은 특수 토큰(226)에 대응되는 임베딩일 수도 있고, 토큰 단위 임베딩들을 애그리게이팅(e.g., 평균 등)함으로써 산출된 임베딩일 수도 있다. 예측 레이어(225)는 다중 분류를 수행하는 신경망 레이어(e.g., 완전연결 레이어, MLP 등)로 구현될 수 있을 것이나, 본 개시의 범위가 이에 한정되는 것은 아니다.

또 다른 몇몇 실시예들에서는, 도 23에 도시된 바와 같이, 디자인 의도(232)를 더 입력받아 모션 정보(234, e.g., 모션 패턴 235 참고)를 예측하도록 학습된 모델(231)을 이용하여 타깃 객체의 추천 모션 정보(234, 즉 사용자의 디자인 의도에 부합하는 모션 정보)이 예측될 수 있다. 가령, 제작 장치(10)는 타깃 GUI 화면(233)의 정보와 디자인 의도(232)를 학습된 모델(231)에 입력하여 사용자의 디자인 의도(232)에 부합하는 추천 모션 정보(234)를 예측할 수 있다. 이러한 모델(231)은 디자인 의도 정보와 모션 정보가 주어진 GUI 화면 샘플들을 학습함으로써 구축될 수 있다.

또 다른 몇몇 실시예들에서는, 상술한 실시예들의 다양한 조합에 기초하여 타깃 객체에 대한 추천 모션이 결정될 수도 있다.

다시 도 20을 참조하여 설명한다.

단계 S204에서, 추천 모션이 사용자에게 제공될 수 있다.

지금까지 도 20 내지 도 23을 참조하여 본 개시의 또 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법에 대하여 설명하였다. 상술한 바에 따르면, 사용자가 입력한 모션 디스크립션을 반영하여 타깃 객체에 대한 추천 모션이 결정될 수 있다. 가령, 모션에 대한 개략적인 설명이 주어지면, 학습된 모델 등을 이용하여 주어진 설명에 부합하는 추천 모션이 정확하게 결정될 수 있다. 이에 따라, GUI 프로토타입의 제작 편의성은 더욱 향상되고 제작 난이도는 더욱 감소될 수 있다.

이하에서는, 도 24 내지 도 26을 참조하여 본 개시의 또 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법에 대하여 설명하도록 한다.

도 24는 본 개시의 또 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법을 개략적으로 나타내는 예시적인 흐름도이다. 단, 이는 본 개시의 목적을 달성하기 위한 바람직한 실시예일뿐이며, 필요에 따라 일부 단계가 추가되거나 삭제될 수 있음은 물론이다.

도 24에 도시된 바와 같이, 본 실시예들은 타깃 객체의 속성 정보와 타깃 객체와 다른 객체와의 관계 정보를 고려하여 타깃 객체에 대한 추천 모션을 결정하는 방법에 관한 것이다.

본 실시예들도 프로토타입 제작 인터페이스를 제공하는 단계 S241에서 시작될 수 있다.

단계 S242에서, 타깃 GUI 화면에 배치된 적어도 하나의 객체 중에서 타깃 객체가 결정될 수 있다.

단계 S243에서, 타깃 객체의 속성 정보 및/또는 타깃 객체와 다른 객체와의 관계 정보에 기초하여 타깃 객체에 대한 추천 모션이 결정될 수 있다. 다만, 그 구체적인 방식은 실시예에 따라 달라질 수 있다.

몇몇 실시예들에서는, 도 25에 도시된 바와 같이, 객체의 속성에 기반하여 모션을 결정하도록 정의된 룰셋(251)을 이용하여 타깃 객체(253)의 추천 모션 정보(255)가 결정될 수 있다. 구체적으로, 룰셋(251)은 객체의 속성과 모션과의 연관성에 기초하여 정의된 다수의 룰들로 구성될 수 있다. 객체의 속성과 모션과의 연관성은 예를 들어 하기의 표 2와 같이 정의될 수 있을 것이나, 본 개시의 범위가 이에 한정되는 것은 아니다. 또한, 하기의 표 2로부터 다양한 룰들이 도출될 수 있고, 이러한 룰들의 예로는 객체의 크기(또는 비중)가 기준치 이상인 경우에 속도 또는 가속도를 하향시키는 룰, 객체의 크기(또는 비중)에 따라 속도 또는 가속도의 값(또는 값의 범위)을 결정하는 룰, 객체의 색상이 난색인 경우에 속도 또는 가속도를 상향시키는 룰, 객체의 형태가 원형인 경우에 속도 또는 가속도를 상향시키는 룰 등을 들 수 있다. 그러나, 본 개시의 범위가 이에 한정되는 것은 아니다. 본 실시예들에서, 제작 장치(10)는 타깃 GUI 화면(252)에 배치된 타깃 객체(253)의 속성 정보(254)에 룰셋(251)을 적용함으로써 추천 모션 정보(255)를 결정할 수 있다.

속성	모션과의 연관성
크기(비중)	크기(비중)가 클수록 속도가 느려짐
색상	객체의 색상이 따듯할수록(뜨거울수록) 속도가 빨라짐
	따뜻한 색상의 객체가 차가운 색상의 객체보다 속도가 빠름
형태(모양)	객체의 형태가 원형에 가까울수록 속도가 빨라짐
	원형의 객체가 사각형의 객체보다 속도가 빠름
	세로로 긴 객체가 가로로 긴 객체보다 회전 속도가 빠름
질감	질감이 매끄러울수록 속도가 빨라짐
	매끄러운 질감의 객체가 거친(또는 끈적한) 질감의 객체보다 속도가 빠름
	매끈한(또는 탱탱한) 질감의 객체가 잘 튕김

다른 몇몇 실시예들에서는, 도 26에 도시된 바와 같이, 객체들의 관계에 기반하여 모션을 결정하도록 정의된 룰셋(261)을 이용하여 타깃 객체(263)의 추천 모션 정보(265)가 결정될 수 있다. 구체적으로, 룰셋(261)은 동일 화면 내의 객체들의 관계와 모션과의 연관성에 기초하여 정의된 다수의 룰들로 구성될 수 있다. 이러한 연관성은 예를 들어 하기의 표 3과 같이 정의될 수 있을 것이나, 본 개시의 범위가 이에 한정되는 것은 아니다. 또한, 하기의 표 3으로부터 다양한 룰들이 도출될 수 있고, 이러한 룰들의 예로는 객체들 간의 거리가 기준치 이하인 경우에 속도 또는 가속도를 하향시키는 룰, 객체들 간의 상대적 크기에 기초하여 속도 또는 가속도를 조정하는 룰 등을 들 수 있다. 그러나, 본 개시의 범위가 이에 한정되는 것은 아니다. 본 실시예들에서, 제작 장치(10)는 타깃 GUI 화면(262)에 배치된 타깃 객체(263)와 다른 객체(264)와의 관계 정보(e.g., 거리 D, 상대적 크기 등)에 따라 적절한 룰셋(261)을 적용하여 추천 모션 정보(265)를 결정할 수 있다. 이때, 제작 장치(10)는 다른 객체(264)의 속성 정보(266, e.g., 크기, 위치 등)를 이용하여 관계 정보를 도출하고 다른 객체(264)의 모션 정보(267, e.g., 속도 등)를 참조하여 타깃 객체(263)의 추천 모션 정보(265)를 결정할 수도 있다.

동일 화면 내 다른 객체와의 관계	모션과의 연관성
상대적 크기(비중)	크기가 큰 객체의 속도는 작은 객체보다 상대적으로 느림
거리	부딪히지 않도록 거리가 가까워지면 속도가 느려짐
형태(모양	원형의 객체가 사각형의 객체보다 속도가 빠름
	세로로 긴 객체가 가로로 긴 객체보다 회전 속도가 빠름
위치 또는 계층 관계	상위에 위치한 객체의 모션이 하위에 위치한 객체의 모션보다 큼

또 다른 몇몇 실시예들에서는, 도 4 내지 도 23을 참조하여 설명한 실시예들에 따라 타깃 객체의 추천 모션 정보(즉, 모션 요소의 값)가 결정되고, 앞선 실시예들에 따라 룰셋(e.g., 251, 261) 기반으로 추천 모션 정보가 보정될 수 있다. 예를 들어, 제작 장치(10)는 학습된 모델을 통해 타깃 객체의 속도 값을 결정하고, 타깃 객체의 속성(e.g., 크기, 형태 등)과 관련된 룰셋(e.g., 251)을 적용하여 속도 값을 보정할 수 있다. 그렇게 함으로써, 타깃 객체의 추천 모션이 보다 정확하게 결정될 수 있다.또 다른 몇몇 실시예들에서는, 상술한 실시예들의 다양한 조합에 기초하여 타깃 객체에 대한 추천 모션이 결정될 수도 있다.

다시 도 24를 참조하여 설명한다.

단계 S244에서, 추천 모션이 사용자에게 제공될 수 있다.

지금까지 도 24 내지 도 26을 참조하여 본 개시의 또 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법에 대하여 설명하였다. 상술한 바에 따르면, 타깃 객체의 속성 정보와 다른 객체와의 관계를 고려함으로써 상황에 맞는 자연스러운 모션이 타깃 객체의 추천 모션으로 결정될 수 있다(e.g., 크기가 큰 타깃 객체에게 빠른 속도의 모션이 추천되는 경우 등이 방지될 수 있음).

이하에서는, 도 27 내지 도 31을 참조하여 본 개시의 또 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법에 대하여 설명하도록 한다.

도 27은 본 개시의 또 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법을 개략적으로 나타내는 예시적인 흐름도이다. 단, 이는 본 개시의 목적을 달성하기 위한 바람직한 실시예일뿐이며, 필요에 따라 일부 단계가 추가되거나 삭제될 수 있음은 물론이다.

도 27에 도시된 바와 같이, 본 실시예들은 GUI 화면에 설정된 리스폰스를 고려하거나 표시 속성의 변화가 존재하는 다수의 GUI 화면들을 이용하여 타깃 객체에 대한 추천 모션을 결정하는 방법에 관한 것이다.

본 실시예들도 프로토타입 제작 인터페이스를 제공하는 단계 S271에서 시작될 수 있다.

단계 S272에서, GUI 화면에 대한 트리거와 리스폰스 정보가 사용자로부터 입력(설정)될 수 있다. 경우에 따라서는, 제작 장치(10)가 트리거와 리스폰스가 설정되어 있는 GUI 프로토타입(또는 GUI 화면들)을 로드(load)할 수도 있다. 즉, 제작 장치(10)는 트리거와 리스폰스가 설정되어 있는 GUI 화면들을 다른 장치(e.g., 도 1의 11) 또는 사용자로부터 획득할 수도 있다.

또는, 제작 장치(10)가 표시 속성(e.g., GUI 화면의 표시 속성, 객체의 표시 속성)의 변화가 있는 복수의 GUI 화면들을 입력받을 수도 있다. 이 경우, 제작 장치(10)는 입력된 GUI 화면들을 비교하여 변화된 표시 속성의 타입, 변화 정도, 변화 패턴, 변화의 지속성 등을 식별할 수 있다. 이때, 타깃 GUI 화면은 표시 속성이 변화하기 전의 GUI 화면일 수도 있고 변화한 후의 GUI 화면일 수도 있다. 이하의 설명에서는, 식별된 정보도 '리스폰스 정보'로 통칭하도록 한다.

도 28 및 도 29는 리스폰스가 설정된 GUI 화면들(281, 283, 291, 294)을 예시하고 있다. 도 28은 타깃 객체(282)에 크기 확장을 유발하는 리스폰스가 설정된 경우를 예시하고 있고, 도 29는 타깃 객체(292)가 아니라 다른 객체(293)에 모션을 유발하는 리스폰스가 설정된 경우를 예시하고 있다.

단계 S273에서, 리스폰스 정보를 고려하여 타깃 객체에 대한 추천 모션이 결정될 수 있다. 가령, 제작 장치(10)는 리스폰스가 유발하는 표시 속성의 타입(종류)과 변화 정도에 기초하여 타깃 객체의 추천 모션을 결정할 수 있다. 다만, 그 구체적인 방식은 실시예에 따라 달라질 수 있다.

몇몇 실시예들에서는, 제작 장치(10)가 기 제작된 GUI 화면 샘플들 중에서 동일 또는 유사한 리스폰스가 설정된 GUI 화면 샘플을 레퍼런스 샘플로 선별할 수 있다. 그리고, 제작 장치(10)는 레퍼런스 샘플의 모션 객체를 이용하여 타깃 객체의 추천 모션을 결정할 수 있다.

다른 몇몇 실시예들에서는, 도 30에 도시된 바와 같이, 리스폰스 정보(e.g., 변화되는 표시 속성의 타입, 변화 정도 등)에 기반하여 모션을 결정하도록 정의된 룰셋(301)을 이용하여 타깃 객체(303)의 추천 모션 정보(306)가 결정될 수 있다. 구체적으로, 룰셋(301)은 리스폰스 정보와 모션과의 연관성에 기초하여 정의된 다수의 룰들로 구성될 수 있다. 이러한 연관성은 예를 들어 하기의 표 4와 같이 정의될 수 있을 것이나, 본 개시의 범위가 이에 한정되는 것은 아니다. 또한, 하기의 표 4로부터 다양한 룰들이 도출될 수 있고, 이러한 룰들의 예로는 객체의 크기 변화가 기준치 이상인 경우에 속도 또는 가속도를 상향시키는 룰, 객체의 색상 변화가 기준치 이상인 경우에 속도 또는 가속도를 상향시키는 룰 등을 들 수 있다. 그러나, 본 개시의 범위가 이에 한정되는 것은 아니다. 본 실시예들에서, 제작 장치(10)는 타깃 객체(303)(또는 다른 객체)의 리스폰스 정보(305)에 룰셋(301)을 적용함으로써 추천 모션 정보(306)를 결정할 수 있다.

표시 속성	모션과의 연관성
크기(비중)	크기의 변화가 클수록 속도가 빨라짐
위치	위치의 변화가 클수록 속도가 빨라짐
색상	색상의 변화가 클수록 속도가 빨라짐
방향	방향의 변화가 클수록 속도가 빨라짐
투명도	투명도의 변화가 클수록 속도가 빨라짐
	투명도가 클수록 속도가 빨라짐
회전	회전각이 클수록 속도가 빨라짐

또 다른 몇몇 실시예들에서는, 도 4 내지 도 26을 참조하여 설명한 실시예들에 따라 타깃 객체의 추천 모션 정보(즉, 모션 요소의 값)가 결정되고, 앞선 실시예들에 따라 룰셋(301) 기반으로 추천 모션 정보가 보정될 수 있다.

또 다른 몇몇 실시예들에서는, 도 31에 도시된 바와 같이, 리스폰스 정보(314)를 더 입력받아 모션 정보(315)를 예측하도록 학습된 모델(311)을 이용하여 타깃 객체의 추천 모션 정보(315)가 예측될 수 있다. 가령, 제작 장치(10)는 연관된 GUI 화면들(312, 313)의 정보와 리스폰스 정보(314)를 학습된 모델(311)에 입력하여 타깃 객체의 추천 모션 정보(315)를 예측할 수 있다. 이러한 모델(311)은 리스폰스 정보가 주어진 GUI 화면 샘플들을 학습함으로써 구축될 수 있다.

다시 도 27을 참조하여 설명한다.

단계 S274에서, 추천 모션이 사용자에게 제공될 수 있다.

지금까지 도 27 내지 도 31을 참조하여 본 개시의 또 다른 몇몇 실시예들에 따른 GUI 프로토타입 제작 방법에 대하여 설명하였다. 상술한 바에 따르면, 타깃 객체 또는 다른 객체의 표시 속성 변화를 고려함으로써 상황에 맞는 자연스러운 모션이 타깃 객체의 추천 모션으로 결정될 수 있다(e.g., 크기 변화가 큰 타깃 객체에게 느린 속도의 모션이 추천되는 경우 등이 방지될 수 있음).

지금까지 도 4 내지 도 31을 참조하여 GUI 프로토타입 제작 방법에 관한 다양한 실시예들에 대하여 설명하였다. 상술한 다양한 실시예들은 다양한 형태로 조합될 수 있다. 가령, 제작 장치(10)는 학습된 모델(e.g., 101)을 이용하여 타깃 객체의 제1 모션 요소의 값을 결정하고 룰셋(e.g., 251)을 이용하여 타깃 객체의 제2 모션 요소의 값을 결정할 수도 있다.

이하에서는, 도 32를 참조하여 본 개시의 몇몇 실시예들에 따른 제작 장치(10) 등을 구현할 수 있는 예시적인 컴퓨팅 장치(320)에 대하여 설명하도록 한다.

도 32는 컴퓨팅 장치(320)를 나타내는 예시적인 하드웨어 구성도이다.

도 32에 도시된 바와 같이, 컴퓨팅 장치(320)는 하나 이상의 프로세서(321), 버스(323), 통신 인터페이스(324), 프로세서(321)에 의하여 수행되는 컴퓨터 프로그램을 로드(load)하는 메모리(322)와, 컴퓨터 프로그램(326)을 저장하는 스토리지(325)를 포함할 수 있다. 다만, 도 32에는 본 개시의 실시예와 관련 있는 구성요소들만이 도시되어 있다. 따라서, 본 개시가 속한 기술분야의 통상의 기술자라면 도 32에 도시된 구성요소들 외에 다른 범용적인 구성요소들이 더 포함될 수 있음을 알 수 있다. 즉, 컴퓨팅 장치(320)에는, 도 32에 도시된 구성요소 이외에도 다양한 구성요소가 더 포함될 수 있다. 또한, 경우에 따라, 도 32에 도시된 구성요소들 중 일부가 생략된 형태로 컴퓨팅 장치(320)가 구성될 수도 있다. 이하, 컴퓨팅 장치(320)의 각 구성요소에 대하여 설명한다.

프로세서(321)는 컴퓨팅 장치(320)의 각 구성의 전반적인 동작을 제어할 수 있다. 프로세서(321)는 CPU(Central Processing Unit), MPU(Micro Processor Unit), MCU(Micro Controller Unit), GPU(Graphic Processing Unit), NPU(Neural Processing Unit) 또는 본 개시의 기술 분야에 잘 알려진 임의의 형태의 프로세서 중 적어도 하나를 포함하여 구성될 수 있다. 또한, 프로세서(321)는 본 개시의 실시예들에 따른 동작/방법을 실행하기 위한 적어도 하나의 애플리케이션 또는 프로그램에 대한 연산을 수행할 수 있다. 컴퓨팅 장치(320)는 하나 이상의 프로세서를 구비할 수 있다.

다음으로, 메모리(322)는 각종 데이터, 명령 및/또는 정보를 저장할 수 있다. 메모리(322)는 본 개시의 실시예들에 따른 동작/방법을 실행하기 위하여 스토리지(325)로부터 컴퓨터 프로그램(326)을 로드할 수 있다. 메모리(322)는 RAM과 같은 휘발성 메모리로 구현될 수 있을 것이나, 본 개시의 기술적 범위가 이에 한정되는 것은 아니다.

다음으로, 버스(323)는 컴퓨팅 장치(320)의 구성요소 간 통신 기능을 제공할 수 있다. 버스(323)는 주소 버스(Address Bus), 데이터 버스(Data Bus) 및 제어 버스(Control Bus) 등 다양한 형태의 버스로 구현될 수 있다.

다음으로, 통신 인터페이스(324)는 컴퓨팅 장치(320)의 유무선 인터넷 통신을 지원할 수 있다. 또한, 통신 인터페이스(324)는 인터넷 통신 외의 다양한 통신 방식을 지원할 수도 있다. 이를 위해, 통신 인터페이스(324)는 본 개시의 기술 분야에 잘 알려진 통신 모듈을 포함하여 구성될 수 있다.

다음으로, 스토리지(325)는 하나 이상의 컴퓨터 프로그램(326)을 비임시적으로 저장할 수 있다. 스토리지(325)는 ROM(Read Only Memory), EPROM(Erasable Programmable ROM), EEPROM(Electrically Erasable Programmable ROM), 플래시 메모리 등과 같은 비휘발성 메모리, 하드 디스크, 착탈형 디스크, 또는 본 개시가 속하는 기술 분야에서 잘 알려진 임의의 형태의 컴퓨터로 읽을 수 있는 기록 매체를 포함하여 구성될 수 있다.

다음으로, 컴퓨터 프로그램(326)은 메모리(322)에 로드될 때 프로세서(321)로 하여금 본 개시의 다양한 실시예들에 따른 동작/방법을 수행하도록 하는 하나 이상의 인스트럭션을 포함할 수 있다. 즉, 프로세서(321)는 상기 하나 이상의 인스트럭션을 실행함으로써, 본 개시의 다양한 실시예들에 따른 동작/방법을 수행할 수 있다.

예를 들어, 컴퓨터 프로그램(326)은 프로토타입 제작 인터페이스를 사용자에게 제공하는 동작, 프로토타입 제작 인터페이스를 통해 제작되는 타깃 GUI 화면에 배치된 적어도 하나의 객체 중에서 타깃 객체를 결정하는 동작, 기 제작된 GUI 화면 샘플들을 이용하여 타깃 객체에 대한 추천 모션을 결정하는 동작 및 추천 모션을 사용자에게 제공하는 동작을 수행하는 하나 이상의 인스트럭션들을 포함할 수 있다. 이와 같은 경우, 컴퓨팅 장치(320)를 통해 본 개시의 몇몇 실시예들에 따른 제작 장치(10)가 구현될 수 있다.

한편, 몇몇 실시예들에서, 도 32에 도시된 컴퓨팅 장치(320)는 클라우드 기술에 기반하여 구현된 가상 머신을 의미하는 것일 수도 있다. 가령, 컴퓨팅 장치(320)는 서버 팜(server farm)에 포함된 하나 이상의 물리 서버(physical server)에서 동작하는 가상 머신일 수 있다. 이 경우, 도 32에 도시된 프로세서(321), 메모리(322) 및 스토리지(325) 중 적어도 일부는 가상 하드웨어(virtual hardware)일 수 있으며, 통신 인터페이스(324) 또한 가상 스위치(virtual switch) 등과 같은 가상화된 네트워킹 요소로 구현된 것일 수도 있다.

지금까지 도 32를 참조하여 본 개시의 몇몇 실시예들에 따른 제작 장치(10) 등을 구현할 수 있는 예시적인 컴퓨팅 장치(320)에 대하여 설명하였다.

지금까지 도 1 내지 도 32를 참조하여 본 개시의 다양한 실시예들 및 그 실시예들에 따른 효과들을 언급하였다. 본 개시의 기술적 사상에 따른 효과들은 이상에서 언급한 효과들로 제한되지 않으며, 언급되지 않은 또 다른 효과들은 아래의 기재로부터 통상의 기술자에게 명확하게 이해될 수 있을 것이다.

또한, 이상의 실시예들에서 복수의 구성요소들이 하나로 결합되거나 결합되어 동작하는 것으로 설명되었다고 해서, 본 개시의 기술적 사상이 반드시 이러한 실시예에 한정되는 것은 아니다. 즉, 본 개시의 기술적 사상의 목적 범위 안에서라면, 그 모든 구성요소들이 하나 이상으로 선택적으로 결합하여 동작할 수도 있다.

지금까지 설명된 본 개시의 기술적 사상은 컴퓨터가 읽을 수 있는 매체 상에 컴퓨터가 읽을 수 있는 코드로 구현될 수 있다. 컴퓨터로 읽을 수 있는 기록 매체에 기록된 컴퓨터 프로그램은 인터넷 등의 네트워크를 통하여 다른 컴퓨팅 장치에 전송되어 상기 다른 컴퓨팅 장치에 설치될 수 있고, 이로써 상기 다른 컴퓨팅 장치에서 사용될 수 있다.

도면에서 동작들이 특정한 순서로 도시되어 있지만, 반드시 동작들이 도시된 특정한 순서로 또는 순차적 순서로 실행되어야만 하거나 또는 모든 도시 된 동작들이 실행되어야만 원하는 결과를 얻을 수 있는 것으로 이해되어서는 안 된다. 특정 상황에서는, 멀티태스킹 및 병렬 처리가 유리할 수도 있다. 이상 첨부된 도면을 참조하여 본 개시의 다양한 실시예들을 설명하였지만, 본 개시가 속한 기술분야에서 통상의 지식을 가진 자는 그 기술적 사상이나 필수적인 특징을 변경하지 않고서 본 개시의 기술적 사상이 다른 구체적인 형태로도 실시될 수 있다는 것을 이해할 수 있다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적인 것이 아닌 것으로 이해해야만 한다. 본 개시의 보호 범위는 아래의 청구범위에 의하여 해석되어야 하며, 그와 동등한 범위 내에 있는 모든 기술 사상은 본 개시에 의해 정의되는 기술적 사상의 권리범위에 포함되는 것으로 해석되어야 할 것이다.

Claims (21)

1. 적어도 하나의 컴퓨팅 장치에 의해 수행되는 방법으로서,
   프로토타입 제작 인터페이스를 사용자에게 제공하는 단계;
   상기 프로토타입 제작 인터페이스를 통해 제작되는 타깃 GUI(Graphical User Interface) 화면에 배치된 적어도 하나의 객체 중에서 타깃 객체를 결정하는 단계;
   객체의 속성 정보에 기초하여 기 제작된 GUI 화면 샘플들과 상기 타깃 GUI 화면 간의 유사도를 산출하는 단계 - 상기 GUI 화면 샘플들은 모션 객체를 포함함 -;
   상기 유사도를 기초로 상기 GUI 화면 샘플들 중에서 레퍼런스 샘플을 선별하는 단계;
   상기 레퍼런스 샘플의 모션 객체를 이용하여 상기 타깃 객체에 대한 추천 모션을 결정하는 단계; 및
   상기 추천 모션을 상기 사용자에게 제공하는 단계를 포함하는,
   그래픽 사용자 인터페이스의 프로토타입 제작 방법.
2. 제1항에 있어서,
   상기 타깃 객체를 결정하는 단계는,
   GUI 화면 정보를 입력받아 모션 객체를 예측하도록 학습된 모델을 획득하는 단계;
   상기 학습된 모델을 통해 상기 타깃 GUI 화면에 배치된 상기 적어도 하나의 객체 중에서 모션 객체를 예측하는 단계; 및
   상기 예측된 모션 객체를 상기 타깃 객체로 결정하는 단계를 포함하는,
   그래픽 사용자 인터페이스의 프로토타입 제작 방법.
3. 제2항에 있어서,
   상기 모델은 GUI 화면 이미지를 입력받아 모션 객체를 예측하도록 학습된 CNN(Convolutional Neural Network) 기반의 모델인,
   그래픽 사용자 인터페이스의 프로토타입 제작 방법.
4. 제2항에 있어서,
   상기 GUI 화면 정보는 객체의 속성 정보를 포함하고,
   상기 모델은,
   상기 객체의 속성 정보를 입력받아 객체 단위의 임베딩을 생성하는 인코더 및
   상기 객체 단위의 임베딩을 기초로 대응되는 객체가 모션 객체에 해당하는지 여부를 예측하는 예측 레이어를 포함하는,
   그래픽 사용자 인터페이스의 프로토타입 제작 방법.
5. 제1항에 있어서,
   상기 타깃 객체에 대한 추천 모션을 결정하는 단계는,
   상기 추천 모션에 대한 모션 요소의 값을 결정하는 단계를 포함하고,
   상기 모션 요소는 목적지, 상기 목적지까지의 이동 시간, 속도 및 가속도 중 적어도 하나를 포함하는,
   그래픽 사용자 인터페이스의 프로토타입 제작 방법.
6. 삭제
7. 적어도 하나의 컴퓨팅 장치에 의해 수행되는 방법으로서,
   프로토타입 제작 인터페이스를 사용자에게 제공하는 단계;
   상기 프로토타입 제작 인터페이스를 통해 제작되는 타깃 GUI(Graphical User Interface) 화면에 배치된 적어도 하나의 객체 중에서 타깃 객체를 결정하는 단계;
   기 제작된 GUI 화면 샘플들과 상기 타깃 GUI 화면 간의 임베딩 유사도를 산출하는 단계 - 상기 GUI 화면 샘플들은 모션 객체를 포함함 -;
   상기 임베딩 유사도를 기초로 상기 GUI 화면 샘플들 중에서 레퍼런스 샘플을 선별하는 단계;
   상기 레퍼런스 샘플의 모션 객체를 이용하여 상기 타깃 객체에 대한 추천 모션을 결정하는 단계; 및
   상기 추천 모션을 상기 사용자에게 제공하는 단계를 포함하는,
   그래픽 사용자 인터페이스의 프로토타입 제작 방법.
8. 제1항에 있어서,
   상기 GUI 화면 샘플들 또는 다른 GUI 화면 샘플들을 학습용 GUI 화면 샘플로 이용하여 학습된 모델을 획득하는 단계 - 상기 모델은 상기 학습용 GUI 화면 샘플의 정보를 입력받아 객체의 모션을 예측하도록 학습된 것임 -; 및
   상기 학습된 모델에 상기 타깃 GUI 화면의 정보를 입력하여 상기 타깃 객체에 대한 다른 추천 모션을 예측하는 단계를 더 포함하는,
   그래픽 사용자 인터페이스의 프로토타입 제작 방법.
9. 제8항에 있어서,
   상기 모델은 서로 다른 모션 요소의 값을 예측하는 복수의 예측 레이어들을 포함하고,
   상기 모션 요소는 목적지, 상기 목적지까지의 이동 시간, 속도 및 가속도 중 적어도 하나를 포함하는,
   그래픽 사용자 인터페이스의 프로토타입 제작 방법.
10. 제8항에 있어서,
    상기 학습용 GUI 화면 샘플의 정보는 객체의 속성 정보를 포함하고,
    상기 모델은,
    객체의 속성 정보를 입력받아 객체 단위의 임베딩을 생성하는 인코더 및
    상기 객체 단위의 임베딩을 기초로 대응되는 객체의 모션 정보를 예측하는 예측 레이어를 포함하는,
    그래픽 사용자 인터페이스의 프로토타입 제작 방법.
11. 적어도 하나의 컴퓨팅 장치에 의해 수행되는 방법으로서,
    프로토타입 제작 인터페이스를 사용자에게 제공하는 단계;
    상기 프로토타입 제작 인터페이스를 통해 제작되는 타깃 GUI(Graphical User Interface) 화면에 배치된 적어도 하나의 객체 중에서 타깃 객체를 결정하는 단계;
    상기 타깃 GUI 화면의 태스크 또는 디자인 패턴을 기초로 기 제작된 GUI 화면 샘플들 중에서 레퍼런스 샘플을 선별하는 단계 - 상기 GUI 화면 샘플들은 모션 객체를 포함함 -;
    상기 레퍼런스 샘플의 모션 객체를 이용하여 상기 타깃 객체에 대한 추천 모션을 결정하는 단계; 및
    상기 추천 모션을 상기 사용자에게 제공하는 단계를 포함하는,
    그래픽 사용자 인터페이스의 프로토타입 제작 방법.
12. 제1항에 있어서,
    상기 사용자로부터 상기 타깃 객체에 대한 모션 디스크립션(description)을 입력받는 단계;
    상기 모션 디스크립션에서 상기 사용자의 디자인 의도를 추출하는 단계;
    상기 GUI 화면 샘플들을 또는 다른 GUI 화면 샘플들을 학습용 GUI 화면 샘플로 이용하여 학습된 모델을 획득하는 단계 - 상기 모델은 상기 학습용 GUI 화면 샘플의 디자인 의도를 입력받아 객체의 모션을 예측하도록 학습된 것임 -; 및
    상기 학습된 모델을 통해 상기 사용자의 디자인 의도에 부합하는 상기 타깃 객체의 다른 추천 모션을 예측하는 단계를 더 포함하는,
    그래픽 사용자 인터페이스의 프로토타입 제작 방법.
13. 제1항에 있어서,
    객체의 속성에 기반하여 모션을 결정하는 룰셋을 획득하는 단계; 및
    상기 타깃 객체의 속성 정보에 상기 룰셋을 적용하여 다른 추천 모션을 결정하는 단계를 더 포함하는,
    그래픽 사용자 인터페이스의 프로토타입 제작 방법.
14. 제13항에 있어서,
    상기 룰셋은,
    객체의 크기가 기준치 이상인 경우에 속도 또는 가속도를 하향시키는 제1 룰,
    객체의 색상이 난색인 경우에 속도 또는 가속도를 상향시키는 제2 룰 및
    객체의 형태가 원형인 경우에 속도 또는 가속도를 상향시키는 제3 룰 중 적어도 하나를 포함하는,
    그래픽 사용자 인터페이스의 프로토타입 제작 방법.
15. 제1항에 있어서,
    상기 타깃 객체에 대한 추천 모션을 결정하는 단계는,
    상기 레퍼런스 샘플의 모션 객체를 이용하여 상기 타깃 객체의 모션 요소의 값을 결정하는 단계; 및
    상기 타깃 객체의 속성 정보를 기초로 상기 모션 요소의 값을 보정하여 상기 추천 모션을 결정하는 단계를 포함하는,
    그래픽 사용자 인터페이스의 프로토타입 제작 방법.
16. 제1항에 있어서,
    객체들의 관계에 기반하여 모션을 결정하는 룰셋을 획득하는 단계;
    상기 타깃 GUI 화면을 분석하여 상기 타깃 객체와 상기 타깃 GUI 화면에 배치된 다른 객체와의 관계 정보를 추출하는 단계; 및
    상기 추출된 관계 정보에 상기 룰셋을 적용하여 다른 추천 모션을 결정하는 단계를 더 포함하는,
    그래픽 사용자 인터페이스의 프로토타입 제작 방법.
17. 제16항에 있어서,
    상기 룰셋은,
    객체 간의 거리가 기준치 이하인 경우에 속도 또는 가속도를 하향시키는 제1 룰 및
    객체 간의 상대적 크기에 기초하여 속도 또는 가속도를 조정하는 제2 룰 중 적어도 하나를 포함하는,
    그래픽 사용자 인터페이스의 프로토타입 제작 방법.
18. 제1항에 있어서,
    상기 타깃 GUI 화면과 연관된 다른 GUI 화면을 획득하는 단계 - 상기 다른 GUI 화면과 상기 타깃 GUI 화면 간에는 표시 속성의 변화가 존재함 -;
    상기 타깃 GUI 화면과 상기 다른 GUI 화면을 비교하여 상기 표시 속성의 타입과 변화 정도를 식별하는 단계; 및
    상기 식별 결과에 기초하여 상기 타깃 객체의 다른 추천 모션을 결정하는 단계를 더 포함하는,
    그래픽 사용자 인터페이스의 프로토타입 제작 방법.
19. 제1항에 있어서,
    상기 추천 모션을 상기 사용자에게 제공하는 단계는,
    프리뷰창을 통해 상기 추천 모션의 영상을 디스플레이하는 단계;
    상기 추천 모션에 대한 모션 요소의 값을 디스플레이하는 단계; 및
    상기 모션 요소의 값을 변경하는 사용자 입력에 응답하여, 상기 변경된 값이 반영하여 상기 추천 모션의 영상을 업데이트하는 단계를 포함하는,
    그래픽 사용자 인터페이스의 프로토타입 제작 방법.
20. 하나 이상의 프로세서; 및
    인스트럭션들을 저장하는 메모리를 포함하고,
    상기 하나 이상의 프로세서는,
    상기 저장된 인스트럭션들을 실행시킴으로써,
    프로토타입 제작 인터페이스를 사용자에게 제공하는 동작,
    상기 프로토타입 제작 인터페이스를 통해 제작되는 타깃 GUI(Graphical User Interface) 화면에 배치된 적어도 하나의 객체 중에서 타깃 객체를 결정하는 동작,
    객체의 속성 정보에 기초하여 기 제작된 GUI 화면 샘플들과 상기 타깃 GUI 화면 간의 유사도를 산출하는 동작 - 상기 GUI 화면 샘플들은 모션 객체를 포함함 -,
    상기 유사도를 기초로 상기 GUI 화면 샘플들 중에서 레퍼런스 샘플을 선별하는 동작,
    상기 레퍼런스 샘플의 모션 객체를 이용하여 상기 타깃 객체에 대한 추천 모션을 결정하는 동작 및
    상기 추천 모션을 상기 사용자에게 제공하는 동작을 수행하는,
    그래픽 사용자 인터페이스의 프로토타입 제작 시스템.
21. 컴퓨팅 장치와 결합되어,
    프로토타입 제작 인터페이스를 사용자에게 제공하는 단계;
    상기 프로토타입 제작 인터페이스를 통해 제작되는 타깃 GUI(Graphical User Interface) 화면에 배치된 적어도 하나의 객체 중에서 타깃 객체를 결정하는 단계;
    객체의 속성 정보에 기초하여 기 제작된 GUI 화면 샘플들과 상기 타깃 GUI 화면 간의 유사도를 산출하는 단계 - 상기 GUI 화면 샘플들은 모션 객체를 포함함 -;
    상기 유사도를 기초로 상기 GUI 화면 샘플들 중에서 레퍼런스 샘플을 선별하는 단계;
    상기 레퍼런스 샘플의 모션 객체를 이용하여 상기 타깃 객체에 대한 추천 모션을 결정하는 단계; 및
    상기 추천 모션을 상기 사용자에게 제공하는 단계를 실행시키기 위하여 컴퓨터로 판독가능한 기록매체에 저장된,
    컴퓨터 프로그램.

Images