KR20190119686A - 코드 생성 장치 및 방법 - Google Patents

Abstract

코드 생성 장치 및 방법이 제공된다. 본 개시의 코드 생성 방법은 입력 영상으로부터 상기 입력 영상을 구성하는 적어도 하나 이상의 레이아웃 영역을 식별하는 단계, 상기 하나 이상의 레이아웃 영역 중 적어도 일부의 레이아웃 영역에 대해 객체를 식별하는 단계 및 상기 식별된 레이아웃 영역 및 상기 식별된 객체 중 적어도 하나를 이용하여 상기 입력 영상에 대한 코드를 생성하는 단계를 포함한다.

Description

코드 생성 장치 및 방법{CODE GENERATING APPARATUS AND METHOD}

본 개시는 코드 생성 장치 및 방법에 관한 것이다. 보다 구체적으로, 본 개시는 입력 영상에 포함된 레이아웃 영역 및/또는 객체를 식별함으로써, 입력 영상에 대한 코드를 생성하는 장치 및 방법에 관한 것이다.

최근 영상에 포함된 객체를 인식하는 방법에 관한 연구가 증가하고 있다. 예컨대, 문법 기반의 객체 모델링 방법(grammar based object modeling method)은 객체의 의미론적 관계를 계층 구조로 정의하고, 객체 고유의 간단한 특징들을 이용하여 객체를 표현하는 방법으로서, 이미지 품질에 따라 다양한 단순 구조가 있다는 한계가 있다. 또한, 문자열은 광학 문자 판독 장치(Optical Character Reader, OCR)를 이용하여 인식하고 기타 객체는 컴퓨터 비전(computer vision) 기법을 이용하여 인식하는 방법(예를 들어, mining visual log of SW)은 객체를 분석하는데 어려움이 있고 아이콘이나 텍스트 정도만 간단히 검출할 수 있다는 한계가 있다. 또한, 문자열은 광학 문자 판독 장치를 이용하여 인식하고 기타 객체는 컴퓨터 비전 기법을 이용하여 인식하고, 발견적 방법(heuristic approach)을 통해 이미지를 병합함으로써 객체를 검출하는 방법(예를 들어, REMAUI)은 규칙 기반(rule-based)의 인공지능을 이용한 방법으로서 불필요한 객체가 과도하게 발견될 수 있다는 문제가 있다.

본 개시의 기술적 과제는, 코드 생성 장치 및 방법을 제공하는 것이다.

본 개시의 다른 기술적 과제는, 입력 영상에 포함된 레이아웃 영역 및/또는 객체를 식별함으로써, 입력 영상에 대한 코드를 생성하는 장치 및 방법을 제공하는 것이다.

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

본 개시의 일 양상에 따르면, 입력 영상으로부터 상기 입력 영상을 구성하는 적어도 하나 이상의 레이아웃 영역을 식별하는 단계; 상기 하나 이상의 레이아웃 영역 중 적어도 일부의 레이아웃 영역에 대해 객체를 식별하는 단계; 및 상기 식별된 레이아웃 영역 및 상기 식별된 객체 중 적어도 하나를 이용하여 상기 입력 영상에 대한 코드를 생성하는 단계를 포함하는 코드 생성 방법이 제공될 수 있다.

본 개시의 다른 양상에 따르면, 입력 영상으로부터 상기 입력 영상을 구성하는 적어도 하나 이상의 레이아웃 영역을 식별하고, 상기 하나 이상의 레이아웃 영역 중 적어도 일부의 레이아웃 영역에 대해 객체를 식별하고, 상기 식별된 레이아웃 영역 및 상기 식별된 객체 중 적어도 하나를 이용하여 상기 입력 영상에 대한 코드를 생성하는 것을 특징으로 하는 코드 생성 장치가 제공될 수 있다.

본 개시의 또 다른 양상에 따르면, 본 개시의 코드 생성 방법을 수행하기 위한 프로그램을 저장한 컴퓨터로 판독 가능한 기록 매체가 제공될 수 있다.

본 개시에 대하여 위에서 간략하게 요약된 특징들은 후술하는 본 개시의 상세한 설명의 예시적인 양상일 뿐이며, 본 개시의 범위를 제한하는 것은 아니다.

본 개시에 따르면, 코드 생성 장치 및 방법이 제공될 수 있다.

또한, 본 개시에 따르면, 입력 영상에 포함된 레이아웃 영역 및/또는 객체를 식별함으로써, 입력 영상에 대한 코드를 생성하는 장치 및 방법이 제공될 수 있다.

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

도 1은 본 개시의 일 실시 예에 따른 코드 생성 장치의 동작을 설명하기 위한 도면이다.
도 2는 본 개시의 일 실시 예에 따라 입력 영상으로부터 레이아웃 영역을 식별하는 과정을 설명하기 위한 도면이다.
도 3a 내지 3d는 본 개시의 일 실시 예에 따라 입력 영상으로부터 레이아웃 영역을 식별하는 구체적인 과정을 설명하기 위한 도면이다.
도 4a 내지 4c는 본 개시의 일 실시 예에 따른 객체 식별을 위한 딥러닝 기반의 인공지능 모델의 학습 과정을 설명하기 위한 도면이다.
도 5는 본 개시의 일 실시 예에 따라 입력 영상으로부터 HTML 코드를 생성하는 과정을 의사(pseudo) 코드로서 나타낸 도면이다.
도 6은 본 개시의 일 실시 예에 따라 스케치 이미지로부터 HTML 웹페이지를 생성하는 동작을 설명하기 위한 도면이다.

본 발명은 다양한 변경을 가할 수 있고 여러 가지 실시예를 가질 수 있는 바, 특정 실시예들을 도면에 예시하고 상세한 설명에 상세하게 설명하고자 한다. 그러나, 이는 본 발명을 특정한 실시 형태에 대해 한정하려는 것이 아니며, 본 발명의 사상 및 기술 범위에 포함되는 모든 변경, 균등물 내지 대체물을 포함하는 것으로 이해되어야 한다. 도면에서 유사한 참조부호는 여러 측면에 걸쳐서 동일하거나 유사한 기능을 지칭한다. 도면에서의 요소들의 형상 및 크기 등은 보다 명확한 설명을 위해 과장될 수 있다. 후술하는 예시적 실시예들에 대한 상세한 설명은, 특정 실시예를 예시로서 도시하는 첨부 도면을 참조한다. 이들 실시예는 당업자가 실시예를 실시할 수 있기에 충분하도록 상세히 설명된다. 다양한 실시예들은 서로 다르지만 상호 배타적일 필요는 없음이 이해되어야 한다. 예를 들어, 여기에 기재되어 있는 특정 형상, 구조 및 특성은 일 실시예에 관련하여 본 발명의 정신 및 범위를 벗어나지 않으면서 다른 실시예로 구현될 수 있다. 또한, 각각의 개시된 실시예 내의 개별 구성요소의 위치 또는 배치는 실시예의 정신 및 범위를 벗어나지 않으면서 변경될 수 있음이 이해되어야 한다. 따라서, 후술하는 상세한 설명은 한정적인 의미로서 취하려는 것이 아니며, 예시적 실시예들의 범위는, 적절하게 설명된다면, 그 청구항들이 주장하는 것과 균등한 모든 범위와 더불어 첨부된 청구항에 의해서만 한정된다.

본 발명에서 제1, 제2 등의 용어는 다양한 구성요소들을 설명하는데 사용될 수 있지만, 상기 구성요소들은 상기 용어들에 의해 한정되어서는 안 된다. 상기 용어들은 하나의 구성요소를 다른 구성요소로부터 구별하는 목적으로만 사용된다. 예를 들어, 본 발명의 권리 범위를 벗어나지 않으면서 제1 구성요소는 제2 구성요소로 명명될 수 있고, 유사하게 제2 구성요소도 제1 구성요소로 명명될 수 있다. 및/또는 이라는 용어는 복수의 관련된 기재된 항목들의 조합 또는 복수의 관련된 기재된 항목들 중의 어느 항목을 포함한다.

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

본 발명의 실시예에 나타나는 구성부들은 서로 다른 특징적인 기능들을 나타내기 위해 독립적으로 도시되는 것으로, 각 구성부들이 분리된 하드웨어나 하나의 소프트웨어 구성단위로 이루어짐을 의미하지 않는다. 즉, 각 구성부는 설명의 편의상 각각의 구성부로 나열하여 포함한 것으로 각 구성부 중 적어도 두 개의 구성부가 합쳐져 하나의 구성부로 이루어지거나, 하나의 구성부가 복수 개의 구성부로 나뉘어져 기능을 수행할 수 있고 이러한 각 구성부의 통합된 실시예 및 분리된 실시예도 본 발명의 본질에서 벗어나지 않는 한 본 발명의 권리범위에 포함된다.

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

본 발명의 일부의 구성 요소는 본 발명에서 본질적인 기능을 수행하는 필수적인 구성 요소는 아니고 단지 성능을 향상시키기 위한 선택적 구성 요소일 수 있다. 본 발명은 단지 성능 향상을 위해 사용되는 구성 요소를 제외한 본 발명의 본질을 구현하는데 필수적인 구성부만을 포함하여 구현될 수 있고, 단지 성능 향상을 위해 사용되는 선택적 구성 요소를 제외한 필수 구성 요소만을 포함한 구조도 본 발명의 권리범위에 포함된다.

이하, 도면을 참조하여 본 발명의 실시 형태에 대하여 구체적으로 설명한다. 본 명세서의 실시예를 설명함에 있어, 관련된 공지 구성 또는 기능에 대한 구체적인 설명이 본 명세서의 요지를 흐릴 수 있다고 판단되는 경우에는 그 상세한 설명은 생략하고, 도면상의 동일한 구성요소에 대해서는 동일한 참조부호를 사용하고 동일한 구성요소에 대해서 중복된 설명은 생략한다.

도 1은 본 개시의 일 실시 예에 따른 코드 생성 장치의 동작을 설명하기 위한 도면이다.

단계 S110에서, 입력 영상을 구성하는 하나 이상의 레이아웃 영역을 식별할 수 있다. 예컨대, 입력 영상은 하나 이상의 영역으로 구분될 수 있다. 상기 영역은 예컨대, 수직선 및 수평선에 의해 구획되어 복수의 영역으로 구분될 수 있다. 본 개시의 레이아웃 영역은 상기 입력 영상에 포함된 영역의 각각을 의미할 수 있다. 단계 S110에 대해서는 도 2 및 도 3을 참조하여 후술한다.

단계 S120에서, 레이아웃 영역에 포함된 객체를 식별할 수 있다. 단계 S120은, 단계 S110에서 식별된 적어도 하나의 레이아웃 영역들의 각각에 대해 수행될 수도 있고, 일부 레이아웃 영역에 대해서만 수행될 수도 있다. 레이아웃 영역에 포함된 객체의 식별은 딥러닝 기반의 인공지능 모델, OCR 등을 이용할 수 있다. 식별 대상인 객체는 에디트텍스트, 라디오 버튼 등의 위젯과 텍스트를 포함할 수 있다. 단계 S120에 대해서는 도 4를 참조하여 후술한다.

단계 S130에서, 단계 S110에서 식별된 레이아웃 영역 및/또는 단계 S120에서 식별된 영역별 객체를 이용하여 입력 영상에 대한 코드를 생성할 수 있다. 상기 코드는 예컨대, 컴퓨터가 판독, 해석 및/또는 컴파일링하여 소정의 결과를 출력하는 프로그래밍 언어 코드일 수 있다. 예컨대, 상기 프로그래밍 언어는 HTML(Hyper Text Markup Language), XML(eXtensible Markup Language) 및 OWL(Ontology Web Language) 등의 웹 언어(web language)일 수 있다.

도 2는 본 개시의 일 실시 예에 따라 입력 영상으로부터 레이아웃 영역을 식별하는 과정을 설명하기 위한 도면이다.

본 개시의 코드 생성 장치는 입력 영상으로부터 규칙 기반(rule-based)의 컴퓨터 비전 기법을 이용하여 레이아웃 영역을 식별할 수 있다. 식별된 레이아웃 영역에 대한 정보는 리스트 또는 데이터베이스에 저장될 수 있다. 레이아웃 영역은 객체들과 같은 복잡한 구조를 갖지 않으므로, 비교적 용이하게 식별될 수 있다. 또한, 후술하는 본 개시의 코드 생성 방법/장치에 따르면, 기존의 방법에 비해 비교적 높은 정확도로 레이아웃 영역을 식별할 수 있다.

본 개시의 코드 생성 장치의 입력 영상(210)은 하나 이상의 레이아웃 영역으로 구분될 수 있다. 도 2에 도시된 바와 같이, 입력 영상(210)은 수직선(214) 및 수평선(212)에 의해 구획되어 복수의 레이아웃 영역으로 구분될 수 있다.

상기 입력 영상(210)은 사용자가 직접 스케치한 이미지이거나 그래픽 툴(tool)을 이용하여 스케치한 영상일 수 있다. 또한, 입력 영상(210)은 상기 스케치 이미지를 저장 또는 전송하기 위한 임의의 형태(포맷)의 이미지일 수 있다. 예컨대, 입력 영상(210)은 웹 코드를 생성하기 위해 작성된 웹 디자인 스케치 이미지일 수 있다.

입력 영상(210)은 스케치 이미지이기 때문에, 입력 영상(210)에 포함된 레이아웃 영역의 경계 및/또는 객체는 정확한 형태가 아닐 수 있다. 상기 경계는 수평선 및/또는 수직선에 의해 나타낼 수 있다. 예컨대, 입력 영상(210)에 있어서, 레이아웃 영역의 경계를 나타내는 수평선 성분은 직선이 아니거나 기울기가 0도가 아닐 수 있다. 또는, 레이아웃 영역의 경계를 나타내는 수직선 성분은 직선이 아니거나 기울기가 90도가 아닐 수 있다. 또는, 레이아웃 영역의 경계를 나타내는 수평선 및/또는 수직선 성분은 임의의 위치에서 끊어져 있을 수 있다.

본 개시의 코드 생성 장치는 입력 영상을 구성하는 레이아웃 영역을 식별할 수 있다. 본 개시의 코드 생성 장치는 레이아웃 영역을 식별하기 위해, 입력 영상에서 레이아웃 영역의 경계에 해당하는 수평선 성분(212) 및/또는 수직선 성분(214)을 검출할 수 있다. 본 개시의 코드 생성 장치는 검출된 수평선 성분(212) 및/또는 수직선 성분(214)에 대한 코드를 생성할 수 있고, 상기 코드의 실행에 의해 레이아웃 영역을 구분하는 수평선(222) 및/또는 수직선(224)을 포함하는 영상(220)을 출력할 수 있다. 본 개시의 코드 생성 장치가 생성한 코드에 의해 출력되는 영상(220)은 예컨대, 웹 브라우저 상에 출력되는 영상일 수 있다. 레이아웃 영역의 경계를 구성하는 수평 경계 및/또는 수직 경계를 검출하는 방법에 대해서는 도 3을 참조하여 구체적으로 후술한다. 본 개시의 코드 생성 장치는 생성한 코드에 대응하는 영상(220)을 출력하는 기능을 추가적으로 구비할 수도 있다.

도 3a 내지 3d는 본 개시의 일 실시 예에 따라 입력 영상으로부터 레이아웃 영역을 식별하는 구체적인 과정을 설명하기 위한 도면이다.

도 3a는 본 개시의 일 실시 예에 따른 주변선 병합 과정을 설명하기 위한 도면이다.

본 개시의 코드 생성 장치는 입력 영상을 변수로서 할당할 수 있다. 할당된 이미지에 대해서는 전처리 작업(pre-processing)이 수행될 수 있다. 전처리 작업은 이미지의 특징이 보다 용이하게 검출될 수 있도록 화질을 향상시키기 위한 모든 작업을 포함할 수 있다. 예컨대, 전처리 작업을 위해, 이미지 향상 기법, 레이아웃 경계 검출 알고리즘을 수행하기 위한 흑백화, 이진화 연산 등을 수행할 수 있다.

본 개시의 코드 생성 장치는 허프 변환을 이용하여 입력 영상에 포함된 직선 성분을 검출할 수 있다.

상기 검출된 직선 성분들에 대해 주변선 병합 과정이 수행될 수 있다. 주변선 병합이란, 단편화된 주변의 직선 성분들을 하나의 직선으로 병합하는 과정을 의미할 수 있다. 예컨대, 도 3a를 참조하면, 입력 영상에 포함된 직선 성분들을 검출한 결과, 단편화된 직선 성분들(312, 314) 등이 검출될 수 있는데, 이들 단편화된 직선 성분들을 하나의 직선(322)으로 병합하는 과정이 주변선 병합 과정에 해당할 수 있다. 도 3a의 입력 영상(310)은 상기 전처리 작업 및/또는 허프 변환이 수행된 영상일 수 있다. 상기 주변선 병합을 수행하는 것은 입력 영상이 스케치 이미지이면, 입력 영상에 포함된 레이아웃 영역 및/또는 객체는 정확한 형태가 아닐 수 있기 때문이다. 예컨대, 스케치로부터 입력된 이미지의 직선은 실제로 완전한 직선이 아닌 곡선이거나 하나의 직선 성분이라도 여러 개의 성분들로 나뉘어질 수 있기 때문에 주변선을 병합하는 과정이 필요할 수 있다. 도 3a에 도시된 바와 같이, 입력 영상에 포함된 직선들을 식별한 영상(310)에 대해 주변선 병합 과정을 수행함으로써, 단편화된 직선 성분들이 하나의 직선으로 병합된 영상(320)을 획득할 수 있다.

도 3b는 본 개시의 일 실시 예에 따른 기울기 필터 적용 과정을 설명하기 위한 도면이다.

본 개시의 코드 생성 장치는 입력 영상으로부터 검출된 성분들로부터 직선 성분만을 검출하기 위해 기울기 필터를 적용할 수 있다. 기울기 필터의 입력은 도 3a의 주변선 병합 과정의 출력 영상일 수 있다. 그러나 이에 한정되지 않으며, 직선 성분의 검출이 필요한 영상에 대해 어느 단계라도 기울기 필터가 적용될 수 있다.

기울기 필터는 직선 성분만을 검출할 수도 있고, 수평선 및/또는 수직선만을 검출할 수도 있다. 수평선 및/또는 수직선만을 검출하기 위해, 직선 성분의 기울기가 이용될 수 있다. 예컨대, 기울기가 0 도인 직선을 수평선으로 검출할 수 있고, 기울기가 90 도인 직선을 수직선으로 검출할 수 있다. 그러나 이에 한정되지 않으며, 예컨대, 0 도를 기준으로 소정 범위 이내의 기울기를 가진 직선을 수평선으로, 90 도를 기준으로 소정 범위 이내의 기울기를 가진 직선을 수직선으로 검출할 수 있다.

도 3b에 도시된 기울기 필터의 입력 영상(330)은 다양한 기울기의 직선(332, 334, 336)과 곡선(338)을 포함할 수 있다.

기울기 필터가 직선 성분만을 검출하는 필터인 경우, 입력 영상(330)에서 곡선(338)만이 필터링된 영상이 출력될 수 있다.

기울기 필터가 수평선 및/또는 수직선만을 검출하는 필터인 경우, 입력 영상(330)에서 곡선(338)뿐만 아니라, 기울기가 0 도나 90 도가 아닌 직선 성분을 필터링한 영상(340)이 출력될 수 있다. 필터링된 영상(340)에는 수평선(342)과 수직선(344)만이 포함될 수 있다. 필터링전 영상(330)에 포함된 수평선(332) 및 수직선(334)의 기울기가 정확히 0 도 및 90 도가 아닌 경우, 필터링된 영상(340)에 포함된 수평선(342) 및 수직선(344)의 기울기는 정확히 0 도 및 90 도가 되도록 보정될 수 있다.

도 3c는 본 개시의 일 실시 예에 따른 대응선 탐색 적용 과정을 설명하기 위한 도면이다.

본 개시의 코드 생성 장치는 레이아웃 영역의 식별을 위해 탐색 알고리즘을 적용할 수 있다. 대응선 탐색 알고리즘은, 임의의 제1 직선 성분과 대응되는 제2 직선 성분을 검출하는 방법을 의미할 수 있다. 예컨대, 제1 직선 성분에 대응하는 길이 및/또는 기울기를 가진 제2 성분을 검출함으로써, 대응선을 탐색할 수 있다. 대응선 탐색 적용 과정의 입력 영상은 예컨대, 도 3b의 필터링된 영상(340)일 수 있다. 그러나 이에 한정되지 않으며, 직선 성분이 검출된 영상에 대해 어느 단계라도 적용될 수 있다.

본 개시의 대응선 탐색 알고리즘은 직선 성분의 길이, 기울기 및/또는 위치에 기초하여 수행될 수 있다. 예컨대, 제1 수평선 유사한 길이를 갖는 제2 수평선이 있는지를 탐색할 수 있다. 또한, 제1 수평선과 제2 수평선의 위치가 유사한지가 추가적으로 판단될 수 있다. 또는, 유사 위치의 수평선들을 먼저 탐색한 후, 그 중에서 유사 길이를 갖는 수평선을 대응선으로 결정할 수도 있다. 수직선에 대해서도 동일하게 대응선을 탐색할 수 있다. 탐색 결과, 서로 대응하는 수평선 쌍과 서로 대응하는 수직선 쌍이 존재하면, 이들 수평선 쌍과 수직선 쌍에 의해 구분되는 하나의 레이아웃 영역이 검출된 것으로 판단할 수 있다.

한편, 제1 수평선에 대응하는 제2 수평선을 검출하면, 제1 수평선 및/또는 제2 수평선의 기설정된 위치에 제1 수직선을 표시할 수 있다. 예컨대, 제1 수평선의 꼭지점과 제2 수평선의 꼭지점을 연결하는 성분을 제1 수직선으로 설정할 수 있다. 또한, 검출된 영역은 수평선 쌍과 수직선 쌍에 의해 사각형의 형태로 설정될 수 있지만, 이에 제한되지 않으며, 기설정된 조건에 따라 다양한 형태의 폐공간으로 나타낼 수 있다. 대응선 탐색 알고리즘에서 수평 성분과 수직 성분을 탐색하는 순서는 변경될 수 있다.

도 3c를 참조하면, 본 개시의 코드 생성 장치는 입력 영상(350)에 대해 대응선 탐색 알고리즘을 적용하여 제1 수평선(352)에 대응되는 제2 수평선(354)을 검출할 수 있다. 또한, 제1 수평선(352)의 왼쪽 꼭지점과 제2 수평선(354)의 왼쪽 꼭지점을 연결한 제1 수직선(356)을 검출 또는 설정할 수 있다. 또한, 제1 수직선(356)에 대응되는 제2 수직선(358)을 검출 또는 설정할 수 있다. 제1 수직선(356)과 제2 수직선(358)의 검출 순서는 변경될 수 있다. 결국, 수평선 쌍과 수직선 쌍에 의해 둘러싸인 레이아웃 영역(362)이 검출 또는 식별될 수 있다.

도 3d는 본 개시의 일 실시 예에 따라 입력 영상에 포함된 프랙탈 구조의 레이아웃 영역을 식별하는 과정을 설명하기 위한 도면이다.

본 개시의 코드 생성 장치는 입력 영상에 포함된 복잡한 구조의 레이아웃 영역들을 식별할 수 있다. 예컨대, 본 개시의 코드 생성 장치는 하나의 레이아웃 영역이 검출 또는 식별되면 식별된 레이아웃 영역의 내부에 대해 식별된 레이아웃 영역보다 작은 레이아웃 영역들이 존재하는지를 탐색할 수 있다. 즉, 본 개시의 코드 생성 장치는 레이아웃 영역이 존재하는지를 탐색하기 위해 (row 탐색 함수 → col 탐색 함수 → row 탐색 함수 → col 탐색 함수 → row 탐색 함수 → col 탐색 함수 → …)와 같이 재귀적으로 row 또는 col 탐색 함수를 호출할 수 있다. 전술한 바와 같이, 식별된 레이아웃 영역에 대해 재귀적으로 탐색 함수를 호출하여 대응선 탐색 알고리즘을 반복적으로 수행함으로써, 복잡하게 반복되는 프랙탈 구조의 레이아웃을 포함하는 입력 영상(370)에 대해서도 레이아웃 영역에 대한 코드가 생성될 수 있다. 생성된 코드는 웹 브라우저 상에서 영상(380)과 같이 출력될 수 있다.

도 3d의 영상(380)을 참조하면, 각 레이아웃 영역마다 레이블(label)이 표시되어 있다. 상기 레이블의 값은 함수 호출 횟수를 의미할 수 있다. 또한, 상기 레이블의 값이 작을수록 해당 레이아웃 영역이 먼저 검출된 것을 의미할 수 있다. 같은 영상이면 레이아웃 영역을 식별하기 위한 함수 호출 횟수나 영상 내에서 해당 레이아웃 영역의 검출 순서는 일정할 수 있다.

도 4a 내지 4c는 본 개시의 일 실시 예에 따른 객체 식별을 위한 딥러닝 기반의 인공지능 모델의 학습 과정을 설명하기 위한 도면이다.

본 개시의 코드 생성 장치는 레이아웃 영역에 포함되어 있는 객체를 검출할 수 있다. 예컨대, 본 개시의 코드 생성 장치는 식별된 각 레이아웃 영역에 포함되어 있는 객체를 딥러닝을 포함하는 인공지능 기술을 이용하여 식별할 수 있다.

인공지능 기술은 컴퓨터에게 데이터를 학습시켜 마치 사람처럼 스스로 의사결정을 할 수 있게 하는데, 인공 신경망(artificial neural network)은 생물학의 신경망에서 영감을 얻은 수학적 모델로서, 시냅스의 결합으로 네트워크를 형성한 인공 뉴런이 학습을 통해 시냅스의 결합 세기를 변화시킴으로써 문제 해결 능력을 가지는 모델 전반을 의미할 수 있다. 심층 신경망(deep neural network)은 입력층과 출력층 사이에 여러 개의 은닉층들로 이루어진 인공 신경망으로서, 많은 은닉층을 통해 복잡한 비선형 관계들을 모델링할 수 있으며, 이처럼 층의 개수를 늘림으로써 고도화된 추상화가 가능한 신경망 구조를 딥러닝(deep learning)이라고 부른다. 딥러닝은 매우 방대한 양의 데이터를 학습하여, 새로운 데이터가 입력될 경우 학습 결과를 바탕으로 확률적으로 가장 높은 답을 선택하기 때문에 영상에 따라 적응적으로 동작할 수 있으며, 데이터에 기초하여 모델을 학습하는 과정에서 특성인자를 자동으로 찾아낼 수 있다.

예컨대, 딥러닝 기반의 모델은 완전 합성곱 신경망(완전 컨볼루션 뉴럴 네트워크, fully convolutional neural network), 합성곱 신경망(컨볼루션 뉴럴 네트워크, convolutional neural network), 순환 신경망(회귀 뉴럴 네트워크, recurrent neural network), 제한 볼츠만 머신(restricted Boltzmann machine, RBM) 및 심층 신뢰 신경망(deep belief neural network, DBN) 중 적어도 하나를 포함할 수 있으나, 이에 제한되지 않는다. 또는, 딥러닝 이외의 머신 러닝 방법도 포함할 수 있다. 또는 딥러닝과 머신 러닝을 결합한 하이브리드 형태의 모델도 포함할 수 있다. 예컨대, 딥러닝 기반의 모델을 적용하여 영상의 특징을 추출하고, 상기 추출된 특징에 기초하여 영상을 분류하거나 인식할 때는 머신 러닝 기반의 모델을 적용할 수도 있다. 머신 러닝 기반의 모델은 서포트 벡터 머신(Support Vector Machine, SVM), 에이다부스트(AdaBoost) 등을 포함할 수 있으나, 이에 제한되지 않는다.

또한, 딥러닝 기반의 모델을 학습하는 방법은 지도 학습(supervised learning), 비지도 학습(unsupervised learning) 또는 강화 학습(reinforcement learning) 중 적어도 하나를 포함할 수 있으나, 이에 제한되지 않는다. 지도 학습은 일련의 학습 데이터와 그에 상응하는 레이블(label, 목표 출력값)을 이용하여 학습이 이루어지며, 지도 학습에 기초한 신경망 모델은 훈련용 데이터(training data)로부터 함수를 추론해내는 형태의 모델일 수 있다. 지도 학습은 일련의 학습 데이터와 그에 상응하는 목표 출력 값을 수신하고, 입력되는 데이터에 대한 실제 출력 값과 목표 출력 값을 비교하는 학습을 통해 오류를 찾아내고, 해당 결과를 근거로 모델을 수정하게 된다. 지도 학습은 결과물의 형태에 따라 다시 회귀(regression), 분류(classification), 검출(detection), 시멘틱 세그멘테이션(semantic segmentation) 등으로 구분될 수 있다. 지도 학습을 통해 도출된 함수는 다시 새로운 결과값을 예측하는데 사용될 수 있다. 이처럼, 지도 학습에 기초한 신경망 모델은 수많은 학습 데이터의 학습을 통해, 신경망 모델의 파라미터를 최적화하게 된다.

본 개시의 코드 생성 장치는 예컨대, 인공지능 모델을 이용하여 버튼, 체크박스, 에디트텍스트, 라디오 버튼 등의 다양한 형태의 위젯을 식별할 수 있다. 상기 인공지능 모델은 딥러닝, 머신러닝 및 하이브리드 형태의 다양한 모델을 포함할 수 있다. 바람직하게는 예컨대, Faster RCNN 기반의 딥러닝 모델 또는 CNN 기반 또는 RNN 기반의 딥러닝 모델이 이용될 수 있다. 본 개시의 코드 생성 장치는 예컨대, 문자열 인식 라이브러리인 OCR을 이용하여 텍스트를 식별할 수 있다.

도 4a 내지 4c는 본 개시의 일 실시 예에 따른 객체 식별을 위한 딥러닝 기반의 인공지능 모델의 학습 과정을 설명하기 위한 도면이다.

도 4a는 본 개시의 일 실시 예에 따른 객체 식별 학습을 위한 훈련 데이터 셋을 설명하기 위한 도면이다.

훈련 데이터는 웹사이트 상에서 표시되는 텍스트, 아이콘, 위젯, 이미지 및/또는 동영상 등에 관한 데이터를 의미할 수 있다. 예컨대, 훈련 데이터는 버튼(button), 라디오버튼(radio button), 체크박스(checkbox) 및/또는 편집텍스트(edit text)를 포함할 수 있다. 훈련 데이터 셋은 제1 훈련 데이터 셋(410) 또는 제2 훈련 데이터 셋(420) 등과 같이 다양한 형태로 구성될 수 있다.

도 4b는 본 개시의 일 실시 예에 따른 훈련 데이터 셋에 대응되는 코드 데이터를 설명하기 위한 도면이다.

코드 데이터(430)는 훈련 데이터 셋을 표현하는 코드를 의미할 수 있다. 예컨대, 본 개시의 코드 생성 장치가 훈련 데이터 셋을 입력으로 하여 생성해야 하는 코드를 의미할 수 있다. 코드 데이터(430)는 데이터 저장 폴더, 데이터 파일명(432) 등을 포함할 수 있다. 또한, 코드 데이터(430)는 대응되는 훈련 데이터 셋에 포함되어 있는 객체에 대한 정보를 코드로서 나타낼 수 있다. 객체에 대한 정보는 객체의 종류, 위치, 크기, 색상, 객체명, 객체 방향, 절단 여부, 인식의 어려움 정도, 텍스트 등 중 적어도 하나를 포함할 수 있다. 코드는 예컨대, 컴퓨터가 판독, 해석 및/또는 컴파일링하여 소정의 결과를 출력하는 프로그래밍 언어 코드일 수 있다. 예컨대, 상기 프로그래밍 언어는 HTML, XML 및 OWL 등의 웹 언어일 수 있다.

본 개시의 코드 생성 장치가 이용하는 인공지능 모델은 상기 훈련 데이터 셋과 코드 데이터를 이용하여 미리 학습될 수 있다. 인공지능 모델의 학습은 다른 장치에 의해 수행될 수도 있고, 본 개시의 코드 생성 장치에 의해 수행될 수도 있다. 예컨대, 후술하는 바와 같이, 본 개시의 코드 생성 장치가 입력 영상에 대한 코드를 생성하고, 사용자로부터 GUI를 통한 수정 정보를 입력받을 수 있다. 사용자로부터 입력받은 정보에 기초하여 생성되는 코드는 상기 입력 영상에 대해 생성되어야 할 코드에 보다 가까울 수 있다. 따라서, 상기 입력 영상과 상기 사용자의 수정 정보에 기초하여 생성된 코드를 이용한 인공지능 모델의 학습이 가능할 수 있다.

도 4c는 본 개시의 일 실시 예에 따른 인공지능 모델을 이용하여 객체를 식별한 결과를 설명하기 위한 도면이다.

본 개시의 코드 생성 장치는 상기 학습 모델을 이용하여 객체를 식별할 수 있다. 도 4c를 참조하면, 코드 생성 장치는 임의의 입력 영상(440)에 포함되어 있는 다양한 형태의 객체들, 예컨대, 편집 텍스트(442), 라디오버튼(444), 체크박스(446) 및/또는 버튼(100)의 종류와 위치 등을 식별할 수 있다. 또한, 본 개시의 코드 생성 장치는 식별된 객체에 대해 상기 객체가 식별될 확률 등을 예측할 수 있다. 도 4c에 도시된 바와 같이, 편집 텍스트(442), 라디오버튼(444), 체크박스(446) 및 버튼(100) 각각에 대해 객체의 종류, 객체를 가리키는 박스 및/또는 객체가 식별될 확률이 표시될 수 있다.

예컨대, 학습 결과는 각 객체에 관한 인식의 정확도로 나타낼 수 있다. 예컨대, 도 4c를 참조하면, 학습 결과 데이터(440)는 텍스트 데이터 인식 결과(442), 라디오버튼 인식 결과(444), 체크박스 인식 결과(446) 및/또는 버튼 인식 결과(448)를 포함할 수 있으나, 이에 제한되지 않으며, 학습을 수행한 다양한 객체에 관한 인식 결과를 포함할 수 있다.

도 5는 본 개시의 일 실시 예에 따라 입력 영상으로부터 HTML 코드를 생성하는 과정을 의사(pseudo) 코드로서 나타낸 도면이다.

본 개시의 코드 생성 장치는 입력 영상에 대응되는 코드를 생성할 수 있다.

본 개시의 코드 생성 장치는 입력 파일(이미지.jpg)을 독출하고(512), 레이아웃 영역을 식별하고(514), OCR을 이용하여 식별된 레이아웃 영역에 포함되어 있는 텍스트를 식별하고(516), 또한, 학습 모델을 이용하여 식별된 레이아웃 영역에 포함되어 있는 위젯(518)을 식별할 수 있다.

또한, 본 개시의 코드 생성 장치는 레이아웃 영역이나 객체가 제대로 식별되지 않은 경우 사용자 입력을 수신하여 제대로 식별되지 않은 부분을 수정할 수 있다(540). 예컨대, 상기 수정은 레이아웃 영역 및/또는 객체의 종류, 위치, 크기 등의 수정을 포함할 수 있다. 예컨대, 사용자 입력은 그래픽 사용자 인터페이스(Graphic User Interface, GUI)를 이용하여 수신될 수 있다.

또한, 본 개시의 코드 생성 장치는 식별되거나 또는 수정된 레이아웃, 텍스트 및/또는 객체를 병합할 수 있다(520). 본 개시의 코드 생성 장치는 병합된 데이터를 이용하여 HTML 코드를 생성할 수 있다(530).

도 6은 본 개시의 일 실시 예에 따라 스케치 이미지로부터 HTML 웹페이지를 생성하는 동작을 설명하기 위한 도면이다.

단계 S610에서 입력 영상에 대해 컴퓨터 비전 기법을 이용하여 레이아웃 영역을 식별할 수 있다. 예컨대, 입력 영상은 스케치 이미지일 수 있다.

단계 S620 에서 식별된 레이아웃 영역에 대응되는 HTML 코드를 생성할 수 있다. 또한, 단계 S630에서 OCR을 이용하여 식별된 레이아웃 영역에 포함된 텍스트를 식별하고, 식별된 텍스트에 대응되는 HTML 코드를 생성할 수 있다. 또한, 단계 S640에서 Faster RCNN 기반의 딥러닝 모델을 이용하여 식별된 레이아웃 영역에 포함된 객체를 식별하고, 식별된 객체에 대응되는 HTML 코드를 생성할 수 있다.

단계 S650에서, 단계 S620에서 생성된 HTML 코드, 단계 S630에서 생성된 HTML 코드, 단계 S640에서 생성된 HTML 코드를 병합하여 HTML 웹페이지를 생성할 수 있다. 단계 S650의 동작을 수행하기 전, 레이아웃 영역이나 객체가 제대로 식별되지 않은 경우 사용자 입력을 수신하여 제대로 식별되지 않은 부분을 수정하는 단계가 수행될 수 있다. 또는, 식별된 레이아웃 영역, 텍스트 및/또는 객체를 먼저 병합한 후, 병합된 영상에 대해 코드를 생성할 수도 있다.

상술한 실시예들에서, 방법들은 일련의 단계 또는 유닛으로서 순서도를 기초로 설명되고 있으나, 본 발명은 단계들의 순서에 한정되는 것은 아니며, 어떤 단계는 상술한 바와 다른 단계와 다른 순서로 또는 동시에 발생할 수 있다. 또한, 당해 기술 분야에서 통상의 지식을 가진 자라면 순서도에 나타난 단계들이 배타적이지 않고, 다른 단계가 포함되거나, 순서도의 하나 또는 그 이상의 단계가 본 발명의 범위에 영향을 미치지 않고 삭제될 수 있음을 이해할 수 있을 것이다.

상술한 실시예는 다양한 양태의 예시들을 포함한다. 다양한 양태들을 나타내기 위한 모든 가능한 조합을 기술할 수는 없지만, 해당 기술 분야의 통상의 지식을 가진 자는 다른 조합이 가능함을 인식할 수 있을 것이다. 따라서, 본 발명은 이하의 특허청구범위 내에 속하는 모든 다른 교체, 수정 및 변경을 포함한다고 할 것이다.

이상 설명된 본 발명에 따른 실시예들은 다양한 컴퓨터 구성요소를 통하여 수행될 수 있는 프로그램 명령어의 형태로 구현되어 컴퓨터 판독 가능한 기록 매체에 기록될 수 있다. 상기 컴퓨터 판독 가능한 기록 매체는 프로그램 명령어, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 상기 컴퓨터 판독 가능한 기록 매체에 기록되는 프로그램 명령어는 본 발명을 위하여 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어 분야의 당업자에게 공지되어 사용 가능한 것일 수도 있다. 컴퓨터 판독 가능한 기록 매체의 예에는, 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체, CD-ROM, DVD와 같은 광기록 매체, 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 ROM, RAM, 플래시 메모리 등과 같은 프로그램 명령어를 저장하고 수행하도록 특별히 구성된 하드웨어 장치가 포함된다. 프로그램 명령어의 예에는, 컴파일러에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드도 포함된다. 상기 하드웨어 장치는 본 발명에 따른 처리를 수행하기 위해 하나 이상의 소프트웨어 모듈로서 작동하도록 구성될 수 있으며, 그 역도 마찬가지이다.

이상에서 본 발명이 구체적인 구성요소 등과 같은 특정 사항들과 한정된 실시예 및 도면에 의해 설명되었으나, 이는 본 발명의 보다 전반적인 이해를 돕기 위해서 제공된 것일 뿐, 본 발명이 상기 실시예들에 한정되는 것은 아니며, 본 발명이 속하는 기술분야에서 통상적인 지식을 가진 자라면 이러한 기재로부터 다양한 수정 및 변형을 꾀할 수 있다.

따라서, 본 발명의 사상은 상기 설명된 실시예에 국한되어 정해져서는 아니 되며, 후술하는 특허청구범위뿐만 아니라 이 특허청구범위와 균등하게 또는 등가적으로 변형된 모든 것들은 본 발명의 사상의 범주에 속한다고 할 것이다.

Claims (15)

1. 입력 영상으로부터 상기 입력 영상을 구성하는 적어도 하나 이상의 레이아웃 영역을 식별하는 단계;
   상기 하나 이상의 레이아웃 영역 중 적어도 일부의 레이아웃 영역에 대해 객체를 식별하는 단계; 및
   상기 식별된 레이아웃 영역 및 상기 식별된 객체 중 적어도 하나를 이용하여 상기 입력 영상에 대한 코드를 생성하는 단계를 포함하는 코드 생성 방법.
2. 제1항에 있어서,
   상기 하나 이상의 레이아웃 영역을 식별하는 단계는,
   상기 입력 영상에 포함된 선 성분들에 대해 기울기 필터를 적용하여 수평선 성분 또는 수직선 성분을 식별하는 단계; 및
   상기 수평선 성분 및 상기 수직선 성분을 이용하여 상기 하나 이상의 레이아웃 영역을 식별하는 단계를 포함하는 코드 생성 방법.
3. 제2항에 있어서,
   상기 수평선 성분 또는 수직선 성분을 식별하는 단계는,
   상기 입력 영상에 포함된 소정의 선 성분들을 병합하는 단계; 및
   상기 병합된 선들에 대해 기울기 필터를 적용하여 상기 수평선 성분 또는 상기 수직선 성분을 식별하는 단계를 포함하는 코드 생성 방법.
4. 제1항에 있어서,
   상기 객체를 식별하는 단계는,
   상기 레이아웃 영역에 대해 미리 학습된 딥러닝 기반의 모델을 이용하여 상기 객체를 식별하는 단계를 포함하는 코드 생성 방법.
5. 제1항에 있어서,
   상기 객체를 식별하는 단계는,
   상기 레이아웃 영역에 대해 OCR(Optical Character Reader)을 이용하여 텍스트를 검출하는 단계를 포함하는 코드 생성 방법.
6. 제1항에 있어서,
   상기 레이아웃 영역 및 상기 객체가 제대로 식별되지 않은 경우, 상기 레이아웃 영역 및 상기 객체 중 적어도 하나를 수정하는 사용자 입력을 수신하는 단계를 더 포함하는 코드 생성 방법.
7. 제1항에 있어서,
   상기 코드는,
   컴퓨터가 판독, 해석 또는 컴파일링하여 소정의 결과를 출력하는 프로그래밍 언어 코드인 코드 생성 방법.
8. 입력 영상으로부터 상기 입력 영상을 구성하는 적어도 하나 이상의 레이아웃 영역을 식별하고, 상기 하나 이상의 레이아웃 영역 중 적어도 일부의 레이아웃 영역에 대해 객체를 식별하고, 상기 식별된 레이아웃 영역 및 상기 식별된 객체 중 적어도 하나를 이용하여 상기 입력 영상에 대한 코드를 생성하는 것을 특징으로 하는 코드 생성 장치.
9. 제8항에 있어서,
   상기 입력 영상에 포함된 선 성분들에 대해 기울기 필터를 적용하여 수평선 성분 또는 수직선 성분을 식별하고, 상기 수평선 성분 및 상기 수직선 성분을 이용하여 상기 하나 이상의 레이아웃 영역을 식별하는 코드 생성 장치.
10. 제9항에 있어서,
    상기 입력 영상에 포함된 소정의 선 성분들을 병합하고, 상기 병합된 선들에 대해 기울기 필터를 적용하여 상기 수평선 성분 또는 상기 수직선 성분을 식별하는 코드 생성 장치.
11. 제8항에 있어서,
    상기 레이아웃 영역에 대해 미리 학습된 딥러닝 기반의 모델을 이용하여 상기 객체를 식별하는 코드 생성 장치.
12. 제8항에 있어서,
    상기 레이아웃 영역에 대해 OCR(Optical Character Reader)을 이용하여 텍스트를 검출하는 코드 생성 장치.
13. 제8항에 있어서,
    상기 레이아웃 영역 및 상기 객체가 제대로 식별되지 않은 경우, 상기 레이아웃 영역 및 상기 객체 중 적어도 하나를 수정하는 사용자 입력을 수신하는 코드 생성 장치.
14. 제8항에 있어서,
    상기 코드는,
    컴퓨터가 판독, 해석 또는 컴파일링하여 소정의 결과를 출력하는 프로그래밍 언어 코드인 코드 생성 장치.
15. 프로그램을 기록한 컴퓨터로 판독 가능한 기록 매체로서,
    입력 영상으로부터 상기 입력 영상을 구성하는 적어도 하나 이상의 레이아웃 영역을 식별하는 단계;
    상기 하나 이상의 레이아웃 영역 중 적어도 일부의 레이아웃 영역에 대해 객체를 식별하는 단계; 및
    상기 식별된 레이아웃 영역 및 상기 식별된 객체 중 적어도 하나를 이용하여 상기 입력 영상에 대한 코드를 생성하는 단계를 수행하는 프로그램을 기록한 컴퓨터로 판독 가능한 기록 매체.

Images