그러데이션 올바르게 사용하기
Using Gradients the right way
확실히 요즘은 웹, 모바일에서 그러데이션을 많이 사용하는 모습을 많이 볼 수 있습니다. 그러데이션이 주는 묘한 깊이감과 느낌 때문일까요? 오늘은 바로 그러데이션에 대한 글을 가져왔습니다. 그러데이션을 효과적이고 안전하게 사용하려면 어떻게 해야 할까요?
https://medium.muz.li/using-gradients-the-right-way-878d797bc600
*다음은 위 글에 대한 번역입니다.
그러데이션 올바르게 사용하기
Using Gradients the right way
저는 세계에서 가장 유명한 그래픽 디자이너의 말에 더 이상은 동의할 수 없습니다. 왜 그렇나 오요? 디자인은 어디서나 통하는 범 세계적 언어입니다. 때문에 번뜩이고 아름답고 멋진 디자인을 만드는 수많은 방법이 존재합니다. 저번에 쓴 글에서 저희는 2017년의 UI 트렌드에 대해 이야기했습니다. 우리는 스케어모 피즘에서 플랫까지, 어떻게 유행이 오고 가는지 확인했습니다. 하지만 지금은, 그러데이션이 화두에 올라왔습니다.
디자인에 대한 반응은 3가지로 분류할 수 있다.
그래, 아니, 오!
특히 ‘오!’는 디자이너가 노려야 할 목적이기도 하다.
- Milton Glaser
당장 배경부터 로고까지, 그러데이션이 주는 효과(두 가지 또는 세 가지 색상, 아니면 당신이 원하는 그 어떤 형태이든)는 UI 디자인 세계에서 주목을 받았습니다. 우리는 브랜딩, 일러스트, 타이포그래피 등, 어디서든지 그러데이션을 어디서든 찾을 수 있습니다. 그라디에션이 인상적인 가장 큰 이유는, 다양한 방법으로 활용이 가능하며, 적용했을 때 꽤나 예뻐 보인다는 점입니다. 그러데이션이 디자인에 깊이감을 너무 잘 주기 때문에, 다른 디자인들이 플랫해 보일 지경입니다. 안 그런가요? 어떤 그러데이션은 두 가지 색상 이상을 가지고 있습니다. 어떤 건 중심에서 퍼져나가기도 하고, 모서리에서 떨어지기도 하고, 수직 또는 수평으로 떨어지기도 합니다. 단색으로도 만들어질 수 있고, 다른 톤끼리 만들어질 수 있고, 심지어는 배경 이미지로도 만들어질 수 있습니다. 가능성은 무한합니다.
그러데이션은 디자인을 좀 더 흥미롭게 만드는 훌륭한 방법입니다. 그러데이션은 단순하지만 복합적입니다. 그래서 저는 자주 그러데이션이 헷갈려했습니다. 그런 까닭에, 저는 UI에서 그러데이션을 사용할 때 참고하여 그러데이션의 잠재력을 폭발시킬 수 있는 ’ 그러데이션 체크리스트’를 만들게 되었습니다. 아래 나오는 질문들은, 제가 그러데이션을 사용하거나 사용할 계획일 때 스스로에게 묻는 질문들입니다. 그리고 이 질문들은 디자인을 통해 “오!”라는 반응을 이끌어 내는데 한 발자국 가깝게 해주는 질문들입니다.
내가 괜찮은 색을 선택했나?
우리가 고른 색이 그러데이션을 만들 수도, 깨버릴 수도 있다는 것, 그리고 그런 선택이 디자인의 운명까지 결정한다는 건 디자이너들에게 널리 알려진 사실입니다. 그래서 저는 색깔을 고르는데 매우 신중합니다. 최종적으로는, 사용된 색상에 따라 웹사이트 또는 앱의 전체(말 그대로 전체) 분위기가 결정됩니다.
저는 기본에 충실한 걸 좋아합니다. 제게 기본이란 컬러 팔레트입니다. 난관에 부딪히거나, 그러데이션을 만드는데 어떤 색을 사용할지 모르겠을 때 저는 컬러 팔레트에 충실합니다. 전 그러데이션을 만들 때 동일한 부류의 색깔들을 사용하는 걸 좋아합니다. 그런 색깔들은 항상 잘 먹히기 때문이죠. 제가 좋아하는 다른 방법은, 밝은 그림자로 실험해보는 방법입니다. 이 방법 또한 꽤나 잘 먹힙니다. 마지막으로 그러데이션이 괜찮은지 확인하기 위해, 저는 텍스트와 이미지, 다양한 콘텐츠를 적용해봄으로써 이 그러데이션이 활용성이 있는지 시험합니다.
색상환과 그라데이션개인적으로 그러데이션을 만들 때 너무 많은 색깔을 사용하는 걸 선호하지 않습니다. 전 두 개에서 세 가지 색상이 괜찮아 보이더군요. 왜 나고요? 글쎄요, 많은 색상들이 적절하게 섞이지 않았다면 일반적으로 다양한 색상을 보는 건 꽤나 눈에 거슬리기 때문입니다. 그리고 이런 거슬림은 디자인을 죽게 하죠. 그렇다고 저는 세 개 이상의 색깔을 사용하는걸 완전히 배제하는 건 아닙니다. 잘만 사용한다면 엄청난 결과물을 만들 수 있거든요.
색깔의 톤은 괜찮은가?
저는 Photoshop의 Dither버튼이 천사라고 생각합니다. 꽤나 많은 디자이너들이 이 신비로운 버튼에 대해 모르고 있습니다. 그들이 만든 그러데이션에 밴딩이 일어나도 말이죠. 이런 사각형의 밴드를 본 적 있나요? 확실히 보기에 좋은 모습은 아닙니다. 그렇죠? 저는 이런 현상을 해결하기 위해 Dither버튼을 사용합니다. 완벽하지는 않지만, 이 버튼은 경계선을 부드럽게 해줄 수 있습니다.
Dither 버튼저는 저번에 두 가지 혹은 세 가지 색상을 안전하게 사용하는 방법에 대해 이야기했습니다. 하지만 워낙 자유로운 영혼을 가지고 있으며 실험정신이 투철한 사람이라면, 여러 개의 색으로 그러데이션을 만들고자 할 수 있습니다. 이 때는 다양한 색들을 잘 혼합하는 것이 가장 중요합니다. 그렇지 않으면 사용자들에게 끔찍한 경험을 선사할 것이며, 그들의 눈도 아프게 할 것입니다.
올바른 곳에 그러데이션을 사용하고 있나?
네, 그러데이션은 보기 좋습니다. 하지만, 그러데이션을 아무 데나 사용할 수는 없습니다. 그러데이션은 꽤나 강렬한 존재감을 자랑합니다. 때문에 저는 그러데이션을 효과적으로 만들고 또 사용하기 위해서는, 정확하고 올바른 판단력이 있어야 함을 저 스스로 되새깁니다. 예를 들어, 병원이나 정부 웹사이트에서는 그러데이션을 찾을 수 없습니다. 기본적으로 브랜드가 매우 신중한 성격의 브랜드라면, 전 그러데이션을 선택지에서 지웁니다.
또 확인해야 할 중요한 내용으로는, 그러데이션을 여백과 잘 배치시키는 일입니다. 디자인도 숨 쉴 틈이 있어야 합니다, 그렇죠? 만약 당신이 배경에 그러데이션을 사용했다면, 그 압도적인 효과와 균형을 이룰만한 여백이 주변에 필요할 겁니다.
또한 최소한의 내용을 그러데이션 배경에 배치하면, 훌륭한 가독성을 제공할 뿐만 아니라 디자인을 깔끔하고 좋아 보이게 합니다.
일러스트나 로고에도 사용할 수 있나?
일러스트나 로고에 그러데이션을 사용할 때, 저는 굉장히 신중해야 한다는 걸 배웠습니다. 왜냐하면 이건 몇 안 되는 상황에서만 괜찮기 때문입니다. 만약 제가 라인으로 된 일러스트를 만들고 있다면, 전 그러데이션을 아예 사용하지 않을 겁니다. 왜냐하면 색깔은 돋보이지 못하고, 전체적인 일러스트의 매력이 사라지기 때문에 이상해 보일 겁니다. 뿐만 아니라, 작은 크기에서는 왜곡되어 보일 수도 있습니다. 반면 반 입체적이거나, 면으로 이루어진 일러스트에 사용하는 건 좋은 생각이라고 생각합니다. 일려 스트에 3D 효과를 줄 수 있기 때문이죠.
저는 주로 B2C(Business to Customer) 브랜드 또는 웹사이트에 그러데이션을 사용합니다. 왜냐하면 이런 브랜드와 웹사이트는 좀 더 친근하게 느껴지며, 그러데이션이야 말로 이런 속성과 브랜드 이미지를 잘 표현하는 수단이라고 생각하기 때문입니다. 이런 상황에서 그러데이션을 사용할 때, 저는 그러데이션에 브랜드 가치가 담기도록 하며, 로고나 웹사이트 등 디자인 전반에 같은 분위기가 느껴지게끔 신경 씁니다.
인쇄했을 때 괜찮나?
그러데이션이 화면상에서 아름답게 보이는 건 잘 알려진 사실입니다. 그런데, 인쇄했을 때도 그럴까요? 제 경험상, 그렇지 않을 때가 종종 있습니다. 지구에서 가자 유명한 브랜드 중 하나인 스타벅스, 나이키, 그리고 맥도널드를 보시죠. 이 브랜드들은 모두 그러데이션이 아닌 단색을 로고에 사용하고 있습니다. 왜냐하면 이 로고들은 패키징뿐만 아니라 다양한 목적으로 인쇄되어야 하기 때문이죠. 왜 그럴까요? 그러데이션은 인쇄물에서 제대로 그 느낌을 구현하기 힘듭니다. 그리고 인쇄했을 때 브랜드의 로고가 이상해 보일 수 있죠.
저도 인쇄물에 그러데이션을 사용할 때가 있기 때문에, 앞서 말한 내용을 완전히 부정하지는 않겠습니다. 다만 제가 인쇄물에 그러데이션을 사용할 때는, 실험하고 실험하고 또 실험해서 괜찮은 결과물이 나올 때까지 시도합니다. 디자이너의 일은 스크린에서 시작해서 스크린으로 끝나지 않습니다. 그렇기에 스크린 외의 다른 매체에서도 디자인이 잘 적용될 수 있는지 항상 확인해야 합니다.
지금까지는 완벽한 그러데이션을 사용하기 위한 내용이었습니다. 이제부터는 피해야 할 내용에 대해 설명하겠습니다.
글 문단에 사용하기
UI에서, 저는 많은 양의 텍스트를 사용하는 걸 권장하지 않습니다. 더불어, 이 문단 형태의 텍스트에 그러데이션을 사용하는 걸 권장하지 않습니다. 그러데이션이 가독성을 해치기 때문이죠 문단은 보통 많은 양의 정보를 담고 있습니다. 디자이너들이 이 문단의 글자 크기를 작게 하면, 그러데이션과 더불어 읽기 불가능한 상태로 돌변하게 됩니다. 사실 저희가 원했던 건, 이 내용을 사용자들이 읽는 거였는데 말이죠, 그렇죠?
웹사이트 맨 위/아래 텍스트에 사용하기
헤더/푸터 텍스트에서 저는 단색을 선호합니다. 전에 말했듯이, 사용자들은 웹사이트에 있는 내용을 읽을 수 있어야 합니다. 그러데이션을 메뉴 바와 같은 곳에 사용하게 되면, 읽을 수 없게 됩니다.
