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법칙

 

 

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

UI디테일 용어 3탄



1. 라이트 박스(Light Box) 


팝업이 뜨는 동시에 백그라운드 화면이 어두워지거나 밝아지는데, 이를 '라이트 박스'라고 부릅니다. 라이트 박스 처리된 영역은 컨트롤 할 수 없으며 사용자가 대화 상자에 집중해야 한다는 시각적인 알림을 제공합니다. 일종의 Modal Dialog(혹은 Modal Window)라고 할 수 있습니다. 일반적인 팝업과 다른 점은, 박스를 해제하지 않고는 배경의 요소와 인터랙션 할 수 없다는 점입니다.



 




2. 토스트 팝업(Toast Pop-up)


마치 토스터기에서 토스트가 나오는 모양과 같다고 붙여진 이름입니다. 알림을 위한 팝업의 일종으로, PC에서는 주로 모니터의 우측 하단에서 몇 초간 나타났다가 사라지는 형태를 취하며 모바일의 경우 화면의 중앙에 주로 위치하거나, 최상단에 나오는 경우는 '토스트 노티피케이션(Toast Notification)'이라고 불립니다. 화면 중앙에서 무언가를 알려줄 경우, 작업자의 현재 작업을 너무 많이 방해하게 되고, 그렇다고 PC 하단의 태스크 바나 핸드폰 상단의 노티피케이션 바에서만 표시될 경우 너무 눈에 띄지 않는 단점을 극복하기 위하여 중간적인 형태를 띠고 있는 알림이라 많이 선호되고 있습니다.


 




Stackoverflow에 따르면 이 용어는 10여년 전에 마이크로소프트 메신저 개발자들이 이 기능을 구현하면서 만든 용어라고 합니다. 영문 위키페디아에 등록된 것은 2005년이니까 8년전이고요, 마이크로소프트 개발자 가이드문서, 안드로이드 개발자 가이드 문서등 대부분의 공식 문서에서 이미 사용하고 있는 단어입니다. 국내에는 아직 알아듣는 사람이 거의 없다고 보셔도 됩니다. 다만 영문 검색해 보면 100만건 이상의 문서가 있고요, 마이크로소프트 개발자 가이드, 안드로이드 개발자 가이드 등 거의 모든 개발자 가이드북에서 공식적으로 사용하는 용어이므로, 개발자분들은 아마 다 아실 듯 합니다.
위키페디아: http://en.wikipedia.org/wiki/Toast_(computing)
안드로이드: http://developer.android.com/guide/topics/ui/notifiers/toasts.html
마이크로소프트: http://msdn.microsoft.com/en-us/library/windows/apps/hh779727.aspx 




3. 프로그래스 인디케이터(Progress Indicator)


컨텐츠가 로딩되고 있음을 시각적으로 알리는 컨트롤입니다. 크게 로딩이 완료되는 시기를 예측하기 어려운(Indeterminate), 예측이 가능한(Determinate) 두 타입으로 나눌 수 있습니다. 

트로버(Throbber)


로딩이 완료되는 시기를 예측하기 어려운 경우 제공되는 컨트롤입니다. 개별 애플리케이션이 로딩되는 경우, 주로 해당 소프트웨어나 웹브라우저의 메뉴바 혹은 툴바에 위치하는데 '트로버(Throbber, 고동치는 것)' 또는 '스피닝 휠(Spinning Wheel, 돌아가는 바퀴)'라고 부릅니다. 





아워글래스(Hourglass)


시스템 전체가 로딩 중일 경우 마우스 포인터가 바뀌는 것을 흔히 경험할 수 있습니다. 프로세스가 끝날 때까지 어떤 것도 클릭할 수 없다는 상황을 알립니다. '아워글래스(Hourglass, 1 시간짜리 모래시계)'라고 하며 Mac에서 사용되는 무지개 빛깔의 로딩 컨트롤의 경우 '스피닝 핀휠(Spinning Pinwheel)'이라고도 부릅니다.






프로그래스바(Progress Bar)


반면, 로딩이 완료되는 시기를 예상할 수 있을 때는 아래와 같은 타입의 인디케이터를 제공합니다. 현재까지 진행된 정도와 남은 양을 모두 확인할 수 있습니다.





프로그래스 바는 아래와 같이 로딩이 완료됨을 예측할 수 없을 때도 사용됩니다. 패턴이 애니메이팅되면서 Throbber와 마찬가지로 무엇이 진행되고 있음을 사용자에게 알립니다.





아래 그림처럼 상황에 따라 전환될 수 있으며 로딩이 완료된 후에는 반드시 완료되었음을 시각적으로 표시해야 합니다.





그 외 크롬의 경우 하단 패널에 파이 형태로 다운로드 상태를 표시하거나 Task Bar에 직접 다운로드 상태를 표시하기도 합니다.







4. 레이블(Label) / 플레이스홀더(Placeholder) 


두 컨트롤은 아래 그림에서 보면 알 수 있듯이 사용자에게 무엇을 입력해야 하는 지를 알려주는 역할을 합니다. '레이블(Label)'은 보통 텍스트 필드 좌측에 단어(주로 간략한 명사)로 제공됩니다. '플레이스홀더(Placeholder)'는 텍스트 필드 안에 새겨져 있는 입력 도우미로서 짧은 구문 형식으로 제공되며 '인풋 프롬프트(Input Prompt)'라고도 불립니다. 플레이스홀더는 진입 시에 제공되지만 문자를 입력하는 순간 사라집니다. 하지만 꽤 많은 경우는 첫 글자를 입력하는 순간이 아니라, 마우스로 클릭만 해도 (즉 포커스가 간 순간) 사라지는 형태를 취하고 있는데, 이 경우 사용자가 레이블을 읽지 않고 무심코 클릭하는 경우 무엇을 입력해야 할 지 난감한 상황이 올 수 있으므로 설계 시 고려해야 합니다. 또한 입력했을 때만 지워지고 입력을 지우면 다시 나타나도록 하여 길을 잃지 않도록 끝까지 안내하는 것이 중요합니다. 





HTML5 표준 가이드에 따르면 플레이스홀더 영역에 들어가야 할 문구는 레이블과는 성격이 달라야 한다고 규정하고 있습니다. 위의 그림처럼 레이블이 '무엇'을 입력해야 할 지를 알려준다면 플레이스홀더 자리에는 '어떻게' 입력해야 하는 지를 예시로 보여주는 것과 같습니다. 하지만 요즘에는 플레이스홀더 자리에 힌트 대신 레이블이 대신 들어가는 방식으로 많이 쓰이고 있는데요(아래 화면 참고), 레이블을 위한 공간이 별도로 필요하지 않으므로 효율적인 공간 활용을 위해 널리 사용되고 있습니다.
Input Box 내의 레이블과 HTML5의 플레이스홀더 사용에 관해 명쾌하게 잘 정리한 블로그(Labels in input fields aren't such a good idea by Laura Kalbag)를 참고하세요. 






5. 인트리깅 브랜치 (Intriguing Branches)


기대하지 않은 곳에 이용자가 관심 있어할 만한 키워드를 하이퍼링크 형태로 제공하는 것을 뜻합니다. 대표적인 예로 글의 본문에 특정 단어 혹은 구절에 링크가 있는 경우가 있으며, 좀 더 구조화된 방법으로 글 작성시 첨부하는 태그나 관련 제품 리스트 등을 나열하는 형태로 제공할 수 있는데요. 때론 글에 관련된 정보를 제공하기 위한 목적으로 사용되고, 사실 그보다 더 자주 상업적인 목적으로 사용됩니다. 기본적으로 인트리깅 브랜치는 이용자의 주의를 끌기 위해 존재하며 잘 사용되었을 때는 사이트에 오래 지속하는 효과를 가져다줍니다.적극적으로 링크를 눌러보는 호기심 많은 이용자 외에도 목적을 달성하고 빨리 완료하고자 하는 사람에게는 스쳐 지나갈 수 있게 설계하는 것이 무엇보다 중요합니다. 또한 인트리깅 브랜치로 관심을 끌려면 무엇을 링크할 것인지, 어떻게 관심을 끌 것인지를 전략적으로 생각해야 합니다. 이를 위해서 Target Audience가 무엇을 관심있어하고 그렇지 않은 지 파악하는 것이 중요하다고 할 수 있습니다. 네이밍도 인트리깅 브랜치에서 매우 중요한 역할을 합니다. Designing Interface 서적에서는 'Help'보다는 'Learn More'같은, 보다 친근하고 본능적인 호기심을 자극하는 언어를 사용하기를 권장하고 있습니다. 마지막으로 이용자는 링크를 클릭했다가도 언제든 처음에 보고 있던 페이지로 쉽게 돌아갈 수 있는 것을 원합니다. 브라우저에서는 '뒤로가기 '버튼을 통해 제공하거나 팝업의 경우 '닫기' 버튼을 제공하며 새로운 브라우저 창을 띄워주는 것도 좋은 방법입니다.



 




 

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

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

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



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

UI디테일 용어 2탄



1. 증분 탐색 (Incremental Search) 


Incremental Search로 검색하면 '증분 탐색'이라고 번역이 되어 있는데 '순간 검색'이라고 용어가 통일되어 사용되는 추세입니다. 기본적인 의미는 '자동 완성'과 구별됩니다. 사용자가 특정 단어를 검색하기 위해 검색어를 입력할 때, 검색어를 예상해서 리스트로 제공하는 화면을 '자동 완성'이라고 한다면, 사용자가 목표 검색어를 입력하기 전에 검색어를 예상하고 제공하는 결과 화면은 '순간 검색'입니다. 주요 검색 엔진을 통해 해당 기능을 간단하게 비교해 보도록 하겠습니다.

구글의 Instant Search/Instant Previews


구글의 '순간 검색(Instant Search)'은 검색어를 입력하는 동시에 결과 화면이 나타납니다. 그렇기 때문에 타사의 방식처럼 검색어를 입력한 후 '엔터키' 혹은 '검색' 버튼을 누를 필요가 없습니다. 또한 각 검색 결과 옆에 위치한 Cue를 선택할 시 해당 웹페이지의 미리 보기 화면이 나타나는데 이를 '순간 미리보기(Instant Previews)'라고 합니다. 그리고 이 미리보기 화면에서 링크와 관련된 정보라고 판단되는 부분에 Highlight 표시(붉은색 박스)와 간단한 캡션이 제공됩니다. 구글이 야심차게 내놓은 순간 검색 서비스는 메인 화면을 되도록 빨리 벗어나게 하기 위한 구글의 의도가 잘 반영된 결과물이며, 실제로 검색에 소요되는 시간을 획기적으로 단축하는 데 기여했다고 보여집니다. 




네이버의 정답형 자동 완성


반면 네이버는 '정답형 자동 완성'기능을 제공하고 있습니다. 검색어를 입력했을 때 자동 완성 영역에 추천 검색어 뿐만 아니라 관련 결과값이 함께 나타나도록 만든 것인데요. 자동 완성과 순간 검색의 장점(검색 결과가 실시간으로 제공됨)을 혼합한 하이드리드 형태라고 볼 수 있겠네요. 예를 들어 사용자가 검색 필드에 '부산광역시 지역번호'를 입력할 시 자동 완성 영역에 실제 지역번호인 '051'이 제공됩니다. '페이스북'을 입력하면 바로가기 URL이 리스트에 제공됩니다. 아래 화살표 키를 눌러 포커스를 맞춘 후 Enter 키를 누르니 페이스북 홈으로 바로 이동합니다. 마우스를 사용하지 않고 원하는 경로로 바로 이동할 수 있는 점이 편리하게 느껴졌습니다. 모든 검색어에 적용되는 것은 아니고 현재는 시험적으로 국가, 지역번호, 공공기관, 학교 등과 같은 공적인 기관 혹은 로또 당첨 번호에 우선 적용하고 있다고 합니다.





야후의 Search Direct
 


야후 역시 '서치 다이렉트'라는 검색 서비스를 제공하고 있습니다. 입력하지 않고 커서만 올려놓은 상태에서는 인기 검색어 랭킹이 나오다가(네이버에서는 최근 검색어가 보여지는데 반해), 입력하는 동시에 좌측에는 추천 검색어 영역, 우측에 현재 포커스된 추천 검색어에 대한 추천 결과가 나타납니다. 이 추천 결과에 외부 링크를 나열하기보다는 자체 컨텐츠에서 꺼낸 해답을 직접 제공하는 것이 서비스의 기본 아이디어입니다. 기존 결과 화면에서 일일이 링크를 클릭하여 결과를 얻는 것과는 다르게, 이용자가 원하는 정답을 직관적으로 제공한다는 점에서 타 검색엔진과는 차별화된 시도가 엿보입니다.



그 외에 뮤직 검색의 경우 아티스트, 앨범, 곡 3가지의 카테고리에 따른 추천 검색어를 표시합니다. 아티스트를 입력했지만 기대하지 않았던 관련 앨범 정보와 대표곡명을 함께 알려주기 때문에, 이용자 입장에서 얻는 컨텐츠를 생각한다면 역시 일반적인 자동 완성에서 한 단계 더 나아갔다고 볼 수 있습니다.
도서 검색의 경우 야후의 Search Direct와 유사한 형태로 제공합니다. 내가 찾는 책이 소설인지, 언제 출판되었는지, 가격이 얼마인지, 얼만큼 할인된 가격인지, 구입하면 얼만큼 적립되는지, 그리고 마지막으로 '장바구니 담기'버튼까지 제공되고 있네요.
이렇게 조금씩 다른 형태로 존재하며 각 검색 엔진마다 지향하는 바는 분명 조금씩 다릅니다. 하지만 크게 보았을 때 '얼마나 이용자가 원하는 정보를 빠른 시간 내에 정확히 안내할 것인가'라는 큰 공통된 줄기를 읽을 수 있습니다. 





 

모바일에서의 순간 검색


사실 Incremental Search는 우리가 피처폰(Feature Phone)에서부터 사용했던 방식입니다. 주소록에서 이름을 입력하면 아래에 관련 결과가 리스트로 제공되고 선택하는 일련의 과정은 우리에게 매우 익숙합니다. 스마트폰에서도 웹 검색 뿐만 아니라 애플리케이션에 이런 순간 검색을 기본으로 탑재하고 있습니다. 







2. 컨텍스트 메뉴(Context Menu)


사용자가 현재 선택한 항목에 관한 메뉴를 팝업 형식으로 제공하는 것을 컨텍스트 메뉴라고 합니다.. '팝업 메뉴' 혹은 '바로 가기 메뉴'라고도 하며 보통 마우스 오른쪽 단추를 누를 시 메뉴가 호출됩니다. 단추가 하나 밖에 없는 마우스를 사용하는 경우 키보드 클릭 조합(Mac OS의 Ctrl+Click)을 사용할 수 있습니다. (피츠를 알려주는 퀴즈에서 이 컨텍스트 메뉴에 관해 Magic Pixel을 잘 활용한 예라고 소개한 바 있습니다.)







3.MRU(Most Recently Used) 리스트


사용자가 특정 종류의 행위를 했을 때 마지막 행위를 레지스트리에 기록해두는 것을 말합니다. 예를 들면, 인터넷 상에서 파일 다운로드 시 마지막으로 저장했던 폴더를 기본 폴더로 보여주거나 윈도우 시작 메뉴에서 특정 응용프로그램 리스트를 확장할 시 보여지는 최근 항목을 예로 들 수 있습니다. 







4.어뎁티브 메뉴(Adaptive Menu) 


MRU 리스트 개념을 메뉴에 도입한 방식으로, 사용자의 검색 히스토리나 빈도수가 높은 항목들을 메뉴에 우선적으로 나타나게 하는 것을 말합니다. 위 화면과 같이 자주 쓰는 메뉴만 보여지며 확장 버튼을 눌러 모든 메뉴를 확인할 수 있습니다. MS Office Tool 2000, 2003에서 기본 설정으로 제공되다가 리본 메뉴가 출현하면서 현재는 폐기되었습니다.







5.테어오프 메뉴(Tear-off Menu) 


'떼어내다, 벗기다'의 의미를 가진 테어오프 메뉴는 메뉴 바를 드래그하여 임의의 장소에 배치할 수 있는 메뉴입니다. 혹은 아래의 그림처럼 도구 툴의 가장자리에 있는 Cue를 선택할 시 해당 도구가 Window형식으로 분리됩니다.







6.메가메뉴(Mega Drop-down Menu) 


얼마 전 pxd에서 포스팅한 Global Navigation Bar 디자인에서도 메가 메뉴에 대한 소개한 바가 있듯이, 메가 메뉴란 글로벌 내비게이션 바(GNB)에 위치한 특정 메뉴에 마우스 롤오버 했을 시 나타나는 대형 메뉴를 말합니다. 일반적인 드롭다운 메뉴보다 훨씬 많은 메뉴를 표시할 수 있으며 메가 메뉴 안에서도 상세 분류를 할 수 있습니다. 카테고리를 명확하게 분류하여 메뉴를 찾기 쉽도록 기획해야 하며 주로 쇼핑몰 같은 대형 웹사이트에 적용됩니다.






요즘은 메가 메뉴에 텍스트와 이미지를 혼합하는 방식이 많이 사용되고 있습니다. 확실히 이미지를 적절한 상황에 사용했을 메뉴를 인지하기가 한결 수월하게 느껴집니다. 또한 단순히 메뉴를 나열하는 그치지 않고 표시하는 정보도 유연해지고 있습니다. 위의 그림처럼 BMW 자사의 모델명을 글로벌 내비게이션에 배치하고 메가 메뉴에 해당 모델 시리즈를 소개하고 있습니다. 기존 메뉴와 차별화된 점이 매우 신선했습니다. 그렇다면 메가 메뉴의 몸집이 이렇게 커지는 것이 좋은 일일까요? 메뉴에 마우스를 드래그 하는 동작으로 사용자가 기대하는 것은 그렇게 역할은 아닐 것이라는 생각이 듭니다. 화면을 이상 가린다거나 너무 많은 정보를 표시하려고 한다면 답답하거나 거부감마저 있을 것입니다. 언제까지나 '사용자가 목표 메뉴를 찾아가기 쉽게 구성해야 한다' 기본 목적에 충실해야 한다는 점을 염두해두어야 합니다



7.컨텍스트-센서티브 내비게이션(Context-sensitive Navigation)


특정 상황에서만 제공되는 컨트롤입니다. 위에서 정의한 컨텍스트 메뉴와도 맥락이 유사한데, 팝업 형태가 아닌 다양한 방식으로 사용될 수 있다는 점이 다릅니다. 위의 화면처럼 사진 상단에 있는 메뉴 버튼은 평소에는 나타나지 않다가 마우스 포인터를 해당 사진 영역 안에 옮기는 순간 나타납니다. 리치 인터페이스 디자인 서적에서는 '마우스오버 노출도구' 라고도 정의하였는데 포함되는 개념입니다. 혹은 Gmail에서 삭제, 스팸처리 등의 메뉴는 메일 리스트를 선택(Check)하였을 시에만 제공되는데요, 이렇게 상황에 맞게 그때 그때 나타나는 메뉴를 부르는 용어입니다.





+ Recent posts