머티리얼 디자인(Material Design)

의 핵심은 무엇인가?

출처 : 슬로워크 블로그 

Being Limited를 운영하고 있는 Paula Borowska가 DesignModo에 쓴 What is the point of material design?의 번역입니다. 되도록 원문의 의도가 나타나도록 했지만 내용에 따라 의역한 부분이 있습니다. 





이번 구글 I/O에서 발표된 ‘머티리얼 디자인’이란 간단하게 말해 “구글의 다양한 플랫폼 안에서 사용자 경험을 하나로 묶는다”입니다. 이런 “통합”은 서비스(기술)를 더 쉽고, 간결하고, 직관적으로 만들어 전체적인 사용자 경험을 향상시킬 것입니다. 





구글이 발표한 머티리얼 디자인 데모

구글의 머티리얼 디자인 

아시다시피 구글은 매우 매우 큰 회사이고, 검색엔진부터 브라우저, OS, 안경(Glasses)까지 수많은 기술과 서비스를 가진 회사입니다. 언뜻 보면 일관성 없어 보이는 다양한 기기와 서비스에 대한 경험을 통합하고 서로 연결해야 할 텐데요. 머티리얼 디자인은 단지 새로운 UI의 하나가 아니라 “구글과 함께하는 모든 경험”입니다. 

다양한 플랫폼(기기, 서비스)에서의 머티리얼 디자인

머티리얼 디자인의 큰 부분은 사용자가 다양한 기기를 사용할 때, 그 흐름이 끊김 없이 자연스럽게 이어진다는 것입니다. 만약 누군가 걸어가면서 이메일을 쓰다가 그냥 열어 두었다면, 시계나 휴대폰, 태블릿에서 이메일을 이어서 쓸 수 있습니다. 따로 저장할 필요도 없고 동기화할 필요도 없습니다. 그저 찾아서 마무리 짓고 보낼 수 있습니다. 

그리고 퇴근하고 집으로 돌아왔다면 업무 관련 이메일은 잠시 미루고 친구나 가족들이 보낸 이메일 알림이 나타납니다. 퇴근 후의 시간을 고려해서 알림을 보여주는 것이지요.  이렇게 눈에 보이지 않는 배려들은 단순히 시각적인 UI라고만 할 수 없습니다. 사용자의 삶을 보다 똑똑하고 만드는 것이 머티리얼 디자인입니다. 



UI

앞으로 구글의 주요 인터페이스가 될 머티리얼 디자인. 머티리얼 디자인이 어떻게 만들어졌는지 알아보겠습니다. 머티리얼 디자인 제작의 핵심은 “물리적인 세계”입니다. 무슨 의미일까요? 구글의 Jon Wiley는 Fast company와의 인터뷰에서 이렇게 말합니다. 

“우리가 무언가를 만들 때 수천 년 동안 축적된 기술을 적용한다. 그러나 소프트웨어 디자인의 기술은 이제 시작이다”

구글이 머티리얼 디자인의 UI를 만들 때 무언가 화려하고 빛나는 것을 만들고 싶었지만, 디자인에 큰 영향을 줄 머티리얼 디자인 개념을 만들어 가면서 여러 연구가 필요했습니다. 

존 웨일리는 이어서 말합니다. 

“우리는 한 발 물러서 생각해 보았습니다. 모든 소프트웨어를 살피고, 질문해 보았다. 이것은 무엇으로 만들어졌을까?”



카드스탁 디자인




카드처럼 레이어를 겹겹이 쌓아올린 디자인

구글은 디지털 세계에 실제와 같 물리적인 감각을  넣고 싶었습니다. 애플이 스큐어몰피즘을 통해 이를 만들려고 했었지요. 구글이 보기에 스큐어몰피즘은 훌륭했지만 그보다 더 잘할 수 있었습니다. 머티리얼 디자인에는 스큐어몰피즘과 같은 장식적인 질감이 없습니다. UI는 깔끔하고 심플하지요. 스큐어몰피즘은 이와 비교하면 매우 과장되어 보입니다. 그러면 카드스탁은 어떨까요?





카드스탁은 머티리얼 디자인을 정의하는데 중요한 개념입니다. 구글의 디자이너들은 디지털 세상을 최대한 물리적으로 만들고 싶었고, UI 요소들을 마치 카드를 쌓은 것처럼 겹겹히 쌓아 나갔습니다. 많은 디자이너들이 좋아하는 이 방식은 새로운 것은 아닙니다. 그러나 구글은 한 발 더 나아가 그림자 도구를 적용해  UI요소들이 진짜 (종이)카드처럼 보이도록 했습니다. 구글의 디자이너들에게 있어 현실의 (물리적)세계는 매우 중요하고 지키고 참고해야할  무언가입니다. 





머티리얼 디자인이 모바일 디자인에 적용된 모습



실제 종이와 비슷하게


구글은 디자인의 중심에 종이를 놓았습니다. 안드로이드 디자인의 리더인 Matias Duarte는 머티리얼 디자인에 대해 이렇게 말했습니다. 

“터치에 대해 반응으로 단순히 스크린의 모양과 색상이 바뀌는 대신 픽셀이 가지고 있는 본연의 form을 향상킬 것으로 기대한다”

디지컬 세계에서 실제와 같은 경험을 주려면, 실제 종이를 연구해야 했습니다. 실제 그림자가 어떻게 보이는지 알아보려고 다양한 레이어로 종이 아이콘을 만들어 연구했습니다. 비록 실제 종이가 머티리얼 디자인 UI처럼 형태가 변하거나 하지는 않더라도 연구에 큰 도움이 되었습니다. 결국 머티리얼 디자인은 디자인을 한 발 더 나아가도록 했습니다. 무엇보다 중요한 것은 이를 구글에서 펼쳐가고 있다는 점입니다. 머티리얼 디자인이 진보적이지 않더라도 사용자에게 영향을 주고 있는 디자인 작업에 중요한 척도가 될 것입니다.  





현실의 물리법칙을 적용. 사용자의 터치에 자연스럽게 움직입니다. 



디지털 물리학


머티리얼 디자인의 큰 원칙은 디지털 왕국에 가상 물리 감각을 만드는 것이었습니다. 사용자가 스크린을 보고 여러가지 앱을 사용하는데 있어, 머리티얼 디자인은 감각과 관계에 대한 어떤 형태을 만들어 냈습니다. 

물리학이 디지털 세계에 적용되기 이전에도 어떠한 관계를 보여주는 것은 중요한 일입니다. 이유는 간단합니다. “직관적인” 앱 디자인을 구현하기 위해서 입니다. 앱이나 웹사이트 디자인은 무엇보다 직관에 의해서 결정되고, 특정한 규칙에 얽메이지 않습니다. 그렇지 않다면 앱이나 웹사이트는 사용하기 어려워질 것입니다. 

머티리얼 디자인은 사용자들이 직관에 의해 쉽게 사용할 수 있도록 UI안에 시각적인 관계를 만들고 싶어합니다. 중요한 점은 이런 관계를 현실화 시키는 것입니다. 실제 UI는 머티리얼 디자인과 더 즐겁게 상호작용하기 위한 독특한 애니메이션, 그림자, 색상을 가지고 있기 때문입니다. 



머티리얼 디자인의 핵심은 무엇일까?


결국 머티리얼 디자인은 구글의 다양한 기기와 서비스를 하나로 묶기 위한 방법입니다. 이 디자인의 기반에는 여러 기기들을 사용할 때 끊김이 없는 사용 흐름을 위한 똑똑한 기술들이 있습니다. 사용하기 불편한 이메일을 생각해 봅시다. 여러 개의 이메일 앱을 각각 확인해야 하고, 어떤 앱은 크로스 플랫폼을 지원하지 않습니다. 파일이나 사진을 공유할 때도 문자 메세지를 보낼 때도 마찬가지입니다. 





언제 어디서나 일관성 있는 모습으로





사용자와 상호작용하는 UI

만약 TV나 시계, 스마트폰을 쉽게 동기화할 수 있다면? 아니면 실제로 자동차를 통해서도 끊김 없는 편리함을 누릴 수 있습니다. 이제 메세지나 파일을 동기화할 때 걱정하지 않아도 됩니다. 집에서는 폭주하는 업무 이메일을 걱정할 필요가 없습니다. 거꾸로 어젯밤에 보낸 사진이 업무 시간에 나타나는 일도 없을 것입니다. 

머티리얼 디자인은 멋진 UI 이상입니다. 구글이 하고 있는 일은 전반적인 경험을 쫓고 있다는 것입니다. 무엇보다 구글은 사용자들의 기술을 사용하는데 보다 쉽고 나은 방향을 제공하려고  노력중이라는 겁니다. 



결론


구글은 다양한 플랫폼에 적용될 머티리얼 디자인을 발표했습니다. 수많은 기술과 서비스를 가지고 있는 기업인만큼 이들을 하나의 경험으로 묶어서 제공해야만 합니다. 머티리얼 디자인에 대해 어떻게 생각하시나요? 다양한 서비스를 이용할 때 통합적인 경험을 갖도록 하는 것이 과연 옳은 방향일까요? 머티리얼 디자인이 디자이너들에게 애플의 스큐어몰피즘만큼의 영감을 줄 수 있을까요? 함께 생각해볼 문제입니다 


참고

Google I/O 2014 - Material design principles

What is the Point of Material Design?

Google Is About To Take Over Your Whole Life, And You Won't Even Notice

Skeuomorphism in User Interface Design, What is It?





UX 신입 디자이너가 알아야 할 

UI디테일 용어 4탄


1. Splash Screen


프로그램을 로드하는 동안 표시되는 이미지를 말합니다. 평균 2~3초간 지속되는 시간동안 애플리케이션의 로고와 함께 앱에 대해 간략한 소개를 하거나, 로딩 진행률을 애니메이션으로 표시하기도 합니다. Splash Screen에 사용되는 로고나 텍스처를 통해 애플리케이션의 아이덴티티를 표현할 수 있어야 합니다.





2. Coach Marks / Empty Data / Walkthroughs


위의 패턴들은 도움말을 제공할 수 있는 패턴입니다. '이 앱이 얼마나 친절한가?'를 판단할 수 있는 하나의 요소가 될 수 있는데요. 초기 진입 시에만 볼 수 있도록 설계하고 다음 진입 부터는 '설정'같은 메뉴 안에 두어 언제든 도움말을 호출할 수 있도록 합니다.



2.1 Empty Data


데이터가 없는 초기 상태를 표현하는 패턴입니다. 가끔 클라이언트에게 빈 화면에 대한 재미있는 아이데이션을 요청받을 때가 있습니다. 그만큼 빈 화면에 대한 처리는 중요한 요소입니다. 아무것도 없는 빈 화면보다는 "데이터가 없습니다"라고 표시해주거나 그보다는 "이 공간은 어떤 역할을 하는 화면이고 제대로 쓰려면 어떻게 해야 합니다"라고 친절히 말해주는 것이 더 유용합니다.





2.2 Coach Marks


앱을 처음 진입하는 사용자를 위해 간단한 도움말을 제공하는 패턴입니다. 홈 화면 위에 반투명한 화면을 덮어 그 위에 각 메뉴에 대한 도움말을 표시하는 형태입니다.





2.3 Walkthroughs


Coach Mark보다 상세한 도움말을 뜻합니다. Wizard와 같이 앱 초기 진입 시 몇 단계로 걸쳐 상세한 도움말을 제공합니다. 긴 프로세스를 거치고 싶지 않는 사용자를 위해 본 단계를 건너뛰고 바로 홈 화면으로 진입할 수 있는 경로를 주는 것이 중요합니다.






3. Launcher (=Dashboard, Springboards)


응용 프로그램 혹은 앱의 경우 메뉴의 진입점을 아이콘 등으로 표시하는 방식을 뜻합니다. 기능 혹은 카테고리로 메뉴를 분류하며 새로운 컨텐츠를 강조합니다. 스마트폰 초창기 시절 모바일 앱의 메인 화면에서 많이 쓰다가 현재는 Drawer와 같은 패턴을 많이 쓰는 추세입니다. Hub와 같은 역할을 하여 메뉴를 한 눈에 볼 수 있고 쉽게 제어할 수 있습니다. 하지만 모든 메뉴가 동일한 우선 순위를 가진 것처럼 느껴질 수 있으며 메뉴의 개수가 많을 경우 한 화면 안에 표시할 수 없는 단점이 있습니다.






4. Drawer (=Sliding Menu, Side Bar)


평상시에는 닫혔다가 당길 때 열리는 서랍과 같다고 'Drawer'라고 부르기도 하며 슬라이딩되면서 나오는 모션에서 착안하여 'Sliding Menu'라고도 불립니다. 일반적으로 앱의 최상위 메뉴를 표시하며, 최근 활동이나 알림 등 각 앱의 부가적인 기능을 모아볼 수 있는 공간으로 쓰입니다. Tab Bar의 경우 일반적으로 메뉴가 5개가 넘어가는 경우 More메뉴 안에 숨겨야 하는 한계가 있습니다. Launcher 역시 터치 영역을 확보하기 위해서 가급적 9개 이상의 메뉴를 표시하지 않습니다. 이에 반해 Drawer 패턴의 가장 큰 장점은 리스트 기반의 다양한 메뉴를 표시할 수 있다는 점입니다.







5. Swipe Paging / Swipe View (Android) / Flip View (Windows8)


최상위 메뉴 혹은 상세 화면을 좌우로 Swipe하여 항목을 이동한다는 큰 개념은 같지만 이 패턴에 관한 정의가 각 OS에 따라 조금씩 다릅니다.

5.1 Swipe Paging (=Filmstrip)


최상위 레벨의 페이지를 나란히 정렬하는 방식을 말합니다. 대표적으로 iPhone의 날씨앱을 예로 들 수 있는데요. 한 번에 한 페이지씩 볼 수 있으며 사용자는 Swipe동작으로 페이지를 이동합니다. 이 패턴을 사용할 시 중요한 점은 현재 페이지의 위치 정보를 주어야 한다는 것인데요. 대표적으로 Dot Indicator가 쓰이고 있습니다. 하지만 페이지 확장성이 제한적이라는 단점이 있습니다. 아래 오른쪽 화면과 같이 페이지가 많아질수록 사용성은 떨어지게 됩니다.






5.2 Swipe View


Android 표준 가이드에서는 Swipe View라고 정의되어 있으며 두 가지 방식으로 정의하고 있습니다. 상세 화면간 이동을 위해 사용할 것을 제안하고 있으며 또 한가지는 Tab 간 이동 시에 사용됩니다. 이는 요즘 모바일 웹에서 사용되는 패턴과 동일한데요. 아래 그림과 같이 Tab을 터치하여 이동하는 방법 외에 Swipe 동작을 통해 이동할 수 있도록 합니다.







5.3 Flip View


Windows8 표준 가이드에서는 FlipView라고 부르는데, 아래 그림과 같이 상세 화면에서 사용하며 최상위 화면에서는 지양할 것을 권하고 있습니다. 항목을 전환하는 반복적인 동작이 사용자에게 짜증을 일으킬 수 있기 때문입니다.






6. Split View (iOS) / Multi-pane Layout (Android)


효율적인 공간 활용을 위해 태블릿에 탑재된 기본 패턴입니다. 폰에서 목록(List View)과 그에 따른 상세 화면(Detail View)을 각각 따로 제공하는데요, 넓은 공간의 특성 상, 태블릿에서는 두 화면을 결합하여 나란히 표시합니다. 기본적인 원칙은 왼쪽 창에는 목록을 제공하며 오른쪽 창에는 현재 선택된 항목에 대한 상세 화면을 표시하는 것입니다. 이 때, 현재 선택된 항목에 Highlight 표시를 하여 오른쪽 창과의 관계를 인지할 수 있도록 해야 합니다.





출처

http://story.pxd.co.kr



[디자인/UI/UX] - [UX] UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄

[디자인/UI/UX] - [UX] UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄

[디자인/UI/UX] - [UX] UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄



UX 디자인, UI 디자인을 넘어 혁신의 수단으로

류한영, 이화여자대학교 디지털미디어학부 교수 





치열한 경쟁에서 살아남고 성장하기 위해 기업은 오래 전부터 혁신을 핵심전략으로 삼아왔다. 

초기의 혁신은 생산프로세스 개편이나 비용 절감 등의 방법을 통한 가격혁신의 형태로 진행되면서 

성장보다 생존에 더 치중하는 모습을 보였다. 최근에는 새로운 기술 개발 및 상품화를 통한 기술혁신이 중시되고 있다. 이는 생존만이 아니라 부가가치 창출을 통해 성장을 추구했다는 점에서 의미 있는 일이다. 

하지만 이런 노력에도 불구하고 기술의 상향 평준화로 인해 혁신의 노력이 한계에 도달하면서 

새로운 돌파구가 필요했다. 

그것이 바로 ‘UX 디자인’이다. 

아래의 글은 지난 1월 46인치 투명 액정표시장치의 개발을 소개하는 동아일보 기사의 내용이다.

전반부는 새로 개발된 기술의 우수성을, 후반부는 그 기술의 활용 가능성을 충실히 소개하는 내용으로 구성돼 있다.



“영화에서나 보던 광경이 현실로 다가왔다. A사는 46인치 투명 액정표시장치(LCD) 개발을 마치고 

이달 말부터 양산에 들어간다고 17일 밝혔다. A사가 투명 LCD를 발표한 건 지난해 22인치 패널에 이어 

이번이 두 번째다. 새로 선보인 제품은 말 그대로 유리처럼 투명한 모니터다. 

일반 LCD와 달리 백라이트(패널 뒤에서 비추는 조명)가 없어도 햇빛이나 형광등 불빛 등이 있으면 화면을 볼 수 있다. 

자연광을 이용하기 때문에 전기도 절약된다. 활용도도 높다. 버스정류장 안내판, 

건물의 외벽, 상업용 냉장고 등에 이 제품을 탑재하면 광고나 정보 전달수단으로 쓸 수 있다. 

내구성을 강화하면 자동차의 앞 유리 대신 장착해 차량 속도, 목적지, 남은 연료 등의 

주행 정보를 보여주는 것도 가능하다.  A사는 현재 서울지하철 2호선 주요 역사에 스크린도어로 

시범 설치해 새로운 광고 기법을 선보이고 있다.”



아마도 이 글을 읽는 당신은 2002년 톰 크루즈가 출연했던 SF 영화 ‘마이너리티 리포트’의 한 장면을 떠올리며 

그 모습이 현실화됨에 신기해하고 감탄을 할지도 모르겠다. 

그런데 실제로 운전하고 있는 당신의 자동차 앞 유리에 차량 속도, 목적지, 남은 연료 등과 같은 주행정보가 보여 진다면 당신은 계속해서 신기해하고 감탄하면서 즐거워 할 수 있을까? 

아마도 많은 사람들은 화면에 떠 있는 정보에 시야가 가려지는 것에 화를 내고 짜증을 낼지 모르겠다.

신기한 기술이 있으니 제품에 적용하는 것이 아니라 사용자인 자동차 운전자가 

화면에 정보가 디스플레이 되는 것을 어떻게 받아들일지, 

또 받아들인다면 디스플레이 되기를 원하는 정보의 내용과 위치, 방식 등은 무엇인지 

등을 ‘먼저’ 고민하고(사용자를 이해하고) 그들에게 수용될 수 있는 

최적화된 최종 결과물을 만들어 나가는 활동이 바로 UX 디자인이다.




UX 디자인 그 모호함


이쯤에서 뭔가 이상함을 느끼는 독자라면 UX 디자인에 대해 많은 고민을 해온 사람일 것이다. 

2000년대 초반 국내에서 UI의 중요성이 대두되면서 많은 기업들은 자사 제품의 UI를 향상시켜 

기업 경쟁력을 강화하기 시작했고 소기의 성과를 거두고 있다. 

이때의 활동을 UI 디자인이라고 했는데 엄밀한 의미에서 본다면 앞에서 언급한 사례도 

UI 디자인의 범주에서 벗어나지 않는다. 따라서 최근 UX의 가치와 중요성에 대한 논의가 새로이 시작되면서 나타난 

이러한 혼란에 대해 먼저 이해하는 것이 

기업 내에서 UX 디자인의 중요성을 인식하고 그 역할을 자리매김하는 데 도움이 될 것이다.


UX 디자인은 디자인 과정에서 사용자 경험을 총체적으로 다루는 창조 활동이다.


UX에 대해 관심이 있는 사람이든 아니든 간에 이 간단한 문장의 정의를 부정하지는 않을 것이다. 

그런데 이러한 간단한 정의에도 불구하고 여전히 UX 디자인은 기업에서 뜨거운 감자로 머물러 있다. 

많은 사람들이 UX 또는 UX 디자인의 중요성을 강조하고 있는데 왜 우리는 혼란스러워하고 있으며 

기업에서는 이를 적극 활용하지 못하고 있을까? 여기에는 다양한 원인이 있겠지만 

가장 큰 원인은 UX 디자인에 앞서 그 가치와 중요성이 강조돼온 UI 디자인과의 차별성을 

명확히 설명하지 못하기 때문이다. 자사 내에 ‘UX’라는 용어가 들어가는 조직을 이미 운영하고 있는 기업이라면 

그 부서의 명칭이 어떻게 변화해왔고 업무의 범주나 역할 또는 책임이 무엇인지 되돌아보기 바란다. 

많은 기업들이 기존에 UI기획 또는 UI 디자인으로 사용하던 부서명을 

UX 기획 또는 UX 디자인으로 변경해 왔음을 발견하는 일은 그리 어렵지 않을 것이다.

그런데 부서명을 바꾸게 된 것이 그 부서의 업무범주, 역할 및 책임이 변화했기 때문일까? 

가장 궁색한 변명이 ‘(UI를 명칭에 사용하던) 기존 부서가 인터페이스의 객관적 사용성(usability) 향상을 

추구하는 부서였다면 (UX를 명칭에 사용하는) 새로운 부서는 사용성을 넘어 

주관적 경험을 포함하는 총체적 사용자 경험을 다루는 부서다’는 정도의 답변이 될 것이다. 

옳은 말이다. 하지만 이 답변에는 3가지의 큰 함정이 도사리고 있으며 

그 함정들이 UX 디자인의 발전을 저해하는 가장 큰 원인이 될 수 있다.




함정 1: 디자인 목표의 모호함


UI 디자인의 목표는 디자인해야 하는 사용자 인터페이스의 ‘사용성’을 향상시키는 것이다. 

이러한 목표는 기존의 디자인 활동에서 추구하지 않았던 

새로운 가치를 제시함으로써 많은 기업들에 강하게 어필할 수 있었다. 

기업들은 빠른 속도로 UI 관련 부서를 만들고 인력을 채용하기 시작했고 생산하고제공하는 제품이나 서비스의 사용성을 크게 향상시킬 수 있게 됐다. 하지만 이 과정에서 

사용성의 의미를 ‘사용 편의성’으로 왜곡해 이해함으로써 UI 디자인의 의미를 축소하게 되는 우를 범하게 됐다. 

아래 그림은 다양한 연구들에서 공통적으로 사용하고 있는 사용성(세부) 가치들로 기업에서는 이러한 세부 가치들을 달성함으로써 궁극적으로 UI의 사용성을 향상시킬 수 있을 것으로 기대하고 노력해 왔다. 

이러한 이해와 노력은 현재도 기업 발전에 유효한 방법임에는 의심의 여지가 없다.


special-ux-1


문제는 UX라는 용어를 UI와는 다른 새로운 개념으로 사용하면서 발생하기 시작한다. 

‘사용성을 넘어서 사용자 경험을 총체적으로 다루는’ UX 분야는 분명히 중요하다. 

이러한 목표의 차이가 UI 디자인과 UX 디자인을 구분하는 핵심 척도로 받아들여지고 있다. 

하지만 이러한 설명을 들은 대부분의 UI디자이너들은 의문을 가지게 된다. “UI를 디자인하는 과정에서 

기업이 추구한 것은 UX 디자인 과정에서 추구하게 되는 것과는 다른 것인가?” 

앞에서 설명한 바와 같이 UI에서 추구하는 사용성의 세부 가치들을 ‹그림 1›과 같이 정의하는 경우에는 

분명 두 용어의 차이는 크다고 할 수 있다. 

하지만 국제표준화기구(ISO)에서는 정의하고 있는 사용성의 정의를 살펴볼 때 이는 매우 잘못된 생각임을 알 수 있다.


special-ux-2


ISO에서는 사용성의 세부 가치를 ‹그림 1›과 달리 effectiveness, efficiency & satisfaction으로 정의하고 있다. 

그중 effectiveness와 efficiency는 ‹그림 1›에서도 다루고 있는 개념으로 여전히 의미 있는 가치임에는 분명하다. 

하지만 마지막의 satisfaction은 노암 트렉친스키(Noam Tracktinsky)가 언급한 바와 같이 

객관적 측정이 가능한 가치를 중시해온 공학적 측면에서는 오랫동안 간과해 온 이슈였기 때문에 그동안의 연구와 논의에서 제외돼 왔다. 심지어 UX가 화두가 된 최근에는 독립적인 가치가 아니라 

다른 두 가치인 effectiveness와 efficiency를 통해 얻게 되는 결과로 그 의미를 축소해 정의하려는 경향까지 나타나고 있다. 하지만 이러한 경향은 새로운 가치인 UX를 설명하기 위한 자의적 해석에 지나지 않으며 

엄격한 의미에서 볼 때 satisfaction은 UX 디자인에서 추구하는 총체적 경험(holistic experience)의 결과 중에서 

감성적인 가치를 포괄적으로 지칭하고 있음이 분명하다. 

따라서 이러한 이해를 바탕으로 앞에서 말한 UX 디자인의 의미를 다시 정리해 본다면 

‘UX 디자인은 그동안 UI 디자인팀에서 간과해 온 목표인 satisfaction을 포함해 디자인을 하는 것” 

정도의 의미를 가지는 것이 타당할 것이다.




함정 2: 디자인 방법론의 모호함


UX 디자인의 특징을 설명하는 방법 중의 하나로 ‘사용자 중심 디자인(user-centered design)’을 강조하는 경우가 종종 있다. 사용자중심디자인은 때로는 디자인 철학으로, 때로는 방법론이나 프로세스로 이해된다. 

하지만 사용자중심디자인은 UX 디자인과 함께 나타난 새로운 개념이 아니라 UI 디자인의 중요성을 논의하던 시기에 

이미 강조돼온 개념이다.


Six key principles of User-centered Design in ISO 9241-210[ 4 ]
The design is based upon an explicit understanding of users, tasks and environments.
Users are involved throughout design and development.
The design is driven and refined by user-centred evaluation.
The process is iterative.
The design addresses the whole user experience.
The design team includes multidisciplinary skills and perspectives.

앞에서 살펴본 사용성의 정의에 따르면 사용성 향상을 위해서는 UI를 사용하게 될 사용자(specified users)와 

사용 목적(specified goals), 그리고 사용 맥락(specified context of use)에 대한 이해를 필요로 한다. 

이것이 ISO 9241-210[5]에서 제시하고 있는 여섯 가지 사용자 중심 디자인 원칙 중에서 첫 번째 원칙에 해당한다.

두 번째 원칙은 디자인 과정에서의 사용자 참여를 강조한 것이고 세 번째와 네 번째 원칙은 평가를 통한 반복적 프로세스의 중요성을 강조한 원칙이다. 마지막 원칙은 특정 분야의 전문가가 아닌 다학제적인 팀워크의 필요성을 역설한 것이라 할 수 있다. 그런데 이들은 모두 UI 디자인이 기업에 도입되던 시기에 이미 논의됐던 사항으로 전혀 새로운 것은 아니다. 다만 다섯 번째 원칙인 ‘디자인(작업)은 총체적인 사용자 경험을 다뤄야(address) 한다’에서 사용자경험의 중요성을 명시적으로 제시하고 있는데 이는 앞에서 언급한 왜곡된 사용성의 의미를 바로 잡고 디자인에서 추구해야 할 가치가 기능적인 부분을 넘어 주관적 감성을 포함하는 총체적 가치임을 명확히 했다는 점에서 매우 반가운 일이다. 

하지만 UI 디자인과 UX 디자인의 차이를 설명하기에는 역시 부족하다.







함정 3: 디자인 결과물의 모호함


마지막으로 UX 디자인을 설명하는 과정에서 발생하는 문제가 바로 그 결과물이 무엇인가 하는 점이다.

UI 디자인의 결과물은 유형의 UI이다. 

디자인 과정에서 어떠한 가치를 추구하던 간에 그 결과물이 유형의 UI로 나타난다는 점에는 변화가 없다. 

그렇다면 UX 디자인의 결과물은 무엇인가? 

여기에서 ISO에서 정의하고 있는 UX의 의미를 살펴볼 필요가 있다. 

ISO 9241-210에는 다음과 같이 UX 디자인을 정의하고 보다 구체적인 이해를 위해 에디셔널 노트까지 제시하고 있다.


[definition] “UX is a person’s perceptions and responses 

that result from the use or anticipated use of a product, system or service”
[additional note] “User experience includes all the users’ emotions, beliefs, preferences, perceptions, physical 

and psychological responses, behaviors and accomplishments that occur before, during and after use”


하지만 어디를 보더라도 UX 디자인의 구체적인 결과물이 무엇인지 감을 잡기 어렵다. 

perception이나 response가 결과물인가? 하지만 많은 학자들이 UX는 경험된 결과이지 디자인되는 것이 아니라는 

견해를 피력하고 있다는 점을 상기한다면 이것을 UX 디자인의 결과라고 하기에는 무리가 있을 것이다. 

굳이 찾자면 사용자가 사용하게 될 제품이나 시스템 또는 서비스 정도가 디자인돼야 할 구체적인 모습일 것이다. 

하지만 이들은 모두 UX 디자인의 결과물이라기보다는 새로운 경험을 제공하기 위한 UI 디자인의 결과물이기도 하다. 

결국 실체가 존재하지 않음으로 해서 예를 들면 ‘UI/ UX 디자인’처럼 두 단어를 함께 사용해 

그 모호성을 극복하고자 하는 것이 현실이다.







UI 디자인을 넘어 UX 디자인으로


지금까지 UX 디자인이 뜨거운 감자로 남을 수밖에 없었던 원인을 살펴봤다. 

기업의 입장에서 이러한 원인을 모두 동의한다면 UX 디자인에 대한 더 이상의 논의는 무의미한 일이 될 것이다.

UX가 기업이 지향해야 할 목표임에는 분명하지만 UX 디자인은 새로운 것이라기보다 

기존 디자인에서 간과한 가치의 중요성을 환기시킨 명칭에 불과한 것이 되기 때문이다. 

하지만 정말로 UI 디자인을 포함한 기존 디자인과 UX 디자인에는 그 정도의 차이밖에 없을까? 

UX는 단지 추구하는 가치에 불과한 것일까? 정답은 물론 ‘그렇지 않다’이다.

UX 디자인의 중요성을 이야기하는 과정에서 파인(Pine)과 길모어(Gilmore)가 1998년 ›하버드 비즈니스 리뷰‹를 통해 

제시한 경험경제(Experience Economy)의 개념이 종종 언급된다. 

그들은 경험을 통한 부가가치의 창출을 통해 비즈니스의 가치를 높여야 한다고 주장했는데 

이러한 주장은 UX 디자인에서 주장하는 바와 그 맥을 같이한다. 

다만 그들이 경험경제를 통해서 사용자 경험의 중요성을 전략적으로 제시하고 있다면 

UX 디자인은 그 전략을 추진하고 달성하는 핵심 전술로서의 의미가 크다고 하겠다.

앞서 ‘디자인 목표의 모호성’에서는 그동안 간과해온 가치인 satisfaction을 디자인 목표에 추가하는 것만으로 

UX 디자인이 UI 디자인을 넘어서기에는 어려움이 있음을 설명했다. 

아울러 ‘디자인 방법론의 모호성’에서는 사용자중심디자인이 

UX 디자인만의 차별적 방법론을 설명하는 데 도움이 되지 못함을 제시했다. 

하지만 ‘디자인 결과물의 모호성’은 

오히려 UX 디자인 왜 중요한지를 역설적으로 설명하는 데 매우 효과적인 수단이 된다.

전통적 관점의 디자인은 디자이너가 자신의 경험(DX)을 바탕으로 디자인을 하고 

사용자는 자신의 경험(UX)을 바탕으로 디자인된 결과물을 사용하는 구조로 이뤄졌다. 

이 과정에서 디자이너는 사용자를 위해 디자인한다고 했지만 실제로는 

구현된 디자인과 사용자가 경험한 디자인의 내용에 차이가 발생하면서 

막대한 비용을 투자해 생산한 제품이나 서비스가 시장에서 외면받는 결과를 가져오게 됐다.


special-ux-3


이러한 상황은 사용자와 제품의 상호작용이 중요시되는 디지털시대가 도래하면서 

기업과 디자이너에게 UI에 대한 관심을 가지도록 했으며 사용자와 함께하는 디자인(design with user)을 통해 

그 갭이 어느 정도 극복됐다. (그림 4) 하지만 이때까지도 최종 결과물은 

단일 제품이나 서비스의 모습으로 사용자에게 제시됐으며 

사용자경험은 제품이나 서비스를 사용하는 과정에서 나타나는 결과로서 그 의미가 한정돼 있었다. 

이는 앞에서 언급한 사용자 경험의 정의와 일맥 상통하는 것으로 

이 수준에서는 UX 디자인의 의미가 UI 디자인의 의미와 혼용될 수밖에 없는 상황 었다. 

즉, 총체적 사용자 경험을 고려해 UI 디자인을 진행하고 사용자는 디자인된 UI를 통해 

UI에 의도된 UX를 경험하기 때문에 UX와 UI를 독립적으로 사용하는 대신 

오늘날과 같이 ‘UI/UX’의 형태로 사용하는 어색한 상황이 연출된 것이다.

그리고 이러한 이유로 이 글의 처음에 예로 들었던 

투명 디스플레이의 사례가 UX 디자인이기도 하면서 UI 디자인이기도 한 것이다.


special-ux-4


이러한 사례는 오늘날 우리 주위에서 흔히 볼 수 있는 스마트폰의 사례에서도 나타난다. 

스마트폰은 UI 디자인의 결과물인가, UX 디자인의 결과물인가? 

사실 그 경계를 구분하는 것은 매우 어려운 일일 뿐만 아니라 기업의 입장에서는 무의미한 일이라 할 수 있다. 

하지만 UX 디자인의 중요성을 이야기하려면 이에 대한 구분은 반드시 필요하다. 

ISO의 정의를 준용해 스마트폰을 정의한다면 ‘스마트폰을 사용하기 전, 

사용하는 동안, 그리고 사용한 이후에 나타날 수 있는 사용자의 지각과 반응을 총체적으로 고려해 디자인한 결과물’이며, 그 형태는 UI의 모습을 가지고 있다. 따라서 이 경우에는 스마트폰을

‘사용자의 총체적 경험을 고려한 UI 디자인 결과물’이라고 해도 전혀 어색하지 않다.

UI 디자인을 넘어서 진정한 UX 디자인의 가치를 보여주는 대표적인 사례는 

애플의 아이폰이 아니라 앱스토어에서 찾을 수 있다. 애플은 아이폰의 출시와 함께 앱스토어라는 자신들만의 장터를 열어 핸드폰의 사용경험을 뛰어넘는 새로운 경험을 제공했다. 

아이폰이 가지고 있는 UI는 일차적인 사용자경험이 일어나는 공간이다. 

하지만 아이패드, 아이팟, 아이튠즈 등과 같이 애플 생태계에서 사용되는 

다양한 UI들은 모두 하나의 경험을 위한 수단으로의 의미를 가진다. 

이러한 동질화된 경험의 정점에는 앱스토어라는 새로이 디자인된 사용자경험 환경이 자리하고 있다.
만약 이러한 사용자경험 환경이 디자인되지 않았다면 애플이 만든 사용자경험의 내용은 

매우 제한적인 수준에 머물렀을 것이 분명하다. 즉 UI를 통한 즉각적 사용자경험의 제공만이 아니라 

애플 생태계를 통한 총체적 사용자 경험이 UX 디자인에서 완성하고자 하는 

사용자경험의 모습이고 바로 이러한 UX 디자인이 이뤄질 때 UX 디자인은 UI 디자인을 넘어서 혁신의 수단이 된다.







UX 디자인을 위해


지금까지 UX 디자인의 모호함으로 말미암은 혼란과 혁신을 위한 수단으로서의 UX 디자인을 살펴봤다. 

UX 디자인은 사용자에 대한 이해를 바탕으로 사용자의 경험내용 및 경험환경을 총체적으로 계획하고 

이를 구현하는 일련의 창조행위로 이해될 수 있다. 이는 ‹그림 5›에서 진하게 표시되어 있는 부분에 해당하는데 

여기서 간과하지 말아야 할 것은 진정한 의미의 UX 디자인은 특정 제품에 적용할 기술을 ‘개발’하거나 UI를 ‘구현’하는 

수준이 아니라 먼저 이들을 포괄하는 새로운 경험 환경을 통합적으로 창조하는 것에 그 가치가 있다는 점이다.

그리고 이러한 경험을 창조할 수 있는 사람 또는 조직이 UX디자이너가 되는 것이다.


special-ux-5


아이폰 탄생에는 두 명의 숨은 주역이 있다. 조너선 아이브(Jonathan Ive)와 제프 한(Jeff Han)이다. 

조너선 아이브는 애플의 CEO였던 스티브 잡스가 극찬한 사람으로 애플의 비주얼 아이덴티티를 완성한 사람이고 

제프 한은 애플 소속은 아니지만 아이폰에 적용된 멀티터치 기술을 개발한 주역이다. 

우리는 이들의 역할을 간과해서는 안 된다. 하지만 이들이 사용자의 경험을 창조했다고 말하기에는 무리가 따른다. 

이들은 새로운 사용자경험의 창조에 기여하거나 또는 창조된 사용자 경험을 구현한 사람들이었을 뿐이다. 

따라서 우리는 조너선 아이브와 제프 한을 UX디자이너라기보다 

‘산업디자이너’와 ‘기술엔지니어’라고 부르고 스티브 잡스를 ‘UX디자이너’라고 부른다.

스티브 잡스는 그가 남긴 공과를 떠나서 UX디자이너 또는 UX 디자인팀이 가져야 할 모든 자질과 능력을 보여준 

대표적 사례다. 그는 인문학적인 배경에 예술적 감각과 공학적 전문지식을 모두 한 몸에 가지고 있었던 사람이다. 

소위 말하는 융합형 인간의 전형이다. ‘세기의 귀재’라는 별칭이 붙은 스티브 잡스 같은 인재를 보유하는 것은 

대단히 어렵지만 걱정할 필요는 없다. 융합형 인재는 융합형 팀으로 대체될 수 있다. 

앞에서 말한 사용자중심디자인의 6번째 원칙이 바로 이 문제에 대한 해결안을 제시하고 있다. 

다만 여전히 고민해야 할 점은 그가 가진 ‘디자인 사고(design thinking)’[7]를 

어떻게 그 팀에 정착시키느냐의 문제일 것이다.

예리한 독자들은 이미 캐치했겠지만 ‹그림 5›에서 보여주는 디자이너의 경험(DX) 영역은 

이전보다 크게 확대되어 있다. 이러한 확대는 사용자에 대한 이해를 바탕으로 지속적으로 이뤄지게 된다. 

하지만 확대된 디자이너의 경험이 UX 디자인을 완성하는 것은 아니다. 잡스가 추구한 최상의 기술이 아닌 

최적의 기술로 만들어 내는 사용자 경험은 디자인적 사고(Design Thinking)만이 답을 가져다 주기 때문이다.







당신의 기업이 UX 디자인을 하려 한다면


지금까지 UX 디자인이 UI 디자인과는 다른 차원에서 논의되고 추진돼야 함을 이야기했다. 

진정한 혁신의 수단으로서 UX 디자인을 활용하고자 한다면 UI 디자인을 통한 UX의 창출이 아니라 

기존 UI를 벗어난 새로운 UX의 창출 자체에 무게를 둬야 함은 분명하다. 하지만 현실적으로 이러한 수준의 UX 디자인을 추진하는 것은 기업에서 쉽지 않은 일이다. 여기에는 오랜 시간과 비용이 투자돼야 하고 

실제로 그 성과물이 도출됐을 때도 그것의 사업적 성공을 확신하기가 쉽지 않기 때문이다. 

기업에서 UX 디자인을 추진하고자 한다면 다음의 3가지 사항 정도는 기억하기 바란다.



1. 작은 것부터라도 시작하라


UI 디자인과 UX 디자인의 구분은 혼란을 줄이고자 필요한 것이지 그 경중을 따지는 것은 바람직하지 않다. 

그 둘을 다른 것처럼 이야기하는 것은 문제지만 UI 디자인을 UX 디자인으로 고쳐 칭하는 것에 문제가 있는 것은 아니다. UI 디자인을 통해 사용자 경험을 향상하려는 노력은 협의의 의미에서 UX 디자인이라고 할 수 있다. 

따라서 당신이 UX 디자인을 추진하려 한다면 이러한 수준의 UX 디자인을 먼저 추진해보는 것도 방법이 될 수 있다. 

그정도만으로도 결과물에 대해 감동을 느낄 수 있고 그로 인해 광의의 UX 디자인을 추진하게 될 동력을 얻게 될 것이다.



2. 기존 제품과 서비스가 아니라 사람에서 시작하라 

좋은 UX 디자인을 원한다면 현재 기업에서 생산하는 제품이나 서비스를 잊어야 한다. 


아주 오래된 이야기지만 소니에서 워크맨을 만들 때 그들이 만든 것은 오디오 기기가 아니라 

‘사람들이 걸어 다니면서 들을 수 있는 음악’이었다. 즉 시작이 오디오 기기가 아니라 

‘야외에서 음악을 듣고자 하는 사람’이었기에 워크맨이 가능했던 것이다. 

우리는 또 스타벅스의 성공이 커피에 있었던 것이 아니라 

‘친구를 만나고 휴식을 취하고자 하는 사람’에 있었음을 기억해야 한다. 

최근 유행처럼 번지고 있는 병원의 서비스 디자인은 

병원 서비스의 문제를 진료시스템에서 찾는 것이 아니라 환자에서 찾고 있음도 기억해야 한다.



3. UX 디자인팀을 믿어라


어떠한 수준의 UX 디자인을 추진하던 간에 해당 조직이나 사람에 대한 기업의 무한한 신뢰는 매우 중요한 항목이다. 

특히 광의의 UX 디자인을 추진할 경우 성과가 나타나기까지 많은 실패를 겪고 오랜 시간이 걸리기 때문에 

신뢰가 없는 상태에서의 시작은 차라리 시작하지 않느니만 못하다. 

또한 UX 디자인에서 진행되는 다양한 형태의 사용자 조사는 통찰력을 끌어내기 위한 수단이지 

당신을 이해시기키 위한 도구를 찾는 것이 아님을 명심해야 한다. 

조사의 결과가 당신을 이해시키기 위한 수단으로 전락하는 순간 

디자이너의 통찰력은 사라지게 되고 기업은 원하는 결과는 얻기 어려울 것이다.




  • 2012년 1월 18일자 B6면 / 기업명은 익명성을 위하여 이니셜로 처리했음.
  • 사회통념상 구분하여 사용하고 있는 ‘기획’과 ‘디자인’ 이라는 용어는 ‘UX 디자인’의 의미를 혼란스럽게 하는 가장 큰 원인이 되기도 한다. 이러한 구분에는 ‘디자인’을 시각적인 결과물을 만드는 활동 또는 그 활동으로 인한 결과물’로 보는 아주 오래된 고정 관념이 자리하기 때문이다. 하지만 ‘UX 디자인’에서의 디자인은 ‘기획’에 더 가까운 의미를 가지고 있다.
  • 번역으로 인한 왜곡을 방지하고자 영어를 그대로 사용함.
  • 원문에는 human-centred design으로 돼 있으나 편의상 user-centered design으로 사용함.
  • ISO 9241-210은 ISO 13407을 2010년에 개정한 문서로 UX의 중요성을 보다 강조한 측면이 있다.
  • 이러한 의미에는 UI 디자인을 UX 디자인을 구현하는 활동으로 간주할 수 있다.
  • 세계적 경영학자인 토론토대의 로저 마틴(Roger Martin)에 따르면, 둘 중 하나를 선택하면 나머지 하나는 포기해야 하는 양자택일적 사고를 버리고 두 대안의 장점을 통합해 새로운 대안을 창조해야 새로운 차이를 만들 수 있다. 그는 이를 ‘디자인 사고’라고 했다. 또한 어떤 분야에서든지 모든 가치 있는 혁신은 동일한 경로를 거치는데 그 경로는 ‘직관’과 ‘분석’이 통합된 절차라는 점을 강조했다.


hci_01_web_09_special_3.pdf




Adobe MAKE IT 

EVERYWHERE 2016 TOUR




지난 7월 6일  그랜드 인터컨티넨탈 서울 파르나스 5층에서 진행된 

ADOBE MAKE IT TOUR 컨퍼런스를 다녀오고는 게으름에 이제서야 포스팅을 합니다.

지금까지 ADOBE에서 진행한 오프라인 행사 중엔 꽤 고가의 금액을 지불해야 했던 행사로 

인당 150000원 정도였는데 마침 조기 등록 할인 기간에 등록을 해서 30000원 할인된 금액으로 참여할 수 있었습니다.

(회사 복지 포인트가 남아있다면 복지 포인트로 했어도 됐겠지만, 복지 포인트는 이미 다 써버렸다는.....)



어찌됐건 여차저차 행사 당일은 연차를 쓰고 출근하는 마음으로 

당일 아침 일찍 준비하고 삼성역으로 향하여 도착한 행사장 입구입니다. 고급지다아~~





주요 발표자와 아젠다 




동아 IT 기사 원문 링크 http://it.donga.com/24578/





이 날 행사전 미리 MAK IT 을 주제로 자유로운 그래픽 작품들을 공모하고 

현장 투표를 진행하여 경품을 주는 코너가 있었는데 작품들이 전시되어 있었습니다.



생각보다 많지 않은 작품들이 전시 되어 있어서 급하게라도 작품 올려볼껄 하는 후회가 듭니다.

작품들이 멋지네요~







ADOBE 대표 환영사 

에릭 최







CHALLENGE & CHANGE

창의력으로 극복하라! 

박웅현 크리에이티브 대표, TBWA



바로 시작된 박웅현 크리에이티브 대표님의 세션입니다.


http://people.search.naver.com/search.naver?where=nexearch&query=%EB%B0%95%EC%9B%85%ED%98%84&sm=tab_etc&ie=utf8&key=PeopleService&os=135712



개인적으로 가장 와닿았던 세션입니다.

구상과 창조 사이의 그림자란 키워드로 거의 30년간의 경험속에서 

창의력과 발상에 대한 고찰을 깔끔하게 강연해주셨습니다.









대표님 참 인상이 좋으시네요~ 개인적으로 대표님 책도 읽어보고 싶습니다.





여러 키워드 중 일상 시선 사소함에 대하여.. 

아이디어는 일상의 사소하고 세심한 시선에서 시작되는 것! 

아이디어는 이 사소한 일상들에서 온 씨앗일 뿐



"아이디어는 초기에 너무 연약해서 

조심히 다루지 않으면 죽는다." 



맞습니다. 아이디어는 어린 새싹 같은 것이죠.

실제로 우리는 아주 작은 관찰과 세심함, 

소소한 아이디어로 시작된 상품이나 서비스들을 많이 보고 사용하고 있습니다. 

다만 우리들이 그것들이 일상에 대한 혹은 사람에 대한 

아주 세심한 관찰과 애정에서 온 것이라는 것을 미처 생각하지 못하고 있을 뿐입니다. 

디자인, 특히 제가 주로 하는 UI/UX 라는 것은 

이런 사람에 대한 관찰과 애정 관심이 필요한 작업입니다. 

그리고, 이런 애정과 관심에서 오는 작은 아이디어들을 연구하고 키워내어 

조금더 편리한 서비스를 제공해야 하는 분야이기도 하죠. 

작업이 진행되는 과정에서 많은 아이디어, 의견들이 제대로 키워지지 못하고 묻혀 버리는 경우들이 많습니다.

잠깐 지나가는 말로 흘려들을 수도 있는 것들에 대한 관심과 

구분하여 잘 키워내는 창의와 

이것을 실제화하는 실행력.

이것이 발상입니다.






'창의력    발상'


'발상에 창의력은 꼭 필요하지만 창의가 곧 발상이 될 수는 없다.'


창의력과 대담한 시도, 집요함과 고집, 이것이 갖추어진 돈키호테 정신을 모티브로 

시대의 관념과 고정관념을 과감히 탈피한 뿌리깊은 나무,

세종대왕의 한글, 

병균으로 병균을 이길 발상을 한 제너 

등 여러 예를 들어 하나하나 짧막한 애니를 넣은 유쾌한 발표 자료가 인상깊었습니다.



직접 쓰신 창의성에 대한 글입니다.


마지막으로 대표님이 하신 말씀 또한 아주 와닿네요 



'윗사람은 어처구니 없고, 

아랫사람은 상식적이어야 한다.'



일을 좀 해보신 분들은 공감하실 겁니다.

윗사람은 ( 예를 들자면 시니어급들이시죠 ) 

이미 노하우를 익힌 윗사람들은 자신들의 노하우를 바탕으로 어처구니가 없어야 합니다.

변화에 민감하고 빠르게 포인트를 캐치하여 실행할 수 있는 과감함이 있어야 합니다.


아랫사람은 ( 주니어급들이십니다. ) 어처구니 없이 비상식적이면 자칫하면 큰 사고가 될 수도 있죠. 

아직 배울 것이 많은 아랫사람은 윗사람에게서 노하우들을 배우면 됩니다.

'실패가 패배가 되는 사회'에 살고 있는 우리들의

놀라움의 씨앗은 어처구니 없는 생각들에 있고 

이 씨앗들이 형태를 가지기 위해서는 관심과 사랑이 필요합니다.



인문학으로 광고하다
국내도서
저자 : 박웅현,강창래
출판 : 알마 2009.08.20
상세보기








Creative Cloud New Feature

강진호 상무, 어도비



다음으론 어도비사의 강진호 상무님이 크리에이티브 클라우드를 이용하여 

얼마나 업무시간을 단축할 수 있고 얼마나 효율성이 좋아지는지에 대해 설명하시는 세션이었습니다.

실제로 상당히 커뮤니케이션에 도움이 되고 업무시간도 단축되고 유용할 듯 하지만 

보안이 강한 게임 회사 시스템이 변하지 않으면 모든 작업자들이 함께 공유하고 업무에 사용하기까지는 좀 

개인적으로는 쓸만합니다. 









점심시간입니다. 시작될 때 들어오는 입구에 커피도 준비 되어 있더니.

점심 도시락 퀄리티가 ~~ 

전복과 함박 스테이크 통새우 명란젓 추릅 

맛납니다~~



후다닥 점심을 먹고 좀 둘러봅니다.

너무 너무 갖고 싶은 와콤사의 씬티크 컴페니언이 전시되어있습니다.

무게가 얼마나 되는지 듣던데로 발열이 심한지 한번 체크해봅니다.

음.. 전시 되어 있는거로는 모르겠네요;; 역시 써봐야 ;;;




짧은 쉬는시간 이후 바로 이어지는 세션 

어도비사의 김현지 과장님의 새로운 기능 소개들이 있었습니다.

이건 따로 블로깅 하도록 하죠 








우리 마음속의 자전거

남궁유 크리에이티브 디렉터, JTBC


감성 터지는 제목 그대로 감성 터지는 강연이었습니다.






Brand Identity + Contents => Messege


새로 생긴 케이블 방속국 JTBC 만의 브랜드 아이덴티티를 메세지를 담는 것에 초점을 맞춰 

화려함과 기술적인 부분을 넘어 진심을 담은 메세지를 전하자 

담백하고 솔직한 메세지로 감동을 주고 감성을 자극하자

그것을 JTBC의 브랜드 아이덴티티로 만들자. 

다채롭게 언제 어디나 녹아내릴수 있는 변화 무쌍한 디자인과 

짧지만 감성을 자극하는 동영상 제작으로 풀어낸 사례들을 강연해주셨습니다.

위 사진은 세월호 사건 이후 JTBC 에서 내보낸 동영상입니다.









What's New in Web & UX

홍성원 이사, 어도비



어보비사의 홍성원 이사님이 UX/UI 작업이 편리한 ADOBE XD에 대해 소개해주십니다.

상당히 미인이시군요

하반기에 출시된다고 하는데 꼭 써봐야겠습니다.

(모든 디바이스 호환 자바스크립트 CSS 자동생성)








업계 최고의 디렉터 

3인이 제시하는 UI/UX의 미래

황병삼 대표, D.FY

손성일 대표, RegularBold

변사범 이사, PlusX




아래 세분이 UI/UX의 미래에 대한 알찬 강연을 차례대로 해주셨습니다.











개인적으로는 이 분 황병삼 대표님의 강연 부분이 너무 맘에 들었는데요.

대표님 본인도 굉장히 위트 있으시고 결단력 있으신 분으로 보이고,

강연 내용도 유익했습니다.


DOT + LINE + COLOR


최근 제가 고민하는 부분입니다. 

도트 라인 컬러 세가지 디자인의 가장 최소단위 가장 기초가 되는 이것들을 아주 잘 다룰수 있으면 

어떤 화려한 데코도 필요없다.라는 생각으로 시작되어 매 작업시 고민중이지요.


황병삼 대표님의 마무리 말씀이 인상깊은데 


"결국 UI/UX라는 것은 사람에 대한 이해, 사람을 깨닳아 가는 것이다."







찰나의 힘

사진과 포토샵의 적절한 외줄타기

오중석 포토그래퍼



끝으로 유명하신 분이죠 오중석 포토그래퍼님의 강연

이런 강연이 익숙하지 않으신지 꽤나 두서없이 사진 소개만 주르륵 나열한듯 했지만 

결국 전하고자 하시는 메세지는



" 무슨 일을 하던 '장인'이 되어야 한다.

같은 작업이지만 집요함과 끈임없는 도전과 연구와 노력이 장인을 만든다.

포토샵 합성이 없었을 시절 필름 50장을 찍어 은을 벗겨내어 이어붙여 사진을 완성하는 장 클로드처럼.."


한 분야에서 십년을 일하면 누구든 장인이 되어야 합니다.

제가 항상 하는 생각이기도 하죠.





발표자료 다운로드

http://www.eventlive.kr/adobemakeit/adobemakeit_thanks_edm.html



 

 

The Principles of UX Choreography

UX 연출의 원칙

출처:http://story.pxd.co.kr/1097

 

 

 

 

 

디즈니와 UX의 교차점,

그리고 미키마우스 그리는 방법을 배우는 것이

당신의 디자인 접근 방식을 변화시킬 것이다.

 

 

  최근 나는 디즈니 애니메이터로서 전설적인 Glen KeaneSXSW(South by Southwest: 영화와 음악 페스티벌)에서 대담을 나누었다. 이 글은 토론 중에 나눈 이야기를 정리한 것이다.

 

 

------------------------------------------------------------------------------------------------------------- 

 

 

나는 UX 디자이너가 되기 전에 타이틀 시퀀스 디자이너가 되고 싶었다. 카네기 멜런 재학 시절 ‘Time, Motion, Communication’이라는 댄 보야르스키 교수의 수업을 들었는데, 그 수업은 타이포그래피, 리듬, 색상, 움직임에 대한 강의였다. 댄 교수는 화면상의 모든 요소를 무대 위의 배우로 묘사하곤 했다.

 

 

"여러분은 각 배우의 등장, 연기, 그리고 퇴장을

감독할 책임이 있습니다."

   

 

우리는 끝없이 그 캐릭터가 왜 그 곳에 있으지, 어떤 역할을 하는지에 대한 근거를 마련하기 위해 장면들을 다시 돌려보곤 했다. 시간과 움직임 (time and motion)에 대해 알게 되면서 나에게는 많은 변화가 생겼는데, 시간과 움직임을 통해 내가 전달하려는 감정과 관객들이 나의 메시지를 해석하는 방법에 대한 미세한 조절이 가능하다는 것을 깨달았기 때문이다. 나는 종종 타이틀 시퀀스에서 영감을 받았다. 30초에서 3분 정도의 길이로 영화 전체의 톤을 설정하고 앞으로 벌어질 사건을 예시하는 타이틀 시퀀스의 매력에 푹 빠져있었던 것이다.

 

R/GA(뉴욕에 본사를 둔 광고 에이전시)UX 디자이너로 취업하게 된 것은 정말 뜻밖의 행운이었다. 나는 R/GA사가 타이틀 시퀀스 디자인을 했던 사실을 알고 있었고 - 그들이 그때까지 하고 있는지는 몰랐다. - 그곳에서 일하고 싶다고 생각했다. 나는 Visual Design 분야로 지원했지만 UX 파트로 채용되었고, "와이어프레임이 대체 뭐지?!" 하며 입사 첫날을 시작했다.

 

몇 년이 지나는 동안 나는 수백 장의 와이어프레임을 그렸고, 어떻게 요소들이 작동하고 서로 들어맞는지를 묘사하는 수십만 개의 설명 구를 작성했다.

 

예를 들면 : 사용자가 메뉴 아이콘을 탭 하면, 패널은 페이지 상단에서부터 아래로 슬라이드 된다. 사용자가 미리 보기 이미지를 클릭하면 동영상이 전체 화면으로 확대된다. 같은 것들 말이다.

 

그런데 갑자기, 우리가 곤궁한 상황에 갇힌 채 디자인하고 있고 거기에는 거대한 무언가가 빠져있다는 생각이 들기 시작했다. 홈페이지 혹은 제품 설명 페이지나 칼럼 같은 정적인 디자인을 결과물로 가져가면서, 우리는 다만 어떠한 흐름으로 디자인이 연결되는지만 설명했을 뿐, 그 사이사이에 어떠한 일이 일어날지는 전혀 보여주지 않았다. ‘설명하는 것만으로는 충분한 맥락을 전달할 수 없었다: 우리는 그것을 보여주어야 했다.

 

와이어프레임을 그리면 그릴수록 모션 디자인에 대해 배웠던 내용이 UX와 비주얼 디자이너라는 직무에 전적으로 연관되어 있다는 생각이 들기 시작했다. 내가 매 순간 접하는 모든 것들을 더욱 자세히 관찰하면서, 모션 디자인을 세심하게 다듬어낸 것들이 자연스럽고 유쾌하며 직관적인 경험을 선사한다는 사실을 깨달았다.

 

 

Disney & UX

     

모션에 대한 이야기는 디즈니(Disney)로부터 시작해야 할 것이다. 디즈니는 애니메이션의 12원칙을 개발했는데, 이것은 사실적인 움직임과 감정의 몰입을 어떻게 그려낼 수 있는지를 설명하고 있다는 점에서 굉장히 중요하다.

 

디즈니는 사물이 어떻게 움직이고 실제로 어떻게 행동하는지에 대한 깊은 이해가 있었다. 그들은 관객이 스크린에서 어떤 대상을 볼 때 자연스러운 움직임을 기대한다는 것을 알고 있었고, 관객을 사로잡기 위해서는 감정의 몰입이 필요하다는 것 또한 알고 있었다. 이것은 디즈니의 초창기 애니메이터들이 관객의 마음을 사로잡고, 사실적이고 믿을만한 캐릭터가 등장하는 장편 애니메이션을 만들 수 있었던 이유였다. 극한 상황을 해소하는 사실감 있는 움직임, 감정의 몰입... 그렇게 이 모든 것들이 시작하게 되었다.

 

 

 

 

UX 연출은 어떻게(how)와 언제 그리고 왜(when and why)의 결합입니다. - 모션을 적용하는 기술과 청중을 사로잡는 방법을 UX의 전반적인 부분에 녹여내면, 당신은 사용자를 양방향 대화(two-way dialogue)에 참여시킬 수 있게 됩니다.

   

 

 

UX 연출의 5가지 원칙

 

먼저 가장 염두에 둘 것은 UXVisual 디자이너로서의 우리 역할이 단지 요소에 기능을 붙이고 정답을 따르는 것만은 아니라는 점이다. 우리는 동시에 사용자 경험을 더 즐겁게 만들기 위해, 그리고 무엇보다도 이런 연속적인 경험 속에 어떤 스토리를 전달하기 위해 노력하고 있다.

 

나는 모션 디자인이 어떻게 디지털과 기술에 적용되고 있는지를 점점 주의 깊게 살펴보면서 일정한 패턴을 파악하게 됐고 이를 바탕으로 다음의 5가지 원칙을 마련해냈다. 5가지 원칙은 UX에서 가장 중요한 커뮤니케이션 포인트를 짚어주고, 서로 다른 상태의 간극을 메우며, 전반적으로 더욱 세련된 경험을 전달해줄 수 있을 것이다. 이러한 디테일을 제대로 잡아낸다면, 제품에 대한 사람들의 인식과 신뢰를 쌓을 수 있을 뿐 아니라, 더욱 긍정적이고 즐거운 경험을 선사해줄 수 있을 것이다.

 

 

피드백 Feedback

 

피드백은 사용자와의 상호작용이 성공적이었는지의 여부와

그 이유를 설명하는 데에 도움을 준다.

 

피드백은 무언가가 잘 되거나 잘못된 상태, 로드 중인 상태, 혹은 어떤 과정이 진행 중인 상태, 아니면 단순히 선택해야 하는 상태를 보여준다. 피드백을 통해 사용자와의 신뢰를 구축할 수 있다는 점도 물론 중요하지만, 그저 피드백을 보여주는 것만으로도 사용자는 굉장히 만족감을 느끼고 즐거워한다! 게다가 피드백에 촉각적인 요소까지 가미하면, 사용자는 유리 표면을 터치했다는 사실을 잊고, 화면상에 실재하는 요소와 상호작용하고 있다는 기분을 느낄 수 있다. 무언가가 우리가 한 동작에 반응하는 것은 기분 좋은 일이다. 피드백은 사용자에게 명백하게느껴질 수 있도록 디자인하는 것이 중요하다. 또한, 하나의 동작에 여러 계층의 요소가 함께 반응할 때 한층 효과적이다. 

 

 

그럼, 디즈니로부터 배울 수 있는 것은 무엇일까? 과장(Exaggeration)의 원칙이다.

 

Glen은 과장이란 단순히 보이는 것이 아니라 느껴지는 것이라고 설명한다. 종종 우리는 캐릭터가 큰 동작으로 확실하게 반응하는 것을 볼 수 있다.

   

 

미녀와 야수 애니메이션 중 야수가 실망하고 놀라는 장면

   

 

Glen은 미녀와 야수의 다음 장면을 예로 들었다. Belle(여주인공)이 저녁 식사에 가지 않겠다고 말하자 야수가 실망하는 장면에서 야수의 얼굴은 쭉 늘어나고 두 눈은 놀란 듯 커진다. 그 후 그의 얼굴이 다시 아래로 찌푸려지며 눈썹은 화난 듯 보인다. 이 과정은 너무나 순식간에 벌어지기 때문에 관객은 무슨 일이 일어났는지를 상세하게 알아채지는 못하지만, 결과적으로 명백하게 야수가 충격을 받은 것 같은 느낌을 받는다.

 

 

 

 

피드백의 예시. iOS 틀린 비밀번호 입력 시 흔들리는 것. 단순한 흔들림이지만, 우리가 실생활에서 서로 주고받는 피드백과 직접 연관되어 있다. Dots(게임) : 단순하지만, 정말 기분 좋은 모션이다. 많은 요소들이 한꺼번에 동작하고 있다. Yahoo News : 각각의 원이 하나씩 채워지고, 숫자가 카운트되고, 로딩이 끝나면 그 대가는 풀 스크린으로 꽉 찬 화면이다. Beats : 장르의 원이 탭 할 때 반응하고, 프로그레스 로딩바가 보인다. (PS - capptivate.co 사이트에서 좋은 예시들을 체크해보길 바란다)

 

 

피드포워드 feed forward

 

   

피드포워드(Feed Forward) : 일종의 힌트이다.

 

시각적 어포던스(Visual Affordance)로 사용자에게 어떤 상호작용이 가능한지, 무엇을 기대할 수 있는지 암시를 줌으로써, 각각의 요소가 어떻게 동작하고 맞아들어가는지 이해할 수 있게 도와주는 것이다. 피드포워드는 사용자들을 올바른 순서로 안내하여 덜 혼란스럽고 더 성공적으로 목적을 달성할 수 있게 도와준다. 앞으로 어떤 일이 벌어질 것인지, 무엇을 해야 할지 대비할 수 있도록, “여기를 봐주세요!”, “여기로 끌어다 놓으세요.”, 혹은 조금만 더 당겨주세요.” 같은 힌트를 주는 것이다. 이러한 힌트는 대부분 사소하기 때문에 사람들은 도움을 준 어떤 힌트가 있었다는 사실조차도 눈치채지 못할 때가 많다. 미세하지만, 강력하다! 피드포워드가 제대로 적용되었을 때 그 효과는 굉장할 수 있다.

 

디즈니의 기대 원칙 (Principle of Anticipation)은 이와 비슷한 목적이 있다 : 앞으로 일어날 일에 관객을 준비시키는 것.

 

 

 

미키의 벌어진 손은, 앞으로 손을 뻗어 공을 잡는 다음 액션에 대한 힌트가 된다

 

이 원칙을 설명하기 위해 Glen은 미키가 테이블 건너편에 있는 공을 집으려는 아주 간단한 장면을 예로 들었다.

 

첫 장면에서 미키의 손은 몸 가까이에 있고 눈은 테이블 건너편의 공을 향해 있다. 다음 장면에서 미키의 손은 이미 공 위에 얹혀있다. 이 두 장면이면 충분할 것 같다, 그렇지 않은가?

 

문제는, 여기에 관객이 누릴 수 있는 그 어떤 재미요소도 찾아볼 수 없다는 점이다. 관객이 미처 인식하기도 전에 한 동작이 끝나버렸다. 이 장면을 그린 당신에게는 모든 것이 분명했겠지만, 관객은 어떤 일이 곧 벌어질 것이라는 데에 준비되어있지 않았을 것이다.

 

관객의 기대감을 형성하기 위해서, 미키의 손이 바깥으로 벌어지는 몇 개의 프레임을 더 할애한다면, 테이블을 가로질러 손을 뻗는 것은 어떤 일이 곧 벌어질 것이라는 암시로 작용할 수 있다.

 

관객은 그저 반응할 뿐이지,

  결코 조바심을 내지 않습니다.

 

   

 

기대 원칙의 또 다른 예로 GlenDuet 애니메이션에서 남자 주인공이 나무를 기어 내려가는 장면을 보여주었다. 처음에 그는 남자 주인공이 단순히 폴짝 뛰어 내려가게 했다. 하지만 그 동작이 너무 순식간에 벌어져서 관객은 그 장면을 놓쳐버렸다.

 

당신은 결코 관객을 뒤에 놓고 가길 바라지는 않겠죠.” 하고 그는 말했다. Glen은 이 장면을 다시 그렸는데, 이번에는 남자주인공이 먼저 Mia를 향해 뒤돌아본 후, 다시 상체를 돌려 나무 밑으로 내려가게 했다. 이 작은 힌트 덕분에 관객은 남자 주인공이 이동하는 곳으로 자연스럽게 뒤따를 수 있었다.

 

 

 

 

Duet 애니메이션 중 Mia의 장면

 

애니메이션 Duet에는 Mia가 연못으로 뛰어들어 이리저리 수영하다가 물 밖으로 나와 텀블링을 하는 아름다운 장면이 있다.

 

Glen은 그 장면에 있는 자석 같은 힘Mia의 동작에 반응하고 다음 동작으로 그녀를 밀어내고 있다고 말한다.

 

예를 들면, 미아가 물에 처음 닿을 때, 거품이 그녀 주변으로 폭발하듯 생성된다. “어떤 커다란 충돌이나 영향력 없이 장면을 바꿔버릴 수는 없습니다.” 미아 주변에 생긴 거품들은 미아가 어디에 있었는지를 말해주고, 그 후 미아 주변을 감싸는 물고기들은 그녀가 다음에 어디로 가는지를 알 수 있게 한다. 그것은 미아를 이 장면에서 저 장면으로 쥐어짜 내는 듯한 효과를 가지고 있다. 내가 이 장면을 좋아하는 이유는 이 장면이 상황에 논리를 부여함으로써, 장면들 사이에 연결고리를 생성하고, 그것으로 관객의 주의를 유도하고 있기 때문이다.

 

 

 

 

 

공간 인식의 예시 : Calendar : 날짜가 옆으로 이동하면서 사이사이 공간이 사용자를 편하게 해준다. Stellar : 스토리텔링 앱이라는 테마를 UI에 접목시켜 페이지를 넘기는 효과를 넣었다. VSCO: 버튼이 담긴 트레이가 마치 아래에서 위로 당겨 올라온 듯 움직인다. Nike Making : 카테고리 선택시 풀화면으로 줌 인 된 후, 화면 상단으로 밀려 올라가고, 서브 카테고리가 아래로 떨어지며 쌓인다.

   

사용자 포커스 (User Focus)

   

사용자 포커스는 관객의 시선을 인도하고, 각 단계를 명확하게 설명해준다. 화면 계층 간의 연결을 순간순간 어떻게 제어하느냐의 문제이다. 그 목적이 무엇인가에 따라 알맞은 요소에 강조점을 두어야 한다. 물론 이러한 효과를 주기 위해 여러 가지 요소가 한 번에 동작할 수도 있다. 그 상황에 필요한 하나의 요소가 전면으로 배치되는 동시에 배경의 요소들 역시 함께 반응해야 할 때도 있다. 예를 들면, 포커스 되는 전면의 요소를 더욱 잘 드러내기 위해 배경이 약간 흐려지거나 어두워지는 경우가 있다. 또한, 맥락에 따라 숨겨져 있던 버튼이나 메뉴가 등장하는 것을 경험한 적 있을 것이다. 우리는 특정 메뉴에 항상 접근할 수 있기를 원하고 어딘가에 그 기능이 존재한다는 것을 알지만, 항상 그 버튼이나 메뉴를 보고 있어야 할 이유는 없다. 우리가 호출할 때에만 나타나면 되는 것이다.

 

사용자 포커스User Focus는 목표를 명확하게 만든다.

 

명확함(Clarity)’이라는 요소가 디즈니의 공식 원리는 아니지만, 13번째 요소로 들어간다고 하자. 글렌은 디즈니에 있는 동안 배우게 된 굉장히 중요한 기술이 바로 이것이라고 한다. Eric Larson은 디즈니 애니메이터들에게 절대로 관객을 뒤에 남겨두지 말 것을 강조했다.

 

 

 

 

나는 디즈니에서 그럴듯한 불가능(Plausible impossible)에 대해 수없이 들어왔다.” Glen은 말했다. 우리는 말도 안 되는 미친 듯한 상황도 사람들이 의심하지 않고 믿게 만들 수 있다. 예를 들면, Little Whirlwind(1941)에서, Freddie Moore는 회오리바람에 자꾸 날아가는 바구니를 고정하려 하는 미키를 그린 적이 있다.

 

갑자기 미키가 바지춤에 손을 넣어 거대한 망치를 꺼낸다. 그 망치는 오로지 그 장면에서만 등장했으며 그 장면에서 제일 중요한 물건이었다. 그 장면에서는 망치가 절실히 필요한 제일 중요한 것이었기 때문에, 관객들은 대체 망치가 어디서 나왔고 왜 저기 있는지 전혀 의심하지 않았다.

 

 

'그럴듯한 불가능원칙에 따르면,

세상의 법칙이라는 것도 조금은 깨뜨려도 될 법하다.

 

 

관객이 당신과 함께 있다면, 그들은 행복해할 것입니다. 

만일 당신이 그들을 놓쳐버린다면, 그 누구도 행복하지 않을 겁니다.

 

 

 

 

사용자 포커스의 예시. Pinterest : 상황에 맞는 버튼들이 필요할 때에 나타난다. Paper Notifications : 여러 층의 애니메이션이 시선을 안내한다 - 지구 모양 아이콘이 움직이고, 팝업창이 펼쳐진 후에 제목 영역이 살짝 빛난다. Peek : 시간 선택 영역이 전체 화면이 되고, 선택된 숫자만 다른 숫자에 비해 굉장히 밝다. 선택이 완료된 후에는 해당 숫자가 다시 제자리에 위치한다. Yahoo Weather : 움직이는 것이 제일 먼저 시선을 끈다.

 

 

 

브랜드의 목소리 톤 (Brand Tone of Voice)

 

 

  나는 종종 사람들에게 광고 카피를 다룰 때 처럼 생각해보라고 말한다.

 

 

모든 프로젝트에서 만약 이 브랜드가 말을 할 수 있다면, 무슨 말을 할까?” 라고 생각하듯이, 우리는 만약 이 브랜드가 움직일 수 있다면, 어떻게 움직일까?” 라고 생각해볼 필요가 있다. 엉뚱하거나 기발한가? 빠르고 강력한가? 사용자에게 도움이 되도록 추가된 미세한 움직임인가?

 

당신의 브랜드 목소리 톤이 잘 설정되면 사용자는 짧은 순간 이렇게 말하고 싶은 느낌을 받을 것이다. “ 이 브랜드가 뭘 하려는지 알 것 같아!” 왜냐하면, 그것이 상당히 타당하고 적절해 보일 것이기 때문이다.

 

일상적으로 사용하고 있는 애플리케이션, 사이트, 그리고 여러 가지 경험을 떠올리며, 왜 그것들을 지속적으로 사용하게 되는지 생각해보자. 우리 주변에는 동일한 작업을 똑같이 수행하는 수없이 많은 비슷한 류의 어플리케이션이 있게 마련이다. 그것들 모두 좋은 사용자 경험을 갖고 있다.

 

나날이 일상적으로 사용하게 되는 애플리케이션, 웹사이트, 그리고 여러 가지 경험을 떠올려보자. 우리 주변에는 동일한 작업을 똑같이 수행하는 수없이 많은 애플리케이션이 있음에도 불구하고 왜 특정 상품들을 계속 사용하게 되는걸까. 그것들 모두 좋은 사용자 경험을 선사해 주고 있겠지만, 사람들을 더 사로잡는 무언가가 있다. 아마도 당신을 더 기쁘게 하거나, 무언가를 더 가능하게 하거나, 어떤 것을 더 얻을 수 있을 것 같은, 사용자 경험 그 이상의 것이 있을 것이다. 바로 감성적 호소력이다. ‘호소력은 우리가 마지막으로 참고할 디즈니의 원칙이다. 가장 마법 같은 요소임에도, 설계하기는 가장 어렵다.

 

신기하게도, 호소력이 있는지 없는지는 쉽게 알 수 있지만어떻게 그것을 구현해낼 수 있는지는 알기 힘들어요.

 

  https://www.youtube.com/watch?v=clnrUQkuAg0

 

프레디 무어(Freddie Moore)는 애니메이터로서 디즈니의 룩앤필(Look and feel)을 책임지고 있었다고 Glen은 말했다. 그가 있기 전에 미키 마우스는 단지 에 불과했고, 우리가 오늘날 알고 있는 미키마우스와는 사뭇 달랐다고 한다. 프레디는 미키가 가진 요소들 사이에 관계를 부여하기 시작했다. 프랭크 토마스와 올리 존스턴은 작화가들에게 이렇게 말하곤 했다. “ 모든 라인은 다른 라인과 관계가 있다.” 미키를 그릴 때 모든 것은 하나의 테마를 따르게 된다.

 

먼저 미키의 머리가 될 원을 그린 후, 위를 향하게 코를 그려 머리의 곡선과 이어지게 한다. 미키의 두 눈을 코에 가깝게 그려 연결하고, 눈썹과 입을 그리면 두 뺨이 밀려 올라간다. 이렇게 그려진 미키에는 무언가가 있다. 미키는 관객을 끌어당길 수 있는 어떤 호소력을 가지고 있다. 글렌은 우리가 그리는 모든 캐릭터는 이미 그 이전부터 존재한다는 신념을 갖고 있다. 그것을 제대로 이해하고 나면, 그 캐릭터를 세상 밖으로 끄집어낼 수 있다. 그러한 호소력을 표현할 수 있게 되면, 이 모든 것이 함께 조화를 이루는 아름다운 순간을 경험하게 될 것이다.

 

 

그것이 바로 호소력의 열쇠입니다.

 

요소들의 조화, 완벽한 화음, 아마도 바로 이거야!’ 라고 말하고 싶게 될 겁니다.

 

 

 

 

브랜드 톤의 예시. Snapchat : 엉뚱하다 - 유령은 상징적이 되어서 사람들은 이제 그들이 다음에 무얼 할지 기대를 하게 된다. Flicker : 미세하지만 영리하다 - 누군가의 프로필을 새로고침하면, 플리커를 상징하는 분홍색과 파란색의 원이 회전한다. Nike+ : 어플리케이션 전체가 달리기라는 테마를 담고 있다. Zappos : 사람들은 부활절달걀을 좋아한다. 특히나 그게 망토 입은 고양이라면...  

 

------------------------------------------------------------------------------------------------------------- 

 

 

앞서 살펴본 5가지 원칙에서 어떻게 하면 관객을 사로잡고, 우리의 이야기에 상호작용할 수 있게 할 수 있을지에 대해 살펴보았다. 이 모든 프레임을 연결해 감성적이고 현실적인 경험의 시퀀스를 다듬어내는 것은 여러분의 몫이다. 그 작업은 비어있는 조각을 채워내고, 캐릭터를 정의하는 것에서 시작할 것이다.

 

캐릭터라 함은 단지 화면 속에 있는 것 뿐만이 아니다. - 우리는 인간적인 요소도 다루고 있다. - 메인 캐릭터는 바로 우리의 사용자다

 

영화든, 애플리케이션이든, 웹사이트든 아니면 책이든, 맥락이 어떠하든, 상황, 매체, 환경이 어떠하든, 우리의 목표는 같다. 우리는 어떤 이야기 속에서 캐릭터와 관계 맺고 있으며, 각 캐릭터의 등장, 연기, 퇴장을 감독할 책임이 있다. 우리가 만들어내는 인터페이스는 더 큰 이야기로 나아가기 위한 작은 창문에 불과하다.

 

움직이는 것을 디자인하기란 아마도 새롭고 낯선 일일 수도 있지만, 새로운 문제를 직면하고 어떻게 해결해야 할지 모르는 순간은 절대 낯설지 않을 것이다. Glen은 듀엣을 제작하는 일이 처음에는 얼마나 어려운 과제였는지를 털어놓았다. 그는 지금까지 항상 종이에 그림을 그려왔고 종이를 벗어나면 그 캐릭터는 화면에서 사라지는 것이었다. 그러나 다양한 각도에서 캐릭터의 움직임을 관객이 따라오는 이 인터렉티브한 경험은, 무한한 캔버스를 다뤄야 할 것만 같았다고 한다. 앞서 설명한 원칙들을 항상 염두에 둔다면, 아마도 이것은 앞으로 닥쳐올 어떤 문제를 해결하는 데에 실마리가 되어줄 수도 있을 것이다.

 

   

나는 항상 어떻게 해야 할지 모르는 일을 하면서

어떻게 해야 하는지를 배우고 있다.

 

- Picasso

 

 

 

Glen Keane의 단편, 듀엣, Google’s Spotlight Stories(App)을 위해 만들어진 단편이다. 모토로라 기종에서의 Interactive 버전을 볼 것을 강추한다. 시청자가 정한 캐릭터를 따라 Glen이 그린 무한한 화폭속에서 몰입할 수 있다.

 

  https://www.youtube.com/watch?v=0qnQqXr838E#action=share

 

--

 

  

 

------------------------------------------------------------------------------------------------------------- 

 

   

 

보너스 : UX 연출 제작 뒷이야기, 그리고 디즈니의 전설적인 애니메이터와 어떻게 일할 수 있었는지.

 

작년에 나는 한 가지 목표를 세웠다 : 내가 관심 있던 주제에 대하여 디자인 대담 (Design talk)을 나눌 것. 아주 간단한 것이었다. 모션 디자인은 내가 항상 관심 있어 하던 주제였고, UX와 비주얼 디자이너로서 현재 하고 있는 일과 깊은 연관이 있다는 생각이 들었다. 그래서 작년 여름 R/GA에서 열린 AIGA 멘토 이벤트에 대담을 나눌 자리를 마련했다. 나는 SXSW에 해당 건을 제출했고, 처음에는 별생각 없었지만, 나중에 함께 일할 디즈니 애니메이터를 찾아보라는 조언을 받고 (대체 어디서 찾으려고 했던 걸까?!), 몇 번의 시도 끝에, 행운과, 이런 저런 소개와 스타들을 줄지워 세우고 - 나는 디즈니의 전설적인 애니메이터, Glen Kean을 소개받게 되었다. 글렌은 디즈니에서 38년을 일했고 인어공주, 미녀와 야수, 알라딘 등 우리가 사랑해 마지않는 애니메이션을 작업했었다. 2년 전 그는 디즈니를 떠나서, 디즈니 밖의 세상에는 어떤 것이 있는지, 자신의 애니메이션 기술을 어떤 다른 곳에 접목할 수 있을지 알아보기 시작했다. ( 그의 가장 최근작인 Duet이 포함되어 있는 Google’s Spotlight Stories 에서 그의 작업을 확인해볼 수 있다.) 내가 글렌에게 UX 연출에 관해 이야기했을 때 그는 바로 관심을 보였다(!). 그가 디즈니에 처음 합류했을 당시, ‘9 old man’은 디즈니의 애니메이션 원칙을 물려주었다.

 

언젠가 너가 우리보다 훨씬 큰 일을 해낼 것이다.” 올리 존스톤이 Glen에게 이렇게 말할 때 Glen은 그들에게서 바톤을 넘겨 받은 기분이 들었다고 한다. 그는 이러한 디즈니의 애니메이션 원칙이 UX 같은 분야로 번역될 수 있을지는 상상도 하지 못했고, 이것이 나에게 바톤을 넘겨줄 기회라고 보았다. 그래서 우리는 함께 SXSW에서 환상적인 발표를 해냈던 것이다. 나는 몇 시간이고 Glen이 나에게 전수해준 이야기를 하고 싶지만, 다음에 기회가 또 있을 것이다!

 

 

------------------------------------------------------------------------------------------------------------- 

 

 

영감을 얻을 수 있는 곳

   

 

이 글에 쓰인 많은 예시는 Alli Dryer가 마련해주었다. 좋은 모션의 실제 예시를 아래 Alli가 만든 사이트에서 확인해볼 수 있다.

 

   

http://capptivate.co/

 

   

그 외의 즐겨찾기:

 

http://hoverstat.es/

 

https://instagram.com/userinterfacesio

더 훌륭한 읽을거리:


https://medium.com/@pasql/transitional-interfaces-926eb80d64e3


http://www.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/



디즈니의 원칙에 대해 배우고 뭔가 만들어보기


http://the12principles.tumblr.com/


http://uxinmotion.net/


http://digg.com/2015/12-principles-animation-ollie-johnston-frank-thomas-alan-becker

 

 

 

[디자인/디자인자료] - 디즈니 애니메이션 13법칙

 

 

당신의 자료를 빛나게 만들어 줄

인포그래픽 제작 도구 12가지

 

출처: http://trendw.kr/design/201405/12427.t1m

 

 

 

1. 인사담당자의 시선을 사로잡는 인포그래픽 이력서를 만들 수 있는 Vizualize.Me

 

Vizualize.me는 마우스 클릭 몇 번만으로 나만의 이력서를 만들 수 있는 홈페이지입니다. 취업난이 가중되어 경쟁이 치열해지는 요즘 더욱 유용하게 사용할 수 있는 인포그래픽 제작 도구 중 하나죠. 학력, 경력, 관심사, 수상 내용 등 원하는 항목만 입력하세요. Vizualize.me가 인포그래픽으로 만들어드립니다.

 

 

 

 

 

2. 다양한 시각화 도구가 모여 있는 Piktochart

 

인포그래픽을 만들 때 필요한 다양한 테마와 아이콘, 벡터, 이미지, 차트들을 한눈에 볼 수 있는 사이트, Piktochart를 소개합니다. 아주 쉽게 글자 크기와 폰트, 색깔 지정이 가능하고 완성된 인포그래픽은 html로 바로 내보낼 수 있습니다.

 

 

 

 

 

 

3. 다른 사람들이 만들어 놓은 비쥬얼 인포그래픽 테마를 참고 할 수 있는 Easel.Ly

 

Easel.ly는 여러분의 시각화 자료와 아이디어를 온라인에 생성 및 공유하거나 다른 사람들이 만들어 놓은 ‘vhemes’(visual + themes)이라는 비쥬얼 테마를 사용할 수도 있는 사이트입니다. 다른 사람들이 만들어 놓은 테마를 사용할 수 있기 때문에 더욱 쉽고 빠르게 인포그래픽을 만들 수 있습니다.

 

 

 

 

 

 

 

4. 마케터, 디자이너, 애널리스트들에게 유용한 Visual.Ly

 

 

Visual.ly는 여러분이 올렸던 콘텐츠들을 분석하여 어떤 콘텐츠가 다른 이용자들로부터 많은 공감을 이끌어냈는지 시각화해주는 인포그래픽 사이트입니다. 페이스북, 트위터, 구글 애널러틱스 등 SNS에서 인기 있었던 콘텐츠를 정리해줍니다. 빅데이터에 민감한 마케터, 디자이너, 애널리스트들에게 유용한 사이트이지요.

 

 

 

 

 

5. 데이터를 입력하면 바로 인포그래픽으로 만들어주는 Infogr.Am

 

 

Infogr.am은 30여 개 이상의 차트를 통해 여러분의 데이터를 인포그래픽으로 만들어줍니다. 사이트에 데이터를 입력/수정하면 즉시 인포그래픽이 만들어지고, PNG 이미지나 PDF 파일로 다운로드도 할 수 있습니다. 발표 또는 첨부 파일에 활용할 때 매우 유용하겠지요?

 

 

 

 

 

 

6. IBM에서 제공하는 수만 가지의 시각 자료가 모여있는 Many Eyes

 

 

Many Eyes 는 IBM 그룹에서 ‘데이터를 시각화하는 올바른 방법을 찾는 것은 일종의 예술이다!’라는 신념으로 만든 사이트입니다. 일상생활에 관련된 자료부터 전문 자료까지 다양한 범위의 시각 자료를 볼 수 있고, 쉽게 편집할 수도 있는 사이트입니다.

 

 

 

7. 인포그래픽 발행 이후 효과 측정까지 서비스까지 제공해주는 Venngage

 

 

열심히 콘텐츠를 만들어서 블로그나 홈페이지에 올렸는데 그 자료를 누가 봤는지, 얼마나 많은 사람들에게 도달했는지 알 수 없으면 참 답답하죠? Venngage는 인포그래픽 제작뿐 아니라 배포 이후의 온라인 노출 효과 측정까지 지원해주는 사이트입니다.

 

 

 

 

 

 

 

8. 공유하기 쉬운 인포그래픽을 만드는 ICharts

 

 

열심히 콘텐츠를 만들어서 블로그나 홈페이지에 올렸는데 그 자료를 누가 봤는지, 얼마나 많은 사람들에게 도달했는지 알 수 없으면 참 답답하죠? Venngage는 인포그래픽 제작뿐 아니라 배포 이후의 온라인 노출 효과 측정까지 지원해주는 사이트입니다.

 

 

 

9. 나만의 타임라인을 인포그래픽 형태로 만들어주는 Dipity

 

 

Dipity는 웹상에서 무료로 타임라인을 만들어주는 사이트입니다. 특정 주제에 맞춰 날짜와 시간대별로 연대기를 만들어 온라인으로 볼 수 있습니다. 인터넷의 역사, 유명 인사의 일대기, 특정 단체의 사건 사고 등을 타임라인 형태로 정리할 수 있지요. 기존에 있던 인포그래픽과는 다른 콘텐츠를 만들어보고 싶다면 Dipity를 추천합니다.

 

 

 

 

 

 

 

10. 다양한 형태의 미디어로 타임라인 인포그래픽을 만들 수 있는 Timeline JS

 

 

TimelineJS는 텍스트나 데이터만을 이용한 인포그래픽이 아닌 온라인상에서 볼 수 있는 다양한 그림, 사진, 영상, 그리고 사전의 인용구나 지도, SNS까지 연동하여 인포그래픽을 만들 수 있는 사이트입니다. 초보자도 구글 문서로 스프레드시트를 작성만 하면 타임라인 생성이 가능합니다.

 

 

 

 

 

 

 

11. 지도, 지역 기반의 데이터를 시각화할 수 있는 StatSilk

 

 

StatSilk는 다가오는 선거철에 적극적으로 활용할 수 있는 인포그래픽 사이트입니다. 지역 기반의 데이터나 지도를 시각화할 때에 이용할 수 있기 때문입니다. 여러 가지 형태의 지도, 통계 자료를 정리할 때 아주 좋습니다.

 

 

 

 

 

12. 나의 사진 찍는 습관을 분석해 인포그래픽으로 만들어주는 안드로이드 앱 InFoto Free

 

 

여러분이 하루 중 어느 시간대에 사진 찍는 것을 가장 좋아하는지 보여주는 어플리케이션이 있습니다. 바로 InFoto Free입니다. 이 앱은 나의 사진 앨범, 갤러리에 접근하여 자주 사진 찍는 시간과 장소를 분석해 인포그래픽을 만들어 줍니다. 세계 여러 지역을 돌아다니며 사진 찍은 후 InFoto Free로 인포그래픽을 만들면 정말 뿌듯하겠네요.

 

 

 

 

 

 

+ Recent posts