그레이스케일(grey scale)

그레이 스케일은 정보의 강약을 나타내기에 효과적입니다. 여러분들은 모두 알게 모르게 이 그레이 스케일에 익숙해져 있습니다. 특히 쇼핑몰에서 그레이 스케일을 많이 볼 수 있습니다.

11번가

검정 계열이 많이 쓰였습니다. 하지만 다 같은 #000이 아닐걸요?

개발자 도구로 어떤색을 사용하고 있는지 찍어보았습니다.

티가 심하게 나는 #999

그러나 대부부은 #333을 사용하고 있습니다. 우리는 검은색을 #000이라고 부를 수 없습니다. 수많은 검은색처럼 보이는 것들이 사실은 #000에서 #fff에서 왔다 갔다 하고 있기 때문이죠.

UI 디자인에서 그레이 스케일의 역할은 정보의 강약, 계층 구분 등이 있습니다. 그레이 스케일이 없다면 정보의 강약 조절도 힘들 것이라는 것이죠. 이는 스케치북*(흰색)과 연필(#fff~000), 검정 볼펜(#000), 색상 볼펜이 있는 이유와 마찬가지입니다. 

---

그러나 #000~#fff에서 벗어나야 합니다.

완전하고 순수한 그레이스케일과 블랙톤에서부터 멀어져야 합니다. 그 이유는 실제로 순수한 완전한 회색은 자연에서 확인할 수 없습니다. 반타 블랙이 존재하는 이유입니다. 반타 블랙을 사진으로라도 접하게 되었을 때 이질감이 느껴지는 것도 자연에서 만날 수 없는 색이라는 말과 같습니다.

www.yna.co.kr/view/AKR20170125060100797

디자인에서 완전한 회색이 아닌 약간의 활기를 더해야하는 이유는 사용자들에게 무의식적으로 후자가 익숙할 것이기 때문입니다.

---

그레이 스케일은 강약 조절을 위해 사용합니다. 어떤식으로 사용하는지는 많은 사이트들을 눈으로 보고 확인을 해보는 게 정답을 찾아가는 방향일 거라 생각합니다. 

1. 구글 머터리얼 디자인으로 부터 힌트를 얻을 수 있습니다.

material.io/resources/color/#!/?view.left=1&view.right=0&primary.color=CFD8DC&secondary.color=AB47BC

Color Tool - Material Design

2. coolors.co로 부터 힌트얻기

coolors.co/

Coolors - The super fast color schemes generator!