KR102114366B1 - 쇼핑몰 배너디자인 생성 방법, 장치 및 시스템 - Google Patents

쇼핑몰 배너디자인 생성 방법, 장치 및 시스템 Download PDF

Info

Publication number
KR102114366B1
KR102114366B1 KR1020180077166A KR20180077166A KR102114366B1 KR 102114366 B1 KR102114366 B1 KR 102114366B1 KR 1020180077166 A KR1020180077166 A KR 1020180077166A KR 20180077166 A KR20180077166 A KR 20180077166A KR 102114366 B1 KR102114366 B1 KR 102114366B1
Authority
KR
South Korea
Prior art keywords
image
layout
banner design
shopping mall
banner
Prior art date
Application number
KR1020180077166A
Other languages
English (en)
Other versions
KR20200004114A (ko
Inventor
박희원
정학수
이진
정철호
염무웅
김성배
Original Assignee
카페24 주식회사
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 카페24 주식회사 filed Critical 카페24 주식회사
Priority to KR1020180077166A priority Critical patent/KR102114366B1/ko
Publication of KR20200004114A publication Critical patent/KR20200004114A/ko
Application granted granted Critical
Publication of KR102114366B1 publication Critical patent/KR102114366B1/ko

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/20Software design

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)
  • Management, Administration, Business Operations System, And Electronic Commerce (AREA)

Abstract

본 발명의 일 양태는 쇼핑몰 홍보와 연관된 배너디자인(banner design) 생성 방법을 개시하고 있다. 상기 방법은, 쇼핑몰의 홍보와 연관된 적어도 하나의 입력이미지 및 텍스트를 입력받는 단계, 상기 적어도 하나의 입력이미지 중 상기 쇼핑몰의 홍보용으로 사용하기 위한 적어도 하나의 홍보이미지를 선별하는 단계, 피보나치 수열을 기반으로 하는 비율을 고려하여 상기 배너디자인의 레이아웃을 결정하는 단계 및 상기 결정된 레이아웃에 따라 상기 선별된 적어도 하나의 홍보이미지 및 상기 입력된 텍스트를 배열하여 상기 배너디자인을 생성하는 단계를 포함한다.

Description

쇼핑몰 배너디자인 생성 방법, 장치 및 시스템{ONLINE SHOPPING MALL BANNER DESIGN GENERATION METHOD, APPARATUS AND SYSTEM}
본 발명은 온라인 쇼핑몰에서의 배너문구 생성방법에 관한 것으로, 보다 상세하게는, 쇼핑몰의 홍보효과를 제고시키기 위한 배너문구 생성방법에 관한 것이다.
온라인 전자 상거래(쇼핑몰이라고 부를 수 있음)를 운영하는 과정에서 쇼핑몰의 인지도를 높이고 매출을 증대시키기 위해 해당 쇼핑몰에 대한 홍보는 필수불가결한 활동이다. 이러한 쇼핑몰의 홍보활동은 흔히 "프로모션(promotion)"이라 불리는데 이는 "하나의 주제를 가지고 행하여지는 다양한 홍보활동"으로 이해할 수 있다.
쇼핑몰 운영자는 프로모션의 효과를 높이기 위하여 다양한 홍보 수단을 이용하는데 그 중에서도 프로모션의 컨셉과 관련 정보를 간결하고 임팩트(impact) 있게 보여주는 배너(banner)는 홍보 수단의 핵심이라 할 수 있다.
따라서, 프로모션의 성과는 배너의 완성도(퀄러티: quality)에 의해 좌우될 만큼 중요한 요소가 되었지만 완성도 높은 배너를 만드는 작업은 디자인을 전문적으로 다루는 전문가의 영역으로, 이 분야의 경험이 부족한 일반인들은 많은 비용을 들여가며 전문가에게 제작을 의뢰하고 있는 것이 현실이다.
이에, 전문가에 의존하지 않고, 배너디자인을 효율적으로 만들기 위한 애플리케이션(application)이 요구되는 실정이다.
상술한 문제점을 해결하기 위한 본 발명의 일 양태에 따른 목적은 배너디자인 생성을 위해 사용자가 이미지 및 텍스트만 입력하면, 이를 이용하여 홍보에 최적화된 형태로 이미지 및 텍스트를 가공하고 가공된 이미지와 텍스트를 적절하게 병합하여 배너디자인을 생성하는 방법 및 장치, 시스템을 제공하는 것이다.
상기한 목적을 달성하기 위한 본 발명의 일 양태에 따른 쇼핑몰 홍보와 연관된 배너디자인(banner design) 생성 방법은, 쇼핑몰의 홍보와 연관된 적어도 하나의 입력이미지 및 텍스트를 입력받는 단계, 상기 적어도 하나의 입력이미지 중 상기 쇼핑몰의 홍보용으로 사용하기 위한 적어도 하나의 홍보이미지를 선별하는 단계, 피보나치 수열을 기반으로 하는 비율을 고려하여 상기 배너디자인의 레이아웃을 결정하는 단계 및 상기 결정된 레이아웃에 따라 상기 선별된 적어도 하나의 홍보이미지 및 상기 입력된 텍스트를 배열하여 상기 배너디자인을 생성하는 단계를 포함할 수 있다.
상기 피보나치 수열을 기반으로 하는 비율을 고려하여 상기 배너디자인의 레이아웃을 결정하는 단계는, (i) 상기 레이아웃에 포함된 적어도 하나의 섹션 - 섹션은 상기 적어도 하나의 홍보이미지 각각이 독립적으로 배열되는 영역을 의미함 - 의 가로와 세로방향의 비율, 및 (ii) 가로방향 및 세로방향 중 적어도 한 방향에서의 상기 적어도 하나의 섹션 간의 비율 중 적어도 하나가, 피보나치 수열을 기반으로 하는 비율을 갖도록, 상기 배너디자인의 레이아웃을 결정하는 단계를 포함할 수 있다.
상기 피보나치 수열을 기반으로 하는 비율을 고려하여 상기 배너디자인의 레이아웃을 결정하는 단계는, 상기 배너디자인이 배열되는 캔버스를 생성하는 단계, 상기 생성된 캔버스 내에 포함될 섹션의 수와 배열형태를 결정하는 단계(상기 섹션의 배열형태는 격자시스템에 피보나치 수열에 따른 비율을 적용하여 결정됨), 상기 격자시스템과 캔버스의 사이즈를 비교하는 단계, 상기 비교 결과를 기반으로 상기 격자시스템에 따라 각 섹션의 사이즈를 산출하는 단계를 포함할 수 있다.
상기 섹션의 배열형태와 관련하여, 상기 쇼핑몰의 홍보 주제에 대응되는 비율로 상기 레이아웃이 결정될 수 있다.
상기 홍보주제는 할인과 관련된 내용, 신상품과 관련된 내용, 브랜드와 관련된 내용, 사은품과 관련된 내용, SNS와 관련된 내용, 기념일과 관련된 내용, 및 무료배송과 관련된 내용 중 적어도 하나로 구분가능하며, 각각의 홍보주제에 따라 기저장된 복수 개의 분할레이아웃에 대해 서로 다른 적용확률을 가질 수 있다.
상기 레이아웃은 상기 적어도 하나의 홍보이미지의 수를 기반으로 결정될 수 있다.
상기 격자시스템과 캔버스의 사이즈를 비교하는 단계는, 상기 격자시스템의 가로사이즈와 상기 캔버스의 가로사이즈를 비교하는 단계, 상기 격자시스템의 세로사이즈와 상기 캔버스의 세로사이즈를 비교하는 단계 및 상기 가로사이즈의 비교결과 및 상기 세로사이즈의 비교결과를 기반으로, 가로방향 및 세로방향 중 적어도 한 방향에 대해 확대 또는 축소 수치를 결정하는 단계를 포함할 수 있다.
하나의 섹션은 적어도 두 개의 서브섹션으로 분할 가능하며, 가로방향 및 세로방향 중 적어도 한 방향에서의 상기 적어도 두 개의 서브섹션 간의 비율은 1:1의 비율 또는 피보나치 수열에 기반한 비율을 가질 수 있다.
상기 격자시스템이 120 그리드(grid)를 기반으로 하는 경우, 제 1 섹션과 제 2 섹션의 가로 및 세로 방향 중 적어도 한 방향의 비율이 74 그리드 대 46 그리드의 비율을 가질 수 있다.
상기 격자시스템은 하나의 격자 단위를 규정하기 위한 기준선 그리드(baseline grid) 및 상기 기준선 그리드의 집합으로 가로 및 세로 방향으로 일정한 영역을 갖는 컨트롤 포인트(control point)를 기반으로 정의될 수 있다.
상기 결정된 레이아웃에 따라 상기 적어도 하나의 홍보이미지 및 상기 입력된 텍스트를 배열하여 상기 배너디자인을 생성하는 단계는, 상기 적어도 하나의 홍보이미지 각각에 포함된 객체가 홍보주제에 부합하는지 여부를 기반으로 상기 적어도 하나의 홍보이미지에 우선순위를 부여하여 부여된 우선순위에 따라 섹션별로 상기 적어도 하나의 홍보이미지를 배열하는 단계를 포함할 수 있다.
상기한 목적을 달성하기 위한 본 발명의 일 양태에 따른 쇼핑몰 홍보와 연관된 배너디자인(banner design) 생성 장치는, 쇼핑몰의 홍보와 연관된 적어도 하나의 입력이미지 및 텍스트를 입력받는 입력부, 상기 적어도 하나의 입력이미지 중 상기 쇼핑몰의 홍보용으로 사용하기 위한 적어도 하나의 홍보이미지를 선별하는 이미지 분석부, 피보나치 수열을 기반으로 하는 비율을 고려하여 상기 배너디자인의 레이아웃을 결정하는 레이아웃 결정부 및 상기 결정된 레이아웃에 따라 상기 선별된 적어도 하나의 홍보이미지 및 상기 입력된 텍스트를 배열하여 상기 배너디자인을 생성하는 병합부를 포함할 수 있다.
상기한 목적을 달성하기 위한 본 발명의 다른 양태에 따른 쇼핑몰 홍보와 연관된 배너디자인(banner design) 생성 방법은, 쇼핑몰의 홍보와 연관된 적어도 하나의 입력이미지 및 텍스트를 입력받는 단계, 상기 적어도 하나의 입력이미지 중 상기 쇼핑몰의 홍보용으로 사용하기 위한 적어도 하나의 홍보이미지를 선별하는 단계, 상기 배너디자인의 레이아웃을 결정하는 단계(상기 레이아웃은 하나의 격자 단위를 규정하기 위한 기준선 그리드(baseline grid) 및 상기 기준선 그리드의 집합으로 가로 및 세로 방향으로 일정한 영역을 갖는 컨트롤 포인트(control point)를 기반으로 정의되는 격자시스템을 기반으로 생성됨) 및 상기 결정된 레이아웃에 따라 상기 선별된 적어도 하나의 홍보이미지 및 상기 입력된 텍스트를 배열하여 상기 배너디자인을 생성하는 단계를 포함할 수 있다.
상기 기준선 그리드는 상기 배너디자인이 적용되는 디바이스에 따라 변경되고, 상기 변경되는 기준선 그리드에 따라 상기 격자시스템의 격자는 가로 및 세로방향으로 가변적인 픽셀값을 가지며, 상기 컨트롤 포인트는 복수 개의 격자의 집합으로, 상기 컨트롤 포인트의 갯수는 절대적일 수 있다.
상기 격자시스템의 격자크기는 가로 및 세로 방향에서 서로 다른 디바이스 중단점(breakpoint)을 기점으로 변경될 수 있다.
(i) 상기 레이아웃에 포함된 적어도 하나의 섹션 - 섹션은 상기 적어도 하나의 홍보이미지 각각이 독립적으로 배열되는 영역을 의미함 - 의 가로와 세로방향의 비율, 및 (ii) 가로방향 및 세로방향 중 적어도 한 방향에서의 상기 적어도 하나의 섹션 간의 비율 중 적어도 하나가, 피보나치 수열을 기반으로 하는 비율을 갖도록, 상기 배너디자인의 레이아웃을 결정할 수 있다.
상기한 목적을 달성하기 위한 본 발명의 다른 양태에 따른 쇼핑몰 홍보와 연관된 배너디자인(banner design) 생성 장치는, 쇼핑몰의 홍보와 연관된 적어도 하나의 입력이미지 및 텍스트를 입력받는 입력부, 상기 적어도 하나의 입력이미지 중 상기 쇼핑몰의 홍보용으로 사용하기 위한 적어도 하나의 홍보이미지를 선별하는 이미지 분석부, 상기 배너디자인의 레이아웃을 결정하는 레이아웃 결정부(상기 레이아웃은 하나의 격자 단위를 규정하기 위한 기준선 그리드(baseline grid) 및 상기 기준선 그리드의 집합으로 가로 및 세로 방향으로 일정한 영역을 갖는 컨트롤 포인트(control point)를 기반으로 정의되는 격자시스템을 기반으로 생성됨) 및 상기 결정된 레이아웃에 따라 상기 선별된 적어도 하나의 홍보이미지 및 상기 입력된 텍스트를 배열하여 상기 배너디자인을 생성하는 배너디자인 생성부를 포함할 수 있다.
상기한 목적을 달성하기 위한 본 발명의 또 다른 양태에 따른 쇼핑몰 홍보와 연관된 배너디자인(banner design) 생성 시스템은, 쇼핑몰의 홍보와 연관된 적어도 하나의 이미지 및 텍스트를 포함하는 배너디지안 생성 요청을 배너디자인 생성장치로 전송하는 클라이언트 장치 및 상기 클라이언트 장치로부터 상기 배너디자인 생성 요청를 수신하고, 상기 배너디자인 생성요청에 포함된, 적어도 하나의 입력이미지 중 상기 쇼핑몰의 홍보용으로 사용하기 위한 적어도 하나의 홍보이미지를 선별하고, 피보나치 수열을 기반으로 하는 비율을 고려하여 상기 배너디자인의 레이아웃을 결정하며, 상기 결정된 레이아웃에 따라 상기 선별된 적어도 하나의 홍보이미지 및 상기 텍스트를 배열하여 상기 배너디자인을 생성하는 배너디자인 생성 장치를 포함할 수 있다.
본 발명의 쇼핑몰의 홍보와 연관된 배너디자인 생성 방법 및 장치, 및 시스템에 따르면, 인간의 직관과 경험에만 의지하던 배너 제작 과정을 인공지능을 이용하여 자동화함으로써, 디자인을 전문적으로 공부하지 않은 일반 쇼핑몰 운영자들도 완성도 높은 배너를 제작할 수 있으며, 이를 통해 소규모 쇼핑몰 운영자들의 경쟁력을 제고하는 효과가 있다.
도 1은 본 발명의 일 실시예에 따른 배너디자인 생성 방법이 적용되는 시스템을 나타낸 블록도,
도 2는 본 발명의 일 실시예에 따른 배너디자인 생성 장치의 구성을 나타낸 블록도,
도 3은 본 발명의 일 실시예에 따른 배너디자인 생성 방법을 나타낸 흐름도,
도 4는 본 발명의 일 실시예에 따른 배너디자인 생성 방법의 홍보이미지 선택과정을 구체적으로 나타낸 상세흐름도,
도 5는 입력되는 텍스트 및 이미지 정보를 나타낸 도면,
도 6a 내지 도 6c는 입력된 이미지의 홍보용으로의 사용가능성을 분석하는 과정을 설명하기 위한 예시도,
도 7은 본 발명의 일 실시예에 따른 배너디자인 생성 방법의 텍스트 위치결정과정을 구체적으로 나타낸 상세흐름도,
도 8a 내지 도 8b는 텍스트 사이즈에 따라 결정되는 격자 관련 모드의 예를 나타낸 예시도,
도 8c 내지 도 8e는 사용자의 눈 위치 정보를 기반으로 텍스트의 위치를 결정하는 과정을 예시적으로 나타낸 위한 예시도,
도 9는 본 발명의 일 실시예에 따른 배너디자인 생성 방법의 텍스트의 속성값을 매칭하는 과정을 구체적으로 나타낸 상세흐름도,
도 10a 내지 도 10b는 홍보이미지로부터 획득된 정보와 텍스트의 속성값을 매칭하는 과정을 설명하기 위한 예시도,
도 11은 본 발명의 일 실시예에 따른 배너디자인 생성 방법에서 감성어휘와 이미지 색상을 매칭하기 위한 매칭도,
도 12는 본 발명의 일 실시예에 따른 배너디자인 생성 방법에서 이미지로부터 추출된 감정정보와 복잡도 정보를 기반으로 텍스트의 속성값을 매칭한 결과를 예시적으로 나타낸 표,
도 13은 본 발명의 일 실시예에 따른 배너디자인 생성 방법을 통해 최초 입력이미지로부터 이미지/텍스트 병합 과정을 거쳐 최종결과물을 도출하는 전과정을 개념적으로 나타낸 개념도,
도 14는 본 발명의 일 실시예에 따른 배너디자인 생성 방법에서 격자시스템 및/또는 피보나치 수열 기반의 비율을 사용하여 배너디자인 레이아웃을 결정하고, 결정된 레이아웃에 따라 배너디자인을 생성하는 과정을 나타낸 흐름도,
도 15는 본 발명의 일 실시예에 따른 배너디자인 생성 방법에서 사용되는 격자시스템의 중단점(breakpoint)을 나타낸 도면,
도 16은 본 발명의 일 실시예에 따른 배너디자인 생성 방법에서 사용되는 격자시스템의 단일 격자, 단일 컨트롤 포인트(control point)를 설명하기 위한 개념도,
도 17은 1200 격자 모드에서, 캔버스 상에 컨트롤 포인트를 나타낸 도면,
도 18은 1200 x 740 격자 모드에서, 컨트롤 센터(중앙기준면)와 컴포넌트 영역을 나타낸 도면,
도 19a 내지 도 19c는 가로방향에서, 디바이스 중단점에 따라 서로 다른 격자 크기를 갖는 특징을 설명하기 위한 개념도,
도 20은 세로방향에서의 디바이스 중단점을 나타낸 도면,
도 21은 격자시스템에 피보나치 수열 기반의 비율이 결합된 형태의 레이아웃 구성을 나타낸 도면,
도 22는 가로 방향의 2분할 레이아웃과 가로방향의 3분할 레이아웃을 나타낸 예시도,
도 23은 도 22의 2분할 레이아웃과 3분할 레이아웃에 홍보이미지 및 텍스트를 삽입하여 완성한 배너디자인의 예시적인 모습을 나타낸 예시도,
도 24는 본 발명의 일 실시예에 따른 배너디자인 생성 방법의 분할 레이아웃 섹션 사이즈 결정에 따른 배너디자인 삽입과정을 구체적으로 나타낸 상세흐름도이다.
본 발명은 다양한 변경을 가할 수 있고 여러 가지 실시예를 가질 수 있는 바, 특정 실시예들을 도면에 예시하고 상세하게 설명하고자 한다.
그러나, 이는 본 발명을 특정한 실시 형태에 대해 한정하려는 것이 아니며, 본 발명의 사상 및 기술 범위에 포함되는 모든 변경, 균등물 내지 대체물을 포함하는 것으로 이해되어야 한다.
제 1, 제 2 등의 용어는 다양한 구성요소들을 설명하는데 사용될 수 있지만, 상기 구성요소들은 상기 용어들에 의해 한정되어서는 안 된다. 상기 용어들은 하나의 구성요소를 다른 구성요소로부터 구별하는 목적으로만 사용된다. 예를 들어, 본 발명의 권리 범위를 벗어나지 않으면서 제 1 구성요소는 제 2 구성요소로 명명될 수 있고, 유사하게 제 2 구성요소도 제 1 구성요소로 명명될 수 있다. 및/또는 이라는 용어는 복수의 관련된 기재된 항목들의 조합 또는 복수의 관련된 기재된 항목들 중의 어느 항목을 포함한다.
어떤 구성요소가 다른 구성요소에 "연결되어" 있다거나 "접속되어" 있다고 언급된 때에는, 그 다른 구성요소에 직접적으로 연결되어 있거나 또는 접속되어 있을 수도 있지만, 중간에 다른 구성요소가 존재할 수도 있다고 이해되어야 할 것이다. 반면에, 어떤 구성요소가 다른 구성요소에 "직접 연결되어" 있다거나 "직접 접속되어" 있다고 언급된 때에는, 중간에 다른 구성요소가 존재하지 않는 것으로 이해되어야 할 것이다.
본 출원에서 사용한 용어는 단지 특정한 실시예를 설명하기 위해 사용된 것으로, 본 발명을 한정하려는 의도가 아니다. 단수의 표현은 문맥상 명백하게 다르게 뜻하지 않는 한, 복수의 표현을 포함한다. 본 출원에서, "포함하다" 또는 "가지다" 등의 용어는 명세서상에 기재된 특징, 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것이 존재함을 지정하려는 것이지, 하나 또는 그 이상의 다른 특징들이나 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것들의 존재 또는 부가 가능성을 미리 배제하지 않는 것으로 이해되어야 한다.
다르게 정의되지 않는 한, 기술적이거나 과학적인 용어를 포함해서 여기서 사용되는 모든 용어들은 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에 의해 일반적으로 이해되는 것과 동일한 의미를 가지고 있다. 일반적으로 사용되는 사전에 정의되어 있는 것과 같은 용어들은 관련 기술의 문맥상 가지는 의미와 일치하는 의미를 가진 것으로 해석되어야 하며, 본 출원에서 명백하게 정의하지 않는 한, 이상적이거나 과도하게 형식적인 의미로 해석되지 않는다.
이하, 첨부한 도면들을 참조하여, 본 발명의 바람직한 실시예를 보다 상세하게 설명하고자 한다. 본 발명을 설명함에 있어 전체적인 이해를 용이하게 하기 위하여 도면상의 동일한 구성요소에 대해서는 동일한 참조부호를 사용하고 동일한 구성요소에 대해서 중복된 설명은 생략한다.
배너디자인의 생성
도 1은 본 발명의 일 실시예에 따른 배너디자인 생성 방법이 적용되는 시스템을 나타낸 블록도이다. 도 1에 도시된 바와 같이, 본 발명의 일 실시예에 따른 배너디자인 생성 시스템은 쇼핑몰(110-1~110-N), 통신망(120) 및 배너디자인 생성장치(130)를 포함할 수 있다.
도 1을 참조하면, 쇼핑몰(110-1~110~N)은 인터넷을 통하여 상품 및/또는 서비스을 판매하는 쇼핑몰을 의미할 수 있고, 쇼핑몰과 연관된 정보를 취급하는 서버 또는 쇼핑몰의 운영자의 단말기를 포함한다. 단말은 스마트폰, PC 등의 컴퓨팅 디바이스를 포함할 수 있다.
본 발명의 실시예에 따르면, 복수 개의 쇼핑몰(110-1~110-N)은 통신망(120)을 통해 배너디자인 생성장치(130)와 연동할 수 있다. 쇼핑몰(110-1~110-N)은 자신의 쇼핑몰의 홍보를 위한 배너디자인 생성을 요청하는 장치를 포함할 수 있고, 이를 위해 배너디자인 작성 요청을 위해 이미지 정보 및/또는 텍스트 정보를 배너디자인 생성장치(130)로 제공할 수 있다. 상기 이미지 정보 및/또는 텍스트 정보는 배너디자인에 적용이 될 후보이미지 및/또는 텍스트라고 할 수 있다. 여기서, 텍스트는 문자(영문, 한문, 국문, ... 등을 포함함), 숫자, 기호, 수식 등을 포함하며, 컴퓨팅 장치에서 처리가능한 형태의 언어를 모두 포함할 수 있다. 이미지는 JPG, PNG, BMP, GIF, JPEG, PDF, JPE, TIFF 등 다양한 형식의 이미지를 포함할 수 있다. 다만, GIF 파일은 다수 프레임을 포함하는 움직이는 이미지 파일이므로, 각 프레임을 추출하여 JPG 파일로 변환하는 것이 바람직할 수 있다.
본 발명의 일 실시예에 따르면, 쇼핑몰(110-1~110-N)은 이미지 및 텍스트를 포함하는 배너디자인 작성요청에 홍보목적 및/또는 홍보주제 정보를 포함시켜 배너디자인 생성장치(130)로 제공할 수 있다. 이러한 홍보주제 정보는 배너디자인 생성장치(130)에서의 핵심어 추출, 및 홍보이미지의 선별 등 다양한 기능을 수행하는데 활용될 수 있다. 홍보 주제는, 크게, 할인/세일, 신상품/시즌, 브랜드/카테고리, 사은품/포인트, SNS/회원, 기념일/공식 및 무료배송 중 적어도 둘 이상으로 분류될 수 있다.
통신망(120)은 쇼핑몰(110-1~110-N)과 배너디자인 생성장치(130)를 연결하는 네트워크로써, 유선망 및/또는 무선망(인터넷(internet))을 포함할 수 있다.
배너디자인 생성장치(130)는 쇼핑몰(110-1~110-N) 중 적어도 하나로부터 이미지 및/또는 텍스트 정보를 포함하는 배너디자인 생성요청을 통신망(120)을 통해 수신하고, 수신된 이미지 및/또는 텍스트를 기반으로 배너디자인을 생성하는 장치이다. 배너디자인 생성장치는 컴퓨팅 장치로 구현될 수 있다. 여기서 말하는 컴퓨터 장치는 서버 급 컴퓨터 단말기로 구현될 수 있다. 상기 컴퓨터 장치는 통상적인 컴퓨터 단말이 가지는 입력 장치, 표시 장치, 네트워킹 장치, 하드디스크, 프로그램을 저장하는 메모리 및 메모리에 저장된 프로그램을 수행시키는 프로세서 등을 구비할 수 있다. 다만, 반드시 서버 급 컴퓨터 단말로 구현되어야 하는 것은 아니다.
배너디자인 생성장치(130)는 수신된 이미지 및/또는 텍스트를 획득한 후, 이미지 분석을 통해 수신된 이미지가 홍보용으로 적합한지 판단할 수 있다. 홍보용으로 적합하지에 대한 판단은 이미지 내의 모델의 존재여부, 모델의 얼굴과 관련된 정보를 취득함으로써 이루어질 수 있다. 그리고는, 장치(130)는 홍보용으로 적합하다고 판단된 이미지를 기반으로 해당 이미지 내에서 텍스트가 존재할 위치를 설정한다. 이때, 이미지 내에 포함된 객체(objetc) 정보를 참조하여 텍스트의 속성값을 매칭하는 방식으로 텍스트의 속성값을 결정한다. 그리고는, 입력된 텍스트가 상기 결정된 속성값을 갖도록 변환하고, 변환된 텍스트를 홍보용으로 적합하다고 판단된 이미지와 병합(merge)하여 최종 배너디자인을 생성할 수 있다. 그리고는, 생성된 배너디자인을 요청했던 쇼핑몰(110-1~110-N)로 반환할 수 있다.
쇼핑몰(110-1~110-N)은 배너디자인 생성장치(130)에서 생성된 배너디자인을 수신하여, 운영자의 판단에 따라 쇼핑몰(110-1~110-N)의 홍보용으로 사용할지 결정할 수 있다. 상기 결정에 따라 생성된 배너디자인은 쇼핑몰(110-1~110-N)과 연관된 웹페이지, 애플리케이션, 및/또는 SNS 등에서 활용될 수 있다.
본 발명의 다른 실시예에 따르면, 쇼핑몰(110-1~110-N)과 연관된 단말은 배너디자인 생성장치(130)에서 제공하는 애플리케이션을 다운로드 받아, 배너디자인 생성장치(130)에서 수행하는 입력이미지 및/또는 텍스트로부터 배너디자인을 생성하는 과정을 단말 내에서 수행하도록 제어할 수 있다. 즉, 별도의 서버장치 없이 단말의 프로세서(미도시)가 다운받은 애플리케이션을 실행하여 이미지 및/또는 텍스트 분석을 통해 배너디자인을 생성하도록 할 수 있다.
도 2는 본 발명의 일 실시예에 따른 배너디자인 생성 장치의 구성을 나타낸 블록도이다. 도 2에 도시된 바와 같이, 본 발명의 일 실시예에 따른 배너디자인 생성장치는 입력부(210), 이미지 분석부(220), 텍스트 속성 설정부(230), 텍스트 가공부(240), 이미지 가공부(250) 및 이미지/텍스트 병합부(260)를 포함할 수 있다. 이러한 각 구성요소들은 하나의 마이크로 프로세서로 통합 구현되거나 그리고/또는 각 기능블록 별로 복수 개의 프로세서가 존재하고, 복수 개의 프로세서의 조합으로 구현될 수 있다.
도 2를 참조하면, 입력부(210)는 배너디자인을 생성하기 위한 텍스트 정보 및 이미지 정보를 입력받는다. 입력되는 텍스트 및 이미지는 개별 쇼핑몰로부터 획득된 것들일 수 있다. 텍스트는 복수의 문장을 포함할 수 있다. 이미지도 복수 개일 수 있다. 입력부(210)는 입력된 이미지는 이미지 분석부(220)로, 입력된 텍스트는 텍스트 속성 설정부(230)로 제공할 수 있다.
이미지 분석부(220)는 입력된 이미지를 분석한다. 입력된 이미지는 홍보용을 사용하기 위한 홍보이미지(홍보이미지는, 배너디자인과는 일부 상이한 개념으로, 최종디자인 생성 전 홍보에 적합한 것으로 선별된 이미지를 의미할 수 있음)로 선별될 가능성이 있는 후보들이기 때문에, 후보이미지라고 부를 수 있다. 또는 입력이미지라고 부를 수 있다. 경우에 따라서는, 쇼핑몰로부터, 텍스트만 입력되고 이미지는 입력되지 않을 수 있다. 이때, 입력부(210)로 입력되는 이미지는, 상기 입력된 텍스트 정보를 기반으로 쇼핑몰과 관련된 이미지들 중 텍스트 정보에 부합하는 이미지를 장치가 자체 선택한 이미지들일 수 있다. 이는 텍스트에 포함된 개별단어의 의미분석을 통해 핵심어의 의미에 근접한 컨텐츠(또는 객체)를 포함하는 이미지들일 수 있다. 이러한 경우, 후보이미지 선정을 위해, 이미지 분석과 텍스트 분석이 함께 이루어질 수 있다.
이미지 분석부(220)는 입력된 이미지를 분석하여 홍보이미지를 선별하고, 홍보이미지를 분석한다. 분석 툴(image analysis tool)로는, 얼굴 인식/트랙킹(tracking) 알고리즘, 객체인식 알고리즘, 컬러 추출 알고리즘 등을 활용할 수 있다.
이미지 분석부(220)는 입력부(210)에 입력된 적어도 하나의 후보이미지를 수신한다. 그리고는, 홍보용으로 사용가능성을 판단하기 위해, 해당 이미지에 포함된 모델의 정보를 추출 분석할 수 있다. 추출되는 모델 정보는, (i) 모델의 얼굴이 이미지 내에 존재하는지 여부, (ii) 모델의 얼굴크기 정보 및/또는 (iii) 모델의 얼굴방향 정보를 포함할 수 있다. 그리고는, 추출된 모델 존재여부에 대한 정보, 모델의 얼굴크기 정보 및 모델의 얼굴방향 정보를 기설정된 기준값들과 비교하여 기준값 내에 포함되는 정보를 갖는 이미지들만을 홍보이미지로 선별한다. 본 실시예에서는 홍보이미지로 모델(즉, 모델로 보이는 사람)을 중심으로 이미지 분석을 수행하였는데, 경우에 따라서, 홍보하고자 하는 상품이 사람과 관련성이 적은 경우(예컨대, 애견용품 등), 상품과 관련성이 있는 특정물품 또는 동물, 특정건물 등을 모델과 대체하여 고려할 수 있다. 이를 위해, 장치는 홍보목적(또는 주제)과 관련된 내용을 입력하는 사용자 인터페이스를 클라이언트 단말(쇼핑몰 운영자의 단말)에 표시하도록 하여, 홍보목적에 따라 이미지 분석 대상이 달라질 수 있다. 예컨대, 건물의 경우, 창문 및/또는 문과 같은 객체가 이미지 분석대상이 될 수 있다.
홍보이미지로의 사용가능성에 대한 판단이 완료된 후에, 이미지 분석부(220)는 별도의 프로세스를 통해 사용가능성이 있는 홍보이미지들 중 일부를 선별하는 작업을 수행할 수 있다. 예컨대, 홍보이미지가 과도하게 많다고 판단되면, 이를 자체적으로 줄이려는 노력을 할 수 있다. 이때, 다수의 홍보이미지 중 선별되는 것은 보다 모델이 명확하게 존재하는 것(예컨대, 모델의 얼글 크기가 상대적으로 더 큰 것 또는 그 반대 경우, 및/또는 모델의 얼굴방향이 홍보에 더 적합한 것 등)이 될 수 있다. 또는, 홍보목적 또는 홍보주제(또는 홍보대상상품)에 보다 부합하는 이미지가 선택될 수도 있다. 이는 홍보목적 또는 홍보주제와 관련된 컨텐츠를 보다 명확하게 표시하고 있는 이미지가 선택될 수 있다.
배너디자인에 사용될 홍보이미지 선택이 완료되면, 이미지 분석부(220)는 이미지의 사이즈 정보를 추출하여 해당 이미지에 적용될 격자시스템을 결정하고, 모델의 눈의 위치정보를 추출한다. 그리고, 추출된 눈 위치가 격자시스템의 중앙기준면의 어느 방면에 존재하는지 판단한다. 그리고는, 이미지 내의 눈의 위치에 대응되는 영역에 텍스트를 배치하도록 텍스트 위치정보를 결정할 수 있다. 결정된 위치정보는 텍스트 속성 설정부(230)로 제공된다.
이미지 분석부(220)는 텍스트 위치를 결정함과 더불어, 이미지와 연관된 감정 정보, 복잡도 정보, 주색상 정보, 명도 정보, 보색 정보를 추출할 수 있다. 그리고는, 관련 정보를 텍스트 속성 설정부(230)로 제공한다.
본 발명의 일 실시예에 따르면, 이미지 분석부(220)는 이미지 전처리를 수행할 수 있다. 이미지에서의 노이즈 필터링 등이 수행될 수 있다.
또한, 이미지 분석부(220)는 격자시스템 및 레이아웃의 설정과 관련된 처리를 수행하는 레이아웃 결정부(미도시)를 포함할 수 있다. 이때, 레이아웃 결정부는 홍보이미지가 삽입되는 섹션의 배열과 연관된 레이아웃을 결정한다. 본 발명의 실시예에 따르면, 레이아웃 결정부는 피보나치 수열(Fibonacci sequence)을 기반으로 하는 황금비율이 레이아웃에 적용되도록 제어할 수 있다. 이는 도 14 내지 도 23을 통해 보다 상세히 설명한다.
텍스트 속성 설정부(230)는 입력부(210)로부터 입력된 텍스트 정보를 수신한다. 이때, 텍스트 정보가 구분가능한 복수 개의 문장으로 된 경우(또는 복수 개의 구문으로 된 경우), 형태소 및 의미분석을 통해, 문장 및/또는 구분 단위로 텍스트를 구분하여 각각의 구분된 텍스트에 대해 텍스트 속성 설정 작업을 수행한다. 즉, 한번에 입력된 텍스트에 대해 반드시 일괄적인 속성값이 적용되지는 않는다.
텍스트 속성 설정부(230)는 입력된 텍스트 중 적어도 일부에 대해 텍스트 위치값, 텍스트 스타일, 텍스트 굵기, 텍스트 글꼴, 텍스트 색상 및/또는 텍스트 강조색을 결정할 수 있다. 텍스트 위치값은 이미지 분석부(220)로부터 위치값을 직접 받아 결정할 수 있다. 또는, 경우에 따라 이미지 분석부(220)에서는 모델의 눈이 캔버스의 중앙기준면 대비 어느 방면에 있는지에 대한 정보만 수신하고, 상기 방면정보를 기반으로 텍스트 속성설정부(230)가 직접 텍스트의 위치 값을 결정할 수 있다. 텍스트 속성설정부(230)는 이미지 분석부(220)로부터 이미지와 관련된 감정정보, 복잡도 정보, 주색상 정보, 명도 정보, 보색정보 중 적어도 하나를 수신하여 해당 값들에 대응되는 텍스트 스타일값, 텍스트 굵기값, 텍스트 글꼴값, 텍스트 색상값 및/또는 텍스트 강조색 값을 설정한다. 이미지 분석부(220)에서 분석된 결과와 텍스트 속성 설정부(230)에서의 텍스트 속성값과의 대응관계는 데이터베이스(미도시) 또는 메모리(미도시)에 기저장된 값일 수 있다. 이러한 대응관계를 보다 정확하게 만들기 위해, 입력되는 이미지와 텍스트 정보에 따른 이미지 분석 결과값과, 텍스트 속성값을 학습용 데이터로 생성하여, 딥러닝(deep learning) 모델을 통해 학습되도록 할 수 있다.
본 발명의 실시예에 따르면, 텍스트 속성 설정부(230)는 행태소 분석을 통해 텍스트의 구문 및 단어를 분석하고 핵심어를 추출할 수 있다. 핵심어를 통해 강조문구를 선별하여, 선별된 강조문구에 대해서는 강조색이 독립적으로 적용될 수 있도록 할 수 있다. 이때, 핵심어는 홍보 주제에 따라 사용자가 전달하고자 하는 메시지의 핵심문구로, 최소단위의 형태로로 분류할 수 있다. 예컨대, 할인의 경우, "50% SALE EVERYTHING"에서, "50%"와 "SALE"이 핵심어가 되고, 신상품/시즌의 경우, "2018 WINTER NEW ARRIVALS"에서, "2018"과 "WINTER"가 핵심어가 될 수 있다.
텍스트 가공부(240)는 텍스트 속성 설정부(230)에서 설정된 속성값에 맞게 상기 텍스트를 변환한다.
이미지 가공부(250)는 선별된 홍보이미지를 가공한다. 가공은 이미지 품질 가공 및 영역분리 등의 처리를 포함한다. 이는 이미지 분석 결과 및/또는 텍스트 정보를 기반으로 수행될 수 있다. 예컨대, 텍스트의 의미분석을 통해 텍스트가 담고있는 감정이 존재하는 경우(감정어휘를 포함하는 경우), 그에 대응되는 색상으로 이미지를 변환할 수 있다. 또는, 이미지의 품질을 높이는 가공을 수행할 수 있다. 예컨대, 이미지의 선명도를 높이는 처리가 수행될 수 있다. 또는, 하나의 이미지를 복수 개로 분할하여 다중이미지를 생성하는 처리가 수행될 수도 있다. 추가적으로, 순수 이미지 영역을 제외한 모든 여백을 삭제하는 등의 처리가 수행될 수 있다. 이러한 이미지 가공부(250)의 작업은 경우에 따라 생략되어도 무방하다.
이미지/텍스트 병합부(260)는 이미지 가공부(250)에서 가공된 이미지 및 텍스트 가공부(240)에서 설정된 속성값으로 변환된 텍스트를 수신하여 이를 적절히 병합함으로써 최종 배너디자인을 생성한다.
도 3은 본 발명의 일 실시예에 따른 배너디자인 생성 방법을 나타낸 흐름도이다.
도 3을 참조하면, 장치는 입력정보를 수신한다(S310). 이는 적어도 하나의 이미지 및 텍스트 정보를 포함한다. 장치는 입력된 이미지에 대해 홍보용으로써의 사용가능성을 판단한다(S320). 이에 대한 판단은 이미지 내에 존재하는 모델을 중심으로 수행되는 것이 바람직하다. 모델에 대한 이미지 분석이 수행되면, 장치는 분석결과를 가지고 홍보이미지를 선별할 수 있다(S320). 홍보이미지의 선별과 관련하여, 기본적인 방법 외에, 가독성이 우수한 이미지를 선별하는 방법, 텍스트 존재여부를 기반으로 홍보용으로 사용될 이미지를 선별하는 방법 등 다양한 방법이 적용될 수 있다.
홍보이미지를 선별하고 나면, 장치는 이미지 분석 결과, 특히, 모델의 눈 위치를 기준으로 텍스트의 위치를 설정한다(S340). 그리고는, 이미지 분석 결과 중, 감정분석 데이터, 컬러 정보 등을 고려하여 텍스트의 속성값을 설정한다(S350). 그르고는, 설정된 속성값을 갖는 텍스트와 선별된 홍보이미지를 병합하여 배너 디자인을 생성한다(S360).
도 4는 본 발명의 일 실시예에 따른 배너디자인 생성 방법의 홍보이미지 선택과정을 구체적으로 나타낸 상세흐름도이다.
도 4를 참조하면, 홍보이미지의 선별을 위해 최초, 이미지를 입력받는다(S410). 이때, 입력되는 텍스트는 복수구문 및 복수문장, 때에 따라서는, 복수의 단어를 분리하여 배열하는 형태도 가능하다. 이미지는 한장이어도 좋고, 복수 장이어도 좋다.
도 5는 입력되는 텍스트 및 이미지 정보를 나타낸 도면이다.
도 5를 참조하면, 텍스트는 17년, 18년의 겨울 컬렉션과 관련된 내용(17 18 PRE WINTER COLLECTION)을 주제로 하고 있으며, "WINTER", "SNOW", "IN SAPPORO"의 각 단어를 서로 다른 열에 배치하고 있다. 이러한 경우, 서로 다른 열에 배치된 단어는 서로 다른 구문으로 해석될 수 있고, 각각의 구분된 구문은 앞서 설명한 바와 같이, 서로 다른 텍스트 속성값(위치값을 포함할 수 있음)이 설정될 수 있다.
이미지 역시, 복수 개가 입력될 수 있다. 입력된 이미지는 텍스트를 포함하는 것, 그렇지 않은 것, 모델을 포함하는 것, 그렇지 않은 것, 모델의 얼굴이 명확히 표시되는 것, 그렇지 않은 것 등 다양한 이미지를 포함할 수 있다.
다시 도 4로 돌아가서, 텍스트 및 이미지 입력이 완료되면, 장치는 모델의 얼굴을 스캔한다(S420). 그리고는, 홍보용으로 사용가능한지 판단한다(S430). 이때의 사용가능성에 대한 판단은 모델의 눈, 코 및 입이 모두 보이는지 여부를 기준으로 수행된다. 모델의 얼굴 내의 기저장된 구성요소들(눈, 코 및 입)이 이미지 내에 존재하는지 여부는 페이스 트랙킹(face tracking) 기법을 통해 이루어질 수 있고, 해당 구성요소의 좌표값을 기반으로 홍보이미지로써의 사용가능성을 판단한다. 눈, 코 및 입 중 하나라도 없다면 해당 이미지는 폐기될 수 있다(S435).
다음으로, 모델의 얼굴 크기와 관련된 정보를 추출한다(S440). 이는 얼굴의 윤곽선을 식별하여, 식별된 윤곽선이 이루는 면적을 계산함으로써 수행된다. 장치는, 추출된 얼굴크기 정보를 기설정된 얼굴 크기 기준값과 비교하여 기준값 이상인 이미지는 사용가능하다고 판단하고(S450), 그렇지 않은 이미지는 폐기한다(S435).
그리고는, 모델의 얼굴 방향과 관련된 정보를 추출한다(S460). 추출된 데이터는 얼굴각도와 연관된 데이터로써, Roll 정도, Pan 정도 및 Tilt 정보를 포함할 수 있다. 즉, 얼굴의 좌우방향성, 고개의 상하기울기 정보, 목돌림 정보를 포함한다. 그리고는, 추출된 얼굴 좌우 방향성 정보, 고개의 상하기울기 및 목돌림 정보가 각각 설정된 기준값 내에 포함되는지 판단하여 사용가능 여부를 결정한다(S470). 예컨대, 얼굴의 일측면이 안 나왔다던지, 고개를 심하게 젖혀서 보이지 않는다던지 목을 너무 돌려 뒷머리 부분만 보이는 경우, 사용가능성이 없다고 판단할 수 있다. 사용가능성이 없는 이미지는 폐기한다(S435).
이러한 과정을 거쳐, 사용가능성 관련 과정을 모두 통과한 이미지는 홍보이미지로 선정될 수 있다(S480). 다만, 기설정된 기준 개수보다 많은 이미지가 홍보이미지로 선정되었거나, 또는, 사용자가 배너이미지에 포함된 이미지의 개수를 특정 개수로 한정한 경우, 홍보이미지의 개수를 줄여야 하는 경우가 발생할 수 있다. 이때, 장치는 얼굴면적이 상대적으로 더 큰 것, 얼굴의 방향성이 상대적으로 더 적절한 것을 선정할 수 있다. 또한, 복수 개의 기준에 대한 이미지의 특징들의 조합을 값(선별점수)으로 변환하여, 특징값을 내림차순으로 나열하여 상위 N개(N은 자연수)의 이미지를 선별하는 방안도 고려될 수 있다. 추가적으로, 선별된 이미지 중, 홍보주제에 부합하는 이미지, 즉, 홍보주제와 관련된 객체를 포함하는 이미지가 선별되도록 하는 방안도 고려될 수 있다.
본 발명의 다른 실시예에 따르면, 장치는 특징점을 활용하는 방안을 고려할 수 있다. 특징점은 나머지 점과 구별되는 특정 속성을 나타내는 모든 점의 집합으로써, 물체를 추적 및 인식할 때 사용되는 점이다. 이는 특정 객체의 윤곽선을 포함할 수 있다. 또한, 배경과 객체를 구분하기 위한 점을 포함할 수 있다. 예컨대, 물체의 형태나 크기, 위치가 변해도 식별이 가능한 점, 카메라의 시점, 조명이 변해도 해당 지점을 용이하게 찾을 수 있는 점이 특징점으로 고려될 수 있다. 이는 특징점 추출 알고리즘을 통해 추출된다. 본 발명의 실시예에 있어서, 특징점이 명확하여 기준값 이상의 특징점을 포함하는 이미지가 홍보이미지로 선별되는 방안도 고려될 수 있다.
도 6a 내지 도 6c는 입력된 이미지의 홍보용으로의 사용가능성을 분석하는 과정을 설명하기 위한 예시도이다.
도 6a는 도 4의 단계(S450)와 연관된 것으로, 얼굴의 면적을 열굴인식 좌표(얼굴 윤곽선 좌표)를 기반으로 산출한 후, 산출된 면적이 큰 이미지를 선별하는 것을 나타내고 있다.
도 6b를 참조하면, 장치는 도 4의 단계(S470)와 관련하여, Roll 정보, Tilt 정보 및 Pan 정보를 추출할 수 있고, 얼굴좌우 방향성, 고개 상하기울기 및 목돌림 정도를 분석하여 기준값 내에 포함된 이미지만을 선택한다.
도 6c를 참조하면, 장치는 입력된 이미지들(610-1~610-4) 중에서 위와 같은 선택관련 기준을 통과한 이미지들(610-1, 610-3, 610-4)만을 홍보이미지로 활용한다. 이미지(610-2)는 모델의 얼굴 내 모든 구성요소가 이미지 내에 존재하지 못하였기에 통과하지 못한다. 이렇게 통과하지 못한 이미지(610-2)는 폐기된다.
도 7은 본 발명의 일 실시예에 따른 배너디자인 생성 방법의 텍스트 위치결정과정을 구체적으로 나타낸 상세흐름도이다.
도 7을 참조하면, 장치는 도 4의 과정을 거쳐 선별된 홍보이미지를 획득한다(S710). 그리고는, 획득된 홍보이미지의 사이즈를 추출한다(S720). 그리고는, 이미지의 사이즈(예컨대, 이미지의 폭(width))가 600px보다 큰지 여부를 판단한다(S730). 600px보다 큰 경우, 24 그리드(grid)의 격자시스템을 적용한다(S740). 그렇지 않은 경우, 12 그리드의 격자시스템을 적용할 수 있다(S745). 격자시스템은 격자단위를 규정하기 위한 기준선 그리드(baseline grid) 및 기준선 그리드의 집합으로 일정영역을 갖는 컨트롤포인트(control point)를 기반으로 정의되는 시스템으로, 이와 관련하여서는, 이하 도 14 내지 도 23을 통해 보다 상세히 설명한다.
도 8a 내지 도 8b는 텍스트 사이즈에 따라 결정되는 격자 관련 모드의 예를 나타낸 예시도이다.
도 8a를 참조하면, 장치는 이미지 사이즈, 즉, 이미지의 폭이 600px이 안되는 경우에는, 가로로 12개의 격자(하나의 격자는 10px X 10px일 수 있음)를 갖는 제 1 모드의 격자시스템을 적용할 수 있다.
도 8b를 참조하면, 장치는 이미지의 폭이 600px이 초과되는 경우, 가로로 24개의 격자를 갖는 제 2 모드의 격자시스템을 적용할 수 있다. 즉, 이미지의 폭(또는 높이)의 크기를 픽셀단위로 확인하여 기준값과 비교하고, 비교결과에 따라 대응되는 격자시스템을 결정하는 것이 바람직할 수 있다.
다시 도 7로 돌아가서, 해당 이미지에 적용될 격자시스템이 결정되면, 장치는 해당 격자시스템에 맞춰 눈위치 정보를 추출한다(S750). 장치는 눈을 트랙킹하는 알고리즘을 이용하여 수행되며, 결과로 좌측 눈의 좌표(LEFT_EYE)와 우측 눈의 좌표(RIGHT_EYE)를 획득한다.
그리고는, 장치는 획득된 좌표 값을 격자시스템의 중앙기준면과 대비한다(S750). 중앙기준면과 대비하여 어느 방면에 위치하는지 판단하여(S760), 좌측에 위치하는 경우, 텍스트의 삽입 위치를 우측으로 결정하고(S770), 중앙에 위치하는 경우, 텍스트의 삽입 위치를 중앙으로 결정하며(S772), 우측에 위치하는 경우, 텍스트의 삽입 위치를 좌측으로 결정할 수 있다(S774).
도 8c 내지 도 8e는 사용자의 눈 위치 정보를 기반으로 텍스트의 위치를 결정하는 과정을 예시적으로 나타낸 위한 예시도이다.
도 8c를 참조하면, 장치는 24 그리드의 격자시스템에서 중심부에 위치한 5개 행에 포함된 격자들을 이미지의 중앙기준면으로 설정한다. 그리고는, 눈의 위치와 연관된 좌표가 중앙기준면과 관련하여 상대적으로 어디에 위치하는지 판단한다. 도 8c의 실시예에서는, 중앙 부분에 상부에 배치되는 것으로 판단될 수 있다. 이에, 장치는 텍스트를 중앙부분에 배치되도록 결정하되, 얼굴 부분이 존재하지 않는 영역, 즉, 중앙부분의 하부영역에 텍스트가 배치되도록 할 수 있다. 이때, 눈의 위치, 즉, 양 눈의 중심 부분에 텍스트의 중심을 맞춰 텍스트가 배치되는 것이 바람직하다.
도 8d를 참조하면, 24 그리드의 격자시스템에서, 모델의 눈이 중앙기준면으로부터 좌측에 존재한다. 이에, 장치는 텍스트가 우측에 배치되도록 결정하되, 이미지 내의 객체(본 실시예에서는, 모델의 팔 부분)와의 관계를 고려하여 가로 및 세로 배치를 적절히 고려하는 것이 바람직하다. 이때, 중앙기준면을 제외한 우측면의 최외곽 라인에는 마진을 두어 그곳에 텍스트가 배치되지 않도록 하는 것이 좋다. 텍스트가 이미지의 한 방향으로 너무 쏠리면 가독성이 좋지 않기 때문이다.
도 8e를 참조하면, 모델의 눈이 중앙기준면 기준으로 우측에 존재하는 경우, 장치는 텍스트가 좌측에 배치되도록 결정하되, 앞서 설명한 바와 같이, 이미지 내의 객체와의 관계를 고려하여 이미지의 좌측 영역 중, 가로 및 세로 배치를 적절히 고려하는 것이 바람직하다.
본 발명의 다른 실시예에 따르면, 중앙기준면에 일부 걸쳐서 모델의 눈이 존재하는 경우, 중앙기준면에 어느정도 걸치는지를 기반으로 눈의 배치면을 판단할 수 있다. 예컨대, 중앙기준면에 양 눈 사이의 폭 중 60%가 걸쳐있으면, 중앙부분에 존재하는 것으로 판단할 수 있고, 40%가 걸쳐있으면, 중앙기준면이 아닌 우측 또는 좌측면에 눈이 존재하는 것으로 판단하고 처리할 수 있다. 경우에 따라, 위와 같이 눈의 배치가 중앙기준면 대비 모호한 경우(즉, 거의 비슷하게 양 영역에 걸쳐있는 경우), 모델을 전체적으로, 좌측 또는 우측으로 쉬프트 시켜, 한쪽 측면(예컨대, 이미지의 좌측 또는 우측, 또는 정중앙)에 명확히 위치하도록 한 후, 텍스트의 삽입 위치를 결정하는 것도 고려할 수 있다.
도 9는 본 발명의 일 실시예에 따른 배너디자인 생성 방법의 텍스트의 속성값을 매칭하는 과정을 구체적으로 나타낸 상세흐름도이다.
도 9를 참조하면, 장치는 도 4의 과정에 따라 선별된 홍보이미지를 획득하여(S910), 획득된 홍보이미지를 분석한다. 이때, 홍보이미지의 감정정보를 추출한다(S920). 본 발명의 실시예에 따르면, 이미지로부터 획득가능한 감정정보는 모델의 표정, 행동, 및/또는 이미지 전체 또는 일부의 컬러로부터 획득될 수 있다. 기본적으로, 앞서 도 7의 과정에서 획득되는 얼굴인식 데이터를 기준으로 감정을 추출할 수 있다. 이는, 크게, 분노(anger), 경멸(contempt), 혐오(disgust), 무서움(fear), 행복(happiness), 무표정(neutral), 슬픔(sadness), 놀람(surprise)의 감정팩터로 구분될 수 있다. 각 이미지는 이러한 8가지 감정팩터 중 적어도 일부에 대한 점수를 가질 수 있다. 점수는 0~1.0까지 주어질 수 있다. 이러한 감정팩터를 추출하는 감정정보 추출 알고리즘은 이미지 내의 객체 또는 컬러와 그에 따른 감정점수 값을 매칭하여 기계학습함으로써 진화될 수 있다. 예컨대, (객체 관련 정보, 각 감정팩터에 대한 감정점수)를 학습용 데이터로 생성하여 딥러닝 모델에 입력함으로써 학습될 수 있다. 장치는 이렇게 획득된 감정점수에 대응되는 텍스트 속성값을 미리 저장하고 있을 수 있다. 예컨대, 글꼴의 1차 분류와 감정데이터를 매칭할 수 있다. 이를 위해, 적어도 하나의 감정팩터가 상하좌우 중 한 방향에 배치되도록 하여 생성된, 정다각형 형태의 감정매트릭스가 이용될 수 있다.
본 발명의 실시예에 따르면, 상기 8가지 감정팩터 중 가장높게 드러난 감정팩터를 해당 이미지의 감정으로 정의하는 제 1 모드, 8가지 감정팩터를 조합하여 종합적으로 고려된 감정수치를 산출하는 제 2 모드가 사용될 수 있다. 감정수치 산출 결과, 감정수치가 0.5 이하의 경우는 감정을 포함하지 않는 것으로 간주할 수 있다. 여기서, 복수 개 감정팩터에 대한 감정수치가 동일할 경우, 스마일 수치(smile)로 감정을 구분할 수 있다.
그리고는, 추출된 감정정보를 이용하여 그에 대응하는 텍스트의 스타일(text style)을 결정한다(S925). 스타일은 기본적으로 세리프(Serifs)와 산세리프(Sans Serif)의 스타일로 구분될 수 있다. 산세리프는 가로/세로의 획의 시작부터 끝까지 굵기가 변하지 않는 스타일이다. 세리프는 글자 획의 끝에 장식용 삐침(Serif)이 달려있는 스타일이다. 즉, 특정 감정팩터에 따른 감정수치와 텍스트의 스타일은 미리 매칭되어 있을 수 있다. 예컨대, 행복 및 놀라움의 감정팩터가 0.5 이상으로 해당 이미지의 감정으로 결정된 경우, "세리프"로, 슬픔 및 무표정이 우세한 경우, "산세리프"로 스타일을 결정할 수 있다.
추가적으로, 본 발명의 일 실시예에 있어서, 장치는 텍스트의 기본 스타일(세리프, 산세리프)와 감정 데이터(예컨대, 행복, 슬픔, 무표정, 놀라움 등)의 매칭결과에 형용사 이미지 스케일 데이터를 2차 매칭하여 이미지 모델의 감정과 색상에 반응하여 텍스트의 폰트가 적용되도록 매칭할 수 있다. 즉, 세리프 내에도 복수 개의 폰트가 존재할 수 있는데, 이때, 이미지 스케일의 형용사 그룹에 상기 복수 개의 폰트가 배정되어, 이미지에 대응되는 형용사(예컨대, 귀여운, 깔끔한, 세련된, ... 등)에 포함된 폰트들로 텍스트의 스타일 및 폰트를 결정할 수 있다.
다음으로, 텍스트 스타일이 결정되면, 이미지의 복잡도 정보를 추출하여(S930), 이에 대응하는 텍스트의 굵기 속성값을 매칭한다(S935). 이미지의 복잡도가 높을수록 가독성이 높은 텍스트가 사용되어야 하므로, 복잡도가 높은 경우, 굵은 글씨가 적용되도록 하고, 복잡도가 낮으면 얇은 글씨가 적용되도록 할 수 있다. 즉, 복잡도를 상/중/하로 나누어, "상"인 경우, "Bold체"로, "중"인 경우, "Regular 글씨체"로, "하"인 경우, "얇은 글씨체"가 적용되도록 매칭한다.
본 발명의 실시예에 따르면, 복잡도를 이용하여 텍스트의 폰트를 결정할 수 있다. 예컨대, 이미지의 복잡도가 높으면 가독성이 높은 폰트를, 이미지의 복잡도가 낮은 경우, 판독성이 높은 폰트를 사용하도록 제어할 수 있다. 가독성은 텍스트가 얼마나 쉽게 읽히는가의 정도를 나타내고, 판독성은 글꼴의 형태를 식별하고 인지하는 과정에서 얼마나 눈에 잘 띄는지의 정도를 나타낸다.
복잡도의 산출방법과 관련하여, 장치는 해당 이미지에 포함된 객체들과 연관된 태그(예컨대, 관련단어)를 추출하여, 추출된 태그의 개수를 기반으로 복잡도를 산출한다. 예컨대, 하나의 이미지 내에, 비행기, 구름, 건물, 사람, 핸드폰, 머리, 목, 팔, 다리 등 많은 관련 객체와 관련된 태그(색상, 형용사도 포함 가능)가 존재하는 경우, 복잡도가 높아진다. 이는 복잡도 추출 알고리즘을 통해 이루어질 수 있다. 이외에도, 이미지에 포함된 텍스트 존재 여부 관련 값, 이미지에 포함된 객체들의 수 등도 복잡도 산출 팩터로써 고려될 수 있다.
복잡도가 26-30인 경우, "상"으로, 15-25는 "중"으로, 14 이하는 "하"로 구분할 수 있다. 점수 구분 기준은 사용자의 설정에 따라 달라질 수 있다. 그리고는, 앞서 결정된 텍스트 스타일에 포함되는 다수의 폰트 중, 각 구분된 복잡도에 대응되는 폰트를 해당 텍스트에 적용할 폰트로 결정할 수 있다.
복잡도 산출 이후, 이미지의 주색상 정보를 추출하여(S940), 그에 대응하는 텍스트 글꼴 속성값을 매칭한다(S945). 장치는, 이미지 분석부(미도시)의 컬러스펙트럼 데이터 추출 컬러 분포도에서 차지하는 컬러 비율 계산을 통해 이미지에 배치된 주색을 추출한다. 그리고는, 추출된 주색은 이미지 감성과 매칭하여 텍스트의 컬러와 타입을 결정하는데 활용될 수 있다. 이때, 이미지의 주색은 배너디자인의 메인색상으로 활용하는 것이 바람직할 수 있다. 즉, 컬러는 글꼴 속성값과 직접 매칭될 수도 있지만, 컬러이론을 바탕으로 한 이미지 감성을 추출하는데 사용되어, 감성과 태그복잡도에 녹아들어 간접적으로 글꼴을 선정하는데 사용될 수 있다.
다음으로, 장치는 이미지의 명도 정보를 추출하여(S950), 텍스트의 색상 속성값과 매칭한다(S955). 명도는 색의 밝고 어두운 정도를 나타낸다. 이러한 명도는 텍스트의 색상에 영향을 미칠 수 있다. 따라서, 장치는 기저장된 이미지 명도값에 대응되는 텍스트 색상 속성값 테이블을 기반으로 텍스트의 색상을 결정할 수 있다. 명도가 높으면 이미지가 밝은 상태인 것이므로, 텍스트의 색상은 그에 대응되는 어두운 계열의 색이 적합할 수 있다. 명도가 낮은 경우, 이미지가 어두운 것이므로, 텍스트는 눈에 띄는 색상(예컨대, 붉은 색)을 사용하는 것이 바람직하다.
그리고는, 장치는 이미지의 보색 정보를 추출하여(S960), 텍스트 강조색 속성값에 매칭할 수 있다(S965). 장치는 이미지 분석부에서의 주색컬러 코드값(Hex 코드, RGB 수치 및 퍼센트를 포함하는 정보)의 데이터를 기반으로 보색 정보를 획득가능하며, 보색 정보를 이용하여, 배너 화면에서 강조하고자 하는 요소나 이와 상호작용되는 요소에 활용될 수 있다. 보색은 주색데이터를 기준으로, │(주색의 H값 + 180°) - 360°│를 통해 산출된다. 이러한 보색정보를 이용하여 텍스트의 강조영역의 컬러를 결정할 수 있다. 특히, 해당이미지의 배경색상이 주색이라면, 텍스트의 강조 부분을 흰색이나 검정색으로 만들어 강조가 될 수 있도록 한다. 텍스트의 강조부분은 형태소 분석 및 의미분석을 통해 추출될 수 있다.
이외에, 컬러스펙트럼을 활용하는 방안에 있어서, 유사색을 이용하여 주색을 사용한 영역을 중심으로 연관된 내용이나 정보를 나타낼 수 있다. 예컨대, 배너디자인의 메인/서브컬러로 대비하여 사용할 수 있다. 또한, 보색근접색(split complementary color)을 이용하여 보색과의 조합이 되도록 할 수 있고, 보색이 활용되는 부분에 컬러매치가 되도록 할 수 있다. 음영색조와 관련하여, 배경과 텍스트 간의 가독성 확보를 위해, 컬러 간의 기준대비값을 중심으로 백그라운드와 텍스트의 음영 컬러를 결정할 수 있다. 음영색변형은 주색에서 흰색/검정/회색을 첨가해가는 컬러스펙트럼으로, 주색을 기준으로 색상을 변경하지 않고 다양한 수준의 밝기를 생성하는데 사용될 수 있다. 특히, 배경색상으로 활용시에 텍스트 컬러와의 색상대비를 높여야 할 경우, 설정된 값을 사용할 수 있다. 대체가능한 강조색은 어두운 음영과 밝은 색조의 조합을 고려할 수 있다.
음영색 그라데이션(gradient)은 이미지 위의 텍스트를 보호하기 위해 텍스트 영역에 그라디언트 효과를 주어 텍스트의 가독성을 확보하는데 사용된다. 예컨대, 음영색조의 기준값을 예시로, 배경과 텍스트 간의 대비값의 기준점을 정하여 텍스트 영역에 주색을 기준으로 그라디언트 효과를 주어 텍스트의 가독성을 확보할 수 있다. 이때, 그라디언트의 짙은 끝은 상황에 따른 불투명도 값이, 그라디언트의 중심점은 짙은 끝에 더 가까운 3/10 위치로 정의하고, 그라디언트의 끝은 불투명도 0이 배치되도록 정의할 수 있다.
도 10a 내지 도 10b는 홍보이미지로부터 획득된 정보와 텍스트의 속성값을 매칭하는 과정을 설명하기 위한 예시도이다.
도 10a를 참조하면, 장치는 이미지로부터 추출된 정보로부터 그에 대응되는 텍스트 스타일을 매칭할 수 있다. 추출된 정보에서는 무표정(neutral)이 0.619로 가장 높으면서, 0.5보다 높은 감정수치를 나타내고 있기에, 해당 이미지의 감정은 무표정으로 정의할 수 있고, 이경우, 무표정에 대응되는 산세리프로 텍스트의 스타일을 정의할 수 있다.
도 10b를 참조하면, 장치는 이미지로부터 다양한 태그 정보를 추출할 수 있다. 도 10b의 실시예에 따르면, 장치는 "outdoor", "persoon", "wearing" 등 약 30개의 태그 정보를 추출할 수 있고, 이는 30개를 넘는 개수이므로, 복잡도가 "상"이라고 판단할 수 있다. 이 경우, 복잡도 "상"에 대응되는 Bold 체를 텍스트의 굵기 속성값으로 결정할 수 있다.
도 11은 본 발명의 일 실시예에 따른 배너디자인 생성 방법에서 감성어휘와 이미지 색상을 매칭하기 위한 매칭도이다.
도 11을 참조하면, 앞서 설명한 바와 같이, 장치는 이미지의 감정정보에 따라, 1단계로 산세리프와 세리프의 두 가지 스타일에 대한 매칭을 수행하고, 2단계로 형용사적 이미지 스케일에 매칭을 수행할 수 있다. 이때, 2단계 감정정보에는 이미지의 컬러분포도가 활용될 수 있다.
2단계 형용사적 이미지 스케일에 대한 매칭에는 도 11의 컬러스펙트럼과 이미지 스케일의 매칭시스템이 활용될 수 있다. 이미지 스케일은 복수 개의 깊이로 형용사를 분류해 높고 있다. 1depth는 "부드러운", "정적인/차가운", "동적인/따뜻한", "딱딱한"으로 분류될 수 있고, 그 안에, 2depth로 "귀여운", "깔끔한", "안정된", "자연적인" 등이 분류될 수 있다. 1depth와 2depth는 서로 연관관계를 가지고 있다. 예컨대, "부드러운"의 1depth에는 "귀여운", "깔끔한", "자연적인"이 포함될 수 있고, "딱딱한"의 1depth에는 "무거운", "세련된", "고급스러운" 등이 포함될 수 있다. 이와 같이, 감성의 깊이관계에 따라 좋더 깊은 감정정보까지 추출하면, 장치는 해당 깊이의 감정정보에 대응되는 폰트들 중 하나로 텍스트의 폰트를 결정한다.
도 12는 본 발명의 일 실시예에 따른 배너디자인 생성 방법에서 이미지로부터 추출된 감정정보와 복잡도 정보를 기반으로 텍스트의 속성값을 매칭한 결과를 예시적으로 나타낸 표이다.
도 12를 참조하면, 장치는 이미지에서, 얼굴인식 데이터 추출 알고리즘을 사용하여 감정데이터를 추출한다. 본 실시예에서는, "행복(happiness)"이 0.992로 가장 높기에, "행복"을 해당 이미지의 감정이라고 판단할 수 있다. 복잡도는 이미지 분석 태그 데이터 추출 알고리즘을 통해 추출하고, 여기서, 해당 이미지는 태그가 17개로 복잡도는 "중"으로 판단할 수 있다.
이에, 도 12의 실시예에서, 장치는 행복에 대응되는 세리프(Serif)를 텍스트의 스타일로 결정하고, 복잡도 "중"은 판독성이 높은 폰트에 대응되므로, 판독성이 높은 폰트를 텍스트의 폰트로 결정할 수 있다. 또한, 텍스트의 굵기는 복잡도 "중"에 대응될 수 있도록 "Regular"로 결정할 수 있다.
도 13은 본 발명의 일 실시예에 따른 배너디자인 생성 방법을 통해 최초 입력이미지로부터 이미지/텍스트 병합 과정을 거쳐 최종결과물을 도출하는 전과정을 개념적으로 나타낸 개념도이다.
도 13을 참조하면, 배너디자인 생성장치는 작업을 위한 원본이미지(1310) 및 텍스트 정보를 수신할 수 있다. 그리고는, 해당 이미지의 모델과 관련된 정보를 기반으로 홍보용으로의 사용가능성을 판단하고, 사용가능하다고 판단되면, 이미지의 눈위치 정보를 추출한다. 그리고는, 추출된 눈 위치정보를 중앙기준면과 대비하여 텍스트가 배치될 위치를 결정한다. 그리고는, 이미지에서 풍기는 감정정보를 1차적으로 모델의 얼굴의 표정을 기반으로 추출할 수 있다. 그리고는, 해당 감정에 대응되는 텍스트 스타일 정보를 매칭하여 텍스트의 스타일을 결정한다(예컨대, 산세리프). 그리고는 이미지의 복잡도 정보를 추출하여, 그에 대응되는 텍스트 굵기값으로 텍스트의 굵기를 결정한다.
또한, 장치는 이미지의 컬러정보(예컨대, 주색상 정보)를 통해 2차적인 감정정보를 획득할 수 있다. 이때, 2차적인 감정정보(이는 형용사적 이미지 스케일을 활용하여 형용사적 감정정보에 대응)를 획득가능하고, 이를 복잡도 정보와 조합하여 텍스트의 글꼴을 결정할 수 있다. 추가적으로, 이미지의 명도정보를 기반으로 텍스트의 기본색상값을 결정할 수 있고, 이미지의 주색상에 대응하는 보색을 컬러스펙트럼에서 추출하여 텍스트의 강조색을 결정할 수 있다.
그리고는, 각각의 결정된 텍스트의 속성값을 기반으로 텍스트를 변환하고, 변환된 텍스트를 입력된 홍보이미지(1310)에 삽입함으로써, 배너디자인(1320)을 완성할 수 있다.
격자시스템 및 레이아웃 결정
도 14는 본 발명의 일 실시예에 따른 배너디자인 생성 방법에서 격자시스템 및/또는 피보나치 수열 기반의 비율을 사용하여 배너디자인 레이아웃을 결정하고, 결정된 레이아웃에 따라 배너디자인을 생성하는 과정을 나타낸 흐름도이다.
도 14를 참조하면, 장치는 이미지 및 텍스트를 입력받을 수 있다(S1410). 그리고는, 홍보용으로 사용가능한 이미지를 선별하고(S1420), 격자시스템과 피보나치 수열 기반의 황금비율을 고려하여 레이아웃을 결정할 수 있다. 피보나치 수열 기반의 비율을 고려한 레이아웃은 앞의 두 수의 합이 바로 뒤의 수가 되는 수의 배열을 나타내는 피보나치 수열의 개념이 결합된 형태의 레이아웃이다. 이는 1:1.618의 황금비율을 고려하여 가로 및 세로 중 적어도 한 방향에서 1:1.618의 황금비율을 고려한다. 이때, 반드시 1:1.618로 정확히 그 비율이 맞아야 하는 것은 아니고, 1:1.6 내지 1:1.7 정도로 비율을 맞추는 것도 그 취지를 지향한다는 점에서 바람직할 수있다. 그리고는, 결정된 레이아웃에 따라 홍보이미지 및 텍스트를 삽입하여 배너디자인을 생성한다(S1440).
본 발명의 일 실시예에 따르면, 장치에서 사용되는 격자시스템과 관련하여, 장치는 각기 다른 화면에서 공간을 조정하는 중단점(breakpoint)과 기준선 그리드 기반의 컨트롤포인트(control point)를 기반으로 배너디자인을 생성한다. 컨트롤포인트는 격자 시스템을 제어하는 기준이 되는 포인트로, 서로 다른 모드의 격자시스템에서 동일한 수로 존재할 수 있다. 장치가 사용할 수 있는 웹 그리드는 디자인의 레이아웃 사이에 시각적 일관성을 만들 수 있고, 이때, 그리드의 수는 중단점 체계에 따라 달라질 수 있다.
도 15는 본 발명의 일 실시예에 따른 배너디자인 생성 방법에서 사용되는 격자시스템의 중단점(breakpoint)을 나타낸 도면이다.
도 15를 참조하면, 장치는 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 그리드의 여백을 두는 것이 바람직하다.
도 16은 본 발명의 일 실시예에 따른 배너디자인 생성 방법에서 사용되는 격자시스템의 단일 격자, 단일 컨트롤 포인트(control point)를 설명하기 위한 개념도이다.
도 16을 참조하면, 모듈 그리드는 상기 웹 그리드의 하위개념으로, 1200px을 기준으로 하였을시 1G는 10px X 10px의 크기를 가질 수 있다. 이는 가로 및 세로 사이즈에 따라 가변적일 수 있다. 10X10도 가능하지만, 세로 사이즈가 큰 디바이스에서는, 8X12도 가능하다.
하나의 화면에서, 컨트롤포인트의 갯수는 일정하게 규정될 수 있다. 하나의 컨트롤포인트는 5G의 폭과 3G(여기서, G는 격자를 나타냄)의 높이를 가질 수 있다. 기본적으로 가변적인 크기를 가질 수 있는 격자 배열에 그 갯수가 고정된 형태의 컨트롤포인트를 올려놓으면, 기본적인 격자시스템이 생성된다.
본 발명의 일 실시예에 따르면, 가장 기본적인 격자 시스템으로, 전체 화면은 120G*74G로 구성되고, 10px X 10px이 하나의 격자를 구성하는 시스템이 사용될 수 있다.
도 17은 1200 격자 모드에서, 캔버스 상에 컨트롤 포인트를 나타낸 도면이다.
도 17을 참조하면, 장치는 캔버스 상에 기설정된 개수의 컨트롤 포인트가 존재하도록 격자시스템을 생성할 수 있다. 여기서, 캔버스는 224개의 컨트롤 포인트가 존재하도록 컨트롤포인트를 배열할 수 있다. 하나의 컨트롤포인트는 5G x 3G이고, 각 컨트롤포인트 간에는 가로 및 세로방향으로 2G의 여백이 존재하도록 한다.
도 18은 120 x 74 격자 모드에서, 컨트롤 센터(중앙기준면)와 컴포넌트 영역을 나타낸 도면이다.
도 18을 참조하면, 컴포넌트 영역은 이미지 및/또는 텍스트가 배치되는 영역을 의미할 수 있다. 본 발명의 실시예에 따르면, 1200px X 740px에 120G X 74G의 격자모드가 적용될 수 있고, 이때, 컨트롤포인트는 앞서 설명한 바와 같이, 가로 16개, 세로 14개로 224개가 배치될 수 있다. 이때, 중앙기준면은 중앙의 4개 열의 컨트롤포인트가 존재하는 영역이 되고, 이미지 및/또는 텍스트가 배치되는 컴포넌트 영역은 최외곽 컨트롤포인트를 마진으로 배제하고, 중앙기준면을 제외한 영역이 되는 것이 바람직하다. 이때, 컴포넌트 영역은 중앙면에 하나, 및 좌우측에 하나씩 두 개(총 3개)가 존재할 수 있고, 이때, 좌측 및/또는 우측 컴포넌트 영역은 최외곽 컨트롤포인트를 제외하고, 그 내부에 위치한 가로 5개 및 세로 12개의 컨트롤포인트가 정의하는 영역이 될 수 있다.
도 19a 내지 도 19c는 가로방향에서, 디바이스 중단점에 따라 서로 다른 격자 크기를 갖는 특징을 설명하기 위한 개념도이다.
도 19a를 참조하면, 본 발명의 일 실시예에 따른 격자시스템에서, 하나의 격자의 가로크기는 "컨트롤 중단점/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 최소 단위
디바이스의 중단점에 따라 픽셀 사이즈가 변환될 수 있다. 도 19a의 실시예에 따르면, 1100을 기준으로 1100~1200px의 구간에서는 100px을 가변수치로 두고, 가로 10px의 격자를 기본으로 하는 격자시스템이 도입되는 것을 규정하고 있다(도 19b 참조). 다만, 1099px의 경우, 9px을 기본으로 하는 격자시스템이 도입되는 것이 바람직할 수 있다(도 19c 참조).
이와 같이, 컨트롤 중단점에 의해 기본적인 격자시스템이 정의되는 것과 더불어, 디바이스 중단점을 기반으로 적용되는 격자시스템이 달라질 수 있다.
이때, 가로 1200px 기준 120개의 격자가 존재하는 것을 기본으로 중단점 전후로 격자의 갯수는 가변가능하다. 다만, 이때에도, 앞서 설명한 바와 같이, 컨트롤포인트의 갯수에는 변함이 없다. 즉, 컨트롤포인트의 갯수는 고정, 격자의 갯수만 가변되도록 한다. 또한, 1201px 이상시에는 1200px의 그리드를 유지하고, 1200px 기반의 그리드에서 여백 영역을 확장하는 형태로 격자시스템이 운영될 수 있다.
더욱이, 해당 중단점에 소속된 후, 전체 컨트롤포인트의 영역을 가운데 정렬하고, 홀수로 떨어질 경우, 나머지 픽셀값은 우측 여백으로 처리하는 것이 바람직하다.
도 20은 세로방향에서의 디바이스 중단점을 나타낸 도면이다.
세로방향에서의 격자 크기는, 도 19의 가로방향에서의 격자크기 계산과 다르게, "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 최소단위
도 20을 참조하면, 680px이 디바이스 중단점이 되므로, 680~740px의 높이를 갖는 디바이스는 74G 모드에서 하나의 격자의 높이가 10px이 된다. 하지만, 679px의 높이를 갖는 디바이스에서는, 74G 모드에서 하나의 격자의 높이가 9px인 형태로 격자 크기가 더 작아진 격자시스템을 적용하는 것이 바람직하다. 다시 말해, 컨트롤 포인트의 가변높이값에 따라, 장치는 중단점 전후로 그리드 갯수가 가변된다. 또한, 가변된 격자의 크기에 따라 컨트롤포인트의 높이 역시 가변될 수 있다. 또한, 해당중단점에 소속된 후, 전체 컨트롤포인트 영역을 중앙 정렬하고, 홀수로 떨어질 경우, 나머지 픽셀값은 하부(bottom) 여백으로 처리하여 이미지는 영향을 받지 않도록 하는 것이 바람직하다.
도 21은 격자시스템에 피보나치 수열 기반의 비율이 결합된 형태의 레이아웃 구성을 나타낸 도면이다.
도 21을 참조하면, 장치는 기본 그리드 시스템으로 정의된 120G x 74G 시스템과 앞의 두 수의 합이 바로 뒤의 수가 되는 피보나치 수열의 개념이 결합된 형태의 레이아웃을 활용한다. 즉, 레이아웃에 대해 균형의 원리와 비율의 원리가 적용된 형태이다.
장치는, 캔버스(배너디자인을 올려놓을 수 있는 물리적 공감: 디바이스의 디스플레이 화면)를 구성한 후, 캔버스 내에 격자 시스템을 적용한다. 이때, 디바이스 종단점을 고려하여 그에 대응하는 격자시스템 및 격자의 크기를 결정하는 것이 바람직하다.
그리고는, 적용된 격자시스템에 피보나치 수열 기반의 황금비율을 고려하여 각 섹션을 분할한다. 이때, 섹션의 분할 및 분할형태는 선별된 홍보이미지의 수를 고려하여 결정될 수 있다. 예컨대, 선별된 홍보이미지가 2개인 경우, 2분할 레이아웃이, 3개인 경우, 3분할 레이아웃이 사용될 수 있다. 레이아웃은 개별 이미지가 적용되는 섹션들의 배열을 정의하고 있고, 정의된 섹션들은 가로방향 및 세로방향 중 적어도 한 방향에 대해 피보나치 수열 기반의 황금비율이 적용될 수 있다.
또한, 섹션이 분할되고 난 후, 하나의 섹션은 복수 개의 서브섹션으로 분할될 수 있고, 분할된 서브섹션에 개별이미지가 독립적으로 삽입될 수 있는데, 서브섹션의 분할에도 가로 및/또는 세로 방향에 대해 피보나치 수열 기반의 비율, 즉, 1:1.618이 적용될 수 있다. 경우에 따라서는, 1:1의 비율도 적용될 수 있다.
도 22는 가로 방향의 2분할 레이아웃과 가로방향의 3분할 레이아웃을 나타낸 예시도이다.
도 22를 참조하면, 장치는 피보나치 수열 기반의 황금비율에 따라 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 섹션). 각 섹션의 가로 및 세로 방향에서의 그리드 수의 비율은 황금비율을 나타낼 수 있다. 예컨대, 도 22의 상단 좌측의 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의 비율을 유지한다.
도 23은 도 22의 2분할 레이아웃과 3분할 레이아웃에 홍보이미지 및 텍스트를 삽입하여 완성한 배너디자인의 예시적인 모습을 나타낸 예시도이다.
도 23과 같이, 결정된 분할 레이아웃에 각 섹션 또는 서브섹션에 개별이미지가 삽입되고, 텍스트도 삽입될 수 있다.
이때, 텍스트의 삽입은 개별이미지 상에 삽입된 후에 이미지와 함께 삽입될 수도 있고, 이미지의 삽입이 완료된 후, 독립적으로 텍스트가 삽입되어, 복수 개의 이미지 상에 걸쳐 있는 형태로 텍스트가 삽입될 수도 있다. 이는, 사용자 설정에 따라 다양한 방식으로 고려될 수 있고, 이 경우, 캔버스에 적용된 격자시스템의 중앙기준면과 복수의 이미지 내의 복수의 모델의 눈 위치 정보 등을 고려하여 텍스트가 이미지를 초월하여 삽입될 수 있도록 제어할 수 있다.
도 24는 본 발명의 일 실시예에 따른 배너디자인 생성 방법의 분할 레이아웃 섹션 사이즈 결정에 따른 배너디자인 삽입과정을 구체적으로 나타낸 상세흐름도이다.
도 24를 참조하면, 장치는 캔버스를 생성한다(S2410). 그리고는, 캔버스(디바이스의 화면크기에 비례)의 크기 정보를 추출한다. 그리고는, 장치는 분할 수와 형태에 맞는 섹션을 결정하여 분할레이아웃을 결정한다(S2420). 이는, 기설정된 레이아웃이 존재할 수도 있고, 그렇지 않은 경우, 선별된 이미지의 수에 따라 적응적으로 분할레이아웃에 포함된 섹션 수 및 섹션의 배열이 결정될 수 있다.
본 발명의 다른 실시예에 따르면, 다수의 결과물이 나열되는 경우, 홍보의 주제에 따라 기설정된 비율로 대응되는 분할레이아웃의 적용될 수 있다. 예컨대, 할인/세일과 관련된 홍보 주제에 대해 2분할 레이아웃이 적용될 확률은 30%로 설정되어 있을 수 있다. 신상품/시즌과 관련된 홍보주제에 대해서는 2분할 레이아웃의 적용가능성은 60%로 고려되고, 브랜드/카테고리에 대해서는 70%, 사은품/포인트에 대해서는 5%, SNS/회원과 관련하여서는, 5%, 기념일/공식행사와 관련하여서는, 20%, 무료배송의 경우는 5%가 적용되도록 설정되어 있을 수 있다. 또한, 3분할 레이아웃의 제 1 형태(A+C+D)에 대해, 할인/세일의 경우, 50%, 신상품/시즌의 경우, 25%, 브랜드/카테고리 관련 홍보의 경우, 13% 등 각 레이아웃과 홍보주제는 연관성을 가지고, 대응되는 적용가능성이 기설정되어 있을 수 있다. 다른 제 2 형태(B+E+E)는 또 다른 적용가능성이 고려될 수 있다. 홍보주제별 분할레이아웃의 적용가능성의 정도는 사용자 설정을 통해 임의로 변경할 수 있다. 이와같은 방식으로 결정된 분할레이아웃에 속한 섹션들의 배열에는 피보나치 수열 기반의 비율이 고려되어 있을 수 있다.
장치는, 분할레이아웃을 결정하고 나서, 디바이스 중단점에 의한 격자시스템을 호출한다.
그리고는, 앞선 과정에서 추출된 캔버스의 크기정보(가로 및 세로 사이즈)와, 상기 호출된 격자시스템 그리드의 크기정보를 비교한다(S2430). 격자시스템의 가로 사이즈와 캔버스 가로사이즈의 차이를 해당 섹션 가로 기준의 분할수로 나누면 가로 확대/축소와 관련된 수치가 나온다. 나머지 값이 생길 경우, 몫값을 분할된 영역만큼 확대/축소 진행 후, 나머지 값에서 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이 나올 수 있다. 각 섹션의 사이즈가 결정되면, 각 섹션별로 대응되는 개별이미지를 삽입한다(S2450).
섹션별 이미지의 삽입과 관련하여, 장치는 넓은 면적의 섹션에 보다 중요한 이미지를 넣도록 이미지 삽입 순서에 우선순위를 고려한다. 앞선, 홍보이미지의 선별시의 각 선별팩터별 상대적인 점수를 종합적으로 고려할 수 있고, 또는, 특정 홍보주제 및/또는 목적에 부합하는 이미지가 우선적으로 선택되도록 할 수도 있다. 예컨대, 신상품/시즌 관련하여서는, 해당 상품이 포함된 이미지가 우선적으로 선택되어 A 섹션에 삽입되도록 할 수 있다. 그리고, 장치는 객체인식 알고리즘을 통해 이미지 내의 객체들을 추출 및 인식하고, 인식된 객체 중 홍보와 연관된 상품이 이미지에 포함된 경우, 해당 이미지를 우선순위에 놓을 수 있다. 이때, 홍보 관련 상품이 포함된 이미지가 복수 개인 경우, 보다 선명하게, 보다 크게 해당 상품을 개시하고 있는 이미지가 상대적으로 우선권을 가질 수 있다. 상품이 포함되어 있지 않다면, 홍보이미지 선별과 관련된 팩터에 따른 종합점수가 2차적으로 고려될 수 있다.
텍스트의 삽입과 관련하여, 텍스트는 이미지에 먼저 삽입된 형태로 레이아웃에서 구현될 수도 있고, 삽입이미지와 별개로 레이아웃에서 독립적으로 구현될 수 있다. 이때, 입력텍스트의 핵심어와 특정 이미지에서의 객체인식의 결과가 일치할 경우, 일치된 이미지 상에 해당 텍스트를 배열할 수 있다. 이때, 복수 개의 이미지와 입력텍스트의 핵심어의 의미분석 결과가 동일하면, 복수 개 이미지 상에 걸쳐서 텍스트를 표시하도록 할 수 있고, 우선순위가 앞서는 이미지에서만 텍스트가 표시되도록 제어할 수도 있다.
이미지의 삽입 이전에, 이미지와 캔버스의 관계에서, 이미지 사이즈가 캔버스보다 작으면 확대(zoom in)을 하고, 반대로 이미지 사이즈가 캔버스보다 크면 축소(zoom out)를 수행한다. 이때, 이미지 확대에 따른 품질 저해를 방지하기 위해, 이미지 샤프닝 효과를 적용한다. 또한, 좌우 반전을 통해 여백을 해결할 수 있도록 제어할 수 있다. 또한, 이미지의 단면 컬러를 추출하는 것도 고려될 수 있다. 또한, 이미지 분석데이터 중 주색을 활용하여 전체 캔버스의 배경색으로 지정되도록 할 수도 있다.
이상에서 설명된 시스템 또는 장치는 하드웨어 구성요소, 소프트웨어 구성요소, 및/또는 하드웨어 구성요소 및 소프트웨어 구성요소의 조합으로 구현될 수 있다. 예를 들어, 실시예들에서 설명된 시스템, 장치 및 구성요소는, 예를 들어, 프로세서, 콘트롤러, 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 (18)

  1. 배너디자인 생성 장치에서의 쇼핑몰 홍보와 연관된 배너디자인(banner design) 생성 방법에 있어서,
    쇼핑몰의 홍보와 연관된 적어도 하나의 입력이미지 및 텍스트를 입력받는 단계;
    상기 적어도 하나의 입력이미지 중 상기 쇼핑몰의 홍보용으로 사용하기 위한 적어도 하나의 홍보이미지를 선별하는 단계;
    피보나치 수열을 기반으로 하는 비율을 고려하여 상기 배너디자인의 레이아웃을 결정하는 단계;
    상기 결정된 레이아웃에 따라 상기 선별된 적어도 하나의 홍보이미지 및 상기 입력된 텍스트를 배열하여 상기 배너디자인을 생성하는 단계를 포함하되,
    상기 피보나치 수열을 기반으로 하는 비율을 고려하여 상기 배너디자인의 레이아웃을 결정하는 단계는,
    (i) 상기 레이아웃에 포함된 적어도 하나의 섹션 - 섹션은 상기 적어도 하나의 홍보이미지 각각이 독립적으로 배열되는 영역을 의미함 - 의 가로와 세로방향의 비율, 및 (ii) 가로방향 및 세로방향 중 적어도 한 방향에서의 상기 적어도 하나의 섹션 간의 비율 중 적어도 하나가, 피보나치 수열을 기반으로 하는 비율을 갖도록, 상기 배너디자인의 레이아웃을 결정하는 단계를 포함하고,
    상기 섹션의 배열형태와 관련하여, 상기 쇼핑몰의 홍보 주제에 대응되는 비율로 상기 레이아웃이 결정되는 쇼핑몰 홍보와 연관된 배너디자인 생성 방법.
  2. 삭제
  3. 제 1 항에 있어서, 상기 피보나치 수열을 기반으로 하는 비율을 고려하여 상기 배너디자인의 레이아웃을 결정하는 단계는,
    상기 배너디자인이 배열되는 캔버스를 생성하는 단계;
    상기 생성된 캔버스 내에 포함될 섹션의 수와 배열형태를 결정하는 단계, 상기 섹션의 배열형태는 격자시스템에 피보나치 수열에 따른 비율을 적용하여 결정됨;
    상기 격자시스템과 캔버스의 사이즈를 비교하는 단계;
    상기 비교 결과를 기반으로 상기 격자시스템에 따라 각 섹션의 사이즈를 산출하는 단계를 포함하는 쇼핑몰 홍보와 연관된 배너디자인 생성 방법.
  4. 삭제
  5. 제 3 항에 있어서,
    상기 홍보주제는 할인과 관련된 내용, 신상품과 관련된 내용, 브랜드와 관련된 내용, 사은품과 관련된 내용, SNS와 관련된 내용, 기념일과 관련된 내용, 및 무료배송과 관련된 내용 중 적어도 하나로 구분가능하며,
    각각의 홍보주제는 기저장된 복수 개의 분할레이아웃에 대해 서로 다른 적용확률을 갖는 쇼핑몰 홍보와 연관된 배너디자인 생성 방법.
  6. 제 3 항에 있어서,
    상기 레이아웃은 상기 적어도 하나의 홍보이미지의 수를 기반으로 결정되는 쇼핑몰 홍보와 연관된 배너디자인 생성 방법.
  7. 제 3 항에 있어서, 상기 격자시스템과 캔버스의 사이즈를 비교하는 단계는,
    상기 격자시스템의 가로사이즈와 상기 캔버스의 가로사이즈를 비교하는 단계;
    상기 격자시스템의 세로사이즈와 상기 캔버스의 세로사이즈를 비교하는 단계; 및
    상기 가로사이즈의 비교결과 및 상기 세로사이즈의 비교결과를 기반으로, 가로방향 및 세로방향 중 적어도 한 방향에 대해 확대 또는 축소 수치를 결정하는 단계를 포함하는 쇼핑몰 홍보와 연관된 배너디자인 생성 방법.
  8. 제 3 항에 있어서,
    하나의 섹션은 적어도 두 개의 서브섹션으로 분할 가능하며, 가로방향 및 세로방향 중 적어도 한 방향에서의 상기 적어도 두 개의 서브섹션 간의 비율은 1:1의 비율 또는 피보나치 수열에 기반한 비율을 갖는 쇼핑몰 홍보와 연관된 배너디자인 생성 방법.
  9. 제 3 항에 있어서,
    상기 격자시스템이 120 그리드(grid)를 기반으로 하는 경우, 제 1 섹션과 제 2 섹션의 가로 및 세로 방향 중 적어도 한 방향의 비율이 74 그리드 대 46 그리드의 비율을 갖는 쇼핑몰 홍보와 연관된 배너디자인 생성 방법.
  10. 제 3 항에 있어서,
    상기 격자시스템은 하나의 격자 단위를 규정하기 위한 기준선 그리드(baseline grid) 및 상기 기준선 그리드의 집합으로 가로 및 세로 방향으로 일정한 영역을 갖는 컨트롤 포인트(control point)를 기반으로 정의되는 쇼핑몰 홍보와 연관된 배너디자인 생성 방법.
  11. 제 1 항에 있어서, 상기 결정된 레이아웃에 따라 상기 적어도 하나의 홍보이미지 및 상기 입력된 텍스트를 배열하여 상기 배너디자인을 생성하는 단계는,
    상기 적어도 하나의 홍보이미지 각각에 포함된 객체가 홍보주제에 부합하는지 여부를 기반으로 상기 적어도 하나의 홍보이미지에 우선순위를 부여하여 부여된 우선순위에 따라 섹션별로 상기 적어도 하나의 홍보이미지를 배열하는 단계를 포함하는 쇼핑몰 홍보와 연관된 배너디자인 생성 방법.
  12. 쇼핑몰 홍보와 연관된 배너디자인(banner design) 생성 장치에 있어서,
    쇼핑몰의 홍보와 연관된 적어도 하나의 입력이미지 및 텍스트를 입력받는 입력부;
    상기 적어도 하나의 입력이미지 중 상기 쇼핑몰의 홍보용으로 사용하기 위한 적어도 하나의 홍보이미지를 선별하는 이미지 분석부;
    피보나치 수열을 기반으로 하는 비율을 고려하여 상기 배너디자인의 레이아웃을 결정하는 레이아웃 결정부; 및
    상기 결정된 레이아웃에 따라 상기 선별된 적어도 하나의 홍보이미지 및 상기 입력된 텍스트를 배열하여 상기 배너디자인을 생성하는 병합부를 포함하되,
    레이아웃 결정부는,
    (i) 상기 레이아웃에 포함된 적어도 하나의 섹션 - 섹션은 상기 적어도 하나의 홍보이미지 각각이 독립적으로 배열되는 영역을 의미함 - 의 가로와 세로방향의 비율, 및 (ii) 가로방향 및 세로방향 중 적어도 한 방향에서의 상기 적어도 하나의 섹션 간의 비율 중 적어도 하나가, 피보나치 수열을 기반으로 하는 비율을 갖도록, 상기 배너디자인의 레이아웃을 결정하고,
    상기 섹션의 배열형태와 관련하여, 상기 쇼핑몰의 홍보 주제에 대응되는 비율로 상기 레이아웃이 결정되는 쇼핑몰 홍보와 연관된 배너디자인 생성 장치.
  13. 배너디자인 생성 장치에서의 쇼핑몰 홍보와 연관된 배너디자인(banner design) 생성 방법에 있어서,
    쇼핑몰의 홍보와 연관된 적어도 하나의 입력이미지 및 텍스트를 입력받는 단계;
    상기 적어도 하나의 입력이미지 중 상기 쇼핑몰의 홍보용으로 사용하기 위한 적어도 하나의 홍보이미지를 선별하는 단계;
    상기 배너디자인의 레이아웃을 결정하는 단계, 상기 레이아웃은 하나의 격자 단위를 규정하기 위한 기준선 그리드(baseline grid) 및 상기 기준선 그리드의 집합으로 가로 및 세로 방향으로 일정한 영역을 갖는 컨트롤 포인트(control point)를 기반으로 정의되는 격자시스템을 기반으로 생성됨; 및
    상기 결정된 레이아웃에 따라 상기 선별된 적어도 하나의 홍보이미지 및 상기 입력된 텍스트를 배열하여 상기 배너디자인을 생성하는 단계를 포함하되,
    상기 배너디자인의 레이아웃을 결정하는 단계는,
    (i) 상기 레이아웃에 포함된 적어도 하나의 섹션 - 섹션은 상기 적어도 하나의 홍보이미지 각각이 독립적으로 배열되는 영역을 의미함 - 의 가로와 세로방향의 비율, 및 (ii) 가로방향 및 세로방향 중 적어도 한 방향에서의 상기 적어도 하나의 섹션 간의 비율 중 적어도 하나가, 피보나치 수열을 기반으로 하는 비율을 갖도록, 상기 배너디자인의 레이아웃을 결정하는 단계를 포함하고,
    상기 섹션의 배열형태와 관련하여, 상기 쇼핑몰의 홍보 주제에 대응되는 비율로 상기 레이아웃이 결정되는 쇼핑몰 홍보와 연관된 배너디자인 생성 방법.
  14. 제 13 항에 있어서,
    상기 기준선 그리드는 상기 배너디자인이 적용되는 디바이스에 따라 변경되고,
    상기 변경되는 기준선 그리드에 따라 상기 격자시스템의 격자는 가로 및 세로방향으로 가변적인 픽셀값을 가지며,
    상기 컨트롤 포인트는 복수 개의 격자의 집합으로, 상기 컨트롤 포인트의 갯수는 절대적인 쇼핑몰 홍보와 연관된 배너디자인 생성 방법.
  15. 제 14 항에 있어서,
    상기 격자시스템의 격자크기는 가로 및 세로 방향에서 서로 다른 디바이스 중단점(breakpoint)을 기점으로 변경되는 쇼핑몰 홍보와 연관된 배너디자인 생성 방법.
  16. 제 13 항에 있어서,
    (i) 상기 레이아웃에 포함된 적어도 하나의 섹션 - 섹션은 상기 적어도 하나의 홍보이미지 각각이 독립적으로 배열되는 영역을 의미함 - 의 가로와 세로방향의 비율, 및 (ii) 가로방향 및 세로방향 중 적어도 한 방향에서의 상기 적어도 하나의 섹션 간의 비율 중 적어도 하나가, 피보나치 수열을 기반으로 하는 비율을 갖도록, 상기 배너디자인의 레이아웃을 결정하는 쇼핑몰 홍보와 연관된 배너디자인 생성 방법.
  17. 쇼핑몰 홍보와 연관된 배너디자인(banner design) 생성 장치에 있어서,
    쇼핑몰의 홍보와 연관된 적어도 하나의 입력이미지 및 텍스트를 입력받는 입력부;
    상기 적어도 하나의 입력이미지 중 상기 쇼핑몰의 홍보용으로 사용하기 위한 적어도 하나의 홍보이미지를 선별하는 이미지 분석부;
    상기 배너디자인의 레이아웃을 결정하는 레이아웃 결정부, 상기 레이아웃은 하나의 격자 단위를 규정하기 위한 기준선 그리드(baseline grid) 및 상기 기준선 그리드의 집합으로 가로 및 세로 방향으로 일정한 영역을 갖는 컨트롤 포인트(control point)를 기반으로 정의되는 격자시스템을 기반으로 생성됨; 및
    상기 결정된 레이아웃에 따라 상기 선별된 적어도 하나의 홍보이미지 및 상기 입력된 텍스트를 배열하여 상기 배너디자인을 생성하는 배너디자인 생성부를 포함하되,
    상기 레이아웃 결정부는, (i) 상기 레이아웃에 포함된 적어도 하나의 섹션 - 섹션은 상기 적어도 하나의 홍보이미지 각각이 독립적으로 배열되는 영역을 의미함 - 의 가로와 세로방향의 비율, 및 (ii) 가로방향 및 세로방향 중 적어도 한 방향에서의 상기 적어도 하나의 섹션 간의 비율 중 적어도 하나가, 피보나치 수열을 기반으로 하는 비율을 갖도록, 상기 배너디자인의 레이아웃을 결정하고,
    상기 섹션의 배열형태와 관련하여, 상기 쇼핑몰의 홍보 주제에 대응되는 비율로 상기 레이아웃이 결정되는 쇼핑몰 홍보와 연관된 배너디자인 생성 장치.
  18. 쇼핑몰 홍보와 연관된 배너디자인(banner design) 생성 시스템에 있어서,
    쇼핑몰의 홍보와 연관된 적어도 하나의 이미지 및 텍스트를 포함하는 배너디지인 생성 요청을 배너디자인 생성장치로 전송하는 클라이언트 장치; 및
    상기 클라이언트 장치로부터 상기 배너디자인 생성 요청을 수신하고, 상기 배너디자인 생성요청에 포함된, 적어도 하나의 이미지 중 상기 쇼핑몰의 홍보용으로 사용하기 위한 적어도 하나의 홍보이미지를 선별하고, 피보나치 수열을 기반으로 하는 비율을 고려하여 상기 배너디자인의 레이아웃을 결정하며, 상기 결정된 레이아웃에 따라 상기 선별된 적어도 하나의 홍보이미지 및 상기 텍스트를 배열하여 상기 배너디자인을 생성하는 배너디자인 생성 장치를 포함하되,
    상기 배너디자인 생성 장치는, (i) 상기 레이아웃에 포함된 적어도 하나의 섹션 - 섹션은 상기 적어도 하나의 홍보이미지 각각이 독립적으로 배열되는 영역을 의미함 - 의 가로와 세로방향의 비율, 및 (ii) 가로방향 및 세로방향 중 적어도 한 방향에서의 상기 적어도 하나의 섹션 간의 비율 중 적어도 하나가, 피보나치 수열을 기반으로 하는 비율을 갖도록, 상기 배너디자인의 레이아웃을 결정하는 단계를 포함하고,
    상기 섹션의 배열형태와 관련하여, 상기 쇼핑몰의 홍보 주제에 대응되는 비율로 상기 레이아웃이 결정되는 쇼핑몰 홍보와 연관된 배너디자인 생성 시스템.



KR1020180077166A 2018-07-03 2018-07-03 쇼핑몰 배너디자인 생성 방법, 장치 및 시스템 KR102114366B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020180077166A KR102114366B1 (ko) 2018-07-03 2018-07-03 쇼핑몰 배너디자인 생성 방법, 장치 및 시스템

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020180077166A KR102114366B1 (ko) 2018-07-03 2018-07-03 쇼핑몰 배너디자인 생성 방법, 장치 및 시스템

Publications (2)

Publication Number Publication Date
KR20200004114A KR20200004114A (ko) 2020-01-13
KR102114366B1 true KR102114366B1 (ko) 2020-05-22

Family

ID=69153070

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020180077166A KR102114366B1 (ko) 2018-07-03 2018-07-03 쇼핑몰 배너디자인 생성 방법, 장치 및 시스템

Country Status (1)

Country Link
KR (1) KR102114366B1 (ko)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR102622382B1 (ko) * 2020-03-16 2024-01-09 카페24 주식회사 배너 이미지 자동 생성 방법

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2008072446A (ja) * 2006-09-14 2008-03-27 Seiko Epson Corp 文書編集装置、プログラムおよび記憶媒体
KR101546725B1 (ko) * 2015-01-26 2015-08-25 (주)유코아시스템 반응형 레이아웃 설계 방법
KR101638423B1 (ko) * 2015-07-30 2016-07-12 이진용 배너형 기사 자동 생성을 통한 기사 작성 및 온라인 배포 방법
JP2017500634A (ja) * 2013-11-08 2017-01-05 グーグル インコーポレイテッド ディスプレイコンテンツのイメージを抽出し、生成するシステムおよび方法

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20160095662A (ko) * 2015-01-08 2016-08-12 (주) 애드잇 광고 배너 자동 제작방법 및 광고 배너 자동 제작서버

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2008072446A (ja) * 2006-09-14 2008-03-27 Seiko Epson Corp 文書編集装置、プログラムおよび記憶媒体
JP2017500634A (ja) * 2013-11-08 2017-01-05 グーグル インコーポレイテッド ディスプレイコンテンツのイメージを抽出し、生成するシステムおよび方法
KR101546725B1 (ko) * 2015-01-26 2015-08-25 (주)유코아시스템 반응형 레이아웃 설계 방법
KR101638423B1 (ko) * 2015-07-30 2016-07-12 이진용 배너형 기사 자동 생성을 통한 기사 작성 및 온라인 배포 방법

Also Published As

Publication number Publication date
KR20200004114A (ko) 2020-01-13

Similar Documents

Publication Publication Date Title
KR102114369B1 (ko) 쇼핑몰 배너디자인 생성 방법, 장치 및 시스템
US11157830B2 (en) Automated customized web portal template generation systems and methods
US10984295B2 (en) Font recognition using text localization
US9875429B2 (en) Font attributes for font recognition and similarity
KR102198545B1 (ko) 온라인 전자상거래의 쇼핑몰의 디자인 자동 생성 방법 및 장치
US9824304B2 (en) Determination of font similarity
US9697437B2 (en) Logo detection
JP5774558B2 (ja) 手書き文書処理装置、方法及びプログラム
KR102124466B1 (ko) 웹툰 제작을 위한 콘티를 생성하는 장치 및 방법
US20210141826A1 (en) Shape-based graphics search
Ma et al. Segmentation and recognition for historical Tibetan document images
Zou et al. Legible compact calligrams
US20150193387A1 (en) Cloud-based font service system
CN110705503B (zh) 生成目录结构化信息的方法和装置
CN112784531B (zh) 一种基于深度学习和部件拼接的中文字形及字库生成方法
KR102114366B1 (ko) 쇼핑몰 배너디자인 생성 방법, 장치 및 시스템
KR102193600B1 (ko) 온라인 전자상거래의 쇼핑몰의 디자인 자동 생성 방법 및 장치
JP2013246732A (ja) 手書き文書検索装置、方法及びプログラム
Zhao et al. Udifftext: A unified framework for high-quality text synthesis in arbitrary images via character-aware diffusion models
CN115967823A (zh) 视频封面生成方法、装置、电子设备及可读介质
CN116703797A (zh) 图像融合方法、图像融合系统、计算机设备及存储介质
CN112862558A (zh) 产品详情页面的生成方法和系统、数据处理方法
US9424234B2 (en) Methods and apparatus for automatically creating variations of original content based on searching for alternative content objects based on characteristics of the original content
KR102287357B1 (ko) 이미지 내의 인물 객체를 분석하여 광고 배너를 자동으로 생성하는 방법 및 장치
US20200311998A1 (en) Image processing method, program, and image processing system

Legal Events

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