KR102586377B1 - 디자인 템플릿으로부터 추출된 테마 색상을 기반으로 전체 테마 색상을 편집하는 방법 - Google Patents

Abstract

본 발명은 웹 서버의 디자인 템플릿의 전체 테마 색상 편집 방법에 관한 것이다. 구체적으로, 사용자로부터 선택된 디자인 템플릿과 상기 선택된 디자인 템플릿의 색 공간(color space) 기반 유사색 범위를 포함하는 테마 색상 옵션을 확인하는 단계, 선택된 디자인 템플릿 상의 색상들 가운데 중복된 색상을 제거하여 N(여기서, N은 자연수)개의 색상들을 추출하는 단계, 추출된 N개의 색상들을, 테마 색상 옵션에 따라 정렬하여 색상 리스트로 생성하는 단계, 유사색 범위에 기반하여, 색상 리스트로부터, 미리 설정된 개수의 색상으로 구성된 대표 테마 색상을 적어도 하나 이상 생성하는 단계 및 생성된 적어도 하나 이상의 대표 테마 색상에 기반하여, 다수의 추천 테마 색상을 제공하는 단계를 포함하는 것을 특징으로 한다.

Description

디자인 템플릿으로부터 추출된 테마 색상을 기반으로 전체 테마 색상을 편집하는 방법{A METHOD OF EDITING ENTIRE THEME COLORS BASED ON THEME COLORS EXTRACTED FROM DESIGN TEMPLATES}

본 발명은 디자인 템플릿에 대한 전체 테마 색상을 편집하는 방법에 관한 것으로서, 보다 상세하게는 디자인 템플릿으로부터 추출된 테마 색상을 기반으로 전체 테마 색상을 편집 및 제공하는 방법에 관한 것이다.

최근 온라인상에 첨부된 디자인 파일이나 디자인 편집기의 템플릿을 이용함으로써, 디자인 전문가가 아닌 일반인일지라도 자신만의 디자인을 쉽게 제작할 수 있게 되었다.

하지만, 다른 사람이 만들어놓은 기존 디자인을 그대로 사용하는 사용자는 많지 않다. 사용자는 적어도 사용자의 의도에 따라 텍스트 내용을 변경할 것이며, 색상 역시 우리 회사의 BI 컬러에 맞게 적용해야 하거나 내가 원하는 분위기에 맞는 색상으로 변경하고 싶어 할 것이다.

만약 원본 디자인이 붉은 계열이라면, 디자인 원본의 색상은 #FF0000과 같은 빨간색 하나만 존재하지 않을 것이다. 짙은 빨강, 더 짙은 빨강, 쨍한 빨강, 연한 빨강, 더 연한 빨강 등 여러 계열의 빨간색이 존재할 것이다.

디자인 전문가라면 색상, 명도, 채도를 적절히 조정하여 붉은 계열의 디자인을 푸른 계열의 디자인으로 쉽게 변경할 수 있을 것이다. 하지만 디자인 감각이 미숙하거나 특히 전문 프로그램 사용을 어려워하는 일반 사용자는 모든 색상을 일일이 변경하는 게 어려울뿐더러 적절한 색상으로 변경하는 것조차 쉽지 않다. 그리고 변경해야 하는 색상의 종류가 무수히 많다고 했을 때의 번거롭다는 문제점도 있었다.

상술한 바와 같은 논의를 바탕으로 이하에서는 디자인 템플릿으로부터 추출된 테마 색상을 기반으로 추천 테마 색상을 제공하는 방법을 제공하고자 한다.

본 발명에 따르면, BI(Brand Identity) 또는 디자인 테마 색상을 원하는 색상 스타일로 용이하게 변경할 수 있다.

본 발명에 따르면, 컬러 감각이 부족하거나, 컬러 배치에 미숙한 사용자들도, 편집 중인 디자인 문서에 어울리는 색상 조합을 쉽게 적용할 수 있도록 할 수 있다.

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

상술한 문제점을 해결하기 위한 본 발명의 일 양상인, 웹 서버의 디자인 템플릿의 전체 테마 색상 편집 방법은, 사용자로부터 선택된 디자인 템플릿과 상기 선택된 디자인 템플릿의 색 공간(color space) 기반 유사색 범위를 포함하는 테마 색상 옵션을 확인하는 단계; 상기 선택된 디자인 템플릿 상의 색상들 가운데 중복된 색상을 제거하여 N(여기서, N은 자연수)개의 색상들을 추출하는 단계; 상기 추출된 N개의 색상들을, 상기 테마 색상 옵션에 따라 정렬하여 색상 리스트로 생성하는 단계; 상기 유사색 범위에 기반하여, 상기 색상 리스트로부터, 미리 설정된 개수의 색상으로 구성된 대표 테마 색상을 적어도 하나 이상 생성하는 단계; 및 상기 생성된 적어도 하나 이상의 대표 테마 색상에 기반하여, 다수의 추천 테마 색상을 제공하는 단계를 포함하는 것을 특징으로 한다.

나아가, 상기 색상 리스트는, 상기 추출된 테마 색상들을, 상기 테마 색상 옵션에 포함된 요소 타입 순서에 기반하여 정렬하여 생성되며, 상기 요소 타입 순서가 동일한 경우, 미리 설정된 요소의 우선 순위에 따라 정렬되는 것을 특징으로 할 수 있다.

나아가, 상기 대표 테마 색상은, 상기 색상 리스트 상에서 우선 순위 색상을, 제 1 대표 색상으로 설정되는 단계; 및 상기 색상 리스트 상에서, 상기 우선 순위 색상 이후의 색상부터 제 N 순위 색상을, 순차적으로 상기 유사색 범위 이내인지 여부를 확인하여, 제 1 유사 색상으로 설정되는 단계를 포함할 수 있다. 더 나아가, 상기 미리 설정된 개수의 색상이 3 개 이상인 경우, 상기 색상 리스트 상에서, 상기 우선 순위 이후의 색상부터 제 N 순위 색상 중 상기 제 1 유사 색상을 제외한 나머지 색상 중, 상기 제 1 대표 색상과 색상(hue) 차이에 기반하여, 적어도 하나의 제 1 보조 색상으로 설정되는 단계를 더 포함하는 것을 특징으로 할 수 있다. 나아가, 상기 우선 순위 색상은, 상기 색상 리스트 상에서 대표 색상으로 이미 사용된 색상을 제외한, 가장 우선 순위의 색상인 것을 특징으로 할 수 있다.

나아가, 상기 추천 테마 색상을 제공하는 단계는 상기 적어도 하나 이상의 대표 테마 색상에 설정된 제 M 대표 색상(여기서, 0 < M ≤ N, M은 자연수)이 제 M 추천 대표 색상으로 설정되고, 상기 제 M 추천 대표 색상과 상기 제 M 대표 색상의 색상 차이 값을 산출하는 단계; 및 상기 적어도 하나 이상의 대표 테마 색상에 설정된 제 M 유사 색상이, 상기 색상 차이 값에 따라 재설정되어 제 M 추천 유사 색상으로 설정되는 단계를 더 포함하는 것을 특징으로 할 수 있다. 더 나아가, 상기 미리 설정된 개수의 색상이 3 개 이상인 경우, 상기 적어도 하나 이상의 대표 테마 색상에 설정된 적어도 하나의 제 M 보조 색상을, 상기 색상 차이 값에 따라 재설정하여 제 M 추천 보조 색상으로 설정되는 단계를 더 포함하는 것을 특징으로 할 수 있다.

나아가, 상기 추천 테마 색상을 제공하는 단계는 미리 설정된 테마 프리셋 설정을 확인하는 단계; 및 상기 테마 프리셋 설정에 따라, 상기 적어도 하나 이상의 대표 테마 색상들을 테마 프리셋으로 생성하여, 추천 대표 테마 색상으로 설정되는 단계를 포함하는 것을 특징으로 할 수 있다. 더 나아가, 상기 테마 프리셋 설정에 따른 테마 프리셋 갯수가 상기 적어도 하나 이상의 대표 테마 색상의 개수를 초과하는 경우, 상기 적어도 하나 이상의 대표 테마 색상 중 보조 색상이 가장 많은 특정 대표 테마 색상과 연관된, 적어도 하나의 보조 색상들을, 상기 테마 프리셋 설정에 따라 테마 프리셋으로 생성하여 추천 대표 테마 색상으로 설정되는 단계를 포함하는 것을 특징으로 할 수 있다.

나아가, 상기 추천 테마 색상을 제공하는 단계는 이미지 리소스에 기반하여, 사용자 특정 테마 색상을 설정하는 단계; 미리 설정된 테마 프리셋 설정을 확인하는 단계; 및 상기 테마 프리셋 설정에 따라, 상기 사용자 특정 테마 색상을 테마 프리셋으로 생성하여, 추천 대표 테마 색상으로 설정되는 단계를 포함하는 것을 특징으로 할 수 있다.

나아가, 상기 추천 테마 색상을 제공하는 단계는 상기 생성된 적어도 하나 이상의 대표 테마 색상을 셔플(shuffle)하여, 추천 테마 색상으로 제공하는 단계를 더 포함하는 것을 특징으로 할 수 있다.

나아가, 상기 사용자에게 키워드를 입력받는 단계; 및 상기 키워드에 대응하는 메타데이터와 연관된 추천 테마 색상을 제공하는 단계를 더 포함하는 것을 특징으로 할 수 있다.

본 발명의 실시예에 따르면, 디자인 템플릿으로부터 추출된 테마 색상을 기반으로 추천 테마 색상을 효율적으로 제공할 수 있다.

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

본 발명에 관한 이해를 돕기 위한 상세한 설명의 일부로 포함되는, 첨부 도면은 본 발명에 대한 실시예를 제공하고, 상세한 설명과 함께 본 발명의 기술적 사상을 설명한다.
도 1은 본 발명에 따른 디자인 추천 테마 색상 제공의 실시예를 설명하기 위한 참고도이다.
도 2는 본 발명에 따른 웹 서버 상에서 수행되는 디자인 템플릿의 전체 테마 색상 편집 방법을 설명하기 위한 순서도이다.
도 3은 웹 서버가 사용자에게 제공하는 테마 색상 옵션을 설명하기 위한 참고도이다.
도 4는 본 발명에서 색상 변환을 이용하기 위하여 사용되는 색 공간(color space)을 나타내는 참고도이다.
도 5는 본 발명에서 디자인 템플릿의 색상들을 추출하여, 대표 테마 색상을 생성하는 과정을 설명하기 위한 참고도이다.
도 6은 본 발명에 따라, 디자인 템플릿과 추천 테마 색상을 제공하는 결과를 나타내는 참고도이다.
도 7은 본 발명의 추천 테마 색상을 제공하기 위하여, 대표 테마 색상을 설정된 색상 차이 값에 따라 재설정하는 실시예를 설명하기 위한 참고도이다.
도 8은 본 발명의 추천 테마 색상을 제공하기 위하여, 대표 테마 색상을 프리셋 설정에 따라 추천 테마 색상으로 재설정하는 실시예를 설명하기 위한 참고도이다.
도 9는 본 발명의 추천 테마 색상을 제공하기 위하여, 대표 테마 색상을 셔플(shuffle)하여 재설정하는 실시예를 설명하기 위한 참고도이다.
도 10은 본 발명에 따라 색상이 변경된 디자인 템플릿이 제공되는 모습을 나타내는 참고도이다.
도 11은 본 발명에 따라, 이미지 리소스에 기반하여 추천 테마 색상을 제공하는 방안을 설명하기 위한 참고도이다.
도 12 및 도 13은 본 발명에 따라, 키워드에 대응하는 추천 테마 색상을 제공하는 방법을 설명하기 위한 참고도이다

이하에서, 첨부된 도면을 참조하여 실시예들을 상세하게 설명한다. 각 도면에 제시된 동일한 참조 부호는 동일한 부재를 나타낸다. 아래 설명하는 실시예들에는 다양한 본 발명은 이하에 기재되는 실시예들의 설명 내용에 한정되는 것은 아니며, 본 발명의 기술적 요지를 벗어나지 않는 범위 내에서 다양한 변형이 가해질 수 있음은 자명하다. 그리고 실시예를 설명함에 있어서 본 발명이 속하는 기술분야에 널리 알려져 있고 본 발명의 기술적 요지와 직접적으로 관련이 없는 기술내용에 대해서는 설명을 생략한다.

한편, 첨부된 도면에서 동일한 구성요소는 동일한 부호로 표현된다.

그리고 첨부 도면에 있어서 일부 구성요소는 과장되거나 생략되거나 개략적으로 도시될 수도 있다. 이는 본 발명의 요지와 관련이 없는 불필요한 설명을 생략함으로써 본 발명의 요지를 명확히 설명하기 위함이다.

도 1은 본 발명에 따른 디자인 추천 테마 색상 제공의 실시예를 설명하기 위한 참고도이다.

도 1에서와 같이, 본 발명에 따르면, “지역화페 무엇인고?”, “지역화폐의 쓰임과 사용방법”과 같은 텍스트의 색상뿐만 아니라, '구름', '건물', '인물의 착용 복장'등 모든 그래픽 객체들에 대하여 색상이 변경되었음을 확인할 수 있다. 즉, 본 발명에서는, 디자인 템플릿에 사용된 색상들을 추출하고, 추출된 색상의 톤, 명도, 채도 등을 전체적으로 변경시켜줌으로써, 디자인 템플릿의 전체적인 완성도를 유지하면서 색상을 변경시키는 방법을 제공한다.

도 2는 본 발명에 따른 웹 서버 상에서 수행되는 디자인 템플릿의 전체 테마 색상 편집 방법을 설명하기 위한 순서도이며, 도 3은 웹 서버가 사용자에게 제공하는 테마 색상 옵션을 설명하기 위한 참고도이다. 도 4는 본 발명에서 색상 변환을 이용하기 위하여 사용되는 색 공간(color space)을 나타내는 참고도이다. 도 5는 본 발명에서 디자인 템플릿의 색상들을 추출하여, 대표 테마 색상을 생성하는 과정을 설명하기 위한 참고도이다. 도 6은 본 발명에 따라, 디자인 템플릿과 추천 테마 색상을 제공하는 결과를 나타내는 참고도이다.

웹 서버는, 사용자로부터 선택된 디자인 템플릿과 상기 선택된 디자인 템플릿의 색 공간(color space) 기반 유사색 범위를 포함하는 테마 색상 옵션을 확인한다(S201).

웹 서버는 사용자에게 미리 저장된 디자인 템플릿들을 제공하고, 제공된 템플릿들 중에서 사용자로부터 선택된 디자인 템플릿에 관한 정보를 확인한다.

웹 서버는 사용자에게 선택된 디자인 템플릿과 관련하여, 테마 색상 변경을 위한 테마 색상 옵션을 제공한다. 도 3을 예로 들어 설명하면, 색상 순서, 유사색 HUE 범위, 무채색을 테마색으로 적용할 것인지 여부, 효과색을 맨 뒤로 이동시킬지 여부, 다중 색상의 색 우선 순위를 조정할지 여부, 보조색을 적용시킬지 여부, 보조색 공식을 적용할 지 여부등을 옵션으로 제공할 수 있다.

색상 순서 옵션의 경우에는, '요소 크기' 옵션의 경우에는 디자인 요소들의 종류나 특성을 고려하지 않고 디자인 템플릿 상에서 면적을 가장 많이 차지하는 순서대로 색상을 정렬시키기 위한 옵션이다. '배경>텍스트>요소” 옵션의 경우에는 '요소 크기'와 달리 디자인 요소들의 종류나 특성을 고려하여 색상을 정렬시킨 후, 미리 설정된 요소의 우선 순위에 따라 정렬시키기 위한 옵션이다.

유사색 HUE 범위 옵션의 경우, 색 공간(color space) 기반으로 옵션 값을 설정한다. 색 공간이란 색 표시계(color system)를 공간적으로 표현한 개념이다. 색의 3속성인 색상(hue), 명도(lightness), 채도(chroma)를 3차원 공간의 각각의 축으로 형성된 색 공간은, 컬러 디자인이나 컬러 공학 등의 학문 또는 산업분야에서 컬러를 다루는 데 있어서 널리 사용되는 개념이다. 빨강, 노랑, 초록, 파랑, 보라 등으로 구분되는 색을 나타내는 색상(hue)은 색 공간을 지구로 비유할 경우 적도 상에서 경도 즉, 색상각(hue angle)으로 표현, 0도~360도의 범위를 가지며, 시계 방향으로 변화된다. 또한 이 색 공간은 대응색(opponent color) 관계를 나타낼 수 있는다. 대응색 관계란 명도 축을 기준으로 대칭의 위치에 있는 두 색의 관계를 말하며 서로 보색 관계에 있을 나타낸다. 모든 색들의 밝고 어둠을 나타내는 명도(lightness)는 색 공간을 지구로 비유할 경우 남극과 북극을 연결하는 축으로서 남극을 검은색, 북극을 흰색으로 하며 그 사이에는 회색들로 배열된다. 모든 색들의 깨끗한 정도를 나타내는 채도(chroma, saturation)는 색 공간의 명도축을 0으로 하고 적도에 가까이 갈수록 커진다. 본 발명에서는 색 공간에 존재하는 두 점 즉, 두 색들 사이의 거리를 계산하여 공학적으로 활용하여 색차 계산(color difference)을 수행한다.

이에 따라, 본 발명에서는 유사색 HUE 범위 옵션을 제공하는 경우, 옵션값을 ±N°로 설정받아, 유사색을 판단하기 위하여 사용될 수 있으며, 이에 대한 자세한 설명은 도 7에 관련된 부분에서 후술한다.

무채색을 테마색으로 적용할 것인지 여부에 관련된 옵션은, 전체적으로 무채색, 혹은 유채색으로 변경함으로써, 테마 색상 변경시 디자인의 통일감을 향상시키기 위한 옵션이다. 기본적으로 유채색을 테마색으로 적용하나, 사용자가 무채색을 테마색으로 적용하는 옵션을 체크한 경우, 유채색뿐만 아니라 무채색을 테마색으로 적용할 수 있다. 이때, 무채색이 테마색이 될 경우에는 유사색, 보조색도 모두 무채색 계열로 통일함으로써, 전체적으로 디자인의 일관성을 유지할 수 있다. 반대로, 유채색이 테마색이 될 경우에는 유사색, 보조색도 모두 유채색 계열로 통일될 것이다.

효과색을 맨 뒤로 이동시키는 옵션은, 요소에게 효과를 주는 색상, 예를 들어, 양각, 음각 등 요소의 입체감을 위한 효과색이나, 그림자등을 색상의 정렬시 맨 뒤로 위치시킴으로써, 색상을 변경하더라도 효과색이나 그림자등은 최소한의 색상 변경이 이루어지게 하기 위함이다.

다중 색상의 색 우선 순위를 조정할지 여부는, 사진배경 색상 혹은 텍스트 다중 색상 등의 색상이 최소한의 변경만 이루어지게 하기 위함이다.

예를 들어, 사진배경 색상의 경우, 사진배경 뒤에 단색(유색)을 깔고 사진의 투명도를 조정할 경우 그 색상이 비춰보인다. (ex. 사진배경 뒤에 빨간색을 깔고 사진의 투명도를 조정하면 전체적으로 붉은 느낌의 디자인이 될 수 있다) 따라서. 사진배경 뒤에 흰색(무색)이 깔려있을 경우 테마색상으로서 의미가 없기 때문에 해당 경우는 테마 색상으로서 무시하는 것이 바람직하다. 또한, 사진배경의 불투명도(opacity)가 일정 수준인(예, 100)인 경우 사진배경의 단색은 색상 리스트에 포함되지 않을 수 있다.

또 다른 예로, 하나의 텍스트 요소에 2 가지 이상의 색상을 사용한 경우에도 테마 색상 변경시 따로 적용되거나, 최소한의 변경만 이루어지도록 설정될 수 있다.　또는, 텍스트 크기에 따라 테마 색상 추출시 레벨 차이를 설정함으로써, 통일감있는 색상 변경이 이루어지도록 할 수 있다.

보조색을 적용시킬지 여부 및 보조색 공식 적용 여부는, 본 발명에서는 기본적으로 디자인 템플릿의 대표 색상과 유사 색상을 추출하는데, 이와 더불어 추가적인 보조 색상을 추출할지 여부에 관한 옵션이다. 즉, 다양한 색을 추출하여, 본 발명에 따른 색상 변경을 시킴으로써, 다양한 테마 색상을 제공할 수 있는 옵션이다. 보조 색상 설정과 관련된 자세한 설명은 후술하도록 하겠다.

웹 서버는, 선택된 디자인 템플릿 상의 색상들 가운데 중복된 색상을 제거하여 N(여기서, N은 자연수)개의 색상들을 추출한다(S203).

디자인 템플릿에서 사용중인 모든 색상을 추출하여 리스트로 나열할 수 있다. 즉, 요소의 외곽선, 그림자 등 효과를 위해 사용한 색상도 모두 추출하고, 추출된 색상 중 중복 색상을 제거함으로써, N(여기서, N은 자연수)개의 색상들을 최종적으로 추출할 수 있다. 예를 들어, 도 5 및 도 6을 함께 참조하여 설명하면, 도 6의 601과 같은 디자인 템플릿이 있다고 가정하면, 도 6(a)에서와 같이, 디자인 템플릿의 배경, 텍스트, 요소에 대한 색상들이 추출될 수 있다. 배경, 텍스트, 요소별로 추출된 색상에는 중복된 색상들이 존재할 수 있으므로, 도 6(b)에서와 같이, 중복된 색상들을 제거할 수 있다.

나아가, 웹 서버는 사용자가 변경할 수 없는 색상. 사진배경의 단색이 '흰색(#fff)'일 경우, 혹은 투명색(즉, alpha = 0)일 경우에는 추출하지 않도록 설정될 수 있고, 무채색은 따로 표시하도록 설정될 수 도 있다.

웹서버는 추출된 N개의 색상들을, 테마 색상 옵션에 따라 정렬하여 색상 리스트로 생성한다(S205). 색상 리스트를 생성하는 경우에, 도 3에서 설명한 색상 순서 옵션에 기반하여, '요소의 크기' 혹은 '배경>텍스트>요소'에 따라 정렬하여 색상 리스트를 생성할 수 있다.

예를 들어, '배경>텍스트>요소”의 옵션을 선택한 경우, 배경색 > 텍스트색 > 나머지 요소색 > 모든 효과색(외곽선, 그림자) 순으로 색상을 정렬한다. 즉, 가장 넓은 면적을 차지하는 색상이 디자인 전체 테마를 좌우할 수 있으므로, 배경 색상을 가장 앞에 두는 옵션이 선택될 수 있다. 이 때, 요소 타입 순서가 동일할 수 있는 데, 이때는 미리 설정된 요소의 우선순위에 따라 정렬되도록 설정될 수 있다. 예를 들어, 텍스트가 여러개일 경우 텍스트 크기가 가장 높은 순으로 정렬될 수 있거나, 레이어(layer)가 가장 높은 순으로 정렬될 수 있다.

따라서, 상술한 바와 같이 도 6(a), 6(b)에 따라, 색상들이 추출된 경우라면, 도 6(c)에서와 같이 테마 색상 옵션에 따라 배경색 > 텍스트색 > 나머지 요소 색으로 색상이 정렬될 수 있다.

웹 서버는, 테마 색상 옵션에 포함된 유사색 범위에 기반하여, 색상 리스트로부터, 미리 설정된 개수의 색상으로 구성된 대표 테마 색상을 적어도 하나 이상 생성한다(S207).

본 발명에서 대표 테마 색상은, 대표 색상, 유사 색상 등으로 구성되는 디자인 템플릿을 위한 테마 색상들 중 대표적인 색상들이 미리 설정된 개수만큼으로 구성된 것으로 정의된다. 미리 설정된 개수는 적어도 2개 이상이며, 미리 설정된 개수의 색상이 3개 이상인 경우, 대표 색상과 유사 색상 이외에 보조 색상이 포함되도록 설정된다.

웹 서버는 색상 리스트 상에서 우선 순위 색상을, 대표 색상으로 설정한다. 여기서, 우선 순위 색상이란, 색상 리스트 상에서 대표 색상으로 이미 사용된 색상을 제외한, 가장 우선 순위의 색상으로 정의될 수 있다. 즉, 대표 테마 색상을 처음으로 만들기 시작하는 경우라면, 제일 처음 위치한 색상이 대표 색상으로 설정될 수 있다. (예를 들어, 도 6(c)의 보라색이 대표 색상으로 설정될 수 있다)

다음으로, 색상 리스트 상에서, 우선 순위 색상 이후의 색상부터 제 N 순위 색상을, 순차적으로 테마 색상 옵션에서 설정된 유사색 범위 이내인지 여부를 확인한다. 유사색 범위 이내에 해당하는 색상 중 최우선 색상이 유사 색상으로 설정된다. 예를 들어, 색상 리스트의 2~N 번째 색상(예, B 색상)의 Hue를 대표 색상 (예, A 색상)의 Hue와 비교하여 유사값 범위(예, 15)내인지 판단하면, |B(hue)- A(hue)| < 15 인지 여부를 판단하게 되고, 15이내라면 B 색상은 A 색상의 유사색이 되나, 아니라면 A 색상에 대하여는 유사색이 존재하지 않게 된다. 따라서, A 색상은 대표 색상이 될 수 없고, A 색상 이후의 우선 순위를 가지는 색상(예, C 색상)이 대표 색상으로 설정될 수 있다.

미리 설정된 개수의 색상이 3 개 이상인 경우, 대표 테마 색상은 보조 색상을 더 포함할 수 있다. 즉, 색상 리스트 상에서, 우선 순위 이후의 색상부터 제 N 순위 색상 중, 유사 색상으로 선정된 색상을 제외한 나머지 색상들에서, 대표 색상과의 색상(hue) 차이에 기반하여, 적어도 하나의 보조 색상이 설정될 수 있다. 예를 들어, 대표 색상과의 색상 차이가 가장 적은 순서대로, 미리 설정된 개수에 따라 보조 색상이 될 수 있다.

따라서, 예를 들어, 도 6(d)와 같이 대표 테마 색상에는 대표 색상, 유사 색상 및 보조 색상(미리 설정된 색상이 3개 이상인 경우)이 설정되고, 대표 색상, 유사 색상, 보조 색상이 아닌 나머지 색상들은 대표 테마 색상과 연관되도록 설정될 수 있다.

웹 서버는, 생성된 적어도 하나 이상의 대표 테마 색상에 기반하여, 다수의 추천 테마 색상을 제공한다(S209).

웹 서버는 추천 테마 색상을 제공하기 위하여, 대표 테마 색상을 설정된 색상 차이 값에 따라 재설정하거나, 프리셋 설정에 따라 테마 프리셋으로 생성하거나, 대표 테마 색상을 셔플(shuffle)할 수 있는데, 이에 대한 자세한 설명은 도 7 내지 도 9를 통하여 후술한다.

즉, 도 5 및 도 6을 참조하여, 웹 서버의 추천 테마 색상을 살펴보면, 디자인 템플릿(601)의 색상을 추출하여, 대표 테마 색상 및 이를 기반으로 생성된 추천 테마 색상(603)을 제공한다.

도 7은, 본 발명의 추천 테마 색상을 제공하기 위하여, 대표 테마 색상을 설정된 색상 차이 값에 따라 재설정하는 실시예를 설명하기 위한 참고도이다.

웹 서버는 생성된 적어도 하나의 대표 테마 색상에 대하여 설정된 색상 차이 값에 따라 추천 테마 색상으로 재설정한다. 여기서, 설정된 색상 차이 값이란, 사용자로부터 대표 테마 색상 중 대표 색상을 특정 색상으로 변경하도록 입력받는 경우의 색상 차이거나, 대표 테마 색상을 추천 테마 색상으로 변경하기 위한 설정 색상 차이 값을 입력받을 수 있다.

따라서, 웹 서버는, 적어도 하나 이상의 대표 테마 색상에 설정된 대표 색상을, 설정된 색상 차이 값에 따라 재설정하여 추천 대표 색상으로 설정할 수 있을 뿐만 아니라, 유사 색상 및 보조 색상도 설정된 색상 차이 값에 따라 재설정하여, 대표 테마 색상을 전체적으로 변경할 수 있다.

예를 들어, 테마색이 대표 테마 색상의 특정 대표 색상(이하 A 색상)에서 추천 대표 색상(이하, A' 색상)으로 설정된다면, 색상 차이 값(ΔH)은 특정 대표 색상 과 추천 대표 색상의 색상 차이 값으로 정의된다. 즉, ΔH　는 색상(hue)의 색 공간 상에서의 이동각을 나타내게 된다.

예를 들어, 설정 색상 차이 값이 ±15°인 경우에는 도 7(a)와 같은 범위내에서 대표 색상이 추천 테마 색상으로 변경되며, 설정 색상 차이 값이 ±30°인 경우에는 도 7(b)와 같은 범위내에서 대표 색상이 추천 테마 색상으로 변경된다. 그러나, 도 7에서 나타나듯이 색 공간상에서 음(-)의 각도로 표현될 수 없으므로, 변경하려는 색상(A' 색상)의 각도가 기존 색상(A색상)의 각도보다 작은 경우(즉, A'(hue) <　A(hue))에는 설정된 색상 차이 값(ΔH)은 A'(hue)- A(hue)+360°로 설정된다. 변경하려는 색상(A' 색상)의 각도가 기존 색상(A색상)의 각도보다 작은 경우가 아니라면, 설정된 색상 차이 값(ΔH)은 A'(hue)- A(hue)로 설정될 것이다.

따라서, 대표 색상이 변경된 대표 테마 색상에 포함된 유사 색상 및 보조 색상도 변경해줄 필요가 있다. 예를 들어, 상술한 바와 같이 대표 테마 색상의 특정 대표 색상(이하 A 색상)에서 추천 대표 색상(이하, A' 색상)으로 설정되고, 이에 따른 색상 차이 값(ΔH)은 특정 대표 색상과 추천 대표 색상의 색상 차이 값으로 정의된다면, 유사 색상도 A 색상에서 A' 색상으로 변경된 비율에 따라 변경된다.

즉, 유사 색상의 색상(Hue)도 색상 차이 값(ΔH)에 기반하여 변경되는데, 예를 들어, 대표 색상 A 색상의 유사 색상을 a(hue)라고 하고, 추천 대표 색상 A' 색상의 유사 색상을 설정하는 경우라면, a'(hue) = a(hue) +　ΔH 로 설정될 수 있다. 그러나, 상술한 바와 같이, 색 공간상에서는 0 ~ 360°로 색상이 표현되므로, a'(hue)가 360°를 초과하는 경우(즉, a(hue)+ΔH > 360°)라면, 360° 이내로 설정되도록 보정해 줄 수 있다(즉, a'(hue) = a(hue)+ΔH-360).

유사 색의 색상과 함께, 추천 대표 색상의 채도 및 명도에 따라 유사 색상의 채도와 명도도 변경되어야, 테마 색상의 통일도가 향상될 수 있다. 변경될 유사 색상의 채도를 a'(sat)라고 한다면, 변경될 유사 색상의 채도는, 대표 테마 색상에 설정된 유사 색상의 채도 a(sat)에, 대표 색상의 채도 A(sat)와 추천 대표 색상의 채도 A'(sat)의 비율을 적용(즉, a'(sat)=　a(sat)*(A'(sat)/A(sat)) )하여 산출될 수 있다

여기서, 대표 색상의 채도 A(sat)와 추천 대표 색상의 채도 A'(sat)의 비율을 적용할 경우, 채도가 100을 초과할 수 있는데(즉, a(sat)*A'(sat)/A(sat)>100), 이 때는 변경될 변경될 유사 색상의 채도를 100으로 설정해준다. (즉, a'(sat) = 100)

또한, 대표 색상이 무채색, 즉, 대표 색상의 채도 A(sat)=0일 수 있는데, 이러한 경우에는 대표 색상의 채도 A(sat)가 아닌 채도 100을 추천 대표 색상의 채도 A'(sat)에 더해줌으로써, 유사 색상의 채도를 a'(sat)를 산출할 수 있다(즉, a'(sat) = a(sat) * (A'(sat) + 100)/100).

마찬가지로, 변경될 유사 색상의 명도를 a'(br)라고 한다면, 변경될 유사 색상의 명도는, 대표 테마 색상에 설정된 유사 색상의 명도 a(sat)에, 대표 색상의 명도 A(br)와 추천 대표 색상의 명도 A'(br)의 비율을 적용 하여 산출될 수 있다 (즉, a'(br) =　a(br)* (A'(br)/A(br)) )

여기서, 대표 색상의 명도 A(br)와 추천 대표 색상의 명도 A'(br)의 비율을 적용할 경우, 명도가 100을 초과할 수 있는데(즉, a(br)*A'(br)/A(br) > 100), 이 때는 변경될 변경될 유사 색상의 명도를 100으로 설정해준다. (즉, a'(br) = 100)

또한, 대표 색상의 명도가 0(즉, A(br)=0)일 수 있는데, 이러한 경우에는 대표 색상의 명도 A(br)가 아닌 명도 100을 추천 대표 색상의 명도 A'(br)에 더해줌으로써, 유사 색상의 명도를 a'(br)를 산출할 수 있다(즉, a'(br) = a(br) * (A'(br) + 100)/100 ).

대표 테마 색상을 구성하기 위하여 미리 설정된 개수의 색상이 3개 이상인 경우에는 보조 색상도 대표 테마 색상에 포함되므로, 보조 색상도 상술한 유사 색상의 색상, 채도, 명도 변경 프로세스가 동일하게 적용된다.

도 8은, 본 발명의 추천 테마 색상을 제공하기 위하여, 대표 테마 색상을 프리셋 설정에 따라 추천 테마 색상으로 재설정하는 실시예를 설명하기 위한 참고도이다.

웹 서버는 생성된 적어도 하나의 대표 테마 색상에 대하여 미리 설정된 프리셋 설정에 따라 추천 테마 색상으로 재설정한다. 본 발명에서 프리셋이란, 사용자의 추가적인 동작이나 입력이 없이도, 추천 테마 색상을 다양하게 제공하기 위하여 설정된 색상, 명도, 채도의 차이이다.

웹 서버는 추천 테마 색상을 제공하기 위하여, 미리 설정된 테마 프리셋 설정을 확인한다. 미리 설정된 테마 프리셋 설정에는 테마 프리셋 개수, 대표 테마 색상을 변경하기 위한 색상 차이, 채도 차이, 명도 차이 등의 설정이 포함될 수 있다.

웹 서버는 확인된 테마 프리셋 설정에 따라, 적어도 하나 이상의 대표 테마 색상들을 테마 프리셋으로 생성하여, 추천 대표 테마 색상으로 설정한다. 예를 들어, 대표 테마 색상들이 (A1, A2, A3)라고 한다면, 프리셋에 따른 추천 테마 색상들은 (P1, P2, P3)와 같이 테마 프리셋 설정에 따라 다른 색상으로 변경된다. 여기서, A1, A2, A3, P1, P2, P3와 같은 색상들은 대표 색상이므로, 대표 테마 색상의 대표 색상이 변경된 경우, 유사 색상과 보조 색상은 변경된 추천 대표 색상에 따라 변경된다. 즉, P1으로 대표 색상이 변경된 경우에는, 도 7에서 설명된 프로세스와 동일하게, P1의 유사 색상과 보조 색상도 변경되게 된다.

이에 따라, 도 8(a)와 같이, (보라, 노랑, 파랑)의 색상은 (주황, 오렌지, 아이보리)색상으로 변경될 수 있으며, 이와 같이 변경된 색상들은 셔플(shuffe)을 통하여 대표 색상, 유사 색상, 보조 색상이 상호 변경될 수 도 있다.

테마 프리셋 설정은 색상 차이, 채도 차이, 명도 차이 등이 다수개로 설정될 수 있으며, 이에 따라, 도 8(a)와 더불어 8(b)와 같이, (보라, 노랑, 파랑)의 색상은 (화이트, 네이비, 브라운)색상등으로도 변경될 수 있다(이와 같이 변경된 색상들도 셔플(shuffe)될 수 있다)

테마 프리셋 설정에 따른 테마 프리셋 갯수가, 적어도 하나 이상의 대표 테마 색상의 개수를 초과하는 경우, 예를 들어, 대표 테마 색상들이 A1, A2, A3로 3개가 설정되었으나, 테마 프리셋 개수가 4개, 5개 등으로 설정된 경우라면, 대표 테마 색상 중 보조 색상이 가장 많은 특정 대표 테마 색상과 연관된, 적어도 하나의 보조 색상들을, 상기 테마 프리셋 설정에 따라 테마 프리셋으로 생성하여 추천 대표 테마 색상으로 설정할 수 있다.

예를 들어, 테마 프리셋 개수가 4개라면, 대표 테마 색상들이 A1, A2, A3로 3개가 설정되었고, 보조색이 가장 많은 테마색의 보조색이 a1인경우, 프리셋은 A1, A2, A3와 함께 a1을 변환시켜, P1, P2, P3, P4와 같은 프리셋을 설정할 수 있다.

또 다른 예로, 테마 프리셋 개수가 5개라면, 대표 테마 색상들이 A1, A2, A3로 3개가 설정되었고, 보조색이 가장 많은 테마색의 보조색이 a1, a2인경우, 프리셋은 A1, A2, A3와 함께 a1, a2를 변환시켜, P1, P2, P3, P4, P5와 같은 프리셋을 설정할 수 있다.

도 9는, 본 발명의 추천 테마 색상을 제공하기 위하여, 대표 테마 색상을 셔플(shuffle)하여 재설정하는 실시예를 설명하기 위한 참고도이다.

웹 서버는, 생성된 적어도 하나 이상의 대표 테마 색상을 셔플(shuffle)하여, 추천 테마 색상으로 제공할 수 있는데, (보라, 노랑, 파랑)의 대표 테마 색상이 추출되었다면, 이를 (보라, 노랑, 파랑)뿐만 아니라 (노랑, 파랑, 보라), (파랑, 보라, 노랑)과 같이 순서를 변경시켜 추천 테마 색상을 제공할 수 있으며, 변경된 색상에 따라 디자인 템플릿의 색상을 변경시킬 수 있다.

상술한 전체 테마 색상 편집 방법에 따라, 대표 테마 색상을 미리 설정된 색상 차이 값에 따라 재설정하거나, 프리셋 설정에 따라 테마 프리셋으로 생성하거나, 대표 테마 색상을 셔플(shuffle)하는 경우, 도 10과 같이 색상이 변경된 디자인 템플릿이 제공될 수 있다.

도 11은 본 발명에 따라, 이미지 리소스에 기반하여 추천 테마 색상을 제공하는 방안을 설명하기 위한 참고도이다.

본 발명에 따르면, 이미지 리소스에 기반하여 추천 테마 색상을 제공할 수 도 있다. 여기서, 이미지 리소스란, 사용자가 업로드한 이미지(예를 들어, BI(Brand Identity), 로고 등) 혹은, 관리자가 업로드한 이미지 파일(예를 들어, bmp, jpeg, gif 등)을 통칭한다.

웹 서버는 상술한 디자인 템플릿에서 대표 테마 색상을 추출한 것과 유사하게, 이미지 리소스로부터 대표 테마 색상을 추출할 수 있다.

예를 들어, 상술한 테마 프리셋 설정에 따라 추천 대표 테마 색상을 설정하는 프로세스를 적용할 수 있다. 도 1101과 같이, 웹 서버는 이미지 리소스로부터 대표 테마 색상을 추출하여, 사용자 특정 테마 색상(즉, 도 1101의 추천 테마색)을 설정한 후, 미리 설정된 테마 프리셋 설정을 확인한다. 이에, 테마 프리셋 설정에 따라, 사용자 특정 테마 색상을 테마 프리셋으로 생성하여, 추천 대표 테마 색상(즉, 도 1101의 테마 색상)으로 설정할 수 있다. 이에 대한 자세한 설명은 전술한 도 8과 그에 관련된 설명으로 대체한다.

나아가, 도 1103은 웹 서버가 미리 저장된 다수의 이미지 리소스들로부터, 다수의 대표 테마 색상들을 추출하여 사용자에게 제공하는 실시예를 나타내는 참고도이다. 즉, 웹 서버는 사용자에게 다수의 사용자 특정 테마 색상을 이미지 리소스 기반으로 제공하고, 사용자가 선택한 사용자 특정 테마 색상에 기반하여 추천 테마 색상을 제공할 수 있다.

도 12 및 도 13은 본 발명에 따라, 키워드에 대응하는 추천 테마 색상을 제공하는 방법을 설명하기 위한 참고도이다. 본 발명에서, 사용자는 키워드 검색을 통해 원하는 색상 계열의 테마색을 찾거나, 카테고리 검색을 통해 원하는 분위기의 테마색을 찾을 수 있다.　또는, 연상되는 이미지나 사물 키워드를 검색하여 해당 키워드에 맞는 분위기의 테마색을 찾을 수 있다.

예를 들어, 도 1201에서와 같이, 사용자로부터 키워드를 입력받을 수 있으며, '따뜻한, 파스텔, 부드러운”의 키워드가 입력되었다고 가정한다. 그중, '부드러운'에 대한 키워드 검색을 수행한다고 하면, '부드러운'은 '#tender'와 같은 태그가 설정되어 있을 수 있으며, #tender과 연관된 “#9088D4”, “#EBCFC4”, “#FFF3E2”와 같은 색상들이 사용자에게 제안된다.

사용자는 특정한 색상에 대하여 선택할 수 있으며, “#9088D4”를 선택한 경우, 해당 색상에 대하여 선택되었음을 알리는 메시지(예를 들어, 복사 완료!)를 출력하고, 해당 색상에 대한 프리셋을 사용자에게 제공할 수 있다.

이와 같이, 키워드를 입력받는 경우에, 도 1301과 같이 최근 검색어 및 색상, 타입등에 대한 카테고리 분류를 사용자에게 제시할 수 있다. 도 1303에서 예시된 바와 같이, 키워드의 경우에는 최대 5개까지 최근 검색어를 나타낼 수 있으며, “빨간색”, “주황색”, “노란색”등의 색상뿐만 아니라, “따뜻한”, “차가운”, “파스텔”과 같은 타입 검색어도 사용자에게 표시될 수 있다.

더불어, 도 1305에서와 같이 사용자는 정형화되지 않은 검색어를 검색할 수 있으며, 이 때 웹서버는 사용자가 입력한 키워드와 가장 유사한 색상으로 구성된 테마 색상을 제공할 수 있다.

즉, 본 발명에서는, 상술한 디자인 템플릿, 이미지 리소스등에 기반하여 사용자에게 추천 테마 색상을 제공할 수 있으며, 사용자가 선택한 추천 테마 색상에 기반하여 디자인 템플릿의 색상을 재설정함으로써, 사용자가 용이하게 디자인 테마를 재설정할 수 있다.

본 명세서와 도면에 게시된 본 발명의 실시 예들은 본 발명의 기술 내용을 쉽게 설명하고 본 발명의 이해를 돕기 위해 특정 예를 제시한 것뿐이며, 본 발명의 범위를 한정하고자 하는 것은 아니다. 여기에 게시된 실시 예들 이외에도 본 발명의 기술적 사상에 바탕을 둔 다른 변형 예들이 실시 가능하다는 것은 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에게 자명한 것이다.

Claims (12)

1. 웹 서버가 수행하는 디자인 템플릿의 전체 테마 색상 편집 방법에 있어서,
   상기 웹 서버가, 사용자로부터 선택된 디자인 템플릿을 확인하는 단계;
   상기 웹 서버가, 상기 확인된 디자인 템플릿에 대하여 색상 축, 명도 축 및 채도 축으로 형성되며 각각의 축은 0도에서 360도의 범위를 가지도록 구성된 3차원 색 공간(color space) 기반의, 상기 색 공간 상에서 미리 설정된 옵션값에 따른 색 공간상에서의 이동각을 나타내는 유사색 범위를 포함하는 테마 색상 옵션을 확인하는 단계;
   상기 웹 서버가, 상기 선택된 디자인 템플릿 상의 색상들 가운데 중복된 색상을 제거하여 N(여기서, N은 자연수)개의 색상들을 추출하는 단계;
   상기 웹 서버가, 상기 추출된 N개의 색상들을, 상기 테마 색상 옵션에 따라 정렬하여 색상 리스트로 생성하는 단계;
   상기 웹 서버가, 상기 유사색 범위에 기반하여, 상기 색상 리스트로부터, 미리 설정된 개수의 색상으로 구성된 대표 테마 색상을 적어도 하나 이상 생성하는 단계; 및
   상기 웹 서버가, 상기 생성된 적어도 하나 이상의 대표 테마 색상에 기반하여, 다수의 추천 테마 색상을 제공하는 단계를 포함하며,
   상기 대표 테마 색상은,
   상기 색상 리스트 상에서 우선 순위 색상이 제 1 대표 색상으로 설정되고, 상기 우선 순위 색상 이후의 색상부터 제 N 순위 색상 중 상기 제 1 대표 색상과의 색 공간 상의 거리가 상기 유사색 범위 이내인 색상이 제 1 유사 색상으로 설정되고, 상기 미리 설정된 개수의 색상이 3 개 이상인 경우, 상기 우선 순위 이후의 색상부터 제 N 순위 색상 중 상기 제 1 유사 색상을 제외한 나머지 색상 중에서, 상기 제 1 대표 색상과의 색 공간 상의 거리에 기반하여, 적어도 하나의 제 1 보조 색상이 설정되며,
   상기 추천 테마 색상을 제공하는 단계는,
   상기 적어도 하나 이상의 대표 테마 색상에 설정된 제 M 대표 색상(여기서, 0 < M ≤ N, M은 자연수)이 제 M 추천 대표 색상으로 설정되고, 상기 제 M 추천 대표 색상과 상기 제 M 대표 색상의 색상 차이 값을 산출하는 단계; 및
   상기 적어도 하나 이상의 대표 테마 색상에 설정된 제 M 유사 색상이, 상기 색상 차이 값에 따라 재설정되어 제 M 추천 유사 색상으로 설정되는 단계를 더 포함하는 것을 특징으로 하는,
   전체 테마 색상 편집 방법.
   
2. 제 1 항에 있어서,
   상기 색상 리스트는,
   상기 추출된 테마 색상들을, 상기 테마 색상 옵션에 포함된 요소 타입 순서에 기반하여 정렬하여 생성되며,
   상기 요소 타입 순서가 동일한 경우, 미리 설정된 요소의 우선 순위에 따라 정렬되는 것을 특징으로 하는,
   전체 테마 색상 편집 방법.
   
3. 삭제
4. 삭제
5. 삭제
6. 삭제
7. 제 1 항에 있어서,
   상기 추천 테마 색상을 제공하는 단계는,
   상기 미리 설정된 개수의 색상이 3 개 이상인 경우,
   상기 적어도 하나 이상의 대표 테마 색상에 설정된 적어도 하나의 제 M 보조 색상을, 상기 색상 차이 값에 따라 재설정하여 제 M 추천 보조 색상으로 설정되는 단계를 더 포함하는 것을 특징으로 하는,
   전체 테마 색상 편집 방법.
   
8. 제 1 항에 있어서,
   상기 추천 테마 색상을 제공하는 단계는
   미리 설정된 테마 프리셋 설정을 확인하는 단계; 및
   상기 테마 프리셋 설정에 따라, 상기 적어도 하나 이상의 대표 테마 색상들을 테마 프리셋에 기반하여, 추천 대표 테마 색상으로 설정하고,
   상기 테마 프리셋 설정에 따른 테마 프리셋 갯수가 상기 적어도 하나 이상의 대표 테마 색상들의 개수를 초과하는 경우, 상기 적어도 하나 이상의 대표 테마 색상들 중 보조 색상이 가장 많은 특정 대표 테마 색상과 연관된, 적어도 하나의 보조 색상들을, 상기 테마 프리셋 설정에 따라 테마 프리셋으로 생성하고, 생성된 태마 프리셋에 따라 추천 대표 테마 색상으로 설정되는 단계를 더 포함하는 것을 특징으로 하는,
   전체 테마 색상 편집 방법.
   
9. 삭제
10. 제 1 항에 있어서,
    상기 추천 테마 색상을 제공하는 단계는
    이미지 리소스에 기반하여, 사용자 특정 테마 색상을 설정하는 단계;
    미리 설정된 테마 프리셋 설정을 확인하는 단계; 및
    상기 테마 프리셋 설정에 따라, 상기 사용자 특정 테마 색상을 테마 프리셋으로 생성하여, 추천 대표 테마 색상으로 설정되는 단계를 포함하는 것을 특징으로 하는,
    전체 테마 색상 편집 방법.
    
11. 제 1 항에 있어서,
    상기 추천 테마 색상을 제공하는 단계는
    상기 생성된 적어도 하나 이상의 대표 테마 색상을 셔플(shuffle)하여, 추천 테마 색상으로 제공하는 단계를 더 포함하는 것을 특징으로 하는,
    전체 테마 색상 편집 방법.
    
12. 삭제