KR102094027B1 - 딥러닝 학습을 이용한 웹 표준 준수 ui 소스 변환 장치 및 방법 - Google Patents

Abstract

딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치 및 방법이 개시된다. 본 발명의 일 실시예예 따른 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치는 UI 소스를 분석하여 웹 퍼블리싱을 수행하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치로서, 제1 UI 소스의 객체 정보와 브라우저에서 렌더링한 객체 정보를 통합하여 학습용 객체 정보 파일을 생성하는 구조 분석기; 상기 학습용 객체 정보 파일을 이용하여 딥러닝 네트워크의 학습을 위한 학습 데이터를 생성하는 학습 데이터 생성기; 및 상기 학습 데이터를 이용하여 상기 딥러닝 네트워크를 학습시키는 학습기를 포함할 수 있다.

Description

딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치 및 방법{Web standard UI source transformation device and method using deep learning}

본 발명은 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치 및 방법에 관한 것이다.

웹 퍼블리싱(Web publishing)은 웹디자이너 혹은 프로그래머에 의해 디자인되고 웹코딩된 웹사이트에 대해 웹표준성과 웹접근성에 부합하도록 재정리하는 것을 말한다. 이와 관련하여 웹 퍼블리셔라는 직업군이 존재할 정도로 웹사이트 제작에 있어 중요한 부분을 차지한다.

코드를 알지 못하는 웹사이트에 대해서 그 구조를 파악하고자 할 때 혹은 초보 디자이너가 사용하는 툴을 통해 개발된 초보적인 수준의 소스코드를 업그레이드 시킬 필요가 있지만, 현재 해당 작업은 전문 웹 퍼블리셔가 작업을 해야 하는 바, 상당한 작업시간과 비용이 소요되는 단점이 있다.

한국공개특허 제10-2005-0065862호 (2005.06.30 공개) - 사용자 단말기에 저장된 콘텐츠의 웹 퍼블리싱 방법 및 그시스템

본 발명은 화면에 보이는 객체간 구조를 이용해서 웹 퍼블리싱에 필요한 HTML 엘리먼트를 추가하는 방법을 딥러닝 방식으로 학습함으로써 초보 수준의 소스코드에 대해서도 HTML 엘리먼트를 적재적소에 추가하여 전문 웹 퍼블리셔가 개발한 것과 같이 웹 표준을 준수하는 소스코드의 생성이 가능한 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치 및 방법을 제공하기 위한 것이다.

본 발명의 이외의 목적들은 하기의 설명을 통해 쉽게 이해될 수 있을 것이다.

본 발명의 일 측면에 따르면, UI 소스를 분석하여 웹 퍼블리싱을 수행하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치로서, 제1 UI 소스의 객체 정보와 브라우저에서 렌더링한 객체 정보를 통합하여 학습용 객체 정보 파일을 생성하는 구조 분석기; 상기 학습용 객체 정보 파일을 이용하여 딥러닝 네트워크의 학습을 위한 학습 데이터를 생성하는 학습 데이터 생성기; 및 상기 학습 데이터를 이용하여 상기 딥러닝 네트워크를 학습시키는 학습기를 포함하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치가 제공된다.

상기 구조 분석기는 제2 UI 소스의 객체 정보와 브라우저에서 랜더링한 객체 정보를 통합하여 변환용 객체 정보 파일을 생성하되, 상기 변환용 객체 정보 파일을 이용하여 상기 딥러닝 네트워크에 적용하기 위한 변환 데이터를 생성하는 변환 데이터 생성기; 상기 딥러닝 네트워크에 상기 변환 데이터를 입력하여 결과를 예측하는 예측기; 상기 예측기에서의 예측 결과를 변환용 객체 정보 파일과 결합하여 출력 객체 정보 파일을 생성하는 계층 빌더; 및 상기 출력 객체 정보 파일을 상기 제2 UI 소스와 결합하여 웹표준을 준수하는 웹표준 준수 UI 소스로 재구성하는 웹표준 UI 소스 빌더를 더 포함할 수 있다.

상기 제1 UI 소스는 웹표준 준수 UI 소스에 해당하는 XML 파일이며, 상기 학습용 객체 정보 파일은 특징(Features) 학습을 위한 입력 JSON 파일과 학습시 정답(Label) 데이터인 출력 JSON 파일을 포함할 수 있다.

상기 출력 JSON 파일은 웹표준을 준수하여 구현된 HTML의 DOM Tree 정보가 포함된 파일일 수 있다.

상기 학습기에서 처리하는 상기 학습 데이터는 원 핫 인코딩(one hot encoding)이 적용된 어레이(array) 형태를 가질 수 있다.

상기 학습기는 역전파를 이용하여 학습을 진행하고, 일정 수준 이상의 정확도가 학습되면 학습을 종료시킬 수 있다.

상기 계층 빌더는 상기 변환용 객체 정보 파일에 부모-자식 관계 및 형제 관계가 반영된 DOM Tree 구조를 추가할 수 있다.

상기 제2 UI 소스는 앱솔루트 방식 XML 파일이고, 상기 웹표준 준수 UI 소스는 랠러티브 방식 XML 파일일 수 있다.

일반 UI 개발도구로 개발한 소스를 앱솔루트 방식으로 변환하는 소스 변환기를 더 포함하되, 상기 소스 변환기에서 변환된 상기 소스가 상기 제2 UI 소스로 상기 구조 분석기에 입력될 수 있다.

상기 구조 분석기는 상기 제2 UI 소스의 실행 화면에서 소스를 재구성하고자 하는 객체를 영역 지정 방식으로 선택하는 변환 영역 선택부를 포함할 수 있다.

한편 본 발명의 다른 측면에 따르면, UI 소스를 분석하여 웹 퍼블리싱을 수행하는 웹 표준 준수 UI 소스 변환 장치에서 수행되는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 방법으로서, 제1 UI 소스의 객체 정보와 브라우저에서 렌더링한 객체 정보를 통합하여 학습용 객체 정보 파일을 생성하는 단계; 상기 학습용 객체 정보 파일을 이용하여 딥러닝 네트워크의 학습을 위한 학습 데이터를 생성하는 단계; 상기 학습 데이터를 이용하여 상기 딥러닝 네트워크를 학습시키는 단계; 제2 UI 소스의 객체 정보와 브라우저에서 랜더링한 객체 정보를 통합하여 변환용 객체 정보 파일을 생성하는 단계; 상기 변환용 객체 정보 파일을 이용하여 상기 딥러닝 네트워크에 적용하기 위한 변환 데이터를 생성하는 단계; 상기 딥러닝 네트워크에 상기 변환 데이터를 입력하여 결과를 예측하는 단계; 상기 예측 결과를 변환용 객체 정보 파일과 결합하여 출력 객체 정보 파일을 생성하는 단계; 및 상기 출력 객체 정보 파일을 상기 제2 UI 소스와 결합하여 웹표준을 준수하는 웹표준 준수 UI 소스로 재구성하는 단계를 더 포함하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 방법이 제공된다.

전술한 것 외의 다른 측면, 특징, 이점이 이하의 도면, 특허청구범위 및 발명의 상세한 설명으로부터 명확해질 것이다.

본 발명의 실시예에 따르면, 화면에 보이는 객체간 구조를 이용해서 웹 퍼블리싱에 필요한 HTML 엘리먼트를 추가하는 방법을 딥러닝 방식으로 학습함으로써 초보 수준의 소스코드에 대해서도 HTML 엘리먼트를 적재적소에 추가하여 전문 웹 퍼블리셔가 개발한 것과 같이 웹 표준을 준수하는 소스코드의 생성이 가능한 효과가 있다.

도 1은 기계적으로 변환된 DOM Tree 예시도,
도 2는 본 발명의 일 실시예에 따른 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치가 변환한 DOM Tree 예시도,
도 3은 본 발명의 일 실시예에 따른 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치의 개략적인 구성블록도,
도 4는 본 발명의 일 실시예에 따른 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 방법의 순서도,
도 5는 입력 JSON의 예시도,
도 6은 트리 빌더에서 트리를 생성하는 과정을 설명하기 위한 도면,
도 7은 출력 JSON의 예시도,
도 8은 array 예제 화면,
도 9는 도 8의 화면에 대한 앱솔루트 방식의 입력 DOM 구조를 나타낸 도면,
도 10은 도 8의 화면에 대한 랠러티브 방식의 출력 DOM 구조를 나타낸 도면.

본 발명은 다양한 변경을 가할 수 있고 여러 가지 실시예를 가질 수 있는 바, 특정 실시예들을 도면에 예시하고 상세하게 설명하고자 한다. 그러나 이는 본 발명을 특정한 실시 형태에 대해 한정하려는 것이 아니며, 본 발명의 사상 및 기술 범위에 포함되는 모든 변경, 균등물 내지 대체물을 포함하는 것으로 이해되어야 한다.

어떤 구성요소가 다른 구성요소에 "연결되어" 있다거나 "접속되어" 있다고 언급된 때에는, 그 다른 구성요소에 직접적으로 연결되어 있거나 또는 접속되어 있을 수도 있지만, 중간에 다른 구성요소가 존재할 수도 있다고 이해되어야 할 것이다. 반면에, 어떤 구성요소가 다른 구성요소에 "직접 연결되어" 있다거나 "직접 접속되어" 있다고 언급된 때에는, 중간에 다른 구성요소가 존재하지 않는 것으로 이해되어야 할 것이다.

제1, 제2 등의 용어는 다양한 구성요소들을 설명하는데 사용될 수 있지만, 상기 구성요소들은 상기 용어들에 의해 한정되어서는 안 된다. 상기 용어들은 하나의 구성요소를 다른 구성요소로부터 구별하는 목적으로만 사용된다.

본 명세서에서 사용한 용어는 단지 특정한 실시예를 설명하기 위해 사용된 것으로, 본 발명을 한정하려는 의도가 아니다. 단수의 표현은 문맥상 명백하게 다르게 뜻하지 않는 한, 복수의 표현을 포함한다. 본 명세서에서, "포함하다" 또는 "가지다" 등의 용어는 명세서상에 기재된 특징, 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것이 존재함을 지정하려는 것이지, 하나 또는 그 이상의 다른 특징들이나 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것들의 존재 또는 부가 가능성을 미리 배제하지 않는 것으로 이해되어야 한다.

또한, 각 도면을 참조하여 설명하는 실시예의 구성 요소가 해당 실시예에만 제한적으로 적용되는 것은 아니며, 본 발명의 기술적 사상이 유지되는 범위 내에서 다른 실시예에 포함되도록 구현될 수 있으며, 또한 별도의 설명이 생략될지라도 복수의 실시예가 통합된 하나의 실시예로 다시 구현될 수도 있음은 당연하다.

또한, 첨부 도면을 참조하여 설명함에 있어, 도면 부호에 관계없이 동일한 구성 요소는 동일하거나 관련된 참조부호를 부여하고 이에 대한 중복되는 설명은 생략하기로 한다. 본 발명을 설명함에 있어서 관련된 공지 기술에 대한 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우 그 상세한 설명을 생략한다.

또한, 명세서에 기재된 "…부", "…모듈", "…기" 등의 용어는 적어도 하나의 기능이나 동작을 처리하는 단위를 의미하며, 이는 하드웨어나 소프트웨어 또는 하드웨어 및 소프트웨어의 결합으로 구현될 수 있다.

도 1은 기계적으로 변환된 DOM Tree 예시도이고, 도 2는 본 발명의 일 실시예에 따른 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치가 변환한 DOM Tree 예시도이다.

DOM(Document Object Model)은 HTML, XHTML, XML 문서를 각 노드에서 문서의 일부를 나타내는 객체인 트리 구조로 처리하는 크로스 플랫폼 및 언어 독립적인 응용프로그램 프로그래밍 인터페이스이다. DOM 모델은 논리 트리를 가지는 문서를 나타낸다. 트리의 각 브랜치는 노드에서 끝나며, 각 노드는 객체를 포함한다.

도 1에는 기계적으로 변환된 DOM Tree 예시가 도시되어 있다. 절대좌표 방식에 따라 body를 기준으로 하여 화면에 표시되는 엘리먼트인 input, button, grid가 모두 동일한 계층에 속하는 것으로 변환된다. 하지만, 실제 화면에서 동일한 계층에 있는 것처럼 표시될지라도 그 속성이 부모 객체 혹은 자녀 객체로 상이할 수도 있기에 화면에 보이는 그대로의 변환은 웹 퍼블리싱 관점에서는 바람직하지 않다.

따라서, 도 2에 도시된 것과 같이, 화면에서는 동일한 계층으로 보일지라도 객체간 구조를 적용하여 웹 퍼블리싱에서 필요한 노드에 해당하는 신규의 HTML 엘리먼트(예컨대, div)를 추가할 필요가 있다.

이하에서는 도 2에 도시된 것과 같은 DOM Tree 변환이 가능하도록 하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치 및 방법에 대하여 상세히 설명하기로 한다.

도 3은 본 발명의 일 실시예에 따른 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치의 개략적인 구성블록도이고, 도 4는 본 발명의 일 실시예에 따른 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 방법의 순서도이다.

본 발명의 일 실시예에 따른 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치(100)는 화면에 보이는 객체간 구조를 이용해서 웹 퍼블리싱에 필요한 HTML 엘리먼트를 추가하는 방법을 학습함으로써 초보 수준의 소스코드에 대해서도 HTML 엘리먼트를 적재적소에 추가하여 전문 웹 퍼블리셔가 개발한 것과 같이 웹 표준을 준수하는 소스코드를 생성해 줄 수 있는 것을 특징으로 한다.

본 실시예에 따른 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치(100)는 구조 분석기(110), 학습 데이터 생성기(120), 학습기(130), 변환 데이터 생성기(140), 예측기(150), 계층 빌더(160), 웹표준 UI 소스 빌더(170)를 포함한다.

구조 분석기(110)는 XML 파일의 객체 정보(제1 객체 정보)와 브라우저에서 렌더링한 객체의 정보(제2 객체 정보)를 통합하여 객체 정보 JSON 파일을 생성한다.

입력 데이터는 XML 타입의 UI 소스이며, 출력 데이터는 JSON 타입의 객체 정보 파일이다. 여기서, XML, JSON은 일 실시예로서, 필요에 따라 다른 데이터 포맷의 파일이 이용될 수도 있음은 물론이다.

구조 분석기(110)에는 웹표준 분석기(112), 앱솔루트 분석기(114), 트리 빌더(116)가 포함된다.

웹표준 분석기(112)에는 웹표준 준수 UI 소스에 해당하는 제1 XML 파일이 입력된다. 웹표준 분석기(112)는 입력된 제1 XML 파일을 분석하여 학습을 위한 학습 데이터를 생성하기 위한 학습용 JSON 파일을 생성하여 출력한다.

여기서, 학습용 JSON 파일은 특징(Feature) 학습을 위한 입력 JSON 파일과 학습시 사용되는 정답(Label) 데이터인 출력 JSON 파일을 포함한다. 출력 JSON 파일은 웹표준을 준수하여 구현된 HTML의 DOM Tree 정보가 포함되어 있는 파일로, 웹표준 준수 UI 소스에서만 생성할 수 있다.

앱솔루트(absolute) 분석기(114)에는 웹표준 미준수 UI 소스(절대좌표 방식)에 해당하는 제2 XML 파일이 입력된다. 앱솔루트 분석기(114)는 제2 XML 파일에서 화면에 시각적으로 표시되는 각종 컴포넌트의 정보를 추출한다. 추출되는 컴포넌트 정보로는 가로 위치(x), 세로 위치(y), 폭(width), 높이(height) 등이 있다.

트리(tree) 빌더(116)는 앱솔루트 분석기(114)에서 생성한 컴포넌트 정보를 기준으로 시각적인 포함관계를 분석하고, 시각적인 포함관계를 기준으로 트리를 생성한다. 예컨대, 도 1에 도시된 것과 같이 기계적으로 변환된 DOM Tree가 생성될 수 있다. 트리 빌더(116)는 웹표준 준수 UI 소스로의 변환을 위한 변환용 입력 JSON 파일을 출력한다.

학습 데이터 생성기(120)는 객체 정보 JSON 파일(특히, 학습용 JSON 파일)을 읽어들여서 학습기(130)에서 처리할 수 있는 데이터 포맷을 가지는 학습 데이터를 생성한다.

학습기(130)에서 처리할 수 있는 데이터 포맷은 원 핫 인코딩(one hot encoding)이 적용된 어레이(array) 형태를 가질 수 있다.

학습 데이터 생성기(120)에서 출력되는 학습 데이터는 학습(예컨대, 딥러닝(deep learning))을 위한 입력 어레이(input array)와 출력 어레이(output array)를 포함한다.

학습에 사용되는 입력 어레이는 여러가지 특징(feature)을 중심으로 데이터를 추출하게 되는 바, features(특징)로 지칭될 수 있다.

학습기(130)에서는 입력으로 주어지는 여러가지 특징과 함께 Label을 정답으로 제공하여 특징에서 Label을 도출하는 과정을 학습으로 진행하게 된다. 따라서, 출력 어레이는 labels(라벨)로 지칭될 수 있다.

학습기(130)는 학습 데이터 생성기(120)에서 생성된 학습 데이터를 이용하여 딥러닝 네트워크(DNN, Deep Neural Network, 심층신경망)를 학습시킨다. 학습기(130)는 역전파(back propagation)를 이용하여 학습을 진행하고, 정확도를 측정해서 일정 수준 이상 학습되면 학습을 종료할 수 있다.

변환 데이터 생성기(140)는 객체 정보 JSON 파일을 읽어들여서 예측기(150)에서 처리할 수 있는 데이터 포맷을 가지는 변환 데이터를 생성한다. 변환 데이터 생성기(140)에서 읽어들이는 객체 정보 JSON 파일은 트리 빌더(116)에서 생성된 변환 대상 JSON 파일이며, 변환 데이터는 딥러닝용 입력 어레이 형태를 가질 수 있다.

예측기(150)는 학습기(130)에서 학습된 결과(parameter)가 적용된 딥러닝 네트워크에 변환 데이터를 입력하여 결과를 예측한다. 예측기(150)에서는 딥러닝용 출력 어레이가 출력 데이터로 출력될 수 있다.

계층 빌더(Hierarchy Builder)(160)는 예측기(150)에서 출력된 딥러닝용 출력 어레이와 구조 분석기(110)(특히, 트리 빌더(116))에서 출력된 변환용 입력 JSON 파일을 결합하여 개선된 DOM Tree 구조(부모-자식 관계, 형제 관계(순서 적용) 반영)가 추가된 변환용 출력 JSON 파일을 생성한다.

웹표준 UI 소스 빌더(170)는 DOM Tree 구조가 추가된 변환용 출력 JSON 파일과 원본 XML 파일을 이용하여 DOM Tree 구조가 추가된 변환 XML 파일을 생성한다. 변환 XML 파일은 웹표준을 준수하는 UI 소스로서, 도 2에 도시된 것과 같이 체계적인 계층 구조에 해당하는 DOM Tree 구조를 가질 수 있다.

본 실시예에서 앱솔루트 분석기(114)로 입력되는 제2 XML 파일의 경우, 일반적인 X-Internet UI 개발도구(예컨대, 마이플랫폼(miplatform), 트러스트폼(trustform))로 개발한 소스를 앱솔루트 방식으로 변환한 파일일 수 있다. 이 경우 제2 XML 파일을 생성하기 위한 소스 변환기(미도시)가 앱솔루트 분석기(114)의 전단에 구비될 수 있다.

또한, 앱솔루트 방식으로 구현된 소스(제2 XML 파일)의 실행 화면에서 일정 영역에 있는 객체를 선택한 후 이를 분석하여 트리 구조를 생성하고 랠러티브(relative) 방식으로 변경할 수도 있다. 이 경우 변환하고자 하는 영역을 선택하는 변환 영역 선택부(미도시)가 앱솔루트 분석기(114)에 포함될 수 있다.

또한, 본 실시예에서는 사용자(개발자 혹은 기획자)가 앱솔루트로 소스를 개발하면 랠러티브 형태로 변환해 줄 수 있게 된다. 따라서, 사용자는 보다 직관적으로 웹 화면을 개발 혹은 기획하고, 이에 대한 소스 생성은 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치(100)에 맡김으로써 작업 시간을 단축시키면서도 웹 표준을 준수하는 소스 구현이 가능할 수 있다.

도 3을 참조하여 본 실시예에 따른 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치(100)에서 수행되는 웹 퍼빌리싱 방법에 대해 설명하기로 한다.

웹표준 분석기(112)는 제1 XML 파일을 분석하여 학습용 JSON 파일을 생성한다(단계 S200). 제1 XML 파일은 웹표준을 준수하는 UI 소스로, 딥러닝 학습을 위한 학습용 파일에 해당한다. 학습용 JSON 파일에는 문제에 해당하는 입력 JSON 파일과 정답에 해당하는 출력 JSON 파일이 모두 포함된다.

학습 데이터 생성기(120)는 학습용 JSON 파일을 이용하여 어레이 형태의 학습 데이터를 생성한다(단계 S205). 학습 데이터에는 입력 어레이와 출력 어레이가 모두 포함된다.

학습기(130)는 학습 데이터를 이용하여 딥러닝 네트워크를 학습시킨다(단계 S210).

본 실시예에서 학습기(130)에서 딥러닝 학습을 위해 적용되는 네트워크 모델(DNN)은 다음과 같다.

(1) LSTM

입력 JSON의 엘리먼트들을 차례대로 인코딩하여 LSTM을 통해 앞뒤 문맥에 따른 계층(hierarhy)을 예측하게 함. 엘리먼트 수준에서 정확도는 98.0% 정도임. 시계열 입력 데이터를 생성하기 위해 전처리의 일환으로, y축과 x축을 기준으로 엘리먼트들을 정렬하여 차례대로 컨텍스트(context)를 생성함.

(2) mask-RCNN (instance segmentation with Mask R-CNN)

입력 JSON을 이미지로 인코딩해 시맨틱 세그멘테이션(semantic segmentation)을 통해 각 엘리먼트들이 어떠한 영역에 속해있는지 판단하게 함.

(3) CRNN (CNN+LSTM)

기존 LSTM 모델에 입력 JSON의 이미지 인코딩을 처리하는 콘볼루션 레이어(convolutional layer)를 추가하여 계층을 예측하는데 있어 입력 JSON의 텍스추얼 컨텍스트(textual context)와 비주얼 컨텍스트(visual context)를 동시에 사용하도록 함.

(4) SegNet

시맨틱 세그멘테이션을 수행하되, 구조적으로 마스크 오버래핑(mask overlapping)이 일어나지 않은 모델임.

딥러닝 학습이 어느 정도 이루어진 이후, 딥러닝 네트워크를 이용하여 웹 퍼블리싱을 진행할 수 있게 된다.

앱솔루트 분석기(114) 및 트리 빌더(116)에서는 변환 대상인 제2 XML 파일을 분석하여 변환용 JSON 파일을 생성한다(단계 S215). 제2 XML 파일은 웹표준을 준수하지 않은 UI 소스이며, 앱솔루트 방식으로 해석되는 소스일 수 있다. 변환용 JSON 파일에는 학습용 JSON 파일과는 달리 입력 JSON 파일만이 포함된다.

변환 데이터 생성기(140)는 변환용 JSON 파일을 이용하여 어레이 형태의 변환 데이터를 생성한다(단계 S220). 변환 데이터는 입력 어레이일 수 있다.

예측기(150)는 단계 S210에 따른 학습 결과가 적용된 딥러닝 네트워크에 변환 데이터를 입력하여 그 결과를 예측한다(단계 S225). 예측된 결과는 출력 어레이 형태를 가질 수 있다.

계층 빌더(160)는 딥러닝용 출력 어레이와 변환용 JSON 파일을 결합하여 DOM Tree 구조가 추가된 변환용 출력 JSON 파일을 생성한다(단계 S230).

웹표준 UI 소스 빌더(170)는 변환용 출력 JSON 파일과 원본 XML 파일(제2 XML 파일)을 이용하여 웹표준을 준수한 UI 소스인 변환 XML 파일을 생성한다(단계 S235).

본 실시예에서는 딥러닝 학습을 통해 화면에서 보이는 객체 간의 구조를 이용하여 웹 퍼블리싱에서 필요한 HTML 엘리먼트를 적재적소에 추가한 DOM Tree 구조를 가지되 웹표준을 준수하는 UI 소스를 개발할 수 있게 한다.

이하에서는 입력 JSON, 출력 JSON, 입력 DOM 구조, 출력 DOM 구조에 대해서 관련 도면을 참조하여 설명하기로 한다.

도 5는 입력 JSON의 예시도이고, 도 6은 트리 빌더에서 트리를 생성하는 과정을 설명하기 위한 도면이며, 도 7은 출력 JSON의 예시도이고, 도 8은 array 예제 화면이며, 도 9는 도 8의 화면에 대한 앱솔루트 방식의 입력 DOM 구조를 나타낸 도면이고, 도 10은 도 8의 화면에 대한 랠러티브 방식의 출력 DOM 구조를 나타낸 도면이다.

본 실시예에서는 입력 XML 파일 혹은 타 솔루션의 화면 소스에서 학습기(130)의 입력으로 사용할 학습용 데이터로서, 텐서(tensor)를 생성하기 위한 중간 파일로 json 형식을 이용한다.

도 5를 참조하면, 입력 JSON이 예시되어 있다. 인라인 스타일(inline style), uuid, 텍스트 노드(text node) 여부, 컴포넌트 종류, 클래스 종류, XML 소스 문자열, 배경색 여부, 가로 위치, 세로 위치, 컴포넌트의 폭, 높이, 테두리 여부, id, html 태그(tag)를 지정한 경우 입력, 하위 노드 객체 등의 데이터가 포함된다.

입력 JSON의 경우, 화면에 보이는 요소만으로 트리를 구성한다. 구조 분석기(110), 특히 웹표준 분석기(112) 및/또는 트리 빌더(116)는 브라우저에서 생성된 HTML과 XML을 분석하여 계층정보가 포함된 입력 JSON을 구성한다.

화면에서 시각적으로 확인할 수 없는 컴포넌트(테두리, 배경색이 없는 경우 등)는 포함하지 않는다.

앱솔루트 분석기(114) 및 트리 빌더(116)에서는, 앱솔루트로 배치된 화면에서 데이터를 생성하는 경우에는 화면에 그려지는 컴포넌트의 가로 위치(x), 세로 위치(y), 폭(width), 높이(height)를 기준으로 포함관계를 계산하여 트리를 구성한다.

예를 들어, 트리 빌더(116)는 컴포넌트의 가로 위치(x), 세로 위치(y), 폭, 높이를 기준으로 부모, 자식 관계를 계산한다. 또한, 면적 기준으로 중첩되는 면적 비율(%)을 기준으로 포함여부를 계산할 수도 있다.

또한, 트리 빌더(116)는 컴포넌트의 가로 위치(x), 세로 위치(y), 폭, 높이를 기준으로 형제간 순서를 계산한다.

예를 들어, 도 6의 (a)와 같은 원본 소스를 가정하기로 한다.

해당 원본 소스는 도 6의 (b)와 같은 화면을 구성하게 된다.

원본 소스에서는 a, b, c 소스가 포함관계 없이 임의의 순서(b, c, a)로 나열되어 있다. 하지만, 화면에 그려진 모습을 보면 a 객체에 b와 c가 포함된 것을 확인할 수 있고, b와 c는 같은 형제이지만 b가 먼저 그려진 것을 확인할 수 있다.

따라서, 트리 빌더(116)에서는 이러한 객체의 시각적인 정보를 기준으로 도 6의 (c)에 도시된 것과 같이 a 객체에 b와 c가 포함되고, b가 c보다 앞선 형제 객체로 구성되도록 DOM Tree를 재구성할 수 있다.

도 7에는 출력 JSON이 예시되어 있다. 출력 JSON은 예측기(150)의 출력 텐서에서 재구성된 JSON 파일로서 입력 JSON 파일과 결합하여 트리 구조가 변경된 웹표준 준수 UI 소스를 생성하는데 사용될 수 있다.

학습을 위한 데이터는 웹표준 XML(제1 XML 파일)의 화면 소스에서 트리 계층 구조를 추출하여 생성할 수 있다(웹표준 분석기(112)).

도 8에는 어레이 생성을 위한 예제 화면이 도시되어 있다.

입력 어레이는 학습기(130)에 적용된 딥러닝 방식의 구조에 따라 그 형태가 변경될 수 있다. 기본적인 구조는 다음과 같다.

학습기(130)의 입력으로 사용할 텐서로서, 입력 JSON에서 생성한다. html 태그 정보를 추가하지 않을 수 있다.

예를 들어, 입력 어레이의 경우, 데이터 쉐이프(data shape)는 362 길이이고 데이터 타입(data type)은 float32일 수 있다.

data shape = (4 + 54)*4 + 15 + 15 + 50 + 50 = 362

[(x, y, width, height, components... ) self,

(x, y, width, height, components... ) parent,

(x, y, width, height, components... ) left sibling,

(x, y, width, height, components... ) right sibling,

parent tree height..., child tree height..., number of sibing..., sibling position...]

학습 데이터 생성기(120) 및/또는 변환 데이터 생성기(140)에서 입력 어레이가 생성되며, 입력 어레이의 생성 절차는 다음과 같다.

입력 어레이는 html 태그에 대한 정보를 제외한 데이터와 html 태그에 대한 정보를 포함한 데이터를 구분하여 생성할 수 있다.

컴포넌트의 가로 위치, 세로 위치, 폭, 높이를 정규화한다. 여기서, 가로 위치(x)와 폭(width)의 기준값이 같고, 세로 위치(y)와 높이(height)의 기준값이 같을 수 있다.

컴포넌트 정보를 원 핫 인코딩(one hot encoding) 방식으로 변환한다. 컴포넌트는 현재 컴포넌트를 모두 나열한 후 향후 추가될 수 있도록 other를 마지막에 추가한다.

주변 정보를 포함시키기 위해서는 부모(parent), 형제(sibling(left, right)) 정보를 동일한 방식으로 포함한다.

트리에서 자신의 위치를 파악할 수 있도록 부모 높이, 자식 높이(서브 트리 높이), 형제 크기(sibling size), 자신 위치(my position(in sibling))를 추가한다.

부모와 자식은 길이 15인 array로 구성할 수 있다.

형제와 자신 위치는 길이 50인 array로 구성할 수 있다.

html 태그는 입력가능한 모든 태그를 표현할 수 있도록 구성한다. 125의 태그 리스트와 5의 여유를 둘 수 있다. 태그가 설정되지 않은 경우 모두 0으로 설정한다.

학습 데이터 생성기(120) 및/또는 예측기(150)에서 생성되는 출력 어레이는 딥러닝 방식의 구조에 따라 그 형태가 변경될 수 있다. 기본적으로 출력 어레이의 구조는 다음과 같다.

출력 어레이는 자신의 오른쪽 형제와의 관계를 나타낸다. 출력 어레이는 그룹(group), 비그룹(non-group), 테이블(table) 등의 라벨이 one hot encoding된 형태를 가진다.

shape : [G, NG, TB]

출력 어레이의 생성 절차는 다음과 같다.

입력 데이터에서 생성한 텐서를 순서대로 읽어서 출력 JSON에서 해당 노드를 찾는다. 해당 노드와 다음 형제와의 관계를 확인한다. 관계에 따라 그룹, 비그룹, 테이블 라벨을 생성한다.

전술한 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 방법은 디지털 처리 장치에 내장된 소프트웨어 프로그램 등에 의해 시계열적 순서에 따른 자동화된 절차로 수행될 수도 있음은 당연하다. 상기 프로그램을 구성하는 코드들 및 코드 세그먼트들은 당해 분야의 컴퓨터 프로그래머에 의하여 용이하게 추론될 수 있다. 또한, 상기 프로그램은 컴퓨터가 읽을 수 있는 정보저장매체(computer readable media)에 저장되고, 컴퓨터에 의하여 읽혀지고 실행됨으로써 상기 방법을 구현한다. 상기 정보저장매체는 자기 기록매체, 광 기록매체 등을 포함한다.

상기에서는 본 발명의 실시예를 참조하여 설명하였지만, 해당 기술 분야에서 통상의 지식을 가진 자라면 하기의 특허 청구의 범위에 기재된 본 발명의 사상 및 영역으로부터 벗어나지 않는 범위 내에서 본 발명을 다양하게 수정 및 변경시킬 수 있음을 이해할 수 있을 것이다.

100: 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치
110: 구조 분석기 112: 웹표준 분석기
114: 앱솔루트 분석기 116: 트리 빌더
120: 학습 데이터 생성기 130: 학습기
140: 변환 데이터 생성기 150: 예측기
160: 계층 빌더 170: 웹표준 UI 소스 빌더

Claims (17)

1. UI 소스를 분석하여 웹 퍼블리싱을 수행하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치로서,
   제1 UI 소스의 객체 정보와 브라우저에서 렌더링한 객체 정보를 통합하여 학습용 객체 정보 파일을 생성하는 구조 분석기;
   상기 학습용 객체 정보 파일을 이용하여 딥러닝 네트워크의 학습을 위한 학습 데이터를 생성하는 학습 데이터 생성기; 및
   상기 학습 데이터를 이용하여 상기 딥러닝 네트워크를 학습시키는 학습기를 포함하되,
   상기 구조 분석기는 제2 UI 소스의 객체 정보와 브라우저에서 랜더링한 객체 정보를 통합하여 변환용 객체 정보 파일을 생성하며,
   상기 변환용 객체 정보 파일을 이용하여 상기 딥러닝 네트워크에 적용하기 위한 변환 데이터를 생성하는 변환 데이터 생성기;
   상기 딥러닝 네트워크에 상기 변환 데이터를 입력하여 결과를 예측하는 예측기;
   상기 예측기에서의 예측 결과를 변환용 객체 정보 파일과 결합하여 출력 객체 정보 파일을 생성하는 계층 빌더; 및
   상기 출력 객체 정보 파일을 상기 제2 UI 소스와 결합하여 웹표준을 준수하는 웹표준 준수 UI 소스로 재구성하는 웹표준 UI 소스 빌더를 더 포함하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치.
   
2. 삭제
3. 제1항에 있어서,
   상기 제1 UI 소스는 웹표준 준수 UI 소스에 해당하는 XML 파일이며,
   상기 학습용 객체 정보 파일은 특징(Features) 학습을 위한 입력 JSON 파일과 학습시 정답(Label) 데이터인 출력 JSON 파일을 포함하는 것을 특징으로 하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치.
   
4. 제3항에 있어서,
   상기 출력 JSON 파일은 웹표준을 준수하여 구현된 HTML의 DOM Tree 정보가 포함된 파일인 것을 특징으로 하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치.
   
5. 제1항에 있어서,
   상기 학습기에서 처리하는 상기 학습 데이터는 원 핫 인코딩(one hot encoding)이 적용된 어레이(array) 형태를 가지는 것을 특징으로 하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치.
   
6. 제1항에 있어서,
   상기 학습기는 역전파를 이용하여 학습을 진행하고, 일정 수준 이상의 정확도가 학습되면 학습을 종료시키는 것을 특징으로 하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치.
   
7. 제1항에 있어서,
   상기 계층 빌더는 상기 변환용 객체 정보 파일에 부모-자식 관계 및 형제 관계가 반영된 DOM Tree 구조를 추가하는 것을 특징으로 하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치.
   
8. 제1항에 있어서,
   상기 제2 UI 소스는 앱솔루트 방식 XML 파일이고, 상기 웹표준 준수 UI 소스는 랠러티브 방식 XML 파일인 것을 특징으로 하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치.
   
9. 제1항에 있어서,
   일반 UI 개발도구로 개발한 소스를 앱솔루트 방식으로 변환하는 소스 변환기를 더 포함하되,
   상기 소스 변환기에서 변환된 상기 소스가 상기 제2 UI 소스로 상기 구조 분석기에 입력되는 것을 특징으로 하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치.
   
10. 제1항에 있어서,
    상기 구조 분석기는 상기 제2 UI 소스의 실행 화면에서 소스를 재구성하고자 하는 객체를 영역 지정 방식으로 선택하는 변환 영역 선택부를 포함하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 장치.
    
11. UI 소스를 분석하여 웹 퍼블리싱을 수행하는 웹 표준 준수 UI 소스 변환 장치에서 수행되는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 방법으로서,
    제1 UI 소스의 객체 정보와 브라우저에서 렌더링한 객체 정보를 통합하여 학습용 객체 정보 파일을 생성하는 단계;
    상기 학습용 객체 정보 파일을 이용하여 딥러닝 네트워크의 학습을 위한 학습 데이터를 생성하는 단계;
    상기 학습 데이터를 이용하여 상기 딥러닝 네트워크를 학습시키는 단계;
    제2 UI 소스의 객체 정보와 브라우저에서 랜더링한 객체 정보를 통합하여 변환용 객체 정보 파일을 생성하는 단계;
    상기 변환용 객체 정보 파일을 이용하여 상기 딥러닝 네트워크에 적용하기 위한 변환 데이터를 생성하는 단계;
    상기 딥러닝 네트워크에 상기 변환 데이터를 입력하여 결과를 예측하는 단계;
    상기 예측 결과를 변환용 객체 정보 파일과 결합하여 출력 객체 정보 파일을 생성하는 단계; 및
    상기 출력 객체 정보 파일을 상기 제2 UI 소스와 결합하여 웹표준을 준수하는 웹표준 준수 UI 소스로 재구성하는 단계를 더 포함하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 방법.
    
12. 제11항에 있어서,
    상기 제1 UI 소스는 웹표준 준수 UI 소스에 해당하는 XML 파일이며,
    상기 학습용 객체 정보 파일은 특징(Features) 학습을 위한 입력 JSON 파일과 학습시 정답(Label) 데이터인 출력 JSON 파일을 포함하는 것을 특징으로 하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 방법.
    
13. 제12항에 있어서,
    상기 출력 JSON 파일은 웹표준을 준수하여 구현된 HTML의 DOM Tree 정보가 포함된 파일인 것을 특징으로 하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 방법.
    
14. 제11항에 있어서,
    상기 학습 데이터는 원 핫 인코딩(one hot encoding)이 적용된 어레이(array) 형태를 가지는 것을 특징으로 하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 방법.
    
15. 제11항에 있어서,
    상기 학습 단계에서는 역전파를 이용하여 학습을 진행하고, 일정 수준 이상의 정확도가 학습되면 학습을 종료시키는 것을 특징으로 하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 방법.
    
16. 제11항에 있어서,
    상기 출력 객체 정보 파일 생성 단계에서는 상기 변환용 객체 정보 파일에 부모-자식 관계 및 형제 관계가 반영된 DOM Tree 구조를 추가하는 것을 특징으로 하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 방법.
    
17. 제11항에 있어서,
    상기 제2 UI 소스는 앱솔루트 방식 XML 파일이고, 상기 웹표준 준수 UI 소스는 랠러티브 방식 XML 파일인 것을 특징으로 하는 딥러닝 학습을 이용한 웹 표준 준수 UI 소스 변환 방법.

Images