문자로 시작해서 디자인으로 끝내기
언어의 특성을 활용한 디자인
Photo by Alexander Andrews on Unsplash [https://unsplash.com/photos/SjN3x8aqe-w]예전 심리학개론 수업의 중간 시험에 이런 문제가 나온 적이 있었다.
‘5살 아이가 놀이터에서 모래를 보고 “고래가 나타났다” 라고 외쳤다. 그 이유를 심리학적 관점에서 서술하시오’
당시에 내가 서술한 내용이 정답일지는 모르겠으나, 심리학개론 학점이 그럭저럭 좋게 나왔던 것을 떠올려보면 아주 틀린 답은 아니었던 것 같다. 주절주절 길게 답을 적어냈었는데, 대략 요지는 이렇다.
‘인간만이 유일하게 언어생활을 하는데, 언어는 일반적으로 형식(Signifiant)에 의미(Signifié)를 연결하게 되며(Langue), 그 연결은 개인의 상황과 경험에 따라 달라질 수 있다(Parole).
이 아이는 과거의 언젠가 바닷가에서 저 멀리 고래를 본 경험이 있었고, 당시 발을 딛고 있던 백사장이 인상적이었을 것이다.
이에 따라 아이에게 고래라는 단어는 백사장과 연결된 개념으로 청크에 저장되었고, 놀이터에서 모래를 보자 “고래가 나타났다”라고 외친 것이다.’
다시 보니 이 무슨 궤변인가 싶지만, 당시에도 그랬고 지금도 늘 생각하는 것이 결국 사람과 언어는 불가분의 관계라는 것이다. 일상은 물론이고, 일에서도 마찬가지일 것이다. 특히 디자인 분야에서는 문자를 활용한 시도들이 눈에 띈다.
1. Uber 리브랜딩
https://www.uber.design/case-studies/rebrand-2018
깨진 단추 모양의 다소 키치한 로고를 앞세워 리브랜딩 했던 우버가 2년만에 새로운 브랜드 시스템을 선보였다. 로고인 Uber를 기본으로 첫 글자인 U에 방점을 찍은 브랜딩으로 정돈되고 확장 가능한 디자인을 보여주고 있다.
알파벳 U를 프레임으로 사용하여, 멀리서도 한 눈에 우버의 메시지임을 알 수 있다.
U 프레임은 영상에서도 다양한 방식으로 아이덴티티를 녹여낸다.U는 발음상 You를 연상시키고, 우버에게 ‘당신’이란 곧 파트너와 고객을 의미한다. 우버는 단순히 A에서 B로 이동하는 수단이 아니라 이동을 통해 겪을 수 많은 ‘당신’들의 이야기를 만들어내는 서비스로 포지셔닝 하고 싶어 한다.
알파벳 U는 단순히 조형적 의미를 넘어서 우버의 디자인 시스템을 관통하는 프레임으로서 기능하고 있다. 전체를 담는 그릇으로 활용되기도 하고(U프레임), 발음에서 연상되는 의미(You)를 통해 브랜드의 철학과 스토리를 하나로 묶어준다.
2. 구글 크롬 리디자인 - 주소창
https://medium.com/@san_toki/unboxing-chrome-f6af7b8161a2
구글 크롬 브라우저가 69버전으로 업데이트 되면서 대대적인 리디자인이 있었다. 데스크탑과 모바일 버전 모두 머티리얼디자인이 본격 적용되었고, 전반적으로 동글동글해진 윤곽이 도드라져 보인다.
동글동글해진 탭과 주소창구글과 구글의 제품 로고 타이포들은 원형을 떠올리게 하는 조형미를 공유하고 있고, 크롬 역시 c로 시작해서 e로 끝나는 동그라미 구조를 보여준다. 양쪽 끝의 동그라미 두 개를 연결한 형태가 바로 현재 주소창(omnibox)의 모습과 같다.
브랜드와도 연결되고 인지적으로도 발견하기 쉬운 원형의 주소창은 그렇게 탄생하게 되었다.
구글, 크롬, 안드로이드에 숨어있는 원형들
약간은 억지스럽기도 하지만, 그래도 말은 된다.특히 주소창의 경우, 영어로는 box라고 표현할 만큼 사각형이 대세였는데, 이번 리디자인에서는 심하게 라운딩 처리를 한 모습이다. 예전 트위터의 프로필 사진이 사각형에서 원형으로 바뀔 때처럼 어떤 의미를 찾기 어려운 시류를 좇는 디자인이 아닐까 하고 생각했었지만, 나름의 이유가 있었던 것이다.
3. 현대카드 시티브레이크 픽토그램
https://blog.naver.com/haamyounghun/220042279167
스튜디오 니모닉의 함영훈 디자이너가 제작한 현대카드 시티브레이크 픽토그램 역시 문자로부터 출발했다. 이미 대중에게 널리 알려진 현대카드 폰트를 활용했는데, 폰트를 분해하여 도출한 직선과 곡선, 경사면, 라운딩 등을 재조합해서 다양한 픽토그램을 만들어냈다.
현대카드 폰트에서 찾아낸 여러가지 조형적 요소들
폰트에서 픽토그램으로
다양한 조합으로 만들어 낸 픽토그램폰트가 가진 요소들을 분해하고 재조합해서 만든 픽토그램은 비록 형상이 다르더라도 시각적으로 비슷한 톤을 유지할 수 있다. 덕분에 다양한 변주 안에서도 현대카드의 고유한 아이덴티티를 지킬 수 있도록 해주는 일종의 시스템이 되었다.
나도 해봤다 - Delete
https://dribbble.com/shots/4525651-Delete
문자 그대로의 조형미는 물론이고 그 의미에 대해서도 많이 고찰해 보고는 하는데, 의미를 인터페이스로 만들어 본다면 어떨까 하는 생각에서 시도해 본 습작이다.
“rip spiderman” 이라는 댓글이 많이 달렸다. (feat. 어벤저스 인피니티 워)레이블의 의미를 모션으로 풀어내면 재미있는 버튼들을 많이 만들 수 있을 것 같다. 업로드를 누르면 위로 올라간다든지, 리프레시를 누르면 흩어졌다가 다시 모인다든지.
최근에는 데이터의 중요성이 점차 높아지면서, 디자인에 있어서도 데이터를 통한 작업이 이루어지는 경우가 많다. 하지만 디자인은 태생적으로 여전히 직관과 감성이 유효한 분야라고 할 수 있다.
그렇기 때문에 직관에 근거를 마련해주고 감성에 이야기를 덧붙여주는 수단으로서, 언어의 형식과 의미를 차용하는 디자인은 앞으로도 계속 이어지지 않을까. 부디 이런 시도들이 더욱 많아졌으면 좋겠다.
2018년 9월 17일에 발행한 미디엄 원문 링크를 첨부합니다.
https://medium.com/hyuk/97fadbcc3392
