나는 웹디자이너로 처음 일을 시작했다. 4년간 웹디자인을 하면서 작은 기업의 사이트들을 제작하다가 점차 큰 기업들을 상대하게 됐다. 하지만 나는 그래픽 디자인에 점점 흥미가 떨어짐을 느꼈다. 유명 브랜드와 작업하는 것도 즐겁지 않았다. 나는 웹페이지의 시각적 디자인보다는 페이지네이션의 유형, 사람들이 시스템과 상호작용하는 방식, 인지되는 성과 등에 더 관심이 갔다.
 
나는 공상과학 영화를 볼 때 인터페이스에 주목한다. 비디오 게임을 할 때도 메뉴들이 나열되는 방식을 관찰한다. 만일 당신도 이런 성향을 가졌다면 당신에게는 사용자 인터페이스(UI) 디자이너의 자질이 있는 것이다.
 
결국 나는 에이전시를 관두고 독립했다. 그리고 링크드인 페이지를 통해 나의 새로운 목표를 제시했다. 그것은 바로 최고의 소프트웨어를 만드는 것이었다. 프리랜서로 일한 지 4년이 넘었을 때 나는 거기서 멈추지 않았다. 현재 모노라는 이름의 작은 UI 디자인 회사 운영에 참여하고 있는데 얼마 전에 4번째 팀원이 새롭게 합류했다.
 
이 글에서 나는 UI 디자이너가 무엇인지를 설명하고자 한다. 첫째, 어떤 작업들을 하는가? 둘째로 어디서 최고의 리소스를 얻을 수 있는가? 마지막으로, 당신의 재능을 극대화시킬 방법을 무엇인가?
 
UI 디자이너의 일
UI 디자이너의 일은 일반적으로 네 가지로 구분할 수 있다. 클라이언트와의 대화, 리서치, 디자인과 프로토타입 그리고 개발자와의 협력이 그것이다. 지금부터 이 각각에 대해 자세히 살펴보자.
 
클라이언트와의 대화는 곧 클라이언트의 문제를 이해하려는 노력과 다름없다. 클라이언트의 사업에 대해 파악하는 것이 당신의 목표가 되어야 한다. 충분한 대화가 프로젝트의 시작이다. 처음에는 클라이언트의 사업에 대해 잘 알지 못해도 괜찮다. 디자인 해법을 모색하는 동안 참신한 시각으로 클라이언트의 사업을 조망할 수 있으면 된다.
 
훌륭한 UI 디자이너가 되려면 클라이언트의 사업적 관점에서 모든 것을 생각할 줄 알아야 한다. 당신의 클라이언트가 항공 관련 사업을 하고 있다고 치자. 그들과 일하면서 당신은 아마도 항공 산업에 대한 폭넓은 지식을 얻게 될 것이다. 그러므로 어떤 클라이언트와 일할지 현명하게 선택하는 것이 당신의 행복을 지킬 수 있는 팁이다. 당신이 관심 없어 하거나 흥미를 느끼지 못하는 분야의 전문가가 되고 싶진 않을 테니까 말이다.
 
프로젝트 기간 내내 대화는 끊이지 않아야 한다. 디자이너로서 당신은 지속적으로 당신의 작업 상황을 알려 주어야 한다. 우리 회사의 경우, 클라이언트와 거리상으로 떨어져 있기 때문에 자주 직접적인 만나기가 어렵다. 그래서 우리는 화상 회의를 최대한 활용한다. 스카이프와 슬랙 같은 커뮤니케이션 툴들을 매일 사용한다.
 
다음으로, 클라이언트와의 대화만큼이나 많이 해야 하는 것이 리서치다. 여기엔 현장조사, 워크숍, 경쟁사 분석, 전략 짜기 등이 포함된다. 말하자면 당신이 풀어야 할 문제를 이해하는 데 도움이 되는 모든 활동이라 할 수 있다. 리서치가 당신의 디자인 선택을 좌우한다. 그것은 당신이 읽은 글일 수도 있고 애플이 출시한 새로운 서비스일 수도 있다. 왜 그런 디자인 선택을 했는지를 설명해야 할 때 당신이 의존하는 것이 바로 리서치다. 그 범위는 매우 넓다. 나는 종종 리서치의 목적을 달성하기 위해 새로운 기기들을 테스트하거나 새 웹 앱을 구입해서 그것의 UI를 연구한다.
 
또한, 디자이너라면 누구나 디자인과 프로토타이핑에 상당한 시간을 들이게 마련이다. UI 디자인 프로젝트의 경우는 이 과정이 스케치부터 상세 디자인, 코딩에 이르기까지 다양한 방향으로 이루어진다. 당신이 사용하는 방법은 대체로 프로젝트의 성격에 달려 있다. 무엇을 디자인하는가? 웹사이트인가 아니면 앱인가? 고유한 기술이 사용되는가? 리디자인인가 아니면 처음부터 당신이 시작하는 프로젝트인가?
 
우리 회사의 경우 정해진 절차는 없다. 그러나 대다수 프로젝트가 유사한 경로를 밟는다. 스케치와 와이어프레임부터 시작해서 상세한 비주얼과 인터랙티브 디자인을 거친 뒤 프로토타입으로 마무리되는 식이다.
 
작업에서 뛰어난 툴만이 중요한 것은 아니지만 그럼에도 디자이너라면 툴에 관심을 가질 필요가 있다. 나는 보다 생산적인 작업을 가능하게 해주는 새로운 툴들을 좋아한다. 내가 가장 좋아하는 벡터 편집툴은 일러스트레이터지만 지금은 내 시각적 디자인의 대부분을 스케치(Sketch)로 하고 있다. 우리 팀원들은 어피니티 디자이너(Affinity Designer) 같은 최신 툴들을 사용하기도 한다.
 
사람에 따라 툴의 선택은 확연히 다르다. 우리처럼 쉽게 서로의 작업을 공유하는 경우엔 보다 자유롭게 툴을 선택할 수 있다. 클라이언트에게 우리의 디자인을 쉽게 이해시키기 위해서 우리는 주로 인비전(InVision)으로 프로토타입을 제작하지만 더 나은 프로토타이핑을 위해 때때로 HTML과 CSS를 사용하기도 한다. 당신에게 필요한 툴은 당신이 무엇을 하길 원하느냐에 달려 있다.
 
마지막으로, 간과하기 쉬운 UI 디자이너의 업무 중 하나는 개발자와의 소통이다. 오늘날에는 개발자에게 디자인을 보여 주고 그들이 그것을 적절한 방식으로 진행해 주길 바라는 것이 당연한 절차가 되었다. 경험 많은 디자이너들은 디자인의 창조보다는 디자인의 전달이 더 어려운 문제임을 인지하고 있다. 디자인을 승인하는 이해관계자들뿐만 아니라 디자인을 구현하는 개발자들에게 전달하는 문제 말이다.
 
디자인은 다양한 형태로 전달될 수 있다. 세부 설명서, 어셋 제공, 디자인 리뷰 등이 모두 해당되지만 어떤 형태를 선택할 것인지는 프로젝트의 성격에 달려 있다. 스크린 디자인과 함께 어셋을 전달하는 것은 전통적인 방식이다. 스크린 디자인은 디자인이 전체적으로 어떻게 보이는지에 대한 것이라면 어셋은 아이콘의 PNG, SVG 파일을 언제든 사용 가능하게 하는 것이다. 이는 개발자가 매번 그래픽 에디터와 협의하지 않아도 되게 해준다.
 
우리 회사는 풍부한 어셋 제공을 지지하는 쪽이다. 우리는 디자인의 일관성을 유지하는 데 도움이 되는 부분적 스타일 가이드들을 애용한다. 우리가 웹 프로젝트를 다룰 때는 구체적이고 상세하게 기록된 HTML과 CSS 세트를 제공해서 언제든 보완이 가능하도록 한다. 소프트웨어 개발의 모든 측면에서 디자이너의 시각을 고수하는 것은 세계적 수준의 소프트웨어를 만들겠다는 나의 목표를 달성하기 위한 유일한 길이기 때문이다.
 
기술 향상시키기
빠르게 움직이는 웹 산업에 뒤처지지 않으면서 당신의 기술력을 향상시키는 방법은 무엇일까? 당신의 기술을 진화시킬 수 있는 몇 가지 방법들을 살펴보자.
 
우선, 디자이너의 막강한 무기 중 하나는 플랫폼에 대한 지식이다. 당신은 다양한 OS에 대해 알아야 하고 사람들이 그것을 어떻게 활용하는지 파악할 필요가 있다. (이와 관련한 여러 가이드라인은 하단의 내용을 참조하길) 대체로 맥을 사용하는 디자이너들은 보통 사람들이 윈도우에서 업무를 본다는 걸 간과하기 쉽다.
 
나는 어떤 것이든 직접 해봐야 진정으로 이해할 수 있다고 생각한다. 주로 맥에서 디자인을 하지만 다른 플랫폼의 양상을 파악하는 데에도 많은 시간을 투자한다. 나는 맥에서 가상 머신을 설정해 몇 가지 윈도우 버전들을 시험해 보았다. 마이크로소프트의 인사이더 프로그램(Insider Program)을 사용해 윈도우10을 설치해서 UI의 다양한 변화를 확인하느라 한동안 바쁜 시간을 보냈다.
 
나는 또한 정기적으로 새 하드웨어를 구입해서 그것의 작동방식을 확인하곤 한다. 한 예로 나는 애플 워치를 구입해서 관련 플랫폼들을 살펴봤는데 그리곤 바로 되팔았다. 애플 워치가 내 삶에 큰 도움이 되지 못한다고 느꼈기 때문이다.
 
웹은 그것에 기반한 운영체제와 동일하게 인식될 수가 있다. 매주 모든 브라우저 벤더에게 추가되는 새로운 특성들과 함께 꾸준히 변화한다. 브라우저의 기술적 측면에 대해 알아두는 것은 절대적으로 중요하다. 특히 CSS와 그래픽 능력과 관련해서 더욱 그러하다. 당신은 SVG와 WebGL가 무엇인지, 웹 애니메이션 API를 어떻게 사용하지를 알아야 한다.
 
모든 플랫폼은 시간의 흐름에 따라 진화하고 UI 디자이너라면 여기에 뒤처지지 않기 위해 주의해야 한다. 결국 당신이 디자인하는 모든 것은 독자적으로 존재할 수 없다. 광대한 소프트웨어 환경의 일부로서 존재할 뿐이라는 것이다.
 
더불어 항상 기본으로 돌아가려는 마음가짐도 필요하다. 오늘날 우리가 씨름하고 있는 문제들은 사실 20년 전의 것들과 크게 다르지 않으므로 책에서 충분한 조언을 얻을 수 있다. 제이슨 프라이드(Jason Fried)와 매튜 린더만(Matthew Linderman)이 쓴 <방어형 웹사이트 기획(Defensive Design for the Web)>과 초심자들을 위한 스티브 크룩(Steve Krug)의 <상식이 통하는 웹사이트가 성공한다(Don’ Make Me Think)>가 대표적이다.
 
당신이 만일 감각양식(modality)과 행위유발(affordance) 같은 개념을 모른다면 당신에겐 공부가 필요하다. 당신은 피츠의 법칙(Fitts’ law)이 무엇인지 설명할 수 있어야 한다. 근접성에 대한 게슈탈트의 근접성의 법칙(Gestalt law of proximity)은 어떤가? 이는 UI 디자인의 실용적인 개념들이다.
 
또한, 게임과 영화를 참고하는 것도 좋은 방법이다. UI 디자이너로서 나는 어디서나 내 작업에 도움이 될 영감을 얻으려고 노력한다. 특히 게임에서 많은 영감을 얻는다. 어떤 게임들은 내용이 매우 복잡한데, 사업적 관점을 고려해야 하는 UI 디자이너들은 똑같이 복잡한 인터페이스 문제들을 풀어야 한다.
 
게임은 또한 트렌드를 반영한다. 콜린 맥레이 랠리(Colin McRae Rally)의 메뉴들이 보여준 미니멀리즘은 현재 iOS7이 추구하는 방향과 이어진다. 오늘날 유행하는 스타일의 UI 애니메이션 디자인은 몇 년 전에 이미 게임에 나타난 것들이다. 스큐어모피즘에서 기본적이고 기능적인 인터페이스 및 평면적 디자인으로의 변화는 게임에서도 뚜렷한 현상으로 나타났다. 2006년 오빌리언(Oblivion)과 2011년 스카이림(Skyrim)을 비교해 보라. 두 게임 다 동일한 시리즈의 RPG이지만 놀랄 만한 차이가 존재한다.
 
<아이언맨(Iron Man)> 같은 마블 영화들이 보여주는 미래적 인터페이스도 내게는 영감을 준다. 아주 유용하다고는 할 수 없지만 그래도 내가 전반적인 컴퓨팅에 대해 생각하는 데 도움을 준다. 우리는 스크린의 미래를 원하는가, 아니면 스크린이 사라지길 원하는가? 이는 아마도 디자이너들이 맥주집에 모여 뜨겁게 논쟁할 만한 주제일 것이다.
 
 
 
UI 가이드라인

주요 OS 제작사들은 모두 해당 OS를 위한 디자인을 규정한다. 애플은 OS X와 iOS 각각에 대한 가이드라인을 갖고 있고, 구글은 머터리얼 디자인 가이드라인을 발표했으며, 마이크로소프트는 윈도우를 위한 디자인 방법을 제시한 수많은 리소스들을 제공하고 있다.
이 세 가지 가이드라인은 당신에게 영감을 주기도 하지만 한편으로 상당히 규범적이기도 하다. 그래서 참조용으로만 활용하는 게 중요하다. 어차피 해당 OS의 운영 방식에 기반을 둔 내용이기 때문이다. 가이드를 적극 참조하는 것은 소프트웨어의 구현을 쉽게 해주며 초심자가 공부하기에 최고의 방법이다. 당신의 개발자들도 그것을 고마워할 것이다.
그러나 그런 큰 회사들이 제시하는 가이드들에 둘러싸이더라도 자신이 가진 상식을 잊어서는 안 된다. 예컨대 미학을 위해 아이콘 라벨들이 안내용 인터페이스에서 배제되곤 하는데 그러면 사용자들 각자 알아서 아이콘의 의미를 추측해야 한다. 이때 훌륭한 UI 디자이너라면 아이콘만으로 전달할 수 있는 내용이 많지 않다는 사실을 알고 있어야 한다. 그래서 때론 일반적이지 않은 게 정상적일 수 있다.

* 꼭 알아두어야 할 플랫폼 가이드라인
애플 휴먼 인터페이스 가이드(Mac OS X): GOO.GL/1goS7K
애플 휴먼 인터페이스 가이드(iOS): GOO.GL/BONRPP
윈도우 디자인 UWP 앱들: DEV.WINDOWS.COM/DESIGN
구글 머터리얼 디자인 가이드라인: GOOGLE.COM/DESIGN/SPEC
 
 
 
유용한 리소스

당신의 기술 향상에 도움이 될 리소스들을 소개한다.
 
01 이그노어 더 코드(Ignore the code)
IGNORETHECODE.NET
쉽고 매우 알찬 UI 디자인 블로그다. <디자인 포 유즈(Designed for Use)>라는 뛰어난 책을 집필한 루카스 마티스(Lukas Mathis)가 운영하는 곳이다.
 
02 프로토타이핑 위드 키노트(Prototyping with Keynote)
GOO.GL/3m28hU
프로토타이핑 툴로 키노트를 활용하는 방법에 대한 가이드를 제공한다.
 
03 WWDC 영상
DEVELOPER.APPLE.COM/WWDC
애플 개발자 계정을 얻으면 세계 개발자 회의(Worldwide Developers Conference)의 영상들을 볼 수 있다. 2015년 세계 개발자 회의에서는 ‘샌프란시스코(San Francisco)’ 서체에 대한 흥미로운 내용들이 발표됐다.
 
04 마이크로소프트 빌드 컨퍼런스
GOO.GL/7cJZQR
‘빌드(Build)’는 마이크로소프트가 매년 개최하는 개발자 컨퍼런스다. 빌드 세션 사이트 대부분이 윈도우 개발에 대한 영상들을 담고 있지만 어떤 세션에서는 윈도우 10을 위한 UI 디자인을 이해할 수 있는 기회를 제공한다.
 
05 인벤팅 온 프린시플(Inventing on Principle)
VIMEO.COM/36579366
브렛 빅터(Bret Victor)의 이야기로 당신의 툴을 다시 한 번 점검하도록 만들어줄 것이다.
 
 
 
 
글: 요한 론스(Johan Ronsse)
번역: 이화경
일러스트레이션: 벤 더 일러스트레이터(Ben the Illustrator), BENTHEILLUSTRATOR.PROSITE.COM
 
 
 
 
 
 
 
 
 
이 기사의 전문은 ‘CA 2016년 2월호 : 2016 디자인 트렌드’에서 확인할 수 있습니다.
 
CA_201602_COVER_WEB