brunch

You can make anything
by writing

- C.S.Lewis -

by Outlines Aug 28. 2018

그라데이션 2.0에 대한 생각

갤럭시 노트9와 아이폰X 월페이퍼로 본 디자인 트렌드

한 달 후, 일 년 후엔 어떤 게 유행일까. 매일 같이 트렌드 관련 글이 쏟아지는 디지털 세계에서, 디자이너라면 한 번쯤 00년도 디자인 트렌드 글을 읽어 봤을 것이다. 시시각각 트렌드가 변하다보니 왜 지금 이 순간 이게 트렌드인지를 생각해보게 되었다.


요새 많이 보이는 이미지를 요약하자면 추상적이고 비정형적인 이미지라고 할 수 있겠다. 딱 봤을 때 분위기를 전달하는 예쁜 이미지지만 구체적인 지시대상은 없는 이미지.

지난 주에 출시된 갤럭시 노트9 키비주얼을 보자. 펜 끝을 따라 물감처럼 퍼지는 이미지다. 굳이 의미 부여해보자면 펜으로 무엇이던 할 수 있다는 유연함과 가능성, 다채로운 컬러가 밍글되면서 역동성을 표현한 듯하다. 이게 정말 사측의 의도였는지는 알 수 없지만 몰라도 어떤 느낌인지는 알 수 있다.

아이폰X의 공식 월페이퍼를 보면 더 확실해진다. 컬러가 섞이고 흐려지다 선명해지는 알 수 없는 그래픽이다. 뭔지 모르겠지만 예쁜 이미지. 흡사 연기같기도 하고 물결 같기도 하다.


작년부터 가장 유행했던 디자인 요소를 하나만 꼽으라고 한다면 그라데이션이라고 말할 수 있다. 어디에나 쓰이는 거 아니냐, 할 수 있지만 분위기를 조성하는 배경이나 서브 요소로써 역할하던 그라데이션이 아주 적극적으로 주연의 역할을 했던 게 최근이기 때문이다. 비핸스 내에서는 이를 그라데이션 2.0이라 부르기 시작했다.


그라데이션은 알다시피 단색이 아니라 두 개 이상의 컬러가 점진적으로 변화하는 모습을 말한다. 보통은 부드럽고 온화한, 자연스러운 표현을 위해 그라데이션을 사용했고 배경 역할을 주로 해왔다.

포토샵과 파워포인트 등의 프로그램에서 그라데이션 프리셋이 강한 원색이나 무지개색이라 쓰기 부담스럽고 촌스럽다는 고정관념이 있었는데 1, 2년 사이에 그라데이션 활용법이 오조오억개쯤 생겼더라.

포토샵과 파워포인트의 그라데이션 프리셋


웹디자인 어워드를 운영하는 Awwwards에서 올해 3월 작성한 그라데이션 트렌드 글을 보면 얼마나 다양하게 그라데이션이 활용되고 있는지 알 수 있다. 디지털 디자인에서 기법이라는 표현이 좀 웃기긴 하지만, 그래도 굳이 구분하자면 Spotify가 2015년부터 보여줬던 듀오톤, 메인 그래픽으로 활용하기 좋은 그라데이션 메쉬가 흔히 사용되는 기법 아닐까 한다. 나아가 그라데이션을 활용한 브랜딩, 포스터 작업들도 기하급수적으로 늘고 있다.

좌 : 다양한 그라데이션 기법들 / 우 : 출처 https://www.behance.net/gallery/26702473/again-spring



그라데이션 이전의 트렌드

iOS6에서 7로 넘어왔던 2013년을 떠올려보자. 2014, 2015년까지 스큐어모피즘이냐 플랫 디자인이냐의 논쟁이 정말 활발했다. 스큐어모피즘은 그림처럼 그대로 그 사물을 옮겨놓은 것 같은 그래픽, 3D 느낌을 내기 위해 그라데이션과 셰도우를 짙게 깔고 질감도 가득 넣는 구상적인 방법을 말한다.

 

iOS6 아이콘 디자인


반면 플랫 디자인은 말그대로 입체감 없이 납작한 모습이다. 최대한 단순한 형태, 적은 컬러로 표현한다. 시각 정보의 홍수 속에서 살다보니 나온 유행이라고도 할 수 있다. 한 때 플랫 디자인과 같은 미니멀리즘 기조가 국제 표준처럼 여겨지면서 기하학적인 그리드 내에서 기본 도형만을 활용하는 게 암묵적인 룰처럼 박히기도 했다.

2014년에는 구글에서 머테리얼 디자인을 발표하게되고, 플랫 디자인은 UI 전반에 정말 널리 널리 퍼지게 된다. 단색 면으로 심플하게 표현하고 컬러나 아이콘만 정하면 되서 구현 속도도 빨랐다. 2015-16년 즈음엔 관련 라이브러리와 디자인 키트도 많이 나왔고 나는 머테리얼 때려박기를 시전하며 디자인을 안하는 지경에 이르기도 했다.. (반성...)


플랫 디자인은 보다시피 개성을 드러내기에 상대적으로 자유도가 낮다. 물론 디자이너가 100명이라면 100가지의 플랫 디자인이 나오겠지만 워낙 플랫 디자인이 ‘플랫’했기 때문에 셰도우나 블러, 패턴 등을 더해야 좀 더 개성을 드러내기 쉬우니까.


스큐어모피즘, 플랫, 그라데이션?

사람들이 이제 미니멀하고 심플한 디자인에 둔감해졌다. 디지털 디바이스에 굉장히 익숙해지기도 했고, 개발 기술이나 디자인 툴들도 다양하게 발달해 구현에 대한 제약이 적어졌기 때문이다. 시대적으로는 자신의 개성을 쉽게 표출하고 싶어하는 밀레니얼 세대, Z세대가 트렌드를 주도하다보니 단순함과 직관성을 넘어 역동성과 색다름을 줄 수 있는 디자인이 필요해졌다.


Gradient의 연관검색어 중 Vibrant Gradient가 많은데, 디자이너들이 선명하고 다소 낯선 느낌을 주기 위한 컬러 조합을 찾고 있다는 반증이라 볼 수 있다. 그라데이션이 이전의 스큐어모피즘이나 플랫 디자인 만큼의 주류 개념으로 자리할지는 모르겠지만 지금 굉장한 유행인 것은 분명하다.

디자인 : Baugasm, Daily poster project

몇몇은 눈이 아프다고 느낄 수 있는 선명함..! 근데 나는 이제 하도 많이 봐서 좀 둔감해져버렸다. 형광색 / RGB원색 / 이국적인 혹은 아주 낯선 컬러 조합이 과감하게 시도되며 3D 오브제와의 결합도 자주 보인다.


일상 속의 그라데이션

그라데이션 트렌드를 이끈 것은 인스타그램 리디자인이다. 앞서 설명한 흐름대로라면 스큐어모픽 > 플랫 > 그라데이션으로 차근차근 갔어야했는데 인스타그램은 바로 그라데이션으로 가버렸다. 하, 2016년 인스타그램 로고 리디자인은 디자인계에서 시끌벅적한 사건 중 하나였다. 저게 어떻게 카메라냐, 저런 그라데이션을 어떻게 UI에 반영하냐, 저걸로 브랜드 아이덴티티를 어떻게 보여주냐 등 수많은 사람들의 우려에도 불구하고 지금은 오만 곳에 그라데이션을 적용해도 사람들이 크게 이질감을 느끼지 않는다. 이럴 때 좀 인생무상을 느낀다... 알 수 없는 이 세계의 트렌드... 결코 변하지 않는 건 없다.


페이스북과 인스타그램에서 텍스트로만 구성된 컨텐츠 만들 때 이런 게 많이 보이지 않는가? 원래는 흰 배경에 검은 글자였던 화면이 다채로워졌다. 조연으로 존재해야할 배경이 아주 적극적으로 존재감을 뿜어내는 요즘의 서비스들. 다들 의식할 새도 없이 일상 깊숙히 그라데이션이 침투하고 있다.


심지어 글자에 그라데이션을 넣어도 이제 어색하지 않은데, 이 트렌드를 주도한 것은 애플이다. 파워풀하게 등장하는 아이폰X 모션부터, 이곳저곳 그라데이션을 써왔던 애플뮤직까지. 애플은 그냥 모든 문화의 선두에서 트렌드를 이끄는 것 같다. 처음에 어떻게 저런 과감한 선택을 했는지 참 궁금하다. 요즘은 인스타그램 스토리에서 위치태그, 인물태그, 각종 아이콘에 그라데이션 반영되어있다. 모두 빠르게 화려함을 줄 수 있는 요소들.

인스타그램 새 기능 소개 이미지

물론 삼성의 빅스비도 배경, 아이콘 등에 그라데이션을 접목했고,

빅스비와의 대화화면

네이버 뮤직, 네이버 TV 등 주류 서비스들도 그라데이션을 채택하고 있다. 이제 거부할 수 없는 주류 트렌드라고 할 수 있다.

네이버 뮤직의 시간대별 배경

보다시피 음성, 음악, 영상 관련 서비스에 많이 보이는데 컨텐츠의 본질 자체가 시간성과 실시간 인터렉션, 변화를 담고 있기 때문에 그라데이션과 아주 찰떡이다.

네이버 TV


그라데이션을 왜 쓸까

1. 모든 틀에서 벗어나고 싶다

그라데이션 2.0을 통해 느낀 것은 모더니즘 이후 등장한 포스트 모더니즘과 해체주의와 아주 유사한 양상이라는 점이다. 언제나 하나의 주류가 생기면 그에 반대가 나타나는 게 자연스러운 순리. 해체주의는 1960년대 자크 데리다를 중심으로 모더니즘의 이분법적 논리나 객관성과 합리성을 거부하며 등장했다. 해체주의의 주된 키워드는

차연 : 시공간을 초월하여 여러 미술사조의 특성을 섞고 모방하며 차용

탈구성, 탈형식주의 : 형식에 얽매이지 않는 것

분리, 불연속 : 통일성, 일체성, 종합성을 거부

탈중심성 : 주변의 것에 대한 관심

등이 있다. 뭔가 앞서 보여준 추상적이고 비정형적인 그라데이션과 비슷한 면이 있지 않은가? 여기까지가 초록색, 저기부터는 노란색 - 이런 구분은 당연히 안되고 어떤 의미인지, 어떤 형식인지 알 수 없고, 배경이었던 것이 주인공이 되었으니 탈중심성이라 볼 수 있다. 또한 구체적인 사물을 표현해야한다는 강박에서 벗어나 오로지 컬러로 승부보는 방식이니 탈구성이라 할 수 있고, 딱히 통일성이 있지도 않다. 갑자기 진지하게 해체주의 이야기를 해서 조금 민망하긴 하지만 세계화, 다원화되는 시대에서 역동성과 자유로움을 표현하기에 그라데이션만큼 잘 어울리는 건 없는 것 같다.


2. 속도와 변화, 쿨한 이미지

스큐어모피즘도 플랫 디자인, 일반적인 기법들은 구체적인 지시대상이 있다. 구체적으로 표현하냐 단순하게 표현하냐의 차이였을 뿐이다. 하지만 지금은 이름이나 내용도 중요하지만 분위기, 느낌적인 느낌, 임팩트를 줄 수 있는 디자인이 중요해진다. 특히 모션을 반영할 수 있다면 더 쿨해보인다. 아이폰X의 꿀렁이는 그라데이션, 변화하는 컬러와 속도감 있는 움직임은 단 하나만의 컬러로 정의할 수 없는 지금 세대를 탁월하게 표현해낸다.


뿐만 아니라 앞서 예시로 썼던 다양한 음악, 영상 서비스들의 시간성과 유기적임, 변화하는 모습, 다채로운 컨텐츠를 설명하기에도 그라데이션이 아주 적절하다.



그래서 이제 어떻게 할까

더 풍성하고 역동적인 느낌을 주기 위해 (너무나도 당연하지만) 적절하게 예쁜 컬러를 고를 줄 알아야하고, 적당히 예쁜 레이아웃과 형태를 만들 줄 알아야한다. 나는 그동안 디자인을 논리적으로 설명하기 위해 노력해왔는데 이 부분은 어느 정도 직관이 필요하다고 생각한다.

예를 들어 이런 이미지를 만드는데 이걸 어떻게 설명해야할까. 저 꿀렁임을 몇 개 넣어야되고, 컬러는 몇 개를 썼는지가 과연 중요할까? 그냥 내 눈으로 봤을 때 예쁘게 하면 되겠지.




그동안 기술에 대한 이해가 IT업계 디자이너들에게 필수적이었다면 이제는 다시 디자이너 본연의 감에 집중해야할 때다. 2016-17만해도 디자이너도 코딩을 알아야할까요? 디자이너와 개발자는 왜 대화가 안될까요? 이런 주제의 글이 참 많았다. 물론 아직도 유효한 질문이다. 기술, 당연히 알아야한다. 더 나아가 컬러감과 조형감, 시대를 초월하는 안목을 길러야한다는 뜻이다. (가혹하지만 나는 생존하고 싶은 디자이너니까...)

글리치 효과와 베이퍼 웨이브

그라데이션 뿐만 아니라 베이퍼 웨이브, 글리치 효과, 레트로 일러스트, 콜라주 등 과거의 기법들, 장비의 제약으로 인해 발생한 기법들이 다시 유행한다. 이제는 시대와 국가를 초월해 낯설고 새로운 것을 만들어내는 역량이 필요해졌다. 결국엔 다양하게 많이 보고, 용감하게 실험해보는 수 밖에.



더 읽어보면 좋을 자료 (세 글 모두 그라데이션에 대해 다루고 있습니다.)

 

keyword
소속 직업디자이너
주니어 UI 디자이너. 프리랜서, 스타트업, 외주팀, 그리고 대기업까지 여기저기 잘 굴러다닙니다. 넓고 얕은 디자인 소식을 개괄적으로 훑어봅니다. 
댓글

    매거진 선택

    키워드 선택 0 / 3 0
    브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari