여러분 안녕하세요. 지난주는 여러분들이 일시에 보내준 200 여통 가량의 이메일 덕분에 여러 가지로 곤란한 일이 있었습니다. 자세한 것은 강의 후에 설명하도록 하고 그보다도 우선 여러분들의 적극적인 강의 참여에 감사드리고 싶습니다. 지난주에는 화면 안에 그래픽 요소가 생기면서 구성에 어떠한 차이가 생기는지 그리고 정보전달이라는 기능에서 볼 때 어떤 편집이 효과적인지 등에 대해 설명하였습니다. 이제는 그 위에 색상이라는 큰 변수에 대한 얘기를 할까 합니다. 색상은 같은 구성도 완전히 다르게 보이도록 하는 간과할 수 없는 디자인 대상이 됩니다. 이번 주는 이러한 색에 대한 일반적인 해석과 이를 웹 디자인에 어떻게 응용할 수 있는지에 대해 논하고자 합니다.

생활 속의 색

일상 중에서 색에 대한 느낌을 가진다는 것은 그리 어려운 일이 아닙니다. 색은 언제나 우리의 시각활동과 분리할 수 없는 빛이 하는 일이므로 디자인에 대한 태도를 가지기 전에도 아주 즉흥적이고 자연스럽게 받아들여집니다. 적어도 여러분들은 햇빛 좋은 날 숲 속을 달리는 빨간 승용차나 가을날에 단풍사이로 보이는 파란하늘 등의 이미지를 볼 때 그 형태나 사물이 갖는 의미를 넘어 색상자체에서 오는 아름다움으로 기억할 것입니다. 이러한 경험은 누구에게나 있는 것이지만 디자인작업에서 색을 다루는 일의 성패는 이러한 색에 대한 경험들을 얼만큼 작업을 통해 재현해 낼 수 있는가 하는데에 있습니다.
색에서 오는 아름다움은 그 곁에 어떠한 색이 있는가 에도 크게 좌우됩니다. 여러 가지 색이 모여있으면서 서로 상승효과를 가져오기 위한 색의 종류, 크기, 위치 등의 문제는 생각처럼 간단한 일은 아닙니다. 우리 나라 여성 한복에서 즐겨 사용하는 색상을 서구의 남성정장에 사용한다면 어색하기 이를 데 없을 것입니다. 그것은 관습적인 이유 때문이기도 하겠지만 비례 상으로 볼 때 한복은 보색대비를 많이 사용하면서도 치마, 저고리, 옷고름의 순서대로 면적상의 배분에 강약이 있는 반면 서구의 남성복은 그렇지 않기 때문이지요. 이러한 예들은 무의식중에 일어나는 우리의 인지 과정 속에서 저 색상의 배합은 보기 좋다, 나쁘다 하는 식의 평가가 내려지게 되는데 이의 규칙을 찾아내고 이를 작업에 응용하는 시도가 필요할 것입니다. 또한 색의 질을 논하는데 있어서 빼놓을 수 없는 것은 그 발색에 관한 부분입니다.
색에 대한 평가는 그 색 자체가 얼마만큼 선명하게 보이는가 하는 부분에도 크게 좌우되며 이는 빛의 성격과 질감의 차이에서 생깁니다. 가죽제품의 검정, 자동차 타이어의 검정, 벨벳천의 검정, 승용차도료의 검정, 머리카락의 검정, 연필심의 검정, 아스팔트의 검정... 등 이들은 같은 색상으로 분류되어도 그 성격의 차이가 있으며 이는 질감의 차이가 빛의 반사량이나 각도를 바꾸어 주기 때문입니다. 반면 빛이 투과되어 색상이 보이는 경우도 있습니다. 성당 벽의 스태인드 글라스에서 볼 수 있는 화려한 색상이나 유리잔 속의 포도주의 빛깔등이 그것입니다. 한번은 제 작업실에서 나오는 쓰레기 중에 녹색을 찾아 모은 적이 있습니다. 그 중에는 칠성사이다 페트병과, 후지필름의 종이 패키지, 그리고 목캔디 플라스틱 사탕통 등이 있었는데 창가에 일주일 정도 진열해 놓고 다양한 발색의 차이를 즐겼던 적이 있습니다.

다양한 질감에서 오는 발색의 차이


생활속에서 볼 수 있는 빨간 반사색과 네온에서 볼 수 있는 방사색 (Radiant Color)


이러한 색상들은 물체의 표면에 화학적 성분이 광선(그것이 태양관이든 인공광이든)에서 나오는 빛의 스팩트럼 색상을 선별적으로 반사하거나 투과하기 때문에 보이는 것이지요. 그러나 스스로 색을 발생시키는 경우도 있습니다. 부엌의 가스불에서 볼 수 있는 파란 불꽃이나 밤거리의 네온사인 등이 그것인데 이는 방사빛(radiation)이라고도 하며 이중에 우리가 가장 많이 보는 것이 아마도 전기신호에 의해 빛을 방사시키는 컴퓨터 모니터 일 것입니다.




모니터의 점멸하는 색

컴퓨터 모니터는 세련된 형광등과 같습니다. 일반 형광등보다 형광물질 발색의 질을 높이고 전자총의 방향을 정확하게 조정할 수 있도록 해준 정도이지요. 그러므로 사실상 컴퓨터에서 보여줄 수 있는 색상의 종류나 성격은 무척 한정적일 수밖에 없습니다. 또한 그 발색은 모니터의 종류에 따라, 조정되어 있는 밝기와 대비(Brightness, Contrast)에 따라 수시로 바뀌므로 디자이너의 색상에 대한 표현 영역이 한정적일 수밖에 없습니다. 제가 처음 컬러모니터를 사용했을 때 싸이안(Cyan) 블루의 색감이 모니터에서는 뿌연 하늘색으로 나타나는 것에 무척 실망했던 적이 있습니다. 특정한 인쇄잉크의 화학적 발색의 아름다움이 모니터의 색광방식으로는 재현되지 않는 것이었습니다. 도구의 특성에 대한 이해가 부족했던 것이지요. 이러한 경우는 인쇄과정에서 얼마든지 보정이 가능합니다.
반면에 모니터에서 보이는 색상은 인쇄나 안료의 반사광에서 보여지는 색상과는 또 다른 아름다움을 가지고 있습니다. 네온튜브와 같은 발광체에서 보이는 신비한 느낌과 비슷하면서도 TV보다는 그 색상의 밀도가 단단하게 느껴지기도 합니다. 우선 모니터에서 보여지는 색상의 한계 속에서 여러분들은 웹 컬러를 만들어 낼 것입니다. 그러기 위해서는 컴퓨터 모니터의 색상재현 방식에 대한 이해가 필요합니다.
컴퓨터는 빛의 3원색인 Red, Green, Blue (RGB)의 혼합정도로 색을 만들어 냅니다. 즉 안료에서는 흰색이 바탕이 되지만 모니터에서는 검정색이 바탕색이 되기 때문에 안료는 색이 더해지는 것을 "진해진다"라고 하고 빛에서는 색이 올려지는 것은 "밝아진다"라고 합니다. 문제는 RGB의 밝기를 각각 얼만큼 세밀하게 조정해서 다양한 색상의 조합을 만들어 내는가에 있습니다. 컴퓨터는 이러한 RGB값의 밝기를 인간의 시지각이 구분할 수 있는 한계치인, 그리고 컴퓨터가 계산하기 적합한 256가지 단계로 나누기 위해서 RGB데이터를 각각 8bit (2x2x2x2x2x2x2x2=256)처리하고 이를 3가지 값으로 조합하면 24bit = 16777216가지 색상을 만들어 낼 수 있게 됩니다. 그래서 대부분의 그래픽용 컴퓨터는 24bit 그래픽 보드를 사용하는 것입니다.




웹에서는 Text 데이터를 기본으로 정보를 주고받기 때문에 색상의 정보도 문자를 포함한 6자리 16진법 숫자로(Hexadecimal number)표기 합니다. 예를 들어 000000=검정, FFFFFF=흰색, CC0000=빨간색 이런 식인데 이를 이해하기는 수월치 않아서 웹 관련 유틸리티를 사용하거나 16진법 숫자와 색상의 대조표 등을 보면서 작업할 것입니다. (16진법으로 표기하는 것은 숫자의 자릿수를 줄이기 위한 것이었겠지만 개인적으로는 불만입니다. 그냥 RGB값을 표기하면 3자리 가 늘어나지만 훨씬 쉬워져서 별도의 프로그램이나 계산과정이 필요하지 않았을 텐데 왜 그 3자리를 줄이기 위해 이렇게 복잡하게 만들었는지 모르겠습니다.)
웹에서 가장 중요하게 생각해야 할 부분 중에 하나는 대중성에 관한 것입니다. 사용자의 컴퓨터는 플렛폼 (Platform : 정보가 도착할 최종 사용자의 컴퓨터 기종)에서 각각의 컴퓨터에서 사용되는 그래픽 보드의 성능에 이르기 까지 그 종류는 실로 다양합니다. 그리고 웹은 불특정 다수에게 보여지기 위한 것이므로 이에 대한 준비가 필요합니다. 즉 다시 말하여 모든 사용자에게 똑같은 색상으로 보여주기 위한 배려가 필요한 것이지요. 이를 위해서는 각각의 플렛폼에 공통으로 사용되는 216가지의 웹 팔레트를 사용하는 것도 한가지 방법이 될 수 있습니다. 이는 포토샵 4.0에서부터 도입될 정도로 널리 사용되고 있으며 RGB 모드에서 Indexed 모드로 변환하는 과정에서 선택할 수 있습니다. 사진을 GIF 포맷으로 저장할 때도 이를 적용시키면 플렛폼에 관계없이 안정된 색상을 얻을 수 있습니다. 이에 대해서는 10주째 프로그래밍에 대한 강의에서 다시 다룰 것입니다.

무슨 색상을 사용할 것인가

앞서 컴퓨터가 색상을 처리하는 방법에 대한 설명이 있었습니다. 그러나 이에 대한 충분한 이해도 과연 웹페이지에 어떠한 색들을 사용할 것인가에 대한 아이디어를 줄 수는 없습니다. 모든 색상은 자기만의 고유한 개성과 장점을 가지고 있으며 민족적인, 그리고 환경적인 특성들도 가지고 있습니다. 빨간색은 열정을 나타내고 녹색은 자연환경을 의미하는 등의 추상적인 구분도 색상의 선택에 영향을 미치기도 하며 또한 중국에서의 축하금은 빨간 봉투에 넣어야 하며 흰 봉투에 넣으면 상가집의 위로금으로 이해하여 오해가 될 수 있는 등의 관습적인 의미나 또는 햇빛이 강한 열대지방에서 어울리는 원색적인 색상이 안개가 자욱한 런던시내에 놓여 있을 때는 이상하게 보이는 등의 주변 환경적 요소등이 색상을 선택하는 기준이 됩니다. 무조건 어떠한 색의 배합은 좋다 라고 하는 식의 정의는 있을 수 없습니다. 공업제품적 성격이 필요하다면 노랑, 검정, 은색의 배합이, 여성적이고 소프트한 이미지라면 파스텔 톤의 부드러운 색상조합이, 자연 친화적 성격을 강조한다면 녹색과 흙색사이의 배합이 어울리는 등 그 성격에 맞는 색상 배합이 필요할 것입니다.


또는 관습적인 색상의 배합도 독창성이라고 하는 디자인 조건을 위해서는 과감히 무시되는 경우도 있습니다. 식료품의 포장용기에는 금기시 되어왔던 검정색 포장을 하는 경우나 또는 타고난 머리카락 색상에 물을 들이는 등, 독창성 혹은 경향이라고 하는 가치 안에서는 색상에 대한 전통적 관념들은 별 의미를 가지지 못하기도 합니다. 그 보다는 어떠한 이유에서든 사용되는 색상을 조화롭고 서로의 장점을 살리는 쪽으로 편집하는냐가 중요한 문제가 됩니다. 즉 이것은 여백과 시각요소의 비례감이 적절할 때 서로의 공간이 아름다워 보이는 것처럼 색상도 그 힘의 배분에 순서가 있어야 서로가 잘 보이며 만약 똑같은 면적의 보색이 사용되면 서로의 힘을 상쇄시켜 결국 어떤 색상으로의 성격도 만들어지지 않을 것입니다. 색의 보기 좋은 구성은 앞서 설명한 것과 같이 선험적인 좋은 느낌을 재현해 보는데서 쉽게 얻을 수 있습니다. 스포츠 관련 웹 페이지 라면 스포츠관련 용품의 색상을, 여행지를 홍보하는 웹 페이지라면 그 당시의 인상깊었던 색 이미지를 사용하는 것도 한가지 방법이며 패션잡지의 색상 코디네이션 등도 자신이 제작하는 웹 페이지의 컬러에 응용하는 것도 좋은 방법이 됩니다.


좌: 색상의 계열을 맞추면 주도색으로서의 힘이 생깁니다.
우: 같은 면적의 보색대비는 모두 섞었을때 회색이 되는 경우로 사용을 피하는 것이 좋습니다.


- 질감과 패턴
색상에 대한 적극적인 표현 방법은 질감으로 표현해 주는 것입니다. 같은 붉은 색이라도 실크의 질감이 느껴지는 사진 이미지를 사용한다면 보는 사람은 선험적인 실크의 질감을 연상하면서 그 색감을 더욱 풍부하게 느낄 수 도 있을 것입니다. 질감이나, 패턴, 그라데이션 (점차적으로 변하는 색상의 톤)등은 색감을 풍부하게 그리고 투명하게 느껴지도록 하는 효과를 내며 이는 웹의 백그라운드나 타이틀 바에 사용되면 더욱 풍부하게 그 내용의 전체적 느낌을 전달하기도 합니다.


같은 계열의 색으로 미세한 그라이데이션(Gradation)을 주면
색이 투명하게 보이는 효과가 납니다.



IBM사의 웹페이지는 색상의 성격을 잘 살린 좋은 예를 보여줍니다.
Identity(동질화)컬러로서 푸른색 계열을 선택하고 부분적으로 노란색을
보조 컬러로 사용하여 서로 상승효과를 가져 오도록 하고 있습니다.
이러한 기본적인 컬러 전략은 페이지가 업데이트 될 때마다 지속적으로
적용하여 연속적인 컬러이미지를 구축하고 있습니다.



너무 많은 컬러의 사용은 오히려 어떤색도 강조하지 못하여 힘이 떨어지는 효과를 가져옵니다.
또한 비슷한 면적의 보색(서로 섞었을때 회색이 되는 색)을 사용하여 성격이 없어지는 경우는
피하도록 합니다.




색상의 특징을 주요성격으로 하는 웹 사이트의 예



컴퓨터는 색상의 변화를 주는데에 참 편리한 도구입니다. 예전에 컴퓨터 그래픽 프로그램을 처음 접하셨던 노교수님의 말씀이 "새로 칠하거나 오려붙이지 않아도 원하는 데로 색상을 바꾸어 볼 수 있는 것이 참으로 놀랍다" 라고 하셨던 적이 있습니다. 색상의 변화를 위해 일일이 새로 안료를 칠해 보던 옛날에 비하면 상당히 효율적으로 된 것이지요. 그러나 오히려 너무나 쉽기 때문에 남용하는 경우도 있어서 온통 화려하고 눈이 어지러울 정도의 색상을 접하는 경우도 많았습니다. 모든 것이 충족될 때 절제하는 것을 배우는 것은 중요합니다. 웹페이지의 색상 계획도 여러분의 취향과 내용의 성격에 맞도록 신중히 선택하고 서로간의 색상조화를 위하여 세세히 다듬는 애착을 배우게 되기를 기대합니다.
감사합니다.

끝