KR102198545B1

KR102198545B1 - 온라인 전자상거래의 쇼핑몰의 디자인 자동 생성 방법 및 장치

Info

Publication number: KR102198545B1
Application number: KR1020180152378A
Authority: KR
Inventors: 염무웅; 김성배; 정철호
Original assignee: 카페24 주식회사
Priority date: 2018-11-30
Filing date: 2018-11-30
Publication date: 2021-01-06
Also published as: KR20200065684A

Abstract

본 발명의 일 양태는 온라인 쇼핑몰과 연관된 디자인(design) 자동 생성 방법을 개시하고 있다. 상기 방법은, 온라인 쇼핑몰과 연관된 이미지 내의 객체를 분석하여 상기 이미지와 연관된 형상을 도출하는 단계, 상기 도출된 형상을 기설정된 패턴 그리드 유형과 매칭하는 단계, 상기 매칭된 패턴 그리드 유형을 기반으로, 상기 이미지의 여백을 분석하여 캔버스(canvas) 내의 복수 개의 컴포넌트(component)들을 정의하는 단계(캔버스는 상기 이미지가 삽입되는 공간을 나타내며, 컴포넌트는 상기 이미지와 함께 디자인을 구성하는 텍스트가 입력되는 영역을 나타냄) 및 상기 정의된 복수 개의 컴포넌트들 중 적어도 하나에 텍스트를 입력하여 최종 디자인을 생성하는 단계를 포함한다.

Description

온라인 전자상거래의 쇼핑몰의 디자인 자동 생성 방법 및 장치{AUTO DESIGN GENERATION METHOD AND APPARATUS FOR ONLINE ELECTRONIC COMMERCE SHOPPING MALL}

본 발명은 디자인을 생성하는 방법에 관한 것으로, 보다 상세하게는, 온라인 쇼핑몰과 관련된 디자인을 자동으로 생성하는 방법에 관한 것이다.

온라인 전자 상거래(쇼핑몰이라고 부를 수 있음)를 운영하는 과정에서 쇼핑몰의 인지도를 높이고 매출을 증대시키기 위해 해당 쇼핑몰에 대한 홍보는 필수불가결한 활동이다. 이러한 쇼핑몰의 홍보활동은 흔히 "프로모션(promotion)"이라 불리는데 이는 "하나의 주제를 가지고 행하여지는 다양한 홍보활동"으로 이해할 수 있다.

쇼핑몰 운영자는 프로모션의 효과를 높이기 위하여 다양한 홍보 수단을 이용하는데 그 중에서도 프로모션의 컨셉과 관련 정보를 간결하고 임팩트(impact) 있게 보여주는 배너(banner) 및 배너를 포함한 다양한 쇼핑몰과 관련된 디자인을 디스플레이하는 활동은 홍보 수단의 핵심이라 할 수 있다.

따라서, 프로모션의 성과는 쇼핑몰 디자인의 완성도(quality)에 의해 좌우될 만큼 중요한 요소가 되었지만 완성도 높은 쇼핑몰 디자인를 만드는 작업은 디자인을 전문적으로 다루는 전문가의 영역으로, 이 분야의 경험이 부족한 일반인들은 많은 비용을 들여가며 전문가에게 제작을 의뢰하고 있는 것이 현실이다.

이에, 전문가에 의존하지 않고, 쇼핑몰과 관련된 디자인을 효율적으로 만들기 위한 애플리케이션(application)이 요구되는 실정이다.

상술한 문제점을 해결하기 위한 본 발명의 일 양태에 따른 목적은 쇼핑몰과 관련된 디자인 생성을 위해 사용자가 이미지 및 텍스트만 입력하면, 이를 이용하여 사용자가 의도한 목적에 최적화된 형태로 이미지 및 텍스트를 가공하고 가공된 이미지와 텍스트를 적절하게 병합하여 쇼핑몰과 연관된 디자인을 자동으로 생성하는 방법 및 장치, 시스템을 제공하는 것이다.

상기한 목적을 달성하기 위한 본 발명의 일 양태에 따른 온라인 쇼핑몰과 연관된 디자인(design) 자동 생성 방법은, 온라인 쇼핑몰과 연관된 이미지 내의 객체를 분석하여 상기 이미지와 연관된 형상을 도출하는 단계, 상기 도출된 형상을 기설정된 패턴 그리드 유형과 매칭하는 단계, 상기 매칭된 패턴 그리드 유형을 기반으로, 상기 이미지의 여백을 분석하여 캔버스(canvas) 내의 복수 개의 컴포넌트(component)들을 정의하는 단계(캔버스는 상기 이미지가 삽입되는 공간을 나타내며, 컴포넌트는 상기 이미지와 함께 디자인을 구성하는 텍스트가 입력되는 영역을 나타냄) 및 상기 정의된 복수 개의 컴포넌트들 중 적어도 하나에 텍스트를 입력하여 최종 디자인을 생성하는 단계를 포함할 수 있다.

상기 이미지와 연관된 형상을 도출하는 단계는, 상기 객체를 둘러싸는 임의의 사각블록과 상기 객체가 만나는 4개의 포인트들을 추출하는 단계 및 상기 4개의 포인트들을 이어서 생성되는 4개의 직선이 이루는 형상을 상기 이미지와 연관된 형상으로 도출하는 단계를 포함할 수 있다.

상기 4개의 직선에 포함되는 제 1 직선, 제 2 직선, 제 3 직선 및 제 4 직선의 길이 관계를 기반으로 상기 이미지와 연관된 형상의 세부(detail)를 결정할 수 있다.

상기 도출된 형상을 기설정된 패턴 그리드 유형과 매칭하는 단계는, 상기 도출된 형상을 제 1 클래스 유형 중 하나에 매칭하는 단계를 포함하되, 상기 제 1 클래스 유형은 평행사변형 형태의 크로스(cross) 유형, 마름모 형태의 다이아몬드(diamond) 유형 및 삼각형 형태의 트라이앵글(triangle) 유형을 포함할 수 있다.

상기 이미지 내의 객체를 둘러싸는 임의의 사각블록과 상기 객체가 만나는 4개의 포인트들을 이어서 생성되는 4개의 직선간의 길이 관계를 기반으로 상기 제 1 클래스를 더 세분화한 제 2 클래스 유형 중 하나에 매칭할 수 있다.

상기 복수 개의 컴포넌트들을 정의하는 단계는, 상기 이미지 내의 객체와 연관된 4개의 포인트를 기준으로 상기 복수 개의 컴포넌트들을 정의하는 단계를 포함할 수 있다.

상기 복수 개의 컴포넌트들을 정의하는 단계는, 상기 4개의 포인트들 중 적어도 일부를 기점으로 상기 이미지 내의 얼굴을 둘러싸는 사각블록으로부터의 연장선을 고려하여 상기 복수 개의 컴포넌트들을 정의하는 단계를 포함할 수 있다.

상기 복수 개의 컴포넌트 중 적어도 하나에 텍스트를 입력하여 최종 디자인을 생성하는 단계는, 상기 복수 개의 컴포넌트 각각의 복잡도를 계산하는 단계 및 상기 복수 개의 컴포넌트 각각의 복잡도를 기반으로 적어도 하나의 텍스트의 입력 위치를 결정하는 단계를 포함할 수 있다.

제 1 텍스트는 가장 높은 복잡도를 갖는 컴포넌트에 배치되고 그리고 제 2 텍스트는 가장 낮은 복잡도를 갖는 컴포넌트에 배치될 수 있다.

상기 복수 개의 컴포넌트 중 적어도 하나에 텍스트를 입력하여 최종 디자인을 생성하는 단계는, 상기 복수 개의 컴포넌트 각각의 크기와 연관된 정보를 획득하는 단계 및 상기 획득된 크기 정보를 기반으로 적어도 하나의 텍스트의 입력위치를 결정하는 단계를 포함할 수 있다.

헤드라인 텍스트는 가장 큰 크기를 갖는 컴포넌트에 배치하고, 서브 텍스트는 두번째로 큰 크기를 갖는 컴포넌트에 배치할 수 있다.

텍스트를 형태소 별로 의미 분석을 수행하는 단계 및 의미 분석을 수행한 결과에 따라 텍스트 내의 형태소 간의 상호작용을 고려하여, 상기 복수 개의 컴포넌트를 재배치하는 단계를 포함할 수 있다.

텍스트가 기설정된 개수의 형태로보다 작게 구성된 경우, 상기 텍스트는, 기정의된 컴포넌트의 배치를 무시하고 얼굴을 침범하지 않는 범위에서 배치될 수 있다.

제 1 텍스트와 제 2 텍스트가 연계하여 하나의 연관된 의미를 갖는 경우, 상기 제 1 텍스트는 제 1 컴포넌트에 배치하고, 제 2 텍스트는 제 2 컴포넌트에 배치하되, 상기 제 1 컴포넌트와 상기 제 2 컴포넌트는 기준값보다 높은 상관성을 가질 수 있다.

상기 정의된 복수 개의 컴포넌트들 중 적어도 하나에 텍스트를 입력하여 최종 디자인을 생성하는 단계는, 제 1 텍스트가 입력됨에 대응하여, 제 1 텍스트에 대한 의미분석을 통해 제 1 텍스트와 유사어 또는 강조어를 생성하는 단계 및 상기 생성된 유사어 또는 강조어를 상기 정의된 복수 개의 컴포넌트 중 적어도 하나에 입력하는 단계를 포함할 수 있다.

제 1 항에 있어서, 상기 정의된 복수 개의 컴포넌트들 중 적어도 하나에 텍스트를 입력하여 최종 디자인을 생성하는 단계는, 디자인 생성 요청에 포함된 프로모션 주제 정보, 이벤트 정보 및 절기 정보 중 적어도 하나를 기반으로 그에 대응하는 장식형상을 추출하는 단계 및 상기 생성된 장식형상을 상기 정의된 복수 개의 컴포넌트 중 적어도 하나에 입력하는 단계를 포함할 수 있다.

상기 쇼핑몰 디자인 자동 생성 방법은, 온라인 쇼핑몰과 연관된 복수 개의 이미지들 중 디자인에 적합한 이미지를 선별하는 단계를 더 포함하되, 상기 디자인에 적합한 이미지를 선별하는 단계는, i) 이미지 내에 얼굴 객체가 존재하는지 여부 및 ii) 이미지 내에 텍스트가 존재하는지 여부 중 적어도 하나를 기반으로 선별하는 단계를 포함할 수 있다.

상기 쇼핑몰 디자인 자동 생성 방법은, 온라인 쇼핑몰과 연관된 복수 개의 이미지들 중 디자인에 적합한 이미지를 선별하는 단계를 더 포함하되, 상기 디자인에 적합한 이미지를 선별하는 단계는, 상기 텍스트의 의미를 분석하는 단계 및 분석된 텍스트의 의미에 대응되는 객체를 포함하는 이미지를 선별하는 단계를 포함할 수 있다.

상기한 목적을 달성하기 위한 본 발명의 다른 양태에 따른 온라인 쇼핑몰과 연관된 디자인(design) 자동 생성 장치는, 사용자 단말로부터 디자인 자동 생성 요청을 수신하고 생성된 최종디자인을 제공하는 통신부 및 상기 디자인 자동 생성 요청에 대응하여, 상기 쇼핑몰과 연관된 이미지 내의 객체를 분석하여 상기 이미지와 연관된 형상을 도출하고, 상기 도출된 형상을 기설정된 패턴 그리드 유형과 매칭하며, 상기 매칭된 패턴 그리드 유형을 기반으로, 상기 이미지의 여백을 분석하여 캔버스(canvas) - 캔버스는 상기 이미지가 삽입되는 공간을 나타냄 - 내의 복수 개의 컴포넌트(component)들 - 컴포넌트는 상기 이미지와 함께 디자인을 구성하는 텍스트가 입력되는 영역을 나타냄 - 을 정의하고, 상기 정의된 복수 개의 컴포넌트들 중 적어도 하나에 텍스트를 입력하여 최종 디자인을 생성하는 프로세서를 포함할 수 있다.

상기한 목적을 달성하기 위한 본 발명의 또 다른 양태에 따른 온라인 쇼핑몰과 연관된 디자인(design) 자동 생성 시스템은, 디자인 자동 생성 요청을 전송하고 상기 요청에 대응하는 최종디자인을 수신하는 사용자 단말 및 상기 사용자 단말로부터의 디자인 자동 생성 요청에 대응하여, 상기 쇼핑몰과 연관된 이미지 내의 객체를 분석하여 상기 이미지와 연관된 형상을 도출하고, 상기 도출된 형상을 기설정된 패턴 그리드 유형과 매칭하며, 상기 매칭된 패턴 그리드 유형을 기반으로, 상기 이미지의 여백을 분석하여 캔버스(canvas) - 캔버스는 상기 이미지가 삽입되는 공간을 나타냄 - 내의 복수 개의 컴포넌트(component)들 - 컴포넌트는 상기 이미지와 함께 디자인을 구성하는 텍스트가 입력되는 영역을 나타냄 - 을 정의하고, 상기 정의된 복수 개의 컴포넌트들 중 적어도 하나에 텍스트를 입력하여 최종 디자인을 생성하는 쇼핑몰 디자인 자동생성 장치를 포함할 수 있다.

본 발명의 쇼핑몰과 연관된 디자인 자동 생성 방법 및 장치, 및 시스템에 따르면, 인간의 직관과 경험에만 의지하던 쇼핑몰 관련 디자인 제작 과정을 인공지능을 이용하여 자동화함으로써, 디자인을 전문적으로 공부하지 않은 일반 쇼핑몰 운영자들도 완성도 높은 디자인을 제작할 수 있으며, 이를 통해 소규모 쇼핑몰 운영자들의 경쟁력을 제고하는 효과가 있다.

도 1은 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법이 적용되는 시스템을 나타낸 블록도,
도 2는 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법을 나타낸 흐름도,
도 3은 사용자 단말에서 쇼핑몰 디자인에 사용될 이미지 및 텍스트를 선택하는 인터페이스를 나타낸 도면,
도 4는 이미지와 텍스트가 삽입되어 쇼핑몰 디자인이 생성되는 공간인 캔버스 그리드(canvas grid)를 나타낸 개념도,
도 5는 본 발명의 일 실시예에 따른 이미지 삽입 방법을 나타낸 흐름도,
도 6은 이미지 중심 포인트 상에 이미지를 안착하는 방법을 설명하기 위한 개념도,
도 7a는 이미지 시각화 분석을 통해 이미지의 형상을 도출하여 시각화 패턴 그리드 유형과 매칭하는 방법을 설명하기 위한 개념도,
도 7b는 도 7a의 방법에 의해 이미지의 형상과 매칭되는 시각화 패턴 그리드의 다양항 실시예를 나타낸 예시도,
도 8은 여백 분석을 통해 컴포넌트의 위치를 결정하는 방법을 설명하기 위한 개념도,
도 9는 결정된 컴포넌트의 위치를 캔버스 그리드와 매칭하여 컴포넌트의 배치를 결정하는 방법을 설명하기 위한 개념도,
도 10은 각 컴포넌트의 복잡도를 분석하여 컴포넌트를 재배치하는 방법을 나타낸 흐름도,
도 11은 이미지와 텍스트가 캔버스 그리드 상에 삽입되어 데이터화된 최종 디자인을 나타낸 도면,
도 12는 이미지 분석을 통해 텍스트의 속성값을 결정하는 방법을 나타낸 흐름도,
도 13a 내지 도 13b는 삽입이미지로부터 획득된 정보와 텍스트의 속성값을 매칭하는 과정을 설명하기 위한 예시도,
도 14는 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법에서 감성어휘와 이미지 색상을 매칭하기 위한 매칭도,
도 15는 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법에서 이미지로부터 추출된 감정정보와 복잡도 정보를 기반으로 텍스트의 속성값을 매칭한 결과를 예시적으로 나타낸 표,
도 16은 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법을 통해 최초 입력이미지로부터 이미지/텍스트 병합 과정을 거쳐 최종결과물을 도출하는 과정을 개념적으로 정리한 개념도,
도 17은 복수 개의 최종디자인 후보를 예시적으로 나타낸 도면,
도 18은 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법에서 사용되는 캔버스 그리드 시스템의 중단점(breakpoint)을 나타낸 도면,
도 19는 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법에서 사용되는 캔버스 그리드 시스템의 단일 격자, 단일 제어포인트(control point)를 설명하기 위한 개념도,
도 20은 1200 격자 모드에서, 캔버스 상의 제어포인트의 구성을 나타낸 도면,
도 21은 120 x 74 격자 모드에서, 컨트롤 센터(중앙기준면)와 컴포넌트 영역을 나타낸 도면,
도 22a 내지 도 22c는 가로방향에서, 디바이스 중단점에 따라 서로 다른 격자 크기를 갖는 특징을 설명하기 위한 개념도,
도 23은 세로방향에서의 디바이스 중단점을 나타낸 도면,
도 24는 격자시스템에 피보나치 수열 기반의 비율이 결합된 형태의 레이아웃 구성을 나타낸 도면,
도 25는 가로 방향의 2분할 레이아웃과 가로방향의 3분할 레이아웃을 나타낸 예시도,
도 26은 도 25의 2분할 레이아웃과 3분할 레이아웃에 이미지 및 텍스트를 삽입하여 완성한 쇼핑몰 디자인의 예시적인 모습을 나타낸 예시도,
도 27은 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법의 분할 레이아웃 섹션 사이즈 결정에 따른 디자인 삽입과정을 구체적으로 나타낸 상세흐름도이다.
도 28은 쇼핑몰 디자인 자동생성 방법의 시각요소에 있어서, 광고/SNS와 같은 특정 채널에서 쇼핑몰 디자인이 활용되는 경우, 지정된 사이즈의 디자인 형태로 규격화되어 디자인을 생성할 때 참고하는 제작사이즈 테이블,
도 29는 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 장치를 나타낸 블록도이다.

본 발명은 다양한 변경을 가할 수 있고 여러 가지 실시예를 가질 수 있는 바, 특정 실시예들을 도면에 예시하고 상세하게 설명하고자 한다.

그러나, 이는 본 발명을 특정한 실시 형태에 대해 한정하려는 것이 아니며, 본 발명의 사상 및 기술 범위에 포함되는 모든 변경, 균등물 내지 대체물을 포함하는 것으로 이해되어야 한다.

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

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

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

다르게 정의되지 않는 한, 기술적이거나 과학적인 용어를 포함해서 여기서 사용되는 모든 용어들은 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에 의해 일반적으로 이해되는 것과 동일한 의미를 가지고 있다. 일반적으로 사용되는 사전에 정의되어 있는 것과 같은 용어들은 관련 기술의 문맥상 가지는 의미와 일치하는 의미를 가진 것으로 해석되어야 하며, 본 출원에서 명백하게 정의하지 않는 한, 이상적이거나 과도하게 형식적인 의미로 해석되지 않는다.

이하, 첨부한 도면들을 참조하여, 본 발명의 바람직한 실시예를 보다 상세하게 설명하고자 한다. 본 발명을 설명함에 있어 전체적인 이해를 용이하게 하기 위하여 도면상의 동일한 구성요소에 대해서는 동일한 참조부호를 사용하고 동일한 구성요소에 대해서 중복된 설명은 생략한다.

쇼핑몰 디자인 자동생성 시스템

도 1은 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법이 적용되는 시스템을 나타낸 블록도이다. 도 1에 도시된 바와 같이, 본 발명의 일 실시예에 따른 디자인 자동생성 시스템은 쇼핑몰(110-1~110-N), 네트워크(120) 및 쇼핑몰 디자인 자동 생성장치(130)를 포함할 수 있다.

도 1을 참조하면, 쇼핑몰(110-1~110~N)은 인터넷을 통하여 상품 및/또는 서비스를 판매하는 온라인 쇼핑몰을 의미한다. 쇼핑몰(110-1~110~N)은 특정 URL을 가지고 인터넷 상에서 해당 주소로의 방문자들을 상대로 상품을 판매한다. 쇼핑몰 운영자는 판매된 상품에 대한 금액 중 적어도 일부를 쇼핑몰과 연관된 자신의 계좌를 통해 획득하는 방식으로 쇼핑몰을 운영한다.

도 1에 있어서, 쇼핑몰(110-1~110~N)은 앞서 설명한 바와 같이, 인터넷 상의 특정주소(예컨대, URL)의 웹 페이지, 쇼핑몰과 연관된 정보를 취급하는 서버 또는 쇼핑몰의 운영자의 단말기로써 구현될 수 있다. 단말은 스마트폰, PC 등의 컴퓨팅 디바이스를 포함할 수 있다.

본 발명의 실시예에 따르면, 복수 개의 쇼핑몰(110-1~110-N)은 네트워크(120)를 통해 쇼핑몰디자인 자동 생성장치(130)와 연동할 수 있다. 쇼핑몰(110-1~110-N)은 자신의 쇼핑몰의 상품 디스플레이, 쇼핑몰의 이벤트 홍보 등을 위한 디자인(배너 디자인을 포함할 수 있음) 생성을 요청하는 장치로 구현될 수 있고, 이를 위해 쇼핑몰과 관련된 디자인 생성을 쇼핑몰 디자인 자동 생성장치(130)에 요청할 수 있다. 이때, 쇼핑몰(110-1~110-N) 운영자는 디자인에 삽입되기 바라는, 이미지 및/또는 텍스트에 대한 정보를 쇼핑몰디자인 자동 생성장치(130)로 제공할 수 있다. 운영자가 희망하는 이미지가 모두 디자인으로 사용될 수 있는 것은 아니기 때문에, 상기 이미지 정보 및/또는 텍스트 정보는 디자인에 적용이 될 후보이미지 및/또는 텍스트로 볼 수 있다. 여기서, 텍스트는 문자(영문, 한문, 국문, ... 등을 포함함), 숫자, 기호, 수식 등을 포함하며, 컴퓨팅 장치에서 처리가능한 형태의 언어를 모두 포함할 수 있다. 이미지는 JPG, PNG, BMP, GIF, JPEG, PDF, JPE, TIFF 등 다양한 형식의 이미지를 포함할 수 있다. 다만, GIF 파일은 다수 프레임을 포함하는 움직이는 이미지 파일이므로, 각 프레임을 추출하여 JPG 파일로 변환하는 것이 바람직할 수 있다.

본 발명의 다른 실시예에 따르면, 쇼핑몰(110-1~110-N) 운영자는 디자인에 포함될 텍스트만 요청할 수도 있다. 장치는 텍스트만 포함된 요청을 수신하여 직접 텍스트의 의미분석을 통해 텍스트의 의미에 가장 부합하는 이미지를 장치가 선별하여 이미지와 텍스트가 병합된 디자인을 생성할 수도 있다.

본 발명의 일 실시예에 따르면, 쇼핑몰(110-1~110-N)은 이미지 및 텍스트를 포함하는 쇼핑몰 디자인 작성요청에 홍보목적, 홍보대상, 홍보주제, 이벤트 관련 정보 및/또는 계절관련 정보를 포함시켜 쇼핑몰 디자인 자동 생성장치(130)로 제공할 수 있다. 이러한 부가정보는 쇼핑몰 디자인 자동 생성장치(130)에서의 텍스트 내에서 핵심어를 추출하는 기능, 그리고 대상 이미지를 선별하는 기능 등을 수행하는데 활용될 수 있다. 홍보 주제는, 크게, 할인/세일, 신상품/시즌, 브랜드/카테고리, 사은품/포인트, SNS/회원, 기념일/공식 및 무료배송 중 하나로 분류될 수 있다.

네트워크(120)는 쇼핑몰(110-1~110-N)과 쇼핑몰 디자인 자동 생성장치(130)를 연결하는 통신망으로써, 유선망 및/또는 무선망(인터넷(internet))을 포함할 수 있다.

쇼핑몰디자인 자동 생성장치(130)는 쇼핑몰(110-1~110-N) 중 적어도 하나로부터 디자인 생성 요청(이미지 및/또는 텍스트 정보를 포함할 수 있음)을 네트워크(120)를 통해 수신하고, 수신된 이미지 및/또는 텍스트를 기반으로 쇼핑몰과 연관된 디자인을 자동으로 생성하는 장치이다. 쇼핑몰디자인 자동 생성장치(130)는 컴퓨팅 장치로 구현될 수 있다. 여기서 말하는 컴퓨터 장치는 서버 급 컴퓨터 단말기로 구현될 수 있다. 상기 컴퓨터 장치는 통상적인 컴퓨터 단말이 가지는 입력 장치, 표시 장치, 네트워킹 장치, 하드디스크, 프로그램을 저장하는 메모리 및 메모리에 저장된 프로그램을 수행시키는 프로세서 등을 구비할 수 있다. 다만, 반드시 서버 급 컴퓨터 단말로 구현되어야 하는 것은 아니다.

쇼핑몰디자인 자동 생성장치(130)는 쇼핑몰을 개설하고 운영하는 플랫폼을 배포하고 관리하는 서버이거나 또는 상기 서버와 연동하는 서버일 수 있다. 따라서, 쇼핑몰디자인 자동 생성장치(130)는 하나의 쇼핑몰(110-1)과 연관된 정보만을 취급하는 것이 아니라, 다수의 쇼핑몰(110-1~110-N)과 연관된 정보를 취급하고, 빅데이터를 기반으로 다양한 정보를 분석 및 학습할 수 있다. 또한, 사용자의 요청에 가장 적절한 디자인을 생성하기 위해, 다수의 쇼핑몰(110-1~110-N)의 정보 중 최적의 정보를 도출하여 이를 디자인 생성에 활용한다.

쇼핑몰디자인 자동 생성장치(130)는 쇼핑몰 운영자로부터의 요청에 대응하여, 이미지 분석을 통해 수신된 이미지가 디자인에 삽입하기에 적합한지 판단한다. 그리고는, 이미지를 캔버스 그리드(canvas grid) 상에 배치하고, 배치된 캔버스 그리드 상에서 이미지를 특정 단위 영역별로 분석하여 운영자가 요청한 텍스트를 이미지와 적절하게 병합한다. 그리고는, 생성된 디자인을 요청했던 쇼핑몰(110-1~110-N)의 운영자(이하, "사용자"라고 부를 수 있음)에게 반환한다.

쇼핑몰(110-1~110-N)은 쇼핑몰디자인 자동 생성장치(130)에서 생성된 디자인을 수신하여, 운영자의 판단에 따라 쇼핑몰(110-1~110-N) 또는 기타 채널에 업로드할지 결정할 수 있다. 상기 결정에 따라 생성된 디자인은 쇼핑몰(110-1~110-N)과 연관된 웹페이지, 애플리케이션 및/또는 SNS 등에서 활용될 수 있다.

본 발명의 다른 실시예에 따르면, 쇼핑몰(110-1~110-N)과 연관된 단말은 쇼핑몰디자인 자동 생성장치(130)에서 제공하는 애플리케이션을 다운로드 받아 애플리케이션을 통해 자동생성을 수행할 수 있다. 즉, 쇼핑몰(110-1~110-N)과 연관된 사용자 단말은 입력이미지 및/또는 입력텍스트로부터 쇼핑몰 디자인을 자동으로 생성하는 과정을 단말 내에서 수행할 수 있다. 별도의 서버장치 없이 단말의 프로세서(미도시)가 다운받은 애플리케이션을 실행하면, 이미지 분석 및/또는 텍스트 분석을 통해 최적의 쇼핑몰 디자인을 생성하도록 할 수 있다.

쇼핑몰 디자인 자동생성 방법

도 2는 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법을 나타낸 흐름도이다.

도 2를 참조하면, 쇼핑몰 디자인 자동 생성장치(서버 또는 장치라고 불릴 수 있음)는 사용자 단말(쇼핑몰 운영자 단말 또는 쇼핑몰과 연관된 디자인을 요청하는 사용자의 단말)로부터 이미지 및 텍스트를 포함하는 디자인 생성요청을 수신한다(S210). 디자인 생성요청은 장치가 제공하는 쇼핑몰 디자인 자동생성을 위한 웹 페이지에서, 이미지 및 텍스트를 입력하는 방식으로 이루어질 수 있다. 이는 다음의 도 3을 통해 보다 상세히 설명한다.

도 3은 사용자 단말에서 쇼핑몰 디자인에 사용될 이미지 및 텍스트를 선택하는 인터페이스를 나타낸 도면이다.

도 3을 참조하면, 장치가 제공하는 디자인 자동생성을 위한 웹페이지에 접속하면, 디자인에 사용할 이미지를 고르는 항목과 텍스트를 고르는 항목이 표시될 수 있다. 이미지의 선택과 관련하여, 사용자는 "불러오기" 아이콘을 통해 자신의 단말에 저장된 이미지를 불러올 수 있다. 또는, 자신이 운영하는 쇼핑몰의 특정 이미지를 선택하여 선택된 사진이 디자인의 배경이 되도록 할 수 있다.

경우에 따라, "이미지 자동생성" 아이콘을 클릭하여, 텍스트와 연관된 최적의 이미지를 직접 장치가 획득하도록 할 수도 있다. 이때, 장치는 해당 쇼핑몰 또는 다른 쇼핑몰들과 연관된 다양한 이미지들의 범위에서 텍스트의 의미에 대응되는 이미지를 텍스트의 의미분석 및 이미지분석을 통해 획득할 수 있다.

나아가, "이미지 카테고리 설정" 아이콘을 이용하여, 이미지 구분하여 선택함에 의해 디자인을 생성할 수 있다. 예컨대, "상반신 컷", "하반신 컷", "외투", "속옷", "여름 옷", "겨울 옷" 등 특정 카테고리에 대응하는 이미지만을 사용하도록 설정할 수 있다.

추가적으로, 사용자는 디자인 자동생성을 위해 복수 개의 이미지를 선택할 수 있다. 즉, 복수 개의 이미지가 하나의 디자인으로 생성되도록 할 수 있다.

다음으로, 사용자는 텍스트 입력 부분에서, 디자인에 삽입될 텍스트를 직접 입력할 수 있다. 텍스트는 디자인의 가장 주요이미지를 결정할 ① 메인 텍스트("레드라인"이라고 부를 수 있음), 그리고 메인텍스트보다 낮은 중요도의 ② 서브 텍스트("서브카피"라고 부를 수 있음)로 구분하여 입력할 수 있다. 그 밖에 서브텍스트보다 더 낮은 중요도의 ③ 보조 텍스트("보조카피"라고 부를 수 있음)도 구분하여 입력할 수 있다.

장치는, 메인텍스트의 핵심어를 분석하여 이미지의 전반적인 분위기 및 감정분석에 사용할 수 있다. 특히, 메인텍스트의 핵심어를 강조하는 것이 바람직하기 때문에, 캔버스 내에서 텍스트가 가장 강조될 수 있는 제 1 컴포넌트에 메인텍스트를 배치하는 것을 우선적으로 고려한다. 그리고, 메인텍스트가 배치된 제 1 컴포넌트와의 관련성을 고려하여 서브텍스트를 제 1 컴포넌트와의 연관성이 가장 높은 제 2 컴포넌트에 배치한다. 장치는 텍스트의 수를 기반으로 컴포넌트의 수를 대응시킬 수 있다.

특히, 장치는 쇼핑몰 디자인 자동생성과 관련된 사용자 인터페이스에서, 부가입력정보로, 다음과 같은 부분에 대한 정보를 입력받을 수 있다. 장치는, 프로모션과 관련된 목적 정보(기획전, 상품전시, 사이트 제작 등)인지에 대한 여부를 입력하는 부분 및 절기(계절)에 대한 데이터를 입력하는 부분, 프로모션 혜택 정보 및 연중 행사 데이터인지를 구분하는 정보를 입력하는 부분을 제공할 수 있다. 사용자는 제공된 인터페이스 내의 프로모션 및 이벤트와 관련된 입력란에 해당하는 정보를 입력할 수 있다. 장치는 입력된 정보에 따라 해당 목적 및 절기, 혜택 및 행상에 대응하는 템플릿(template)을 준비하고, 준비된 템플릿이 사용자의 입력된 데이터에 대응하여 최종디자인으로써 출력될 수 있도록 설정할 수 있다.

본 발명의 일 실시예에 따르면, 이미지 및 텍스트를 입력하지 않고, 부가정보만 입력하여도, 부가정보에 대응하는 최적의 이미지 및 텍스트를 서버에 저장되거나 서버와 연계된 타 저장 장치로부터 검색하여 획득할 수 있다. 이미지 및 텍스트의 획득시 기계학습 기반의 인공지능이 이용될 수 있다.

또한, 도 3의 사용자 인터페이스는 제작되는 디자인의 크기 및 그에 대응하는 캔버스 그리드 시스템의 사이즈를 결정하기 위해, 생성하고자 하는 디자인의 크기를 입력하는 부분을 제공할 수 있다. 이때, 해당 디자인의 사용처를 선택하는 부분을 제공할 수 있다. 예컨대, 디자인을 쇼핑몰 브랜드에 사용할 것인지, 광고용으로 사용할 것인지(이 경우, 페이스북 광고인지, 구글 DA인지 등으로 보다 세분화될 수 있음), 다이렉트 메일용으로 사용할 것인지, SNS(이 경우, 페이스북인지, 인스타그램인지, 라인인지 등으로 세분화될 수 있음)에 업로드하는 용도로 사용할 것인지를 결정하기 위한 인터페이스를 제공한다.

다시 도 2로 돌아가서, 사용자 단말에서 이미지 및 텍스트의 입력이 완료되면, 장치는 캔버스 그리드를 준비한다(S220). 캔버스 그리드란, 쇼핑몰 디자인의 최종결과물을 생성하기 위한 기본 격자시스템으로, 이미지 및 텍스트가 삽입되는 물리적인 및/또는 논리적인 공간을 말한다. 캔버스 그리드는 기본적으로 가로 및 세로방향에 있어서, 골든비율(1: 1.618)("피보나치 수열 기반의 비율"이라고 부를 수 있음)을 고려하여 설계된다. 골든비율을 고려하여 영역을 다중으로 분할하는 기준선을 배치하고, 기준선의 접점에 디자인을 제어하기 위한 다수의 포인트가 생성된다. 그리고, 생성된 포인트를 기반으로 이미지 및 텍스트를 제어할 수 있다. 캔버스 그리드는, 이하 도 4를 통해 보다 상세히 설명한다.

캔버스 그리드가 준비되면, 장치는 캔버스 그리드 내에 이미지를 삽입한다(S230). 이미지 삽입에 있어서, 장치는 디자인 삽입 적합성을 판단한다. 판단요소는, 대부분 이미지의 분석(예컨대, 얼굴인식 알고리즘을 포함함)과 관련된다. 장치는, 이미지 내에 얼굴이 존재하는지 여부, 이미지 내의 객체가 어떤 상태(예컨대, 인물의 경우 어떤 몸짓을 하고 있는지)인지, 이미지가 상반신 컷인지, 전신 컷인지 등에 대한 분석을 수행한다. 본 명세서 상에서 "얼굴"에 특정하여 기재된 부분은 얼굴을 포함하지 않는 다른 이미지 또는 얼굴을 포함하는 이미지라고 하더라도 얼굴이 아닌 특정 객체(상품, 인체의 타 부위 등)로 대체되어도 무방함은 자명할 것이다.

장치는 얼굴이 존재하는 것, 얼굴이 기준값 이상의 사이즈로 표시되는 것, 캔버스의 픽셀 사이즈와 이미지 사이즈를 고려하여 허용 사이즈 범위의 이미지를 디자인에 삽입하기에 적합한 이미지로 판단한다. 예컨대, 1000 픽셀 사이즈의 캔버스에서 200 픽셀 사이즈의 이미지는 허용사이즈 범위에 포함되지 않는다고 판단하여, 해당 이미지는 폐기처리할 수 있다. 다만, 허용사이즈 범위 내의 이미지는 캔버스 그리드와 매칭시켜 캔버스 내에 삽입한다.

이미지를 삽입하고 나면, 장치는, 이미지와 연관된 형상을 도출한다(S240). 이는 이미지 내의 객체를 분석함에 의해 이루어진다. 객체를 둘러싸는 임의의 직사각형과 객체가 만나는 4개의 꼭지점을 기반으로 이미지의 형상을 도출한다. 그리고는, 도출된 형상에 대응하는 시각화 패턴 그리드 유형(패턴 그리드 유형이라고 부를 수 있음)을 매칭한다(S250). 본 발명의 실시예에 따르면, 시각화 패턴 그리드 유형은 크게, 트라이앵글 유형, 다이아몬드 유형 및 크로스 유형을 포함한다. 즉, 도출된 이미지의 형상을 위 세 개의 유형 중 하나에 매칭한다. 그리고는, 장치는, 매칭된 유형과 이미지의 여백부분을 고려하여 컴포넌트의 배치를 결정한다(S260). 여백 분석은 해당 이미지에서 어느 영역에 여백이 많은지, 여백의 복잡도는 어느정도인지, 여백과 객체의 구분이 되는 윤곽선 등에 대한 분석을 포함한다. 여기서, 컴포넌트란, 텍스트를 입력하기 위한 캔버스 내의 임의의 영역을 의미한다. 컴포넌트는 기본적으로 직사각형의 형태로 형성되며, 그 크기 및 배치는 일차적으로 상기 매칭된 패턴 그리드 유형을 고려하고, 이차적으로 이미지 내의 객체의 배치 및 삽입되는 텍스트에 대한 분석 내용에 따라 달라질 수 있다. 이때, 텍스트의 분석내용은 크게, 텍스트의 정보량, 형태소의 갯수, 핵심어의 의미 등에 대한 분석내용을 포함한다.

컴포넌트에 대한 배치를 결정하고 나면, 장치는 텍스트를 컴포넌트 영역 내에 입력한다(S270). 장치는 위와 같은 과정을 통해 장치는 다양한 경우의 수에 따른, 컴포넌트의 배치 및 컴포넌트에 삽입되는 텍스트의 속성값의 예를 생성할 수 있고, 이러한 다양한 예시적인 디자인은 최선의 심미성을 갖는 것부터 순차적으로 그보다 떨어지는 심미성을 갖는 것을 생성할 수 있다. 이때, 장치는 최상의 디자인부터 상위 N개(N은 설정된 값일 수 있음)의 디자인을 사용자에게 표시할 수 있다. 그리고는, 사용자의 선택을 기다릴 수 있다.

도 2가 전반적인 쇼핑몰 디자인의 생성 방법에 관한 개괄적인 설명이었다면, 이하, 각각의 단계(S220, S230, S240, S250, S260 및 S270)를 도 4 내지 도 11을 들어 보다 상세히 설명한다.

캔버스 그리드 시스템 기본

도 4는 이미지와 텍스트가 삽입되어 쇼핑몰 디자인이 생성되는 공간인 캔버스 그리드(canvas grid)를 나타낸 개념도이다.

도 4를 참조하면, 캔버스 그리드는 직사각형 형태로써, 모든 디자인 요소를 제어한다. 또한, 어떠한 형태의 사용자 단말의 환경에도 최적화된 반응을 도출할 수 있도록 설계된다.

캔버스 그리드는 다양한 기준선을 기반으로 기준선간의 접점에 제어를 위한 포인트가 생성된다. 따라서, 기준선은 광의의 제어포인트의 위치를 결정하는 요소가 된다. 기준선은 우선, 가로 및 세로 방향으로 피보나치 수열 기반의 골든비율을 유지할 수 있도록 하는 직선을 포함한다. 캔버스 그리드의 가로 및 세로 비율이 1: 1.618의 황금비율을 갖기 때문에, 이를 반으로 나누는 형태의 기준선으로 둘러싸인 영역 역시 황금비율을 가질 수 있다. 때문에, 캔버스를 가로 및 세로 방향으로 반으로 분할하는 작업을 다중으로 수행하여 하나의 캔버스 영역이 수 개 내지 수십 개의 분할영역으로 나누어지도록 기준선을 생성한다.

이와 같이 가로 및 세로 영역으로 이분할하는 기준선, 사분할하는 기준선(410-1, 410-2, 410-3) 및 8분할하는 기준선들을 생성한다. 그리고, 캔버스의 네 개의 꼭지점 중 두 개씩 짝을 이루어 대각선을 생성하고, 상기 사분할 기준선(410-1, 410-2, 410-3) 및 8분할 기준선과 각 꼭지점과의 대각선도 생성한다. 또한, 사분할 기준선(410-1, 410-2, 410-3) 및 8분할 기준선에 의해 생성되는 사각블록에서도 대각선을 생성한다. 그리고는, 세로방향에 있어서, 최외곽 8분할 기준선(420-1, 420-2)의 좌측 및 우측 영역 내에 세로방향의 여백선을 생성한다. 여백선은 텍스트가 입력되지 않는 영역으로, 컴포넌트가 배치되지 않는 영역이다. 가로방향의 여백선 역시 최외곽 8분할 기준선의 상단 및 하단 영역 내에 생성된다.

위와 같이 기준선을 생성하고 나서, 텍스트 및 컴포넌트 제어를 위한 다양한 포인트를 기준선 간의 접점 상에 생성한다.

본 발명의 일 실시예에 따르면, 캔버스 그리드는, 3개의 서로 다른 개념의 포인트를 포함할 수 있다. 포인트는 하나의 점, 즉, 픽셀이 될 수도 있고, 격자 시스템이기 때문에, 하나의 그리드(grid)를 의미할 수도 있다. 그리드의 개념은 이하 도 18 내지 도 22에 보다 상세히 설명한다.

1) 세 개의 서로 다른 개념의 포인트 중 하나는, 이미지의 중심이 되는 객체(예컨대, 얼굴, 상품 등)가 삽입되는 이미지 중심 포인트이다. 이미지 중심 포인트는 객체의 중심이 삽입되며, 이미지는 보통 하나의 객체를 가지고 있기 때문에, 이미지의 중심을 잡는 포인트라고 볼 수 있다. 이미지 중심포인트는 캔버스 그리드 내에 3개가 배치될 수 있다. 3개의 이미지 중심 포인트는 각각 세로방향의 사분할 기준선(410-1, 410-2, 410-3) 상에 배치된다. 양측면의 두 개의 이미지 중심 포인트는 좌우측 사분할 기준선(410-1, 410-3)과 가로 방향의 사분할 기준선(415)가 만나는 접점 상에 생성된다. 그리고, 나머지 중심 부분의 사분할 기준선은 양측면의 두 개의 이미지 중심 포인트보다 약간 상단에 배치되어, 중심의 사분할기준선(410-2)과 가로방향의 최상단 8분할기준선(425-1)이 만나는 접점 상에 생성된다. 다만, 반드시 중앙 이미지 중심포인트가 양측면의 이미지 중심 포인트보다 상단에 배치되어야 하는 것은 아니고, 동일선상에 배치되어도 된다. 이는 사용자 설정을 통해 임의로 변경가능한 요소이다.

2) 다음으로, 두 번째 개념의 포인트는 인터랙션 포인트(interaction point)이다. 이는, 컴포넌트를 정의하고, 컴포넌트의 형상 및 배치를 제어하며, 컴포넌트의 복잡도 계산의 기준이 되는 포인트이다. 인터랙션 포인트는 텍스트의 의미분석에 따른 상호유기적인 관계를 고려한 컴포넌트 재배치(컴포넌트의 연관관계에 따른 작업)의 기준이 된다. 장치는 인터랙션 포인트를 기준으로, 생성된 컴포넌트의 크기 및 배치 관계를 고려하여 두 개 또는 그 이상의 컴포넌트 간의 상관도를 획득할 수 있다. 인터랙션 포인트가 대각선 형태로 생성되기 때문에, 대각션 방향 또는 균등분할 기준선의 양 종단 방향의 컴포넌트는 높은 상관도를 가질 수 있다. 또한, 가로 및 세로 방향으로 연결된 컴포넌트 또한 높은 상관도를 가질 수 있다.

인터랙션 포인트는 총 7개가 배치될 수 있다. 다만, 반드시 이에 국한되는 것은 아니다. 인터랙션 포인트는 대각선 방향을 따라 "

"자 형태로 배치된다. 즉, 캔버스 내의 가장 긴 두 개의 대각선(430)과 세로방향 사분할기준선(410-1, 410-2, 410-3)과의 접점 상에 배치된다.

이를 다시 말하면, 세로방향에 있어서, 좌측 8분할 기준선(420-1)에 3개, 그리고, 우측 8분할 기준선(420-2) 상에 3개가 배치된다. 그리고, 중심점에 하나가 배치된다.

가로방향으로 바라봤을 때, 이분할 기준선(440)과 만나는 접점에 하나, 최상단 및 최하단 8분할 기준선(425-1, 425-2)와 만나는 접점에 둘씩 3개가 생성된다. 그리고, 캔버스 블록 내 가장 긴 대각선이 만나는 중심점에 하나의 인터랙션 포인트가 생성된다.

다만, 인터랙션 포인트가 반드시 7개만 있어야 하는 것은 아니고, 가로 및 세로 방향의 사분할기준선 및 8분할기준선의 접점 중 일부에 임의로 배치될 수 있다.

3) 세번째로, 협의의 제어포인트가 존재한다. 협의의 제어포인트는 텍스트의 시작과 끝을 제어하는 포인트이다. 협의의 제어포인트는 컴포넌트의 배치가 완료된 후, 텍스트의 입력시, 텍스트의 입력 시작점과 입력 종료점을 제어한다. 제어포인트는 텍스트의 배치를 결정할 때 사용되는데, 장치는 이미지 내의 특정 객체와의 관계를 고려하여 텍스트의 시작점과 종료점을 제어한다. 예컨대, 이미지 내의 얼굴을 포함하는 사각블록이 제 1 기준선 내지 제 2 기준선까지의 범위에 포함되어 있다면, 입력 텍스트는 제 1 및 제 2 기준선에 대응하는 특정 기준선까지의 범위에는 삽입될 수 없다는 텍스트 입력 룰을 기반으로 텍스트를 입력할 수 있다. 장치는 기정의된 이미지 내 객체와 텍스트의 입력과 관련된 룰에 입각하여 제어포인트를 제어함에 의해 텍스트의 위치를 최적으로 결정한다.

본 발명의 실시예에 따르면, 제어포인트는 세로방향의 사분할기준선과 가로방향의 8분할 기준선의 접점에 배치될 수 있다. 본 실시예에서는, 가로방향으로 위에서 세번째 8분할 기준선과 세로방향으로 중심부의 5개의 8분할 기준선과의 접점에 5개가 배치되고, 세로방향의 이분할기준선(410-2)과 가로방향으로 위에서 세번째부터 일곱번째 8분할 기준선과의 접점에 5개가 배치되어, 중복되는 하나의 포인트 갯수를 빼면 총 9개의 제어포인트가 배치되는 것으로 설명되어 있지만, 반드시 이와 같이 제어포인트가 존재해야만 하는 것은 아니다.

본 발명의 다른 실시예에 따르면, 가로 및 세로 방향의 사분할기준선 및 8분할기준선의 접점 중 마진 영역을 제외한 모든 접점에, 또는 그 중 적어도 일부에 배치될 수 있다.

도 5는 본 발명의 일 실시예에 따른 이미지 삽입 방법을 나타낸 흐름도이다.

도 5를 참조하면, 장치는 도 4의 방법에 따라 캔버스 그리드를 준비한 후, 이미지를 캔버스 그리드에 삽입한다. 장치가 이미지를 삽입함에 있어서, 먼저 이미지 삽입의 유효성을 검증한다. 유효성의 검증은, 이미지에 모델이 존재하는지, 또는 특정 텍스트에 대응하는 객체(예컨대, 상품)가 존재하는지 여부를 판단한다.

그리고, 사용자 단말로부터 단말의 디스플레이 화면정보를 획득하여 단말의 화면에 대응하는 캔버스 그리드를 생성한 후, 생성된 캔버스 그리드의 전체 픽셀 사이즈와 삽입되는 이미지의 사이즈를 비교한다. 그리고, 이미지가 사이즈와 관련하여 허용범위를 초과하면 폐기한다. 또한, 이미지 내에 텍스트가 존재하는지 여부를 판단하여, 텍스트가 존재하면 폐기한다.

유효성에 대한 판단 부분을 보다 상세히 설명하면, 장치의 유효성 판단은 모델의 눈, 코 및 입이 모두 보이는지 여부를 기준으로 수행될 수 있다. 모델의 얼굴 내의 기저장된 구성요소들(눈, 코 및 입)이 이미지 내에 존재하는지 여부는 페이스 트랙킹(face tracking) 기법을 통해 이루어질 수 있고, 해당 구성요소의 좌표값을 기반으로 쇼핑몰과 관련된 이미지로써의 사용가능성을 판단한다. 눈, 코 및 입 중 하나라도 없다면 해당 이미지는 폐기될 수 있다.

다음으로, 장치는, 모델의 얼굴 크기와 관련된 정보를 추출하여 이를 기준값과 비교한다. 장치는 얼굴의 윤곽선을 식별하여, 식별된 윤곽선이 이루는 면적을 계산한다. 장치는, 추출된 얼굴크기 정보를 기설정된 얼굴 크기 기준값과 비교하여 기준값 이상인 이미지는 사용가능하다고 판단하고, 그렇지 않은 이미지는 폐기한다. 그리고, 장치는, 모델의 얼굴 방향과 관련된 정보를 추출한다. 추출된 데이터는 얼굴각도와 연관된 데이터로써, Roll 정도, Pan 정도 및 Tilt 정보를 포함할 수 있다. 즉, 얼굴의 좌우방향성, 고개의 상하기울기 정보, 목돌림 정보를 포함한다. 그리고는, 추출된 얼굴 좌우 방향성 정보, 고개의 상하기울기 및 목돌림 정보가 각각 설정된 기준값 내에 포함되는지 판단하여 유효성 여부를 결정한다. 예컨대, 얼굴의 일측면이 안 나왔다던지, 고개를 심하게 젖혀서 보이지 않는다던지 목을 너무 돌려 뒷머리 부분만 보이는 경우, 유효하지 않다고 판단할 수 있다. 유효하지 않는 이미지는 폐기한다.

나아가, 사용자가 요청한 이미지 카테고리(예컨대, 상반신 컷)에 속하는 이미지인지를 판단한다. 이는 객체 분석을 통해 이루어질 수 있다. 즉, 이미지 내의 객체와 사용자가 요청한 카테고리와의 연관성을 판단하여 이루어진다. 예컨대, 사용자가 상반신 컷 이미지 카테고리를 선택한 경우, 하반식 컷으로 이루어진 이미지들은 유효성 검증시 폐기될 수 있다. 상기 유효성 검증 과정은 본 흐름도에서 제외한다.

검증 과정 후, 삽입되는 대상 이미지(이하 "대상 이미지" 또는 "삽입 이미지"라고 부를 수 있음)는 사용자 단말의 디스플레이 화면 사이즈에 대응하는 캔버스 그리드의 사이즈에 매칭되도록 사이즈를 조절된 후, 캔버스 그리드에 삽입된다(S510). 사이즈 조절은 캔버스의 가로 또는 세로 방향 중 적어도 한 방향의 사이즈에 대해 이미지의 대응되는 방향의 사이즈가 매칭되도록 함으로써 수행된다. 하나의 방향에만 사이즈가 맞아 다른 하나의 방향은 사이즈가 맞지 않는 경우, 해당 부분의 객체 및/또는 컬러 분석을 통해 최적의 배경(background)을 추가한다.

이후, 장치는 대상이미지 내의 얼굴의 위치를 파악한다(S520). 이는 객체인식 알고리즘, 특히 페이스 트랙킹 알고리즘을 사용하여 수행할 수 있다. 장치는 얼굴의 위치가 이미지의 중심선으로부터 얼마나 떨어져 있는지를 판별하여 삽입될 이미지 중심 포인트를 선택할 수 있다.

예컨대, 얼굴이 중심에 있는지 판단하여(S530), 중심에 있을 경우, 중앙 이미지 중심 포인트에 얼굴을 배치한다(S535). 중심에 있지 않는 경우, 중심으로부터 좌측에 존재하는지 판단하여(S540), 좌측이면, 좌측 이미지 중심 포인트에(S545), 우측이면, 우측이미지 중심 포인트에 얼굴을 배치한다(S555). 얼굴 배치와 함께 이미지의 위치가 캔버스 그리드에 적합하게 조정되는 것이다. 이는 도 6을 통해 보다 상세히 설명한다.

도 6은 이미지 중심 포인트 상에 이미지를 안착하는 방법을 설명하기 위한 개념도이다.

도 6을 참조하면, 캔버스 그리드 내에 이미지를 삽입함에 있어서, 장치는 이미지 내의 얼굴의 위치를 파악한다. 그리고는, 장치는 이미지 내의 얼굴과 관련된 객체정보를 기반으로 얼굴이 포함된 사각 블록(610)을 생성하여, 해당 블록의 중심점이 세 개의 이미지 중심 포인트들 중 어느 하나에 대응될 수 있도록 이미지의 위치를 조정한다.

도 6의 실시예에서는, 얼굴이 이미지의 좌측, 중심 및 우측 영역을 포함하는 세 개의 영역들 중 중심영역에 존재하는 것으로 판단되기 때문에, 중앙의 이미지 중심 포인트(620)에 얼굴과 연관된 상기 사각블록(610)의 중심점이 맞도록 위치를 조정한다.

앞서 설명한 바와 같이, 이미지의 비율이 캔버스의 비율과 정확히 들어맞지 않는 경우, 스케일 업(scale-up) 또는 스케일 다운(scale-down)을 하더라도 캔버스에 이미지가 꼭 들어맞지 않을 수 있다. 이때, 이미지 중심 포인트를 고려하여 캔버스에 이미지를 삽입하고, 이미지가 커버하지 못하는 캔버스 내의 여백 부분의 면에 적절한 이미지를 삽입한다. 이때도 이미지의 감성을 이용하여 대응되는 색의 면을 여백부분에 적절히 삽입할 수 있다.

또한, 앞서 설명한 바와 같이, 도 6의 실시예에서는, 이미지의 중심을 얼굴로 기재하고 있으나, 반드시 얼굴이 이미지의 중심이 되어야만 하는 것은 아니고, 다른 객체(모델의 특정 부위(손, 발, 다리 등), 상품, 또는 특정 건물 등)도 이미지의 중심이 될 수 있음은 본 발명이 속하는 기술분야의 통상의 기술자에게는 자명할 것이다.

도 7a는 이미지 시각화 분석을 통해 이미지의 형상을 도출하여 시각화 패턴 그리드 유형과 매칭하는 방법을 설명하기 위한 개념도이다.

도 7a를 참조하면, 장치는, 캔버스 그리드에 이미지를 삽입한 후, 객체인식 알고리즘을 이용하여 이미지 내의 얼굴을 포함한 전체객체의 윤곽을 검출한다. 도 7a의 실시예와 같이, 장치는 객체를 모델의 전신으로 보고, 윤곽을 검출할 수 있다. 다른 실시예에서는, 전체 객체가 반드시 모델전신에 대응되는 것은 아니고, 모델의 반신, 다른 상품의 전체형상, 건물의 형상 등에 대응될 수도 있다.

장치는 객체의 윤곽선을 검출하고 나서, 객체를 둘러싸는 사각블록(710)을 생성하고, 해당 블록(710)과 객체의 윤곽선이 맞닿는 점을 생성한다. 도 7a의 실시예에서와 같이, 객체의 윤곽가 상기 객체를 둘러싸는 블록(710)의 접점을 A, B, C 및 D의 점으로 표시할 수 있다. A는 상단, B는 좌측, C는 하단, 그리고 D는 우측 부분에서 사각 블록(710)과 맞닿는 부분을 점으로 표시한 것이다. 그리고는, A, B, C 및 D를 선으로 연결하여 해당 이미지가 가지고 있는 형상을 도출한다. 도 7a의 도면에서 빗금친 형상이 이미지로부터 도출된 형상으로 정의될 수 있다. 이때, A-B, B-C, C-D 및 D-A 직선의 길이 관계를 고려하여 이미지 형상을 보다 세부적으로 결정할 수 있다.

이미지의 형상이 도출되면, 장치는 객체 시각화를 통해 이미지의 형상에 맞는 그리드를 호출한다. 즉, 장치는, 기저장된 시각화 패턴 그리드 유형과 상기 도출된 형상을 매칭한다. 기저장된 시각화 패턴 그리드 유형은 크게는 세가지로 구분될 수 있다. 크로스 형태, 다이아몬드 형태, 트라이앵글 형태로 구분될 수 있다. 크로스는 대각선 형태의 그리드로써, 평행사변형의 형상을 띄는 패턴 그리드이다. 다이아 몬드는 마름모 형태의 그리드이고, 트라이앵글은 삼각형 형태의 그리드이다.

위의 세 가지 형태는 1차 클래스로의 구분이고, 하위 클래스의 구분에서는, A-B 직선, B-C 직선, C-D 직선 및 D-A 직선의 길이를 기반으로 한 이미지 형상의 세부 내용에 맞춰 2차 클래스 유형을 선택한다. 패턴 그리드의 2차 클래스 유형에서는, 마름모 패턴 내에서도, 어느 부분이 긴 형태의 비대칭 마름모인지, 정형 마름모인지를 보다 정밀하게 구분한다. 또는, 트라이앵글도 정삼각형인지, 이등변삼각형인지, 역삼각형인지를 구분하여 매칭할 수 있다.

이러한 보다 세분화된 구분은 도 7a의 하단의 세로 방향의 이분할기준선을 기반으로 하는 대각선 및 사분할기준선(추가적으로 8분할기준선도 활용 가능)을 기반으로 하는 대각선들이 이루는 다양한 형태의 크로스, 마름모, 및/또는 트라이앵글 유형들을 고려하여 이루어질 수 있다.

도 7b는 도 7a의 방법에 의해 이미지의 형상과 매칭되는 시각화 패턴 그리드의 다양항 실시예를 나타낸 예시도이다.

도 7b를 참조하면, 장치는 1차 클래스의 유형 구분에서 같은 시각화 패턴 그리드 유형으로 분류되었더라도, 2차 클래스의 유형 구분에서 다양한 형태로 시각화 패턴 그리드의 유형을 분류할 수 있다. 즉, 도 7a의 A-B 직선, B-C 직선, C-D 직선 및 D-A 직선들 간의 길이 관계에 기초하여, 이미지의 형상을 도 7a 하단의 다수의 기준선에 대응하는 세부 패턴 그리드 유형에 매칭시킬 수 있다.

도 8은 여백 분석을 통해 컴포넌트의 위치를 결정하는 방법을 설명하기 위한 개념도이다.

도 8을 참조하면, 장치는 매칭된 패턴 그리드 유형을 기반으로 컴포넌트의 크기 및 배치를 결정한다. 이때, 객체 분석 기술을 활용하여 이미지의 객체 부분을 제외한 여백데이터를 측정한다. 여백 분석 부분에 있어서, 장치는 앞선 도 7a의 객체를 포함하는 사각블록(710)과 객체가 맞닿는 네 개의 점(A, B, C 및 D 점)을 기준으로 여백 분석의 영역을 선언한다.

그리고는, 장치는 상기 네 개의 점과 얼굴 영역을 포함하는 사각 블록(도 6의 610 참조)을 기준으로 복수 개의 여백 영역을 정의한다. 여백은 기본적으로 A, B, C 및 D 중 적어도 하나의 점이 포함되도록 하면서, 얼굴영역과 관련된 사각블록(610)의 범위를 빗겨가도록 설정된다. 특히, 사각블록(610)의 세로 및/또는 가로 부분으로 객체가 연결되어 있을 가능성이 높기 때문에, 세로 및/또는 가로로의 연장선 상에 있는 영역 부분도 여백 영역에서 제외한다. 이와 같은 여백 설정 룰(rule)을 기반으로 복수 개의 여백영역을 정의할 수 있다. 도 8의 실시예에서는, 여백영역 1, 여백영역 2, 여백영역 3, 및 여백영역 4의 네 개의 여백영역을 생성할 수 있다.

도 9는 결정된 컴포넌트의 위치를 캔버스 그리드와 매칭하여 컴포넌트의 배치를 결정하는 방법을 설명하기 위한 개념도이다.

도 9를 참조하면, 장치는, 여백영역을 기반으로 컴포넌트의 크기 및 배치를 결정한다. 이때, 캔버스 그리드의 마진(margin) 영역의 외곽 부분을 제외하고, 마진 영역 내에 컴포넌트를 선언한다. 그리고, 장치는 얼굴영역을 포함하는 사각블록(910) 내의 실제 얼굴이 존재하는 더 작은 크기의 사각블록(920)을 생성하고, 이를 기준으로 컴포넌트를 선언한다.

즉, 컴포넌트 1 및 컴포넌트 3은 얼굴 영역과 직접 맞닿는 부분이므로, 큰 크기의 얼굴영역 사각블록(910)과 여백영역 1 및 여백영역 3을 기준으로 컴포넌트를 정의할 수 있다. 그리고, 컴포넌트 2 및 컴포넌트 4는 얼굴영역과 직접 맞닿는 부분은 아니므로, 작은 크기의 사각블록(920)과 기정의된 여백영역 2 및 여백영역 4에 대응되도록 컴포넌트를 정의할 수 있다.

이와 같이 컴포넌트의 기본배치가 결정되고 나면, 컴포넌트의 크기 및/또는 복잡도를 분석하여 각 컴포넌트의 역할을 부여한다. 이는 다음의 도 10을 통해 보다 상세히 설명한다.

도 10은 각 컴포넌트의 복잡도를 분석하여 컴포넌트를 재배치하는 방법을 나타낸 흐름도이다.

도 10을 참조하면, 장치는 컴포넌트의 크기를 분석하여(S1010), 컴포넌트의 역할을 부여한다(S1012). 예컨대, 가장 큰 컴포넌트에 메인 텍스트, 즉, 헤드라인이 위치하도록 결정할 수 있다. 장치는 컴포넌트의 크기를 기반으로 텍스트 입력의 우선순위를 일괄적으로 배정한다. 예컨대, 제 1 크기의 컴포넌트가 텍스트 입력의 1순위가 되고, 제 2 크기의 컴포넌트가 2순위, 제 3 크기의 컴포넌트가 3순위가 되도록 상기 우선순위를 결정한다. 이때, 사이즈가 큰 것이 우선이 될 수도 있고, 사이즈가 작은 것이 우선이 될 수도 있다. 나아가, 장치는, 컴포넌트의 사이즈를 양적으로 분석하는 것뿐만 아니라, 컴포넌트의 가로 및 세로 길이를 기반으로 헤드라인의 위치를 결정할 수 있다. 컴포넌트의 가로 및 세로 비율이 가장 적절한 컴포넌트가 우선순위로 배정될 수 있다. 여기서 적절하다는 것은 1:1, 1:2, 1:3, 1:4 또는 4:1, 3:1, 2:1의 비율 또는 골든 비율에 가까운 것으로 정의할 수 있다. 1순위 컴포넌트에는 메인텍스트(헤드라인)이, 차순위 컴포넌트에는 서브텍스트가 입력될 수 있다.

다음으로, 장치는 이미지 분석 모듈을 통해, 컴포넌트 영역의 이미지의 복잡도를 분석한다(S1014). 이때, 인터랙션 포인트가 해당 영역의 복잡도 산출의 기준점이 될 수 있다. 장치는, 복잡도 분석 결과를 기반으로 텍스트의 입력 적합성을 판단한다. 이때, 헤드라인(메인텍스트)과 서브텍스트의 입력 적합성 판단을 위한 복잡도의 기준값은 다르게 설정될 수 있다. 복잡도가 높은 컴포넌트에는 메인 텍스트가 들어갈 수 없도록 할 수 있다. 예컨대, 메인텍스트는 50 이상의 복잡도를 갖는 컴포넌트에는 입력될 수 없도록 설정되는 반면, 서브텍스트는 100 이상의 복잡도를 갖는 컴포넌트에는 입력될 수 없도록 설정될 수 있다. 이 경우, 75의 복잡도의 컴포넌트는 메인텍스트의 입력은 불가하나, 서브텍스트의 입력은 가능할 수 있다. 150의 복잡도의 컴포넌트에는 텍스트 입력이 원천적으로 불가할 수 있다. 위와 같은 방식으로, 복잡도 분석 결과를 기반으로 장치는 헤드라인의 위치에 대한 재배치를 수행할 수 있다(S1024).

컴포넌트의 재배치는 컴포넌트와 입력 텍스트의 대응관계를 변경하는 것뿐만 아니라, 컴포넌트의 크기 및/또는 위치를 변경하는 것을 포함한다.

또한, 텍스트 입력 컴포넌트의 재배치에는 이미지 분석 결과만이 작용하는 것은 아니다.

본 발명의 일 실시예에 따르면, 장치는 텍스트 분석 모듈을 통해, 입력되는 텍스트를 형태소 단위로 분석한다(S1020). 즉, 사용자의 입력 데이터 중 형태소 데이터의 양에 따라 최적화된 디자인 유형을 도출하기 위해, 컴포넌트의 배치를 다르게 할 수 있다(S1024). 예컨대, 헤드라인의 형태소의 정보량을 기반으로 단일형태소(예컨대, "SALE"과 같은 단어형의 텍스트)는 분할된 컴포넌트의 영역을 일부 무시하고, 객체의 중심에 얼굴영역을 침범하지 않는 범위 내에서 삽입될 수 있도록 할 수 있다. 또는, 둘 이상의 컴포넌트 영역에 걸쳐서 텍스트가 삽입될 수 있도록 한다. 예컨대, 컴포넌트 1 및 컴포넌트 2의 영역에 걸쳐 컴포넌트 1에는 "SA"가 컴포넌트 2에는 "LE"가 삽입될 수 있도록 한다. 이와 같은 방식으로, 장치는 컴포넌트와 삽입되는 텍스트의 양적인 관계를 고려하여 컴포넌트를 재배치할 수 있다. 특히, 이러한 단어 텍스트는 표현하고자 하는 개념이 강조되어야 할 경우가 많으므로, 장치는, 위 과정을 통해 기정의된 컴포넌트의 배치관계를 무시할 수 있는 가능성을 높이 부여할 수 있다.

또한, 조합 형태소(조합된 단어 형태의 텍스트)의 경우, 조합된 텍스트의 양에 따라 이미지 분석을 통해 기정의된 컴포넌트의 배치를 다르게 할 수 있다. 나아가, 다중형태소(예컨대, 문장형의 텍스트)의 경우는, 형태소 별로 문장을 분할하여 적합한 컴포넌트에 분할배치하거나, 하나의 컴포넌트에 들어갈 수 있는 경우, 텍스트의 양과 컴포넌트의 크기 관계를 고려하여 적합한 컴포넌트에 입력될 수 있도록 컴포넌트를 재배치할 수 있다.

형태소의 양적인 분석 이외에, 텍스트의 의미 분석(S1022)을 통해 컴포넌트를 재배치할 수 있다(S1024). 즉, 메인텍스트와 서브텍스트가 합쳐서 유의미한 의미를 갖는 경우, 두 텍스트의 심미적인 부분, 상호 유기적인 관계를 고려하여 컴포넌트를 재배치한다. 이때, 컴포넌트의 유기적인 관계의 기준점도 인터랙션 포인트가 될 수 있다. "

" 형태로 캔버스 그리드 내에 인터랙션 포인트가 배치되어 있기 때문에, 인터랙션 포인트들은 대각방향의 포인트들 간, 가로방향 포인트들 간, 및 세로 방향 포인트들 간 중 적어도 하나 사이에서, 유기적인 관계를 갖는다. 따라서, 둘 이상의 컴포넌트에 텍스트를 분할 배치하는 경우, 인터랙션 포인트 간의 유기적인 관계를 고려하여 텍스트를 입력할 수 있다. 예컨대, "Winter Sale"과 "Discount 70%"라는 두 개의 텍스트(메인텍스트와 서브텍스트)가 컴포넌트에 배치될 때, 대각방향이 주는 심미성을 고려하여, 컴포넌트 1에 "Winter Sale"이 컴포넌트 4에 "Discount 70%"라는 텍스트가 각각 배치될 수 있도록 컴포넌트를 재배치할 수 있다.

본 발명의 다른 실시예에 따르면, 사용자가 입력한 텍스트의 변형을 컴포넌트에 삽입할 수 있다. 이때도 인터랙션 포인트가 이용된다. 예컨대, 사용자가 "50% SALE"을 입력텍스트로 요청한 경우, 장치는 "50% SALE"의 의미가 반값으로 상품을 판매한다는 것을 인지하여 그와 유사한 용어 또는 그와 연관된 용어를 직접 생성하여 임의의 컴포넌트에 배치할 수 있다. 예컨대 "반값 세일"이라는 "50% SALE"의 변형을 생성하여 "50% SALE"이 입력되는 컴포넌트 1의 대각 방향에 배치된 컴포넌트 4에 "반값 세일" 문구를 입력할 수 있다. 상기와 같은, 유사어 또는 강조어는 장치의 텍스트 분석 모듈이 생성할 수 있다.

도 11은 이미지와 텍스트가 캔버스 그리드 상에 삽입되어 데이터화된 최종 디자인을 나타낸 도면이다.

도 11을 참조하면, 장치는 컴포넌트 내에 메인 텍스트 및 서브 텍스트를 적절히 배치하여 최종 디자인을 형성한다. 특히, 장치는 텍스트의 의미 분석을 기반으로 기저장된 장식용 형상 중 적어도 하나를 컴포넌트들 중 하나에 배치할 수 있다. 장식용 형상은 반드시 컴포넌트에 꽉 차게 배치되어야 하는 것은 아니고, 골든비율을 유지하는 선에서 컴포넌트의 적어도 일부 영역에 적절히 배치될 수 있다.

도 11의 실시예에서, 장치는, 좌하단의 컴포넌트 2에, "NEW ARRIVALS"라는 원형의 형상(1100)을 장식으로 배치할 수 있다. 이때, 장치는, 컴포넌트 2가 가로방향으로 1:1.618의 골든비율을 유지할 수 있도록 장식형상(1100)의 크기를 변형하여 컴포넌트 내에 배치한다.

본 발명의 일 실시예에 따르면, 장식형태로 배치되는 형상은 원형, 직사각형, 정사각형, 삼각형, 다이아몬드형, 나뭇잎, 별표, 물음표, 느낌표, 기타 다각형 등 다양한 형상을 포함할 수 있다. 장치는 이미지 분석 결과, 입력되는 텍스트의 의미분석 결과, 프로모션의 목적과 관련된 데이터, 절기 데이터, 프로모션 혜택 데이터 및/또는 연중행사 데이터 등을 기반으로 그에 대응되는 장식형상을 선택함에 의해 이미지 내에 장식형상을 삽입할 수 있다. 예컨대, "크리스마스 세일"과 같은 경우, "크리스마스 트리" 장식형상이 디자인에 삽입될 수 있다.

선택된 장식형상은 컴포넌트 내에 심미감을 고려하여 기정의된 공간에 배치된다. 장식형상은 반드시 컴포넌트 내에만 배치되어야 하는 것은 아니고, 둘 이상의 컴포넌트에 걸쳐, 또는 이미지 전체 영역에 걸쳐 배치될 수도 있다. 예컨대, 이미지 분석 결과, 해당 이미지의 감성이 "따뜻함"으로 분석된 경우, 그에 대응되도록 장식형상을 "원형"으로 선택하여 원형으로 형성된 다수의 기저장된 장식 중 어느 하나가 적절히 이미지 내에 배치되도록 제어할 수 있다.

위에서 설명한 방식을 통해 이미지의 유효성을 검증하고, 이미지를 캔버스 그리드에 삽입하며, 삽입된 이미지의 객체를 분석하여 대응하는 형상을 도출하고, 도출된 형상 및 이미지 내의 여백분석을 통해 컴포넌트를 생성하고, 생성된 컴포넌트에 텍스트 및 장식을 삽입함에 의해 장치는 사용자가 입력된 텍스트 및 이미지에 대응하는 최선의 디자인을 창출한다.

이하, 컴포넌트에 텍스트를 삽입함에 있어, 텍스트와 관련된 속성값들을 정의하여야 하는데, 이와 관련된 부분을 상세히 설명한다. 즉, 이미지 분석 결과에 따라 텍스트의 속성값을 결정하여 컴포넌트에 삽입하는 방식을 상세히 설명한다.

이미지 분석에 따른 텍스트 삽입 방법

본 발명의 실시예에 따르면, 장치는 삽입되는 이미지에서 컬러분석을 통해 해당 이미지에 대응하는 감성을 도출할 수 있다. 이를 기반으로, 도출된 감성에 대응하는 텍스트의 스타일 및 글꼴을 결정할 수 있고, 도 11의 장식형상(도면부호 1100 참조) 및 부가물의 형태를 결정할 수 있다. 예컨대, "부드러움" 감성에는 원형과 연관된 텍스트 스타일 및 장식형상이 사용되도록 하고, "강렬함"에 해당하는 감성에는 직사각형과 연관된 텍스트 스타일 및 장식형상이 사용되도록 제어할 수 있다.

도 12는 이미지 분석을 통해 텍스트의 속성값을 결정하는 방법을 나타낸 흐름도이다.

도 12를 참조하면, 장치는 유효성 검증에서 유효하다고 인정된 이미지를 획득하여(S1210), 획득된 대상이미지를 분석한다. 이때, 대상이미지의 감정정보를 추출할 수 있다(S1220). 본 발명의 실시예에 따르면, 이미지로부터 획득가능한 감정정보는 모델의 표정, 행동, 및/또는 이미지 전체 또는 일부의 컬러로부터 획득될 수 있다.

기본적으로, 얼굴인식 데이터를 기준으로 감정을 추출할 수 있다. 이는, 크게, 분노(anger), 경멸(contempt), 혐오(disgust), 무서움(fear), 행복(happiness), 무표정(neutral), 슬픔(sadness), 놀람(surprise)의 감정팩터로 구분될 수 있다. 각 이미지는 이러한 8가지 감정팩터 중 적어도 일부에 대한 점수를 가질 수 있다. 점수는 0~1.0까지 주어질 수 있다. 이러한 감정팩터를 추출하는 감정정보 추출 알고리즘은 이미지 내의 객체 또는 컬러와 그에 따른 감정점수 값을 매칭하여 기계학습함으로써 진화될 수 있다. 예컨대, (객체 관련 정보, 각 감정팩터에 대한 감정점수)를 학습용 데이터로 생성하여 딥러닝 모델에 입력함으로써 학습될 수 있다. 장치는 이렇게 획득된 감정점수에 대응되는 텍스트 속성값을 미리 저장하고 있을 수 있다. 예컨대, 글꼴의 1차 분류와 감정데이터를 매칭할 수 있다. 이를 위해, 적어도 하나의 감정팩터가 상하좌우 중 한 방향에 배치되도록 하여 생성된, 정다각형 형태의 감정매트릭스가 이용될 수 있다.

본 발명의 실시예에 따르면, 상기 8가지 감정팩터 중 가장높게 드러난 감정팩터를 해당 이미지의 감정으로 정의하는 제 1 모드, 8가지 감정팩터를 조합하여 종합적으로 고려된 감정수치를 산출하는 제 2 모드가 사용될 수 있다. 감정수치 산출 결과, 감정수치가 0.5 이하의 경우는 감정을 포함하지 않는 것으로 간주할 수 있다. 여기서, 복수 개 감정팩터에 대한 감정수치가 동일할 경우, 스마일 수치(smile)로 감정을 구분할 수 있다.

그리고는, 추출된 감정정보를 이용하여 그에 대응하는 텍스트의 스타일(text style)을 결정한다(S1225). 스타일은 기본적으로 세리프(Serifs)와 산세리프(Sans Serif)의 스타일로 구분될 수 있다. 산세리프는 가로/세로의 획의 시작부터 끝까지 굵기가 변하지 않는 스타일이다. 세리프는 글자 획의 끝에 장식용 삐침(Serif)이 달려있는 스타일이다. 즉, 특정 감정팩터에 따른 감정수치와 텍스트의 스타일은 미리 매칭되어 있을 수 있다. 예컨대, 행복 및 놀라움의 감정팩터가 0.5 이상으로 해당 이미지의 감정으로 결정된 경우, "세리프"로, 슬픔 및 무표정이 우세한 경우, "산세리프"로 스타일을 결정할 수 있다.

추가적으로, 본 발명의 일 실시예에 있어서, 장치는 텍스트의 기본 스타일(세리프, 산세리프)와 감정 데이터(예컨대, 행복, 슬픔, 무표정, 놀라움 등)의 매칭결과에 형용사 이미지 스케일 데이터를 2차 매칭하여 이미지 모델의 감정과 색상에 반응하여 텍스트의 폰트가 적용되도록 매칭할 수 있다. 즉, 세리프 내에도 복수 개의 폰트가 존재할 수 있는데, 이때, 이미지 스케일의 형용사 그룹에 상기 복수 개의 폰트가 배정되어, 이미지에 대응되는 형용사(예컨대, 귀여운, 깔끔한, 세련된, ... 등)에 포함된 폰트들로 텍스트의 스타일 및 폰트를 결정할 수 있다.

다음으로, 텍스트 스타일이 결정되면, 이미지 또는 컴포넌트의 복잡도 정보를 추출하여(S1230), 이에 대응하는 텍스트의 굵기 속성값을 매칭한다(S1235). 이미지의 복잡도가 높을수록 가독성이 높은 텍스트가 사용되어야 하므로, 복잡도가 높은 경우, 굵은 글씨가 적용되도록 하고, 복잡도가 낮으면 얇은 글씨가 적용되도록 할 수 있다. 즉, 복잡도를 상/중/하로 나누어, "상"인 경우, "Bold체"로, "중"인 경우, "Regular 글씨체"로, "하"인 경우, "얇은 글씨체"가 적용되도록 매칭한다.

본 발명의 실시예에 따르면, 복잡도를 이용하여 텍스트의 폰트를 결정할 수 있다. 예컨대, 컴포넌트의 복잡도가 높으면 가독성이 높은 폰트를, 컴포넌트의 복잡도가 낮은 경우, 판독성이 높은 폰트를 사용하도록 제어할 수 있다. 가독성은 텍스트가 얼마나 쉽게 읽히는가의 정도를 나타내고, 판독성은 글꼴의 형태를 식별하고 인지하는 과정에서 얼마나 눈에 잘 띄는지의 정도를 나타낸다.

복잡도의 산출방법과 관련하여, 장치는 해당 이미지에 포함된 객체들과 연관된 태그(예컨대, 관련단어)를 추출하여, 추출된 태그의 개수를 기반으로 복잡도를 산출한다. 예컨대, 하나의 컴포넌트 내에, 비행기, 구름, 건물, 사람, 핸드폰, 머리, 목, 팔, 다리 등 많은 관련 객체와 관련된 태그(색상, 형용사도 포함 가능)가 존재하는 경우, 복잡도가 높아진다. 이는 복잡도 추출 알고리즘을 통해 이루어질 수 있다. 이외에도, 이미지에 포함된 텍스트 존재 여부 관련 값, 이미지에 포함된 객체들의 수 등도 복잡도 산출 팩터로써 고려될 수 있다.

복잡도가 26-30인 경우, "상"으로, 15-25는 "중"으로, 14 이하는 "하"로 구분할 수 있다. 점수 구분 기준은 사용자의 설정에 따라 달라질 수 있다. 그리고는, 앞서 결정된 텍스트 스타일에 포함되는 다수의 폰트 중, 각 구분된 복잡도에 대응되는 폰트를 해당 텍스트에 적용할 폰트로 결정할 수 있다.

앞서 설명한 바 있지만, 이와 같이 산출된 복잡도는 컴포넌트의 배치 및 컴포넌트 내로의 텍스트의 삽입 여부 결정에도 사용될 수 있다.

복잡도 산출 이후, 이미지 또는 컴포넌트의 주색상 정보를 추출하여(S1240), 그에 대응하는 텍스트 글꼴 속성값을 매칭한다(S1245). 장치는, 이미지 분석 모듈(미도시)의 컬러스펙트럼 데이터 추출 컬러 분포도에서 차지하는 컬러 비율 계산을 통해 이미지에 배치된 주색을 추출한다. 그리고는, 추출된 주색은 이미지 감성과 매칭하여 텍스트의 컬러와 타입을 결정하는데 활용될 수 있다. 이때, 이미지의 주색은 쇼핑몰 디자인의 메인색상으로 활용하는 것이 바람직할 수 있다. 즉, 컬러는 글꼴 속성값과 직접 매칭될 수도 있지만, 컬러이론을 바탕으로 한 이미지 감성을 추출하는데 사용되어, 감성과 태그복잡도에 녹아들어 간접적으로 글꼴을 선정하는데 사용될 수 있다.

다음으로, 장치는 이미지 또는 컴포넌트의 명도 정보를 추출하여(S1250), 텍스트의 색상 속성값과 매칭한다(S1255). 명도는 색의 밝고 어두운 정도를 나타낸다. 이러한 명도는 텍스트의 색상에 영향을 미칠 수 있다. 따라서, 장치는 기저장된 이미지 명도값에 대응되는 텍스트 색상 속성값 테이블을 기반으로 텍스트의 색상을 결정할 수 있다. 명도가 높으면 이미지가 밝은 상태인 것이므로, 텍스트의 색상은 그에 대응되는 어두운 계열의 색이 적합할 수 있다. 명도가 낮은 경우, 이미지가 어두운 것이므로, 텍스트는 눈에 띄는 색상(예컨대, 붉은 색)을 사용하는 것이 바람직하다.

그리고는, 장치는 이미지 또는 컴포넌트의 보색 정보를 추출하여(S1260), 텍스트 강조색 속성값에 매칭할 수 있다(S1265). 장치는 이미지 분석 모듈에서의 주색컬러 코드값(Hex 코드, RGB 수치 및 퍼센트를 포함하는 정보)의 데이터를 기반으로 보색 정보를 획득가능하며, 보색 정보를 이용하여, 쇼핑몰 디자인을 표시하는 화면에서 강조하고자 하는 요소나 이와 상호작용되는 요소에 활용될 수 있다. 보색은 주색데이터를 기준으로, │(주색의 H값 + 180°) - 360°│를 통해 산출된다. 이러한 보색정보를 이용하여 텍스트의 강조영역의 컬러를 결정할 수 있다. 특히, 해당이미지의 배경색상이 주색이라면, 텍스트의 강조 부분을 흰색이나 검정색으로 만들어 강조가 될 수 있도록 한다. 텍스트의 강조부분은 형태소 분석 및 의미분석을 통해 추출될 수 있다.

이외에, 컬러스펙트럼을 활용하는 방안에 있어서, 유사색을 이용하여 주색을 사용한 영역을 중심으로 연관된 내용이나 정보를 나타낼 수 있다. 예컨대, 최종디자인의 메인/서브컬러로 대비하여 사용할 수 있다. 또한, 보색근접색(split complementary color)을 이용하여 보색과의 조합이 되도록 할 수 있고, 보색이 활용되는 부분에 컬러매치가 되도록 할 수 있다. 음영색조와 관련하여, 배경과 텍스트 간의 가독성 확보를 위해, 컬러 간의 기준대비값을 중심으로 백그라운드와 텍스트의 음영 컬러를 결정할 수 있다. 음영색변형은 주색에서 흰색/검정/회색을 첨가해가는 컬러스펙트럼으로, 주색을 기준으로 색상을 변경하지 않고 다양한 수준의 밝기를 생성하는데 사용될 수 있다. 특히, 배경색상으로 활용시에 텍스트 컬러와의 색상대비를 높여야 할 경우, 설정된 값을 사용할 수 있다. 대체가능한 강조색은 어두운 음영과 밝은 색조의 조합을 고려할 수 있다.

음영색 그라데이션(gradient)은 이미지 위의 텍스트를 보호하기 위해 텍스트 영역에 그라디언트 효과를 주어 텍스트의 가독성을 확보하는데 사용된다. 예컨대, 음영색조의 기준값을 예시로, 배경과 텍스트 간의 대비값의 기준점을 정하여 텍스트 영역에 주색을 기준으로 그라디언트 효과를 주어 텍스트의 가독성을 확보할 수 있다. 이때, 그라디언트의 짙은 끝은 상황에 따른 불투명도 값이, 그라디언트의 중심점은 짙은 끝에 더 가까운 3/10 위치로 정의하고, 그라디언트의 끝은 불투명도 0이 배치되도록 정의할 수 있다.

도 13a 내지 도 13b는 삽입이미지로부터 획득된 정보와 텍스트의 속성값을 매칭하는 과정을 설명하기 위한 예시도이다.

도 13a를 참조하면, 장치는 이미지로부터 추출된 정보로부터 그에 대응되는 텍스트 스타일을 매칭할 수 있다. 추출된 정보에서는 무표정(neutral)이 0.619로 가장 높으면서, 0.5보다 높은 감정수치를 나타내고 있기에, 해당 이미지의 감정은 무표정으로 정의할 수 있고, 이 경우, 무표정에 대응되는 산세리프로 텍스트의 스타일을 정의할 수 있다.

도 13b를 참조하면, 장치는 이미지로부터 다양한 태그 정보를 추출할 수 있다. 도 13b의 실시예에 따르면, 장치는 "outdoor", "persoon", "wearing" 등 약 30개의 태그 정보를 추출할 수 있고, 이는 30개를 넘는 개수이므로, 복잡도가 "상"이라고 판단할 수 있다. 이 경우, 복잡도 "상"에 대응되는 Bold 체를 텍스트의 굵기 속성값으로 결정할 수 있다.

도 14는 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법에서 감성어휘와 이미지 색상을 매칭하기 위한 매칭도이다.

도 14를 참조하면, 앞서 설명한 바와 같이, 장치는 이미지의 감정정보에 따라, 1단계로 산세리프와 세리프의 두 가지 스타일에 대한 매칭을 수행하고, 2단계로 형용사적 이미지 스케일에 매칭을 수행할 수 있다. 이때, 2단계 감정정보에는 이미지의 컬러분포도가 활용될 수 있다.

2단계 형용사적 이미지 스케일에 대한 매칭에는 도 14의 컬러스펙트럼과 이미지 스케일의 매칭시스템이 활용될 수 있다. 이미지 스케일은 복수 개의 깊이로 형용사를 분류해 높고 있다. 1depth는 "부드러운", "정적인/차가운", "동적인/따뜻한", "딱딱한"으로 분류될 수 있고, 그 안에, 2depth로 "귀여운", "깔끔한", "안정된", "자연적인" 등이 분류될 수 있다. 1depth와 2depth는 서로 연관관계를 가지고 있다. 예컨대, "부드러운"의 1depth에는 "귀여운", "깔끔한", "자연적인"이 포함될 수 있고, "딱딱한"의 1depth에는 "무거운", "세련된", "고급스러운" 등이 포함될 수 있다. 이와 같이, 감성의 깊이관계에 따라 좋더 깊은 감정정보까지 추출하면, 장치는 해당 깊이의 감정정보에 대응되는 폰트들 중 하나로 텍스트의 폰트를 결정한다.

도 15는 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법에서 이미지로부터 추출된 감정정보와 복잡도 정보를 기반으로 텍스트의 속성값을 매칭한 결과를 예시적으로 나타낸 표이다.

도 15를 참조하면, 장치는 이미지 또는 컴포넌트에서, 얼굴인식 데이터 추출 알고리즘을 사용하여 감정데이터를 추출한다. 본 실시예에서는, "행복(happiness)"이 0.992로 가장 높기에, "행복"을 해당 이미지 또는 컴포넌트의 감정이라고 판단할 수 있다. 복잡도는 이미지 분석 태그 데이터 추출 알고리즘을 통해 추출하고, 여기서, 해당 이미지는 태그가 17개로 복잡도는 "중"으로 판단할 수 있다.

이에, 도 15의 실시예에서, 장치는 행복에 대응되는 세리프(Serif)를 텍스트의 스타일로 결정하고, 복잡도 "중"은 판독성이 높은 폰트에 대응되므로, 판독성이 높은 폰트를 텍스트의 폰트로 결정할 수 있다. 또한, 텍스트의 굵기는 복잡도 "중"에 대응될 수 있도록 "Regular"로 결정할 수 있다.

도 16은 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법을 통해 최초 입력이미지로부터 이미지/텍스트 병합 과정을 거쳐 최종결과물을 도출하는 과정을 개념적으로 정리한 개념도이다.

도 16을 참조하면, 쇼핑몰 디자인 자동생성장치는 작업을 위한 원본이미지(1610) 및 텍스트 정보를 수신할 수 있다.

그리고는, 해당 이미지의 모델과 관련된 정보를 기반으로 쇼핑몰 디자인으로 유효성을 판단하고, 유효하다고 판단되면, 이미지를 캔버스 그리드에 삽입하며, 삽입된 이미지의 객체를 분석하여 대응하는 형상을 도출하고, 도출된 형상 및 이미지 내의 여백분석을 통해 컴포넌트를 생성하여 생성된 컴포넌트에 텍스트 및 장식을 삽입한다.

이때, 이미지에서 풍기는 감정정보를 1차적으로 모델의 얼굴의 표정을 기반으로 추출할 수 있다. 그리고는, 해당 감정에 대응되는 텍스트 스타일 정보를 매칭하여 텍스트의 스타일을 결정한다(예컨대, 산세리프). 그리고는 이미지의 복잡도 정보를 추출하여, 그에 대응되는 텍스트 굵기값으로 텍스트의 굵기를 결정한다.

또한, 장치는 이미지의 컬러정보(예컨대, 주색상 정보)를 통해 2차적인 감정정보를 획득할 수 있다. 이때, 2차적인 감정정보(이는 형용사적 이미지 스케일을 활용하여 형용사적 감정정보에 대응)를 획득가능하고, 이를 복잡도 정보와 조합하여 텍스트의 글꼴을 결정할 수 있다. 추가적으로, 이미지의 명도정보를 기반으로 텍스트의 기본색상값을 결정할 수 있고, 이미지의 주색상에 대응하는 보색을 컬러스펙트럼에서 추출하여 텍스트의 강조색을 결정할 수 있다.

그리고는, 각각의 결정된 텍스트의 속성값을 기반으로 텍스트를 변환하고, 변환된 텍스트를 이미지(1610)에 삽입함으로써, 최종 디자인(1620)을 완성할 수 있다.

도 17은 복수 개의 최종디자인 후보를 예시적으로 나타낸 도면이다.

도 17을 참조하면, 장치는 복수 개의 최종디자인 후보를 생성하여 사용자 단말로 제공할 수 있다. 최종디자인 후보는, 서로 다른 컴포넌트의 배치 및 컴포넌트 내의 텍스트의 서로 다른 속성값으로 구현된 디자인들이다. 장치는 하나가 아닌 다수의 최종디자인 후보를 사용자 단말로 제공함으로써 사용자가 기호에 맞는 선택을 할 수 있도록 지원한다.

캔버스 그리드 시스템 응용

캔버스 그리드는 피보나치 수열 기반의 비율을 고려한 골든비율의 레이아웃으로 이루어진다. 본 발명의 골든비율은 반드시 1:1.618로 정확히 그 비율이 맞아야 하는 것은 아니고, 1:1.6 내지 1:1.7 정도로 비율을 맞추는 것도 그 취지를 지향한다는 점에서 바람직할 수있다. 그리고는, 결정된 레이아웃에 따라 이미지 및 텍스트를 삽입하여 배너디자인을 생성한다.

앞서 설명한 바와 같이, 본 발명의 일 실시예에 따르면, 장치에서 사용되는 격자시스템과 관련하여, 장치는 사용자 디바이스의 각기 다른 화면 사이즈에서 공간을 조정하는 중단점(breakpoint)과 기준선 그리드 기반의 제어 포인트(control point)를 기반으로 디자인을 생성한다. 이하의 캔버스 그리드 응용 부분의 설명에서 "제어포인트"는 광의의 제어포인트로써, 이는 격자 시스템을 제어하는 기준이 되는 포인트로, 이미지 중심 포인트, 인터랙션 포인트 및 협의의 제어포인트를 포함하는 개념으로 이해하는 것이 바람직하다. 특별한 설명이 없다면, 이하에서 나오는 제어포인트는, 도 4의 텍스트의 입력의 시작 및 종료를 제어하는, 협의의 제어포인트가 아닌, 광의의 제어포인트로 간주하는 것이 바람직하다. 이러한 광의의 제어포인트는, 서로 다른 모드의 격자시스템에서 동일한 수로 존재할 수 있다. 장치가 사용할 수 있는 웹 그리드는 디자인의 레이아웃 사이에 시각적 일관성을 만들 수 있고, 이때, 그리드의 수는 중단점 체계에 따라 달라질 수 있다.

도 18은 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법에서 사용되는 캔버스 그리드 시스템의 중단점(breakpoint)을 나타낸 도면이다.

도 18을 참조하면, 장치는 600px 이하의 디스플레이 화면(사용자 단말의 디스플레이 사이즈로써, 캔버스 그리드 시스템에 대응시켜야 하는 대상)에 대해서는, 6 그리드의 캔버스 그리드 시스템을 사용하고, 600px 이상의 디스플레이 화면에 대해서는, 12 그리드의 캔버스 그리드 시스템을 사용할 수 있다. 예컨대, 480px과 600px에 대해서는 6그리드 시스템이, 840px, 960px, 1280px, 1440px 및 1920px의 경우에는 12 그리드 시스템이 적용될 수 있다. 6 그리드 시스템은 해당 화면을 6개 열로 분할하여 격자를 형성하는 시스템을, 12 그리드 시스템은 12개 열로 분할하여 격자를 형성하는 시스템을 나타낸다.

또한, 본 발명의 일 실시예에 따르면, 모든 컴포넌트는 모바일, 태블릿, 그리고 데스크탑을 위해 사각형 기준선 그리드(Baseline Grid)에 맞춰 조정된다. 여기서, 기준선 그리드는 제작환경에 따라 변경될 수 있는 것으로, 1200px 제작환경의 경우, 1 그리드의 단위는 10px X 10px로 정의될 수 있다. 또한, 광의의 제어포인트는 기준선 그리드의 접점 부분에 생성될 수 있고, 이는 가로 5그리드 및 세로 3그리드의 영역으로 정의할 수 있다. 제어 포인트 간에는 2 그리드의 여백을 두는 것이 바람직하다.

도 19는 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법에서 사용되는 캔버스 그리드 시스템의 단일 격자, 단일 제어포인트(control point)를 설명하기 위한 개념도이다.

도 19를 참조하면, 모듈 그리드는 상기 웹 그리드의 하위개념으로, 1200px을 기준으로 하였을시 1G는 10px X 10px의 크기를 가질 수 있다. 이는 가로 및 세로 사이즈에 따라 가변적일 수 있다. 10 X 10도 가능하지만, 세로 사이즈가 큰 디바이스에서는, 8 X 12도 가능하다.

하나의 화면에서, 광의의 제어포인트의 갯수는 일정하게 규정될 수 있다. 하나의 제어포인트는 5G의 폭과 3G(여기서, G는 격자를 나타냄)의 높이를 가질 수 있다. 기본적으로 가변적인 크기를 가질 수 있는 격자 배열에 그 갯수가 고정된 형태의 제어 포인트를 올려놓으면, 기본적인 그리드 시스템이 생성된다.

본 발명의 일 실시예에 따르면, 가장 기본적인 캔버스 그리드 시스템으로, 전체 화면은 120G X 74G로 구성되고, 10px X 10px이 하나의 격자를 구성하는 시스템이 사용될 수 있다.

도 20은 1200 격자 모드에서, 캔버스 상의 제어포인트의 구성을 나타낸 도면이다.

도 20을 참조하면, 장치는 캔버스 상에 기설정된 개수의 광의의 제어 포인트가 존재하도록 격자시스템을 생성할 수 있다. 여기서, 캔버스는 224개의 제어 포인트가 존재하도록 제어 포인트를 배열할 수 있다. 하나의 제어 포인트는 5G X 3G이고, 각 제어 포인트 간에는 가로 및 세로방향으로 2G의 여백이 존재하도록 한다. 이러한 제어포인트의 포진 상에서, 앞서 도 4에서 설명한 바와 같이, 224개보다는 소수의 제어포인트들(예컨대, 3개의 이미지 중심 포인트, 7개의 인터랙션 포인트, 9개의 협의의 제어포인트)가 배치될 수 있다.

도 21은 120 x 74 격자 모드에서, 컨트롤 센터(중앙기준면)와 컴포넌트 영역을 나타낸 도면이다.

도 21을 참조하면, 컴포넌트 영역은 기본적으로 텍스트 및/또는 장식형상이 배치되는 영역을 의미할 수 있다. 본 발명의 실시예에 따르면, 1200px X 740px에 120G X 74G의 격자모드가 적용될 수 있고, 이때, 제어포인트는 앞서 설명한 바와 같이, 가로 16개, 세로 14개로 224개가 배치될 수 있다. 이때, 중앙기준면은 중앙의 4개 열의 제어 포인트가 존재하는 영역이 되고, 컴포넌트 영역은 최외곽의 마진을 배제하고, 중앙기준면을 제외한 영역이 되도록 설정하는 것이 바람직하다. 다만, 반드시 마진을 배제해야만 하는 것은 아니다.

이때, 컴포넌트 영역은 중앙면에 하나, 및 좌우측에 하나씩 두 개(총 3개)가 존재할 수 있고, 이때, 좌측 및/또는 우측 컴포넌트 영역은 최외곽 제어 포인트를 제외하고, 그 내부에 위치한 가로 5개 및 세로 12개의 제어 포인트가 정의하는 영역이 될 수 있다.

도 22a 내지 도 22c는 가로방향에서, 디바이스 중단점에 따라 서로 다른 격자 크기를 갖는 특징을 설명하기 위한 개념도이다.

도 22a를 참조하면, 본 발명의 일 실시예에 따른 캔버스 그리드시스템에서, 하나의 격자의 가로크기는 "컨트롤 중단점/120"의 크기를 가질 수 있다. 예컨대, 폭 1200px의 디바이스는 "1200/120=10px"의 가로방향 크기를 갖는 격자를 기본으로 하는 시스템이 바람직하다. 따라서, 1080px, 960px, 840px, ... 240px, 120px에서 가로 방향의 크기가 변하게 된다.

디바이스의 종단점은 제어 종단점과 약간의 차이를 가질 수 있다. 즉, 다바이스의 종단점은 디바이스의 디스플레이 화면의 크기와 연관된 값으로, 약 100 내지 110px의 단위로 구분되어, 1구간이 1200~1100px이고, 2구간은 1099px~990px의 범위를 가지며, 3구간은 989~880px의 값을 가질 수 있다.

이를 표로 정리하면 다음과 같다.

컨트롤 중단점	가로(1 GRID)	디바이스	컨트롤 중단점	가로(1 GRID)	디바이스
width 1200px	10px	~1100px	width 600px	5px	659px~550px
width 1080px	9px	1099px~990px	width 480px	4px	549px~440px
width 960px	8px	989px~880px	width 360px	3px	439px~330px
width 840px	7px	879px~770px	width 240px	2px	329px~220px
width 720px	6px	769px~660px	width 120px	1px	최소 단위

디바이스의 중단점에 따라 픽셀 사이즈가 변환될 수 있다. 도 22a의 실시예에 따르면, 1100을 기준으로 1100~1200px의 구간에서는 100px을 가변수치로 두고, 가로 10px의 격자를 기본으로 하는 격자시스템이 도입되는 것을 규정하고 있다(도 22b 참조). 다만, 1099px의 경우, 9px을 기본으로 하는 격자시스템이 도입되는 것이 바람직할 수 있다(도 22c 참조). 이와 같이, 컨트롤 중단점에 의해 기본적인 격자시스템이 정의되는 것과 더불어, 디바이스 중단점을 기반으로 적용되는 격자시스템이 달라질 수 있다.

이때, 가로 1200px 기준 120개의 격자가 존재하는 것을 기본으로 중단점 전후로 격자의 갯수는 가변가능하다. 다만, 이때에도, 앞서 설명한 바와 같이, 광의의 제어포인트의 갯수에는 변함이 없다. 즉, 제어포인트의 갯수는 고정, 격자의 갯수만 가변되도록 한다. 또한, 1201px 이상시에는 1200px의 그리드를 유지하고, 1200px 기반의 그리드에서 여백 영역을 확장하는 형태로 격자시스템이 운영될 수 있다.

더욱이, 해당 중단점에 소속된 후, 전체 제어포인트의 영역을 가운데 정렬하고, 홀수로 떨어질 경우, 나머지 픽셀값은 우측 여백으로 처리하는 것이 바람직하다.

도 23은 세로방향에서의 디바이스 중단점을 나타낸 도면이다.

세로방향에서의 격자 크기는, 도 22a 내지 도 22c의 가로방향에서의 격자크기 계산과 다르게, "1G= 컨트롤중단점/74"를 통해 산출된다. 컨트롤중단점은 1184px, 1110px, 1036px, 962px, 888px, ... 148px, 74px까지 대입가능하다. 컨트롤중단점 및 디바이스 별 1 그리드 픽셀값은 다음의 표와 같다.

컨트롤 중단점	세로 (1 GRID)	디바이스	컨트롤 중단점	세로 (1 GRID)	디바이스
height 1184px	16px	~1088px	height 592px	8px	611px~544px
height 1100px	15px	1087px~1020px	height 518px	7px	543px~476px
height 1036px	14px	1087px~952px	height 444px	6px	475px~408px
height 962px	13px	951px~884px	height 370x	5px	407px~340px
height 888px	12px	951px~816px	height 296px	4px	339px~272px
height 814px	11px	815px~748px	height 222px	3px	271px~204px
height 740px	10px	747px~680px	height 148px	2px	203px~136px
height 666px	9px	679px~612px	height 74px	1px	최소단위

도 23을 참조하면, 680px이 디바이스 중단점이 되므로, 680~740px의 높이를 갖는 디바이스는 74G 모드에서 하나의 격자의 높이가 10px이 된다. 하지만, 679px의 높이를 갖는 디바이스에서는, 74G 모드에서 하나의 격자의 높이가 9px인 형태로 격자 크기가 더 작아진 격자시스템을 적용하는 것이 바람직하다. 다시 말해, 광의의 제어포인트의 가변높이값에 따라, 장치는 중단점 전후로 그리드 갯수가 가변된다. 또한, 가변된 격자의 크기에 따라 제어포인트의 높이 역시 가변될 수 있다. 또한, 해당중단점에 소속된 후, 전체 제어포인트 영역을 중앙 정렬하고, 홀수로 떨어질 경우, 나머지 픽셀값은 하부(bottom) 여백으로 처리하여 이미지는 영향을 받지 않도록 하는 것이 바람직하다.

복수 이미지 삽입을 위한 다중 분할 레이아웃

도 24는 격자시스템에 피보나치 수열 기반의 비율이 결합된 형태의 레이아웃 구성을 나타낸 도면이다.

도 24를 참조하면, 장치는 기본 캔버스 그리드 시스템으로 정의된 120G x 74G 시스템과 피보나치 수열의 개념이 결합된 형태의 골든비율 레이아웃을 활용한다. 즉, 레이아웃에 있어서, 균형의 원리와 비율의 원리가 적용된 형태이다.

장치는, 캔버스를 구성한 후, 캔버스 내에 그리드 시스템을 적용한다. 이때, 디바이스 종단점을 고려하여 디바이스의 화면 사이즈에 대응하는 격자시스템 및 격자의 크기를 결정하는 것이 바람직하다.

그리고는, 적용된 격자시스템에 피보나치 수열 기반의 황금비율을 고려하여 각 섹션을 분할한다. 이때, 섹션의 분할 및 분할형태는 입력된 이미지의 수를 고려하여 결정될 수 있다. 예컨대, 입력된 이미지가 2개인 경우, 2분할 레이아웃이, 3개인 경우, 3분할 레이아웃이 사용될 수 있다. 레이아웃은 개별 이미지가 적용되는 섹션들의 배열을 정의하고 있고, 정의된 섹션들은 가로방향 및 세로방향 중 적어도 한 방향에 대해 피보나치 수열 기반의 골든비율이 적용될 수 있다. 하나의 섹션 내에서의 컴포넌트의 생성 및 텍스트의 삽입은 앞서 설명한 과정과 유사하다.

또한, 섹션이 분할되고 난 후, 하나의 섹션은 복수 개의 서브섹션으로 분할될 수 있고, 분할된 서브섹션에 개별이미지가 독립적으로 삽입될 수 있는데, 서브섹션의 분할에도 가로 및/또는 세로 방향에 대해 피보나치 수열 기반의 비율, 즉, 1:1.618이 적용될 수 있다. 경우에 따라서는, 1:1의 비율도 적용될 수 있다.

도 25는 가로 방향의 2분할 레이아웃과 가로방향의 3분할 레이아웃을 나타낸 예시도이다.

도 25를 참조하면, 장치는 피보나치 수열 기반의 골든비율에 따라 2분할 레이아웃과 3분할 레이아웃을 결정한다. 2분할 레이아웃은 가로방향으로 1:1.618의 비율로 A 섹션과 B 섹션을 분할하는 형태를 고려할 수 있다. 또한, 세로방향으로 1:1.618의 비율로 A 섹션과 B 섹션을 분할하는 형태를 고려될 수 있으나, 보통의 경우, 디바이스가 가로방향으로 긴 직사각형 형태이므로, 세로방향으로의 분할은 고려횟수가 적을 수 있다. 이는 디바이스의 환경에 따라 적응적으로 결정된다.

3분할 레이아웃의 경우, 면적이 가장 큰 A 섹션은 가로방향에서 1:1.618에서, 1.618에 해당하는 비율의 가로크기를 갖되, 가로와 세로 길이가 갖은 정방형 형태를 갖도록 할 수 있다. 그리고는, 나머지 1에 해당하는 영역을 두개의 섹션(그중 면적이 큰 섹션은 C 섹션, 면적이 작은 섹션은 D 섹션이 된다)으로 세로방향으로 1:1.618 비율을 고려하여 나누는 것이 바람직하다.

본 발명의 실시예에 따르면, 정방형의 A 섹션을 가로방향으로 1:1로 나누어 E 섹션을 생성하여 B 섹션과 나란히 배치할 수 있다. 이때, B 섹션의 좌측에 두 개의 E 섹션을 함께 배치하는 것을 고려할 수 있고, B 섹션의 우측에 두 개의 E 섹션을 함께 배치하는 것을 고려할 수 있으며, B 섹션을 가운데 두고, 양 옆에 두 개의 E 섹션을 배치하는 것도 고려할 수 있다.

장치는 위와 같은 2분할 레이아웃과 3분할 레이아웃에 황금비율을 추가적용하여 4분할 내지 그보다 더 심한 다분할 레이아웃을 생성할 수 있다. 분할 레이아웃의 결정은 사용자가 몇 분할 레이아웃을 사용할지 설정해 놓을 수 있고, 또는, 선별되는 입력이미지의 수에 따라 자동으로 분할 섹션의 수를 고려하여 선택될 수도 있다. 또는, 입력이미지와 그 결과로 나오는 최종 쇼핑몰 디자인의 레이아웃에 대한 데이터를 수집하여 딥러닝 모델에 입력 및 학습시킴으로써 보다 진화된 성능의 레이아웃이 도출되도록 할 수 있다.

상기 분할 레이아웃의 영역과 관련하여, 장치는 넓이(가로X세로)가 가장 큰 영역부터 알파벳 순으로 정렬할 수 있다(A 섹션, B 섹션, ..., Z 섹션). 각 섹션의 가로 및 세로 방향에서의 그리드 수의 비율은 황금비율을 나타낼 수 있다. 예컨대, 도 25의 상단 좌측의 2분할 레이아웃의 A 섹션과 B 섹션의 경우, A 섹션의 가로크기는 74G를 나타내고, B 섹션의 가로비율은 46G를 나타낸다. 이는 1.618:1의 비율을 나타낸다. 또한, 3분할 레이아웃의 좌측 상단의 A, C, 및 D 섹션으로 이루어진 레이아웃에서, A와 C 또는 A와 D 섹션의 가로크기의 비율은 역시, 74G 대 46G로 황금비율을 나타내며, C 섹션와 D 섹션의 세로크기의 비율역시, C 섹션은 46G, D 섹션은 28G로 1.618:1의 비율을 유지한다.

도 26은 도 25의 2분할 레이아웃과 3분할 레이아웃에 이미지 및 텍스트를 삽입하여 완성한 쇼핑몰 디자인의 예시적인 모습을 나타낸 예시도이다.

도 26과 같이, 장치는, 결정된 분할 레이아웃에 각 섹션 또는 서브섹션에 개별이미지를 삽입하고, 텍스트도 삽입할 수 있다.

이때, 텍스트의 삽입은 개별이미지 상에 삽입된 후에 이미지와 함께 삽입되는 방식과 섹션 내에 개별이미지의 삽입이 완료된 후, 독립적으로 텍스트가 삽입되어, 복수 개의 이미지 상에 걸쳐 있는 형태로 텍스트가 삽입되는 방식 중 하나에 의해 수행될 수 있다. 이는, 사용자 설정에 따라 다양한 방식으로 고려될 수 있다. 이 경우, 캔버스 그리드 시스템의 중앙기준면과 복수의 이미지 내의 복수의 모델의 눈 위치 정보 등을 고려하여 텍스트가 이미지를 초월하여 삽입될 수 있도록 제어할 수 있다.

도 27은 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 방법의 분할 레이아웃 섹션 사이즈 결정에 따른 디자인 삽입과정을 구체적으로 나타낸 상세흐름도이다.

도 27을 참조하면, 장치는 캔버스를 생성한다(S2710). 그리고는, 캔버스(디바이스의 화면크기에 비례)의 크기 정보를 추출한다. 그리고는, 장치는 분할 수와 형태에 맞는 섹션을 결정하여 분할 레이아웃을 결정한다(S2720). 이는, 기설정된 레이아웃이 존재할 수도 있고, 그렇지 않은 경우, 선별된 이미지의 수에 따라 적응적으로 분할레이아웃에 포함된 섹션 수 및 섹션의 배열이 결정될 수 있다.

본 발명의 다른 실시예에 따르면, 다수의 결과물이 나열되는 경우, 프로모션의 주제에 따라 기설정된 비율로 대응되는 분할 레이아웃의 적용될 수 있다. 예컨대, 할인/세일과 관련된 홍보 주제에 대해 2분할 레이아웃이 적용될 확률은 30%로 설정되어 있을 수 있다. 신상품/시즌과 관련된 홍보주제에 대해서는 2분할 레이아웃의 적용가능성은 60%로 고려되고, 브랜드/카테고리에 대해서는 70%, 사은품/포인트에 대해서는 5%, SNS/회원과 관련하여서는 5%, 기념일/공식행사와 관련하여서는, 20%, 무료배송의 경우는 5%가 적용되도록 설정되어 있을 수 있다. 또한, 3분할 레이아웃의 제 1 형태(A+C+D)에 대해, 할인/세일의 경우, 50%, 신상품/시즌의 경우, 25%, 브랜드/카테고리 관련 홍보의 경우, 13% 등 각 레이아웃과 홍보주제는 연관성을 가지고, 대응되는 적용가능성이 기설정되어 있을 수 있다. 다른 제 2 형태(B+E+E)는 또 다른 적용가능성이 고려될 수 있다. 이는 도 2의 사용자 인터페이스를 통해 입력되는 프로모션 주제별 분할레이아웃의 적용가능성의 정도는 사용자 설정을 통해 임의로 변경할 수 있다. 이와같은 방식으로 결정된 분할레이아웃에 속한 섹션들의 배열에는 피보나치 수열 기반의 비율이 고려되어 있을 수 있다.

장치는, 분할레이아웃을 결정하고 나서, 디바이스 중단점에 의한 캔버스 그리드 시스템을 호출한다.

그리고는, 앞선 과정에서 추출된 캔버스의 크기정보(가로 및 세로 사이즈)와, 상기 호출된 캔버스 그리드 시스템 그리드의 크기정보를 비교한다(S2730). 격자시스템의 가로 사이즈와 디바이스 화면의 가로사이즈의 차이를 해당 섹션 가로 기준의 분할수로 나누면 가로 확대/축소와 관련된 수치가 나온다. 나머지 값이 생길 경우, 몫값을 분할된 영역만큼 확대/축소 진행 후, 나머지 값에서 1px씩 가로기준으로 우측에서 좌측으로 확대 또는 축소하는 것이 바람직하다. 예컨대, A 섹션에 대한 사이즈 비교의 경우, 격자시스템의 가로사이즈(SGw)가 960이고, 캔버스의 가로사이즈(Cw)가 968이며, 분할 수가 2인 경우, (SGw-Cw)/분할수 = (960-968)/2를 통해 "-4"라는 결과값이 나온다. 이때, 음수는 확대를 의미하므로, 4의 픽셀만큼 A섹션의 가로방향에 대해 확대하는 것이 바람직하다.

위와 같은 과정을 거쳐, 격자시스템과 디바이스 화면 사이즈에 대한 가로 및 세로방향에 대한 사이즈 비교가 완료되면, 장치는 디바이스 화면 사이즈에 적용할 격자시스템을 기반으로 각 섹션 사이즈 정보를 산출한다. 예컨대, 격자의 크기가 가로 및 세로방향으로 8px인 경우, A 섹션은 (Gw*74)(Gh*74)=592px*592px이라는 결과가 나온다. 그리고는, 앞선 비교결과를 기반으로 섹션별 확대/축소 값을 대입하면, A 섹션의 경우, 592px + 4px로 596px 의 가로 크기가 나온다. 이와 동일한 방식으로 세로크기를 구하면 600px이 나올 수 있다. 각 섹션의 사이즈가 결정되면, 각 섹션별로 대응되는 개별이미지를 삽입한다(S2750).

섹션별 이미지의 삽입과 관련하여, 장치는 넓은 면적의 섹션에 보다 중요한 이미지를 넣도록 이미지 삽입 순서에 우선순위를 고려한다. 앞선, 입력 이미지의 선별시의 각 선별팩터별 상대적인 점수를 종합적으로 고려할 수 있고, 또는, 특정 홍보주제 및/또는 목적에 부합하는 이미지가 우선적으로 선택되도록 할 수도 있다. 예컨대, 신상품/시즌 관련하여서는, 해당 상품이 포함된 이미지가 우선적으로 선택되어 A 섹션에 삽입되도록 할 수 있다. 그리고, 장치는 객체인식 알고리즘을 통해 이미지 내의 객체들을 추출 및 인식하고, 인식된 객체 중 홍보와 연관된 상품이 이미지에 포함된 경우, 해당 이미지를 우선순위에 놓을 수 있다. 이때, 홍보 관련 상품이 포함된 이미지가 복수 개인 경우, 보다 선명하게, 보다 크게 해당 상품을 개시하고 있는 이미지가 상대적으로 우선권을 가질 수 있다. 상품이 포함되어 있지 않다면, 입력 이미지 선별과 관련된 팩터에 따른 종합점수가 2차적으로 고려될 수 있다.

텍스트의 삽입과 관련하여, 텍스트는 특정 이미지에 먼저 삽입된 형태(즉, 이미지와 텍스트가 미리 병합된 형태)로 레이아웃에서 구현될 수도 있고, 삽입이미지와 별개로 레이아웃에서 독립적으로 구현될 수도 있다. 이때, 입력텍스트의 핵심어와 특정 이미지에서의 객체인식의 결과가 일치할 경우, 일치된 이미지 상에 해당 텍스트를 배열할 수 있다. 이때, 복수 개의 이미지와 입력텍스트의 핵심어의 의미분석 결과가 동일하면, 복수 개 이미지 상에 걸쳐서 텍스트를 표시하도록 할 수 있고, 우선순위가 앞서는 이미지에서만 텍스트가 표시되도록 제어할 수도 있다.

이미지의 삽입 이전에, 이미지와 캔버스의 관계에서, 이미지 사이즈가 캔버스보다 작으면 확대(zoom in)을 하고, 반대로 이미지 사이즈가 캔버스보다 크면 축소(zoom out)를 수행한다. 이때, 이미지 확대에 따른 품질 저해를 방지하기 위해, 이미지 샤프닝 효과를 적용한다. 또한, 좌우 반전을 통해 여백을 해결할 수 있도록 제어할 수 있다. 또한, 이미지의 단면 컬러를 추출하는 것도 고려될 수 있다. 또한, 이미지 분석데이터 중 주색을 활용하여 전체 캔버스의 배경색으로 지정되도록 할 수도 있다.

다양한 웹 페이지에 대한 최적 사이즈를 고려한 디자인 생성

도 28은 쇼핑몰 디자인 자동생성 방법의 시각요소에 있어서, 광고/SNS와 같은 특정 채널에서 쇼핑몰 디자인이 활용되는 경우, 지정된 사이즈의 디자인 형태로 규격화되어 디자인을 생성할 때 참고하는 제작사이즈 테이블이다.

도 28을 참조하면, 장치는 제작사이즈에 적합한 그리드 시스템을 적용한다. 즉, 적합한 그리드 시스템을 적용하기 위해서는 규격화된 제작 사이즈가 요구될 수 있다. 특정 쇼핑몰에 일반적으로 업로드하기 위한 디자인을 생성하고자 하는 경우, 해당 브랜드 사이트의 목적에 맞게 사용자가 입력한 데이터를 기반으로 디자인을 생성하는 것이 바람직하다. 즉, 해당 디자인의 활용처가 기획전인지, 배너인지, 팝업 화면인지, 상세페이지인지, 대표이미지인지 여부에 따라 사용자가 그에 맞는 사이즈를 입력하여 디자인을 생성할 수 있다.

그 밖의 광고를 목적으로 하는 경우, 예시적으로 구글 DA(Google Display Network Advertisement)를 고려할 수 있다. 장치는 구글 DA의 업로드 용도로 디자인을 생성함에 있어, 기 저장된 120*600, 160*600, 200*200, 240*400, 250*250, 300*50, 300*250, 300*600, 320*50, 320*100, 336*280, 468*60, 728*90, 970*250, 및 970*90까지 선택가능한 사이즈의 항목을 정의하고, 정의된 사이즈 항목 중 사용자의 선택에 응답하여 적절하게 디자인을 생성할 수 있다.

다이렉트 메일(DM: Direct Mail)의 경우, "640*free"의 사이즈로 규정하고 디자인을 생성할 수 있다.

SNS에 업로드하기 위한 쇼핑몰 디자인을 생성하고자 하는 경우, 페이스북과 인스타그램 및 라인 등에 업로드할 수 있고, 각각의 SNS 플랫폼마다 서로 다른 크기의 디자인을 업로드할 수 있다. 특히, 페이스북과 인스타그램은 600*600, 1080*1080, 1200*444, 1200*628, 1200*900, 1920*1080의 크기 중 하나로 규정될 수 있다. 라인의 경우, 1040*1040 또는 1200*628의 크기로 규정될 수 있다.

위와 같이, 특정 채널에서 활용되는 디자인의 경우, 지정된 사이즈와 디자인 형태가 규격화되어 있을 수 있고, 사용자가 지정한 제작목적만으로 기저장된 사이즈 규격과 대응시켜, 최적의 쇼핑몰 디자인의 크기가 결정될 수 있다. 그리고는, 장치는, 사이즈 정보를 통해 플랫폼 단위의 결과물을 미리 예상하고, 그에 적합한 그리드와 디자인의 레이아웃 유형 등을 선별하여 디자인 생성작업을 진행할 수 있다.

쇼핑몰 디자인 자동생성 장치

도 29는 본 발명의 일 실시예에 따른 쇼핑몰 디자인 자동생성 장치를 나타낸 블록도이다. 도 29에 도시된 바와 같이, 장치는, 통신부(2910), 프로세서(2920), 메모리(2930) 및 입출력 모듈(2940)을 포함할 수 있다.

도 29를 참조하면, 통신부(2910)는 도 1의 네트워크(120)를 통해 사용자 단말과 정보를 주고받기 위한 구성요소이다. 통신부(2910)는 유선 또는 무선 네트워크와 연관된 통신 장치를 포함한다. 통신부(2910)는 안테나를 포함할 수 있다.

프로세서(2920)는 통신부(2910)를 통해 사용자 단말로부터 수신되는 디자인 생성요청, 및 그 외에 디자인 생성과 관련된 정보를 획득하고, 프로그래밍된 바에 따라 디자인을 생성하는 구성요소이다. 프로세서(2920)는 메모리(2930)에 저장된 프로그램을 실행한다. 프로세서(2920)는 이미지 내의 객체 분석, 여백 분석, 페이스 트랙킹 등의 이미지 관련 처리를 수행하는 이미지 분석 모듈(미도시) 및 텍스트의 형태소 분석 및 의미분석을 위한 모듈(미도시)을 포함한다. 프로세서(2920)는, 앞서 설명한 바와 같이, 사용자 단말로부터 획득되는 삽입대상 이미지의 유효성을 검증하고, 이미지를 캔버스 그리드에 삽입한다. 그리고, 프로세서(2920)는 삽입된 이미지의 객체를 분석하여 대응하는 형상을 도출하고, 도출된 형상 및 이미지 내의 여백분석을 통해 캔버스 내에 컴포넌트를 생성한다. 프로세서(2920)는 생성된 컴포넌트에 텍스트 및 장식을 삽입함으로써, 최선의 디자인을 창출한다.

메모리(2930)는 프로세서(2920)에서 수행해야 할 프로그램들과 연관된 명령어들을 저장하고 있으며, 프로세서(2920)에서 요구하는 각종 데이터를 저장하고 있는 저장장치이다. 메모리(2930)는 장치 내부의 로컬 메모리 또는 외부의 대용량 데이터베이스로써 구현될 수 있다.

입출력 모듈(2940)은 키보드, 마우스와 같은 정보 입력 수단 및 모니터, TV, 터치스크린과 같은 정보 출력 수단을 포함한다. 입출력 모듈(2940)은 디자인 생성과 관련된 각종 설정값들을 변경하고 관련된 내용을 표시하는데 사용된다.

이상에서 설명된 시스템 또는 장치는 하드웨어 구성요소, 소프트웨어 구성요소, 및/또는 하드웨어 구성요소 및 소프트웨어 구성요소의 조합으로 구현될 수 있다. 예를 들어, 실시예들에서 설명된 시스템, 장치 및 구성요소는, 예를 들어, 프로세서, 콘트롤러, ALU(arithmetic logic unit), 디지털 신호 프로세서(digital signal processor), 마이크로컴퓨터, FPA(field programmable array), PLU(programmable logic unit), 마이크로프로세서, 또는 명령(instruction)을 실행하고 응답할 수 있는 다른 어떠한 장치와 같이, 하나 이상의 범용 컴퓨터 또는 특수 목적 컴퓨터를 이용하여 구현될 수 있다. 처리 장치는 운영 체제(OS) 및 상기 운영 체제 상에서 수행되는 하나 이상의 소프트웨어 애플리케이션을 수행할 수 있다. 또한, 처리 장치는 소프트웨어의 실행에 응답하여, 데이터를 접근, 저장, 조작, 처리 및 생성할 수도 있다. 이해의 편의를 위하여, 처리 장치는 하나가 사용되는 것으로 설명된 경우도 있지만, 해당 기술분야에서 통상의 지식을 가진 자는, 처리 장치가 복수 개의 처리요소(processing element) 및/또는 복수 유형의 처리 요소를 포함할 수 있음을 알 수 있다. 예를 들어, 처리 장치는 복수 개의 프로세서 또는 하나의 프로세서 및 하나의 콘트롤러를 포함할 수 있다. 또한, 병렬 프로세서(parallel processor)와 같은, 다른 처리 구성(processing configuration)도 가능하다.

소프트웨어는 컴퓨터 프로그램(computer program), 코드(code), 명령(instruction), 또는 이들 중 하나 이상의 조합을 포함할 수 있으며, 원하는 대로 동작하도록 처리 장치를 구성하거나 독립적으로 또는 결합적으로(collectively) 처리 장치를 명령할 수 있다. 소프트웨어 및/또는 데이터는, 처리 장치에 의하여 해석되거나 처리 장치에 명령 또는 데이터를 제공하기 위하여, 어떤 유형의 기계, 구성요소(component), 물리적 장치, 가상 장치(virtual equipment), 컴퓨터 저장 매체 또는 장치, 또는 전송되는 신호 파(signal wave)에 영구적으로, 또는 일시적으로 구체화(embody)될 수 있다. 소프트웨어는 네트워크로 연결된 컴퓨터 시스템 상에 분산되어서, 분산된 방법으로 저장되거나 실행될 수도 있다. 소프트웨어 및 데이터는 하나 이상의 컴퓨터 판독 가능 기록 매체에 저장될 수 있다.

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

이상과 같이 실시예들이 비록 한정된 실시예와 도면에 의해 설명되었으나, 해당 기술분야에서 통상의 지식을 가진 자라면 상기의 기재로부터 다양한 수정 및 변형이 가능하다. 예를 들어, 설명된 기술들이 설명된 방법과 다른 순서로 수행되거나, 및/또는 설명된 시스템, 구조, 장치, 회로 등의 구성요소들이 설명된 방법과 다른 형태로 결합 또는 조합되거나, 다른 구성요소 또는 균등물에 의하여 대치되거나 치환되더라도 적절한 결과가 달성될 수 있다.

그러므로, 다른 구현들, 다른 실시예들 및 특허청구범위와 균등한 것들도 후술하는 특허청구범위의 범위에 속한다.

Claims

쇼핑몰 디자인 자동 생성 장치에서의, 온라인 쇼핑몰과 연관된 디자인(design) 자동 생성 방법에 있어서,
온라인 쇼핑몰과 연관된 이미지 내의 객체를 분석하여 상기 이미지와 연관된 형상을 도출하는 단계;
상기 도출된 형상을 기설정된 패턴 그리드 유형과 매칭하는 단계;
상기 매칭된 패턴 그리드 유형을 기반으로, 상기 이미지의 여백을 분석하여 캔버스(canvas) 내의 복수 개의 컴포넌트(component)들을 정의하는 단계, 캔버스는 상기 이미지가 삽입되는 공간을 나타내며, 컴포넌트는 상기 이미지와 함께 디자인을 구성하는 텍스트가 입력되는 영역을 나타냄; 및
상기 정의된 복수 개의 컴포넌트들 중 적어도 하나에 텍스트를 입력하여 최종 디자인을 생성하는 단계를 포함하되,
상기 이미지와 연관된 형상을 도출하는 단계는,
상기 객체의 전체 형상을 둘러싸는 제 1 사각블록과 상기 객체가 만나는 4개의 포인트들을 이어서 생성되는 4개의 직선이 이루는 형상을 상기 이미지와 연관된 형상으로 도출하는 단계를 포함하고,
상기 복수 개의 컴포넌트들을 정의하는 단계는,
컴포넌트 각각이, (i) 상기 4개의 포인트들 중 적어도 하나를 포함하면서, (ii) 상기 객체의 중심이 되는 중심객체와 연관된 제 2 사각블록으로부터의 연장선 상에 있는 영역을 제외함에 의해, 상기 복수 개의 컴포넌트들을 정의하는 단계를 포함하는 온라인 쇼핑몰과 연관된 디자인 자동 생성 방법.
삭제
제 1 항에 있어서,
상기 4개의 직선에 포함되는 제 1 직선, 제 2 직선, 제 3 직선 및 제 4 직선의 길이 관계를 기반으로 상기 이미지와 연관된 형상의 세부(detail)를 결정하는 온라인 쇼핑몰과 연관된 디자인 자동 생성 방법.
제 1 항에 있어서,
상기 도출된 형상을 기설정된 패턴 그리드 유형과 매칭하는 단계는,
상기 도출된 형상을 제 1 클래스 유형 중 하나에 매칭하는 단계를 포함하되,
상기 제 1 클래스 유형은 평행사변형 형태의 크로스(cross) 유형, 마름모 형태의 다이아몬드(diamond) 유형 및 삼각형 형태의 트라이앵글(triangle) 유형을 포함하는 온라인 쇼핑몰과 연관된 디자인 자동 생성 방법.
제 4 항에 있어서,
상기 제 1 사각블록과 상기 객체가 만나는 4개의 포인트들을 이어서 생성되는 4개의 직선간의 길이 관계를 기반으로 상기 제 1 클래스를 더 세분화한 제 2 클래스 유형 중 하나에 매칭하는 온라인 쇼핑몰과 연관된 디자인 자동 생성 방법.
삭제
삭제
제 1 항에 있어서, 상기 복수 개의 컴포넌트 중 적어도 하나에 텍스트를 입력하여 최종 디자인을 생성하는 단계는,
상기 복수 개의 컴포넌트 각각의 복잡도를 계산하는 단계; 및
상기 복수 개의 컴포넌트 각각의 복잡도를 기반으로 적어도 하나의 텍스트의 입력 위치를 결정하는 단계를 포함하는 온라인 쇼핑몰과 연관된 디자인 자동 생성 방법.
제 8 항에 있어서,
제 1 텍스트는 가장 높은 복잡도를 갖는 컴포넌트에 배치되고; 그리고
제 2 텍스트는 가장 낮은 복잡도를 갖는 컴포넌트에 배치되는 온라인 쇼핑몰과 연관된 디자인 자동 생성 방법.
제 1 항에 있어서, 상기 복수 개의 컴포넌트 중 적어도 하나에 텍스트를 입력하여 최종 디자인을 생성하는 단계는,
상기 복수 개의 컴포넌트 각각의 크기와 연관된 정보를 획득하는 단계;
상기 획득된 크기 정보를 기반으로 적어도 하나의 텍스트의 입력위치를 결정하는 단계를 포함하는 온라인 쇼핑몰과 연관된 디자인 자동 생성 방법.
제 10 항에 있어서,
헤드라인 텍스트는 가장 큰 크기를 갖는 컴포넌트에 배치하고,
서브 텍스트는 두번째로 큰 크기를 갖는 컴포넌트에 배치하는 온라인 쇼핑몰과 연관된 디자인 자동 생성 방법.
제 1 항에 있어서,
텍스트를 형태소 별로 의미 분석을 수행하는 단계; 및
의미 분석을 수행한 결과에 따라 텍스트 내의 형태소 간의 상호작용을 고려하여, 상기 복수 개의 컴포넌트를 재배치하는 단계를 포함하는 온라인 쇼핑몰과 연관된 디자인 자동 생성 방법.
제 1 항에 있어서,
텍스트가 기설정된 개수의 형태로보다 작게 구성된 경우, 상기 텍스트는, 기정의된 컴포넌트의 배치를 무시하고 얼굴을 침범하지 않는 범위에서 배치되는 온라인 쇼핑몰과 연관된 디자인 자동 생성 방법.
제 1 항에 있어서,
제 1 텍스트와 제 2 텍스트가 연계하여 하나의 연관된 의미를 갖는 경우,
상기 제 1 텍스트는 제 1 컴포넌트에 배치하고, 제 2 텍스트는 제 2 컴포넌트에 배치하되,
상기 제 1 컴포넌트와 상기 제 2 컴포넌트는 기준값보다 높은 상관성을 갖는 온라인 쇼핑몰과 연관된 디자인 자동 생성 방법.
제 1 항에 있어서, 상기 정의된 복수 개의 컴포넌트들 중 적어도 하나에 텍스트를 입력하여 최종 디자인을 생성하는 단계는,
제 1 텍스트가 입력됨에 대응하여, 제 1 텍스트에 대한 의미분석을 통해 제 1 텍스트와 유사어 또는 강조어를 생성하는 단계; 및
상기 생성된 유사어 또는 강조어를 상기 정의된 복수 개의 컴포넌트 중 적어도 하나에 입력하는 단계를 포함하는 온라인 쇼핑몰과 연관된 디자인 자동 생성 방법.
제 1 항에 있어서, 상기 정의된 복수 개의 컴포넌트들 중 적어도 하나에 텍스트를 입력하여 최종 디자인을 생성하는 단계는,
디자인 생성 요청에 포함된 프로모션 주제 정보, 이벤트 정보 및 절기 정보 중 적어도 하나를 기반으로 그에 대응하는 장식형상을 추출하는 단계; 및
상기 생성된 장식형상을 상기 정의된 복수 개의 컴포넌트 중 적어도 하나에 입력하는 단계를 포함하는 온라인 쇼핑몰과 연관된 디자인 자동 생성 방법.
제 1 항에 있어서,
온라인 쇼핑몰과 연관된 복수 개의 이미지들 중 디자인에 적합한 이미지를 선별하는 단계를 더 포함하되,
상기 디자인에 적합한 이미지를 선별하는 단계는, i) 이미지 내에 얼굴 객체가 존재하는지 여부 및 ii) 이미지 내에 텍스트가 존재하는지 여부 중 적어도 하나를 기반으로 선별하는 단계를 포함하는 온라인 쇼핑몰과 연관된 디자인 자동 생성 방법.
제 1 항에 있어서,
온라인 쇼핑몰과 연관된 복수 개의 이미지들 중 디자인에 적합한 이미지를 선별하는 단계를 더 포함하되, 상기 디자인에 적합한 이미지를 선별하는 단계는,
상기 텍스트의 의미를 분석하는 단계; 및
분석된 텍스트의 의미에 대응되는 객체를 포함하는 이미지를 선별하는 단계를 포함하는 온라인 쇼핑몰과 연관된 디자인 자동 생성 방법.
온라인 쇼핑몰과 연관된 디자인(design) 자동 생성 장치에 있어서,
사용자 단말로부터 디자인 자동 생성 요청을 수신하고 생성된 최종디자인을 제공하는 통신부; 및
상기 디자인 자동 생성 요청에 대응하여, 상기 쇼핑몰과 연관된 이미지 내의 객체를 분석하여 상기 이미지와 연관된 형상을 도출하고, 상기 도출된 형상을 기설정된 패턴 그리드 유형과 매칭하며, 상기 매칭된 패턴 그리드 유형을 기반으로, 상기 이미지의 여백을 분석하여 캔버스(canvas) - 캔버스는 상기 이미지가 삽입되는 공간을 나타냄 - 내의 복수 개의 컴포넌트(component)들 - 컴포넌트는 상기 이미지와 함께 디자인을 구성하는 텍스트가 입력되는 영역을 나타냄 - 을 정의하고, 상기 정의된 복수 개의 컴포넌트들 중 적어도 하나에 텍스트를 입력하여 최종 디자인을 생성하는 프로세서를 포함하되, 상기 프로세서는,
상기 객체의 전체 형상을 둘러싸는 제 1 사각블록과 상기 객체가 만나는 4개의 포인트들을 이어서 생성되는 4개의 직선이 이루는 형상을 상기 이미지와 연관된 형상으로 도출하고,
컴포넌트 각각이, (i) 상기 4개의 포인트들 중 적어도 하나를 포함하면서, (ii) 상기 객체의 중심이 되는 중심객체와 연관된 제 2 사각블록으로부터의 연장선 상에 있는 영역을 제외함에 의해, 상기 복수 개의 컴포넌트들을 정의하는 온라인 쇼핑몰과 연관된 디자인 자동 생성 장치.
온라인 쇼핑몰과 연관된 디자인(design) 자동 생성 시스템에 있어서,
디자인 자동 생성 요청을 전송하고 상기 요청에 대응하는 최종디자인을 수신하는 사용자 단말; 및
상기 사용자 단말로부터의 디자인 자동 생성 요청에 대응하여, 상기 쇼핑몰과 연관된 이미지 내의 객체를 분석하여 상기 이미지와 연관된 형상을 도출하고, 상기 도출된 형상을 기설정된 패턴 그리드 유형과 매칭하며, 상기 매칭된 패턴 그리드 유형을 기반으로, 상기 이미지의 여백을 분석하여 캔버스(canvas) - 캔버스는 상기 이미지가 삽입되는 공간을 나타냄 - 내의 복수 개의 컴포넌트(component)들 - 컴포넌트는 상기 이미지와 함께 디자인을 구성하는 텍스트가 입력되는 영역을 나타냄 - 을 정의하고, 상기 정의된 복수 개의 컴포넌트들 중 적어도 하나에 텍스트를 입력하여 최종 디자인을 생성하는 쇼핑몰 디자인 자동생성 장치를 포함하되, 상기 쇼핑몰 디자인 자동생성 장치는,
상기 객체의 전체 형상을 둘러싸는 제 1 사각블록과 상기 객체가 만나는 4개의 포인트들을 이어서 생성되는 4개의 직선이 이루는 형상을 상기 이미지와 연관된 형상으로 도출하고,
컴포넌트 각각이, (i) 상기 4개의 포인트들 중 적어도 하나를 포함하면서, (ii) 상기 객체의 중심이 되는 중심객체와 연관된 제 2 사각블록으로부터의 연장선 상에 있는 영역을 제외함에 의해, 상기 복수 개의 컴포넌트들을 정의하는 온라인 쇼핑몰과 연관된 디자인 자동 생성 시스템.