KR102225356B1 - Gui 디자인에 대한 피드백을 제공하는 방법 및 장치 - Google Patents

Gui 디자인에 대한 피드백을 제공하는 방법 및 장치 Download PDF

Info

Publication number
KR102225356B1
KR102225356B1 KR1020190001190A KR20190001190A KR102225356B1 KR 102225356 B1 KR102225356 B1 KR 102225356B1 KR 1020190001190 A KR1020190001190 A KR 1020190001190A KR 20190001190 A KR20190001190 A KR 20190001190A KR 102225356 B1 KR102225356 B1 KR 102225356B1
Authority
KR
South Korea
Prior art keywords
design
gui
feedback
image
gui image
Prior art date
Application number
KR1020190001190A
Other languages
English (en)
Other versions
KR20200092452A (ko
Inventor
고성안
이충기
Original Assignee
울산과학기술원
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 울산과학기술원 filed Critical 울산과학기술원
Priority to KR1020190001190A priority Critical patent/KR102225356B1/ko
Publication of KR20200092452A publication Critical patent/KR20200092452A/ko
Application granted granted Critical
Publication of KR102225356B1 publication Critical patent/KR102225356B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q30/00—Commerce
    • G06Q30/06—Buying, selling or leasing transactions
    • G06Q30/0601—Electronic shopping [e-shopping]
    • G06Q30/0621—Item configuration or customization
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
    • G06F16/58—Retrieval characterised by using metadata, e.g. metadata not derived from the content or metadata generated manually
    • G06F16/583—Retrieval characterised by using metadata, e.g. metadata not derived from the content or metadata generated manually using metadata automatically derived from the content
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F30/00—Computer-aided design [CAD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q10/00—Administration; Management
    • G06Q10/10—Office automation; Time management
    • G06Q10/101—Collaborative creation, e.g. joint development of products or services

Landscapes

  • Engineering & Computer Science (AREA)
  • Business, Economics & Management (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Resources & Organizations (AREA)
  • Entrepreneurship & Innovation (AREA)
  • Strategic Management (AREA)
  • Accounting & Taxation (AREA)
  • Marketing (AREA)
  • General Business, Economics & Management (AREA)
  • Library & Information Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Finance (AREA)
  • Data Mining & Analysis (AREA)
  • Economics (AREA)
  • Geometry (AREA)
  • Development Economics (AREA)
  • Databases & Information Systems (AREA)
  • Evolutionary Computation (AREA)
  • Computer Hardware Design (AREA)
  • Operations Research (AREA)
  • Quality & Reliability (AREA)
  • Tourism & Hospitality (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

일 실시예에 따른 디자인에 대한 피드백을 제공하는 방법 및 장치는 디자인 공간에서 생성된 디자인의 현재 상태를 캡쳐하고, 현재 상태의 디자인에 대응하는 GUI 이미지 및 현재 상태의 디자인에 대응하는 HTML 요소를 포함하는 GUI 정보를 획득하며, GUI 정보를 기초로, 디자인에 대한 평가, 집중, 및 추천 중 적어도 하나를 포함하는 피드백을 제공한다.

Description

GUI 디자인에 대한 피드백을 제공하는 방법 및 장치{METHOD AND APPARATUS OF PROVIDING FEEDBACK ON DESIGN OF GRAPHIC USER INTERFACE(GUI)}
아래의 실시예들은 GUI 디자인에 대한 피드백을 제공하는 방법 및 장치에 관한 것이다.
스마트폰의 등장 및 글로벌 디지털화의 가속으로 인해 모바일 UI(User Interface)는 꾸준히 진화하고 있으며, 관련된 기술 개발도 꾸준히 이루어지고 있다. GUI(Graphic User Interface)는 디자인 오브젝트를 터치하여 동작할 수 있다는 장점을 기반으로 텍스트를 기반으로 동작하는 TUI(Text User Interface)를 누르고 주요 UI로 발전되어 왔다. 특히, 다양한 모바일 GUI 디자인 개발 또한 활성화되고 있으나, 전문가가 아닌 경우, 모바일 GUI 디자인을 원활하게 수행하기란 용이하지 않다.
특허문헌 1: 한국 공개특허 제10-2006-0107945호(공개일자 2008년07월08일)는 무선 인터넷 사용자 인터페이스를 위한 템플릿 구조를 제공하기 위한 장치를 제시한다.
일 실시예에 따르면, 사용자가 제작 중인 GUI(Graphic User Interface) 디자인에 대한 평가, 추천, 및 사용자들의 집중 영역을 포함하는 피드백을 제공할 수 있다.
일 실시예에 따르면, 사용자가 현재 생성(제작) 중인 디자인에 대한 즉각적인 피드백을 제공함으로써 초기 설계 과정에서 디자인의 품질을 향상시킬 수 있다.
일 실시예에 따르면, GUI를 용이하게 디자인할 수 있도록 보조하는 다양한 구성들을 복합적으로 제공할 수 있다.
일 실시예에 따르면, 사용자가 제작 중인 GUI 디자인에 대해 딥 러닝 기술을 활용하여 기 생성된 템플릿을 추천할 수 있다.
일 실시예에 따르면, 사용자가 제작 중인 GUI 디자인에서 사용자들의 집중도가 높은 영역을 실시간으로 알려줄 수 있다.
일 측에 따르면, 디자인에 대한 피드백을 제공하는 방법은 디자인 공간에서 생성된 디자인의 현재 상태(state)를 캡쳐(capture)하는 단계; 상기 현재 상태의 디자인에 대응하는 GUI(Graphic User Interface) 이미지 및 상기 현재 상태의 디자인에 대응하는 HTML 요소를 포함하는 GUI 정보를 획득하는 단계; 및 상기 GUI 정보를 기초로, 상기 디자인에 대한 평가(evaluation), 집중(attention), 및 추천(recommendation) 중 적어도 하나를 포함하는 피드백을 제공하는 단계를 포함한다.
상기 피드백을 제공하는 단계는 상기 GUI 이미지 및 상기 HTML 요소를 기초로, 상기 디자인의 시각적 복잡도(visual complexity)를 평가하는 스코어(score)를 산출하는 단계; 및 상기 스코어를 피드백하는 단계를 포함할 수 있다.
상기 스코어를 산출하는 단계는 상기 HTML 요소를 구문 분석하여 GUI 요소의 속성 및 주요 색상 중 적어도 하나를 추출하는 단계; 및 상기 GUI 이미지, 상기 GUI 요소의 속성 및 상기 주요 색상 중 적어도 하나를 기초로, 상기 디자인의 시각적 복잡도를 평가하는 스코어(score)를 산출하는 단계를 포함할 수 있다.
상기 스코어를 산출하는 단계는 상기 GUI 이미지, 상기 GUI 요소의 속성 및 상기 주요 색상 중 적어도 하나가 미리 설정된 복수의 평가 요소들에 부합하는지를 여부를 기초로, 상기 스코어를 산출하는 단계를 포함할 수 있다.
상기 복수의 평가 요소들은 요소 밸런스(Element Balance), 정렬(Alignment), 폰트 사이즈 및 타입 단일성(Font Size and Type), 컬러 단일성Color Unity) , 요소 사이즈(Element Size), 및 밀도(Density) 중 적어도 하나를 포함할 수 있다.
상기 피드백을 제공하는 단계는 상기 HTML 요소를 구문 분석하여 상기 디자인의 GUI 구조 정보를 추출하는 단계; 상기 GUI 구조 정보를 기초로, 상기 GUI 이미지에 대응하는 예제 템플릿들(example templates)을 포함하는 추천 목록을 생성하는 단계; 및 상기 추천 목록을 피드백하는 단계를 포함할 수 있다.
상기 추천 목록을 생성하는 단계는 상기 GUI 구조 정보를 기초로 제1 특징 벡터를 추출하는 단계; 미리 설정된 데이터 세트로부터 추출된 제2 특징 벡터들과 상기 제1 특징 벡터를 매칭시킴으로써, 상기 데이터 세트에 포함된 이미지들 중 상기 GUI 이미지와 유사한 유사 이미지들을 검색하는 단계; 및 상기 유사 이미지들 및 상기 GUI 이미지와 무관한 무작위 이미지들 중 적어도 하나를 포함하는 추천 목록을 생성하는 단계를 포함할 수 있다.
상기 제1 특징 벡터를 추출하는 단계는 오토 인코더(Auto Encoder)를 이용하여 상기 GUI 구조 정보로부터 상기 제1 특징 벡터를 추출하는 단계를 포함할 수 있다.
상기 유사 이미지들을 검색하는 단계는 K- 최근접(k-nearest neighbor) 알고리즘을 이용하여 상기 제2 특징 벡터들과 상기 제1 특징 벡터를 매칭시키는 단계; 및 상기 매칭 결과를 기초로, 상기 데이터 세트에 포함된 이미지들 중 상기 GUI 이미지와 유사한 유사 이미지들을 검색하는 단계를 포함할 수 있다.
상기 유사 이미지들을 검색하는 단계는 상기 매칭 결과에 따른 상기 제1 특징 벡터와 상기 제2 특징 벡터들 간의 유사도 점수들을 산출하는 단계; 및 상기 유사도 점수들을 기초로, 상기 유사 이미지들을 검색하는 단계를 포함할 수 있다.
상기 추천 목록을 생성하는 단계는 상기 유사도 점수들을 기초로, 상기 유사 이미지들을 정렬하는 단계; 및 상기 정렬된 유사 이미지들을 이용하여 상기 추천 목록을 생성하는 단계를 포함할 수 있다.
상기 피드백을 제공하는 단계는 상기 GUI 이미지를 미리 학습된 신경망 에 인가함으로써 상기 GUI 이미지에서 사용자들의 집중을 유도할 것으로 기대되는 위치를 나타내는 히트 맵(heat map)을 생성하는 단계; 상기 히트 맵을 상기 GUI 이미지에 오버레이(overlay)하여 집중 맵(attention map)을 생성하는 단계; 및 상기 집중 맵을 피드백하는 단계를 포함할 수 있다.
상기 GUI 정보를 획득하는 단계는 상기 디자인 공간에서 발생하는 사용자 인터랙션(user interaction)을 감지하는 단계; 및 상기 사용자 인터랙션에 대응하여 갱신된 상태에 대응하는 HTML 요소 및 상기 갱신된 상태에 대응하는 GUI 이미지 중 적어도 하나를 추출하는 단계를 포함할 수 있다.
상기 피드백을 제공하는 단계는 상기 갱신된 상태의 디자인에 대응하는 GUI 정보를 기초로, 상기 피드백을 제공하는 단계를 포함할 수 있다.
일 측에 따르면, 디자인에 대한 피드백을 제공하는 장치는 디자인 공간에서 생성된 디자인의 현재 상태를 캡쳐하고, 상기 현재 상태의 디자인에 대응하는 GUI 이미지 및 상기 현재 상태의 디자인에 대응하는 HTML 요소를 포함하는 GUI 정보를 획득하며, 상기 GUI 정보를 기초로, 상기 디자인에 대한 평가, 집중, 및 추천 중 적어도 하나를 포함하는 피드백을 제공하는 적어도 하나의 프로세서를 포함한다.
상기 프로세서는 상기 HTML 요소를 구문 분석하여 GUI 요소의 속성 및 주요 색상 중 적어도 하나를 추출하고, 상기 GUI 이미지, 상기 GUI 요소의 속성 및 상기 주요 색상 중 적어도 하나를 기초로 상기 디자인의 시각적 복잡도를 평가하는 스코어를 산출하며, 상기 스코어를 피드백할 수 있다.
상기 프로세서는 상기 HTML 요소를 구문 분석하여 상기 디자인의 GUI 구조 정보를 추출하고, 상기 GUI 구조 정보를 기초로 상기 GUI 이미지에 대응하는 예제 템플릿들을 포함하는 추천 목록을 생성하며, 상기 추천 목록을 피드백할 수 있다.
상기 프로세서는 상기 GUI 이미지를 미리 학습된 신경망에 인가함으로써 상기 GUI 이미지에서 사용자들의 집중을 유도할 것으로 기대되는 위치를 나타내는 히트 맵을 생성하고, 상기 히트 맵을 상기 GUI 이미지에 오버레이하여 집중 맵을 생성하며, 상기 집중 맵을 피드백할 수 있다.
상기 프로세서는 상기 디자인 공간에서 발생하는 사용자 인터랙션을 감지하고, 상기 사용자 인터랙션에 대응하여 갱신된 상태의 디자인에 대응하는 GUI 정보를 추출하고, 상기 갱신된 상태의 디자인에 대응하는 GUI 정보를 기초로, 상기 피드백을 제공할 수 있다.
일 측에 따르면, 사용자가 제작 중인 GUI(Graphic User Interface) 디자인에 대한 평가, 추천, 및 사용자들의 집중 영역을 포함하는 피드백을 제공할 수 있다.
일 측에 따르면, 사용자가 현재 생성(제작) 중인 디자인에 대한 즉각적인 피드백을 제공함으로써 초기 설계 과정에서 디자인의 품질을 향상시킬 수 있다.
일 측에 따르면, GUI를 용이하게 디자인할 수 있도록 보조하는 다양한 구성들을 복합적으로 제공할 수 있다.
일 측에 따르면, 사용자가 제작 중인 GUI 디자인에 대해 딥 러닝 기술을 활용하여 기 생성된 템플릿을 추천할 수 있다.
일 측에 따르면, 사용자가 제작 중인 GUI 디자인에서 사용자들의 집중도가 높은 영역을 실시간으로 알려줄 수 있다.
도 1은 일 실시예에 따른 디자인에 대한 피드백을 제공하는 방법을 나타낸 흐름도.
도 2는 일 실시예에 따른 디자인에 대한 피드백을 제공하는 과정을 설명하기 위한 도면.
도 3은 일 실시예에 따른 디자인 공간 및 피드백 공간을 설명하기 위한 도면.
도 4는 일 실시예에 따른 다양한 GUI 구조 정보를 도시한 도면.
도 5는 일 실시예에 따른 오토 인코더를 도시한 도면.
도 6은 일 실시예에 따른 GUI 데이터들, GUI 데이터들에 대응하는 정답(Ground Truth) 데이터들 및 이들에 의해 학습된 신경망들을 도시한 도면.
도 7은 일 실시예에 따른 신경망의 구조를 도시한 도면.
도 8은 일 실시예에 따른 평가 패널에 도시된 평가 피드백을 설명하기 위한 도면.
도 9는 일 실시예에 따른 추천 패널에 도시된 추천 목록에서의 사용자 선택에 대응하여 평가 패널의 스코어가 변경되는 것을 설명하기 위한 도면.
도 10은 일 실시예에 따른 집중 패널에 도시된 집중 피드백을 설명하기 위한 도면.
도 11은 일 실시예에 따른 추천 패널에 도시된 추천 피드백을 설명하기 위한 도면.
도 12는 일 실시예에 따른 디자인에 대한 피드백을 제공하는 장치의 블록도.
이하에서, 첨부된 도면을 참조하여 실시예들을 상세하게 설명한다. 각 도면에 제시된 동일한 참조 부호는 동일한 부재를 나타낸다.
아래 설명하는 실시예들에는 다양한 변경이 가해질 수 있다. 아래 설명하는 실시예들은 실시 형태에 대해 한정하려는 것이 아니며, 이들에 대한 모든 변경, 균등물 내지 대체물을 포함하는 것으로 이해되어야 한다.
실시예에서 사용한 용어는 단지 특정한 실시예를 설명하기 위해 사용된 것으로, 실시예를 한정하려는 의도가 아니다. 단수의 표현은 문맥상 명백하게 다르게 뜻하지 않는 한, 복수의 표현을 포함한다. 본 명세서에서, "포함하다" 또는 "가지다" 등의 용어는 명세서 상에 기재된 특징, 숫자, 단계, 동작, 생성 요소, 부품 또는 이들을 조합한 것이 존재함을 지정하려는 것이지, 하나 또는 그 이상의 다른 특징들이나 숫자, 단계, 동작, 생성 요소, 부품 또는 이들을 조합한 것들의 존재 또는 부가 가능성을 미리 배제하지 않는 것으로 이해되어야 한다.
다르게 정의되지 않는 한, 기술적이거나 과학적인 용어를 포함해서 여기서 사용되는 모든 용어들은 실시예가 속하는 기술 분야에서 통상의 지식을 가진 자에 의해 일반적으로 이해되는 것과 동일한 의미를 가지고 있다. 일반적으로 사용되는 사전에 정의되어 있는 것과 같은 용어들은 관련 기술의 문맥 상 가지는 의미와 일치하는 의미를 가지는 것으로 해석되어야 하며, 본 출원에서 명백하게 정의하지 않는 한, 이상적이거나 과도하게 형식적인 의미로 해석되지 않는다.
또한, 첨부 도면을 참조하여 설명함에 있어, 도면 부호에 관계없이 동일한 생성 요소는 동일한 참조 부호를 부여하고 이에 대한 중복되는 설명은 생략하기로 한다. 실시예를 설명함에 있어서 관련된 공지 기술에 대한 구체적인 설명이 실시예의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우 그 상세한 설명을 생략한다.
도 1은 일 실시예에 따른 디자인에 대한 피드백을 제공하는 방법을 나타낸 흐름도이다. 도 1을 참조하면, 일 실시예에 따른 디자인에 대한 피드백을 제공하는 장치(이하, '제공 장치')는 디자인 공간에서 생성된 디자인의 현재 상태(state)를 캡쳐(capture)한다(110). '디자인 공간'은 예를 들어, 모바일 GUI 디자인 툴에 의해 제공되는 GUI를 디자인하는 제작(생성) 공간일 수 있다. 디자인 공간의 일 예시는 아래 도 2의 디자인 공간(210) 또는 도 3의 (a)의 디자인 공간(310)을 참조할 수 있다. 또한, '디자인'은 예를 들어, 모바일 GUI 디자인일 수 있다. 디자인 공간에서 생성되는 디자인은 사용자 인터랙션(user interaction)에 대응하는 갱신될 수 있다. '디자인의 현재 상태'는 사용자의 인터랙션에 응답하여 디자인 공간에서 현재 시점(예를 들어, 캔버스(도 3의 330 참조)를 통해)에 보여지고 있는 디자인으로 이해될 수 있다.
제공 장치는 단계(120)에서 캡쳐한 현재 상태의 디자인으로부터, 현재 상태의 디자인에 대응하는 GUI(Graphic User Interface) 이미지 및 현재 상태의 디자인에 대응하는 HTML 요소를 포함하는 GUI 정보를 획득한다(120). 제공 장치는 디자인 공간에서 발생하는 사용자 인터랙션(user interaction)을 감지하여 GUI 이미지 및 HTML 요소를 획득할 수 있다. 또는 제공 장치는 사용자 인터랙션에 대응하여 갱신된 상태에 대응하는 HTML 요소 및 갱신된 상태에 대응하는 GUI 이미지 중 적어도 하나를 추출할 수 있다.
제공 장치는 GUI 정보를 기초로, 디자인에 대한 평가(evaluation), 집중(attention), 및 추천(recommendation) 중 적어도 하나를 포함하는 피드백을 제공한다(130). 평가, 집중 및 추천 각각의 피드백은 예를 들어, 피드백 공간(도 3의 (b) 참조)에서 평가, 집중 및 추천 각각에 대응하는 평가 패널(도 3의 (b)의 350 참조), 집중 패널(도 3의 (b)의 360 참조) 및 추천 패널(도 3의 (b)의 370 참조)을 통해 제공될 수 있다. 피드백으로 제공되는 평가는 예를 들어, 현재 상태의 디자인에 대한 시각적 복잡도(visual complexity)를 평가한 스코어(score)일 수 있다. 피드백으로 제공되는 집중은 집중 맵(attention map)일 수 있다. 또한, 피드백으로 제공되는 추천은 예를 들어, 현재 상태의 디자인에 대응하는 GUI 이미지에 유사한 유사 이미지들 및/또는 GUI 이미지와 무관한 무작위 이미지들에 해당하는 예제 템플릿들(example templates)을 포함하는 추천 목록일 수 있다. 단계(120)에서 갱신된 상태의 디자인에 대응하는 GUI 정보가 추출된 경우, 제공 장치는 갱신된 상태의 디자인에 대응하는 GUI 정보를 기초로 피드백을 제공할 수 있다. 제공 장치가 각각의 피드백을 제공하는 방법은 아래의 도 2를 참조하여 구체적으로 설명한다.
도 2는 일 실시예에 따른 디자인에 대한 피드백을 제공하는 과정을 설명하기 위한 도면이다. 도 2를 참조하면, 일 실시예에 따른 제공 장치가 디자인 공간(210)에서 캡쳐한 디자인의 현재 상태를 처리(230)하여 피드백 공간(250)을 통해 각각의 피드백으로 제공하는 과정이 도시된다. 피드백 공간(250)은 제공 장치의 피드백 결과를 시각화(visualization)하여 보여주는 공간에 해당할 수 있다.
제공 장치는 디자인 공간(210)에서 디자인의 현재 상태로부터 GUI 요소들(예를 들어, 높이(height), 폭(width), 유형(type) 등)을 포함하는 다양한 GUI 정보를 캡쳐할 수 있다. 보다 구체적으로, 제공 장치는 현재 상태의 디자인에 대응하는 GUI 이미지 및 현재 상태의 디자인에 대응하는 HTML 요소를 포함하는 GUI 정보를 획득할 수 있다.
제공 장치는 현재 상태의 디자인에 대응하는 GUI 이미지 및 HTML 요소를 기초로, 디자인의 시각적 복잡도를 평가하는 스코어를 산출하여 피드백할 수 있다. 제공 장치는 예를 들어, HTML 요소를 구문 분석하여 GUI 요소의 속성 및 주요 색상 중 적어도 하나를 추출할 수 있다. 제공 장치는 GUI 이미지, GUI 요소의 속성 및 주요 색상 중 적어도 하나를 기초로, 디자인의 시각적 복잡도를 평가하는 스코어를 산출할 수 있다. 제공 장치는 예를 들어, 아래의 수학식 1에 의해 스코어를 산출할 수 있다. 스코어(Bs)는 예를 들어, 1에 가까울수록 좋음을 나타내고, 0에 가까울수록 나쁨을 나타낼 수 있다.
Figure 112019001190139-pat00001
여기서,
Figure 112019001190139-pat00002
는 GUI 요소의 그룹당 수평 마진의 평균을 계산한 수치를 나타내고,
Figure 112019001190139-pat00003
는 GUI 요소의 그룹당 수직 마진의 평균을 계산한 수치를 나타낼 수 있다.
제공 장치는 산출한 스코어를 피드백 공간(250)에 도시된 평가 패널을 통해 제공할 수 있다. 평가 패널에 대하여는 아래의 도 3의 (b)의 평가 패널(350)을 참조하여 구체적으로 설명한다.
또는, 제공 장치는 HTML 요소를 구문 분석하여 디자인의 GUI 구조 정보를 추출할 수 있다. 제공 장치는 GUI 구조 정보를 기초로, GUI 이미지에 대응하는 예제 템플릿들을 포함하는 추천 목록을 생성할 수 있다. 제공 장치가 추천 목록을 생성하는 과정은 다음과 같다.
제공 장치는 예를 들어, GUI 구조 정보를 기초로 제1 특징 벡터를 추출할 수 있다. 제공 장치는 예를 들어, 아래의 도 5에 도시된 오토 인코더(Auto Encoder)를 이용하여 GUI 구조 정보로부터 제1 특징 벡터를 추출할 수 있다. 제공 장치는 미리 설정된 데이터 세트로부터 추출된 제2 특징 벡터들과 제1 특징 벡터를 매칭시킴으로써, 데이터 세트에 포함된 이미지들 중 GUI 이미지와 유사한 유사 이미지들을 검색할 수 있다. 제공 장치는 예를 들어, K- 최근접(k-nearest neighbor) 알고리즘을 이용하여 제2 특징 벡터들과 제1 특징 벡터를 매칭시킬 수 있다. 제공 장치는 매칭 결과를 기초로, 데이터 세트에 포함된 이미지들 중 GUI 이미지와 유사한 유사 이미지들을 검색할 수 있다. 제공 장치는 예를 들어, 매칭 결과에 따른 제1 특징 벡터와 제2 특징 벡터들 간의 유사도 점수들을 산출하고, 유사도 점수들을 기초로 유사 이미지들을 검색할 수 있다. 제공 장치는 유사 이미지들 및 GUI 이미지와 무관한 무작위 이미지들 중 적어도 하나를 포함하는 추천 목록을 생성할 수 있다. 이때, 제공 장치는 유사도 점수들을 기초로, 유사 이미지들을 정렬하고, 정렬된 유사 이미지들을 이용하여 추천 목록을 생성할 수 있다. 제공 장치는 생성한 추천 목록을 피드백 공간(250)에 도시된 추천 패널을 통해 제공할 수 있다. 추천 패널에 대하여는 아래의 도 3의 (b)의 추천 패널(360)을 참조하여 구체적으로 설명한다.
이 밖에도, 제공 장치는 GUI 이미지를 미리 학습된 신경망에 인가함으로써 GUI 이미지에서 사용자들의 집중을 유도할 것으로 기대되는 영역을 나타내는 히트 맵(heat map)을 생성할 수 있다. 제공 장치는 히트 맵을 GUI 이미지에 오버레이(overlay)하여 집중 맵을 생성하여 피드백할 수 있다. 제공 장치는 집중 맵을 피드백 공간(250)에 도시된 집중 패널을 통해 제공할 수 있다. 집중 패널에 대하여는 아래의 도 3의 (b)의 집중 패널(370)을 참조하여 구체적으로 설명한다.
도 3은 일 실시예에 따른 디자인 공간 및 피드백 공간을 설명하기 위한 도면이다. 도 3의 (a)를 참조하면, 일 실시예에 따른 디자인에 대응하는 썸네일 패널(Thumbnail Panel)(320), 캔버스(Canvas)(330) 및 요소 패널(Element Panel)(340)을 포함하는 디자인 공간(310)이 도시된다.
썸네일 패널(320)은 사용자가 생성한 디자인들의 썸네일 이미지들을 나타낼 수 있다. 캔버스(330)는 사용자가 디자인을 생성(제작)하는 창에 해당할 수 있다. 요소 패널(340)은 사용자가 캔버스(330)에서 생성 중인 디자인에 대하여 적용할 다양한 GUI 요소들을 포함할 수 있다. 사용자는 요소 패널(340)에 포함된 GUI 요소들 중 적어도 하나를 선택하여 캔버스(330)에 적용함으로써 생성 중인 디자인에 다양한 변화를 줄 수 있다.
일 실시예에 따른 제공 장치는 도 3의 (a)의 캔버스(330)에서 요소 패널(340)의 GUI 요소 선택에 의한 사용자 인터랙션이 발생하면, 피드백 공간에 포함된 각 패널들을 통해 사용자 인터랙션에 대응하는 피드백을 제공할 수 있다. 제공 장치는 도 3의 (a)의 디자인 공간(310)에서 발생하는 사용자 인터랙션을 감지하고, 사용자 인터랙션에 대응하는 디자인의 HTML 요소 및 GUI 이미지에 대한 피드백을 도 3의 (b)의 피드백 공간을 통해 실시간으로 제공할 수 있다.
제공 장치는 예를 들어, JavaScript에서 제공하는 Mutation Observer를 사용하여 HTML 변경 시에 사용자 인터랙션을 감지할 수 있다. 캔버스(330)에서 사용자 인터랙션이 발생하면, 캔버스(330)를 설명하는 내부 HTML 파일도 갱신될 수 있다. 제공 장치는 예를 들어, html2json 및 html2 캔버스 라이브러리를 사용하여 캔버스(330)에서 생성 중인 GUI 이미지와 함께 업데이트 된 HTML 파일(또는 HTML 요소)를 획득할 수 있다. 제공 장치는 HTML 파일(또는 HTML 요소)를 구문 분석하고 OpenCV를 사용하여 GUI 요소의 속성(예를 들어, 높이, 너비, 유형 등) 및 주요 색상을 추출할 수 있다. 주요 색상은 '지배적인 색상(dominant color)'이라고도 부를 수 있다. 제공 장치는 앞서 추출한 정보를 이용하여 복수의 평가 요소 별로 스코어를 산출할 수 있다. 제공 장치는 사용자 인터랙션 시에 GUI 이미지를 캡처하고 저장할 수 있다. 이때, 저장한 GUI 이미지는 도 7에 도시된 FCN-16 모델의 입력으로 사용될 수 있다.
도 3의 (b)를 참조하면, 평가 패널(350), 추천 패널(360) 및 집중 패널(370)을 포함하는 피드백 공간이 도시된다.
평가 패널(350)은 사용자들이 디자인을 제작하는 데 있어 자주 틀릴 수 있는 부분을 복수의 평가 요소들 각각에 대한 스코어를 통해 실시간으로 확인하고 수정할 수 있도록 평가 결과를 제공하는 패널일수 있다.
제공 장치는 디자인 공간(310)에서 생성된 디자인에 대응하는 GUI 이미지의 GUI 구조 정보를 바탕으로 평가를 수행할 수 있다. 제공 장치는 디자인 공간(310)으로부터 사용자가 생성 중인 GUI 이미지의 GUI 구조 정보를 받아와서 해당 디자인(해당 GUI 이미지)이 복수의 평가 요소들에 부합하는지를 평가할 수 있다. 제공 장치는 예를 들어, GUI 이미지, GUI 요소의 속성 및 주요 색상 중 적어도 하나가 미리 설정된 복수의 평가 요소들에 부합하는지를 여부를 기초로, 디자인의 시각적 복잡도(visual complexity)를 평가하는 스코어를 산출할 수 있다. 여기서, 복수의 평가 요소들은 예를 들어, 요소 밸런스(Element Balance), 정렬(Alignment), 폰트 사이즈 및 타입 단일성(Font Size and Type), 컬러 단일성Color Unity), 요소 사이즈(Element Size), 및 밀도(Density) 등을 포함할 수 있다. 제공 장치는 예를 들어, 색차(hue difference), 포화도(saturation), 밝기(휘도) 차이(brightness difference) 등의 요소들을 사용하여 아래의 수학식 2와 같이 지배적인(dominant) 색의 차이(ccm)를 구할 수 있다.
Figure 112019001190139-pat00004
여기서,
Figure 112019001190139-pat00005
는 두 색(c1,c2)의 Hue(색상) 차이를 나타내며,
Figure 112019001190139-pat00006
는 색상(H)의 최대값을 나타낸다.
Figure 112019001190139-pat00007
는 두 색(c1,c2)의 채도 차이를 나타내고,
Figure 112019001190139-pat00008
는 채도(S)의 최대값을 나타낸다. 또한,
Figure 112019001190139-pat00009
는 두 색(c1,c2)의 명도 차이를 나타내고,
Figure 112019001190139-pat00010
는 명도(V)의 최대값을 나타낸다. 이때, 색상(H), 명도(V), 채도(S)의 최대값은 HSV scale 따라 달라질 수 있다.
제공 장치는 수학식 2를 통해 구한 지배적인 색의 차이를 다른 요소들과 결합하여 아래의 수학식 3과 같이 컬러 단일성(Cs)을 평가할 수 있다.
Figure 112019001190139-pat00011
여기서,
Figure 112019001190139-pat00012
는 지배적인(dominant) 색의 개수를 나타내고,
Figure 112019001190139-pat00013
는 전체 어플리케이션 화면 중에서 가장 많은 numcs 개수를 나타내며,
Figure 112019001190139-pat00014
는 지배적인 색상의 평균 색상 조합 일치 정도를 나타낸다. 또한,
Figure 112019001190139-pat00015
는 현재 화면(hs)과 그 다음 화면(hs+1)의 색 히스토그램의 색조합 일치 정도를 나타낸다.
평가 패널(350)에서 복수의 평가 요소들 별 히스토그램에 표시된 빨간색 막대는 현재 사용자가 생성 중인 GUI 이미지의 평가 결과에 해당할 수 있다. 제공 장치는 다른 사용자들이 이전에 생성한 이미지들을 기초로 해당 사용자가 생성한 GUI 이미지를 평가한 결과를 히스토그램 분포로 나타냄으로써 사용자가 자신의 디자인에 대한 개선 방향을 찾는 데에 도움을 줄 수 있다.
추천 패널(360)은 디자인 공간(310)에서 생성된 GUI 이미지에 대응하는 예제 템플릿들(example templates)을 포함하는 추천 목록을 제공할 수 있다. 제공 장치는 디자인 공간(310)에서 생성된 GUI 이미지를 바탕으로 예를 들어, 아래의 도 4에 도시된 것과 같은 GUI 구조 정보를 추출할 수 있다. 제공 장치는 GUI 구조 정보를 도 5에 도시된 스택트 오토인코더(Stacked Auto Encoder; SAE) 및 K-최근접 알고리즘의 입력으로 인가할 수 있다. 이는 캔버스(330)에 도시된 현재 상태의 디자인에 대응하는 GUI 이미지와 유사한 예제를 추천하기 위한 것이다. K-최근접 알고리즘은 무차별 검색 알고리즘(brute search algorithm)과 코사인 거리 메트릭(cosine distance metric)으로 구현될 수 있다.
제공 장치는 캔버스(330)에 도시된 현재 상태의 디자인에 대응하는 GUI 이미지와 유사한 이미지(예제)를 추천하기 위해 아래의 도 4에 도시된 것과 같은 각각의 GUI 구조 정보를 이미지에 매핑시킬 수 있다. 이때, 색상을 선택하는데 있어서는 특별한 기준은 없고, 각 카테고리가 다른 색으로 매핑하는 것을 원칙으로 하여 단일 강도(intensity)로 칠해질 수 있다. 제공 장치는 이미지 검색에 자주 활용되는 스택트 오토인코더를 사용하여 이미지들 간의 유사 여부를 판단할 수 있다. 스택트 오토인코더의 동작은 아래의 도 5를 참조하여 구체적으로 설명한다.
하지만, 현재 상태의 디자인에 대응하는 GUI 이미지와 유사한 이미지(예제)를 찾아서 추천하다 보면 나중에는 결국 다 비슷한 이미지들만이 추천되어 디자인의 다양성을 훼손할 수 있다. 때문에 일 실시예에서는 현재 상태의 디자인과 무관한 무작위(Random) 이미지들을 새로운 이미지로 추천할 수 있다. 추천 목록에 포함된 유사한 이미지들과 구별하기 위해 무작위 이미지들에는 예를 들어,
Figure 112019001190139-pat00016
와 같은 시각적인 마크가 추가될 수 있다.
실시예에 따라서, 사용자는 추천 패널(360)을 통해 현재 추천된 예제 템플릿들 중 일부를 유지하고, 나머지 예제 템플릿들을 변경하고자 할 수 있다. 이 경우, 사용자는 추천 목록에서 선택한 일부 예제 템플릿을 고정시키거나, 또는 고정 해제시킬 수 있다. 사용자는 예를 들어, 추천 패널(360)에 도시된 PIN 버튼(
Figure 112019001190139-pat00017
)을 이용하여 고정시킬 일부 예제 템플릿을 선택할 수 있다.
또한, 추천 패널(360)은 예를 들어, OpenCV 라이브러리에서 생성된 색상 팔레트를 이용하여 지배적인 색상을 나열할 수 있다. 색상 팔레트는 예를 들어, 추천 패널(360)에 도시된 색상표
Figure 112019001190139-pat00018
와 같이 표현될 수 있다. 여기서, '지배적인 색상'은 추천 목록에 포함된 이미지들에서 가장 많이 사용된 색에 해당할 수 있다. 사용자가 추천 패널(360)에 포함된 예제 템플릿을 클릭하면, 선택한 예제 템플릿과 같은 방식으로 정렬된 요소가 캔버스(330) 영역에 채워질 수 있다. 이 기능을 사용하기 위해 제공 장치는 모든 예제 탬프릿들의 구조 정보를 미리 산출해 둘 수 있다.
집중 패널(370)은 사용자가 생성한 현재 상태의 디자인에서 사람들이 어디를 주목해서 볼 지를 예측해주는 패널이다. 집중 패널(370)은 디자인을 제작하는 사용자가 강조하고 싶은 부분을 강조할 수 있게끔 도와줄 수 있다. 제공 장치는 캔버스(330)에 도시된 디자인으로부터 캡쳐된 GUI 이미지를 신경망(예를 들어, 도 7에 도시된 집중 모델(FCN-16))에 입력할 수 있다.
도 4는 일 실시예에 따른 다양한 GUI 구조 정보를 도시한 도면이다. 도 4를 참조하면, 예를 들어, TextView, EditText, Button, ImageView, Image Button 등과 같은 다양한 GUI 구조 정보를 나타낸 화면들이 도시된다.
도 5는 일 실시예에 따른 오토 인코더를 도시한 도면이다. 도 5를 참조하면, 인코더(510) 및 디코더(530)를 포함하는 스택트 오토인코더(500)의 구조가 도시된다.
인코더(f)(510)는 입력 이미지(X)를 수신하고, 입력 이미지(X)로부터 특징 벡터(Feature Vector) Z를 추출할 수 있다. 디코더(g)(530)는 특징 벡터 Z를 입력받아 이미지 X'로 다시 복원할 수 있다. 이때, 입력 이미지 X는 GUI 구조 정보가 맵핑된 이미지일 수 있다. 스택트 오토인코더(500)는 GUI 구조 정보가 매핑된 이미지를 특징 벡터로 만들고 복원하는 학습을 통하여 원래 이미지 보다 적은 정보로 이미지를 표현할 수 있는 특징 벡터 Z를 생성할 수 있다. 인코더(f)(510)는 예를 들어, ReLu 활성화 함수를 사용하여 13,500 (90 × 50 × 3) 입력과 2048 차원과 256 차원의 두 개의 숨겨진 레이어가 있는 64 개의 출력 차원을 가질 수 있다. 디코더(g)(530)는 인코더(f)(510)의 아키텍처와 반대로 구성될 수 있다.
제공 장치는 스택트 오토인코더(500)를 이용하여 기존에 있던 이미지들을 포함하는 미리 설정된 데이터 세트로부터 특징 벡터들(예를 들어, 제2 특징 벡터들)을 미리 추출해 둘 수 있다. 제공 장치는 사용자가 디자인 공간에서 새로운 GUI 이미지를 생성하면, 생성된 GUI 이미지에 대응하는 특징 벡터(제1 특징 벡터)를 추출할 수 있다.
제공 장치는 K- 최근접 알고리즘을 이용하여 제2 특징 벡터들과 제1 특징 벡터를 매칭시키고, 매칭 결과를 기초로, 데이터 세트에 포함된 이미지들 중 GUI 이미지와 유사한 유사 이미지들을 검색할 수 있다. 이때 유사도가 높은 순서대로 추천 패널에 이미지들이 표시될 수 있다.
도 6은 일 실시예에 따른 GUI 데이터들, GUI 데이터들에 대응하는 정답(Ground Truth) 데이터들 및 이들에 의해 학습된 신경망들을 도시한 도면이다. 도 6을 참조하면, 일 실시예에 따른 GUI 데이터들(610), GUI 데이터들(610) 중 사용자들이 어디를 집중해서 보는지를 맵핑해 놓은 정답 데이터들(620) 및 GUI 데이터들(610)과 정답 데이터들(620)에 의해 미리 학습된 신경망들(630)이 도시된다. 미리 학습된 신경망들(630)은 예를 들어, FCN-32s, FCN-16s, 및 FCN-8s 등과 같이 컨볼루션 레이어들(Convolution layers)을 포함하는 신경망 모델일 수 있다.
제공 장치는 미리 학습된 신경망들(630)을 이용하여 현재 생성된 GUI 이미지에서 사용자들이 어느 부분(또는 어느 영역)에 집중할 지를 예측할 수 있다.
도 7은 일 실시예에 따른 신경망의 구조를 도시한 도면이다. 도 7을 참조하면, 일 실시예에 따라 미리 학습된 신경망(700)이 도시된다. 신경망(700)은 예를 들어, FCN-16s 집중 모델을 포함할 수 있다.
신경망(700)은 디자인 공간의 캔버스에 생성된 디자인으로부터 캡쳐된 GUI 이미지를 수신할 수 있다. 신경망(700)은 예를 들어, 픽셀 값 0에서 255까지의 히트 맵을 생성하기 위해 그래픽 디자인 중요성(GDI) 데이터 세트로 미리 트레이닝될 수 있다.
FCN-32s는 입력된 GUI 이미지의 1/32에서 32배만큼 업샘플링(upsample)한 결과에 해당하고, FCN-16s는 pool5의 결과를 2배 업샘플링한 것과 pool4의 결과를 합친 것에 해당할 수 있다.
도 8은 일 실시예에 따른 평가 패널에 도시된 평가 피드백을 설명하기 위한 도면이다. 도 8을 참조하면, 디자인 공간의 캔버스(810)에서 생성된 디자인에 대한 사용자 인터랙션에 대응하여 평가 패널(830)에서 제공되는 복수의 평가 요소들 별 평가 피드백이 도시된다.
이때, 복수의 평가 요소들은 요소 밸런스, 정렬, 폰트 사이즈 및 타입, 컬러 단일성, 요소 사이즈, 및 밀도를 포함할 수 있다. 복수의 평가 요소들 별 평가 피드백은 붉은 색 막대로 표시될 수 있다.
요소 밸런스는 사용자에 의해 선택된 GUI 요소의 전반적인 대칭, 균형 잡힌 요소 분포(예를 들어, 요소들 간의 일관된 공간(consistent space)) 및 요소의 왜곡을 나타낼 수 있다. 요소 밸런스의 최고 스코어는 예를 들어, 1.0 일 수 있다.
정렬은 GUI 요소 간의 정렬 결과를 나타낼 수 있다. 제공 장치는 스코어 산출 시에 3 개의 수직선(왼쪽, 가운데, 오른쪽)과 3 개의 수평선(상단, 중간, 수평선)을 그려 해당 GUI 요소에 대한 정렬 점수를 산출할 수 있다. 정렬의 최고 스코어는 예를 들어, 1.0 일 수 있다.
컬러 단일성은 지배적인 색상(dominant color)과 비지배적인 색상(nondominant color)의 비율을 측정하여 색상 사용 결과를 나타낼 수 있다. 컬러 단일성의 최고 스코어는 1.0일 수 있다.
폰트 사이즈 및 타입은 텍스트의 글꼴 크기 및 유형의 일관성을 나타낼 수 있다. 폰트 사이즈 및 타입의 최고 스코어는 1.0일 수 있다.
요소 사이즈는 모바일 인터페이스에서 GUI 요소가 지나치게 작거나 큰지 여부를 확인하기 위한 것입니다. 0.5보다 작은 점수는 작은 원소를 의미하고, 0.5보다 큰 점수는 큰 원소의 이온 평균(ion average)을 의미합니다. 요소 사이즈의 최고 스코어는 0.5일 수 있다.
밀도는 해당 GUI 요소가 디자인 공간에서 얼마나 많은 공간(영역)을 차지하는지를 나타낼 수 있다. 예를 들어, 0.5 미만의 점수는 설계의 단순성으로 해석되지만, 큰 점수는 과도하게 배치된 설계를 의미할 수 있다. 밀도의 최고 스코어는 예를 들어, 0.5일 수 있다.
제공 장치는 평가 패널(830)에서 RICO 데이터 세트의 예제 점수뿐만 아니라 전술한 여섯 가지 시각적 복잡성 평가 요소에 대한 점수와 현재 디자인에 대한 전체 평가 점수를 제공할 수 있다.
현재 디자인에 대한 전체 평가 점수는 예를 들어, 요소 밸런스, 정렬, 폰트 사이즈 및 타입, 및 컬러 단일성에 대한 점수의 평균일 수 있다. 일 실시예에서는 최고 스코어가 0.5인 요소 크기 및 밀도 점수를 전체 평가 점수에서 제외하여 사용자가 RICO 데이터 세트와 비교되는 현재 상태의 디자인의 강점과 약점을 이해할 수 있도록 하였다.
예를 들어, 사용자가 디자인 공간의 요소 패널에서 버튼 요소(button element)를 드래그하여 캔버스(810)로 옮겨 놓으면, 평가 패널(830)은 사용자 인터랙션에 대응하여 새로이 계산된 스코어를 업데이트함으로써 캔버스(810)에 버튼을 옮겨 놓은 디자인에 대한 피드백을 제공할 수 있다. 현재 디자인에 대응하는 스코어는 평가 패널(830)에서 각 평가 요소들 별로 빨간색 막대로 표시될 수 있다.
도 9는 일 실시예에 따른 추천 패널에 도시된 추천 목록에서의 사용자 선택에 대응하여 평가 패널의 스코어가 변경되는 것을 설명하기 위한 도면이다. 예를 들어, 사용자가 추천 패널에서 나타난 어느 하나의 예제 템플릿들을 가리키면, 아래의 도 9에 도시된 것과 같이 사용자가 선택한 예제 템플릿들에 대한 복수의 평가 요소들 별 스코어가 평가 패널에서 검은 색 막대(910)로 표시될 수 있다.
도 10은 일 실시예에 따른 집중 패널에 도시된 집중 피드백을 설명하기 위한 도면이다. 도 10을 참조하면, 디자인 공간의 캔버스(1010)에 주어진 GUI 디자인에서 사용자들의 집중을 유도할 것으로 기대되는 위치를 나타내는 히트 맵이 오버레이된 집중 맵을 도시한 집중 패널(1030)이 도시된다.
히트 맵에는 예를 들어, 파란색, 녹색, 노란색, 및 빨간색 등의 색상이 선형적으로 분포될 수 있으며, 예를 들어, 빨간색은 가장 높은 집중(또는 관심)을 받을 영역을 나타낼 수 있다. 히트 맵에서 빨간색에 가까운 색상이 나타날수록, 집중 맵에서 해당 요소의 중요성이 높아질 수 있다. 히트 맵에 따라 사용자는 시청자의 관심을 유도할 위치를 기대할 수 있다.
사용자(개발자)는 집중 패널(1030)에 도시된 집중 맵을 통해 원래 디자인을 수정하여 예상 시청자의 주의를 분산시킬 수 있다. 예를 들어, 집중 패널(1030)에서 텍스트 필드가 의도하지 않게 너무 많은 관심을 받는 경우, 사용자는 캔버스(1010)에서 텍스트의 위치나 크기를 변경하여 관심을 더 중요한 영역으로 유도할 수 있다.
도 11은 일 실시예에 따른 추천 패널에 도시된 추천 피드백을 설명하기 위한 도면이다. 도 11을 참조하면, 디자인 공간의 캔버스(1110)에 주어진 GUI 디자인에 대응하는 예제 템플릿들을 포함하는 추천 목록을 도시한 추천 패널(1130)이 도시된다.
추천 패널(1130)을 통해 GUI 이미지와 유사한 유사 이미지들 및 GUI 이미지와 무관한 무작위 이미지들을 추천하기 위해, 제공 장치는 예를 들어, RICO 데이터 세트를 이용하여 풀(pool)을 생성할 수 있다. RICO 데이터 세트는 72,219 개의 모바일 응용 프로그램 GUI 스크린 샷(GUI screenshots), 메타 데이터(meta data) 및 요소 계층 정보(element hierarchy information) 등을 포함할 수 있다. RICO 데이터 세트는 예를 들어, 평균 평점(average rating), 설치(installs) 및 다운로드(downloads) 횟수, 앱 마켓 플레이스(app market place)에 할당된 카테고리(category) 등 애플리케이션(applications)의 메타 데이터를 포함할 수 있다. 이때, 모바일 응용 프로그램 GUI 스크린 샷(GUI screenshots)에서 예를 들어 사진을 찍을 때 찍은 사용자의 얼굴, 모바일 앱 내의 지도 기능의 스크린 샷, 게임, 광고 스크린 샷과 같은 GUI 디자인과 무관한 스크린 샷은 배제될 수 있다.
도 12는 일 실시예에 따른 디자인에 대한 피드백을 제공하는 장치의 블록도이다. 도 12를 참조하면, 일 실시예에 따른 디자인에 대한 피드백을 제공하는 장치('제공 장치')(1200)는 적어도 하나의 프로세서(1210), 메모리(1230), 및 통신 인터페이스(1250)를 포함할 수 있다. 적어도 하나의 프로세서(1210), 메모리(1230), 및 통신 인터페이스(1250)는 통신 버스(1205)를 통해 서로 통신할 수 있다.
적어도 하나의 프로세서(1210)는 디자인 공간에서 생성된 디자인의 현재 상태를 캡쳐한다. 적어도 하나의 프로세서(1210)는 현재 상태의 디자인으로부터, 현재 상태의 디자인에 대응하는 GUI 이미지 및 현재 상태의 디자인에 대응하는 HTML 요소를 포함하는 GUI 정보를 획득한다. 적어도 하나의 프로세서(1210)는 GUI 정보를 기초로, 디자인에 대한 평가, 집중, 및 추천 중 적어도 하나를 포함하는 피드백을 제공한다. 적어도 하나의 프로세서(1210)는 HTML 요소를 구문 분석하여 GUI 요소의 속성 및 주요 색상 중 적어도 하나를 추출할 수 있다. 적어도 하나의 프로세서(1210)는 GUI 이미지, GUI 요소의 속성 및 주요 색상 중 적어도 하나를 기초로 디자인의 시각적 복잡도를 평가하는 스코어를 산출할 수 있다. 적어도 하나의 프로세서(1210)는 스코어를 피드백할 수 있다.
적어도 하나의 프로세서(1210)는 HTML 요소를 구문 분석하여 디자인의 GUI 구조 정보를 추출할 수 있다. 적어도 하나의 프로세서(1210)는 GUI 구조 정보를 기초로 GUI 이미지에 대응하는 예제 템플릿들을 포함하는 추천 목록을 생성할 수 있다. 적어도 하나의 프로세서(1210)는 추천 목록을 피드백할 수 있다.
적어도 하나의 프로세서(1210)는 GUI 이미지를 미리 학습된 신경망에 인가함으로써 GUI 이미지에서 사용자들의 집중을 유도할 것으로 기대되는 위치를 나타내는 히트 맵을 생성할 수 있다. 적어도 하나의 프로세서(1210)는 히트 맵을 GUI 이미지에 오버레이하여 집중 맵을 생성할 수 있다. 적어도 하나의 프로세서(1210)는 집중 맵을 피드백할 수 있다.
적어도 하나의 프로세서(1210)는 디자인 공간에서 발생하는 사용자 인터랙션을 감지할 수 있다. 적어도 하나의 프로세서(1210)는 사용자 인터랙션에 대응하여 갱신된 상태의 디자인에 대응하는 GUI 정보를 추출할 수 있다. 적어도 하나의 프로세서(1210)는 갱신된 상태의 디자인에 대응하는 GUI 정보를 기초로, 피드백을 제공할 수 있다.
이 밖에도, 적어도 하나의 프로세서(1210)는 도 1 내지 도 11에서 제공 장치(1200)와 관련하여 기술된 동작들 중 어느 하나 또는 이들의 조합을 실행할 수 있다. 적어도 하나의 프로세서(1210)에 의하여 실행되는 프로그램 코드는 메모리(1230)에 저장될 수 있다.
메모리(1230)는 적어도 하나의 프로세서(1210)에 의해 캡쳐된 디자인의 현재 상태를 저장할 수 있다. 메모리(1230)는 휘발성 메모리 또는 비 휘발성 메모리일 수 있다. 메모리(1230)는 예를 들어, 적어도 하나의 프로세서(1210)에 의해 실행될 때, 적어도 하나의 프로세서(1210)가 도 1 내지 도 11과 관련하여 설명하는 과정들 중 어느 하나 또는 이들의 조합을 실행하도록 하는 명령어들을 저장할 수 있다.
통신 인터페이스(1250)는 적어도 하나의 프로세서(1210)가 제공하는 피드백을 제공 장치의 외부로 출력할 수 있다.
본 발명의 일 실시예에 따른 방법은 다양한 컴퓨터 수단을 통하여 실행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다. 상기 컴퓨터 판독 가능 매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 상기 매체에 기록되는 프로그램 명령은 본 발명을 위하여 특별히 설계되고 생성된 것들이거나 컴퓨터 소프트웨어 당업자에게 공지되어 사용 가능한 것일 수도 있다. 컴퓨터 판독 가능 기록 매체의 예에는 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체(magnetic media), CD-ROM, DVD와 같은 광기록 매체(optical media), 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 롬(ROM), 램(RAM), 플래시 메모리 등과 같은 프로그램 명령을 저장하고 실행하도록 특별히 생성된 하드웨어 장치가 포함된다. 프로그램 명령의 예에는 컴파일러에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드를 포함한다. 상기된 하드웨어 장치는 본 발명의 동작을 실행하기 위해 하나 이상의 소프트웨어 모듈로서 작동하도록 생성될 수 있으며, 그 역도 마찬가지이다.
이상과 같이 본 발명은 비록 한정된 실시예와 도면에 의해 설명되었으나, 본 발명은 상기의 실시예에 한정되는 것은 아니며, 본 발명이 속하는 분야에서 통상의 지식을 가진 자라면 이러한 기재로부터 다양한 수정 및 변이가 가능하다. 그러므로, 본 발명의 범위는 설명된 실시예에 국한되어 정해져서는 아니되며, 후술하는 특허청구범위 뿐만 아니라 이 특허청구범위와 균등한 것들에 의해 정해져야 한다.
1200: 제공 장치
1205: 통신 버스
1230: 메모리
1210: 프로세서
1250: 통신 인터페이스

Claims (20)

  1. 디자인에 대한 피드백을 제공하는 장치가 상기 디자인에 대한 상기 피드백을 제공하는 방법에 있어서,
    디자인 공간에서 생성된 디자인의 현재 상태(state)를 캡쳐(capture)하는 단계;
    상기 현재 상태의 디자인에 대응하는 GUI(Graphic User Interface) 이미지 및 상기 현재 상태의 디자인에 대응하는 HTML 요소를 포함하는 GUI 정보를 획득하는 단계; 및
    상기 GUI 정보를 기초로, 상기 디자인에 대한 평가(evaluation), 집중(attention), 및 추천(recommendation) 중 적어도 하나를 포함하는 피드백을 제공하는 단계
    를 포함하고,
    상기 피드백을 제공하는 단계는
    상기 HTML 요소를 구문 분석하여 상기 디자인 공간에서 생성된 상기 GUI 이미지의 GUI 구조 정보를 추출하는 단계;
    상기 GUI 구조 정보를 기초로, 상기 GUI 이미지에 대응하는 예제 템플릿들(example templates)을 포함하는 추천 목록을 생성하는 단계; 및
    상기 추천 목록을 피드백하는 단계
    를 포함하는, 디자인에 대한 피드백을 제공하는 방법.
  2. 제1항에 있어서,
    상기 피드백을 제공하는 단계는
    상기 GUI 이미지 및 상기 HTML 요소를 기초로, 상기 디자인의 시각적 복잡도(visual complexity)를 평가하는 스코어(score)를 산출하는 단계; 및
    상기 스코어를 피드백하는 단계
    를 포함하는, 디자인에 대한 피드백을 제공하는 방법.
  3. 제2항에 있어서,
    상기 스코어를 산출하는 단계는
    상기 HTML 요소를 구문 분석하여 GUI 요소의 속성 및 주요 색상 중 적어도 하나를 추출하는 단계; 및
    상기 GUI 이미지, 상기 GUI 요소의 속성 및 상기 주요 색상 중 적어도 하나를 기초로, 상기 디자인의 시각적 복잡도를 평가하는 스코어(score)를 산출하는 단계
    를 포함하는, 디자인에 대한 피드백을 제공하는 방법.
  4. 제3항에 있어서,
    상기 스코어를 산출하는 단계는
    상기 GUI 이미지, 상기 GUI 요소의 속성 및 상기 주요 색상 중 적어도 하나가 미리 설정된 복수의 평가 요소들에 부합하는지를 여부를 기초로, 상기 스코어를 산출하는 단계
    를 포함하는, 디자인에 대한 피드백을 제공하는 방법.
  5. 제4항에 있어서,
    상기 복수의 평가 요소들은
    요소 밸런스(Element Balance), 정렬(Alignment), 폰트 사이즈 및 타입 단일성(Font Size and Type), 컬러 단일성Color Unity), 요소 사이즈(Element Size), 및 밀도(Density) 중 적어도 하나를 포함하는, 디자인에 대한 피드백을 제공하는 방법.
  6. 삭제
  7. 제1항에 있어서,
    상기 추천 목록을 생성하는 단계는
    상기 GUI 구조 정보를 기초로 제1 특징 벡터를 추출하는 단계;
    미리 설정된 데이터 세트로부터 추출된 제2 특징 벡터들과 상기 제1 특징 벡터를 매칭시킴으로써, 상기 데이터 세트에 포함된 이미지들 중 상기 GUI 이미지와 유사한 유사 이미지들을 검색하는 단계; 및
    상기 유사 이미지들 및 상기 GUI 이미지와 무관한 무작위 이미지들 중 적어도 하나를 포함하는 추천 목록을 생성하는 단계
    를 포함하는, 디자인에 대한 피드백을 제공하는 방법.
  8. 제7항에 있어서,
    상기 제1 특징 벡터를 추출하는 단계는
    오토 인코더(Auto Encoder)를 이용하여 상기 GUI 구조 정보로부터 상기 제1 특징 벡터를 추출하는 단계
    를 포함하는, 디자인에 대한 피드백을 제공하는 방법.
  9. 제7항에 있어서,
    상기 유사 이미지들을 검색하는 단계는
    K- 최근접(k-nearest neighbor) 알고리즘을 이용하여 상기 제2 특징 벡터들과 상기 제1 특징 벡터를 매칭시키는 단계; 및
    상기 매칭 결과를 기초로, 상기 데이터 세트에 포함된 이미지들 중 상기 GUI 이미지와 유사한 유사 이미지들을 검색하는 단계
    를 포함하는, 디자인에 대한 피드백을 제공하는 방법.
  10. 제7항에 있어서,
    상기 유사 이미지들을 검색하는 단계는
    상기 매칭 결과에 따른 상기 제1 특징 벡터와 상기 제2 특징 벡터들 간의 유사도 점수들을 산출하는 단계;
    상기 유사도 점수들을 기초로, 상기 유사 이미지들을 검색하는 단계
    를 포함하는, 디자인에 대한 피드백을 제공하는 방법.
  11. 제10항에 있어서,
    상기 추천 목록을 생성하는 단계는
    상기 유사도 점수들을 기초로, 상기 유사 이미지들을 정렬하는 단계; 및
    상기 정렬된 유사 이미지들을 이용하여 상기 추천 목록을 생성하는 단계
    를 포함하는, 디자인에 대한 피드백을 제공하는 방법.
  12. 제1항에 있어서,
    상기 피드백을 제공하는 단계는
    상기 GUI 이미지를 미리 학습된 신경망에 인가함으로써 상기 GUI 이미지에서 사용자들의 집중을 유도할 것으로 기대되는 위치를 나타내는 히트 맵(heat map)을 생성하는 단계;
    상기 히트 맵을 상기 GUI 이미지에 오버레이(overlay)하여 집중 맵(attention map)을 생성하는 단계; 및
    상기 집중 맵을 피드백하는 단계
    를 포함하는, 디자인에 대한 피드백을 제공하는 방법.
  13. 제1항에 있어서,
    상기 GUI 정보를 획득하는 단계는
    상기 디자인 공간에서 발생하는 사용자 인터랙션(user interaction)을 감지하는 단계; 및
    상기 사용자 인터랙션에 대응하여 갱신된 상태에 대응하는 HTML 요소 및 상기 갱신된 상태에 대응하는 GUI 이미지 중 적어도 하나를 추출하는 단계
    를 포함하는, 디자인에 대한 피드백을 제공하는 방법.
  14. 제13항에 있어서,
    상기 피드백을 제공하는 단계는
    상기 갱신된 상태의 디자인에 대응하는 GUI 정보를 기초로, 상기 피드백을 제공하는 단계
    를 포함하는, 디자인에 대한 피드백을 제공하는 방법.
  15. 하드웨어와 결합되어 제1항 내지 제5항 및 제7항 내지 제14항 중 어느 하나의 항의 방법을 실행시키기 위하여 컴퓨터 판독 가능한 기록 매체에 저장된 컴퓨터 프로그램.
  16. 디자인 공간에서 생성된 디자인의 현재 상태를 캡쳐하고, 상기 현재 상태의 디자인에 대응하는 GUI 이미지 및 상기 현재 상태의 디자인에 대응하는 HTML 요소를 포함하는 GUI 정보를 획득하며, 상기 GUI 정보를 기초로, 상기 디자인에 대한 평가, 집중, 및 추천 중 적어도 하나를 포함하는 피드백을 제공하는 적어도 하나의 프로세서
    를 포함하고,
    상기 프로세서는
    상기 HTML 요소를 구문 분석하여 상기 디자인 공간에서 생성된 상기 GUI 이미지의 GUI 구조 정보를 추출하고, 상기 GUI 구조 정보를 기초로, 상기 GUI 이미지에 대응하는 예제 템플릿들을 포함하는 추천 목록을 생성하며, 상기 추천 목록을 피드백하는, 디자인에 대한 피드백을 제공하는 장치.
  17. 제16항에 있어서,
    상기 프로세서는
    상기 HTML 요소를 구문 분석하여 GUI 요소의 속성 및 주요 색상 중 적어도 하나를 추출하고, 상기 GUI 이미지, 상기 GUI 요소의 속성 및 상기 주요 색상 중 적어도 하나를 기초로 상기 디자인의 시각적 복잡도를 평가하는 스코어를 산출하며, 상기 스코어를 피드백하는, 디자인에 대한 피드백을 제공하는 장치.
  18. 삭제
  19. 제16항에 있어서,
    상기 프로세서는
    상기 GUI 이미지를 미리 학습된 신경망에 인가함으로써 상기 GUI 이미지에서 사용자들의 집중을 유도할 것으로 기대되는 위치를 나타내는 히트 맵을 생성하고, 상기 히트 맵을 상기 GUI 이미지에 오버레이하여 집중 맵을 생성하며, 상기 집중 맵을 피드백하는, 디자인에 대한 피드백을 제공하는 장치.
  20. 제16항에 있어서,
    상기 프로세서는
    상기 디자인 공간에서 발생하는 사용자 인터랙션을 감지하고, 상기 사용자 인터랙션에 대응하여 갱신된 상태의 디자인에 대응하는 GUI 정보를 추출하고, 상기 갱신된 상태의 디자인에 대응하는 GUI 정보를 기초로, 상기 피드백을 제공하는, 디자인에 대한 피드백을 제공하는 장치.
KR1020190001190A 2019-01-04 2019-01-04 Gui 디자인에 대한 피드백을 제공하는 방법 및 장치 KR102225356B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020190001190A KR102225356B1 (ko) 2019-01-04 2019-01-04 Gui 디자인에 대한 피드백을 제공하는 방법 및 장치

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020190001190A KR102225356B1 (ko) 2019-01-04 2019-01-04 Gui 디자인에 대한 피드백을 제공하는 방법 및 장치

Publications (2)

Publication Number Publication Date
KR20200092452A KR20200092452A (ko) 2020-08-04
KR102225356B1 true KR102225356B1 (ko) 2021-03-09

Family

ID=72048818

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020190001190A KR102225356B1 (ko) 2019-01-04 2019-01-04 Gui 디자인에 대한 피드백을 제공하는 방법 및 장치

Country Status (1)

Country Link
KR (1) KR102225356B1 (ko)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US11010281B1 (en) * 2020-10-12 2021-05-18 Coupang Corp. Systems and methods for local randomization distribution of test datasets
KR102424342B1 (ko) * 2020-11-24 2022-07-25 울산과학기술원 섬네일 이미지 생성 방법 및 장치
KR102527572B1 (ko) * 2022-12-20 2023-05-02 주식회사 유니온플레이스 인공 지능을 이용한 코드 생성 방법

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2010218303A (ja) * 2009-03-17 2010-09-30 Nec Corp Ｇｕｉ評価結果提示装置、ｇｕｉ評価結果提示方法およびｇｕｉ評価結果提示プログラム
WO2014147923A1 (ja) * 2013-03-19 2014-09-25 Ｎｅｃソリューションイノベータ株式会社 ユーザビリティチェック結果出力方法、装置およびプログラム
JP2015049661A (ja) * 2013-08-30 2015-03-16 Kddi株式会社 操作性評価尺度に基づくｇｕｉ変換プログラム、装置及びｇｕｉ変換方法
JP2015230512A (ja) * 2014-06-03 2015-12-21 東芝テック株式会社 ユーザインタフェース画面作成支援システム

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100660290B1 (ko) 2005-04-11 2006-12-20 에스케이 텔레콤주식회사 무선 인터넷 사용자 인터페이스를 위한 메뉴 네비게이션방법
US7765020B2 (en) * 2007-05-04 2010-07-27 Applied Materials, Inc. Graphical user interface for presenting multivariate fault contributions

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2010218303A (ja) * 2009-03-17 2010-09-30 Nec Corp Ｇｕｉ評価結果提示装置、ｇｕｉ評価結果提示方法およびｇｕｉ評価結果提示プログラム
WO2014147923A1 (ja) * 2013-03-19 2014-09-25 Ｎｅｃソリューションイノベータ株式会社 ユーザビリティチェック結果出力方法、装置およびプログラム
JP2015049661A (ja) * 2013-08-30 2015-03-16 Kddi株式会社 操作性評価尺度に基づくｇｕｉ変換プログラム、装置及びｇｕｉ変換方法
JP2015230512A (ja) * 2014-06-03 2015-12-21 東芝テック株式会社 ユーザインタフェース画面作成支援システム

Also Published As

Publication number Publication date
KR20200092452A (ko) 2020-08-04

Similar Documents

Publication Publication Date Title
CN109618222B (zh) 一种拼接视频生成方法、装置、终端设备及存储介质
US8508546B2 (en) Image mask generation
CN109803180B (zh) 视频预览图生成方法、装置、计算机设备及存储介质
KR102225356B1 (ko) Gui 디자인에 대한 피드백을 제공하는 방법 및 장치
Liang et al. Objective quality prediction of image retargeting algorithms
US11282163B2 (en) Method for converting landscape video to portrait mobile layout using a selection interface
CN107862315A (zh) 字幕提取方法、视频搜索方法、字幕分享方法及装置
US11068746B2 (en) Image realism predictor
CN101536078A (zh) 改进图像蒙板
US20140044359A1 (en) Landmark Detection in Digital Images
US11468571B2 (en) Apparatus and method for generating image
JP2007052575A (ja) メタデータ付与装置およびメタデータ付与方法
WO2023056835A1 (zh) 视频封面生成方法、装置、电子设备及可读介质
JP6280703B2 (ja) 色彩デザイン評価装置、及び、色彩デザイン評価方法
CN115393837A (zh) 图像检测方法、设备和存储介质
Chen et al. UI layers merger: merging UI layers via visual learning and boundary prior
EP3779672A1 (en) System and method for generating unified experiences on digital platforms
CN112150347A (zh) 从有限的修改后图像集合中学习的图像修改样式
CN115063800B (zh) 文本识别方法和电子设备
CN116980549A (zh) 视频帧处理方法、装置、计算机设备和存储介质
KR20190028015A (ko) 딥 러닝 기반 영상 처리를 이용한 증강 현실 광고 제공 시스템 및 방법
CN110675308B (zh) 字符验证方法、装置、计算机设备及存储介质
CN114003160A (zh) 数据可视化展示方法、装置、计算机设备和存储介质
CN112633103A (zh) 图像处理方法、装置和电子设备
CN115171198B (zh) 模型质量评估方法、装置、设备及存储介质

Legal Events

Date Code Title Description
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant