4. 색 쓰는 걸 도와주는 것들

미리 구성된 팔레트

viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762a9ffb280007d7a4863cd33fedbbc14386acbf9056b94487

한정된 색상을 쓴다는 게 처음엔 다소 불편할 수 있으나 색에 대한 응용력을 높여준다. 칼을 그리고 싶은데 회색이 어딨는지 찾기보다 이미 있는 색들로 칼을 그려보겠다고 생각하는 게 좋다.

팔레트 공유 사이트


viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762a9ffb280007d7a4863cd33fedba01023798aed6e652d390

http://www.colourlovers.com/ 다른 사람의 구성을 빌려 쓰는 것도 좋다. 지구촌 사람들이 직접 색을 구성해 올리고 괜찮은 것들은 상위권으로 올라간다. 같은 빨간색이라도 어떤 색이 잘 쓰이는지, 어떤 색과 함께 쓰면 어울리는지 익힐 수 있다.
viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762a9ffb280007d7a4863cd33fe6bcd24350094ae96ce6bf4a
(팔레트를 선택하여 응용해본 결과물.)

색 분석 사이트

viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762a9ffb280007d7a4863cd33fb7ef9176edcb72df442aca21



http://mkweb.bcgsc.ca/color-summarizer/?home 맘에 드는 레퍼런스를 찾았을 때 어디서 어디까지를 무슨 색으로 봐야하고 어떤 색으로 구성되어 있는지 전혀 감이 오질 않고 스포이드를 찍어봐도 뭔가 오묘하게 다름을 느껴본 적이 있을 것이다.
원하는 이미지를 넣고 분석한 뒤 해당 색상을 이용해 재구성하면 비슷한 분위기의 결과물을 낼 수 있다.

스스로를 계속 단련
인터넷에서 많은 짤을 보며 스스로 연구하자. 이제 원리를 알았으니 예전과 다르게 이미지를 보면 볼 수록 이미지의 색 구성이 눈에 밟힐 것이다. 왜 저 그림은 보기에 좋은지 스포이드를 찍어보고 색분할을 따라해보고 하이에나처럼 살점 하나 남기지 않고 흡수한다.

마지막으로 자주 쓰이면서 내가 경험하여 깨우친 노하우를 알려주고자 한다. 이는 테크닉으로 당장 써먹을 수 있는 것들이다.


5. 기타 실전 노하우
그림자 색 고르는 법

viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762a9ffb280007d7a4863cd33fe0baae475d975e8be32b17d2

왼쪽은 형광등 아래에서 셀카를 찍은 것처럼 칙칙한 느낌이다.
반면 오른쪽은 기본 피부색은 같은데도 불구하고 더 화색이 도는 착각도 준다. 왜 두번째가 더 나은 결과가 되었을까?

viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762a9ffb280007d7a4863cd33fedb9abd5bb93f9f1d478cc07

왼쪽은 '그림자는 어둡다'는 이유로 오로지 명도만 낮춰 넣었다.
오른쪽은 처음에 톤 설정을 해주었다. 톤 설정은 반사광이나 광원 자체의 색깔이 물체에 입혀지는 느낌을 준다. (지금은 그림자니까 반사광임.)

viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762a9ffb280007d7a4863cd33fb1bca8d17a18cbf558acdb9d

그림자의 색조를 설정 톤을 향해 적절히 옮기면 색들이 설정된 톤에 가까워지는데, 그 결과 비슷한 계열로 묶이는 2번 색조합의 특징을 갖는다.
이후 명도만 낮추지 않고 채도를 같이 높여주면 생기 있는 그림자가 된다.
만약 노을이나 밤, 바다 속, 빨간 경고등이 켜진 실내 등의 컨셉을 표현하고 싶다면 그림자 뿐 아니라 모든 색을 톤으로 묶으면 된다.
원리를 이해했을 때 쓸 수 있는 꼼수가 한가지 있는데, 곱하기 또는 스크린, 오버레이 레이어 중 하나에 원하는 톤으로 얹으면 자동으로 색이 묶이게 된다.

viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762a9ffb280007d7a4863cd33fecbb2b5552be0423007cfe94



밤 분위기 컨셉으로 오버레이 레이어를 얹었다.
굳이 분위기를 위해서가 아니어도 색 표현이 미숙할 때 최종적으로 톤을 묶어주면 더 나은 결과를 얻을 수 있다.

쌩회색 쓰지 않기
쌩회색은 숙련된 사람이 아니면 그닥 사용을 권장하지 않는다. 가급적 채도를 조금이라도 주는 게 좋다. 채도는 어떤 식으로 주어야 하는가?
빛에 비친 머리카락을 가까이 본 적이 있는가? 검다고 생각한 머리도 생각보다 밝은 색깔을 띈다. 검은 머리 동양인은 대개 갈색이다.

viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762a9ffb280007d7a4863cd33fb6b158f2210641199cb17a365f


원래부터 검은색 물체가 아닌 이상 빛을 받으면 숨겨진 본래의 색이 나오기 마련이다. 그런 색을 염두에 두고 채도를 준다면 쌩회색보다 더 나은 결과물을 낼 수 있다.


채도와 명도로 가독성 살리기
이것은 위의 영상 앞부분의 연속된 설명이다. 아래의 그림들을 보자.

viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762a9ffb280007d7a4863cd33fe0e899dc80436ae3639ca2e9


(상대적으로) 채도가 높을 때 / 색이 진할 때 / 선명할 때 더 주목받는다. 그리고 주목 받아야할 물체가 올바르게 주목 받을 때 우리는 가독성이 높다고 한다.
아래의 스크린샷을 보자.

viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762adaa77e6b04dfa0823dda50e5b9f4a10eee47357195862a765acf91


viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762a9ffb280007d7a4863cd33fb0be75a329992681bb262f4d


매력적인 아트 스타일이다. 그러나 정말 끔찍하다! 메인 캐릭터의 색을 적 캐릭터도 공유하고 있고 심지어 더 많은 지분을 가지고 있다. 게다가 개구리와 해골은 배경인지 물체인지 구분이 안가며, 디테일 넘치는 배경은 자신의 존재감을 미친듯이 뽐내고 있다.
위의 삼박자를 정확히 전부 어기고 있다.
이제 아래의 스크린샷을 보자.

viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762a9ffb280007d7a4863cd33fe1eff871188e69c44b28d34c


viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762a9ffb280007d7a4863cd33fe2ea651a078e3d9aa9140f90


캐릭터가 움직이는 바닥은 밝고 선명하다 / 배경은 어둡거나 흐릿하다 (캐릭터가 어둡다면 배경은 밝은 경우)
캐릭터는 외곽선을 가지고 있다 / 배경은 그렇지 않다
집중해야할 요소와 아닌 요소를 제대로 구별해주고 있다. 제일 처음 스트리트 파이터와도 대조적이다.

한 주제에 사용하는 색상 수 절제 또는 통일하기
색을 많이 쓴다고 나쁜 건 아니지만 많을 수록 다루기가 어렵다. 아름답지 못하면 깔끔하기라도 해야 한다. 여기서 색을 많이 쓴다는 건 색계열을 말한다.

viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762a9ffb280007d7a4863cd33fe6eb787ec4f195558144517c

왼쪽은 색이 2 개고 오른쪽은 색이 4 개예요!
아니다! 분명 색이 4 개이긴 한데 색계열은 초록색 1 개이다.  그래서 둘 중 색을 많이 썼다에 맞는 건 왼쪽 팔레트이다.
덧붙여 주제란 하나의 오브젝트, 하나의 배경, 크게는 하나의 집합을 뜻한다.

(UI) 디테일은 과감히 생략하기
색을 절제한 것처럼 다루지 못할 장식은 과감히 빼는 게 좋다. 가장 좋은 방법은 아이콘화 하는 것이다.

viewimage.php?id=2abcdd23dad63db0&no=29bcc427b28777a16fb3dab004c86b6f4fce3bfc395ceae176db8d02ca05ad3a27762a9ffb280007d7a4863cd33fb4b03587e4f10e5eea566903



아이콘화 한다는 건 형태를 생략함을 의미하고, 형태를 생략함은 표현하는데 필요한 색이 적게 필요함을 의미한다. 다뤄야할 색이 줄어들면 자연스럽게 통제하기 쉬워진다.

이후는 괜히 쓰다보니 주제 넘은 것 같은 느낌도 들고 생각나는 것도 없고 귀찮고 확신이 없어 이만 줄을 글인다.