‘디자이너’라는 용어는 매우 광범위하고도 애매하게 쓰이고 있습니다. 그 종류만 해도 제품 디자이너부터 편집 디자이너, 웹, 모바일 디자이너까지 다양합니다. 특히 스크린 기반의 인터페이스 디자이너인 UI, UX의 개념은 디자이너조차 혼돈에 빠뜨립니다. 오늘 포스팅에서는 이렇게 헷갈리는 기술/미디어 기반 디자이너의 역할에 대해 살펴보고자 합니다.


우선 사전적 정의를 살펴보면 아래와 같습니다.


사전적 정의 (출처: 두산 백과, 미디어 백과)



비슷한 것 같으면서도, 비슷하지 않은 듯한 느낌입니다. 흔히 UI는 그래픽 디자인을 기반으로 시각적인 부분을 담당하고, UX는 프로토타이핑 툴과 관련이 깊은 정도로 알고 있습니다.


그렇다면 누가, 어떻게 이 불명확한 개념을 명확하게 정의할 수 있을까요? 해답은 사전이 아닌, 실제 프로젝트가 발생하는 회사가 가장 잘 알고 있지 않을까요? 그래서 기술, 미디어 분야의 선도 기업인 구글, 페이스북, 애플의 채용공고를 살펴보았습니다.




UI 디자이너


구글 비주얼 디자이너


직무 내용 설명(Job description)을 살펴보면, 구글의 비주얼 디자이너는 아이코노그래피, 타이포그래피, 색, 공간, 텍스처를 종합적으로 사용해 사용자들이 제품을 효율적으로 이용할 수 있도록 돕는다고 설명합니다. UI를 비주얼적으로 제시하여 정보의 가독성과 접근성을 높이는 작업을 수행합니다. 또한 비주얼 디자이너를 UX 직군으로 분류하고 있습니다.


페이스북 커뮤니케이션 디자이너

페이스북 프로덕트에 대한 설명


UI 디자이너 대신, 커뮤니케이션 디자이너라는 직종이 있습니다. 역시 UX/디자인 직군으로 분류됩니다. 직무 설명에는 디지털 프로덕트와 브랜드 디자인에 능한 디자이너를 찾고 있다고 명시하고 있고, 다양한 미디어 플랫폼으로 작업하는데 익숙해야 한다고 합니다. 또한 프로덕트 디자인과 프로젝트 전략에 대한 깊은 이해를 요구합니다. 프로그래밍 경험은 필요 없다고 합니다.


애플 비주얼 디자이너

구글과 동일한 비주얼 디자이너라는 용어를 사용합니다. 직무 분석에는 소비자들을 매료시키는 다양한 디지털 자산을 디자인하며, 비주얼 디자인 팀, UX 디자이너, 에디터, 제품 팀과 협업한다고 소개합니다. 구글, 페이스북과 다른 점은 비주얼 디자인과 UX 디자인 직군을 구분해서 사용한다는 점입니다. 따라서 프로덕트 디자인보다는 애플 자체의 브랜딩, 광고, 매체 등에 사용될 비주얼을 제작하는 것에 중심을 두고 있는 듯합니다.



요약

애플을 제외한 나머지 회사에서 UI 디자이너는 UX 직군으로 분류됩니다. 통상적으로 그래픽 디자인을 기반으로 프로덕트 UI 디자인에 관여하기도 하지만, 회사의 비주얼 브랜딩에도 관여합니다.




UX 디자이너


구글 UX 디자인 매니저


따로 UX 디자이너라는 직책은 없습니다. 다만 UX 디자인 매니저가 UX 팀의 리더로 업무를 이끕니다. 팀 리더이자, 매니저로서 총체적인 디자인을 살필 수 있어야 합니다. UX 설계, 반복적인 업데이트가 가능해야 하며 일관성있고 포괄적인 UX를 구축해야 합니다. 웹과 모바일 어플리케이션 관련 포트폴리오가 필수입니다.



페이스북 프로덕트 디자이너


페이스북 프로덕트 디자인 VP인 Julie Zhuo의 블로그


페이스북에는 프로덕트 디자이너라는 직책이 있습니다. 브레인스토밍에서 픽셀 수정까지 제품 개발의 모든 과정에 참여합니다. 프로덕트 디자인, 인터랙션 디자인, 비주얼 디자인 등을 모두 활용할 수 있어야 합니다. 브랜딩에 관여하는 ‘커뮤니케이션 디자이너’보다는 좀 더 프로덕트 자체의 디자인이 중심이며, 차이점은 프론트엔드 프로그래밍이 가능해야 한다는 점입니다.


애플 UX 디자이너


애플의 플랫폼인 iOS, OSX, 웹 앱 등의 인터페이스 디자인을 맡습니다. 다양한 플랫폼 상의 복잡한 인터랙션 문제를 해결할 수 있어야 합니다. 디테일을 볼 줄 알고, 인터랙션과 비주얼 디자인 스킬을 통합적으로 갖춰야 합니다. 포토샵, 일러스트레이터, Sketch, Axure를 능숙하게 다룹니다.



요약


UX 팀 내에 속해 있는 경우가 많으며, 주로 프로덕트 디자인 전반을 다룹니다. 그런 만큼 웹과 모바일 플랫폼, 어플리케이션 디자인에 익숙해야 하며, 프로그래밍에 대한 이해가 필요합니다.


인터랙션 디자이너





스티비 인터랙션 디자이너의 디자인


구글 인터랙션 디자이너

구글 인터랙션 디자이너는 전세계 수백만의 사람들이 직관적이고, 쉽게 사용할 수 있는 디자인을 제공할 수 있어야 합니다. 그 과정에서 다른 디자이너, 리서처, 엔지니어 팀과 협업해야 합니다. 사용자 흐름(user flows)과 와이어프레임의 프로토타이핑이 가능해야 합니다. HTML과 자바스크립트 역량은 플러스 요인입니다.


애플 인터랙션 디자이너


어플리케이션 디자인 팀의 멤버로서 맥과 iOS의 비주얼 인터페이스 디자인을 담당합니다. 인터랙션 디자인, 비주얼 디자인 스킬을 갖춰야 합니다. 업무적으로는 UI 디자인에 가깝습니다.


요약


인터랙션 디자이너의 개념은 회사마다 다르게 설정되어 있습니다. 구글 인터랙션 디자이너는 UX 디자이너의 업무와 비슷한 역량이 필요하며, 애플 인터랙션 디자인은 UI 디자인에 중점을 두고 있습니다.



지금까지 대표적인 세 기업의 디자이너 채용공고를 살펴보았는데 기업 마다 요구하는 역량이 조금씩 달랐습니다. 동일한 ‘비주얼 디자이너’  ‘인터랙션 디자이너’라는 용어를 사용하지만, 업무 내용은 달랐습니다. 혼란스러운 가운데 공통점을 찾아내어 정리를 하자면


  • UI 디자인, 비주얼 디자인은 주로 그래픽을 기반으로 하며 기업의 전반적 브랜딩에도 관여한다

  • UX, 인터랙션 디자인은 각 회사의 프로덕트 디자인을 다룬다. 웹, 앱 디자인, 프로그래밍에 대한 이해가 필요하며 프로토타이핑 툴을 다룬다

  • 대부분 UX를 큰 틀로 두고, 각각의 디자인 팀들이 존재한다


UI, UX라는 분야가 소개 된 지 많은 시간이 지났고, 그 경계는 흐려졌으며 많은 기업들에서 두 역량이 결합된 인재를 원하고 있습니다. 비주얼(그래픽) 디자이너와 UI 디자이너의 구분도 많이 없어졌습니다. 특히 스크린을 기반으로 하는 기술/미디어 기업에서는 더욱 그렇습니다. 경계가 흐려지고 모호해지는 디자인 영역에서, 앞으로 어떤 디자인 분야에 종사할지 고민인 학생, 현재 자신의 디자인 역할에 의문이 든 디자이너는 다른 기업의 채용공고를 보면서 역량을 점검해 보는 것도 좋을 것입니다. 결론적으로 각 기업마다 사용하는 용어에 차이가 있으며 요구하는 역량도 달랐지만, 살펴본 세 기업 모두 공통적으로 중요시한 것은 다른 팀, 디자이너와의 협업 능력이라는 것을 잊지 않아야겠습니다.


by 돼지 발자국


참고: Google Careers, Work at facebook, Jobs at Apple, Fastcompany



Posted by slowalk

IT 기술이 발전함에 따라 우리가 사용하는 인터페이스(Interface)는 여러 차례 발전을 거듭해왔습니다. PC의 등장으로 키보드나 마우스와 같은 입력장치를 활용하여 사용할 수 있었다면, 현재는 터치 스크린을 기반으로 하는 스마트폰의 대중화로 인해 터치 제스처 인터페이스가 자리 잡게 되었습니다. 




 

우리는 스마트폰 화면에서 손가락 하나로 많은 것을 실행하고, 또 경험하고 있습니다. 여러분은 사진을 확대해서 볼 때 자연스럽게 취하는 그 행동의 이름을 아시나요? 오늘은 터치스크린을 기반으로 하는 인터렉션의 중요성과 터치 제스처 인터페이스의 종류를 몇 가지 소개합니다. 


본문에 들어가기에 앞서 간략하게 터치와 제스처에 대하여 정의할 필요가 있습니다. 


터치(Touch)

손가락이 화면 위에 올려진 상태를 말합니다. 예를 들어, 손가락 하나를 화면 위에 올려놓았을 경우 디바이스는 한 손가락의 제스처를 명령어로 인식합니다. 즉 터치의 개수는 손가락의 개수와 일치한다고 생각할 수 있습니다. 


제스처(Gesture)

혹시 떠오르는 장면이 있으신가요? 미래를 배경으로 하는 SF, 공상과학 영화에서 많이들 보셨을 겁니다. 바로 사람의 움직임, 가령 동작이나 표정, 근육의 변화 등을 얘기할 수 있습니다. 이를 디바이스가 수학적 알고리즘으로 변환 및 입력된 신호로 인식하는 과정의 인터페이스를 말합니다.



터치 제스처의 중요성

이러한 신체의 일부분이나 움직임을 기반으로 하는 인터페이스가 인터렉션 디자인에서 중요한 이유는 무엇일까요? 첫번째는 대중화 즉, 최근 가장 많은 사용자 사용하는 인터페이스 방식이기 때문입니다. 스마트폰이나 태블릿과 같은 휴대용 디바이스의 경우, PC 사용에 비해 사용하기 쉬운 인터페이스의 역할이 더욱 강조된다는 점을 생각해보면, 이는 가장 쉽고 직관적인 인터페이스 방법 중 하나입니다. 두 번째 이유는 바로 디자인의 효율성입니다. PC보다 작은 모바일 스크린에선 가능한 모든 픽셀을 콘텐츠 자체에 집중시켜 디자인하게 됩니다혹시 상단 혹은 하단에 배치됐던 내비게이션(Navigation) 탭 바(Tap Bar)를 기억하시나요? 요즘은 이 탭 영역을 스크린과 분리시켜 디바이스 자체에 배치하여 지문을 인식하거나 어떠한 제스처를 취하는 방식으로 바뀌었습니다. 현재 우리는 과거 탭 바가 차지하던 공간까지 디자인에 활용할 수 있다는 것입니다. 또한, 터치 제스처 인터페이스는 눈에 보이는 작은 스크린 자체가 뷰포트(viewport)의 전부라는 생각을 탈피하는 계기가 되었습니다. 메인 스크린의 위, 아래 혹은 양옆의 다른 공간을 잡아끌거나(Drag) 미는 (Swipe) 제스처를 취함으로써 스크린 자체보다 더 넓은 사이즈의 영역을 통해 콘텐츠를 효율적으로 선택하고 볼 수 있게 변화했습니다.



터치 제스처의 종류

사용자가 설명서 없이도 직관적으로 사용할 수 있는 모바일 UX / UI를 기획하기 위해서 해야 할 일은 무엇일까요? 기본적으로 다수가 사용하고 있는 터치스크린 중심의 인터렉션을 이해하는 것입니다. 터치 기능을 잘 활용한 디자인은 사용자가 더 빠르게, 효율적인 인터렉션을 경험할 수 있습니다. 





1. 탭(Tap) : 스크린을 한 손가락으로 한 번 터치한 후 즉시 들어 올리는 것을 말합니다. 보통 앱을 실행하거나 어떤 것을 선택할 때 사용됩니다. 손가락을 화면에 놓은 뒤 들어 올리는 순간, 이벤트가 발생합니다. 또한, 스크린을 터치하는 횟수에 따라서 싱글 탭(Single Tap), 더블 탭(Double Tap), 트리플 탭(Triple Tap) 등이 있습니다. 애플의 아이폰 6s부터 추가된 3D 터치의 경우, 1단계에 해당하는 기본 제스처입니다. 


2. 더블 탭(Double Tap) : 탭의 종류 중 싱글 탭 다음으로 많이 사용되는 제스처입니다. 더블 탭은 화면에 손가락을 2회 연속 두드리기 때문에 싱글 탭과는 상대적으로 해당 제스처의 목적이 분명한 기능에 배치합니다. 예를 들어 브라우저 사파리 혹은 지도나 이미지를 화면에서 확대하거나 축소하기 위한 제스처로 사용합니다. 


3. 프레스(Press) : 화면 위를 일정 시간 동안 약간의 힘을 가한 상태로 탭 하는 제스처를 프레스라고 합니다. 화면 전체가 바뀌는 것이 아니라, 주로 팝업과 같이 숨겨진 메뉴를 불러오거나 기능을 실행할 때 사용됩니다. 프레스는 '터치 앤 홀드(Touch and Hold)'라는 용어로 불리기도 하며, 추가로 아이폰 6s부터 추가된 3D 터치 중 2단계 제스처(Peek 엿보기)입니다. 


3-2. 세게 누르기 (Deep press) : 프레스보다 더 힘을 줘 길게 누르는 방식으로, 아이폰 6s부터 추가된 3D 터치 중3단계에 해당하는 제스처(Pop 튀어나오기)입니다.





4. 팬(Pan) : 손가락을 떼지 않고 계속 드래그(Drag) 하는 제스처로, 시간과 방향의 제한 없이 사용자가 손가락을 뗄 때까지 패닝(Panning)으로 인식합니다. 가령, 화면에서 오브젝트를 이동할 때, 라인 그리기 혹은 확대된 이미지를 상하좌우로 움직여 탐색할 때 사용하는 제스처 방식입니다.


5. 스와이프(Swipe) : 스와이프는 손가락을 댄 후, 일직선으로 드래그하는 것을 말합니다. 시간의 제한은 없으나 직선 움직임이라는 제한이 있습니다. 보통 화면 탐색 시, 스크롤(Scroll) 기능으로 사용합니다.


6. 플릭(Flick) : 스와이프에서 좀 더 빠르게 한 방향으로 미는 것을 말합니다. 가령 탐색하던 브라우저 화면을 불러오거나 다른 화면으로 넘길 때 혹은 숨겨진 드로어 메뉴(Drawer menu)를 열 때 사용됩니다.


위 동작 UI를 기획 및 배치할 때 주의해야 할 점은 바로 팬 > 스와이프 > 플릭 제스처라는 포함 관계입니다. 즉 스와이프나 플릭의 경우 팬으로 명령어를 인식할 수 있고 플릭의 경우 스와이프로 인식될 수 있으므로 터치 UI를 설계할 때 제스처의 각 포함관계와 특징을 살펴 구성해야 합니다.



7. 드래그 (Drag) : 손가락의 제스처만 보면, 스와이프나 팬과 유사하지만, 드래그는 오브젝트를 이동할 때나 정해진 방향으로 움직인 후 손가락을 떼는 행동을 말합니다. 팬처럼 제한 없이 이동할 수 있지만, 스와이프처럼 직선 움직임이 아니어도 인식이 가능합니다. 오브젝트를 이동시킬 때나 텍스트를 복사할 때 주로 사용하고 있습니다.


8. 핀치 인/아웃 (Pinch in/out) : 위 동작들과 다르게 손가락 두 개를 화면에 댄 상태에서 두 손가락 사이를 넓히거나(out) 좁히는(in) 제스처를 말합니다. 더블 탭 외에 지도나 이미지를 볼 때 확대/축소 기능으로 사용됩니다. 핀치 아웃은 핀치 오픈(Pinch Open) 혹은 스프레드(Spread)로, 핀치 인은 핀치 클로즈(Pinch Close)라는 용어로도 알려져 있습니다. 

 

9. 로테이트 (Rotate) : 로테이트도 핀치처럼 두 손가락을 이용하는데, 오브젝트가 도는 회전 값을 인식하는데 차이가 있습니다. 보통 화면에서 이미지를 회전시킬 때 사용되는 제스처 입니다. 




지금까지 모바일에서 자주 쓰이는 기본적인 제스처에 대하여 알아봤습니다. 모바일 플랫폼에 따라 약간의 차이가 있지만, 기본적인 제스처에 대한 정의와 이해는 개발자와 원활한 소통뿐 아니라 깔끔하고 체계적인 UX, UI 디자인을 완성할 수 있는 기본기가 될 것입니다. 




by 고양이 발자국





Posted by slowalk