8. 색 이론

이 강좌는 Dev.Opera의 ' 8: Colour Theory'을 번역한 문서입니다. 번역과 관련된 안내는 여기에서 확인해 주세요.

• 역자들 : 아쿠아테라

많은 색상과 그래픽이 없는 모든 사이트들은 제이콥 닐슨의 꿈의 사이트와 같이 될 것이다. 비록 빈약한 웹 구조에 대한 닐슨의 철학은 접근성과 사용성의 장점을 가지고 있음에도 불구하고 많은 웹 디자이너는 많은 디자인 요소를 담아 그들의 웹사이트를 눈에 띄게 하는 작업을 추가하기를 원한다. 다행히도 디자이너는 이러한 가능성을 마음에 담고 작업을 하게 되면 사용성과 접근성을 잃지 않고 색상을 추가할 수 있다. 디자이너들이 사용자들을 위하여 편안한 사이트 디자인을 하는 동안 같은 많은 디자이너들은 색상이나 그래픽을 선택하는 과정에 있어서 불편함을 많이 느꼈을 것이다.

이번 장에서는 세가지 간단한 색상의 스키마와 색의 기본을 다루며 이를 통해 당신이 당신의 사이트에 색상을 고르는데 있어서 자신감을 가질 수 있도록 하겠다. 이번 장에 더하여 어떻게 이런 색상선택을 간단히 할 수 있는가에 대해 살펴보겠다. 결국 당신의 웹사이트 디자인에 대한 칭찬을 즐기는 것이 더욱 색상 선택을 위해서 땀을 흘리며 걱정하는 것보다는 행복한 일일 것이다. 내용은 다음 순서와 같이 진행된다.

• 색상, 색조, 쉐이드
  • 단일 색상 스키마
  • 보색 스키나
  • 따뜻하고 시원한 색상들
  • 3색 스키마
  • 4색 스키마
• 결론
• 연습문제

색상 혹은 색조는 지금까지 1차 색, 2차 색 그리고 3차 색으로 나뉘어 왔다. 1차 색은 빨간색, 노란색, 파란색으로 구성되며 이들이 1차 색이라고 불리는 이유는 이 3가지 색상을 만들기 위해서 다른 색을 섞을 필요가 없기 때문이다. 만일 당신이 이 3가지 색상을 웹 상에 나타내고 싶다면 그림 1에서 보이는 것과 같이 #ff0000, #ffff00, and #0033cc의 16진수 법을 이용하여 다시 나타낼 수 있다.

2차 색은 1차 색들의 혼합으로 이루어지며 다음과 같은 색상들이 2차 색들이다.

• 빨간색 + 노란색 = 오렌지색 (#ff9900)
• 노란색 + 파란색 = 녹색 (#00cc00)
• 파란색 + 빨간색 = 보라색 (#660099)

기타색상은 부 색상들의 혼합으로 색상표 위에서 보이는 것처럼 주색상과 2차 색의 사이에 놓여 있다. 비록 웹 상이 색상의 일반적인 페인터 색상과 틀리지만 다양한 색상의 스키마에 관해 배우는 동안 색상표를 가지고 있는 것이 큰 도움이 될 것이다. 추가적으로 색상환은 모든 색조와 톤과 쉐이드를 보여주기 때문에 당신은 당신이 가질 수 있는 색상을 확인할 수 있다.

다음의 용어들은 추가적 중요한 용어들이다.

• 톤 - 흰색이 더해진 색상
• 색조 - 회색이 더해진 색상
• 쉐이드 - 검정색이 더해진 색상

그림2에 있는 화살표들은 다음과 같은 내용을 담고 있다.

• 가장 바깥 줄 – 노란색과 오렌지 색의 4차 색상 (노란색 + 오렌지색)
• 두 번째 줄 - 4차 색상의 색조 (흰색이 더해짐)
• 세 번째 줄 - 색상의 톤 (회색이 더해짐)
• 가장 안쪽 줄 – 색상환 상의 쉐이드 (검정색이 더해짐)

위의 색상표에서 볼 수 있는 바와 같이 색상에 더해진 흰색과 회색과 검정색이 색상에 더해진 흰색, 회색, 검은색의 양은 원색의 색상을 변환시키고 단색 스키마를 만들어 낼 수 있을 정도로 부수적인 정도이다.

색상환은 매우 오랜 시간 동안 사용되어왔기 때문에 웹을 위하여 새로운 색상환을 만들 필요는 없다. 비록 웹에서 사용하는 색상이 프린트 색상과는 다르지만, 그 컨셉 자체는 동일하다. 당신 색 이름으로 16진수 숫자를 바꾸고 최대한 비슷하게 맞추면 된다..

그림 3에 보이는 것과 같은 Color Scheme Designer라는 제품을 사용해 보는 것을 나는 권장하며, 이 툴은 색상 스키마를 쉽고 빠르게 선택할 수 있게 도와 주며 색맹 혹은 명암대비에 있어서 저시력을 가지고 있는 사용자에게 충분히 괜찮은 색상을 제공할 수 있도록 색상을 선택할 수 있도록 도와준다.

당신이 충분히 좋은 명암대비를 제공하는 색상을 선택하기 위하여 더 많은 도움이 필요하다면 Paciello Group에서 나오는Contrast Analyser를 사용해 보는 것을 추천한다. 이 툴은 전면 색상과 배경색의 명암대비를 확인해 주는 툴이다.

온라인 색상 추출기에서 온라인 노란색-오렌지색 혼합 색의 색조, 톤, 쉐이드를 얻기 위해서는 처음 위에서 보이는 이미지에서 보여지는 화살표가 가리키는 색상을 선택한다. 그리고 나서 색상환 아래 있는 패널 상에서 Mono라고 써진 부분을 선택하고 박스 안에 우측에 있는 패널에 Default라는 부분을 선택한다. 또한 오른쪽 아래 풀다운 메뉴 안에서 Normal Vision을 선택한다. 당신이 순수주의자가 아니라면 색상 박스 위에 있는 “reduce to ‘safe’ colours” 라는 곳을 체크하지 말아라.

주석: “web-safe colours”라는 용어는 모니터가 256컬러 이던 시절로부터 왔으며 당시 Windows/Mac/Unix 플랫폼상에서 동일하게 적용되는 것은 216컬러 이던 시절로부터 왔기 때문에 “web safe”라는 명칭을 가지게 되었다. “web safe” 몇몇 순수주의자는 여전히”Web-safe colour palette”에 집착하는 동안, 진도된 브라우저는 24-bit 색상으로 알려진 기술을 적용하는 것이 가능하게 되었다.

채널당 10에서 11 bit상의 실제 24-bit 색상은 16,777,216개의 식별 가능한 색상을 만들어 낸다. 다르게 이야기 해서 “Web safe”색상 팔레트는 그 필요성이 이제는 없다고 이야기 할 수 있다. 다시 단일 색상 스키마로 돌아 간다. 상단에 나타낸 단계를 따라서 얻게 되는 결과는 노란색-오렌지색(#FFCC00), 색조(#FFF2BF), 톤(#FFE680), 그리고 쉐이드이다. (#B38F00).

이러한 16진수는 실제 색상환과 웹 브라우저의 스크린을 맞추려는 시도를 하다 생겨나는 추측보다는 훨씬 믿을 수 있다. “단일”이라는 뜻이 가지고 있듯 이런 스키마는 그림 4와 같이 단일 색상 스키마로 해석된다.

단일 색상 스키마는 하나의 색상과 그것의 색조, 톤, 쉐이드라는 의미이다. 이 스키마는 사용하기는 무척 쉽지만 동시에 많은 웹사이트를 디자인 하는 디자이너에게는 큰 재미를 주지는 못한다. 대신 당신의 링크, 이미지 또는 배너에 다른 특징을 추기 위해서 다른 스키마를 사용하려고 할 것이다.

다음에 살펴보려고 하는 색상 스키마는 보색 스키마이며 이는 그림 5와 같이 한 색상과 색상환 상에서 정 반대에 놓여 있는 색상을 이용하는 방법이다.

만일 당신이 하나의 색상을 선택하고 정반대의 색상을 선택한다면 당신은 두 가지 색상의 모든 색상과 채도와 명암을 포함하는 것이다. 이것은 더 넓은 폭의 선택을 제공하며 그림 6과 같이 온라인 색상 툴 안에서 변환된다.

위의 이미지에서 오렌지 색과 보색인 파란 색을 선택하였다. 이 스키마를 얻기 위해서 내가 선택한 세팅은 좌측 아래 세팅에서 Contrast, 생성기의 아래 메뉴상의 default 그리고 normal vision으로 선택되어 있다.

선택된 주 색상의 색상환 안쪽 원 위의 검은 점을 통해 알아 볼 수 있게 되며 그 정 반대 쪽 즉 보색은 안쪽 원안에 표시가 되어 자동적으로 선택된 것으로 나타난다. 이런 작업은 당신의 색상 스키마를 분석하기에 더욱 쉽게 만들어 줄 것이다. 이런 색상 추출기는 당신을 위한 16가지 색상을 제공하여 링크, 방문 링크 및 이미지를 위한 색상을 더욱 선택하기 쉽도록 도와준다. 당신은 순수한 색상(꼭대기에 있는 색상), 색조, 톤 또는 쉐이드를 서로 매칭시키고 섞을 수 있으며 이런 단단한 색상 스키마를 만들게 되어 기분이 매우 좋아질 것이다.

Greenpeace USA (그림 7에 나온)는 명암대비 스키마를 사용한 많은 사이트 가운데 하나이다. 당신은 노란색과 오렌지 색을 볼 수 있지만 그보다 녹색과 빨간색이 주된 색상으로 사용되었다. – 두 가지 색상은 색상환에서 각각 정반대의 색상으로 나타나 있다. 이런 보색을 이용하는 방법은 실수를 할 여지가 거의 없다. 사실 따뜻하고 차가운 색상의 조합의 사용은 그 색상의 명암대비 차이로 인해서 사이트에 활발한 기운을 불어 넣어 줄 수 있다.

보색의 스키마는 따뜻한 색상과 차가운 색상을 포함하고 있는 방법으로 웹사이트 상에서 매우 유용하게 사용할 수 있다. 그림 8에서 볼 수 있는 것과 같이 이런 색상을 사용하게 되면 명암대비를 제공하며 어떤 색상이 따뜻한 느낌이고 시원한 느낌인지를 기억하기 쉽다.

따뜻한 색상들은 여름이나 태양 혹은 불을 떠올리기 쉬운 색상들이다. 따뜻한 색상들은 보라색에서 노란색까지의 색상이다. 시원한 색상은 봄, 얼음 혹은 물을 떠올리기 쉬운 색상들이다. 이러한 색상은 노란색에서 녹색을 지나 보라색에 이르는 범위의 색상이다.

만일 당신이 색상환 위에서 해당 색이 어떤지를 정확히 알고 있다면 반대 쪽의 “온도” 영역에 색상을 선택하지 않고는 색을 선택할 수 없음을 알게 될 것이다. 그래서 당신이 뜨거운 빨간색을 선택한다면 그 반대는 차가운 녹색일 것이다. 또는 당신이 파란 녹색을 선택한다면 스파이시한 빨간색 – 오랜지 색의 조합을 다른 쪽에서 고를 것이다.

그림 9와 같이 Ecolution은 따뜻하고 시원한 색상의 조합을 지속적으로 잘 사용해 온 사이트의 예이다.

Ecolution은 녹색의 로고와 반대로 홈페이지 상에서 강조를 하기 위하여 빨간색을 자주 사용하였다. 그들은 선택된 두 가지 색상의 색조, 톤, 쉐이드에 변화를 주면서 두 가지 색 대비를 섞었다. 흰색이 그러하듯이 검은색 조차도 따뜻하거나 시원한 분위기에 따라갈 수 있다. 전체적으로 사진은 따뜻한 느낌이며 두드러지게 순 녹색과 잘 어울린다. 비록 그들이 그린피스와 동일한 색상을 사용하였지만 Ecolution사이트는 사진 상에 풍부한 톤과 쉐이드를 이용하여 덜 화려한 모습을 가지게 되었다. 당신은 이런 색 이론이 이렇게 쉬울 것 이라고는 생각해 본적이 없었을 것이다. 그럼 색상의 스키마에 대해서 조금 어려운 부분을 알아 보도록 하자.

3색 스키마는 하나의 색상을 선택하고 색상환의 위에서 그 색상과 동일한 거리 거리에 놓여 있는 두 개의 색상으로 만들어 진다.

나는 어떻게 색상 스키마가 정신 없는 방법을 포함하는지 보여주는 스키마를 위해 이 색상을 선택하였다. 주 색상이 색상환 상에 있는 곳과 동일하게 위치한 것은 전혀 문제가 되지 않으며, 각각의 색상은 각각의 주 색상과 두 번째와 세 번째 색상이 같은 양을 가지게 된다. 3색 스키마 중 주 색상이 많이 사용되게 되어 시대에 뒤떨어 진 것처럼 보인다. 대신 당신은 그림 11과 같이 온라인 색상 추출기를 사용해서 다른 색상을 선택하는 것이 좋을 것이다.

위에서 볼 수 있는 것과 같이3색 스키마는 오렌지-노란색, 파란-녹색, 빨간-보라색을 추출해 냈다. 나는 처음 오렌지-노란색을 선택하고(좌측 색상환에서 작은 원안의 검은 점이 내가 선택한 색상을 알려 준다.) 색상환 바로 아래 있는 Triad라는 버튼을 선택하였다. 추출기는 자동적으로 색조, 톤, 쉐이드를 모두 포함한 3색의 조합을 나타내준다.

이 세가지 색상의 조합은 마치 단일 색상 스키마의 예에서 보색을 나타내 준 것처럼 다른 두 개의 점 표시를 이용해서 색상환에서 어디에 위치하고 있는지 나타내준다.

지금이 실제 색상환이 손안에 들어와야 하는 때이며 온라인 상에서 만들어낸 결과는 실제 색상환과는 조금 다를 수 있다. 내가 색상환 상에서 Angle/Distance 를 max로 설정하게 되면 실제 내가 들고 있는 색상환과 유사한 결과를 얻을 수 있을 것이다. 위에서 보이는 결과는 색상환과 최대한 유사한 결과를 보여 주는 것이다.

3색 스키마는 또한 따뜻한 색과 시원한 색을 포함하지만 하나의 색상의 온도가 두드러질 것이다. 일반적으로 다른 색상을 가리게 되는 색의 온도는 처음과 끝에 선택하는 색상이다.

내가 처음 오렌지-노란색을 선택하는 경우 이것은 따뜻한 색상이다. 따뜻한 색은 색상의 결과를 좌우하게 되며 다른 2개의 색상 가운데 하나는 시원한 색상이 될 것이다.

그림 12에서 보이듯이 Puzzle Pirates은 그들의 홈페이지 상에서 3색 스키마를 사용하였다. 그들은 빨간색-파란색-노란색의 1차 스키마를 사용하였고 이런 주 스키마는 아이들이 주로 가는 게임 사이트를 위해서는 최고의 선택이다. 파란색이 주된 색상으로 사용되었으며 빨간색과 노란색이 액센트로서의 역할을 수행하며 이런 액센트는 사용자의 시야를 페이지 상에서 이끌어간다.

더 많은 색상을 선택하면 색상 스키마도 더욱 복잡해 진다. 그러나 색조, 톤 또는 쉐이드를 알아내기 위한 하나의 트릭이 있으며 순수한 색상들과 그 색상의 색조, 톤 그리고 쉐이드를 섞는 것 보다 각 영역과 서로를 나누는 경계선을 확실하게 표시한다. 이 방법은 4가지 4쌍으로 한 벌을 이루는 색상 스키마로 잘 사용된다.

4색 스키마는 보색 스키마와 유사하며, 같은 간격을 두고 있는 두 가지 보색 조합을 사용하는 것이다.

그림 14는 온라인상에서 4색 스키마를 사용하는 것을 보여준다.

색상환 좌측에서 빨간색 아래 검은 점이 있는 것을 주목해라. 이것이 내가 처음 선택하였던 색상이다. 내가 색상환 아래에 있는 Tetrad버튼을 클릭하였다. 한 번 더 보여 졌던 색상은 내가 손에 들고 있는 색상환과는 조금 다르네 나오지만 색상환 아래 있는 Angle/Distance 이라는 툴에서 “max로 하게 되면 손에 들고 있는 색상환과 색상이 일치하게 될 것이다. 위에서 보이는 결과는 그러한 것들이 색상환과 가장 가깝게 매치되는 것으로 나타난다.

이 색상 스키마는 다소 복잡하게 느껴질 수도 있기 때문에 지금 당신이 해야 하는 것은 우측 열에 있는 색상 가운데 모든 4가지 색조 또는 톤 또는 쉐이드를 선택하는 것이다. 오른쪽 멀리 있는 화살표를 클릭해서 당신이 원하는 것을 선택할 수 있다. 예를 들어 그림 15에서는 이 색상스키마에 해당하는 색상들의 블록의 모습을 보여주는 예이다.

그림 16은 중간 톤의 색상의 예를 보여준다.

네모의 위쪽을 가까이 보게 되면 4개의 단일 색상 스키마를 제공하는 추출기를 볼 수 있을 것이다. 이런 스키마들은 우측에 있는 열에서도 보여지며 또한 큰 사각형 안에 붙어 있는 작은 사각형안에서도 볼 수 있다.

Jane Goodall Institute site(그림 17)은 이런 4색 스키마를 잘 표현한 몇몇 안 되는 사이트 가운데 하나이다. 보라색 노란색 톤 그리고 빨간색 하이라이트(화면에서 보이지 않는 아래 부분에 많은 빨간색이 사용되었다.)와 녹색이 사진 위에 나타나 있다.

여기에서 사용된 보라색은 온라인 색상 툴에 의해 만들어진 색상 스키마에 정확하게 매치되지는 않으며 이것은 다소 빨간 보라색에 가깝다. 이는 우리가 사이트를 만들 때 아이디어를 만들어 내기 위해 온라인 색상 추출기를 사용하거나 색상환을 사용하는 방법을 알기 위해서 좋은 예로 사용될 수 있다.

지금 당신이 디자인에 대한 아이디어와 색상에 관한 무엇인가를 웹사이트 상에서 찾기 위해 돌아 다닌다면 당신이 가장 좋아하는 웹 사이트에서 색상 스키마를 어떻게 사용하였는지에 대해 더 많이 알아내기 위해서 색상환을 항상 가까이 두어야 한다.

비록 색상의 조합이 매우 복잡해 보일지라도 모든 색상의 스키마는 특정한 규칙에 따라서 움직인다. 이러한 가이드라인은 웹사이트 상에서 색 대비와 매력을 높여줄 수 있는 색상을 사용하는 방법을 이해하기 쉽도록 한다.

색상환이 존재하는 이유가 이런 색상들을 사람들이 잘 사용할 수 있게 하기 위함이다. 온라인 색상 추출기와 같은 색상환과 툴은 경험이 부족한 디자이너들에게 색상을 쉽게 고를 수 있도록 도와 준다.

이번 장에서 다루어 본 색상 스키마는 단색, 보색, 3색 그리고 4색 스키마였다. 비록 또 다른 색상 스키마들도 존재하지만 이 네 가지 색상 스키마가 가장 이해하고 적용하기 쉬운 색상 스키마이다.

마지막 두 개의 질문에는 맞는 답이나 틀린 답이란 없다.

• 3가지 1차 색상의 이름을 대고, 왜 그들이 1차 색으로 불리는지 설명하여라.
• 3가지 2차 색상의 이름을 대고 그 3가지 색상을 만들기 위해 사용되는 1차 색상들의 이름을 대라.
• 색조, 톤, 쉐이드가 어떻게 만들어지는지를 설명하여라.
• 단색 스키마란 무엇인가?
• 보색 스키마란 무엇인가?
• 따뜻한 색상과 시원한 색상을 설명하여라.
• 3색 스키마란 무엇인가? 이 스키마에 포함되는 3가지 색상을 뽑을 수 있는가?
• 4색 스키마란 무엇인가? 이 스키마에 포함되는 4가지 색상을 뽑을 수 있는가?
• 어떤 색상 스키마가 사용하기 가장 쉬운가?
• 어떤 색상 스키마가 가장 복잡한 형태인가?

Linda Goin은 시각적 의사소통에 관한 미술사를 취득하였고 부전공으로 경제학과 마케팅을 공부하였고 미국역사학에 관한 석사를 취득하였고 종교개혁에 관한 부전공을 가지고 있다. 처음의 전공과 석사전공간에 큰 연관성이 없어 보이지만 린다는 재료문화에 관한 연구와 고고학 발굴에 관한 사이트에서 25년간의 디자인 전문가로서의 역량을 발휘하였다. 콘텐츠 개발에 대하여 월스트리트 저널, 시카고 트리뷴, 싸이컬러지 투데이 및 LA타임즈와 인터뷰를 하였고 51회 Colorado Press Association awards 및 다양한 파인아트 및 그래픽 디자인에 관한 시상식에서 그녀의 작품들이 수상을 하였다. 린다는 웹 디자인 및 접근성에 대한 여러 권의 ebook을 저술하였고 이외에도 개인적으로 경제 기사를 쓰기도 하며 검색엔진 최적화에 관한 대필을 하기도 하였다.