웹컬러 센스 파레트

웹의 중요도가 급증하면서 웹에서의 칼라 선택은 기능성과, 심미성, 정확성 세 가지 면에서 정밀한 검증을 요구받고 있다. 이를 위해서는 웹 환경의 특수성을 고려한 색채 디자인전용 칼라 팔레트 개발이 필수적이다. I.R.I는 웹 환경에 안전한 216 웹 안전색을 이용하여 전문가를 비롯한 비전문가들조차 쉽고 편리하게 사이트를 배색할 수 있도록 I.R.I Web Color Sense Palette Series를 개발하였다. 216 웹 안전색 각각의 색상과 명도, 채도를 고려한 단색 팔레트 3가지(Basic Palette I,Ⅱ,Ⅲ), I.R.I Hue & Tone 120 색체계에 매핑된 Hue & Tone 116 Palette와 이를 응용한 Color Wheel Palette I,Ⅱ, Color Tone Palette가 그것이다. 216 웹 안전색 중 10가지 색상과 11가지의 색조, 6가지의 무채색으로 간추려진 Hue & Tone 116 Palette는 각 색상의 톤을 한눈에 살펴볼 수 있도록 하나의 색상환(Color-ring I-검정색중심, 흰색중심)으로, 저명도 색(검정색 중심)과 고명도 색(흰색 중심)으로 양분된 Color-ring Ⅱ로 재구성하여 그 쓰임을 다양화하였다. 뿐만 아니라 각 색상별로 IRI 색조도를 이용하여 동일색상의 색조관계도 정리하여 5-Com Palettes를 구성하였다. 216 웹 안전색을 디자이너들에게 널리 알려진 Hue & Tone 체계로 정리함으로써 기능성과 정확성 측면에서 경쟁력을 확보한 216 웹 안전색을 적용하여 웹 디자인 시 색의 심미성을 최대화할 수 있을 것으로 기대된다. 본 IRI의 웹 안전색 팔레트 시리즈는 2001년 6월 13일에 저작권 등록(등록번호 C-2001-001389 호, 편집저작물)되었다. 특히 웹은 우리에게 있어서 공기와 물 같은 존재가 되어 버렸다. 현재 우리는 웹이라는 또 다른 세상에서 현실 세계의 것 이상으로 다양한 활동을 창조하고 유지하며 살아가고 있다. 전화로 얘기하던 친구와 웹으로 수다를 떨고, 애인과의 데이트를 위해 미리 극장표를 예매하는 것도, 내 몸의 군살을 빼는 것조차도 웹을 통해 실현하고 있다. 이제 웹은 특정한 누군가의 특혜가 아니라 우리생활에서 뗄래야 뗄 수 없는 그런 존재가 되어 버린 것이다. 이러한 변화는 우리의 낙후된 색채감각을 서서히 일깨우고 있다. 디지털 환경이나 웹 환경에서의 색 선택과 사용에 대한 경험이 상대적으로 부족한 우리에게 웹은 효과적인 의사 전달에 있어서 또 하나의 화두를 던지고 있다. 바로 색의 과학적 선택 방법!!! 어떻게 하면 나의 홈페이지을 방문한 손님에게 지루하지 않는 최상의 서비스로 감사함에 대한 보답을 할 수 있을까 . 서서히 고민을 시작한 사람들은 색의 정확도 그리고 이미지 색과 웹 구동속도의 관계에 관심을 갖게 된 것이다. 그러나 아직 우리 나라의 경우 그 관심도가 선진국에 비해 조금은 뒤쳐져 있는 듯 싶다. 지금까지 발견된 사실에 의하면 웹에서 보여지는 색은 사용자의 컴퓨터 시스템의 종류나 비트 심도, 모니터의 종류 그리고 웹 브라우저에 따라 다르게 보인다고 한다. 일반 PC에서 멋있는 디자인과 색으로 제작된 홈페이지를 MAC을 가지고 있는 친구에게 자랑을 하려다가 자신이 예측치 못했던 이상한 색으로 보였던 경험은 흔히 듣는 일화이다. 동일한 PC라 할지라도 나와 친구의 비트심도가 다를 경우 즉 8비트와 24비트일 때의 색차 또한 심하게 된다. 게다가 일반 디지털 환경을 웹과 연결해 주는 브라우저는 그 종류에 따라 동일한 색을 나타내는데 약간의 차이가 있다고 한다. 여기에 모니터의 색 특성 또한 색 왜곡에 큰 영향을 미친다. 자사의 한 설문에 의하면 정보강국을 외치는 우리나라의 경우 전문가조차 웹 안전색에 대한 인지도가 매우 저조한 것으로 나타났다. 혹 웹 안전색을 알고 있다 하더라도 "그 수가 적다"는 이유로 사용을 꺼릴 정도로 웹 안전색은 우리의 사이트에서 소외되고 있었다. 그러나 이는 웹 안전색에 대한 교육적 활동의 부재로 나타난 현상으로 해석된다. 이는 웹 안전색의 장점 즉, 웹에서 재현된 색 정보의 정확도를 높이고 구동속도를 최소화할 수 있다는 점을 이해시킨 후의 반응이 달랐기 때문이다. 이러한 설명 후의 사용여부에 대한 질문에 응답자들은 대부분 "사용하겠다"라는 긍정적인 대답을 하였다. 국내와는 달리 외국의 경우 안전색의 장점을 적극 활용하려는 움직임이 빠르게 확산, 적용되고 있다. 216 안전색을 이용한 배경 이미지 디자인을 시도하여 속도와 내용 전달 측면에서 높은 효과를 얻고 있는 사례가 속속히 소개되고 있는 것이다. 216 안전색의 디더링(DITHERING) 효과를 이용하여 본인이 원하는 또 다른 색을 만들 수 있는 프로그램도 사이트에서 종종 볼 수 있다. 이것은 정확한 정보 전달과 시간과 사용의 최적화를 고려하는 그들의 세심함 때문일 것이다. 또한 이것은 자신의 홈페이지를 타인이 좀 더 최적화된 환경에서 볼 수 있도록 배려하는 그들의 속 깊은 의도가 담긴 것이기도 하다. I.R.I의 색채팀은 웹에서 재현되는 색의 효과적 표현을 위해 안전색을 이용한 감성 팔레트를 개발하고 그 활용이 지금까지 사용된 여러 색체계와 연결성을 갖도록 여러 가지 노력을 시도 중에 있다. 한 예로 우선 다음과 같이 IRI 216 웹칼라 팔레트를 제작하였다. 본 팔레트는 216 안전색을 모두 포함할 뿐 아니라 색 선택을 용이하게 하기 위하여 색상별로 구분하여 구성하였다. 본 팔레트는 위의 gif 이미지를 직접 다운로드 받아 사용하면 된다. 이 팔레트는 지속적으로 업 데이트될 예정이며,이를 활용한 산업색으로의 활용 연구가 지속적으로 진행될 것이다. 정보화 시대는 이미 오래 전에 엘빈 토플러를 비롯한 여러 학자들에 의해 예견되었다. 하지만 World Wide Web이 몰고 올 정보화 시대의 힘과 그 방향 변화에 대해선 그 누구도 예측하지 못한 듯 하다. 웹은 놀라운 속도로 세계 곳곳에 깊숙이 퍼져 다양한 사업 영역으로 확대되어, 어떤 분야에서도 빠질 수 없는 중요한 핵심으로 자리잡았다. 이 속에서 우리는 간혹 새롭게 제기되거나 극복되어야 하는 숙제에 직면하기도 한다. 특히 우리나라의 경우 Web은 마케팅에 전략에 다수 이용되고 있을 뿐 아니라 관련 직종과 이에 대한 지원자 수의 급증으로 알 수 있듯이 사회적으로나 경제적으로 그 영향력이 매우 크게 작용하고 있다. 이러한 웹의 영향 중 색채에 대한 것이 가장 눈에 띄는 현상이다. 선진국에 비해 5~10년 정도 뒤쳐진 색채 감각에 대해 새롭게 문제 제기가 시작된 것이다. 그 동안 우리나라는 국가적으로 경제 성장이 매우 중요했던 터라 색채에 대한 관심이 선진국에 비해 상대적으로 적을 수밖에 없었다. 그러나 어느 정도의 경제성장과 더불어 웹이 급속히 전파되면서 정확한 정보 전달과 빠른 속도가 중요한 경쟁력 결정 요인인 웹의 특성으로 인하여 색채에 대한 과학적인 접근과 객관적인 분석이 요구되었다. 뿐만 아니라 조화로운 색채 선택이라는 화두는 해결해야만 하는 숙제가 되었다. 실제로, 2000년 하반기를 시작으로 국내의 Web 디자인은 단순한 시각적 효과를 넘어서 사용자에게 보다 친숙한 인터페이스, 보다 정확한 정보 전달, 보다 빠른 속도를 모두 수용할 수 있는 적절한 색채 선택에 관심이 집중되고 있다. 색을 사용하는 환경이 변화됨에 따라 환경에 따른 색채의 물리적 특성, 디지털과 웹 환경에 대한 이해, 이로부터 발생하는 다양한 문제들의 해결책에 대한 이해가 매우 중요시되고 있는 추세이다. 특히 디지털 환경에서 Web 환경으로 색 사용 환경이 확대되면서 웹 안전 216색에 대한 과학적인 이해와 이를 바탕으로 실제 디자인에 적용하는 과정은 속도와 정확도 측면에서 꼭 필요한 일이다. 이에 저자는 웹 안전 216색의 편리한 사용을 위해 지금까지 개발된 사례들을 모아 팔레트와 사용자 인터페이스 시스템으로 정리하여 자세하게 소개하고자 한다. 사용자가 사용하는 플랫폼 즉, Mac 혹은 Windows는 각각 기본 팔레트를 가지고 있다. 이 팔레트는 컴퓨터의 비트심도에 의해 영향을 받게 되는데, 8비트에서는 모두 256가지 색을 사용할 수 있다면, 24비트에서는 모두 1600만 가지의 색을 사용할 수 있다. 한편, 플랫폼과 웹을 연결하는 브라우저 역시 사이트에 사용된 색을 나타내기 위하여 이미 내장된 팔레트를 사용한다. 이 세가지 요인은 브라우저를 통해서 보이는 웹 색을 정확도 측면에서 많은 오차를 가지게 한다. 동시에 전체 사용자를 고려하여 해상도를 최소 사양인 800*600에 맞추는 원인이 된다. 사용자의 비트심도, 플랫폼의 종류, 브라우저의 종류는 이와 같이 웹 색에 제한을 주지만 이들의 특성을 조합하면 공통으로 사용되는 안전한 색을 발견할 수 있는데 이를 웹 안전 216색이라고 한다. 웹 디자인에 사용될 색을 웹 안전 216색 중에서 선택하게 되면 가독성이나 선명도, 정확도 면에서 훨씬 우수해진다. [그림 1]은 일반 디지털 환경에서는 유사하게 보이는 색들이지만 실제로 웹에서 재현했을 때 웹 안전색을 사용했을 경우와 그렇지 않은 경우를 비교한 것이다. 웹 안전색만으로 표현된 이미지가 그렇지 않은 경우에 비해 선명도나 가독성 면에서 훨씬 뛰어남을 확인할 수 있다. 216 웹 안전색의 특징을 요약하면 다음과 같다 1. 웹 안전색은 교차 플랫폼(Mac & Windows) 사용에 최적화되어 있다. ( 256 시스템 팔레트 중 Mac이냐, Windows냐에 따라 달라지는 40색을 제외한 216 색이 동일) 2. 일반적으로 브라우저들은 웹에서 이미지를 나타내기 위해 216 웹 안전색을 사용한다. 3. 216 웹 안전색은 평면의 일러스트나 로고,혹은 넓은 면이 많은 이미지에 유용하다. ( 그러나 color photo나 photographic-style image와 같은 사진 이미지에는 적절하지 않다.) 국외에서 개발된 216 웹 안전색을 사용하여 다양하게 구성된 팔레트를 살펴보도록 하자. [그림 2]는 216 웹 안전색 팔레트의 가장 기본적인 형태이다. 브라우저의 팔레트를 기본으로 구성된 top to bottom perceptive식 팔레트와 216가지의 안전색 간에 색상, 명도, 채도의 관계를 좀 더 쉽게 파악할 수 있도록 구성된 outside-to-inside perceptive식 팔레트가 그것이다. 두 팔레트 모두 Chart식 팔레트에서 한단계 발전한 형태이다.216 웹 안전색에 들어 알고 있는 사람이라면 한번쯤 최초 발견자에 대한 궁금증을 가져 봄 직하다 저자는 'Brawer-Safe Color Palette'(그림 3 참조)를 개발한 Lynda Weinman으로 추측해 본다. 그녀는 현재 자신의 사이트와 저서를 통해 웹과 관련한 교육에 많은 노력을 기울이고 있다. 'Brawer-Safe Color Palette'는 216가지의 색들간의 명도와 색상관계를 알 수 있도록 배열되었다.이 팔레트는 사람의 색 구분력에 의한 것이 아니라 수학적인 규칙으로 배열된 것이라고 설명되어 있다. 웹 안전색 팔레트에 사용자가 자신의 컴퓨터 비트심도를 알아볼 수 있도록 고안된 그림 4와 같은 팔레트도 눈에 띈다. 이 팔레트는 light.com에 의해 개발된 것으로서 '216-Net Color Palette'라고 불린다. 컴퓨터의 비트심도에 따라 사용자가 보는 중앙의 무채색 계조와 왼쪽 하단부의 빨강색, 초록색, 파랑색 계조의 수는 달라지게 된다. 예를 들어 8비트 사용자는 24비트 사용자에 비해 훨씬 적은 수의 계조를 보게 될 것이다. 앞서 소개한 팔레트들이 216 웹 안전색의 특성을 바탕으로 채도 혹은 명도 특성에 따라 팔레트 모듈을 3가지 혹은 2가지로 나타냈다면, Visibone Color lab에서 개발한 '216-Color Webmaster's Palette'(그림 5 참조)는 한 화면에 216 색간의 상호관계를 훌륭히 담아내고 있다. 또한 이 곳에서는 개발한 '216-Color Web master's Palette'의 형태와 담아낼 정보를 다양화하여 마우스 패드와 포스터, 스와치 팔레트 등을 개발하여 상품화에도 적극성을 보이고 있다. 다음은 Pat Willener의 'Potts's Windows Color Palette'이다(그림 6 참조). 이 팔레트는 무채색을 중심으로 배열된 '216-Color Web master's Palette'와는 달리 중심색의 색상에 따라 나머지 다른 색들의 배열이 어떻게 달라질 수 있는지 잘 보여주고 있다. 검색 사이트에서 "Web Color"라는 검색어를 입력하게 되면, 팔레트 개발 사례를 비롯한 이를 활용한 사용자 인터페이스가 운영되고 있는 사이트들의 리스트를 쉽게 찾아 볼 수 있다. 이 중 몇몇 사이트에서는 웹 특성을 이용하여 사이트에 접속한 사람이면 누구나 참여할 수 있도록 216 웹 안전색을 사용하여 인터페이스를 구축하여 서비스 하고 있는 곳도 있다. 주로 일반 사용자가 디자인에 적용하도록 배경, 글자, 링크 등의 색을 직접 선택하여 전체적인 색의 조화를 테스트하는 구성이 많다. 사용자 인터페이스에서 주로 채택하고 있는 기능 1. 216 웹 안전색 팔레트를 포함한다. 2. 선택된 색의 RGB DAC count를 표시한다. 3. 선택된 색의 HEXA Code를 표시한다. 4. 배경, 글자, 링크의 색을 바꿀 수 있다(그림 7 참조). 5. 면적비를 고려한 배색이 가능하다(그림 8 참조). 6. 색명 및 색 심리 조사 연구로 응용되고 있다(그림 9 참조). 이와 같이 웹 디자인에서의 과학적인 색채 선택 및 사용을 위해 외국에서는 216 웹 안전색의 활용도를 높일 수 있는 방법을 다양하게 제시하고 있다. 그러나 디자인에 이 방법들을 적용하기에는 이미 존재하는 색체계와의 호환이나 디자인 적용을 위한 적절한 구성을 갖추지 못하고 있는 실정이다. 이것은 일반인이나 디자이너들로 하여금 사용에 혼돈을 일으킬 뿐 아니라 216 웹 안전색의 사용을 기피하는 원인이 되기도 한다. 디자인 과정 중 하나인 색채 선택에서는 자연이나 특정 이미지로부터 추출된 단색 팔레트들이 사용되기도 한다(그림 10 참조). 다른 사례도 마찬가지이지만 이를 위해서는 선택된 색상간의 관계가 한 눈에 파악될 수 있는 툴을 사용하게 되면 훨씬 도움이 된다. 예를 들어 "Alarm"이라는 형용사의 이미지가 연출되도록 색을 216 웹 안전색 중에서 선택한다고 가정해 보자(그림 11 참조). 선택된 단색을 적절하게 배색했을 때, 색상ㆍ색조 대비가 조화로운 단색을 뽑아 내는 것은 결코 쉬운 일이 아닐 것이다. [그림11] 이에 IRI 디자인 연구소에서는 색에 관한 감각적인 의사소통, 조사, 분석, 적용이 가능하도록 색상 10단계, 색조 11단계, 무채색 10단계로 개발된 Hue & Tone 120 Color System(1999, IRI개발)을 이용하여 216 웹 안전색을 재 정리하였다. 그림 12에 그 결과를 나타내었다. 그림 12-a는 Hue & Tone 분포표를 웹 안전색으로 나타낸 것이다 웹 안전색은 무채색이 6가지 뿐이므로 여기에 사용된 색 수는 모두116가지 이다. 이렇게 정리된 216 웹 안전색은 사용자 선호색 조사, 서로 다른 마켓의 비교, 감각적 의사 소통에까지 응용될 수 있다. 채도가 가장 높은 10가지 색상을 중심으로 각 색상의 톤 관계는 그림 12-b에 나타낸 톤 표를 통해 익히고 사용하기에 편리하다. 그림 12-c는 각 색상의 Vivid한 톤을 중심으로 명도가 높은 색과 명도가 낮은 색을 모아 두 가지의 색상환으로 정리하여 나타낸 것이다. 저자는 색채 관련 교육을 통해 웹을 비롯한 디자인 관련 종사자들을 만날 기회가 종종 있는데, 그 때마다 전문가조차 색채와 이미지, 색상과 톤의 상관관계에 대한 이해가 매우 부족한 현실을 깨닫게 된다. 이런 점에서 그림 12-b와 그림 12-c는 웹 디자인의 색채 감각을 향상시키기는 데 유용한 시스템으로도 활용될 수 있으리라 생각된다. 웹 디자인에서의 색채는 사용자에게 좀 더 편리한 인터페이스를 제공하는 것뿐 아니라 구동속도의 최소화와 정확도 측면에서 과학적인 선택을 요구하고 있다. 외국의 경우 이러한 측면을 고려하여 216 웹 안전색의 활용을 높이기 위해 여러 가지 연구를 진행하고 있는 반면 국내에서는 관련된 연구가 매우 부족하다. 이를 대변하듯 국내의 디자이너들은 디자인에서의 색 사용 및 선택에 대한 많은 문제점을 이야기하고 있다. 저자는 [웹 디자인]에 216 웹 안전색 활용 연구사례를 소개하면서 독자들로 하여금 웹 안전색 사용에 좀 더 적극적일 수 있는 계기를 마련했으면 하는 바람을 안고 이만 글을 줄일까 한다.