머티리얼 디자인(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 디자인을 통합해야 하는 이유

출처 : https://blogs.adobe.com/creativedialogue/ko









2016년 6월 업데이트

필자가 UX 디자이너로서 첫 직장생활을 했던 회사에는 제대로 된 UX 디자인 프로세스가 없었습니다. 

일부 프로젝트 관리 지침에 따라 UX 디자인을 워터폴 모델(waterfall model)에 어떻게 통합할지 고민만 하고 있었습니다. 하지만 이제는 많은 것이 변했습니다.

애자일(Agile) 개발 방법론이 최근 몇 년간 점점 더 인기를 얻게 되면서 

필자를 비롯한 대부분 사람들은 더 이상 워터폴 개발 프로세스를 쓰던 시절로 돌아가고 싶어 하지 않습니다. 

그런데도 애자일은 UX 디자인에 대해서만큼은 해결하지 못한 과제를 안고 있습니다.


2% 부족한 애자일과 UX의 궁합

애자일 방법이 적응형 계획, 유연성 및 지속적인 개선이라는 특징 때문에 일반적인 문제 해결 방식과 잘 통할 것 같아서 애자일과 UX의 조합이 순조로울 것으로 생각할 수 있습니다. 

그러나 애자일 방법론은 특정 프레임워크가 아니라 일련의 원칙으로만 정의된다는 점에서 해석의 여지가 다분합니다.

그렇기 때문에 정해진 시간 동안 여러 번 반복되는 구조(일명 스프린트)를 바탕으로 하는 

스크럼(Scrum)이라는 애자일 소프트웨어 개발 프레임워크가 등장하게 된 것입니다. 

스크럼은 규범적인 구조를 도입하여 팀이 애자일(민첩한) 방식으로 사고하게 합니다. 

스크럼 프레임워크와 애자일 방법론을 함께 활용하면 해석의 문제를 해결할 수 있습니다.

관여하는 모든 팀의 기여도를 극대화하기 위해 스크럼은 역할을 정의하여 

모든 팀원이 서로의 역할을 이해할 수 있도록 합니다. 스크럼은 제품 책임자(product owner), 

개발 팀 및 스크럼 마스터(scrum master)를 정의하고 있지만 UX 팀을 비롯한 다른 역할에 대해서는 설명하지 않습니다.


스크럼을 활용한 애자일 개발에서의 UX 역할 정의

UX의 역할이 명확하게 정의되지 않은 점 때문에 많은 조직 내 개발 팀이 선호하는 애자일 방법에 따라 

스크럼을 채택하면서 UX 디자인을 프로세스에 통합하기 위해 고군분투하고 있습니다.

스크럼은 개발 팀을 중심으로 이루어지며, 그 외에 UX를 비롯한 다른 부서의 역할을 개발 활동에

어느 정도 기여하는 것으로만 여깁니다. UX 팀은 개발 팀이 와이어프레임과 사양을 요구할 때 지원해주는 역할 정도로만 수행하게 되는 것입니다.

보다 나은 팀 역학 관계를 위해서는 UX 팀이 개발 팀에 통합되어야 합니다. 그리고 선행적으로 프로토타입을 작성하거나 동일한 스프린트에서 개발자와 동시에 디자인할 때에도 유연하게 수행해야 합니다.


해결책이 안 될 수도 있는 개발 스프린트에서의 선행 작업

최근 UX 팀이 진행 중인 개발 스프린트보다 한두 단계 앞서 작업해야 한다는 주장에 힘이 실리고 있는 것 같습니다. 

UX 작업을 개발 팀의 스프린트 일정과 맞추어야 하는 제품 책임자의 관점에서는 일리가 있는 주장입니다. 

이렇게 하면 UX 검토 시간이 생기고 다음 개발 스프린트를 진행하기 전 

계획 세션에서 간과했던 문제를 세부적으로 조정할 수 있습니다.

그러나 UX 팀을 현재 진행 중인 스프린트보다 선행하게 되면 디자이너는 

현재 실제로 무엇이 개발되고 있는지 파악하지 못하게 됩니다. 

이러한 문제로 인해 스프린트 사이에 작은 워터폴 프로세스가 발생합니다. 

디자인을 먼저 작업한 후 검토하고, 다음 스프린트가 시작되기 전에 승인을 받기 위해 대기해야 하므로 

애자일 사고 방식은 무시되고 프로세스가 다시 워터폴 모델의 모습을 갖추기 시작하는 것입니다.

개발자가 검토 전까지 디자인 프로세스에 참여하지 않으면 사용자의 요구 사항을 이해하지 못하게 될 것이고, 

결국 담당자의 주관적인 믿음만을 반영하여 혼합된 해결책을 실행하게 될 것입니다.

디자인의 초기 단계에서 디자이너가 주인의식을 느끼지 못한다면 “스스로 해낼” 필요성이 부족하기에 

최종 결과에 부정적인 영향을 미칠 수 있습니다. 

예상하지 못한 문제가 발생하는 경우, 

개발 프로세스를 주시하고 리서치 또는 좋은 디자인 작업 방식과 관련된 질문에 대답할 수 있는 

UX 디자이너가 아무도 없다면 담당자가 선호하는 방식에 치우쳐서 임의로 해결하게 될 것입니다.

결국 디자이너가 다음 단계의 작업을 수행하는 동안 전달될 실제 결과물이 

디자인 팀에서 승인한 것과는 다른 것이 될 수도 있는 것입니다. 

또한 검토 단계에서 이러한 문제를 발견하여 수정해야 한다면 대부분의 경우 마감일을 엄수해야 하는 상황에서 

막대한 대가를 치러야 합니다.


현재 진행 중인 개발 스프린트보다 앞서 UX 작업을 수행하는 애자일 팀의 경우 

다음의 문제가 주로 발생합니다.

  • 디자인 팀과 개발 팀 간의 의사소통 부재로 인해 디자인과 실제 결과물 사이에 격차를 초래합니다.
  • 이 접근 방식의 경직성은 스프린트 간에 작은 워터폴 프로세스를 생성합니다. 그리고 프로세스의 민첩한 특성이 혼란과 불만으로 이어지도록 야기합니다.
  • 사용자 경험에 대하여 디자이너와 개발자 간에 공동으로 합의된 주인의식이 없습니다. 개발 팀이 UX 의사 결정의 가치를 인지하지 못한다면 실제 결과물에 부정적인 영향을 미칠 수 있습니다.


UX 팀과 개발 팀의 협업 필요

협업을 위해서는 스크럼 역할을 하는 개발 팀이 UX 디자이너를 같은 위치로 받아들여 동등하게 임해야 합니다. 

개발 작업을 시작하기 전에 전체 솔루션을 디자인하지 못하는 관행은 많은 UX 디자이너에게 어렵게 다가올 수 있지만 민첩한 작업을 위하여 변화에 빠르게 대처하는 역량을 갖추어야 합니다. 

UX를 스프린트에 앞서 완료해야 한다는 생각을 바꿈으로써 개발 프로세스는 다양한 측면에서 향상될 것입니다.

 


통합된 애자일 팀으로 작업 시 얻을 수 있는 이점

  • 작업에 참여하는 모든 구성원이 문제를 이해하여 해결책을 모색할 수 있습니다. 해결책을 함께 모색하므로 팀 전체가 디자인에 대한 주인의식을 공유하게 되면서 변경 사항을 적용하고 실수를 수정하는 데 필요한 전체 시간을 단축할 수 있습니다.
  • 변화하는 요구 사항에 유연하고 빠르게 대처할 수 있어 전체 프로세스를 훨씬 수월하게 수행하고 이해할 수 있습니다. 스프린트 동안 발생한 모든 디자인 문제는 발생 즉시 해결할 수 있으므로 향상된 최종 결과를 얻을 수 있을 뿐만 아니라 스프린트를 일정대로 진행할 수 있습니다.
  • 디자인 문제를 위해 발견한 해답은 오류 발생률이 낮고 더 많은 사용 사례까지 해결해 줍니다. 여러 측면에서 문제를 분석함으로써 팀은 다양한 시나리오에 대처할 수 있고 디자인 문제를 효과적으로 해결할 수 방법을 찾을 수 있습니다.


언제든지 발생할 수 있는 과제

애자일 프로세스는 UX 팀이 개발 팀이 진행하는 현재 스프린트보다 앞서 작업을 진행하거나

현 스프린트에 맞춰 작업을 진행하건 상관없이 많은 과제를 던지고 있습니다. 

디자인 작업과 개발 작업을 완벽하게 수행할 수 있도록 100%를 보장하는 방법은 없습니다. 

공동 작업은 팀의 경험과 신뢰에 달려 있기 때문입니다. 

이러한 맥락에서 디자인을 먼저 수행해야 하건 그렇지 않건 상관없이 서로 밀접하게 협업하고 

최종 결과물에 필요한 이해를 공유하기 위해 노력하는 것은 팀 전원에 달려있습니다.

UX 팀은 사용자, 비즈니스 및 개발 팀을 이어주는 연결 고리 역할을 해야 합니다. 

또한 개발 팀에게 사용자의 요구 사항에 대하여 코치해가며 UX 팀을 지원할 수 있도록 만들어야 합니다. 

이렇게 해야 최종 고객에게 훌륭한 사용자 경험을 제작하여 전달함으로써 얻을 수 있는 가치를 

개발 프로세스에 참여하는 모든 구성원이 이해할 수 있게 됩니다.

 

Project Comet is now Adobe XD. A new experience in user experience.

프로젝트 코멧이라 불리던 새로운 UX 디자인 및 프로토타입 솔루션인 어도비 XD의 프리뷰 버전이 공개되었습니다. 현재 어도비 XD는 맥 OS에서 사용이 가능하며 어도비 ID만 있으면 무료로 다운로드 받을 수 있습니다.

https://creative.adobe.com/products/download/experience-design








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



디자인 정보를 알 수 있는 사이트 




https://uxmag.com/


UX 디자인의 사례, 트렌드  





http://www.uxbooth.com/


인터렉션, 접근성, 비주얼 디자인, 디자인 상품 컨텐츠 





http://www.mockplus.com/blog


디자인 툴, 리소스 정보 




http://www.webdesignerdepot.com/


일주일에 한번씩 인기있는 디자인 컨텐츠 소개 




https://www.smashingmagazine.com/


대량의 컨텐츠 디자이너와 개발자를 위한 종합정보 





 

모바일 게임 최적화의 정석 - 텍스처 압축 편

http://littles.egloos.com/3439290

 

http://littles.egloos.com/3439290

모바일 디바이스들의 메모리 크기가 많이 커졌다고는 하나, 늘어난 해상도 대비 게임이 사용할 수 있는 메모리의 공간은 여전히 늘 부족하다. 또한 사용자들은 최소한의 앱 설치 사이즈를 원하므로, 메모리와 저장공간의 측면에서 텍스처 압축은 필수이다.

요새 웬만한 디바이스의 해상도는 720p 이상이므로 화면 전체를 덮기 위한 1280x720 사이즈 이미지 한장의 24bit 무압축 크기는 2.7MB나 된다. 알파채널이 포함되면 3.6MB나 되니, 이런 이미지 몇장만 로드하면 메모리가 금새 가득찰 것이다.

현재 주요 모바일 디바이스에서 고려 가능한 텍스처 포맷은 다음과 같다.

iOS 기기: 32bits RGBA, 24bits RGB, 16bits RGB(A), 4bits RGBA PVRTC, 2bits RGBA PVRTC2
안드로이드 기기: 32bits RGBA, 24bits RGB, 16bits RGB(A), 4bits RGB ETC1, 4bits RGBA DXT1, PVRTC, ATC, S3TC ...

위에서 나열된 주요 텍스처 포맷들의 특성에 대해 간단히 살펴보자.

16bits RGB(A): 알파채널을 쓰지 않거나 마스킹용으로만(565 혹은 5551) 쓴다면 꽤 괜찮은 품질을 보여준다. 다만, 알파채널이 들어가면(4444) 디더링 때문에 원치 않는 품질을 보게 될 것이다. 32bits 대비 절반의 용량이므로 일단 쓸만하긴 하나, 다른 압축 포맷에 비해 메모리 효율이 낮다.

PVRTC: 픽셀당 알파포함 4bits 이므로 32bits 원본대비 무려 1/8의 압축률을 보여주며, 대체로 품질도 좋다. 다만, 알파채널의 이미지에 부드러운 그라데이션이 있다면 노이즈(block artifact)를 보게 될 것이다. 안드로이드의 경우 극소수의 디바이스만이 지원한다. 픽셀당 2bits인 PVRTC2도 존재하나, 품질이 열악하므로 사용될 경우가 거의 없어 보인다.

ETC1픽셀당 알파없이 4bits로 24bits 원본 대비 1/6의 압축률이며, 대부분의 경우 원본과 차이를 못 느낄 정도로 품질이 좋지만, 알파채널을 지원하지 않는다는 큰 단점이 있다. iOS에서는 지원하지 않으며, 안드로이드 2.2(프로요) 이상의 안드로이드 디바이스는 모두 필수적으로 지원한다.

ATC, DXT ... : 일부 안드로이드 기기들이 지원하기는 하나, 각 디바이스마다 지원여부는 천차만별이다. 심지어 S사의 제품들조차 모두 다른 포맷을 지원한다. 그나마 ATC와 DXT 등의 지원 비율이 높은 것으로 통계가 있었으며, 이들 기기만을 위한 별도의 APK를 배포하는 것도 가능하기는 하다.

위의 사실들을 고려하면, iOS에서는 PVRTC4, 안드로이드에서는 ETC1의 포맷을 선택하는 것이 가장 현실적이다.

두 개의 포맷에 심화하여 구현과 최적화 접근법을 살펴보자.


PVRTC
모든 iOS 기기에서 사용할 수 있는 효율성 높은 압축 포맷이므로, iOS의 경우 가장 적합한 압축 포맷이다.
RGBA의 4개 채널을 픽셀당 4bit로 표현할 수 있으나, 알파 이미지의 형태에 따라 많은 노이즈 보일 수 있다. DXT3/5 등에서 볼 수 있는 것과 유사한 블록화 현상 또는 알파값 경계선 부분에서의 노이즈가 도드라진다.
만약 원본 이미지에서 알파채널이 없거나, 알파의 모든 픽셀값이 255라면 압축에 의한 노이즈가 많이 사라지므로 충분히 높은 품질을 보여준다.
따라서, RGB채널만을 압축한 PVRTC 한 장, 그리고 알파 채널만을 RGB grayscale로 변환 후 압축한 PVRTC(또는 PVRTC2)의 두 장의 텍스처를 함께 사용한다면 꽤 좋은 품질의 RGBA 렌더링을 수행할 수 있다. 이 경우 픽셀당 8bit(4bit*2)를 사용하게 되나, 여전히 32bit 원본보다는 1/4의 압축률을 가지므로 다양한 경우에 활용할 수 있다. 더 나아가서, 알파 채널의 텍스처에 대해서만 절반 해상도로 줄인다면 RGBA 픽셀당 5bit를 사용하는 셈이 된다. 대부분의 경우 알파 채널의 해상도는 그다지 높을 필요가 없으므로, 알파채널 해상도 최적화는 매우 유용하다.
그러나 PVRTC 압축을 사용하기 위해서는 텍스처의 해상도가 2의 지수승(Power-Of-Two) 정사각형이어야 한다는 제약이 있으므로 그래픽 리소스 제작 당시부터 이 점을 고려해야만 한다는 부담이 있다. 물론 리소스 빌드 과정을 만들어서 자동 스케일링을 할수도 있으나, 아트 원본의 디테일이 손상되거나 메모리 용량이 낭비되는 것을 피할 수 없을 것이다. 만약 원본 이미지가 텍스처 아틀라스의 형태라면, 다수의 원본 이미지로부터 스프라이트들을 추출하여 하나의 POT 아틀라스 텍스처로 압축하는 접근법은 충분히 쓸 만 하다. (아틀라스에 대한 이슈들은 추후에 별도의 글로 작성할 예정)
원본 이미지를 PVRTC 로 변환하는 방법에 대해서는 여기를 참고하면 된다.
게임에서 PVRTC를 로드하는 방법에 대해서는 애플의 PVRTextureLoader 샘플을 참고하면 된다.


ETC1
모든 OpenGL ES 2.0을 지원하는(Froyo 이상) 안드로이드 기기에서 사용할 수 있는 품질 좋은 압축포맷이다. (단, 일부 디바이스에서는 하드웨어적인 디더링 현상이 눈에 띄는 경우가 있다)
RGB 채널만 지원한다는 단점이 있기는 하나, 위의 PVRTC에서 언급한 것과 같은 방식으로 알파채널만 별도의 ETC1으로 압축한다면 픽셀당 8bit의 용량(알파채널 사이즈를 줄이면 5bit)으로 좋은 품질의 RGBA 렌더링이 가능하다.
본래 ETC1 스펙에는 텍스처의 해상도가 4의 배수이어야 한다는 제약만이 있으나, 일부 (유명) 디바이스의 경우 해상도가 2의 지수승이 아닌 경우 렌더링 오류가 나는 경우도 있다. 다행히도 가로세로 크기의 정사각형 제약조건이 있는 디바이스는 아직 본 적이 없다.
원본 이미지를 ETC1으로 변환하는 방법에 대해서는 여기를 참고하면 되며, ETC1을 게임에서 로드하는 방법에 대해서는 java 코드에서 사용할 수 있는 ETC1 클래스, C++에서 직접 로드하는 방법을 참고하면 된다.


기타 참고 사항
  • 위에서 RGBA 원본 텍스처로부터 알파채널만 따로 분리하여 압축하는 기법에 대해 설명하였는데, 본인의 경우 오픈소스 툴인 ImageMagick 을 이용하여 이 과정을 자동화 하였다.
  • 플랫폼에 따라 알파 채널이 별도의 텍스처로 분리되거나 포함되어 있는 경우를 각각 렌더링하기 위해서는 셰이더 코드에서 이를 처리해야 한다. 플랫폼별 매크로 또는 알파 채널 텍스처 파일의 독립 존재여부를 인식하여 셰이더 코드가 다르게 작동하기 위해서는 셰이더 컴파일시에 알파채널 독립 로드 여부에 대한 #define 을 삽입하거나, 셰이더 코드 조각을 선택적으로 삽입함에 의해 이를 구현할 수 있다.
  • 텍스처 포맷과는 관련이 없으나, 안드로이드 기기의 align 되지 않은 apk 내부에 있는 일부 이미지 데이터는 파일 읽기 오류가 날 수 있다. 같은 픽셀값이 다수 반복되는 경우에 발생할 수 있는, 안드로이드 시스템 자체의 버그인 것으로 알려져 있다.

 

TIP> PNG 이미지 최적화 사이트 https://tinypng.com/

 

 

 

 

 

 

 

+ Recent posts