웹디자인시 색상배색에 관련된 몇가지 이야기.
색상환을 검색하던중유익한 내용이 있길래,
출처표기하고 한번 포스팅해봅니다. :)
내용출처 : 지식인 답변중
웹디자인 뿐만 아니라 색채를 사용하는 모든 활동에는 색채 조화의 원리라는 것이 있습니다
이것만 잘활용하셔도 좋은 작품을 만드실수 있으실것입니다.
색채조화의 원리란?
색채조화의 일반적인 원리로 색채학다인 져드(D. B. Judd)는 다음의 5가지 원리를
기본원 칙으로 삼았습니다
■질서의 원리
색을 배색할 때 규칙적이고 계회성 있게 색채를 선택하는 것이 효과적이고 아름답습니다. 즉 디자인의특징에 맞는 색채들을 고른 후 배색해야 합니다. 실제로 실무에서는 디자인을 하기 전에 색채 시스템을먼저 만들어 놓고 그 안에서 색채 구성을 합니다.
■유사의 원리
색상환에서 근접 색채들의 조화를 말합니다 즉 색상환에서 30도 이내의 배색을 말하며, 예를 들면 빨간색,주황색, 노랑색 등이 같이 배색된 경우와 이와 같으며 통일성과 무난함을 줄 수 있고 ,안정감을 줍니다
■동류의 원리
공통되는 성질과 속성을 가진 색채들의 조화를 말합니다 , 같으니 계열의 색채는 무난한 조화를 이루는 반면 지루함을 줄 수도 있습니다
■명료의 원리
색을 배색할때 배색되는 색은 정확하게 구분되어야 한다는 원리로 비 모호성의 원리라고도 합니다.
같은 색의 배색을 사용하더라도 바탕과 내용이 명확히 구분되어야 하며 보는 사람에게 정확한 정보 전달이 이루어져야 합니다.
■대비의 원리
반대색이나 보색관계에 있는 색들의 배색을 말합니다 반대색의 배색은 매우 화려한 느낌을 주게 됩니다
대칭되는 중심을 축으로 반대되는 색으로 구성되어 강렬한 느낌을 주고 있습니다
색채 배색 방법 및 배색 분석하나의 색은 배색에 따라 다르게 느껴지는 경우가
많습니다. 즉 생의 선별도 중요하지만 배색 후 서로 어울려야 하는 것입니다. 다소
거슬리는 보색의 배색일 경우에도 어떻게 배색하느냐에 따라 느낌은 완전히
달라질수 있습니다.
배색에는 왕도가 없습니다. 많이 배색해 보는 경험이 필요합니다. 잘된 배색을 많이 보고 분석해 봄으로써 여러분만의 배색을 만들수 있습니다.
동일 색상에 따른 톤의 배색
동일 색상의 배색시 채도 차를 크게 주면(톤을 다르게 사용하면) 색과 색의 명료한 구분이 나누어지며 통일된 느낌을 가질수 있습니다. 또한 색상의 수가 적기 때문에 깔끔한 느낌을 줄 수 있습니다.
영국의 Relevare사의 사이트 입니다 . 왼쪽의 컬러풀한 원색의 조합이 방문자들의 시선을 끕니다.
동일 색상을사용하면서 채도차를 크게 주어 면의 구분이 가능하도록 하였고 협조적인
느낌을 주고 있습니다.
색조는 색상의 톤을 말하나는 것으로 밝고 어두운 색의 차이를 말합니다 예를 들어 밝은 색톤, 파스텔톤 어두운 톤등을 말합니다.
-유사 색상의 배색
색상차가 적은 유사 색상의 배색입니다 . 이러한 배색은 통일감은 있고 협조적일 수 있지만 다소 심심할 수 있습니다.
난색계열(빨강,주황노,랑)의 유사 색상 배색 시는 따스하고 온화한 느낌을 주고 , 한색계열(남색, 파랑, 하늘색)의 유사색상 배색 시는 시원하고 차분한 느낌을 주게 됩니다
http://www.digitaria.com
빨간색, 주황색, 살색등의 유사색상을 배열한 사이트 입니다. 색상 차가 적은 배색이기 때문에 따스하고 온화한 느낌을주고 있습니다.
주조색을 이용한 배색
일단 배색할때 지면 안에서 가장 힘있는 색을 정해야 합니다 지면 안에서 가장 많이 사용되는 주류의 색이 있어야 전체적인안정감을 가질 수 있습니다.
여러 가지 색이 사용되고 있다 하더라도 전체적인 느낌이 하나의 색으로 느껴진다면 보는 이의 눈은 편안해지게 됩니다
http://www.ideo.com
주조색인 회색을 전체적인 배경으로 사용하여 한 지면 안의 여러 가지 색이 주는 산만한 느낌을 보완하고 있습니다.
http://www.koziol.de
독일의 캐릭터 회사 koziol의 웹사이트 입니다. 여러 색채와 그라데이션이 있지만 전체적으로 녹색계열이 주류를 이루고 있어안정감을 줍니다.
무채색을 이용한 배색
무채색의 배색은 중후함과 세련미를 줍니다. 또한 무채색의 면적이 커지면 안정감을 갖게 됩니다. 무채색은 어느 색과 어울려도중화시키는 성향이 있습니다.
따라서 어울리지 않는 조화나 산만한 배색이라도 무채색을 넣어주면 안정감을 갖게 됩니다. 배색시 명도차를 많이 두면 시원하고 강한 느낌을 줍니다.
전반적으로 무채색을 사용해서 중후한 느낌을 주었고 위와 아래의 명도차를 주어서 시원한 느낌을 주었습니다. 또한 아래 부분은 면에 따라명도가 달라지므로 컨텐츠를 구분시켰습니다.
http://www.geneticshoes.com
신발회사 Genetic의 홈페이지 입니다 신발과 스케이트 보드에 관한 내용을 보여주고 있습니다. 전체적으로 무채색 톤을 사용하여 다양한 그래픽이 주는 복잡한 느낌을 조화롭게 하였습니다. 매 페이지마다 뜨는 컬러 이미지들이 무채색 배경에 의해 더 돋보이게 해주는 사이트 입니다.
콘트라스트를 이용한 배색
콘트라스트를 이용한 배색은 색의 3속성 차를 크게 주어 배색된 색을 서로 분리시키는 것입니다 즉 강약과 대비가 확실하여 강한느낌을 줍니다.
한편 강렬한 인상을 주기 때문에자극적이고 오래 보게 되면 금방 싫증날 수도 있습니다.
강약의 대비 현상을 잘 이용한 사이트 입니다. 빨간색과 검정 회색의 배열로 강한 구분을 짖고 있으며 강한 느낌을 줍니다.
http://www.rollercoaster.co.kr
롤러 코스트의 공식 홈페이지 입니다. 롤러 코스트의 소개와 앨범에 실린 곡들을 들을 수 있습니다. 검정 배경에 원색 칼라들이 돋보이는 사이트입니다.
강조를 이용한 배색
강조는 포인트라고 하며 부분적으로 강한 느낌을 주어 조는 이로 하여금 높은 집중력을 끌어 내게 합니다.
색채 구성시 포인트를 '메인 플래시>메뉴>서브메뉴>문장영역'등으로 집중하게 시선의 순서를 준다면 웹 사이트에 접속한 사용자는 편하고 즐거운 서핑을 하게 될 것입니다.
http://www.chihwaseon.com
좋은 평가를 받았던 영화 '취화선'의 사이트 입니다. 한지를 배경으로 하여 가운데 강하게 찍어낸 먹점은먹의 느낌을 잘 살리면서도 보는 이의 시선을 집중하게 합니다 또한 인트로 페이지 다음의 레이아웃은 동양적 여백의 미를 살리며 오른쪽 하단의 붉은색 계열의 산수화는 사이트에 강한 인상을 남겨줍니다.
http://www.cassinausa.com
이탈리아 가구회사 카시나(Cassinausa)의 사이트 입니다. 전체적 레이아웃이 몬드리안의 면 분활을 보는 듯단아하고 깔끔하게 느껴집니다.
무채색의 배경 가운데 빨간색이 강한 인상을 주고 있습니다.면적대비를 이용한 배색색마다 면적이 다르게 느껴집니다.
예를 들면 명도와 채도가 높은 색은 넓게 채도와 명도가 낮은 색은좁게 인식됩니다. 
만일 노란색과 검정이 같은 크기로 배색되었다 하더라도 우리는 노란색을 더 넓게
느낍니다
배색 시에도 명도와 채도가 낮은 색을 넓게 배색하거나 배경으로 사용하는 것이 좋습니다. 반대로 채도와 명도가 높은 색은 좁게 배색하는것이 좋습니다.
너무나도 유명한 웹 에이전시 힐먼 커티스(Hilman Curtic)의 사이트 입니다. 배경을
회색으로 하고 컬러풀한 애니메이션을 좁게 사용했습니다.
이렇게 무채색과 같은 저채도 , 저명도 색채를 사용하고 고채도 고명도 색채를 좁게 사용하면 안정감을줄 수 있습니다.