[국내논문]모바일 앱을 위한 배색 추천 시스템에 관한 연구 -머티리얼 디자인 컬러 시스템의 색채 추천 방법을 중심으로 A Study on Color Recommendation System for Mobile App -Focused on the Method of Color Recommendation for the Material Design Color System원문보기
본 연구는 모바일 앱 배색을 위한 색채 추천 시스템의 활용을 위한 연구이다. 이를 위해 선택 색상에 조화되는 색채를 자동으로 추천해주는 머티리얼 시스템과 모바일 웹 앱의 3 배색을 모바일 앱 디자인에 적용하여 배색 실험을 하였다. 그리고 두 가지 방법의 실험에 대한 설문으로 색상 구성과 선택 색상, 결과물의 만족도에 관한 정도를 리커트 7점 척도로 알아보았고, 결과물에 따른 배색 특징을 비교하여 분석하였다. 머티리얼 컬러 팔레트는 정해진 색상의 규칙적인 색조 단계를 자동으로 시스템화하여 색상 선택을 쉽게 하였지만, 모바일 웹 앱 3 배색인 주조색, 보조색, 강조색에 대한 색상 구성과 색상 범위가 다르며, 프라이머리 컬러와 세컨더리 컬러만 선택 가능하여 디자인에 따라 강조색의 선택 기능이 필요했다. 또한 머티리얼 시스템은 색상 범위와 배색 범위가 정해져 있기 때문에 유채색의 사용이 많았고, 대비가 큰 색조나 보색을 선택해도 배색 범위에 따라 배색 결과물의 이미지가 달라져서 배색 범위에 따른 색상 구성의 역할이 중요했다.
본 연구는 모바일 앱 배색을 위한 색채 추천 시스템의 활용을 위한 연구이다. 이를 위해 선택 색상에 조화되는 색채를 자동으로 추천해주는 머티리얼 시스템과 모바일 웹 앱의 3 배색을 모바일 앱 디자인에 적용하여 배색 실험을 하였다. 그리고 두 가지 방법의 실험에 대한 설문으로 색상 구성과 선택 색상, 결과물의 만족도에 관한 정도를 리커트 7점 척도로 알아보았고, 결과물에 따른 배색 특징을 비교하여 분석하였다. 머티리얼 컬러 팔레트는 정해진 색상의 규칙적인 색조 단계를 자동으로 시스템화하여 색상 선택을 쉽게 하였지만, 모바일 웹 앱 3 배색인 주조색, 보조색, 강조색에 대한 색상 구성과 색상 범위가 다르며, 프라이머리 컬러와 세컨더리 컬러만 선택 가능하여 디자인에 따라 강조색의 선택 기능이 필요했다. 또한 머티리얼 시스템은 색상 범위와 배색 범위가 정해져 있기 때문에 유채색의 사용이 많았고, 대비가 큰 색조나 보색을 선택해도 배색 범위에 따라 배색 결과물의 이미지가 달라져서 배색 범위에 따른 색상 구성의 역할이 중요했다.
This study is for the use of color recommendation system for the color combination of mobile application. For this study, color combination methods of a material design color system that recommends harmonized colors automatically and of a mobile web application were applied to a mobile application d...
This study is for the use of color recommendation system for the color combination of mobile application. For this study, color combination methods of a material design color system that recommends harmonized colors automatically and of a mobile web application were applied to a mobile application design and a color combination experiment was carried out. Then for a survey on the experiment using the two methods, color combinations, selected colors and satisfaction with outputs were investigated on a 7-point Likert scale. And color combination characteristics of outputs were compared. It was found that the material design color palette made it easy to select colors by systematizing the regular coloring stages of fixed colors automatically, but there were differences in color compositions and color scopes of dominant color, assort color and accent colors, which are three-color combinations of mobile web application and accent color selection function was required for each design, since only primary colors and secondary colors could be selected. Moreover, chromatic colors were used a lot in the material system because of the fixed color scopes and color combination scopes and images of color combination outcomes varied depending on the color combination scopes, even when tones with a big contrast or complementary colors were selected. The role of color composition was important according to the color combination scopes.
This study is for the use of color recommendation system for the color combination of mobile application. For this study, color combination methods of a material design color system that recommends harmonized colors automatically and of a mobile web application were applied to a mobile application design and a color combination experiment was carried out. Then for a survey on the experiment using the two methods, color combinations, selected colors and satisfaction with outputs were investigated on a 7-point Likert scale. And color combination characteristics of outputs were compared. It was found that the material design color palette made it easy to select colors by systematizing the regular coloring stages of fixed colors automatically, but there were differences in color compositions and color scopes of dominant color, assort color and accent colors, which are three-color combinations of mobile web application and accent color selection function was required for each design, since only primary colors and secondary colors could be selected. Moreover, chromatic colors were used a lot in the material system because of the fixed color scopes and color combination scopes and images of color combination outcomes varied depending on the color combination scopes, even when tones with a big contrast or complementary colors were selected. The role of color composition was important according to the color combination scopes.
* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.
문제 정의
배색에 관련한 다양한 방법들 또한 여러 배색 사이트를 통해 현재에도 진화하고 있기 때문에 디지털 색채 시스템을 어떻게 활용할 것인가에 대한 지속적인 연구가 필요할 것이다. 이에 본 연구는 모바일 앱 배색에 도움을 주는 색채 추천 시스템인 안드로이드 모바일 앱 디자인을 위한 구글의 머티리얼 디자인 컬러 시스템 (Material Design Color System)을 분석하여 그 특징을 알아보고, 모바일 웹 사이트와 웹 앱을 만들기 위한 HTML5 기반의 UI 프레임워크인 제이쿼리 모바일 (JQuery mobile, 이하 모바일 웹 앱으로 명명한다)에서 제공하는 배색 디자인을 도와주는 툴인 테마 롤러 (theme roller)에서 제안한 3 배색과 비교하여 배색 시스템의 장, 단점을 파악하고, 보완점은 무엇인지 알아보았다.
세 번째, 그래픽 소프트웨어 시스템인 어도비 일러스트레이터(Adobe Illustrator)에서 머티리얼 디자인 컬러 시스템과 모바일 웹 앱의 3 배색 시스템을 실험과 설문, 인터뷰를 통해 색상 구성과 선택, 배색 작업, 항목별 만족도, 배색 결과물, 배색 실험에 대한 조언 등에 대해 분석하였다. 마지막으로 배색 실험과 설문, 인터뷰의 결과를 분석하여 배색 시스템의 장, 단점을 도출하고, 향후 모바일 앱의 배색을 위한 색채 추천 시스템에 요구되는 보완점은 무엇인지 제시해보았다.
색을 매칭하는 용도로 널리 채용되는 색상 모델인 NCS 표색계를 관계형 데이터베이스로 매핑하고 대표적인 색 조화론 가운데 하나인 오스트발트(Ostwald)의 색조화론을 관계 대수로 질의 처리하는 방안을 제안함으로써 색의 조화를 수치화하고 정량화하는 연구를 진행하였다[2]. 이 연구는 색채 이론을 활용하여 선택한 색상에 대해 조화되는 다수의 색상을 찾아 추천하는 방식의 시스템 연구로 선택 색상에 대한 조화되는 색상 추천 시스템은 본연구와 관련이 있으나, 추천된 다수의 색상을 사용자가 디자인의 목적이나 의도에 맞게 색상 구성과 색상 재조정을 해야 하고, 배색 과정에서 시간적 소요가 요구되는점 등은 고려되지 않았다.
본 연구는 색채 이론을 바탕으로 객관적인 데이터 자료로 구성되어 실무에서도 활용 가능한 모바일 앱 배색을 위한 색채 추천 시스템 연구의 필요성을 인지하고, 기존에 연구되었던 안드로이드 모바일 앱 디자인을 위한 머티리얼 디자인 컬러 시스템과 모바일 웹 앱의 배색 시스템을 비교하여 분석해 보고, 배색 시스템의 장, 단점을 도출해보았다. 그리고 향후 모바일 앱 배색에 활용하기 위한 색채 추천 시스템에 필요한 사항은 무엇인지 보완 점을 제시해보고자 한다.
본 연구에서는 모바일 앱 배색에서 색채 추천 시스템의 활용을 위해 머티리얼 디자인 컬러 시스템과 모바일 웹 앱의 배색 시스템을 비교, 분석하여 배색 시스템의 장, 단점을 도출하고 보완점을 제시하였다.
본 연구는 색채 추천 서비스의 기능적인 사용성 연구 관점에서 벗어나 색채 이론 및 사용자의 모바일 색채 디자인 패턴을 바탕으로 모바일 앱 배색을 위한 색채 추천시스템의 보완점을 제시하였고, 색채 디자인 업무의 사용자 니즈를 서비스의 색채 정보 내용 및 구성 측면에서 개선하고자 하는데 연구의 의의가 있다. 후속 연구로 본 연구 결과를 바탕으로 모바일 앱 서비스와 기능을 분석 하고, 배색 시스템과 연결해 보며 모바일 전공자들의 피드백을 통해 모바일 앱의 배색 시스템에 맞는 색채 추천 시스템의 개발 방향을 제안해 보고자 한다.
본 연구는 색채 추천 서비스의 기능적인 사용성 연구 관점에서 벗어나 색채 이론 및 사용자의 모바일 색채 디자인 패턴을 바탕으로 모바일 앱 배색을 위한 색채 추천시스템의 보완점을 제시하였고, 색채 디자인 업무의 사용자 니즈를 서비스의 색채 정보 내용 및 구성 측면에서 개선하고자 하는데 연구의 의의가 있다. 후속 연구로 본 연구 결과를 바탕으로 모바일 앱 서비스와 기능을 분석 하고, 배색 시스템과 연결해 보며 모바일 전공자들의 피드백을 통해 모바일 앱의 배색 시스템에 맞는 색채 추천 시스템의 개발 방향을 제안해 보고자 한다.
제안 방법
연구 방법은 첫 번째, 색채 계획 의사 결정 시스템의 선행 연구를 분석하고, 선택 색상에 대해 조화되는 색상을 자동으로 보여주는 구글의 머티리얼 디자인 컬러 시스템(Material Design Color System)을 분석하여 그 특징을 알아보았다. 두 번째, 머티리얼 디자인 컬러 시스템의 색상 팔레트를 분석하기 위해 배색 조화와 색의 선호도에 관한 색채 이론가들의 연구와 선행 연구를 조사 하여 분석하였다.
연구 방법은 첫 번째, 색채 계획 의사 결정 시스템의 선행 연구를 분석하고, 선택 색상에 대해 조화되는 색상을 자동으로 보여주는 구글의 머티리얼 디자인 컬러 시스템(Material Design Color System)을 분석하여 그 특징을 알아보았다. 두 번째, 머티리얼 디자인 컬러 시스템의 색상 팔레트를 분석하기 위해 배색 조화와 색의 선호도에 관한 색채 이론가들의 연구와 선행 연구를 조사 하여 분석하였다. 세 번째, 그래픽 소프트웨어 시스템인 어도비 일러스트레이터(Adobe Illustrator)에서 머티리얼 디자인 컬러 시스템과 모바일 웹 앱의 3 배색 시스템을 실험과 설문, 인터뷰를 통해 색상 구성과 선택, 배색 작업, 항목별 만족도, 배색 결과물, 배색 실험에 대한 조언 등에 대해 분석하였다.
두 번째, 머티리얼 디자인 컬러 시스템의 색상 팔레트를 분석하기 위해 배색 조화와 색의 선호도에 관한 색채 이론가들의 연구와 선행 연구를 조사 하여 분석하였다. 세 번째, 그래픽 소프트웨어 시스템인 어도비 일러스트레이터(Adobe Illustrator)에서 머티리얼 디자인 컬러 시스템과 모바일 웹 앱의 3 배색 시스템을 실험과 설문, 인터뷰를 통해 색상 구성과 선택, 배색 작업, 항목별 만족도, 배색 결과물, 배색 실험에 대한 조언 등에 대해 분석하였다. 마지막으로 배색 실험과 설문, 인터뷰의 결과를 분석하여 배색 시스템의 장, 단점을 도출하고, 향후 모바일 앱의 배색을 위한 색채 추천 시스템에 요구되는 보완점은 무엇인지 제시해보았다.
선택한 색상에 대한 조화되는 색상의 추천 연구는 박은영(2010)의 연구로 사용자가 컴퓨터 시스템상에서 조화로운 색을 쉽게 찾을 수 있는 방법을 제안하였다. 색을 매칭하는 용도로 널리 채용되는 색상 모델인 NCS 표색계를 관계형 데이터베이스로 매핑하고 대표적인 색 조화론 가운데 하나인 오스트발트(Ostwald)의 색조화론을 관계 대수로 질의 처리하는 방안을 제안함으로써 색의 조화를 수치화하고 정량화하는 연구를 진행하였다[2]. 이 연구는 색채 이론을 활용하여 선택한 색상에 대해 조화되는 다수의 색상을 찾아 추천하는 방식의 시스템 연구로 선택 색상에 대한 조화되는 색상 추천 시스템은 본연구와 관련이 있으나, 추천된 다수의 색상을 사용자가 디자인의 목적이나 의도에 맞게 색상 구성과 색상 재조정을 해야 하고, 배색 과정에서 시간적 소요가 요구되는점 등은 고려되지 않았다.
Kita와 Miyata(2016)의 연구는 임의의 수의 색상을 포함 할 수 있는 주어진 색상표에 대한 등급 예측 모델을 제안하였다. 색채 디자인을 위한 웹 서비스인 컬러러버스(COLOURlover)에서 파스텔 및 레트로 팔레트를 수집하여 모델을 전문화하였으며, 제안된 색상 제안 방법을 컬러러버스의 2D 패턴 템플릿에 적용한 것이 특징이 다[4]. 이 연구는 선택 색상에 대한 조화색을 등급에 따라 추천하여 4색, 5색 또는 7색 팔레트의 확장 그룹으로 색상 변화를 보여주었다.
색채 디자인을 위한 웹 서비스인 컬러러버스(COLOURlover)에서 파스텔 및 레트로 팔레트를 수집하여 모델을 전문화하였으며, 제안된 색상 제안 방법을 컬러러버스의 2D 패턴 템플릿에 적용한 것이 특징이 다[4]. 이 연구는 선택 색상에 대한 조화색을 등급에 따라 추천하여 4색, 5색 또는 7색 팔레트의 확장 그룹으로 색상 변화를 보여주었다. 웹 프로그램의 2D 패턴 템플릿에 적용하여 결과물을 보여주었지만, 웹 사이트의 커뮤니티 콘텐츠(Community content)가 제작하고 공유한 팔레트 색상을 중심으로 조화 색상을 보여주기 때문에 이 연구 또한 검증을 통한 객관적이고 정확한 자료를 활용하는 연구는 아니었다[표 1].
모바일 앱 배색을 위한 색채 추천 시스템의 분석을 위해 안드로이드 모바일 앱 디자인을 위한 색채 추천 시스템인 머티리얼 디자인 컬러 시스템을 분석하였다.
머티리얼 디자인은 [그림 2]와 같이 컬러 툴(Color tool)이라는 색상 구성 도구인 팔레트를 만들어 모든 컬러 조합을 도와주며 팔레트를 사용해서 사용자 인터페이스(UI)에 배색이 가능하게 하였다. 컬러 툴의 기본 구조는 머티리얼 컬러의 기본 색상으로 구성된 팔레트와 색상환(Color Wheel)과 슬라이드 바(Slide bar)로 구성된 Custom으로 되어 있고, 제공되는 컬러 팔레트에 원하는 색상이 없을 경우 이 기능을 활용할 수 있다.
머티리얼 디자인 컬러의 제일 밝은 단계 50과 어두운 900단계 색조의 밝고, 어두운 정도를 알아보기 위해 한국산업규격(KS A 0011)의 색조(hue & tone)와 비교해 보았다.
색조로 이루어진 머티리얼 디자인 컬러 팔레트의 색상 구성에 대해 알아보기 위해 머티리얼 컬러 팔레트와 연관성이 있는 색조와 색채 조화, 색의 선호도에 관한 색채 연구와 선행 연구를 분석하였다.
모바일 앱 배색을 위한 색채 추천 시스템의 연구를 위해 머티리얼 디자인 컬러 시스템과 모바일 웹 앱의 3 배색의 배색 시스템을 비교해 보았다.
본 연구에서는 [표 3]과 같이 각각 모바일 웹 앱 3 배색의 주조색, 보조색, 강조색과 머티리얼 디자인 컬러 시스템의 프라이머리 컬러와 세컨더리 컬러의 색상 구성과 배색 범위를 따랐다.
본 연구의 실험 방법은 머티리얼 디자인 컬러 시스템과 모바일 웹 앱 3 배색의 배색 구성과 배색 범위가 고정 되어 있기 때문에 머티리얼 디자인 컬러 시스템과 모바일 웹 앱의 3 배색 방법에 따라 배색을 진행하였고, 실험 전에 실험자들에게 배색 방법, 배색 순서, 배색 범위 등의 배색 가이드를 제공하고 숙지시킨 후 컨셉(concept)을 제시하고 실험을 실시하였다.
실험을 위해 실험자들에게 숙지시킨 배색 가이드는 다음과 같다. 첫째, 머티리얼 디자인 컬러 시스템의 실험은 머티리얼 디자인 컬러 팔레트(Material color Palette) 에서 원하는 색상의 배색이 될 때까지 프라이머리 컬러에 조화되는 세컨더리 컬러를 선택하고, 어도비 일러스트레이터에 모바일 앱 디자인 샘플 레이아웃(layout)을 불러온 후 머티리얼 디자인 컬러 팔레트에서 선택한 색상들을 [표 3]의 머티리얼 디자인 컬러 시스템 배색 범위에 맞춰 배색하였다. 실험자가 원하는 컨셉에 맞는 배색이 될 때까지 위의 과정을 반복해서 배색 작업을 진행하고 결과물과 선택한 머티리얼 디자인 컬러 팔레트의 프라이머리 컬러와 세컨더리 컬러의 캡처(capture) 파일을 저장했다.
첫째, 머티리얼 디자인 컬러 시스템의 실험은 머티리얼 디자인 컬러 팔레트(Material color Palette) 에서 원하는 색상의 배색이 될 때까지 프라이머리 컬러에 조화되는 세컨더리 컬러를 선택하고, 어도비 일러스트레이터에 모바일 앱 디자인 샘플 레이아웃(layout)을 불러온 후 머티리얼 디자인 컬러 팔레트에서 선택한 색상들을 [표 3]의 머티리얼 디자인 컬러 시스템 배색 범위에 맞춰 배색하였다. 실험자가 원하는 컨셉에 맞는 배색이 될 때까지 위의 과정을 반복해서 배색 작업을 진행하고 결과물과 선택한 머티리얼 디자인 컬러 팔레트의 프라이머리 컬러와 세컨더리 컬러의 캡처(capture) 파일을 저장했다.
둘째, 모바일 웹 앱의 3 배색 실험은 모바일 앱 디자인 샘플의 레이아웃을 불러 온 후 어도비 일러스트레이터의 컬러 피커(color picker), 컬러 팔레트, 스와치 (Swatches) 등을 활용하여 주조색을 선택하고, 주조색에 어울리는 보조색, 강조색, Text 색상을 선택했다. 그리고 실험자가 원하는 색상이 될 때까지 색상, 명도, 채도를 수정한 후 [표 3]의 모바일 웹 앱의 배색 범위에 맞게 색상을 적용하여 배색을 진행하였다.
둘째, 모바일 웹 앱의 3 배색 실험은 모바일 앱 디자인 샘플의 레이아웃을 불러 온 후 어도비 일러스트레이터의 컬러 피커(color picker), 컬러 팔레트, 스와치 (Swatches) 등을 활용하여 주조색을 선택하고, 주조색에 어울리는 보조색, 강조색, Text 색상을 선택했다. 그리고 실험자가 원하는 색상이 될 때까지 색상, 명도, 채도를 수정한 후 [표 3]의 모바일 웹 앱의 배색 범위에 맞게 색상을 적용하여 배색을 진행하였다.
실험자들에게 실험 전에 템플릿 디자인 샘플의 컨셉을 설명하였고, 색상 구성에서 머티리얼 디자인 컬러 시스템은 프라이머리 컬러와 세컨더리 컬러, 그것에 맞게 추천되는 Text의 색상으로 배색하고, 모바일 웹 앱의 3 배색 방법은 주조색, 보조색, 강조색의 3 배색을 기준으로 3 색 이상의 색상을 선택하여 배색하도록 하였다.
사전 실험에서 한 명의 실험자가 머티리얼 디자인 컬러 시스템과 모바일 웹 앱의 3 배색을 같이 실험한 경우 두 번째 배색 실험에서 먼저 실험한 배색 실험의 영향을 받았고, 실험 시간이 길어져 집중도가 낮아졌기 때문에 공정한 실험이 어려웠다. 그래서 본 연구에서는 전공별로 5명씩 나누어 머티리얼 디자인 컬러 시스템과 모바일웹 앱의 3 배색 실험 후 설문과 인터뷰를 진행하였다.
설문과 인터뷰는 색상 선택과 배색에 대한 사항과 팔레트나 스와치(Swatches)의 활용, 색상 선택 방법, 색상 구성, 배색 범위와 선택 색상의 배치, 선택 색상과 조화 등의 항목별 만족도와 배색 작업이나 결과물의 만족도, 배색 실험에 대한 조언 등을 리커트 7점 척도와 의견을 묻는 개방형 설문과 인터뷰의 내용으로 구성하였다[표 4].
첫째, 팔레트가 구성된 시스템과 실험자가 직접 색상을 선택하는 시스템에서 선택한 색상 수를 알아보았다. 머티리얼 디자인 컬러 시스템의 배색은 컨셉을 고려하여UI의 큰 영역을 중심으로 배색하였다.
선택한 프라이머리 컬러와 세컨더리 컬러의 추천 색상들로 배색하였으며, 예외의 색상을 선택했다. 프라이머리 컬러, 세컨더리 컬러, 예외의 전체 선택 색상 수는 4-6 색상이며, 텍스트 색상으로는 추천된 색상을 사용하였다[표 5].
둘째, 색조로 구성된 팔레트에서 색상을 선택하고 자동 추천된 색상과 실험자들이 직접 선택한 색상들을 알아보았다. 머티리얼 디자인 컬러 시스템의 프라이머리 컬러와 세컨더리 컬러의 선택에서 실험 1은 대비되는 색상의 색조 차이가 큰 색상을 선택하고, 실험 2, 5는 동일 계열 색상을 선택하였으며, 실험 3은 색조가 같은 대비 되는 색상으로 선택하였다.
둘째, 색조로 구성된 팔레트에서 색상을 선택하고 자동 추천된 색상과 실험자들이 직접 선택한 색상들을 알아보았다. 머티리얼 디자인 컬러 시스템의 프라이머리 컬러와 세컨더리 컬러의 선택에서 실험 1은 대비되는 색상의 색조 차이가 큰 색상을 선택하고, 실험 2, 5는 동일 계열 색상을 선택하였으며, 실험 3은 색조가 같은 대비 되는 색상으로 선택하였다. 실험 3, 5는 예외의 색상으로 Card에 흰색을 사용했다[그림 4].
모바일 웹 앱의 배색에서 실험자들의 선택 색상은 동일 색상과 유사 색상의 색조를 선택하였고, 머티리얼 디자인 컬러 시스템보다 부드러운 색조 단계가 되었다. 실험 2는 어도비 일러스트레이터 스와치의 Nature-landscape 팔레트 색상을 적용하였고, 실험 3은 어도비 일러스트레이터 팬톤의 Solid coated 팔레트 에서 색상을 선택하여 배색 작업을 진행하였다[그림 5].
셋째, 선택 색상과 추천 색상을 그대로 활용한 색상 구성과 선택 색상을 재조정한 색상 구성의 색조 차이를 알아보기 위해 선택 색상에 대한 밝고 어두운 정도를 알아보았다. 흰색이 100%, 검정이 0%일 때 머티리얼 디자인 컬러 시스템의 배색에서 실험자들은 프라이머리 컬러, 세컨더리 컬러, 예외의 색상을 각각 밝고 어두운 단계의 색상을 같이 선택하였는데, 색상 선택에 따라 추천된 밝고 어두운 색채를 골고루 활용하였다[표 7].
셋째, 선택 색상과 추천 색상을 그대로 활용한 색상 구성과 선택 색상을 재조정한 색상 구성의 색조 차이를 알아보기 위해 선택 색상에 대한 밝고 어두운 정도를 알아보았다. 흰색이 100%, 검정이 0%일 때 머티리얼 디자인 컬러 시스템의 배색에서 실험자들은 프라이머리 컬러, 세컨더리 컬러, 예외의 색상을 각각 밝고 어두운 단계의 색상을 같이 선택하였는데, 색상 선택에 따라 추천된 밝고 어두운 색채를 골고루 활용하였다[표 7].
실험 3은 프라이머리 컬러와 세컨더리 컬러를 대비되는 색상의 동일 색조로 배색하여 색상 대비의 실험 1, 4의 결과물보다 강렬한 이미지를 주었다. 주의와 예외에는 다른 색상을 선택하도록 하였고, 배색 범위가 고정되어 있었지만, 실험을 진행하면서 색상의 부족과 한계로 실험 2는 세컨더리 컬러의 배색 범위 (Buttons/ Links)에 프라이머리 컬러의 색상을 선택하고, 실험 3, 5는 프라이머리 컬러의 배색 범위(Body/ Background/ Card)에 다른 색상을 선택하여 배색하였 다. 실험 4의 프라이머리 컬러와 세컨더리 컬러는 색조의 차이는 크지 않지만 대비되는 색상을 선택하여 Sliders/ button/ Links에 배색하였고, UI 큰 영역에 흰색과 연한(pl)색조와 밝은(lt)색조를 배색하여 실험 3 보다 부드럽고 편안한 이미지의 배색이 되었다.
모바일 웹 앱의 3 배색 실험에서는 색상 선택과 배색에 제한을 두지 않았지만, 실험 2를 제외하고 머티리얼 컬러 시스템의 배색 결과물보다 UI 의 큰 영역(Body/ Background/ Card)에 흰색이나 연한(pl)색조, 밝은(lt)색조의 사용이 많았다. Text 색상은 실험 2, 3, 4, 5에서 무채색인 흰색과 검정(White,black), 그레이 계열의 색상을 사용하였고, 실험 2는 보조색, 실험 3은 어두운 파랑 계열의 색상, 실험 4는 브랜드 로고의 색상을 선택하였는데, 색상 선택이 자유로워 머티리얼 디자인 컬러 시스템보다 다양한 색상을 사용하였다[그림 7].
다섯째, 배색 시스템의 분석으로 머티리얼 디자인 컬러 시스템은 선택 색상에 대해 조화되는 밝고(P, S— Light), 어두운(P, S—Dark) 두 가지의 색채를 보여주고, 선택한 색상 범위에서 배색하기 때문에 색상 선택과 구성에 어려움이 없었지만, 선택 가능한 색상의 한계가 있었다. 그러므로 세컨더리 컬러의 배색 범위인 Buttons/ Sliders/ Floating action button/ Links/ Controls 부분에 세컨더리 컬러만 사용하도록 고정되어 있어 강조색이 필요한 부분의 배색 완성도가 낮다고 평가하였다. 명도, 채도의 재조정 또한 불가능하여 실험자가 원하는 색상의 배색은 어려웠다고 답하였다.
또한 색조의 대비가 큰 보색의 배색에도 배색 범위에 따라 결과물의 이미지 또한 달라져서 배색 범위에 따른 색상 구성의 역할이 중요하게 나타났다. 실험자들은 먼저 UI 큰 영역의 색상을 선택하여 배색하였고, 그에 따라 결과물의 이미지가 결정되었다. UI 큰 영역에 밝고, 어두운 앱을 구분하는 흰색과 검정을 배색할 수 있게 고정한다면 디자인과 컨셉에 따른 색상 구성의 역할을 할 수 있을 것이다.
대상 데이터
실험에 사용된 모바일 앱 디자인은 이미지와 강조의 부분, Text 등의 디자인을 고루 갖추고 주조색, 보조색, 강조색의 배색을 할 수 있는 디자인을 선택했고, 머티리얼 디자인 컬러 시스템에서 디자인한 모바일 앱 디자인 Crane을 재정리하여 활용했다. 템플릿 디자인은 사용자가 여행을 위해 숙박 및 레스토랑 옵션을 찾고 비행기표를 예약할 수 있는 여행 관련 모바일 앱이며, 컨셉은 여행, 자유, 하늘이고 4개의 템플릿으로 구성했다[그림 3].
실험자는 모바일 앱 2명, 시각 디자인 6명, 산업 디자인 2명의 실무자와 학생 등 10명의 다양한 전공 분야로 구성하여 배색 실험을 하고 설문과 인터뷰를 진행하였다. 사전 실험에서 한 명의 실험자가 머티리얼 디자인 컬러 시스템과 모바일 웹 앱의 3 배색을 같이 실험한 경우 두 번째 배색 실험에서 먼저 실험한 배색 실험의 영향을 받았고, 실험 시간이 길어져 집중도가 낮아졌기 때문에 공정한 실험이 어려웠다.
성능/효과
머티리얼 디자인의 기본 색상 50-900의 색조 단계, 악센트 컬러의 규칙적인 색조 단계, 그리고 프라이머리 컬러와 세컨더리 컬러를 선택했을 때 보여주는 밝고 (P, S—Light), 어두운(P, S—Dark) 규칙적인 색조 단계 에서 셋째, 적당한 명도 차이의 원칙을 볼 수 있었다.
또한 머티리얼 컬러 핑크의 가장 밝은 50 단계는 94%이고, 한국산업규격의 hue & tone에서 가장 밝은 whitish(wh)는 91%로 머티리얼 컬러의 50단 계가 밝았으며, 둘째의 높은 명도의 원리와 연관성이 있었다.
색상의 밝고 어두운 정도가 흰색 100%, 검정 0%일 때, 머티리얼 컬러 레드의 가장 어두운 900단계는 42%, 한국산업규격의 hue & tone에서 가장 어두운 blackish(bk)는 22%, Dark(dk)는 23%로 머티리얼 컬러의 900단계가 밝은 것을 알 수 있다.
그의 연구는 첫째, 색채 조화에 큰 영향을 미치며, 색상 차이의 효과를 기본으로 하여 두 색상이 동일한 채도의 특성을 가질 때 더욱 두드러진다는 동일색조의 법칙과 둘째, 구성 요소의 색상이 가벼울수록 색상 조화 점수가 높으며, 이것은 사람들이 밝은 색을 함께 볼 때 즐겁게 느끼는 경향이 있다는 것을 의미하는 높은 명도의 원리, 셋째, 명도 차이의 효과는 조화된 색상 조합에서 극도로 작거나 매우 큰 크기의 명도 차이를 가져서는 안 되며, 위의 두 가지 원칙도 함께 적용된다면 이 효과는 유의하지 않아도 된다는 적당한 명도 차이의 원칙, 넷째, 파란색은 단일 색상 선호도에 관해 가장 선호하는 색상으로 널리 여겨져 왔고, 이는 파란색으로 구성된 색상 쌍이 조화를 이루는 경향이 있는 이유 중 하나일 수 있으나, 이 효과는 상위 두 원칙을 적용할 때 무시될 수 있다는 파란색의 원리를 제시했다 [11]. 이 연구의 첫째, 동일 색조의 법칙은 머티리얼 디자인 컬러의 특징인 19가지 기본 색상의 규칙적인 10단 계의 색조 구성과 머티리얼 컬러와 세컨더리 컬러의 밝고(Light), 어두운(Dark) 규칙적인 단계의 색조를 활용한 배색과 연관 지을 수 있다. 머티리얼 디자인 컬러의 제일 밝은 단계 50과 어두운 900단계 색조의 밝고, 어두운 정도를 알아보기 위해 한국산업규격(KS A 0011)의 색조(hue & tone)와 비교해 보았다.
[표 6]과 같이 주조색이나 보조색 보다 강조색의 선택이 많았고, 실험자 모두 보조색은 1 색상을 선택했다. 텍스트 색상 선택에서는 정해진 색상만 사용한 머티리얼 컬러 시스템보다 모바일 웹 앱에서 색상 선택이 많았다. 주조색, 보조색, 강조색의 전체 선택 색상 수는 5-7 색상이었으며, 텍스트 색상에서는 머티리얼 컬러 시스템보다 선택 색상 수가 많았다.
텍스트 색상 선택에서는 정해진 색상만 사용한 머티리얼 컬러 시스템보다 모바일 웹 앱에서 색상 선택이 많았다. 주조색, 보조색, 강조색의 전체 선택 색상 수는 5-7 색상이었으며, 텍스트 색상에서는 머티리얼 컬러 시스템보다 선택 색상 수가 많았다.
모바일 웹 앱의 배색에서 실험자들의 선택 색상은 동일 색상과 유사 색상의 색조를 선택하였고, 머티리얼 디자인 컬러 시스템보다 부드러운 색조 단계가 되었다. 실험 2는 어도비 일러스트레이터 스와치의 Nature-landscape 팔레트 색상을 적용하였고, 실험 3은 어도비 일러스트레이터 팬톤의 Solid coated 팔레트 에서 색상을 선택하여 배색 작업을 진행하였다[그림 5].
넷째, 배색 결과물의 분석으로 실험 1은 프라이머리 컬러와 세컨더리 컬러를 대비되는 색상의 색조 차이가 큰 색상을 선택하여 UI 큰 영역과 강조, 예외 범위의 색상을 확실하게 구분하였고, 실험 2, 5는 프라이머리 컬러와 세컨더리 컬러를 동일 계열 색상을 선택하고 색조의 대비를 크게 하여 통일감 있고 강조되는 이미지의 배색이 되었다. 실험 3은 프라이머리 컬러와 세컨더리 컬러를 대비되는 색상의 동일 색조로 배색하여 색상 대비의 실험 1, 4의 결과물보다 강렬한 이미지를 주었다.
넷째, 배색 결과물의 분석으로 실험 1은 프라이머리 컬러와 세컨더리 컬러를 대비되는 색상의 색조 차이가 큰 색상을 선택하여 UI 큰 영역과 강조, 예외 범위의 색상을 확실하게 구분하였고, 실험 2, 5는 프라이머리 컬러와 세컨더리 컬러를 동일 계열 색상을 선택하고 색조의 대비를 크게 하여 통일감 있고 강조되는 이미지의 배색이 되었다. 실험 3은 프라이머리 컬러와 세컨더리 컬러를 대비되는 색상의 동일 색조로 배색하여 색상 대비의 실험 1, 4의 결과물보다 강렬한 이미지를 주었다. 주의와 예외에는 다른 색상을 선택하도록 하였고, 배색 범위가 고정되어 있었지만, 실험을 진행하면서 색상의 부족과 한계로 실험 2는 세컨더리 컬러의 배색 범위 (Buttons/ Links)에 프라이머리 컬러의 색상을 선택하고, 실험 3, 5는 프라이머리 컬러의 배색 범위(Body/ Background/ Card)에 다른 색상을 선택하여 배색하였 다.
실험 1, 3 은 색조의 대비가 큰 배색을 하였지만, 보조색 범위 (Bar/ Tab)와 강조색의 배색 범위가 달라 배색 결과물 에서 강한 이미지가 아닌 부드러운 이미지의 배색이 되었다. 주조색, 보조색, 강조색의 배색 범위에 따른 색상 선택과 배색으로 색상 구성의 역할이 확실하게 나타났으며, 주조색과 보조색이나 강조색의 배색 범위에 대한 색상 대비가 커도 강한 이미지의 배색 결과물은 아니었다. 실험 2, 5는 동일 색상의 색조로 배색하였는데, 실험 1, 3보다 주조색의 배색 범위(Body/ Background/ Card) 의 색조 대비를 크게 하여 부드러운 이미지보다 강한 이미지의 배색이 되었다.
명도, 채도의 재조정 또한 불가능하여 실험자가 원하는 색상의 배색은 어려웠다고 답하였다. 모바일웹 앱의 3 배색을 활용한 배색에서는 선택할 수 있는 색상의 수가 많아서 실험자가 원하는 색상 선택과 그에 따른 다양한 배색이 가능하고, 팔레트나 스와치에서 선택한 색상도 실험자가 생각하는 컨셉에 맞는 배색을 위해 색상, 명도, 채도의 재조정이 필요했으며, 배색 작업 진행 중 색상 선택부터 재조정이 가능하다는 것을 장점으로 평가하였다. 그러나 색상 선택 범위가 넓어 색상 선택에 시간이 소요된다는 단점도 있었다.
그러나 색상 선택 범위가 넓어 색상 선택에 시간이 소요된다는 단점도 있었다. 스와치의 넓은 범위와 다수의 색상 선택이 가능하고, 디자인 전체의 작업 활용이 좋으며, 타 프로그램과의 접목이 쉽다는 의견도 있었다.
항목별 만족도는 전체적으로 머티리얼 디자인 컬러 시스템이 모바일 웹 앱 보다 점수가 낮았다. 배색 작업 과정에서 색상 선택 방법과 색상 구성의 만족도는 머티리얼 디자인 컬러 시스템의 배색은 점수가 높았고, 반대로 모바일 웹 앱의 배색은 점수가 낮았다.
항목별 만족도는 전체적으로 머티리얼 디자인 컬러 시스템이 모바일 웹 앱 보다 점수가 낮았다. 배색 작업 과정에서 색상 선택 방법과 색상 구성의 만족도는 머티리얼 디자인 컬러 시스템의 배색은 점수가 높았고, 반대로 모바일 웹 앱의 배색은 점수가 낮았다. 머티리얼 디자인 컬러 시스템에서 팔레트의 활용은 긍정적이었지만, 선택 색상에 대한 배색 범위의 조정은 점수가 낮았다.
머티리얼 디자인 컬러 시스템에서 팔레트의 활용은 긍정적이었지만, 선택 색상에 대한 배색 범위의 조정은 점수가 낮았다. 모바일 웹 앱에서는 팔레트나 스와치의 활용에서 점수가 낮았고, 배색 작업의 변경에 따라 색상 조정이 가능하여 배색 만족도의 점수가 높았다. 향후 시스템의 활용 의향에서 머티리얼 디자인 컬러 시스템은 가장 낮은 점수였고, 모바일 웹 앱은 가장 점수가 높았다[표 9].
모바일 웹 앱에서는 팔레트나 스와치의 활용에서 점수가 낮았고, 배색 작업의 변경에 따라 색상 조정이 가능하여 배색 만족도의 점수가 높았다. 향후 시스템의 활용 의향에서 머티리얼 디자인 컬러 시스템은 가장 낮은 점수였고, 모바일 웹 앱은 가장 점수가 높았다[표 9].
이상의 실험과 설문을 종합하면 첫째, 색상 선택과 배색은 UI의 큰 영역을 중심으로 프라이머리 컬러와 주조 색을 먼저 배색하여 다른 배색 영역의 색상 선택에 기준이 되었다. 팔레트가 구성된 머티리얼 컬러 시스템은 프라이머리 컬러로 UI의 큰 영역인 Header/ Body/ Background/ Card 부분에 함께 배색하고, 세컨더리 컬러도 강조와 예외의 부분에 함께 배색하기 때문에 각각의 선택 색상 수가 모바일 웹 앱의 주조색과 보조색보다 많았다.
이상의 실험과 설문을 종합하면 첫째, 색상 선택과 배색은 UI의 큰 영역을 중심으로 프라이머리 컬러와 주조 색을 먼저 배색하여 다른 배색 영역의 색상 선택에 기준이 되었다. 팔레트가 구성된 머티리얼 컬러 시스템은 프라이머리 컬러로 UI의 큰 영역인 Header/ Body/ Background/ Card 부분에 함께 배색하고, 세컨더리 컬러도 강조와 예외의 부분에 함께 배색하기 때문에 각각의 선택 색상 수가 모바일 웹 앱의 주조색과 보조색보다 많았다. 예외의 색상으로 추천 색상 외에 다른 색상을 함께 선택하였고, 모바일 웹 앱의 강조색도 주조색이나 보조색보다 많은 수의 색상을 선택하여 강조색 부분의 필요성도 보여주었다.
팔레트가 구성된 머티리얼 컬러 시스템은 프라이머리 컬러로 UI의 큰 영역인 Header/ Body/ Background/ Card 부분에 함께 배색하고, 세컨더리 컬러도 강조와 예외의 부분에 함께 배색하기 때문에 각각의 선택 색상 수가 모바일 웹 앱의 주조색과 보조색보다 많았다. 예외의 색상으로 추천 색상 외에 다른 색상을 함께 선택하였고, 모바일 웹 앱의 강조색도 주조색이나 보조색보다 많은 수의 색상을 선택하여 강조색 부분의 필요성도 보여주었다. 머티리얼 컬러 시스템의 프라이머리 컬러, 세컨더리 컬러, 예외의 전체 선택 색상은 4-6 색상, 모바일 웹 앱에서 선택한 주조색, 보조색, 강조색의 전체 선택 색상 수는 5-7 색상으로 크게 차이 나지 않았고, 텍스트 색상을 제외하고 4-7 색상 사이에서 배색이 이루어졌다.
둘째, 모바일 웹 앱의 배색에서는 브랜드 색상의 선택이 있었고, 팔레트에서 색상을 선택해도 실험자가 원하는 색상으로 재조정하였다. 머티리얼 컬러 시스템은 흰색을 UI의 큰 영역인 Card 부분에 사용하기 위해 예외의 색상으로 선택하였고, 모바일 웹 앱에도 UI의 큰 영역에 흰색과 밝은 단계의 색상을 사용하여, UI의 큰 영역에 밝은 색상의 사용이 많았다.
셋째, 색상 선택에서 색상 팔레트가 고정되어 있어 색상 재조정을 할 수 없는 머티리얼 컬러 시스템은 프라이 머리 컬러와 세컨더리 컬러가 중간 단계와 어두운 단계 그리고 밝은 단계의 색상이 선택되었다. 그러나 모바일 웹 앱은 주조색, 보조색에서 밝은 단계와 중간 단계의 색상을 선택하여 배색 범위의 구분을 확실하게 하였다.
그러나 모바일 웹 앱은 주조색, 보조색에서 밝은 단계와 중간 단계의 색상을 선택하여 배색 범위의 구분을 확실하게 하였다. 강조색은 밝고, 어둡고, 중간 단계의 색조를 고루 선택하여 주조색의 색조 단계와 강조색의 색조 단계 차이가 컸다.
넷째, 머티리얼 컬러 팔레트는 가장 밝은 50 단계의 색상을 선택하면 자동으로 추천되는 밝은 색조의 색채만 흰색으로 구성되어 있기 때문에 모바일 웹 앱의 3 배색을 활용한 배색의 디자인보다 UI의 큰 영역에 유채색의 배색이 많았고, 결과물에서도 모바일 웹 앱의 3 배색보다 다수의 색상을 활용한 것으로 보이며, 결과물의 이미 지도 달라졌다. 또한 머티리얼 디자인 컬러 시스템에서는 모바일 앱의 디자인에 따라 프라이머리 컬러를 사용 하는 UI의 큰 영역보다 세컨더리 컬러의 배색 영역이 넓은 경우도 있어 배색 범위에 따라 색상의 역할이 중요했다.
다섯째, 머티리얼 디자인 컬러 시스템은 팔레트의 색상 수가 적고, 배색 시스템의 특징으로 색상 선택과 구성에 어려움이 없으며, 작업 시간이 단축되는 장점이 있었다. 그러나 색상 선택의 한계와 강조색의 필요, 색상 재조정의 기능이 요구되었다.
향후 모바일 앱 배색을 위한 색채 추천 시스템의 효율 적인 활용을 위한 보완으로 첫째, 모바일 앱의 배색은 디자인에 따라 4-7 색상 사이에서 배색이 가능했다. 머티리얼 컬러 시스템의 프라이머리 컬러와 세컨더리 컬러의 추천된 색상과 색조 수와도 크게 차이 나지 않기 때문에 다수의 색상 선택은 필요하지 않았다.
둘째, 조화되는 색상을 자동으로 보여주는 색채 추천 시스템인 머티리얼 디자인 컬러 시스템은 강조색의 구성 방법이 불분명한 점이 단점으로 부각되었다. 강조색을 위한 선택 시스템 기능의 보완이 필요할 것이다.
셋째, 실험자들은 명도와 채도의 조정 기능을 필요로 했지만, 실험자들이 선택한 색상들은 밝고 어두운 단계와 중간 단계의 색상을 고루 선택하여 배색하였다. 머티리얼 컬러 시스템의 선택 색상에 대해 추천되는 색조를 배색 범위에 따라 밝은 단계, 중간 단계, 어두운 단계로 구분하여 추천하는 기능으로 보완 가능할 것이다.
넷째, 머티리얼 디자인 컬러 시스템은 팔레트의 색상 수와 선택 색상의 수가 적었지만, 결과물에서 보색을 활용한 배색과 UI의 큰 영역에 유채색의 사용 등 모바일 웹 앱의 3 배색보다 실험적이고 과감한 배색의 특징을 볼 수 있었다. 또한 색조의 대비가 큰 보색의 배색에도 배색 범위에 따라 결과물의 이미지 또한 달라져서 배색 범위에 따른 색상 구성의 역할이 중요하게 나타났다.
후속연구
배색의 자동화에 관한 디지털 색채 추천 시스템에 관한 연구는 배색 디자인에 도움을 주며, 인간의 감성에 대한 색채를 컴퓨터의 배색 시스템에 의해 조화로운 배색으로 디자인에 활용할 수 있게 한다. 배색에 관련한 다양한 방법들 또한 여러 배색 사이트를 통해 현재에도 진화하고 있기 때문에 디지털 색채 시스템을 어떻게 활용할 것인가에 대한 지속적인 연구가 필요할 것이다. 이에 본 연구는 모바일 앱 배색에 도움을 주는 색채 추천 시스템인 안드로이드 모바일 앱 디자인을 위한 구글의 머티리얼 디자인 컬러 시스템 (Material Design Color System)을 분석하여 그 특징을 알아보고, 모바일 웹 사이트와 웹 앱을 만들기 위한 HTML5 기반의 UI 프레임워크인 제이쿼리 모바일 (JQuery mobile, 이하 모바일 웹 앱으로 명명한다)에서 제공하는 배색 디자인을 도와주는 툴인 테마 롤러 (theme roller)에서 제안한 3 배색과 비교하여 배색 시스템의 장, 단점을 파악하고, 보완점은 무엇인지 알아보았다.
본 연구는 색채 이론을 바탕으로 객관적인 데이터 자료로 구성되어 실무에서도 활용 가능한 모바일 앱 배색을 위한 색채 추천 시스템 연구의 필요성을 인지하고, 기존에 연구되었던 안드로이드 모바일 앱 디자인을 위한 머티리얼 디자인 컬러 시스템과 모바일 웹 앱의 배색 시스템을 비교하여 분석해 보고, 배색 시스템의 장, 단점을 도출해보았다. 그리고 향후 모바일 앱 배색에 활용하기 위한 색채 추천 시스템에 필요한 사항은 무엇인지 보완 점을 제시해보고자 한다.
머티리얼 컬러 시스템의 프라이머리 컬러와 세컨더리 컬러의 추천된 색상과 색조 수와도 크게 차이 나지 않기 때문에 다수의 색상 선택은 필요하지 않았다. 그러므로 프라이 머리 컬러와 세컨더리 컬러 각각의 추천된 색상으로 여러 배색 범위에 함께 배색하는 시스템을 배색 범위에 따라 색상 구성을 세분화하여 추천하는 것으로 실험자들이 원하는 넓은 색상 범위에 대한 보완이 가능할 것이다.
둘째, 조화되는 색상을 자동으로 보여주는 색채 추천 시스템인 머티리얼 디자인 컬러 시스템은 강조색의 구성 방법이 불분명한 점이 단점으로 부각되었다. 강조색을 위한 선택 시스템 기능의 보완이 필요할 것이다.
셋째, 실험자들은 명도와 채도의 조정 기능을 필요로 했지만, 실험자들이 선택한 색상들은 밝고 어두운 단계와 중간 단계의 색상을 고루 선택하여 배색하였다. 머티리얼 컬러 시스템의 선택 색상에 대해 추천되는 색조를 배색 범위에 따라 밝은 단계, 중간 단계, 어두운 단계로 구분하여 추천하는 기능으로 보완 가능할 것이다.
실험자들은 먼저 UI 큰 영역의 색상을 선택하여 배색하였고, 그에 따라 결과물의 이미지가 결정되었다. UI 큰 영역에 밝고, 어두운 앱을 구분하는 흰색과 검정을 배색할 수 있게 고정한다면 디자인과 컨셉에 따른 색상 구성의 역할을 할 수 있을 것이다.
질의응답
핵심어
질문
논문에서 추출한 답변
머티리얼 디자인의 컬러 팔레트의 색 구성은 어떠한가?
머티리얼 디자인(Material Design)은 2014년 구글에서 처음 발표한 디자인 시스템이며, 색조를 활용한 배색이 머티리얼 디자인 컬러의 특징이다. 머티리얼 디자인의 컬러 팔레트는 텍스트 색상인 무채색(Black, White) 을 포함하지 않고, Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, Blue Grey인 19개의 기본 색상(hue)과 그 색상의 색조(shade)로 구성되어 있다. 색조에는 50에서 900의 번호를 가진 밝고 어두운 10단계와 A100, A200, A400, A700의 4단계 악센트 컬러 색조가 포함되어 있으나, Brown, Grey, Blue Grey의 색상에는 악센트 색조가 없어 모두 254개의 색조로 구성 되었다[그림 1].
색채 계획 의사 결정 지원 시스템이란?
색채 계획 의사 결정 지원 시스템(Decision support system)이란 사용자가 원하는 분위기의 색상을 고려하여 주색을 찾고, 주색에 조화되는 컬러를 추천해 대상 공간의 색채 계획을 완성해 가도록 도와주는 의사 결정 지원 시스템을 일컫는다[1]. 색채 계획 의사 결정 지원 시스템에 관한 연구는 대부분 색채 이론을 바탕으로 연구 되어 주조색에 관한 조화되는 다수의 색상을 추천하는 시스템이며, 사용자의 선호도에 따른 색상 추천이나, 커뮤니티 콘텐츠가 제작한 자료를 중심으로 추천된 팔레트를 제공하는 연구가 있었다.
머티리얼 디자인 컬러 시스템의 한계는 무엇인가?
다섯째, 머티리얼 디자인 컬러 시스템은 팔레트의 색상 수가 적고, 배색 시스템의 특징으로 색상 선택과 구성에 어려움이 없으며, 작업 시간이 단축되는 장점이 있었다. 그러나 색상 선택의 한계와 강조색의 필요, 색상 재조정의 기능이 요구되었다. 머티리얼 디자인 컬러 팔레트는 색채 이론을 바탕으로 시스템화 되었지만, 실무에 서의 활용은 부정적 의견이었고, 배색 범위와 그에 맞는 선택 색상의 배치도 다시 고려해야 할 것이다.
참고문헌 (12)
김성환, 색채계획 의사결정 지원 시스템에 관한 연구, 전북대학교, 박사학위논문, 2006.
박은영, 이기훈, 박영호, "조화로운 이진 색상 추출을 위한 질의 처리 방안," 한국정보과학회: 컴퓨팅의 실제 및 레터, 제37권, 제5호, pp.267-274, 2010.
박은영, 윤용익, 박영호, "사용자 선호도 기반의 조화로운 컬러 추천방안," 정보과학회: 컴퓨팅의 실제 및 레터, 제17권, 제8호, pp.469-473, 2011.
N. Kita and K. Miyata, "Aesthetic Rating and Color Suggestion for Color Palettes," Computer Graphics Forum, 제35권, 제7호, pp.127-136, 2016.
![그림 1. 머티리얼 디자인의 컬러 팔레트[5]](http://ocean.kisti.re.kr/downfile/bibText/kocon/CCTHCV/2019/v19n10/CCTHCV_2019_v19n10_353_f0001.png "그림 1. 머티리얼 디자인의 컬러 팔레트[5]")
![그림 2. 머티리얼 디자인의 컬러 툴[6]](http://ocean.kisti.re.kr/downfile/bibText/kocon/CCTHCV/2019/v19n10/CCTHCV_2019_v19n10_353_f0002.png "그림 2. 머티리얼 디자인의 컬러 툴[6]")
AI-Helper
※ AI-Helper는 부적절한 답변을 할 수 있습니다.