Article

가상현실 3차원 색상 선택기의 성능 분석

김지은1https://orcid.org/0000-0003-1342-4286, 이지은1,*https://orcid.org/0000-0001-5692-9263
Jieun Kim1https://orcid.org/0000-0003-1342-4286, Jieun Lee1,*https://orcid.org/0000-0001-5692-9263
Author Information & Copyright
1한성대학교 IT융합공학부 it_jieun@naver.com, jieunlee@hansung.ac.kr
1Department of IT Convergence, Hansung University
*corresponding author: Jieun Lee/Sungshin Hansung University(jieunlee@hansung.ac.kr)

© Copyright 2021 Korea Computer Graphics Society. This is an Open-Access article distributed under the terms of the Creative Commons Attribution Non-Commercial License (http://creativecommons.org/licenses/by-nc/4.0/) which permits unrestricted non-commercial use, distribution, and reproduction in any medium, provided the original work is properly cited.

Received: Feb 04, 2021; Revised: Mar 06, 2021; Accepted: Apr 08, 2021

Published Online: Jun 01, 2021

요약

가상 환경에서는 3차원 작업 공간과 3차원 인터랙션이 가능하나, 대부분의 가상현실 애플리케이션은 2차원의 색상 선택기를 사용하고 있다. 본 논문은 가상 환경에서 3차원 색 공간에 기반한 3차원 색상 선택기를 구현하고, 기존 2차원 색상 선택기와 색상 선택 성능을 비교하였다. 3차원 색상 선택기는 3차원 색 공간을 그대로 사용하여 직관적이며, 가상현실 장비인 컨트롤러를 사용하여 색 공간의 특정 지점에 3차원 포인터를 위치시킬 수 있기 때문에, 간단한 사용자 작업으로 색상을 선택할 수 있다. 이에 비해 2차원 색상 선택기는 컴퓨터 환경에서 색상을 다루는 작업을 하는 기존 사용자들에게 익숙하다는 장점이 있으나, 2차원 인터페이스로 색의 속성을 설정해야 하므로 여러 단계의 사용자 작업이 요구되는 단점이 있다. 사용자 실험을 토대로, 가상 환경에서 2차원 색상 선택기 외에 3차원 색상 선택기의 유용성을 확인하였으며, 3차원 색상 선택기를 활용하여 가상 환경에서 자연스러운 3차원 작업을 할 수 있었다.

Abstract

In a virtual environment, a 3D workspace and 3D interaction are possible, but most virtual reality applications use a 2D color picker. This paper implements a 3D color picker based on 3D color space in a virtual environment, and compares color selection performance with the existing 2D color picker. The 3D color picker is intuitive by using the 3D color space as it is, and it can position the 3D pointer at a specific point in the color space using a controller, which is a virtual reality device, so a user can select a color in one step. On the other hand, the 2D color picker has the advantage of being familiar with existing users who work with colors in a computer environment, but has a disadvantage that requires several steps of user interaction since it has to set color properties through 2D interfaces. Based on user experiments, we confirmed the usefulness of a 3D color picker in addition to a 2D color picker in a virtual environment, and it was possible to perform natural 3D work in a virtual environment using the 3D color picker.

Keywords: 색상 선택기; 3차원 색상 선택기; 2차원 색상 선택기; RGB 컬러 모델; HSV 컬러 모델
Keywords: color picker; 3D color picker; 2D color picker; RGB color model; HSV color model

1. 서론

가상현실(VR; virtual reality) 및 증강현실(AR; augmented reality) 기술은 정보통신기술(ICT; information and communication technology)의 발전과 콘텐츠 제작 환경의 변화, 5G 보급과 더불어 스마트폰을 대체할 새로운 플랫폼으로 관심을 받고 있다[1]. 또한, 현실과 유사한 원격 협업 및 소통을 가능하게 해주기에 코로나19로 인한 비대면 시대의 도래에 새로운 플랫폼으로 부상하고 있다[1]. 가상현실은 컴퓨터 등을 사용하여 구현한 가상의 세계 또는 그 공간 안에서 사용자의 오감 정보를 확장 및 공유하여 실제로 존재하지 않는 현실을 실제처럼 체험할 수 있도록 하는 기술이다. 가상현실 및 증강현실 시장이 5G 상용화로 인해 일상에서 쉽게 콘텐츠를 즐길 수 있는 환경으로 점차 개선될 것으로 보이며, 다양한 산업과의 융합이 실현되면서 긍정적으로 평가되고 있다[2].

가상현실 대중화의 가장 큰 장애물 중 하나로 가상현실 장비의 발전을 예로 들 수 있는데, 최근 오큘러스(Oculus)에서 출시한 퀘스트2(Quest2)[3]는 독립형 장치의 편의성, 우수한 성능, 가벼워진 무게와 낮은 가격으로 전작에 비해 선주문량이 5배를 뛰어넘으며[4], 가상현실 대중화의 기대를 높이고 있다.

가상현실 장비에 관한 연구와 개발과 더불어, 실감 있게 즐길 수 있는 가상현실 콘텐츠 개발도 중요하다. 문화체육관광부와 한국콘텐츠진흥원은 국내 가상현실 콘텐츠 기업들의 경쟁력을 높이고 우수한 콘텐츠들을 집중적으로 발굴하기 위해 지원 사업을 하고 있다[5]. 삼성, 구글, 애플, 페이스북 등의 거대 기업들은 가상현실과 관련된 기업들과의 합병이나 제휴를 통하여 더 나은 콘텐츠를 개발하기 위한 다양한 시도를 하고 있다[6]. 또한, 국내 이동통신 3사(SK텔레콤, KT, LG유플러스)도 자체 증강현실, 가상현실 콘텐츠 개발에 집중하여 5G 이동통신 콘텐츠를 해외에 수출하기 위해 적극적으로 나서고 있다[7]. 따라서 최근 가상현실은 교육, 운동, 의료, 예술, 게임, 마케팅, 국방, 산업 등 다양한 분야에서 활용되며, 그에 따른 다양한 콘텐츠들이 개발되고 있다.

미술 교육은 기존의 하드웨어가 갖추어져 있기에 아날로그 하드웨어를 기반으로 디지털 콘텐츠를 입히는 증강현실 몰입형 학습이 효과적이다[8]. 구글(Google)의 틸트 브러시(Tilt Brush)[9]는 자유롭게 3차원 모델링을 할 수 있어서 예술 분야의 주목을 받고 있으며, 4차 산업혁명의 첨단 기술 중에서 미술 활동에 가장 영향을 줄 수 있는 기술의 하나가 될 것으로 전망되었다[10].

다양한 미술 활동을 체험할 수 있는 애플리케이션에는 구글의 틸트 브러시, 코스카미(COSKAMI LLC)의 페인트 브이알(PAINT VR)[11], 루시드 레이어스(LUCID LAYERS)의 컬러리 브이알(Colory VR)[12] 등이 있다. 틸트 브러시는 Skillman과 Hackett에 의해 2014년에 개발되었고 구글에 인수되어 2016년에 정식으로 출시된 3차원 페인팅 가상현실 응용 프로그램이다(Figure 1). 페인트 브이알은 2017년에 출시되어 다양한 브러시를 사용하여 가상현실에서 페인팅을 하는 애플리케이션이다. 2020년에 출시된 컬러리 브이알도 3차원 페인팅 애플리케이션으로 여러 도구를 사용하여 3차원 개체를 만들 수 있다.

jkcgs-27-2-1-g1
Figure 1: Tilt Brush[9].
Download Original Figure

본 연구에서는 3차원 페인팅 및 드로잉 애플리케이션에서 필수적인 색상 선택기에 주목하였다. 가상현실과 같은 3차원 작업 공간에서도 데스크톱 환경과 같은 2차원 색상 선택기가 주로 사용되고 있는데, 기존 2차원 색상 선택기가 사용자에게 익숙하다는 장점이 있으나, 가상현실은 3차원 공간에서 3차원 인터랙션이 가능하므로 3차원 색상 선택기를 고려할 필요가 있다. 특히 2차원 색상 선택기는 최소 2단계의 선택 과정을 거쳐야 하는 데 비해, 3차원 색 공간을 기반으로 하는 3차원 색상 선택기는 1단계만으로 색상 선택이 가능하여 효율적이다. 따라서, 본 논문에서는 가상현실에서 활용할 수 있는 3차원 색상 선택기를 구상하고 구현하였다. 또한, 본 연구에서 구현한 3차원 색상 선택기의 성능을 확인하기 위해 기존의 2차원 색상 선택기를 구현하고 사용자 실험을 통해 성능을 비교하고 분석하였다.

본 논문은 다음과 같이 구성되어 있다. 2장에서 관련 연구를 소개하고 3장에서는 기존의 2차원 색상 선택기를 구현하고 3차원 색상 선택기를 설계하고 구현한다. 4장에서는 구현한 2차원 색상 선택기와 3차원 색상 선택기로 사용자 실험을 수행하고 결과를 분석한다. 마지막으로 5장에서 결론을 제시한다.

2. 관련 연구

2.1 색 공간
1) 아이작 뉴턴 (Isaac Newton)

아이작 뉴턴은 프리즘 실험을 통해 유리 프리즘을 통과한 빛은 빨간색부터 보라색까지의 색들로 나누어지고 이를 다시 렌즈로 통과시키면 백색광으로 변한다는 사실을 발견하였다[13]. 이러한 사실을 바탕으로 구분한 색상들을 원에 체계적으로 배치할 수 있다고 생각하였는데 이것이 오늘날 색상을 나타낼 때 일반적으로 사용되는 색상환의 기초이다.

2) 먼셀 (Albert H. Munsell)

20세기 초, 미국의 화가 앨버트 헨리 먼셀은 색상(hue), 채도(chroma), 명도(value)의 3가지 요소를 통해 색을 나타내는 먼셀 색 체계를 고안하였다. 색상환의 방향을 통해 색상을 표현하고 원의 반지름을 통해 채도를 표현하며 수직축의 높이를 통해 명도를 표현한다[14].

3) CIE 1931 색 공간 (CIE 1931 color space)

CIE 1931 색 공간은 국제조명위원회(Commission Internationale de l'éclairage)가 1931년에 제정한 색 공간이며 인간의 색채 인지 방법을 기반으로 하고 있다[15]. 인간의 눈에서 단파장, 중파장, 장파장을 수용하는 원추세포에 전달되는 세 가지 자극 값을 빛의 삼원색과 연관시키는 수학적 모델을 정의하였다. 컬러 잉크나, 디스플레이, 카메라 시스템 등에서 색을 다룰 때 널리 활용된다.

2.2 컬러 모델
1) RGB (Red Green Blue)

RGB 컬러 모델은 빨강(red), 초록(green), 파랑(blue)인 빛의 삼원색을 원색으로 하는 가산 모델이며 디스플레이 장치에서 색을 표현하는 기본적인 방법이다[16, 17]. 빛의 삼원색을 합성하면서 다른 색들을 표현하는 방식이며 합성할수록 밝아지므로 가산 모델이라고 불린다. 빨강, 초록, 파랑의 합성을 통해 자홍(magenta), 노랑(yellow), 녹청(cyan)을 표현한다(Figure 2).

jkcgs-27-2-1-g2
Figure 2: RGB color model.
Download Original Figure
2) HSV (Hue Saturation Value)

HSV 컬러 모델은 전통적으로 여러 색의 물감을 혼합하고 다시 여기에 흰색이나 검은색을 섞어 색을 만드는 혼합방식과 유사하며 예술가나 디자이너들이 쉽게 조정할 수 있는 방식이다[18]. 육각뿔 모형을 기반으로 한 원뿔 모형으로 색상(hue), 채도(saturation) 그리고 명도(value)로 색을 설정한다[16, 19](Figure 3). 색상은 원의 각도로 표현되어 0°~360°의 범위를 갖고 0°와 360°는 빨간색을 나타낸다. 채도는 원의 반지름으로 표현되며 채도가 높을수록 맑고 다른 색을 섞을수록 채도가 낮아져 색이 탁해진다. 명도는 원뿔의 높이로 표현되며 검은색을 0%, 흰색을 100%로 하였을 때의 밝기 정도를 나타낸다.

jkcgs-27-2-1-g3
Figure 3: HSV color model.
Download Original Figure
3) CMYK (Cyan Magenta Yellow and (Black)Ke)

CMYK 컬러 모델은 녹청(cyan), 자홍(magenta), 노랑(yellow), 검정(black)을 원색으로 하는 감산 모델이며 주로 인쇄에 사용된다[16, 17]. 녹청, 자홍, 노랑에서 색을 빼면서 다른 색들을 표현하는 방식이며 가산 모델과 반대로 섞을수록 어두워지므로 감산 모델이라고 불린다. 녹청, 자홍, 노랑의 합성을 통해 빨강, 초록, 파랑을 표현한다.

4) YUV와 YIQ

YUV와 YIQ 컬러 모델은 아날로그 텔레비전에서 사용되는 PAL(Phase Alternation by Line)과 NTSC(National Television System Committee) 방식에 각각 사용된다[17]. YUV 컬러 모델은 기존에 있던 흑백 신호에 UV 신호를 추가한 방식으로 명도(Y)와 2개의 색상 정보(U, V)로 표현하고 YIQ 모델은 색의 민감도를 U, V가 아닌 I(주황-파랑 범위), Q(자주-초록 범위)로 표현한다.

5) CIE L*a*b*

CIE 컬러 맵에서의 거리는 실제로 인식된 색의 차이를 의미하는 것이 아니다. 따라서 CIE를 변형하여 컬러 맵에서의 거리가 실제 인식된 색의 차이에 정비례하도록 한 것이 CIE L*a*b* 컬러 모델이다[17]. 사람의 지각 능력을 반영하여 인지 컬러 모델이라고 한다. L*은 명도, a*는 초록과 빨강 사이의 세기 그리고 b*는 파랑과 노랑 사이의 세기를 나타낸다.

2.3 색상 선택기

컴퓨터 환경에서 작동되는 다양한 미술 작업 애플리케이션이나 디자인 애플리케이션에는 색상을 선택할 수 있는 도구인 색상 선택기가 존재한다. 색상 선택기는 사용자가 편하게 색상을 설정할 수 있도록 프로그램마다 다양한 인터페이스를 제공한다. HSV 컬러 모델을 기반으로 색상 띠와 명도 및 채도를 설정할 수 있게 하거나 색상 팔레트로 구성되어 있고, 사용자가 원하는 색상을 RGB 값이나 HSV 값으로 입력할 수 있는 색상 코드 입력 칸이 존재하기도 한다. 마이크로소프트(Microsoft)의 윈도우즈(Windows) 그림판의 색상 선택기는 왼쪽 부분에는 색상 팔레트가 존재하고 오른쪽에는 색상을 선택하는 2차원 사각형과 밝기를 조절하는 슬라이더가 있으며 색 표현법에 따른 색상 코드값을 입력할 수 있는 텍스트 상자가 존재한다(Figure 4).

jkcgs-27-2-1-g4
Figure 4: Color picker in Windows Paint program.
Download Original Figure

게임 엔진인 유니티(Unity)[20]에서는 HSV 컬러 모델을 기반으로 채도와 명도 값을 선택할 수 있는 2차원 사각형과 색상 띠가 있으며 RGB 값과 색상 코드값을 직접 입력할 수 있는 텍스트 상자가 존재한다(Figure 5). 유니티 에셋 스토어(Unity Asset Store)에서 무료로 제공하는 색상 선택기들도 이와 유사한 형태이다.

jkcgs-27-2-1-g5
Figure 5: Color picker in Unity 3D[20].
Download Original Figure

컴퓨터 환경에서 사용하고 있는 이러한 2차원 색상 선택기들은 3차원 가상현실 콘텐츠에서도 사용되고 있다. 3차원 페인팅 애플리케이션인 구글의 틸트 브러시, 코스카미의 페인트 브이알, 루시드 레이어스의 컬러리 브이알에서도 2차원 색상 선택기가 채택되었다(Figure 6).

jkcgs-27-2-1-g6
Figure 6: Color picker in (a) Tilt Brush[9], (b) PAINT VR[11], and (c) Colory VR[12].
Download Original Figure

3차원 공간에서 3차원 색상 선택기를 구현한 연구도 존재한다. Keefe 등의 연구 케이브페인팅(CavePainting)[21]은 3차원 공간에서 드로잉을 할 때 3차원 색상 선택기를 사용하였다. Figure 7과 같이 HSL 컬러 모델의 이중 육각뿔 형태이며 빨강, 초록, 파랑, 자홍, 노랑, 녹청, 하양, 검정의 8개의 대표 색상을 구(球)로 배치하였다. HSL 색 공간 안에서 사용자가 선택한 위치에 해당되는 색상이 큰 구로 표시된다(Figure 7의 큰 녹색 구). 내부가 비어 있어서 사용자가 선택한 색상을 한눈에 확인할 수 있지만 8개의 대표 색상만 표시되어 있어서 색 공간 안에서 색의 변화를 파악하기가 어렵다.

jkcgs-27-2-1-g7
Figure 7: Color picker in CavePainting[21].
Download Original Figure

이와 달리, 3차원 색 공간을 가시화한 3차원 색상 선택기가 있다. Wu와 Takatsuka의 연구[22]는 데스크톱 환경에서 3차원 RGB, HSV 및 먼셀 색 공간에서 색상을 선택할 수 있는 색상 선택기를 제안하였는데, 3차원 색 공간을 사용하기는 하나, 가상현실의 컨트롤러와 같은 3차원 위치 입력 장치가 없기 때문에, 색 공간에서 색의 위치를 입력하기 위한 3차원 인터랙션은 불가능하였다. 대신 색 공간을 탐색하기 위해 반투명 평면을 설정하여 색 공간의 단면을 구하고, 단면상에서 사용자가 색상의 보간 경로를 2차원 마우스 장치로 설정할 수 있도록 하였다(Figure 8). 사용자는 보간 경로로 설정된 색 팔레트에서 원하는 색을 선택하게 된다. 이 색상 선택기는 원하는 색의 근처를 직관적으로 확인할 수 있고 단면 슬라이스를 통해 내부의 색상을 확인할 수 있지만, 단면 설정과 보간 경로 설정, 색 팔레트에서 색상 선택 등 복잡한 사용자 인터랙션 과정이 요구된다.

jkcgs-27-2-1-g8
Figure 8: RGB colour cube and colour palettes[22].
Download Original Figure

색상 선택기의 인터페이스에 관한 연구도 다양하게 진행되고 있다. 색상을 선택하는 방법이 다르거나, 의도한 색상을 더 효과적으로 선택할 수 있게 하는 방법을 제안하기도 한다. 디자인 작업에서는 대비 색상을 사용하는 경우가 많은데, Sandnes와 Zhao의 연구[23, 24]는 WCAG2.0 (Web Content Accessibility Guidelines 2.0)에서 대비 조건을 디자인 단계에 통합하여, 디자이너가 대비 색상 조합을 선택할 수 있는 색상 선택 도구를 제공하였다. Shugrina 등의 연구[25]에서는 사용자가 색상 견본을 선택하고 재배열하는 방식으로 색상 테마를 만들 수 있는 인터페이스 컬러 빌더(Color Builder)를 제안하였다. Son 등의 연구[26]에서는 사용자가 색상을 선택할 때마다 나머지 색상이 선택한 색상과 얼마나 조화를 이루는지 계산하여 사용자가 조화로운 색상을 선택할 수 있도록 도와주는 대화형 색상 추천 시스템인 컬러 소믈리에(Color Sommelier)를 소개하였다.

3. 색상 선택기

3.1 2차원 색상 선택기

디자인 응용 프로그램에 따라 다양한 색상 선택 인터페이스가 존재하는데, 색상 선택 인터페이스의 선호도를 측정한 Brathovde 등의 연구 결과[27]에 따르면, RGB 컬러 모델과 HSV 컬러 모델의 색상 선택 인터페이스의 선호도가 높게 측정되었다. 이를 토대로 본 논문에서는 3차원 색상 선택기의 성능을 확인하기 위한 비교 대상으로 RGB 컬러 모델과 HSV 컬러 모델 기반의 2차원 색상 선택기를 구현하였다.

1) 2차원 RGB 색상 선택기

RGB 컬러 모델을 기반으로 구현한 2차원 색상 선택기는 R, G, B 값을 각각의 슬라이더로 입력받아 색상을 표시한다(Figure 9). 원하는 색상을 선택하기 위해서 사용자는 R, G, B 3개의 슬라이더를 컨트롤러를 이용하여 조정한다. 슬라이더 위에는 설정된 R, G, B 값에 따라 색상이 변하는 구를 배치하여 사용자가 색 정보를 즉시 확인할 수 있도록 하였다.

jkcgs-27-2-1-g9
Figure 9: 2D RGB color picker.
Download Original Figure

R, G, B 값을 따로 설정하는 인터페이스는 슬라이더 조작을 매우 빈번하게 해야 하는 단점이 있다. 예를 들어, 어떤 색의 명도를 높이고자 할 경우, 세 개의 슬라이더를 각각 1회 이상 조작해야 한다. 사용자 인터랙션이 많아질수록 색상을 선택하는데 걸리는 시간이 증가한다.

2) 2차원 HSV 색상 선택기

HSV 컬러 모델을 기반으로 구현한 2차원 색상 선택기는 유니티에서 제공하는 색상 선택기 인터페이스와 동일한 방법으로 색상을 표시한다. 위쪽 2차원 정사각형 위젯에서는 채도와 명도 값을 조정하고 아래쪽 2차원 직사각형 위젯에서는 색상 값을 조정한다(Figure 10). 컨트롤러를 움직여 색상을 선택하며, 색상 선택기 위에 색 정보를 즉시 확인할 수 있도록 구를 배치하였다.

jkcgs-27-2-1-g10
Figure 10: 2D HSV color picker.
Download Original Figure

이 인터페이스로 색을 선택할 경우, 채도-명도 위젯과 색상 위젯을 설정하는 2번의 사용자 인터랙션이 필요하다. 현재 설정된 색에서 채도나 명도, 색상 등을 재조정할 때는 최소 1번의 사용자 인터랙션이 요구된다.

3.2 3차원 색상 선택기

RGB 색 공간과 HSV 색 공간을 그대로 사용하는 3차원 색상 선택기이다. 컨트롤러의 포인터 위치로 색 공간 내부의 한 지점을 선택하며, 위치는 색 공간 좌표로 해석되어 색상이 결정된다.

3차원 색 공간을 그대로 색상 선택기로 사용할 경우, 내부의 색이 보이지 않는다는 점이 단점이 될 수 있고, 이를 보완하기 위하여 Wu와 Takatsuka의 연구[22]와 같이 단면을 표시하거나, 색 공간의 표면을 반투명으로 렌더링하는 등의 방안을 고려할 수 있다. 그러나 본 논문의 목적은 새로운 3차원 색상 선택기의 아이디어를 개진하는 것이 아니라, 3차원 색 공간 본연의 형태로 구현된 색상 선택기를 기존의 2차원 색상 선택기와 비교하여 활용 가능성을 평가하는 것이므로, 3차원 색 공간을 그대로 사용하고, 3차원 포인터를 움직여 색 공간 내부의 색을 지정하는 단순하고 직관적인 인터랙션 방식을 채택하였다.

1) 3차원 RGB 색상 선택기

정육면체 형태의 RGB 색 공간을 구현하여 3차원 색상 선택기로 사용하였다. RGB 정육면체는 X, Y, Z 축을 각각 R, G, B 축으로 사용한다(Figure 11). 사용자는 컨트롤러를 움직여 RGB 정육면체 내부 지점을 선택하고, 선택된 색상이 상단의 구에 표시된다.

jkcgs-27-2-1-g11
Figure 11: 3D RGB color picker.
Download Original Figure

가상 환경에서 3차원 정육면체로 그려진 공간 내부를 컨트롤러를 움직여 위치를 트래킹하고 컨트롤러의 버튼을 클릭하는 과정으로 색상 선택을 완료하므로, 2차원 색상 선택기보다 사용자 인터랙션이 단순하다는 장점이 있다.

2) 3차원 HSV 색상 선택기

원뿔 형태의 HSV 색 공간을 구현하여 3차원 색상 선택기로 사용하였다. 2.2절에서 기술한 것과 같이 원의 각도, 원의 반지름, 원뿔 높이를 각각 H, S, V 축으로 사용한다(Figure 12). 사용자는 컨트롤러를 움직여 HSV 원뿔 내부 지점을 선택하고, 선택된 색상이 상단의 구에 표시된다.

jkcgs-27-2-1-g12
Figure 12: 3D HSV color picker.
Download Original Figure

3차원 RGB 색상 선택기와 같이, 가상 환경에서 3차원 원뿔로 그려진 공간 내부를 컨트롤러를 움직여 위치를 트래킹하고 컨트롤러의 버튼을 클릭하는 과정으로 색상 선택을 완료하므로, 2차원 색상 선택기보다 사용자 인터랙션이 단순하다는 장점이 있다.

4. 실험

4.1 실험 방법

실험에 사용된 색상 선택기 프로그램은 유니티 3D 2019.4.6f1 엔진과 스팀브이알(SteamVR) 플러그인을 통합하여 C# 코드로 개발하였고, 인텔 코어 i7-8700(Intel® Core™ i7-8700) 프로세서와 엔비디아 지포스 GTX 1070 (NVIDIA GeForce GTX 1070) 그래픽스 프로세서를 탑재한 컴퓨터에서 HTC 바이브 프로(HTC Vive Pro) 가상현실 장비를 사용하여 실험을 수행하였다. 실험 참가자는 가상현실 헤드셋을 착용하고 한 손에 컨트롤러를 들고 실험에 참여하였다. 실험 참가자는 실험을 시작하기 전에 RGB 컬러 모델과 HSV 컬러 모델에 대한 설명과 본 실험에 제공되는 색상 선택기들을 사용하는 방법에 대하여 설명을 들은 후에 2~3회의 연습을 거쳐 실험에 참여하였다.

색상 선택기는 3장에서 기술한 것과 같이, 2차원 RGB 색상 선택기, 2차원 HSV 색상 선택기, 3차원 RGB 색상 선택기, 3차원 HSV 색상 선택기를 사용하였다. Figure 13은 실험이 이루어지는 가상현실 공간을 보이고 있다. 색상 선택기 위에는 두 개의 구가 표시되는데, 왼쪽 구는 실험 참가자가 선택한 색상이 실시간으로 표시되고, 오른쪽 구는 실험 참가자가 맞춰야 하는 색상이 임의로 주어진다. 실험 참가자는 주어진 색상을 확인하고 색상 선택기를 사용하여 최대한 비슷한 색상을 선택해야 한다. 두 개의 구 사이에는 실험 참가자가 색상 선택을 완료한 후에 색상이 임의로 바뀌기 전의 준비 시간을 표시하거나, 색상 선택을 완료하기까지 남은 시간을 표시하는 글 상자 위젯이 있다.

jkcgs-27-2-1-g13
Figure 13: Experimental scenes.
Download Original Figure

실험 방식은 시간 제약에 따라 두 가지로 구분된다. 첫 번째는 색상을 선택하는 시간에 제한을 두지 않고 실험 참가자가 원하는 대로 시간을 사용하여 색상을 선택하도록 하는 방식이다. 두 번째는 색상을 선택하는 시간에 제한을 두고 정해진 시간 내에 색상을 선택하도록 하는 방식이다. 시간제한을 두는 방식은 교육이나, 취미, 오락 등 비전문적인 용도로 간편하게 사용할 때 어떤 색상 선택기가 선택 시간 대비 정확한 색상을 입력할 수 있는지 측정하기 위해 고안하였다.

시간제한을 두지 않는 방식의 실험은 성인 10명(남: 6명, 여: 4명)을 대상으로 실험을 수행하였다. 실험에 사용되는 색상 선택기는 2차원 RGB 색상 선택기, 2차원 HSV 색상 선택기, 3차원 RGB 색상 선택기 그리고 3차원 HSV 색상 선택기 순으로 제공되었다. 실험 참가자는 주어진 색상 선택기마다 8번씩 색상을 선택하여 총 32번의 색상을 선택하였다. 가상 공간에는 시간이 표시되는 글 상자 위젯이 있는데, Figure 13에서 언급한 시간 표시 위젯에는 실험 참가자가 색상 선택을 완료한 이후, 다음 실험의 색상이 표시되기 전의 준비 시간이 표시된다.

시간제한을 두는 방식의 실험은 앞의 실험에 참여했던 성인 5명(남: 3명, 여: 2명)을 대상으로 수행하였다. 주어진 색상을 맞추는데 10초의 시간을 부여하였고, 시간 내에 색상 선택이 끝나지 않은 경우, 10초가 되었을 때 설정된 색상을 최종값으로 사용하였다. 시간 표시 위젯에는 남은 시간을 초 단위로 표시하여, 실험 참가자가 남은 시간을 인지할 수 있도록 하였다. 색상 선택기는 2차원 RGB 색상 선택기, 2차원 HSV 색상 선택기, 3차원 RGB 색상 선택기, 3차원 HSV 색상 선택기 순으로 제공되었으며, 실험 참가자는 주어진 색상 선택기마다 50번씩 색상을 선택하여 총 200번 색상을 선택하였다.

4.2 색 공간 변환 및 색상 오차 계산

유니티 3D 2019.4.6.f1 엔진에서 사용하는 색상 함수는 0에서 1 사이의 값을 R, G, B 값으로 입력받는다. 따라서 RGB 3차원 색상 선택기는 X, Y, Z 축을 R, G, B 축으로 두고 선택되는 값을 추가 계산 없이 색상 함수로 입력하거나 색상 값을 비교하면 된다. 3차원 HSV 색상 선택기의 경우, HSV 색 공간의 값을 RGB 색 공간의 값으로 변환하는 과정이 필요하며, Smith의 연구[19]에서 언급한 변환식을 기반으로 하는 다음과 같은 변환식을 사용하였다.

C = V × S X = C ( 1 | 2 L 1 | ) × S
( R , G , B ) = { ( C , X , 0 ) , 0 ° H < 60 ° ( X , C , 0 ) , 60 ° H < 120 ° ( 0 , C , X ) , 120 ° H < 180 ° ( 0 , X , C ) , 180 ° H < 240 ° ( X , 0 , C ) , 240 ° H < 300 ° ( C , 0 , X ) , 300 ° H < 360 °
m = V C ( R , G , B ) = ( R + m , G + m , B + m )

실험 참가자는 주어진 임의의 색상과 최대한 유사한 색상을 찾아 선택한다. 색상 오차는 주어진 색상과 사용자가 선택한 색상의 R, G, B값을 사용하여 유클리드 거리로 계산한다.

e r r o r = ( R 1 R 2 ) 2 + ( G 1 G 2 ) 2 + ( B 1 B 2 ) 2
4.3 실험 결과

4.1절에서 기술한 대로, 4가지의 색상 선택기를 사용하여 시간 제약에 따라 두 가지의 실험을 진행하였다. 첫 번째 실험은 시간에 제한을 두지 않은 실험으로 4가지의 색상 선택기에 대해서 모든 실험 참가자의 색상 오차와 걸린 시간을 측정하였다.

Figure 14Figure 15는 2차원 RGB 색상 선택기로 색상을 선택하는 실험을 진행하였을 때의 한 실험 참가자의 실험 결과이다. 실험 결과 그래프에서 6번과 7번을 살펴보면 두 실험의 색상 오차는 약 0.076과 약 0.079로 비슷하지만, 주어진 색을 찾아 선택하는데 걸린 시간은 약 25.355초와 약 65.804초로 약 2.5배의 시간 차이가 나는 것을 확인할 수 있다. 즉, 색상 오차와 색상을 선택하는데 걸리는 시간의 상관성이 관찰되지 않았다. 실제로 실험 참가자들은 임의로 주어진 색상과 비슷한 색상 근처에 접근하기까지 오래 걸리기도 하였으나, 비슷한 색상 근처에 빠르게 접근한 후에 두 색상의 오차를 줄이기 위해 더 시간을 투자하는 모습을 보이기도 하였다.

jkcgs-27-2-1-g14
Figure 14: Time taken for a participant to pick a color when using a 2D RGB color picker.
Download Original Figure
jkcgs-27-2-1-g15
Figure 15: Color errors of a participant when using a 2D RGB color picker.
Download Original Figure

색을 선택하는 방식에 개인차가 있으나, 눈에 띄게 시간이 오래 걸린 색상 선택기가 있다면 사용에 어려움을 느낀 색상 선택기라고 간주할 수 있다. 따라서 모든 실험 참가자가 색상을 선택할 때까지 걸린 시간을 색상 선택기에 따라 평균을 계산하여 확인한 결과, 4가지 색상 선택기의 평균 사용 시간은 Figure 16과 같았다. 시간이 가장 많이 걸린 3차원 RGB 색상 선택기는 평균적으로 39초의 시간이 소요되었고, 시간이 가장 적게 걸린 3차원 HSV 색상 선택기는 평균적으로 28초의 시간이 소요되어, 작업 시간을 줄일 수 있다는 장점을 보였다.

jkcgs-27-2-1-g16
Figure 16: Average time taken for all participants to pick the color when using four color pickers without time limitation.
Download Original Figure

10명의 실험 참가자가 색상 선택기별로 8번의 실험을 수행하여, 색상 선택기별로 총 80번의 색상 선택의 결과를 얻었다. 4가지 색상 선택기에 대해, 임의로 주어진 색상과 실험 참가자가 선택한 색상을 R, G, B 색상 오차로 계산하고 모든 실험 참가자의 시행 결과에서 평균 오차를 계산한 결과, 색상 오차는 2차원 HSV 색상 선택기, 2차원 RGB 색상 선택기, 3차원 RGB 색상 선택기, 3차원 HSV 색상 선택기 순으로 작았다(Figure 17).

jkcgs-27-2-1-g17
Figure 17: Average color error of all participants when using four color pickers without time limitation.
Download Original Figure

색상 오차는 본 논문에서 3차원 색상 선택기와 2차원 색상 선택기의 성능을 비교하는 중요한 지표인데, 수치상으로는 2차원 색상 선택기에 비해 3차원 색상 선택기의 성능이 낮은 것으로 보인다. 이러한 수치상의 차이가 인지적으로 어느 정도 차이인지 확인하기 위하여 Table 1에 오차에 따른 색상 차이를 제시하였다.

Table 1: Color difference according to the size of the error 0.14~0.20.
Error Reference color 0.14 0.16 0.18 0.20
Color change with increasing hue angle jkcgs-27-2-1-g19 jkcgs-27-2-1-g20 jkcgs-27-2-1-g21 jkcgs-27-2-1-g22 jkcgs-27-2-1-g23
Color change with increasing saturation jkcgs-27-2-1-g24 jkcgs-27-2-1-g25 jkcgs-27-2-1-g26 jkcgs-27-2-1-g27 jkcgs-27-2-1-g28
Color change with increasing value jkcgs-27-2-1-g29 jkcgs-27-2-1-g30 jkcgs-27-2-1-g31 jkcgs-27-2-1-g32 jkcgs-27-2-1-g33
Download Excel Table

Figure 17에서 보인 것과 같이 4가지 색상 선택기의 색상 선택 오차는 0.15~0.20 범위이므로, 기준 색에 대해 0.14~0.20 범위의 오차를 갖는 색상을 표시하였다. Table 1의 첫 번째 행은 순(純) 빨간 색을 기준으로 색상 축으로 오차를 생성한 결과이며, 두 번째 행은 중간 채도의 빨간 색을 기준으로 채도 축으로 오차를 생성한 결과이고, 세 번째 행은 중간 회색을 기준으로 명도 축으로 오차를 생성한 결과이다. 색상 축과 명도 축의 차이에 비해 채도 축의 차이가 약간 느껴지지만, 전반적으로는 비슷한 색으로 보이며 차이를 인지하기가 쉽지 않다. 이 결과를 토대로 4가지 색상 선택기의 성능을 색상 오차로 비교할 때, 성능 차이는 유의미한 수준이 아닌 것으로 판단된다.

본 논문의 부록에는 Figure 17의 결과를 RGB 색상 오차가 아닌 CIE L*a*b* 컬러 모델의 오차로 분석한 결과를 제시하였다. CIE L*a*b* 컬러 모델은 인간이 지각하는 색상 차이를 반영하므로 Figure 17의 결과와 달라지는지 확인하는 것을 목적으로 오차를 분석하였고, 그 결과는 Figure 17과 유사하게 4가지 색상 선택기의 성능이 비슷하였으며, 2차원 HSV 색상 선택기의 색상 오차가 가장 작았고, 3차원 HSV 색상 선택기의 색상 오차가 가장 컸다(부록 참고).

두 번째 실험은 색상 선택에 시간제한을 두고 10초 이내에 임의로 주어진 색상과 최대한 비슷하게 색상을 선택하도록 하였다. 5명의 실험 참가자가 색상 선택기별로 50번의 실험을 수행하여, 색상 선택기별로 총 250번의 색상 선택 결과를 얻었으며, 주어진 색과 색상 오차를 계산하여 평균 오차를 비교하였다(Figure 18). 시간의 제한을 두지 않은 첫 번째 실험과 달리 시간의 제한을 둔 두 번째 실험에서는 2차원 RGB 색상 선택기의 오차가 다른 색상 선택기에 비해 두드러지게 크게 나타났으며 나머지 3개의 색상 선택기들의 색상 오차는 비슷하였다.

jkcgs-27-2-1-g18
Figure 18: Average color error of all participants when using four color pickers with time limitation.
Download Original Figure

Figure 18의 오차는 0.61~0.72 범위이며, 오차의 색상 차이를 직관적으로 확인하기 위해, Table 2에 기준 색에 대해 0.40~0.70 범위의 오차를 갖는 색상을 표시하였다. Table 1과 동일하게 첫 번째 행은 순 빨간 색을 기준으로 색상 축으로 오차를 생성한 결과이며, 두 번째 행은 중간 채도의 빨간 색을 기준으로 채도 축으로 오차를 생성한 결과이고, 세 번째 행은 중간 회색을 기준으로 명도 축으로 오차를 생성한 결과이다. 기준 색상에 비해 색상 차이가 크게 느껴지나, Figure 18의 오차와 유사한 오차 0.60과 오차 0.70의 색상 간에는 큰 차이가 느껴지지 않는다.

Table 2: Color difference according to the size of the error 0.40~0.70.
Error Reference color 0.40 0.50 0.60 0.70
Color change with increasing hue angle jkcgs-27-2-1-g34 jkcgs-27-2-1-g35 jkcgs-27-2-1-g36 jkcgs-27-2-1-g37 jkcgs-27-2-1-g38
Color change with increasing saturation jkcgs-27-2-1-g39 jkcgs-27-2-1-g40 jkcgs-27-2-1-g41 jkcgs-27-2-1-g42 jkcgs-27-2-1-g43
Color change with increasing value jkcgs-27-2-1-g44 jkcgs-27-2-1-g45 jkcgs-27-2-1-g46 jkcgs-27-2-1-g47 jkcgs-27-2-1-g48
Download Excel Table

2차원 RGB 색상 선택기의 경우에는 실험 참가자들이 3개의 슬라이더를 조작하면서 색을 선택해야 하므로 비슷한 색조차 찾지 못하고 시간이 끝나는 경우가 많이 발생하였다. 2차원 HSV 색상 선택기는 채도-명도 위젯과 색상 위젯에서 여러 번의 조작이 필요하였지만, 색상에 따른 채도-명도 단면을 확인하고 정확한 색으로 접근할 수 있다는 점이 장점으로 작용하였다. 3차원 색상 선택기들은 3차원 색 공간 속에서 임의의 방향으로 포인터를 움직여 원하는 색상으로 바로 접근이 가능하므로 제한 시간 안에 충분히 비슷한 색을 선택할 수 있었다. 그러나 비슷한 색의 인근 공간을 탐색하며 오차를 줄이고자 할 때는 색 공간 내부를 볼 수 없다는 점이 한계로 작용하여 색상 오차를 크게 줄이지 못하였다. 3차원 색상 선택기도 2차원 HSV 색상 선택기처럼 내부의 색들을 눈으로 확인할 수 있다면 더 빠르고 정확한 색상 선택기가 될 것으로 보인다.

5. 결론

3차원 작업 공간과 3차원 인터랙션이 가능한 가상현실의 장점을 살려 3차원 색상 선택기를 구현하고, 기존 가상현실 애플리케이션에서 널리 활용되는 2차원 색상 선택기와 성능을 비교하였다. 3차원 색상 선택기는 RGB 색 공간과 HSV 색 공간을 그대로 사용하고 색 공간 내부에서 3차원 포인터를 움직여 간단하고 자연스럽게 색상을 선택할 수 있었다. 임의로 주어진 색상을 최대한 유사하게 맞추는 사용자 실험에서, 3차원 색상 선택기의 색상 정확도는 2차원 색상 선택기와 유사하였으며, 작업 시간은 단축되는 결과를 보였다. 시간제한을 두고 실험을 한 경우, 3차원 색상 선택기의 색상 정확도가 약간 높았으며, 이는 인터랙션의 자연스러움과 단순함에 기인하는 것으로 판단된다. 실험을 통해 가상현실에서 3차원 색상 선택기의 유용성을 확인할 수 있었으며, 향후 3차원 색상 선택기가 가상현실에서 널리 활용되기를 기대한다.

본 논문에서 구현한 3차원 색상 선택기는 색 공간 내부를 볼 수 없기 때문에, 목표 색상에 근접한 공간에서 미세한 수정이 어려운 단점이 있었다. 향후 색 공간 내부를 볼 수 있는 인터페이스를 추가하여 3차원 색상 선택기의 성능을 향상시키는 연구를 수행할 계획이다.

감사의 글

이 성과는 2020년도 정부(과학기술정보통신부)의 재원으로 한국연구재단의 지원을 받아 수행된 연구임(No. NRF- 2019R1F1A1062543).

References

[1].

강준모, 이은민, “포스트 코로나 시대의 핵심기술: VR/AR 산업과 규제 이슈,” 정보통신정책연구원, Technical Report ISSN 2233-6583, 2020, pp: 4-44.

[2].

이자연, “가상증강현실(ARVR)산업의 발전방향과 시사점,” KIET 산업경제, pp. 38-47, 2019.

[3].

QUEST 2. (2020). Oculus, https://www.oculus.com/quest-2/.

[4].

Peter Graham. (2020.11.30). Oculus Quest 2 Sales Surpass Facebook Expectations, Pre-Orders 5x More Than Original Quest [Internet]. Available: https://www.vrfocus.com/2020/10/oculus-quest-2-sales-surpass-facebook-expectations-pre-orders-5x-more-than-original-quest/.

[5].

국경완, “VR/AR 시스템의 최근 동향 및 현업 적용 사례 그리고 전망,” 한국과학기술정보연구원, Sep. 2018.

[6].

임양미, “가상현실 콘텐츠 및 기술 동향,” The Journal of The Korean Institute of Communication Sciences, vol. 33, no. 12, pp. 49-55, 2016.

[7].

이경탁. (2020.10.21). 5G 콘텐츠 수출 팔 걷어부친 통신 3사… “AR·VR로 승부” [Internet]. Available: https://biz.chosun.com/site/data/html_dir/2020/10/20/2020102002688.html.

[8].

H.-J. Lee, and W.-S. Kim, “Analysis of domestic education cases and Classification of content types based on Virtual Reality technology convergence - Focused on middle school education -,” The Korean Society of Science & Art, vol. 38, no. 3, pp. 237-252, 2020.

[9].

Tilt Brush. (2016). Google, https://www.tiltbrush.com/.

[10].

K.-A. Lee, “The Prospect of Art Education in the Fourth Industrial Revolution,” 美術敎育論叢, vol. 31, no. 4, pp. 31-56, 2017.

[11].

Paint VR. (2017). COSKAMI LLC, https://www.facebook.com/PAINTinVR/.

[12].

Colory VR. (2020). LUCID LAYERS, http://www.colory.de/.

[13].

W.-R. Ball. (1908). A Short Account of the History of Mathematics. New York: Dover. ISBN 978-0-486-20630-1.

[14].

Munsell COLOR. Munsell Color Space and Solid [Internet]. Available: https://munsell.com/about-munsell-color/how-color-notation-works/munsell-color-space-and-solid/.

[15].

T. Smith, and J. Guild, “The C.I.E. colorimetric standards and their use,” Transactions of the Optical Society, vol. 33, no. 3, pp. 73-134, 1931.

[16].

G.-H. Joblove, and D. Greenberg, “Color spaces for computer graphics,” in Proceedings of the 5th annual conference on Computer graphics and interactive techniques, pp. 20-25, 1978.

[17].

A. Ford, and A. Roberts, “Color space conversions,” Westminster University, London, 1998(a).

[18].

신내경, 신재희, “컴퓨터 그래픽스에서의 색상체계에 관한 연구,” 커뮤니케이션 디자인학연구, vol. 2, pp. 95-110, 1998.

[19].

A.-R. Smith, “Color gamut transform pairs,” ACM SIGGRAPH Computer Graphics, vol. 12, no. 3, pp. 12–19, 1978.

[20].

Unity. (2005). Unity Software, https://unity.com/.

[21].

D.-F. Keefe, D.-A. Feliz, T. Moscovich, D.-H. Laidlaw, and J.-J. LaViola, “CavePainting: A Fully Immersive 3D Artistic Medium and Interactive Experience,” in Proceedings of the 2001 symposium on Interactive 3D graphics (I3D), pp. 85-93, 2001.

[22].

Y. Wu, and M. Takatsuka, “Three Dimensional Colour Pickers,” in proceedings of the 2005 Asia-Pacific symposium on Information visualisation (APVis), vol. 45, pp. 107-114, 2005.

[23].

F.-E. Sandnes, and A. Zhao, “A Contrast Colour Selection Scheme for WCAG2.0-compliant Web Designs based on HSV-half-planes,” IEEE International Conference on Systems, Man, and Cybernetics (SMC), pp. 1233-1237, 2015.

[24].

F.-E. Sandnes, and A. Zhao, “An interactive color picker that ensures WCAG2.0 compliant color contrast levels,” Procedia Computer Science, vol. 67, pp. 87-94, 2015.

[25].

M. Shugrina, W. Zhang, F. Chevalier, S. Fidler, and K. Singh, “Color Builder: A Direct Manipulation Interface for Versatile Color Theme Authoring,” in Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems, pp. 1-12, 2019.

[26].

K.-H. Son, S.-Y. Oh, Y. Kim, H. Choi, S.-H. Bae, and G. Hwang, “Color Sommelier: Interactive Color Recommendation System Based on Community-Generated Color Palettes,” in adjunct proceedings of the 28th Annual ACM Symposium on User Interface Software & Technology (UIST), pp. 95–96, 2015.

[27].

K. Brathovde, M.-B. Farner, F.-K. Brun, and F.-E. Sandnes, “Effectiveness of Color-Picking Interfaces among NonDesigners,” In Proceedings of the 16th International Conference on Cooperative Design, Visualization and Engineering (CDVE), pp. 181-189, 2019.

[28].

EasyRGB. Iro Group Limited, https://www.easyrgb.com/en/.

[29].

A.-R. Robertson, “The CIE 1976 Color-Difference Formulae,” Color Research and Application, vol. 2, no. 1, pp. 7-11, 1977.

Appendices

부록
CIE L*a*b* 방식으로 분석한 색상 오차

Figure 17의 결과를 도출한 실험 결과를 인간의 지각 능력이 반영된 CIE L*a*b* 컬러 모델을 통하여 분석하였다. 즉, 시간제한이 없는 방식에서 10명의 실험 참가자가 4가지 색상 선택기에 대해 각 8회씩 색상을 선택한 결과를 색상 선택기별로 색상 오차의 평균을 계산하였다.

실험 결과를 CIE L*a*b*으로 도출하기 위해 RGB 색상을 CIE L*a*b*으로 변환하고[28] CIE L*a*b*의 세 가지 요소인 L*, a*, b* 값의 차분을 이용하여 아래와 같이 색상 오차를 계산한다[29].

Δ E * a b = ( Δ L * ) 2 + ( Δ a * ) 2 + ( Δ b * ) 2

색상 선택기별 모든 실험 참가자들의 색상 오차의 평균을 나타낸 그래프는 다음과 같다. 4가지 색상 선택기의 성능이 비슷하였으며, 2차원 HSV 색상 선택기의 색상 오차가 가장 작았고, 3차원 HSV 색상 선택기의 색상 오차가 가장 컸다.

jkcgs-27-2-1-g49
Average color error of all participants when using four color pickers without time limitation.
Download Original Figure

<저자소개>

김 지 은

jkcgs-27-2-1-g50

  • 2019년 한성대학교 졸업(공학사)

  • 2021년 한성대학교 대학원 졸업(공학석사)

  • 관심분야: 가상현실, 증강현실, HCI, 컴퓨터그래픽스 등

이 지 은

jkcgs-27-2-1-g51

  • 1997년 이화여자대학교 졸업(공학사)

  • 1999년 포항공과대학교 대학원 졸업(공학석사)

  • 2007년 서울대학교 대학원 졸업(공학박사)

  • 1997년~2002년 LG전자기술원

  • 2008년~2018년 조선대학교 컴퓨터공학과 교수

  • 2018년~현재 한성대학교 IT융합공학부 교수

  • 관심분야: 컴퓨터그래픽스, 가상현실, 기하처리알고리즘 등