KR102640326B1 - 어플리케이션 gui 레퍼런스 장치 및 그 장치의 구동방법 - Google Patents
어플리케이션 gui 레퍼런스 장치 및 그 장치의 구동방법 Download PDFInfo
- Publication number
- KR102640326B1 KR102640326B1 KR1020230111395A KR20230111395A KR102640326B1 KR 102640326 B1 KR102640326 B1 KR 102640326B1 KR 1020230111395 A KR1020230111395 A KR 1020230111395A KR 20230111395 A KR20230111395 A KR 20230111395A KR 102640326 B1 KR102640326 B1 KR 102640326B1
- Authority
- KR
- South Korea
- Prior art keywords
- image data
- application
- app
- screen
- application gui
- Prior art date
Links
- 238000000034 method Methods 0.000 title claims abstract description 25
- 238000013461 design Methods 0.000 claims abstract description 56
- 238000004458 analytical method Methods 0.000 claims abstract description 11
- 239000003086 colorant Substances 0.000 claims description 22
- 230000008859 change Effects 0.000 claims description 6
- 230000000007 visual effect Effects 0.000 claims description 6
- 238000001514 detection method Methods 0.000 claims description 4
- 230000006854 communication Effects 0.000 description 37
- 238000004891 communication Methods 0.000 description 36
- 230000006870 function Effects 0.000 description 13
- 230000008569 process Effects 0.000 description 13
- 238000010586 diagram Methods 0.000 description 11
- 238000007405 data analysis Methods 0.000 description 5
- 238000012545 processing Methods 0.000 description 5
- 238000011161 development Methods 0.000 description 4
- 230000008901 benefit Effects 0.000 description 3
- 238000004590 computer program Methods 0.000 description 3
- 238000010276 construction Methods 0.000 description 3
- 238000010191 image analysis Methods 0.000 description 3
- 238000013473 artificial intelligence Methods 0.000 description 2
- 239000011521 glass Substances 0.000 description 2
- 239000000203 mixture Substances 0.000 description 2
- 230000009897 systematic effect Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000007635 classification algorithm Methods 0.000 description 1
- 238000010835 comparative analysis Methods 0.000 description 1
- 238000013136 deep learning model Methods 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000007774 longterm Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 239000000463 material Substances 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 210000000707 wrist Anatomy 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
본 발명은 어플리케이션 GUI 레퍼런스 장치 및 그 장치의 구동방법에 관한 것으로서, 본 발명의 실시예에 따른 어플리케이션 GUI 레퍼런스 장치는, 어플리케이션이 실행될 때 실행 화면과 관련한 이미지 데이터를 어플리케이션의 카테고리별로 그룹화하여 저장하는 저장부, 및 그룹화하여 저장한 각 어플리케이션의 이미지 데이터에 대한 분석 결과를 근거로 복수의 메뉴 항목별로 자동 분류하여 이미지 데이터를 재저장하며, 디자이너나 프로그램 개발자의 사용자 단말장치에서 선택하는 지정 메뉴에 상응하는 어플리케이션별 이미지 데이터를 디자인 리소스로서 제공하는 제어부를 포함할 수 있다.
Description
본 발명은 어플리케이션 GUI 레퍼런스 장치 및 그 장치의 구동방법에 관한 것으로서, 더 상세하게는 가령 웹 사이트를 제작하는 디자이너나 개발자들에게 실제 어플리케이션의 인터페이스 디자인을 보여주는 레퍼런스 사이트로서 동작할 수 있는 어플리케이션 GUI 레퍼런스 장치 및 그 장치의 구동방법에 관한 것이다.
일반적으로, 웹 디자인이란 인터넷상에 존재하는 홈페이지의 레이아웃(layout)이나 색상 등 홈페이지의 그래픽적 요소와 관련된 것을 의미한다. 최근 인터넷에는 수많은 홈페이지들이 존재하며, 계속해서 증가하고 있는 추세이다. 디자인 작업을 자주 하는 개인 또는 팀의 구성원은 자신이 선호하거나 혹은 회사 업무 등 기타 사유로 자주 사용해야 하는 디자인 요소가 존재한다. 그리고, 이러한 즐겨 찾는 요소의 일부 내용만 변경하여 계속 사용하거나, 혹은 같은 팀(회사) 내의 다른 팀원(사용자)에게 전달하여 각자의 상황에 맞게 디자인 일부를 제작·변경하는 일이 자주 발생한다.
그런데, 기존에는 웹이나 앱 개발시 또는 디자인 편집시 개발자나 디자이너 등의 사용자들이 고객이 참조를 요청한 앱에서 캡쳐하고자 하는 화면을 일일이 선택하여 캡쳐해야 하는 등 많은 불편함이 뒤따르고 있고, 또 예술분야에 해당하는 디자인의 특성상 번뜩이는 아이디어를 필요로 하지만 기존의 작업 방식을 통해서는 원하는 디자인 아이디어를 얻는 데 한계가 있다.
본 발명이 이루고자 하는 기술적 과제는, 가령 웹 사이트를 제작하는 디자이너나 개발자들에게 실제 어플리케이션의 인터페이스 디자인을 보여주는 레퍼런스 사이트로서 동작할 수 있도록 하려는 것을 목적으로 한다.
본 발명이 해결하고자 하는 과제는 이상에서 언급한 과제에 제한되지 않으며, 언급되지 않은 또 다른 과제들은 아래의 기재로부터 당업자에게 명확하게 이해될 수 있을 것이다.
상기한 과제를 달성하기 위한 본 발명의 실시예에 따른 어플리케이션 GUI(Graphical User Interface) 레퍼런스 장치는, 어플리케이션이 실행될 때 실행 화면과 관련한 이미지 데이터를 어플리케이션의 카테고리별로 그룹화하여 저장하는 저장부, 및 상기 그룹화하여 저장한 각 어플리케이션의 이미지 데이터에 대한 분석 결과를 근거로 복수의 메뉴 항목별로 자동 분류하여 이미지 데이터를 재저장하며, 디자이너나 프로그램 개발자의 사용자 단말장치에서 선택하는 지정 메뉴에 상응하는 어플리케이션별 이미지 데이터를 디자인 리소스로서 제공하는 제어부를 포함한다.
상기 제어부는, 상기 실행 화면의 이미지 데이터를 분석할 때 이미지의 구성요소, 형태, 텍스트, 색상 및 시각적 특징을 분석할 수 있다.
상기 제어부는, 상기 저장한 이미지 데이터의 분석 결과를 근거로 카테고리, 사용자 인터페이스(UI) 패턴, 컴포넌트 및 주요색상으로 구성되는 복수의 메뉴 항목별로 자동 분류할 수 있다.
상기 제어부는, 상기 사용자 단말장치의 화면상에서 섬네일 이미지가 선택된 후 주요색상의 메뉴항목이 선택될 때 상기 선택한 섬네일 이미지를 구성하는 컬러의 컬러 목록을 화면상에 표시해 줄 수 있다.
상기 제어부는, 상기 어플리케이션이 실행될 때 상기 실행 화면의 변화를 감지하여 감지 결과를 근거로 자동 캡쳐 동작을 수행할 수 있다.
또한 상기한 과제를 달성하기 위한 본 발명의 실시예에 따른 어플리케이션 GUI 레퍼런스 장치의 구동방법은, 저장부가 어플리케이션이 실행될 때 실행 화면과 관련한 이미지 데이터를 어플리케이션의 카테고리별로 그룹화하여 저장하는 단계, 및 제어부가 상기 그룹화하여 저장한 각 어플리케이션의 이미지 데이터에 대한 분석 결과를 근거로 복수의 메뉴 항목별로 자동 분류하여 이미지 데이터를 재저장하며, 디자이너나 프로그램 개발자의 사용자 단말장치에서 선택하는 지정 메뉴에 상응하는 어플리케이션별 이미지 데이터를 디자인 리소스로서 제공하는 단계를 포함한다.
상기 구동방법은, 상기 제어부가 상기 실행 화면의 이미지 데이터를 분석할 때 이미지의 구성요소, 형태, 텍스트, 색상 및 시각적 특징을 분석하는 단계를 더 포함할 수 있다.
상기 자동 분류하는 단계는, 상기 저장한 이미지 데이터의 분석 결과를 근거로 카테고리, 사용자 인터페이스(UI) 패턴, 컴포넌트 및 주요색상으로 구성되는 복수의 메뉴 항목별로 자동 분류할 수 있다.
상기 구동방법은, 상기 제어부가 상기 사용자 단말장치의 화면상에서 섬네일 이미지가 선택된 후 주요색상의 메뉴항목이 선택될 때 상기 선택한 섬네일 이미지를 구성하는 컬러의 컬러 목록을 화면상에 표시해 주는 단계를 더 포함할 수 있다.
상기 구동방법은, 상기 제어부가 상기 어플리케이션이 실행될 때 상기 실행 화면의 변화를 감지하여 감지 결과를 근거로 자동 캡쳐 동작을 수행하는 단계를 더 포함할 수 있다.
본 발명의 실시예에 따르면, 사용자의 개입없이 자동으로 캡쳐된 휴대폰 어플리케이션(이하, 앱)의 모든 화면을 제공할 수 있고, 또 사용자는 캡쳐하고자 하는 화면을 일일이 선택하여 캡쳐하는 불편함이 없어지므로 디자이너나 개발자 등 사용자의 편의성이 증대될 수 있다.
또한 본 발명의 실시예에 따르면 사용자들은 다양한 앱의 디자인과 UI 요소들을 확인하고 원하는 디자인 아이디어를 얻을 수 있다.
본 발명의 실시예는 고품질의 아이콘 셋(set) 및 UI 소스들을 판매할 수 있고, 이러한 판매 소스들은 디자이너 및 개발자들이 자신의 프로젝트에 적용할 수 있도록 다양한 디자인 요소와 리소스(resource)를 제공함으로써 보다 빠르고 체계화된 작업에 도움을 줄 수 있다.
본 발명의 실시예는, 다양한 앱의 인터페이스 디자인을 보여주어 디자이너들이 창의적인 아이디어를 얻을 수 있도록 도와주며, 동시에 유사 소스 판매를 통해 아이콘, UI Kit(엘리먼트) 등의 디자인 소스를 제공하면, 디자이너들은 실제 앱과 일관성 있는 디자인 요소를 적용하여 보다 통일성 있는 디자인을 구현할 수 있다.
또 본 발명의 실시예는 필요한 디자인 요소와 리소스를 구매하여 활용할 수 있으므로 프로젝트 개발에 소요되는 시간과 비용을 절감할 수 있고, 이미 구축된 디자인 요소를 활용함으로써 프로젝트를 더욱 효율적이고 완성도 높게 진행할 수 있다.
나아가 본 발명의 실시예는 사이트를 구축해 마켓플레이스로 활용하여 창작자들은 자신들의 작품을 판매하고, 그에 대한 보상을 통해 수익창출을 할 수 있다.
또한 본 발명의 실시예에서 레퍼런스와 디자인 소스를 함께 제공하는 것은 사용자들에게 포괄적인 디자인 서비스를 제공할 수 있는 장점을 가지고 있으며, 디자이너와 개발자들은 필요한 디자인 요소와 리소스를 찾고 구매할 수 있으며, 동시에 다양한 앱 디자인을 참고할 수 있어 이는 종합적인 디자인 리소스를 제공하는 한정된 플랫폼에서의 편의성 및 효율성을 제공할 수 있다.
도 1은 본 발명의 실시예에 따른 어플리케이션 GUI 레퍼런스 시스템을 나타내는 도면이다.
도 2a는 화면 자동캡쳐 과정을 설명하기 위한 도면이다.
도 2b는 카테고리 분류 과정을 설명하기 위한 도면이다.
도 3a 내지 3n은 도 1의 어플리케이션 GUI 레퍼런스 장치에서 제공하는 서비스 화면을 설명하기 위한 도면이다.
도 4는 도 1의 어플리케이션 GUI 레퍼런스 장치의 세부구조를 예시한 블록다이어그램이다.
도 5는 도 1의 어플리케이션 GUI 레퍼런스 장치의 구동과정을 나타내는 흐름도이다.
도 2a는 화면 자동캡쳐 과정을 설명하기 위한 도면이다.
도 2b는 카테고리 분류 과정을 설명하기 위한 도면이다.
도 3a 내지 3n은 도 1의 어플리케이션 GUI 레퍼런스 장치에서 제공하는 서비스 화면을 설명하기 위한 도면이다.
도 4는 도 1의 어플리케이션 GUI 레퍼런스 장치의 세부구조를 예시한 블록다이어그램이다.
도 5는 도 1의 어플리케이션 GUI 레퍼런스 장치의 구동과정을 나타내는 흐름도이다.
이하에서 설명할 본 발명의 실시예들은 당해 기술 분야에서 통상의 지식을 가진 자에게 본 발명을 더욱 명확하게 설명하기 위하여 제공되는 것이고, 본 발명의 범위가 하기 실시예에 의해 한정되는 것은 아니며, 하기 실시예는 여러가지 다른 형태로 변형될 수 있다.
본 명세서에서 사용된 용어는 특정 실시예를 설명하기 위하여 사용되며, 본 발명을 제한하기 위한 것이 아니다. 본 명세서에서 사용되는 단수 형태의 용어는 문맥상 다른 경우를 분명히 지적하는 것이 아니라면, 복수의 형태를 포함할 수 있다. 또한, 본 명세서에서 사용되는 "포함한다(comprise)" 및/또는 "포함하는 (comprising)"이라는 용어는 언급한 형상, 단계, 숫자, 동작, 부재, 요소 및/또는 이들 그룹의 존재를 특정하는 것이며, 하나 이상의 다른 형상, 단계, 숫자, 동작, 부재, 요소 및/또는 이들 그룹의 존재 또는 부가를 배제하는 것이 아니다. 또한, 본 명세서에서 사용된 "연결"이라는 용어는 어떤 부재들이 직접적으로 연결된 것을 의미할 뿐만 아니라, 부재들 사이에 다른 부재가 더 개재되어 간접적으로 연결된 것까지 포함하는 개념이다.
아울러, 본원 명세서에서 어떤 부재가 다른 부재 "상에" 위치하고 있다고 할 때, 이는 어떤 부재가 다른 부재에 접해 있는 경우뿐 아니라 두 부재 사이에 또 다른 부재가 존재하는 경우도 포함한다. 본 명세서에서 사용된 용어 "및/또는"은 해당 열거된 항목 중 어느 하나 및 하나 이상의 모든 조합을 포함한다. 또한, 본원 명세서에서 사용되는 "약", "실질적으로" 등의 정도의 용어는 고유한 제조 및 물질 허용 오차를 감안하여, 그 수치나 정도의 범주 또는 이에 근접한 의미로 사용되고, 본원의 이해를 돕기 위해 제공된 정확하거나 절대적인 수치가 언급된 개시 내용을 침해자가 부당하게 이용하는 것을 방지하기 위해 사용된다.
이하 첨부된 도면들을 참조하여 본 발명의 실시예들에 대해 상세히 설명한다. 첨부된 도면에 도시된 영역이나 파트들의 사이즈나 두께는 명세서의 명확성 및 설명의 편의성을 위해 다소 과장되어 있을 수 있다. 상세한 설명 전체에 걸쳐 동일한 참조번호는 동일한 구성요소를 나타낸다.
도 1은 본 발명의 실시예에 따른 어플리케이션 GUI 레퍼런스 시스템을 나타내는 도면이고, 도 2a는 화면 자동캡쳐 과정을 설명하기 위한 도면이며, 도 2b는 카테고리 분류 과정을 설명하기 위한 도면이다.
도 1에 도시된 바와 같이, 본 발명의 실시예에 따른 어플리케이션 GUI 레퍼런스 시스템(혹은 소스컷 서비스 시스템)(90)은 가령 웹이나 앱을 개발하는 디자이너나 프로그램 개발자들에게 디자인 소스를 제공할 수 있는 시스템으로서, 사용자 단말장치(100), 통신망(110), 어플리케이션 GUI 레퍼런스 장치(120) 및 관리자 장치(130)의 일부 또는 전부를 포함한다.
여기서, "일부 또는 전부를 포함한다"는 것은 관리자 장치(130)와 같은 일부 구성요소가 생략되어 서비스 시스템(90)이 구성되거나, 어플리케이션 GUI 레퍼런스 장치(120)를 구성하는 구성요소의 일부 또는 전부가 통신망(110)을 구성하는 네트워크장치(예: 무선교환장치 등)에 통합되어 구성될 수 있는 것 등을 의미하는 것으로서, 발명의 충분한 이해를 돕기 위하여 전부 포함하는 것으로 설명한다.
사용자 단말장치(100)는 설명의 편의상 도 1의 어플리케이션 GUI 레퍼런스 장치(120)에서 제공하는 서비스를 이용하는 웹이나 앱 서비스의 프로그램 개발자나 디자이너 등이 소지하는 단말장치로 설명하기로 한다. 다시 말해, 본 발명의 실시예에서는 시중에 유통되는 다양한 분야(예: 금융, 교육, 스포츠 등)의 앱들에 대하여 앱이 실행될 때 실행 화면의 자동 캡쳐를 요청하는 대상이 다양할 수 있기 때문이다. 예를 들어, 앱 개발자나 디자이너는 특정 앱들을 지정하여 어플리케이션 GUI 레퍼런스 장치(120)로 데이터 분석을 요청할 수 있고, 어플리케이션 GUI 레퍼런스 장치(120)는 해당 앱들에 한정하여 서비스를 제공하는 것이 가능할 수 있다. 또는 어플리케이션 GUI 레퍼런스 장치(120)는 서비스를 제공하는 관리자 장치(130)에서 지정하는 앱에 대하여 실행 화면의 자동 캡쳐를 통해 데이터를 분석하여 개발자나 디자이너의 사용자 단말장치(100)로 개발에 도움을 줄 수 있는 디자인 리소스(resource)를 제공할 수 있다. 또 어플리케이션 GUI 레퍼런스 장치(120)는 일반 사용자들이 다시 말해 가령 어플리케이션 GUI 레퍼런스 장치(120)에 회원가입된 사용자들이 특정 앱을 실행하여 자동 캡쳐를 요청할 때 이의 데이터를 수집 및 분석하여 개발자나 디자이너의 사용자 단말장치(100)로 본 발명의 실시예에 따른 서비스를 제공할 수도 있다. 이와 같이 본 발명의 실시예에서는 앱의 실행시 자동 캡쳐를 통해 데이터를 수집하는 과정은 다양한 형태로 서비스가 이루어질 수 있지만, 설명의 편의상 서비스에 관계되는 관리자가 자동 캡쳐를 통해 데이터를 제공하는 두번째의 상황을 가정하여 이하 설명하도록 한다.
사용자 단말장치(100)는 도 1의 어플리케이션 GUI 레퍼런스 장치(120)에 접속하여 서비스를 이용하기 위한 다양한 유형의 단말장치를 포함할 수 있다. 사용자 단말장치(100)는 데스크탑컴퓨터나 랩탑컴퓨터 등 PC 기반의 단말장치뿐 아니라, 스마트폰, 태블릿PC, 사용자들이 손목 등에 착용하는 웨어러블장치 등 모바일 기반의 단말장치를 포함할 수 있다. PC 기반의 단말장치를 통해서는 웹 서비스를 이용할 수 있으며, 모바일 기반의 단말장치를 통해서는 앱 서비스를 이용할 수 있다. 실제로 개발자나 디자이너는 웹 서비스를 통해 도 1의 어플리케이션 GUI 레퍼런스 장치(120)에 접속할 수 있으며, 앱 서비스를 통해서도 어플리케이션 GUI 레퍼런스 장치(120)에 접속하여 서비스를 이용할 수 있다. 물론, 어플리케이션 GUI 레퍼런스 장치(120)는 서비스에 접속하는 단말장치의 유형을 근거로 PC 기반의 단말장치와 모바일 기반의 단말장치를 구분하여 최적화된 해상도의 서비스 화면을 제공할 수 있다.
사용자 단말장치(100)는 물론 이후에 자세히 설명하겠지만, 어플리케이션 GUI 레퍼런스 장치(120)에 접속하여 가령 자신이 현재 개발 중인 고객사의 웹이나 앱서비스와 관련한 디자인 등의 아이디어를 얻거나 디자인 리소스의 구매를 수행하는 것도 얼마든지 가능할 수 있다. 예를 들어 사용자 단말장치(100)는 서비스에 접속하여 금융, 교육, 스포츠 등의 카테고리 즉 제1 메뉴항목을 선택할 수 있고, 또 상세페이지, 프로필, 결제, 주문, 온보딩 등의 패턴 즉 제2 메뉴항목을 선택할 수 있으며, 추가로 버튼, 체크박스, 테이블 등의 구성요소뿐 아니라 컬러 항목을 선택할 수 있다. 즉 사용자 단말장치(100)는 서비스 화면에서 제1 내지 제4 메뉴항목을 선택할 수 있으며, 가령 제1 내지 제3 메뉴항목의 선택시 제공되는 섬네일(thumbnail) 이미지들에 대하여 특정 이미지를 선택한 후 제4 메뉴항목을 선택할 때 해당 선택한 이미지의 컬러 구성과 관련한 컬러목록을 화면상에 표시하는 것도 얼마든지 가능할 수 있다. 또한 사용자 단말장치(100)의 화면상에서 컬러목록상의 특정 컬러 즉 색상의 선택시에는 채도/명도와 관련한 목록도 화면상에 표시하여 볼 수 있다.
물론 사용자 단말장치(100)로 제공되는 서비스 화면은 다양하게 구성될 수 있지만, 본 발명의 실시예에서는 시중에 유통되는 앱 등과 관련하여 실행 화면을 자동 캡쳐하여 다양한 항목별로 이미지 데이터를 자동 분류하여 구분한 후 디자이너나 개발자의 서비스 요청시 개발에 도움을 줄 수 있는 이미지 데이터를 제공하여 디자인 아이디어를 얻을 수 있도록 한다는 것이다. 따라서 사용자가 서비스 화면을 통해 요청한 요청사항 가령 검색창을 통해 입력한 키워드나 화면에서 선택한 메뉴항목들에 대하여 복수의 유사 이미지 즉 섬네일 이미지를 제공해 이를 통해 빠르고 체계화된 작업에 도움에 주고, 또 디자인 요소를 적용하여 통일성있는 디자인을 구현할 수 있도록 하며, 프로젝트를 더욱 효율적이고 완성도 높게 진행할 수 있도록 도울 수 있을 것이다.
통신망(110)은 다양한 형태로 구성될 수 있다. 통신망(110)은 유무선 통신망을 모두 포함할 수 있다. 가령 통신망(110)으로서 유무선 인터넷망이 이용되거나 연동될 수 있다. 여기서 유선망은 케이블망이나 공중 전화망(PSTN)과 같은 인터넷망을 포함하는 것이고, 무선 통신망은 CDMA, WCDMA, GSM, EPC(Evolved Packet Core), LTE(Long Term Evolution), 와이브로(Wibro) 망 등을 포함하는 의미이다. 물론 본 발명의 실시예에 따른 통신망(110)은 이에 한정되는 것이 아니며, 향후 구현될 차세대 이동 통신 시스템의 접속망으로서 가령 클라우드 컴퓨팅 환경하의 클라우드 컴퓨팅망, 5G망 등에 사용될 수 있다. 가령, 통신망(110)이 유선 통신망인 경우 통신망 내의 액세스포인트는 전화국의 교환국 등에 접속할 수 있지만, 무선 통신망인 경우에는 통신사에서 운용하는 SGSN 또는 GGSN(Gateway GPRS Support Node)에 접속하여 데이터를 처리하거나, BTS(Base Transceiver Station), NodeB, e-NodeB 등의 다양한 중계기에 접속하여 데이터를 처리할 수 있다.
통신망(110)은 액세스포인트를 포함할 수도 있다. 액세스포인트는 건물 내에 많이 설치되는 펨토(femto) 또는 피코(pico) 기지국과 같은 소형 기지국을 포함할 수 있다. 여기서, 펨토 또는 피코 기지국은 소형 기지국의 분류상 도 1의 사용자 단말장치(100) 등을 최대 몇 대까지 접속할 수 있느냐에 따라 구분될 수 있다. 물론 사용자 단말장치(100) 등과 지그비 및 와이파이(Wi-Fi) 등의 근거리 통신을 수행하기 위한 근거리 통신 모듈을 포함할 수 있다. 액세스포인트는 무선통신을 위하여 TCP/IP 혹은 RTSP(Real-Time Streaming Protocol)를 이용할 수 있다. 여기서, 근거리 통신은 와이파이 이외에 블루투스, 지그비, 적외선(IrDA), UHF(Ultra High Frequency) 및 VHF(Very High Frequency)와 같은 RF(Radio Frequency) 및 초광대역 통신(UWB) 등의 다양한 규격으로 수행될 수 있다. 이에 따라 액세스포인트는 데이터 패킷의 위치를 추출하고, 추출된 위치에 대한 최상의 통신 경로를 지정하며, 지정된 통신 경로를 따라 데이터 패킷을 다음 장치, 예컨대 어플리케이션 GUI 레퍼런스 장치(120)로 전달할 수 있다. 액세스포인트는 일반적인 네트워크 환경에서 여러 회선을 공유할 수 있으며, 예컨대 라우터(router), 리피터(repeater) 및 중계기 등이 포함될 수 있다.
어플리케이션 GUI 레퍼런스 장치(120)는 본 발명의 실시예에 따라 시중에 유통중인 다양한 분야의 앱과 관련한 실행 화면의 이미지 데이터를 수집하여 복수의 메뉴항목별로 자동 분류하여 DB(120a)에 체계적으로 분류하여 저장시킬 수 있으며, 이를 근거로 사용자 단말장치(100), 다시 말해 앱이나 웹을 개발하는 개발자나 디자이너의 서비스 요청시 개발자나 디자이너가 요청하는 디자인 소스 또는 리소스를 제공할 수 있다. 물론 디자인 소스 또는 리소스를 위해 제공되는 이미지 데이터는 다양한 형태로 제공될 수 있다. 예를 들어, 검색창에 입력되는 검색어를 기반으로 제공하는 것이 대표적이다. 최근에는 인공지능 프로그램이 검색에도 많이 적용되고 있으므로 인공지능 프로그램을 활용함으로써 검색 결과의 정확도를 높이는 것도 얼마든지 가능할 수 있다. 본 발명의 실시예에서는 디자인 측면을 고려하여 4개의 메뉴항목을 근거로 이미지 데이터를 제공할 수 있다. 앞서 언급한 바와 같이 카테고리, 패턴, 구성요소(components) 및 컬러 등 주요색상 항목으로 구분하여 이미지 데이터를 제공할 수 있다. 본 발명의 실시예에서는 디자인 소스와 관련한 컷(cut) 즉 캡쳐 이미지나 섬네일 이미지를 사용자 단말장치(100)로 제공한다는 점에서 '소스컷(SOSCUT)' 서비스를 제공한다고 볼 수 있다. SOS는 디자인 소스를 의미하거나 긴급상황의 SOS를 의미할 수 있으며, CUT은 자동 캡쳐된 이미지를 섬네일 이미지의 형태로 서비스를 제공한다는 의미에서 명명되었다고 볼 수 있다.
어플리케이션 GUI 레퍼런스 장치(120)는 예를 들어, 시중에 이용되는 많은 앱과 관련하여 다양한 형태로 실행 화면의 자동 캡쳐 즉 컷 이미지의 이미지 데이터를 확보하는 것이 가능할 수 있다. 다시 말해, 어플리케이션 GUI 레퍼런스 장치(120)는 서비스를 제공하는 관리자 장치(130)에서 앱의 자동 캡쳐가 이루어지는 것이 바람직하지만, 주기적으로 해당 관리자 장치(130)로부터 자동 캡쳐된 이미지의 이미지 데이터를 제공받아 이를 DB(120a)에 저장한 후 데이터 분석 동작을 수행하는 것이 가능할 수 있다. 또는 관리자 장치(130)에서 자동 캡쳐를 위한 앱을 어플리케이션 GUI 레퍼런스 장치(120)에 지정하여 주는 것이다. 예를 들어, 관리자 장치(130)는 관리자 메뉴 주소정보를 통해 어플리케이션 GUI 레퍼런스 장치(120)의 관리자 메뉴로 접속할 수 있다. 해당 관리자 메뉴화면에서 특정 앱을 다운로드받아 해당 앱의 자동 캡쳐 및 데이터를 분석을 요청하는 것이다. 이와 같이 어플리케이션 GUI 레퍼런스 장치(120)는 시중에서 사용자들에 의해 사용되는 앱과 관련하여 다양한 형태로 앱을 자동 실행하고 실행 화면의 이미지에 대한 이미지 데이터를 생성할 수 있으므로, 본 발명의 실시예에서는 어느 하나의 형태에 특별히 한정하지는 않을 것이다.
가령, 어플리케이션 GUI 레퍼런스 장치(120)는 서비스 관리자 등이 앱스토어에 접속하여 앱을 다운받을 때 앱 구동 관련 파일들이 모두 다운될 수 있다면 그 다운받은 어플리케이션 GUI를 구현하는 그림 파일들(혹은 실행화면 이미지)을 분석해 카테고리, UI 패턴, 컴포넌트, 주요색상 등으로 자동 분류하여 저장하고 그림 파일들을 이용하여 레퍼런스 사이트로서 동작할 수 있다. 다시 말해 어플리케이션 GUI 레퍼런스 장치(120)는 금융, 교육, 스포츠 등 다양한 분야의 앱들에 관계되는 사이트들의 실행 화면과 관련한 이미지의 이미지 데이터를 한 곳에 모아 디자이너나 개발자들의 사용자 단말장치(100)로 제공하므로 많은 사이트들을, 더 정확하게는 해당 사이트들의 실행화면 이미지들을 한곳에서 참조해 볼 수 있는 레퍼런스 사이트로서 동작한다고 볼 수 있다.
도 2a는 화면 자동 캡쳐 과정을 보여주는 도면이다. 해당 자동 캡쳐는 앞서 언급한 바와 같이 도 1의 관리자 장치(130)에서 이루어질 수 있지만, 어플리케이션 GUI 레퍼런스 장치(120)에서 이루어지는 것도 얼마든지 가능할 수 있다. 도 2a는 휴대폰 앱 내에서 자동으로 화면 캡쳐를 수행하는 방법 및 시스템을 보여주며, 캡쳐 시작 요청이 있으면 해당 앱 화면의 변화를 지속적으로 모니터링하는 역할을 수행할 수 있다. 휴대폰 앱 내의 사용자 인터페이스(UI)의 변화를 감지하고, 해당 화면의 캡쳐를 자동으로 수행한다. 캡쳐된 이미지는 각 앱별로 그룹화되어 서버 즉 어플리케이션 GUI 레퍼런스 장치(120)로 제공되어 DB(120a)에 저장될 수 있다. 도 2a의 S200 단계에서 S260 단계는 이러한 과정을 잘 보여주고 있다. 이를 통해 본 발명의 실시예는 사용자의 개입 없이 자동으로 캡쳐된 휴대폰 앱의 모든 화면을 제공할 수 있게 된다. 사용자는 캡쳐하고자 하는 화면을 일일이 선택하여 캡쳐하는 불편함이 없어지므로, 사용자 편의성이 증대되는 효과가 있다. 도 2a의 동작은 도 1의 관리자 장치(130)에서 이루어질 수 있으므로, 본 발명의 실시예에서는 어느 하나의 형태에 특별히 한정하지는 않을 것이다.
어플리케이션 GUI 레퍼런스 장치(120)는 캡쳐된 앱 화면의 UI를 분석하여 자동으로 분류하기 위한 동작을 수행할 수 있다. 도 2b의 S300 단계 내지 S340 단계는 이를 잘 보여주고 있다. 본 발명의 실시예에 따른 도 2b는 앱 화면을 캡쳐하고, 이미지 분석을 통해 자동으로 카테고리, 스크린 패턴, 컴포넌트, (주요)색상 등으로 분류하는 방법 및 시스템을 보여주며, 이 기술은 사용자가 수동으로 화면을 분석하고 분류하는 번거로움을 해결하기에 유용할 수 있다. 물론 본 발명의 실시예에 따른 시스템은 이미지 분석 알고리즘을 사용하여 자동으로 카테고리, 스크린 패턴, 컴포넌트, 색상으로 캡쳐된 이미지를 자동으로 분류할 수 있다. 물론 이러한 과정에서 인공지능 프로그램을 적용함으로써 이미지의 분석 정확도를 증가시킬 수 있으며, 가령 이미지 자동 분류 과정에서 분류가 어렵다고 판단되는 경우 관리자 장치(130)로 요청하여 분류를 요청하는 것도 얼마든지 가능할 수 있다. 분류 알고리즘은 이미지의 구성 요소, 형태, 텍스트(text), 색상 및 기타 시각적 특징을 분석하여 분류 결정을 수행할 수 있다. 어플리케이션 GUI 레퍼런스 장치(120)는 분류된 결과를 기반으로 사용자(예: 디자이너나 개발자 등)가 앱에 대한 레퍼런스(참고사례)를 모으고 분석할 수 있도록 동작할 수 있다. 분류된 결과는 시스템을 활용해 유사 객체들과 비교 분석이 가능하며, 디자이너 및 개발자 등의 사용자에게 필요한 유사 소스를 제공할 수 있다.
이외에도 본 발명의 실시예에 따른 어플리케이션 GUI 레퍼런스 장치(120)는 마켓플레이스로 동작하는 등 다양한 서비스의 제공이 가능할 수 있다. 다시 말해, 본 발명의 실시예에 따른 어플리케이션 GUI 레퍼런스 장치(120)는 레퍼런스 제공 및 소스 판매의 연동 동작을 수행할 수 있다. 이를 위하여 디자이너 및 개발자들에게 실제 앱의 인터페이스 디자인을 보여주는 레퍼런스 사이트로 동작하는 것이다. 이를 통해 사용자들은 다양한 앱의 디자인과 UI 요소들을 확인하고, 원하는 디자인 아이디어를 얻을 수 있다. 본 발명의 실시예에 따른 서비스는 고품질의 아이콘 셋(set) 및 UI 소스들을 판매할 수도 있다. 이러한 판매 소스들은 디자이너 및 개발자들이 자신의 프로젝트에 적용할 수 있도록 다양한 디자인 요소와 리소스를 제공함으로써 보다 빠르고 체계화된 작업에 도움을 줄 수 있다. 다양한 앱의 인터페이스 디자인을 보여주어 디자이너들이 창의적인 아이디어를 얻을 수 있도록 도와줄 수 있다. 동시에 유사 소스 판매를 통해 아이콘, UI Kit(엘리먼트) 등의 디자인 소스를 제공하면, 디자이너들은 실제 앱과 일관성 있는 디자인 요소를 적용하여 보다 통일성 있는 디자인을 구현할 수 있다. 또 필요한 디자인 요소와 리소스를 구매하여 활용할 수 있으므로 프로젝트 개발에 소요되는 시간과 비용을 절감할 수 있고, 이미 구축된 디자인 요소를 활용함으로써 프로젝트를 더욱 효율적이고 완성도 높게 진행할 수 있다. 또 본 발명의 실시예에 따른 서비스를 마켓플레이스로 활용하여 창작자들은 자신들의 작품을 판매하고, 그에 대한 보상을 통해 수익창출을 할 수 있다. 레퍼런스와 디자인 소스를 함께 제공하는 것은 사용자들에게 포괄적인 디자인 서비스를 제공할 수 있는 장점을 가질 수 있다. 디자이너와 개발자들은 필요한 디자인 요소와 리소스를 찾고 구매할 수 있으며, 동시에 다양한 앱 디자인을 참고할 수 있다. 이는 종합적인 디자인 리소스를 제공하는 한정된 플랫폼에서의 편의성 및 효율성을 제공할 수 있다.
관리자 장치(130)는 도 1의 시스템(90)을 설계하는 설계자의 의도에 따라 다양하게 동작할 수 있다. 예를 들어, 앞서 설명한 바와 같이 도 1의 어플리케이션 GUI 레퍼런스 장치(120)의 서비스를 제공하는 관리자들이 자신의 스마트폰 등을 통해 시중에서 이용되는 앱을 다운로드받아 실행한 후 자동 캡쳐된 실행 화면의 이미지에 대한 이미지 데이터를 가령 API 연동되어 있는 어플리케이션 GUI 레퍼런스 장치(120)로 자동 전송해 주는 것이다. 물론, 이러한 동작을 위하여 관리자 장치(130)는 본 발명의 실시예에 따른 앱을 개발하여 탑재한 후 이를 통해 다운로드받아 실행한 앱의 실행화면을 자동 캡쳐해 어플리케이션 GUI 레퍼런스 장치(120)로 제공하는 것이다.
또한 관리자 장치(130)는 어플리케이션 GUI 레퍼런스 장치(120)로 관리자 메뉴주소정보를 통해 관리자 메뉴화면에 접속한 후 이를 통해 다운로드받은 앱을 자동 실행시켜 어플리케이션 GUI 레퍼런스 장치(120)에서 앱을 자동으로 실행한 후 앱의 실행 화면을 자동 캡쳐하도록 동작시키는 것도 얼마든지 가능할 수 있다. 예를 들어, 전자의 경우와 같이 자동 캡쳐를 위한 별도의 앱을 개발하고 이를 통해 시중의 앱에 대한 실행 화면의 자동 캡쳐를 수행하는 것은 복수의 관리자들이 이에 참여하는 경우 데이터 구축 동작이 빠르게 이루어질 수 있다. 물론, 어플리케이션 GUI 레퍼런스 장치(120)에서도 앱을 실행하기 위한 가령 10개의 SW 모듈을 구성하고 이를 통해 자동 캡쳐가 이루어지도록 하는 경우에도 빠르게 자동 캡쳐 이미지의 확보와 함께 데이터 구축이 빠르게 이루어질 수 있다. 시스템 설계자의 의도에 따라 다양하게 이루어질 수 있으므로, 본 발명의 실시예에서는 어느 하나의 형태에 특별히 한정하지는 않을 것이다.
상기한 내용 이외에 도 1의 사용자 단말장치(100), 통신망(110), 어플리케이션 GUI 레퍼런스 장치(120) 및 관리자 장치(130)와 관련해서는 이후에도 다양한 내용이 다루어질 수 있으며, 자세한 내용은 그 내용들로 대신하고자 한다.
도 3a 내지 3n은 도 1의 어플리케이션 GUI 레퍼런스 장치에서 제공하는 서비스 화면을 설명하기 위한 도면이다.
설명의 편의상 도 3a 내지 도 3n을 도 1과 함께 참조하면, 본 발명의 실시예에 따른 어플리케이션 GUI 레퍼런스 장치(120)는 도 1의 사용자 단말장치(100)의 서비스 요청에 따라 도 3a에서와 같은 서비스 화면 즉 메인 화면을 제공할 수 있다. 도 3a는 소스컷 메인 페이지이며 메인 배너에 트랜드 앱이 노출되고, 메인섹션은 앱의 섬네일로 구성될 수 있다. 메인 페이지는 크게 상단바(300), 메인배너(310) 및 섬네일 섹션(320)의 3개 영역으로 구분될 수 있다.
상단바(300)의 제1 영역에서 ①은 소스컷 로고가 표시되며 클릭시 메인화면으로 이동하고, ②는 검색창을 나타내며 앱, 컴포넌트 등 검색 기능이 제공되며, ③은 운영체제(OS) 종류 버튼으로 좌측부터 순서대로 iOS, Android, SOS(소스컷 제공)가 표시되고, 해당 버튼 클릭시 각 OS 서브 페이지로 이동한다. 또 ④는 좌측부터 순서대로 장바구니, 컬렉션, 프로필 버튼을 나타내며, 해당 버튼 클릭시 각 서브 페이지로 이동한다.
메인배너(310)의 제2 영역에서 ⑤는 카테고리별 현재 트랜드인 앱의 아이콘 섬네일을 보여주는 배너로, 각 카테고리는 랜덤으로 나오며 좌우의 <, > 버튼으로 카테고리의 변경이 가능하다. 또한 ⑥은 검색창으로 앱, 컴포넌트 등 검색 기능이 제공되며, ⑦은 메인메뉴 바를 나타낸다. 해당 메뉴 바는 페이지 하단 고정으로 스크롤 시에도 용이하게 접근이 가능하다.
섬네일 섹션(320)의 제3 영역에서 ⑧은 전체 앱의 섬네일을 최신순으로 보여주는 섹션으로 각 섬네일 클릭시 서브페이지로 이동한다. ⑨는 마우스 호버(Hover) 상태를 보여준다. ⑩은 마우스 호버시 상단에 앱 아이콘, 앱 이름, 좋아요 수가 나타난다. ⑪은 마우스 호버시 컬렉션 저장 버튼을 보여준다. 컬렉션 선택 후 ☆ 클릭시 ★로 바뀌며 컬렉션에 저장된다. ⑫는 마우스 호버시 공유하기 버튼을 보여준다. 아이콘 클릭시 하단으로 상세창이 뜨며 복사/공유가 가능하다.
도 3b는 메인메뉴 바를 보여주며, 메인메뉴가 하단 중앙에 고정된 형태를 갖는다. 스크롤 시에도 용이하게 접근이 가능하며 섬네일 노출 수를 높이기 위해 최대한 가리지 않도록 디자인된다. 메인 메뉴 바의 카테고리 항목은 ①의 카테고리 버튼 클릭시 바 상단으로 올라오는 상세 목록이 표시되며 각 목록 클릭시 해당 카테고리 페이지로 이동한다. ②는 닫기 버튼을 보여준다. 메인 메뉴 바의 패턴 항목은 ③의 패턴 클릭시 바 상단으로 올라오는 상세 목록이 나타난다. 목록들은 체크 박스(check box)로 구성되며 다중 선택이 가능하다. 엔터로 이동한다. ④의 바깥 클릭시 닫힌다. 컴포넌트 클릭시 컴포넌트로 바뀌며 화면이 나타난다. 메인 메뉴 바에서 컴포넌트(components) 항목은 ⑤의 컴포넌트 클릭시 바 상단으로 올라오는 상세 목록이 있으며, 목록들은 체크 박스로 구성되며 다중 선택이 가능하다. 엔터로 이동한다. ⑥의 바깥 클릭시 닫히며, 패턴 클릭시 패턴으로 바뀌며 화면이 나타난다. 메인 메뉴 바에서 컬러 항목은 ⑥의 컬러 원(circle) 클릭시 상단으로 오버(over)되어 나타나는 목록을 보여준다. 1단계는 컬러 선택을 보여준다. ⑦은 컬러 선택후 해당 컬러 상단으로 나타나는 목록을 보여준다. 2단계의 명/채도 선택을 보여준다. 2단계까지 선택후 컬러 상세페이지로 이동할 수 있다. ⑧은 돋보기 버튼이다. 컬러를 Hex 코드로 검색할 수 있고, 코드 입력시 이동(화살표) 버튼에 해당 코드의 컬러가 나타나며 버튼 클릭시 컬러 상세페이지로 이동할 수 있다. Hex 코드는 RGB 방식 색상 코드 표기법을 의미한다. HEX 코드는 프로그램의 내부 코드로 숫자를 표시하는데 10진수 256의 경우 16진수는 100으로 표기되고 16진수라는 표기인 '0x'를 붙여 '0x00000100'으로도 표기된다. 이 HEX 코드가 HEX 에디터에서 사용할 때는 두 자리씩끊어서 거꾸로 보여 '00 0100 00'이 된다.
도 3c는 운영체제(OS)의 서비스 페이지로서 상단바 중앙의 아이콘을 통해 접근할 수 있는 OS 페이지이다. ①은 검색 기능을 보여준다. 우측 dropdown 버튼으로 정렬 가능하다. ②는 컬러 검색을 보여주며, 해당 OS 내에서 컬러별로 검색이 가능하다. ③은 운영체제 종류 버튼으로 우측 화살표 클릭시 iOS → Android 변경이 가능하다. ④는 앱 카테고리 검색을 나타내며, 해당 OS 내에서 카테고리 별로 검색이 가능하다. ⑤는 앱 섬네일을 보여주며, 아이콘, 앱 이름, 카테고리, 섬네일(splash, 메인, 서브)로 구성되며 클릭시 상세페이지로 이동한다.
도 3d는 서브 페이지로 상단바 중앙의 아이콘을 통해 접근할 수 있는 소스 페이지를 나타낸다. ①은 소스 검색 기능을 제공한다. 우측 dropdown 버튼을 정렬이 가능하다. ②는 컬러 검색이 가능하며 소스 내에서 컬러별로 검색이 가능하다. ③은 세부 태그 버튼을 나타내며, 태그 중복선택이 가능하다. ④는 카테고리 검색을 보여주며, ⑤는 소스 섬네일을 보여준다. 가격, 이름, 게시자, 파일종류, 좋아요 수, 공유 수, 섬네일로 구성되며 클릭시 상세페이지로 이동한다.
도 3e는 서브페이지로 메인메뉴 바에서 카테고리 선택시 보여지는 페이지이다. 해당 서브 페이지는 상단부(330)와 메인섹션(340)으로 구분될 수 있다. 상단부(330)에서 ①은 검색창을 나타내며 앱, 컴포넌트 등 검색 기능을 제공한다. ②는 카테고리별 현재 트랜드인 앱의 메인 섬네일을 보여주는 배너이다. 메인섹션(340)에서 ③은 운영체제 종류 버튼을 보여준다. 우측 화살표 클릭시 iOS → Android로 변경이 가능하다. ④는 앱 카테고리 버튼을 보여주며, 해당 버튼으로 카테고리 이동이 가능하다. ⑤는 앱 섬네일을 보여주며, 아이콘, 앱 이름, 카테고리, 섬네일(splash, 메인, 서브)로 구성되며 클릭시 상세페이지로 이동된다.
도 3f는 서브페이지로 메인메뉴 바에서 패턴(patterns) 선택시 보여지는 페이지이다. 도 3f에서 볼 때, ①은 검색창을 보여주며, 앱, 컴포넌트 등 검색 기능을 제공한다. ②는 운영체제 버튼으로 원하는 운영체제만 따로 볼 수 있으며, 우측 화살표 클릭시 iOS → Android로 변경이 가능하다. ③은 스크린 패턴 버튼을 나타내며, 다중 선택이 가능하다. 선택된 버튼만 보여준다. ④는 컴포넌트 버튼으로 해당 스크린 패턴 내에서의 원하는 컴포넌트만 골라서 볼 수 있으며, 다중 선택이 가능하다. ⑤는 스크린 패턴 섬네일을 보여준다.
도 3g는 서브 페이지로 메인메뉴 바에서 컬러(colors) 선택시 보여지는 페이지이다. 도 3g에서 볼 때, ①은 컬러 검색창을 나타내며 컬러는 다중 선택이 가능하며 선택된 컬러들의 섬네일이 보여진다. ②는 Hex 코드 섹션을 나타내며, 검색한 컬러의 코드가 뜨며 스크롤 시에도 상단에 고정되어 검색한 컬러를 지속적으로 노출한다. ③은 유사색상 섹션을 보여준다. 검색한 컬러의 유사 색상을 보여주며 클릭시 다중선택으로 추가된다. ④는 운영 체제 버튼으로 원하는 운영체제만 따로 볼 수 있다. ⑤는 카테고리 버튼으로 open/close가 가능하며 기본은 close 상태이다. 검색한 컬러 내에서의 카테고리 필터 기능을 제공한다. ⑥은 스크린 패턴 버튼을 나타낸다. 다중 선택이 가능하고 선택된 패턴만 보여준다. ⑦은 컴포넌트 버튼을 나타내며 다중 선택이 가능하다. 선택된 컴포넌트만 보여준다. ⑧은 섬네일을 보여준다.
도 3h는 앱 상세페이지로 앱 선택시 보여주는 상세페이지이다. 선택된 앱에 대한 상세정보가 나타나고 패턴/컴포넌트별로 볼 수 있다. 상세페이지는 상단(350)과 메인섹션(360)으로 구분할 수 있다. 상단(350)에서 ①은 검색창을 나타내며 앱, 컴포넌트 등 검색 기능을 제공한다. ②는 이전 페이지로의 이동 버튼을 나타낸다. ③은 섬네일로 우측 슬라이드 바(bar)로 해당 앱의 전체 스크린을 넘겨볼 수 있다. ④는 앱 상세정보를 나타내며 아이콘, 앱 이름, OS, 저작권이 상단에 나오고, 해당 앱의 카테고리, 현재 스크린의 패턴과 컴포넌트의 정보가 나타난다. ⑤는 공유, 다운로드, 컬렉션 저장 버튼을 보여준다. 메인섹션(360)에서 ⑥은 운영체제 종류 버튼을 보여준다. ⑦은 앱 카테고리 버튼이며 해당 버튼으로 카테고리 이동이 가능하다. ⑧은 앱 섬네일을 보여주며, 아이콘, 앱 이름, 카테고리, 섬네일(splash, 메인, 서브)로 구성되며 클릭시 상세페이지로 이동한다.
도 3i는 다른 형태의 앱 상세페이지로서 앱에 대한 상세정보에서 patterns, components 선택시 보여지는 정보이다. 해당 상세페이지는 메인섹션(370)과 하단 유사 앱 추천영역(380)으로 구분될 수 있다. 메인섹션(370)에서 ①은 선택된 패턴 selected 상태를 보여준다. ②는 선택된 패턴 섬네일만 보여진다. 하단 유사 앱 추천영역(380)에서 ③은 현재 앱과 유사한 앱을 추천해서 보여주는 섹션이다. 카테고리 섬네일과 동일하게 아이콘, 앱 이름, 카테고리, 섬네일(splash, 메인, 서브)로 구성되며 클릭시 상세페이지로 이동한다.
도 3j는 SOS 상세 페이지로 소스 선택시 보여지는 상세페이지를 보여준다. 선택된 소스에 대한 상세정보를 노출한다. 도 3j의 상단(390)에서 ①은 이전페이지 버튼, ②는 섬네일 확대/축소/전체보기, ③은 섬네일, ④는 공유, 다운로드 버튼, ⑤는 컬렉션 저장 버튼, ⑥은 상세정보 섹션으로 소스의 이름, 파일정보, 상세정보(예: 카테고리, 조회수, 다운로드 수, 등록일, 라이센스)로 나뉘며, ⑦은 라이센스 자세히보기 버튼을 나타낸다. ⑧은 유료소스일 때 레이아웃과 기능은 전부 동일하며, 가격, 장바구니 버튼, 구매하기 버튼이 추가될 수 있는 것을 보여준다.
도 3k는 SOS 상세페이지를 보여준다. 도 3k에서 볼 때, 메인섹션(395)과 하단(397)으로 구분될 수 있다. 메인섹션(395)에서 ①은 해당 소스의 상세설명 섹션으로 소스에 포함된 파일과 UI element에 대한 설명이 포함된다. ②는 항목 태그를 보여주며, ③은 라이센스 상세 설명이 포함된다. ④는 소스 미리보기로 전체 소스의 이미지 확인이 가능하다. 하단(397)에서 ⑤는 현재 소스와 유사한 소스를 추천해서 보여주는 섹션이다. 섬네일, 소스 이름으로 구성되며 클릭시 상세페이지로 이동된다.
도 3l은 장바구니에 담은 아이템을 볼 수 있는 페이지를 보여준다. ①은 상단바로 우측 장바구니 아이템으로 페이지 접근이 가능하다. ②는 전체선택 checkbox를 나타내며, ③은 선택 checkbox를 나타낸다. ④는 소스 섬네일을 보여주며, ⑤는 소스 상세정보(예: 이름/상품코드/라이센스)를 보여준다. ⑥은 소스 가격을 보여주며, ⑦은 삭제버튼을 나타낸다. ⑧은 선택된 소스들의 가격을 보여주며, ⑨는 구매하기 버튼을 보여준다.
도 3m은 컬렉션에 저장한 아이템을 볼 수 있는 페이지를 보여준다. 도 3m에서 ①은 컬렉션 섬네일을 보여주며 3개까지 노출이 가능할 수 있다. ②는 컬렉션 이름/갯수를 보여주고, ③은 컬렉션 잠금 버튼을 나타낸다. 클릭시 잠금 ↔ 열림 수정이 가능하다. ④는 검색 버튼으로 컬렉션 이름/컬렉션 내 이미지/앱 등 검색이 가능하다. ⑤는 컬렉션 추가 버튼이며 클릭시 팝업이 나타난다.
도 3n은 컬렉션에 저장한 아이템을 볼 수 있는 페이지로 컬렉션 상세페이지를 보여준다. 도 3n에서 ①은 컬렉션 이름으로 클릭시 이름 수정 팝업이 나타난다. ②는 컬렉션 잠금 버튼을 나타내며, ③은 컬렉션 공유 버튼을 보여준다. 클릭시 팝업이 나타난다. ④는 컬렉션 삭제 버튼이며 클릭시 팝업이 나타난다. ⑤는 섬네일을 보여준다.
도 4는 도 1의 어플리케이션 GUI 레퍼런스 장치의 세부구조를 예시한 블록다이어그램이다.
도 4에 도시된 바와 같이, 본 발명의 실시예에 따른 도 1의 어플리케이션 GUI 레퍼런스 장치(120)는 통신 인터페이스부(400), 제어부(410), 어플리케이션 GUI 레퍼런스부(420) 및 저장부(430)의 일부 또는 전부를 포함한다.
여기서, "일부 또는 전부를 포함한다"는 것은 저장부(430)와 같은 일부 구성요소가 생략되어 어플리케이션 GUI 레퍼런스 장치(120)가 구성되거나, 어플리케이션 GUI 레퍼런스부(420)와 같은 일부 구성요소가 제어부(410)와 같은 다른 구성요소에 통합되어 구성될 수 있는 것 등을 의미하는 것으로서, 발명의 충분한 이해를 돕기 위하여 전부 포함하는 것으로 설명한다.
통신 인터페이스부(400)는 도 1의 통신망(110)을 경유하여 도 1의 사용자 단말장치(100) 및 관리자 장치(130)와 각각 통신한다. 통신 인터페이스부(400)는 통신을 수행하는 과정에서 변/복조, 먹싱/디먹싱, 인코딩/디코딩, 해상도를 변환하는 스케일링 등의 동작을 수행할 수 있으며, 이는 당업자에게 자명하므로 더 이상의 설명은 생략하도록 한다.
통신 인터페이스부(400)는 관리자 장치(130)와 통신하여 본 발명의 실시예에 따른 소스컷 서비스를 제공하기 위한 데이터 구축 동작을 수행할 수 있다. 예를 들어, 도 1의 관리자 장치(130)에서 시중에서 사용되는 다양한 유형의 앱을 실행한 후 실행 화면을 자동 캡쳐한 이미지의 이미지 데이터를 제공하는 경우 이를 제어부(410)에 제공할 수 있다. 이러한 동작은 앱이 실행될 때 실행 화면을 자동 캡쳐하는 본 발명의 실시예에 따른 앱을 관리자 장치(130)에 탑재하여 이를 실행함으로써 자동 캡쳐한 이미지의 이미지 데이터의 자동 전송이 가능할 수 있다. 물론 앞서 설명한 바와 같이, 관리자 장치(130)에서 도 1의 어플리케이션 GUI 레퍼런스 장치(120)로 실행화면의 자동 캡쳐를 위한 앱을 가령 지정한 후 이를 통해 앱의 실행화면의 자동 캡쳐 이미지를 얻는 것도 얼마든지 가능할 수 있을 것이다. 통신 인터페이스부(400)는 관리자 장치(130)와 이러한 동작에 관여할 수 있다.
또한 통신 인터페이스부(400)는 앱 실행화면의 이미지 데이터에 대한 데이터 구축 동작이 완료되면, 사용자 단말장치(100)의 서비스 요청에 따라 이미지 데이터를 제공할 수 있다. 사용자 단말장치(100)에서 카테고리, 스크린 패턴, 컴포넌트, 주요색상의 메뉴항목이 선택될 때 그에 따른 이미지 데이터를 제공할 수 있다. 가령, 섬네일 이미지를 제공하고, 이때 선택되는 섬네일 이미지의 주요색상을 요청할 때 색상목록을 화면에 표시해주는 등의 동작이 이루어질 수 있다.
제어부(410)는 도 4의 통신 인터페이스부(400), 어플리케이션 GUI 레퍼런스부(420) 및 저장부(430)의 전반적인 제어 동작을 담당한다. 제어부(410)는 관리자 장치(130)의 요청이 있을 때 어플리케이션 GUI 레퍼런스부(420)를 제어하여 내부에 탑재된 프로그램을 실행시킬 수 있으며, 이에 따라 특정 앱의 실행시 실행 화면의 변화를 감지하고 그 감지 결과에 따라 실행 화면을 자동으로 캡쳐할 수 있다. 예를 들어, 대부분의 앱의 경우 실행 화면은 총 12개 정도의 화면으로 구성될 수 있다. 가령, 메인화면, 서브화면, 또 상세정보 화면 등 화면의 변화를 감지해 자동 캡쳐 동작을 수행할 수 있으며, 제어부(410)는 이러한 동작에 관여할 수 있다.
또한 제어부(410)는 어플리케이션 GUI 레퍼런스부(420)에서 앱의 실행 화면을 자동 캡쳐한 또는 앱스토어에서 앱을 다운로드할 때 함께 다운로드한 이미지의 이미지 데이터의 분석 결과에 따라 자동 분류 동작을 수행할 때 그 자동 분류되는 정보를 근거로 이미지 데이터를 분류하여 도 1의 DB(120a)에 체계적으로 분류하여 저장시킬 수 있다. 제어부(410)는 인트라넷과 같은 내부 전용망을 통해 DB(120a)에 접속하여 데이터를 저장시킬 수 있으며, 이의 과정에서 통신 인터페이스부(400)의 통신을 제어할 수 있다. 가령 앱의 경우 금융, 교육, 스포츠 등의 카테고리를 구분하여 이미지 데이터의 분석이 이루어질 수 있으며, 각각의 앱은 카테고리, UI 패턴, 컴포넌트, 주요색상 등으로 자동 분류되어 저장될 수 있다. 제어부(410)는 이러한 동작에 관여할 수 있다.
어플리케이션 GUI 레퍼런스부(420)는 시중에서 사용되는 다수의 앱에 대하여 앱의 실행 화면을 자동 캡쳐하고, 또 자동 캡쳐된 이미지를 분석하여 이미지 데이터를 생성할 수 있다. 여기서, 이미지 데이터는 이미지의 화소 데이터를 의미할 수 있다. 어플리케이션 GUI 레퍼런스부(430)는 특정 앱에 대하여 카테고리를 구분할 수 있고, 이를 위하여 텍스트 등을 분석할 수 있다. 이를 통해 금융앱인지, 교육앱인지, 스포츠앱인지 등을 구분할 수 있다. 또한, 어플리케이션 GUI 레퍼런스부(420)는 이미지 데이터의 분석을 통해 UI 패턴, 컴포넌트 및 주요색상을 분석하고 분석 결과에 따라 메뉴항목별로 앱의 이미지 데이터를 분류할 수 있다. 예를 들어, 사용자가 금융앱을 선택하고 만약 주요색상 정보를 검색창에 입력한 경우를 가정해 보자. 이의 경우 어플리케이션 GUI 레퍼런스부(420)는 금융앱 중에서 검색창에 입력된 주요색상 정보를 갖는 이미지 데이터를 도 1의 사용자 단말장치(100)로 제공할 수 있다. 물론 이의 과정에서 섬네일 이미지를 먼저 제공하고, 사용자 단말장치(100)에서 특정 이미지를 선택해 그에 대한 주요색상 정보를 확인하도록 서비스를 제공할 수 있다.
어플리케이션 GUI 레퍼런스부(420)에서 제공하는 서비스와 관련해서는 앞서 충분히 설명한 바 있다. 어플리케이션 GUI 레퍼런스부(420)는 카테고리 더 정확하게는 메뉴항목을 사용자가 선택할 때 그에 따른 이미지 데이터를 제공할 수 있지만, 검색창을 통해서도 이미지 데이터를 제공할 수 있다. 예를 들어, 개발자나 디자이너가 선택가능한 메뉴는 도 3b에서 볼 수 있는 바와 같이 카테고리, UI 패턴, 컴포넌트 및 주요색상으로 구분될 수 있다. 특히 주요색상의 메뉴항목이 선택될 때 화면의 일측영역에 또는 선택되는 지점의 그 위쪽으로 주요색상들과 관련한 컬러목록을 제공할 수 있으며, 특정 컬러가 선택될 때 다시 명/채도 선택이 가능한 컬러 상세페이지로 이동하는 등의 동작을 제공할 수 있다. 또한 돋보기 버튼을 통해 컬러를 Hex 코드로 검색하는 등의 기능을 제공할 수 있다. 코드 입력시 이동(화살표) 버튼에 해당 코드의 컬러가 나타나며 버튼 클릭시 컬러 상세페이지로 이동시킬 수 있다.
어플리케이션 GUI 레퍼런스부(420)는 GUI 그림파일 즉 실행화면의 이미지들에 대한 이미지 데이터를 그래픽 즉 시각적인 형태로 구현하기 위한 GUI 처리모듈을 탑재할 수 있다. GUI 처리모듈은 그래픽 카드나 그래픽 처리를 위한 소프트웨어(SW) 모듈이 될 수 있으며, 이를 통해 사용자가 편리하게 사용할 수 있도록 입출력 등의 기능을 알기 쉬운 아이콘 등의 그래픽으로 나타낼 수 있다. 화면 위의 물체나 틀, 색상과 같은 그래픽 요소들은 어떠한 기능과 용도를 나타내기 위해 동작한다고 볼 수 있으며, 앞서 설명한 바 있는 도 3a 내지 도 3n의 GUI 화면 즉 서비스 화면들은 그래픽 처리 모듈을 통해 그래픽 처리되어 도 1의 사용자 단말장치(100)로 제공될 수 있다. 어플리케이션 GUI 레퍼런스부(420)는 이러한 동작에 관여할 수 있다.
저장부(430)는 제어부(410)의 제어하에 다양한 유형의 데이터 또는 정보를 임시 저장할 수 있다. 저장부(430)는 앱의 실행 화면이 자동 캡쳐될 때 자동 캡쳐된 이미지의 이미지 데이터를 임시 저장할 수 있다. 그리고 저장부(430)는 임시 저장된 이미지 데이터를 어플리케이션 GUI 레퍼런스부(420)로 제공하여 데이터 분석이 이루어지도록 할 수 있다.
상기한 내용 이외에도 도 4의 통신 인터페이스부(400), 제어부(410), 어플리케이션 GUI 레퍼런스부(420) 및 저장부(430)는 다양한 동작을 수행할 수 있으며, 기타 자세한 내용은 앞서 충분히 설명하였으므로 그 내용들로 대신하고자 한다.
본 발명의 실시예에 따른 도 4의 통신 인터페이스부(400), 제어부(410), 어플리케이션 GUI 레퍼런스부(420) 및 저장부(430)는 서로 물리적으로 분리된 하드웨어 모듈로 구성되지만, 각 모듈은 내부에 상기의 동작을 수행하기 위한 소프트웨어를 저장하고 이를 실행할 수 있을 것이다. 다만, 해당 소프트웨어는 소프트웨어 모듈의 집합이고, 각 모듈은 하드웨어로 형성되는 것이 얼마든지 가능하므로 소프트웨어니 하드웨어니 하는 구성에 특별히 한정하지 않을 것이다. 예를 들어 저장부(430)는 하드웨어인 스토리지(storage) 또는 메모리(memory)일 수 있다. 하지만, 소프트웨어적으로 정보를 저장(repository)하는 것도 얼마든지 가능하므로 위의 내용에 특별히 한정하지는 않을 것이다.
한편, 본 발명의 다른 실시예로서 제어부(410)는 CPU 및 메모리를 포함할 수 있으며, 원칩화하여 형성될 수 있다. CPU는 제어회로, 연산부(ALU), 명령어해석부 및 레지스트리 등을 포함하며, 메모리는 램을 포함할 수 있다. 제어회로는 제어동작을, 그리고 연산부는 2진비트 정보의 연산 동작을, 그리고 명령어해석부는 인터프리터나 컴파일러 등을 포함하여 고급언어를 기계어로, 또 기계어를 고급언어로 변환하는 동작을 수행할 수 있으며, 레지스트리는 소프트웨어적인 데이터 저장에 관여할 수 있다. 상기의 구성에 따라, 가령 어플리케이션 GUI 레퍼런스 장치(120)의 동작 초기에 어플리케이션 GUI 레퍼런스부(420)에 저장되어 있는 프로그램을 복사하여 메모리 즉 램(RAM)에 로딩한 후 이를 실행시킴으로써 데이터 연산 처리 속도를 빠르게 증가시킬 수 있다. 딥러닝 모델 같은 경우 램(RAM)이 아닌 GPU 메모리에 올라가 GPU를 이용하여 수행 속도를 가속화하여 실행될 수도 있다.
도 5는 도 1의 어플리케이션 GUI 레퍼런스 장치의 구동과정을 나타내는 흐름도이다.
설명의 편의상 도 5를 도 1과 함께 참조하면, 본 발명의 실시예에 따른 어플리케이션 GUI 레퍼런스 장치(120)는 어플리케이션 즉 앱이 실행될 때 자동 캡쳐되는 또는 앱스토어 등에서 다운로드되는 실행 화면과 관련한 이미지의 이미지 데이터를 앱의 카테고리별로 그룹화하여 저장한다(S500). 예를 들어, 특정 앱이 실행될 때 실행화면이 총 12개의 화면으로 구성되는 경우, 어플리케이션 GUI 레퍼런스 장치(120)는 앱이 금융분야에 해당하는 앱인지, 또 교육분야에 해당하는 앱인지 등 카테고리를 구분하여 저장하고, 해당 앱의 12장의 자동 캡쳐 이미지를 그룹화하여 저장할 수 있다.
또한 어플리케이션 GUI 레퍼런스 장치(120)는 그룹화하여 저장한 각 어플리케이션 즉 앱의 이미지 데이터에 대한 분석 결과를 근거로 복수의 메뉴 항목별로 자동 분류하여 이미지 데이터를 재저장하며, 디자이너나 프로그램 개발자의 사용자 단말장치(100)에서 선택하는 지정 메뉴 또는 검색창에서 검색되는 검색어에 상응하는 어플리케이션별 이미지 데이터를 디자인 리소스로서 제공할 수 있다(S510).
어플리케이션 GUI 레퍼런스 장치(120)는 자동 캡쳐된 또는 앱스토어 등에서 다운로드한 이미지의 이미지 데이터를 분석할 수 있다. 해당 이미지 데이터의 분석을 통해 자동 캡쳐된 이미지 즉 한장의 정지 이미지에 대하여 이미지의 구성요소, 형태, 텍스트, 색상 및 시각적 특징을 분석하여 자동 분류를 결정할 수 있으며, 분류 항목은 크게 카테고리, UI 패턴, 컴포넌트, 주요색상 등이 포함될 수 있다. 예를 들어, 메인화면의 텍스트를 분석하는 경우 텍스트의 내용에 따라 카테고리를 분류할 수 있다. 또한, 화면의 경계선을 분석함으로써 화면의 레이아웃 구성 즉 구조를 판단하는 것도 가능할 수 있다. 뿐만 아니라, 화면을 구성하는 화소의 색상 및 밝기값, 가령 계조(gray level)값을 확인함으로써 색상과 명도/채도 등의 정보를 얻는 것도 얼마든지 가능할 수 있다. 이와 같이 메뉴항목별로 분류된 이미지 데이터는 도 1의 DB(120a)에 체계적으로 분류하여 저장할 수 있다.
나아가 어플리케이션 GUI 레퍼런스 장치(120)는 앱이나 웹을 개발하는 또는 기제작된 앱이나 웹의 디자인을 변경할 때 요청하는 즉 UI 화면상에서 선택하는 메뉴항목에 따라 그에 상응하는 이미지 데이터를 도 1의 사용자 단말장치(100)로 제공할 수 있다. 예를 들어 섬네일 이미지의 형태로 제공한 후 특정 이미지가 선택될 때 주요색상과 관련한 데이터를 제공하는 등의 동작을 수행할 수 있다. 분류된 결과를 통해 유사객체들과 비교 분석이 가능하도록 함으로써 원하는 아이디어를 얻을 수 있도록 하며, 디자이너나 개발자 등 사용자에게 필요한 유사 소스를 제공할 수 있다.
상기한 내용 이외에도 도 1의 어플리케이션 GUI 레퍼런스 장치(120)는 다양한 동작을 수행할 수 있으며, 기타 자세한 내용은 앞서 충분히 설명하였으므로 그 내용들로 대신하고자 한다.
본 발명의 실시예를 구성하는 모든 구성 요소들이 하나로 결합하거나 결합하여 동작하는 것으로 설명되었다고 해서, 본 발명이 반드시 이러한 실시 예에 한정되는 것은 아니다. 즉, 본 발명의 목적 범위 안에서라면, 그 모든 구성 요소들이 하나 이상으로 선택적으로 결합하여 동작할 수도 있다. 또한, 그 모든 구성요소들이 각각 하나의 독립적인 하드웨어로 구현될 수 있지만, 각 구성 요소들의 그 일부 또는 전부가 선택적으로 조합되어 하나 또는 복수 개의 하드웨어에서 조합된 일부 또는 전부의 기능을 수행하는 프로그램 모듈을 갖는 컴퓨터 프로그램으로서 구현될 수도 있다. 그 컴퓨터 프로그램을 구성하는 코드들 및 코드 세그먼트들은 본 발명의 기술 분야의 당업자에 의해 용이하게 추론될 수 있을 것이다. 이러한 컴퓨터 프로그램은 컴퓨터가 읽을 수 있는 비일시적 저장매체(non-transitory computer readable media)에 저장되어 컴퓨터에 의하여 읽혀지고 실행됨으로써, 본 발명의 실시 예를 구현할 수 있다.
여기서 비일시적 판독 가능 기록매체란, 레지스터, 캐시(cache), 메모리 등과 같이 짧은 순간 동안 데이터를 저장하는 매체가 아니라, 반영구적으로 데이터를 저장하며, 기기에 의해 판독(reading)이 가능한 매체를 의미한다. 구체적으로, 상술한 프로그램들은 CD, DVD, 하드 디스크, 블루레이 디스크, USB, 메모리 카드, ROM 등과 같은 비일시적 판독가능 기록매체에 저장되어 제공될 수 있다.
이상 첨부된 도면을 참조하여 본 발명의 실시예들을 설명하였지만, 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자는 본 발명의 그 기술적 사상이나 필수적인 특징을 변경하지 않고서 다른 구체적인 형태로 실시될 수 있다는 것을 이해할 수 있을 것이다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적이 아닌 것으로 이해해야만 한
100: 사용자 단말장치 110: 통신망
120: 어플리케이션 GUI 레퍼런스 장치 130: 관리자 장치
400: 통신 인터페이스부 410: 제어부
420: 어플리케이션 GUI 레퍼런스부 430: 저장부
120: 어플리케이션 GUI 레퍼런스 장치 130: 관리자 장치
400: 통신 인터페이스부 410: 제어부
420: 어플리케이션 GUI 레퍼런스부 430: 저장부
Claims (10)
- 삭제
- 삭제
- 삭제
- 삭제
- 삭제
- 제어부가, 앱스토어에 접속하여 복수의 어플리케이션을 다운받는 단계;
상기 제어부가, 어플리케이션이 실행될 때 실행 화면과 관련한 이미지 데이터를 어플리케이션의 카테고리별로 그룹화하여 저장부에 저장하는 단계;
상기 제어부가, 상기 그룹화하여 저장한 각 어플리케이션의 이미지 데이터에 대한 분석 결과를 근거로 복수의 메뉴 항목별로 자동 분류하여 이미지 데이터를 재저장하며, 디자이너나 프로그램 개발자의 사용자 단말장치에서 선택하는 지정 메뉴에 상응하는 어플리케이션별 이미지 데이터를 디자인 리소스로서 제공하는 단계;
상기 제어부가 상기 실행 화면의 이미지 데이터를 분석할 때 이미지의 구성요소, 형태, 텍스트, 색상 및 시각적 특징을 분석하는 단계;를 포함하고,
상기 자동 분류하는 단계는,
상기 저장한 이미지 데이터의 분석 결과를 근거로 카테고리, 사용자 인터페이스(UI) 패턴, 컴포넌트 및 주요색상으로 구성되는 복수의 메뉴 항목별로 자동 분류하고,
상기 제어부가, 상기 사용자 단말장치의 화면상에서 섬네일 이미지가 선택된 후 주요색상의 메뉴항목이 선택될 때 상기 선택한 섬네일 이미지를 구성하는 컬러의 컬러 목록을 화면상에 표시해 주는 단계;를 포함하는, 어플리케이션 GUI 레퍼런스 장치의 구동방법. - 삭제
- 삭제
- 삭제
- 제6항에 있어서,
상기 제어부가, 상기 어플리케이션이 실행될 때 상기 실행 화면의 변화를 감지하여 감지 결과를 근거로 자동 캡쳐 동작을 수행하는 단계;를 더 포함하는, 어플리케이션 GUI 레퍼런스 장치의 구동방법.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| KR1020230111395A KR102640326B1 (ko) | 2023-08-24 | 2023-08-24 | 어플리케이션 gui 레퍼런스 장치 및 그 장치의 구동방법 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| KR1020230111395A KR102640326B1 (ko) | 2023-08-24 | 2023-08-24 | 어플리케이션 gui 레퍼런스 장치 및 그 장치의 구동방법 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| KR102640326B1 true KR102640326B1 (ko) | 2024-02-23 |
Family
ID=90041704
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| KR1020230111395A KR102640326B1 (ko) | 2023-08-24 | 2023-08-24 | 어플리케이션 gui 레퍼런스 장치 및 그 장치의 구동방법 |
Country Status (1)
| Country | Link |
|---|---|
| KR (1) | KR102640326B1 (ko) |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR101095106B1 (ko) | 2008-08-11 | 2011-12-16 | 에스케이플래닛 주식회사 | Ｕｉ 디자인 변경 시스템 및 ｕｉ 디자인 변경 방법 |
| KR20130114326A (ko) | 2012-04-09 | 2013-10-18 | 심플렉스 인터넷 주식회사 | 웹 디자인 거래 방법 및 시스템 |
| KR102198462B1 (ko) * | 2019-12-09 | 2021-01-05 | 주식회사 티맥스소프트 | 텍스트 기반 화면 디자인을 그래픽 기반으로 리모델링하기 위한 디자인 리모델링 테스트 방법, 이를 사용한 디자인 리모델링 테스트 장치 |
| KR20210101165A (ko) | 2020-02-06 | 2021-08-18 | (주)씨앤보코 | 맞춤형 디자인 제공 시스템 |
| KR102351134B1 (ko) | 2021-08-03 | 2022-01-13 | 주식회사 미리디 | 웹 서버 기반의 디자인 리소스 관리 방법 및 시스템 |
| KR20220017065A (ko) * | 2020-08-04 | 2022-02-11 | 삼성전자주식회사 | 캡쳐 기능 제공 방법 및 그 전자 장치 |
| KR20220132459A (ko) | 2021-03-23 | 2022-09-30 | (주)인스웨이브시스템즈 | 디자인 시스템을 구비한 사용자 인터페이스 플랫폼 통합 개발 시스템 및 방법 |
| KR102453345B1 (ko) | 2020-05-19 | 2022-10-11 | 네이버클라우드 주식회사 | 디자인 킷을 이용한 업무 협업을 위한 방법, 시스템, 및 비-일시적인 컴퓨터 판독가능한 기록 매체 |
| KR20230041454A (ko) * | 2021-09-17 | 2023-03-24 | 주식회사 팀솔루션 | 머신러닝 기반의 웹 페이지 템플릿 추천 방법 및 이를 위한 장치 |
-
2023
- 2023-08-24 KR KR1020230111395A patent/KR102640326B1/ko active IP Right Grant
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR101095106B1 (ko) | 2008-08-11 | 2011-12-16 | 에스케이플래닛 주식회사 | Ｕｉ 디자인 변경 시스템 및 ｕｉ 디자인 변경 방법 |
| KR20130114326A (ko) | 2012-04-09 | 2013-10-18 | 심플렉스 인터넷 주식회사 | 웹 디자인 거래 방법 및 시스템 |
| KR102198462B1 (ko) * | 2019-12-09 | 2021-01-05 | 주식회사 티맥스소프트 | 텍스트 기반 화면 디자인을 그래픽 기반으로 리모델링하기 위한 디자인 리모델링 테스트 방법, 이를 사용한 디자인 리모델링 테스트 장치 |
| KR20210101165A (ko) | 2020-02-06 | 2021-08-18 | (주)씨앤보코 | 맞춤형 디자인 제공 시스템 |
| KR102453345B1 (ko) | 2020-05-19 | 2022-10-11 | 네이버클라우드 주식회사 | 디자인 킷을 이용한 업무 협업을 위한 방법, 시스템, 및 비-일시적인 컴퓨터 판독가능한 기록 매체 |
| KR20220017065A (ko) * | 2020-08-04 | 2022-02-11 | 삼성전자주식회사 | 캡쳐 기능 제공 방법 및 그 전자 장치 |
| KR20220132459A (ko) | 2021-03-23 | 2022-09-30 | (주)인스웨이브시스템즈 | 디자인 시스템을 구비한 사용자 인터페이스 플랫폼 통합 개발 시스템 및 방법 |
| KR102351134B1 (ko) | 2021-08-03 | 2022-01-13 | 주식회사 미리디 | 웹 서버 기반의 디자인 리소스 관리 방법 및 시스템 |
| KR20230041454A (ko) * | 2021-09-17 | 2023-03-24 | 주식회사 팀솔루션 | 머신러닝 기반의 웹 페이지 템플릿 추천 방법 및 이를 위한 장치 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| AU2021204770B2 (en) | System integrating a mobile device application creation, editing and distribution system with a website design system | |
| JP5572261B2 (ja) | 興味があるクラウドに含まれる関心タグに基づくコンテンツの選択 | |
| US10140314B2 (en) | Previews for contextual searches | |
| JP2021501382A (ja) | 自動コード生成 | |
| US10902254B2 (en) | Converting a captured image of a layout to a structured document template | |
| US10169374B2 (en) | Image searches using image frame context | |
| TWI489297B (zh) | 貿易卡服務 | |
| US11947981B2 (en) | Computing network for implementing a contextual navigation and action user experience framework and flattening deep information hierarchies | |
| Cardoso et al. | The Multimodal Annotation Software Tool (MAST) | |
| JP2023009753A (ja) | 情報処理装置、情報処理システム、情報処理方法及びプログラム | |
| KR102640326B1 (ko) | 어플리케이션 gui 레퍼런스 장치 및 그 장치의 구동방법 | |
| KR20220048203A (ko) | 웹 아카이브를 활용한 데이터 크롤링 장치 및 방법 | |
| US9760930B1 (en) | Generating modified search results based on query fingerprints | |
| US20160300292A1 (en) | Product navigation tool | |
| JP6862788B2 (ja) | クリアランスチェックプログラム、クリアランスチェック方法、及びクリアランスチェック装置 | |
| KR102593500B1 (ko) | 메타버스를 이용한 헤어샵 운영장치 및 그 장치의 구동방법 | |
| KR102593505B1 (ko) | 챗봇을 이용한 헤어샵 서비스 장치 및 그 장치의 구동방법 | |
| CN114935996B (zh) | 在线处理文档的方法、计算机设备、存储介质 | |
| CN111290683A (zh) | 一种可视化应用实例化的方法、装置及设备 | |
| KR102630438B1 (ko) | 컨텐츠에 대한 리딩 정보 제공 방법 및 장치 | |
| US9747628B1 (en) | Generating category layouts based on query fingerprints | |
| Daniel et al. | Adaptive Multiple User-Device Interface Generation for Websites. | |
| KR102648257B1 (ko) | 딥러닝 방식을 이용한 헤어 서비스 장치 및 그 장치의 구동방법 | |
| KR102399642B1 (ko) | 에뮬레이터를 활용한 상품 데이터 크롤링 장치 및 방법 | |
| Gjorgjioski et al. | Spatial Analysis of Elderly Access to Photographic Services and Their Rating in Skopje |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| E90F | Notification of reason for final refusal | ||
| E701 | Decision to grant or registration of patent right | ||
| GRNT | Written decision to grant |