6-1. 색상 추출

좋은 디자인에 있어서 색상 선택을 매우 중요합니다.

하지만 좋은 색은 어떤 것인지? 혹은 나쁜 색은 어떤 것인지?

우리는 그 기준에 대해서 명확하게 배운적이 없습니다. 

색을 선택할 때 요령이 있는데 이 요령에 대해서 알아보도록 합니다.

 

 

 

 

자연은 최고의 색조합물이다.

 

 

일단 기본적으로 자신이 직접 생각하거나 혹은 피그마에서 제공하는 색을 직접 선택하지 않고

다른 작업물에서 색을 차용하는 것입니다. 여기서 말하는 다른 작업 물이란 웹사이트, 삽화, 포스터와 같은 모든 디자인을 말합니다.

이런 인위적인 작업물 말고 우리 주변에서도 좋은 색을 쉽게 찾아 볼 수 있습니다.

사람, 자연, 동물 등 실물의 색을 표본으로 삼는다면 꽤 좋은 색을 찾아낼 수 있습니다.

왜냐하면 자연계는 대부분 훌륭한 색조합을 갖추고 있기 때문입니다.

 

 

 

 

 

 

오른편의 사자 사진에서 색을 추출한다면 위와 같이 자연스럽고 조화로운 색상 팔레트를 만들어 낼 수 있습니다.

위 색상 조합을 참고해서 웹디자인에 적용한다면 어떨까요?

 

 

 

 

배경에 색을 첨가

 

 

배경과 타이포그래피에 색을 첨가

 

 

위 예시와 같이 사진에서 추출한 색을 배경이나 글꼴에 적용을 해봤습니다.

색상을 적용한 왼편의 텍스트와 배경이 오른편의 사자 사진과 맞물려 조화롭게 잘 어울립니다. 

 

 

 

 

 

위에서 봤던 것 처럼 색상을 추출할 때는 적절한 방법이 있습니다.

피그마를 활용한다면 간단한데, 위 사진에서 색상을 추출해 보도록 하겠습니다.

 

 

 

 

 

 

이미지에서 색상을 추출하려면 이미지를 흐릿하게 만들어야 합니다.

이는 이미지의 픽셀을 평균화해 실제 우리 눈이 인지하는 것처럼 만들어서 더 정확한 색체를 추출할 수 있기 때문입니다.

우리가 현실에서 개별적인 픽셀로 사물을 보지 않자나요? 우리 눈은 그림자와 변화 등 모든 것의 "평균"을 인지합니다.

반대로 컴퓨터는 매우 정밀하기 때문에 픽셀 단위의 색까지 잡아낼 수 있습니다. 

 

 

피그마로 돌아와서 오른편의 이미지에 EFFECT 효과를 적용한 뒤 Layer Blur 효과를 약 24~30 정도 지정합니다.

치수는 이미지에 따라 다릅니다. 더 흐리게 해야할 수도 있고 혹은 덜 흐리게 할 수도 있습니다.

그 후 이미지에서 가장 눈에 띄는 부분의 색을 추출하면 됩니다. 

추출한 색을 배경이나 폰트에 적용해서 적절한 색배합의 디자인을 찾아내면 끝입니다.

간단하죠?

 

 

 

 

 

 

저는 이런식으로 디자인 해봤습니다. 

배경과 글꼴의 색상 대비가 두드러지고, 제목과 단락의 폰트 크기와 색상 대비가 효과적입니다.

앞전에 배웠던대로 큰 글꼴에는 줄 간격과 자간을 더 좁혀줬고 대문자로 바꿔서 집중도를 더 올렸습니다.

작은 글꼴은 줄 간격을 넓혀 가독성을 더 높혀줬습니다.

또한 사진의 색상과 본문의 배경/글꼴 색상이 어우러져서 조화로워 보이네요.