2017. 3. 2. 07:50ㆍUI 가벼운 이야기
HCI Korea 2017 학술대회가 2017년 2월 8일부터 10일까지 강원도 하이원리조트에서 개최되었습니다. 저희가 직접 듣고 온 세션 중 몇 가지를 정리하여 제 2편을 공유드립니다.
디지털 미디어 서비스를 위한 컬러 플래닝과 활용_모바일 디자인 사례를 중심으로 - 이현진
작성자: 황보라
본 강연은 색상 선택과 조합에 어려움을 겪는 UX디자이너, 개발자들을 위해 모바일 색상에 대한 기초와 배색 툴을 활용하는 방법으로 구성되었습니다. 타고난 감각 없이도 배색 툴을 통해 어느 정도 윤곽을 잡는 방법과 그 가능성에 대해 알 수 있는 시간이었습니다.
컬러 플래닝을 하기에 앞서, 모바일 앱의 색상 특징에 대해 먼저 알아보았습니다. 모바앨 앱은 화면이 작아 복잡한 색채 계획이 어려우며, 사용된 색채가 브랜드, 서비스 콘텐츠, 기능의 아이덴티티로 작용하는 경우가 많습니다. 또한, 주요 UI 구성 요소의 색채에는 기능적인 고려가 필요하며, 더불어 인터랙션 및 모션 효과들로 인하여 동적인 색채 화면이 구성되기도 합니다. 이미지, UI 구성 요소뿐 아니라 텍스트 또한 색채의 중요한 구성요소입니다.
요즘은 플랫폼에 따라 색채 가이드가 존재하기 때문에, 색상을 선택하는 데 있어 제약사항이 되기도 합니다. 특히 iOS 7 이후의 HIG(Human Interface Guideline) 에서는 색채 제한이 큽니다. (Black / White 배경에 1개의 tint color 권장)
모바일 컬러플래닝은 주조 색, 보조 색, 강조 색의 세 가지 요소를 중점으로 진행됩니다.
주조 색은 background, body에 사용되며, 보조 색은 header, footer, tab, bar에 사용됩니다. 강조 색은 button, control, active state에 사용됩니다. 그레이톤은 text, status bar, passive state에 사용됩니다.
디지털미디어의 색채 디자인은 감각만으로 하는 것이 아니라 플랫폼의 구조와 디자인 패턴에 대한 충분한 이해가 필요합니다. 플랫폼과 디자인 패턴에 대한 이해가 되었다면 여러 가지 컬러 리서치 서비스를 사용하여 대안을 추천받고 선택 및 실험해 보는 과정을 통하여 최종안을 도출할 수 있습니다.
1. 머티리얼 팔레트(materialpalette.com)는 구글 머티리얼 디자인을 바탕으로 직접 색상을 조합해 볼 수 있는 사이트입니다.
2. 팔레톤(paletton.com)은 유사색을 찾아주어 플랫 디자인을 할 때 유용한 사이트입니다.
3. 어도비 쿨러(kuler.adobe.com)는 유사, 단색, 보색, 혼합, 음영 등 다양한 조건으로 색상조합을 찾을 수 있는 사이트입니다.
4. 컬러 헥사(colorhexa.com)는 색상 모델(RGB, HSL, HSV, CMYK)과 css와 html의 컬러코드를 포함한 색상코드 정보를 쉽게 가져오는 툴입니다.
이러한 컬러 리서치 서비스들을 활용하여 손쉽게 다양한 배색을 실험해 볼 수 있었습니다.
색채 계획 방법론을 패턴화한다면, 배색은 AI로 진출할 수 있다고 생각합니다. 가장 감성적으로 이해되었던 분야가 가장 빠르게 인공지능에 자리를 내주게 될지, 그 가능성을 생각해 보게 되는 강연이었습니다.
2030년 자율주행 차 환경에서 운전자 경험 디자인 방향 고찰 - 박기철 (서울대학교 미술대학 디자인학부 대학원)
작성자: 노마리아
2017 HCI 세션 중, 평소 관심이 많던 미래 자동차 경험 디자인의 중요성을 이야기하는 Paper가 있어 공감했던 내용을 소개하고자 합니다.
현실화되어가는 미래 자동차
자율주행 자동차는 영화에서만 가능했던, 어린 시절 과학 상상화로 그려왔던 먼 미래의 모습이었습니다. 하지만 전통적인 자동차 제조업체뿐만 아니라, 구글, 애플 등 IT기업, 통신 인프라 기업이 자율주행 자동차 시장에 뛰어들면서 점점 손에 잡히는 현실이 되어가고 있습니다.
2-3년 전부터 기본적인 자율주행을 할 수 있는 차들이 속속들이 나오면서 미래를 선도하는 “차세대 기술”로 자리 잡았고 삼성, 현대, 네이버 등 우리나라 기업도 발 빠르게 연구개발에 박차를 가하는 것을 많은 기사를 통해 접해왔습니다. 하지만 자율주행 차 연구는 얼마나 안전한 주행이 가능한지에 대한 주행 관점의 기술적 측면, 인포테인먼트 요소적용과 가변적인 실내공간 디자인에 초점을 두고 있어, 사용자 중심의 디자인적 접근을 찾아보기 쉽지 않은 아쉬운 점이 많았습니다.
“2030년 자율주행 차 환경에서 운전자 경험 디자인 방향 고찰” 논문은 자율주행 자동차 시장으로의 진입을 앞둔 2030년, 다양한 사례와 트렌드를 바탕으로 근 미래 자율주행 차를 위한 사용자 중심 연구의 중요성을 이야기 하고 있습니다.
미래 자율 주행차의 진입장벽을 허무는 운전자 경험 디자인
기관마다 조금씩 다르지만 2030년에는 제한적인 자율주행이 가능한 LEVEL 3: Limited Self-Driving Automation (미국 도로교통국, NHTSA 차량 자동화 레벨 규정 표)에 이를 것으로 예측하고, 많은 기업이 2020년에는 자율주행 기술을 완료하겠다고 발표하고 있습니다.
이러한 근 미래는 차량을 소유하는 개념이 공유하는 개념으로 바뀌고, “차량 공유”와 함께 다양한 IT기술을 결합한 “커넥티드 카”로서 자동차의 전통적인 개념이 “커다란 휴대용 컴퓨터”로 전환되는 시점이기도 합니다. 하지만 점점 똑똑해지고 사용자에 따른 개별화가 가능한 서비스를 제공한다고 해도, 사람들은 “미래기술에 대한 막연한 기대와 두려움”을 동시에 품게 되기에 자율주행 차 대중화에 제약이 따를 것으로 예상합니다.
미국 자동차 협회에서 조사한 자료를 보면, 75%의 사람들은 자율주행 차를 신뢰하지 못하고 구매를 주저하는 것으로 나타났고, 볼보가 1만 명을 대상으로 시행한 조사에서는 92%의 응답자가 운전대를 장착한 자율주행 차를 원하는 것으로 나타났습니다. (출처: Volvo’s Future of Driving survey) 이러한 결과는 운전자들이 자율주행 차에 대한 신뢰도가 낮고, 응급상황에서는 직접 차량을 제어하고 싶다는 것을 잘 보여주는 사례입니다. 이 때문에 자율주행 차가 대중화되는 시점에서, 심리적이고 감성적인 가치를 반영한 운전 경험 디자인이 자율주행 차의 신뢰도를 높이고, 진입장벽을 낮추어줄 수 있는 중요한 요소임을 반증한다고 볼 수 있습니다.
4가지의 미래자동차환경에서의 운전자 경험 디자인의 접근방향
자동차 제조업체 및 관련 기업의 선행연구를 기반으로 현재 유추 가능한 미래 자동차 환경은 크게 4가지 키워드로 정리할 수 있습니다.
첫 번째는 “공유 경제”로, 사용자의 차량 공유 니즈가 확대될 것으로 예상합니다. 이미 우버, 구글, 아마존 등이 관련 특허 및 서비스로 시작을 알려왔고, 이미 유럽에서는 리프트 같은 서비스를 통해 자연스러운 흐름으로 인식되고 있습니다. 이러한 트렌드를 바탕으로 작은 가족 단위 부터 지역 커뮤니티까지 소수의 차량을 다수가 공유하게 되는 미래를 예상할 수 있게 되었고, 차량이 개인의 소유에서 나아가 공유되는 개념으로써, 남녀노소를 폭넓게 아우를 수 있는 행동유도 디자인, 유니버설 디자인이 중요한 과제가 되고 있습니다.
두 번째 키워드는 “개인 맞춤화” 서비스로, 사용자를 인식하여 상호 교감할 수 있는 시스템입니다. Honda CARpet Concept 2014를 예로 들면, 사용자의 니즈에 따라 자동차의 실내공간이 유기적으로 변형되는 것을 볼 수 있습니다. 자동차의 실내가 엔터테인트먼트 공간, 업무 공간 등으로 다양해 짐에 따라, 사용자의 필요와 선호에 따라 변형될 수 있는 디자인과 시나리오 발굴이 중요한 요소가 되었습니다. 이는 현재 많은 자동차 관련 전장 부품에 다양하게 적용 및 개발되고 있는 것을 볼 수 있습니다.
세 번째는 “안정감과 신뢰감”입니다. 파괴적 혁신이론에 따르면 사람들은 생소한 신기술이 적용된 제품일수록 수용하는 데에 어려움을 느끼게 됩니다. 특히, 자율주행 차는 사용자의 안전과 직결되어 있고, 신기술이 대거 적용된 제품이기에, 새로운 기술에 대한 사람들의 이해와 더불어 자율주행 차의 두려움을 낮춰줄 필요성이 제기되고 있습니다. (출처: 박범진, 존속적 혁신과 파괴적 혁신, 신한 FSB 연구소 / 2016) 때문에 탑승자가 안정감을 가지고 친근함을 느낄 수 있는 자율주행 차로써, 탑승자 및 운전자의 경험 디자인 연구가 더욱 중요해지고 있습니다.
마지막으로는 전통적인 자동차 구성요소가 “사고 수렴제로”를 바탕으로 변화하고 있습니다. 기존 안전과 관련 있던 안전벨트나 에어백 등과 같은 물리적인 요소의 변화로 중요성이 약해지는 대신에, 가상의 엔진음이나 햅틱 피드백 같은 정성적이고 감성적인 요소가 중요해 지고 있습니다. 이러한 비물리적인 요소까지도 운전자 경험 디자인에 포함됨에 따라서, 사용자에게 미리 주의를 주거나 안전에 대한 정보를 제공하는 방법이 중요한 디자인 요소로 대두하고 있습니다.
글을 마치며, 이와 같은 환경의 변화로 사용자 경험 디자인이 앞으로 성큼 다가온 미래 자동차의 환경에서 제공할 수 있는 가치와 가능성은 무궁무진할 것으로 생각합니다. 사용자의 안전과 생활에 밀접한 운송 수단이기에 기술 중심적인 접근 이외에도 사용자 관점에서 지속적인 신뢰성을 주는 방법과 다양하고 가치 있는 시나리오 발굴의 중요성을 생각해 보는 계기가 되는 세션이었습니다.
HCI 2017 초청강연 / Design at Large : real-world, large scale, and sometimes disruptive
Prof. Scott Klemmer
작성자: 홍성진
디자인을 둘러싼 환경이 이전의 Lab이라는 제한된 ‘어항’에서 이제는 모두가 연결된 커다란 ‘야생’의 환경으로 이동하면서 예전과는 다른 변화를 보입니다. 디자인의 프로토타입 버전부터 런칭하면서 다양한 시도를 통해 사람들이 실제로 어떻게 사용하는지 볼 기회와 더불어, 전 세계의 각기 다른 사람들의 전혀 기대하지 못한 다양한 사용 방식으로 인해 반복적인 테스트의 중요성도 함께 생겼습니다.
이렇듯 큰 스케일에서의 디자인 변화 과정에서 Scott Klemmer는 키노트 세션을 통해 크게 1) 프로토타입의 역할과 중요성, 2) 사용가능한 모든 리소스 활용의 필요성, 3) 다양성에서 오는 빠른 피드백의 중요성에 대해 각각 사례를 통해 이야기했습니다.
큰 스케일에서의 프로토타입의 힘
출처: Burbn App
아주 뛰어난 재능을 가진 사람들이라도 그들의 첫 번째 아이디어가 항상 최고의 아이디어는 아닐 수 있습니다. Scott은 인스타그램의 모태가 되는 Burbn이라는 회사를 언급하면서, 첫번째 아이디어의 실패에서 어떻게 지금의 성공을 이루었는지를 보여주며 프로토타입의 반복적인 실험을 통한 성공 가능성을 소개해주었습니다. 처음부터 완성된 시스템으로 출시된 것이라기보다는 현재 진행형으로 점차 발전하는 우버의 비즈니스 모델도 비슷한 맥락에서 볼 수 있을 것 같습니다.
커뮤니케이션 도구로써의 프로토타입
Schott은 우리가 언어로 말하듯이 디자이너는 프로토타입으로 말한다고 소개하면서, 우리의 생각을 전달할 수 있는 커뮤니케이션의 도구로써 프로토타입의 역할을 언급했습니다. 마이크로소프트사에서 처음으로 마우스를 선보일 때, 버튼은 몇 개로 해야 하는지, 위치는 어디에 달려야 하는지, 모양은 어떤 모양인지 등, 많은 질문이 있었는데, 사진 속 프로토타입들은 디자이너들이 던진 각각의 질문이라고 볼 수 있습니다. 또 다른 예시로 새로운 의학 장비를 개발하기 위한 미팅 중, 디자이너가 즉석에서 풀과 테이프, 빨래 집게로 만든 아주 빠른 프로토타입은 현재 사용 중인 제품과 기능과 형태적으로 별 차이가 없는 것을 볼 수 있습니다. 두 케이스 모두 디자이너의 머릿속에 떠오르는 질문들을 빠르게 구체화해 효율적인 의사소통의 도구로 활용된 것을 볼 수 있었습니다.
사용 가능한 모든 리소스의 활용
출처: Functional Fixation_The Candle Problem
프로토타입을 만들다 보면 다양하고 창의적인 방법들이 있는가 한편, 위험한 경우로 ‘이 문제를 해결하려면 이 방식이 베스트인데 왜 안될까?’ 하고, 문제 해결을 위해 오직 한 가지만 보는 경우가 종종 있는데, 이를 심리학적으로 기능적 고착(Functional fixation)이라고 부릅니다. 프로토타입을 만들면서 다른 가능성을 못 보고 지나간 다양한 사례를 보여주면서 Scott은 디자이너로서 가져야 할 마인드셋으로서, 기존 feature에 함몰되지 않고 주변에 쓸 수 있는 모든 리소스들을 볼 수 있어야 한다고 강조했습니다. 그리고 이를 위해서는 디자인 원칙이 필요하고 이를 효과적으로 세우는 것은, 우리가 아는 심리학 원칙과 효과적으로 연결하는 것이며, 그렇기에 책이나 도서관에서 보내는 시간이 길어 보이지만 오히려 디자인적으로 활용할 수 있는 아이디어가 있기에 더 효과적일 수 있다고 강조했습니다.
다양한 관점의 피드백의 중요성
물리적인 공간에서만 대화한다면, 오직 주변 사람들과만 얘기할 수밖에 없습니다. 하지만 단지 다른 청중들과 대화하는 것만으로도 퍼포먼스를 올릴 수 있는데, Scott은 Design at Large의 관점에서 전세계의 다양성을 끌어들일 수 있는 온라인 플랫폼을 활용한 피드백 시스템을 제안했습니다. 실제로 학생들이 논문 제출 전 온라인에 미리 올려서 동료로부터 피드백을 받을 수 있는 장치를 마련했는데, 학생들 사이의 빠른 피드백을 통해 퍼포먼스가 올라가는 것을 확인할 수 있었다고 합니다. 그리고 컴퓨터가 학습을 통해 좀 더 빨리 피드백을 줄 수 있는 가이드 폼을 만들어줘서, 다른 사람들을 더 잘 도와줄 수 있도록 도와줄 가능성을 보여주었습니다.
더 나은 피드백을 받기 위한 프로토타입의 활용
우리가 주위 동료들에게 작업물에 관해 피드백을 요청할 때, 보통 ‘ㅇㅇ색을 바꾸는 것이 어때?’와 같이 그들의 머릿속에 처음으로 떠오른 것을 받기 쉽습니다. 폰트와 컬러와 같은 Surface feature들은 프로세스의 마지막 단계에서 중요하지만, 초기 단계에서는 이러한 요소가 중요한 것이 아닙니다. 이때, 활용할 수 있는 팁으로, 스케치를 활용하는 방법이 있습니다. 완성된 디자인을 보여주면 미적 요소에 대한 피드백이 주이지만, 스케치를 보여줄 경우, 특히 초기 버전의 스케치를 보여주면 핵심적인 요소에 대한 피드백이 온다고 합니다. 그러므로, 프로세스의 초반 단계에서, 초기 스케치 버전의 프로토타입을 빠르게 보여주는 것이 더 나은 대화를 이끄는 중요한 열쇠가 될 수 있음을 강조했습니다. 또한, 여러 기능을 담고 있는 복잡한 것일수록, 한 번에 보여주지 말고 여러개의 청크로 쪼개서 보여주면 더 많은 피드백을 받을 수 있다고 합니다.
보다 자세한 내용은 Design at Large 슬라이드에서 볼 수 있습니다.
디자인은 예뻐야 하는가? -김봉진(배달의 민족)
작성자: 진예송
평소 '배달의 민족'을 떠올렸을 때 개인적으로 연상되는 단어가 몇 가지 있었습니다. 유머, 자유분방, 젊음, 재치, B급 정서, 키치 함 등등…. 하지만 이런 이미지를 과연 의도한 것이 맞는지, 그 과정은 어떠했는지 좀 더 깊게 알고 싶다는 생각을 했었는데요. 이번 HCI 2017에 우아한 형제들 김봉진 대표님이 키노트 연사라는 소식을 듣고 반가운 마음에 참석하게 되었습니다.
강의 주제는 <디자인은 예뻐야 하는가?>였으며, 김봉진 대표가 지닌 브랜드의 철학에 대한 내용 및 배달의 민족의 브랜딩 스토리를 중점적으로 다루었습니다.
잘 키운 퍼소나, 천만 고객 안 부럽다 - 배달을 시키는 '막내'의 공감을 사자
배달의 민족은 사업 초기부터 브랜딩을 고민했으며, 이를 위해 사용자에 대한 질문을 계속 던졌습니다. 배달 음식은 남녀노소 두루 먹겠지만, 배달을 시키는 사람은 주로 조직의 막내들입니다. 이들은 웹툰과 짤방에 익숙하며, 다른 프로그램은 안 봐도 무한도전은 꼭 챙겨보고 B급 문화에 익숙한 특징을 지니고 있는데요. 배달의 민족은 이처럼 막내들의 라이프스타일을 면밀히 관찰하고 브랜딩에 대한 방향을 잡을 수 있었다고 합니다.
서비스를 사용하는 엔드 유저가 무엇을 궁금해하고 무엇을 좋아하는가의 관점에서 브랜딩에 접근했고 그 답을 기반으로 기업이 고객에게 전하고자 하는 가치를 정의했다는 점이 굉장히 인상적이었습니다. 일반적으로 제가 접해온 브랜딩 스토리에 비해, 브랜딩 구축의 단계에서 사용자를 공감하는 과정을 충분히 거쳤다는 느낌을 받았습니다.
브랜딩=자기다움을 만들어 나가는 것이며, 자기다움이란 의도를 가지고 꾸준히 행동하는 것
브랜딩이란, 자기다움을 만들어 나가는 것이라고 정의합니다. 그리고 자기다움이란, '되고 싶은 모습’을 이루기 위해 의도를 가지고 꾸준히 행동하는 것이라고 정의하는데요. 앞서 이야기한 바와 같이 서비스의 명확한 퍼소나가 정의된 후 서체, 옥외 광고, 제품 등의 결과물을 통해 사용자와의 커뮤니케이션을 시도하면서 자기다움을 꾸준히 쌓아나갑니다.
[서체]
직접 개발한 무료 배포 서체 (위에서부터 한나체, 도현체, 주아체, 연성체)
서체의 모티브가 된 옛날 간판
[잡지]
음식에 대한 공감을 짧은 카피로 표현
[옥외광고]
화제가 되었던 ‘경희야, 넌 먹을 때가 젤 이뻐’ 캠페인 외 옥외 광고
[제품 디자인]
고객 입장에서 아~ 풋~하고 공감할 수 있을만한 멘트 아이디어
브랜딩의 흐름, 정체성(Identity)에서 인성(Persona)으로
위에서 보시는 것처럼 불완전한 서체, 광고 문구에서 '키치함, B급 정서, 유머, 재치’가 느껴집니다.
이는 어떠한 브랜드를 떠올렸을 때 ‘레드'가 떠오르거나, ‘로고'가 강하게 기억에 남거나, '튼튼한 내구성'이 떠오르는 것과 같은 정체성의 식별(Identity)보다는, 브랜드의 인성(=성격/Persona)을 고객에게 심어주고자 하는 의도가 담겨 있습니다. 애플을 떠올릴 때 ‘감각적임, 프로페셔널함, 천재적임’ 같은 단어가 떠오르는 것처럼 말입니다.
산업혁명 시대에는 기능과 성능이 중요했다면, 현대에 와서는 다수의 기업이 고객에게 각인되고자 브랜딩의 중요성을 알고 실천해나갑니다. 그런데 이런 브랜딩의 흐름이 이제는 단순 식별의 역할을 떠나 인성을 어필해야 고객에게 사랑을 받을 수 있는 시대라고 정의합니다.
배달의 민족은 다른 많은 기업이 되고 싶어 하는 브랜드의 인성과는 다른 노선을 선택했습니다. 단지 고객이 원해서만이 아니라, 전략적인 관점에서 보았을 때 B급 문화로 제대로 어필하는 브랜드가 없었기 때문에 선점의 기회를 본 것입니다.
생각해보니 고개가 끄덕여지는, 참으로 이유 있는 선택이었다는 생각이 듭니다. 개인적으로 저만 해도 애플, 나이키 같은 잘 정돈되고 세련된 브랜드 말고도 다른 한쪽으로는 B급 문화를 동시에 소비하고 있는 사람입니다. 하지만 후자를 제대로 한 브랜딩은 많이 보지 못했습니다.
디자이너들에게는 예쁘지 않은 디자인이고, 고객은 낯설어 할 것이라는 편견 때문인 것도 같습니다. 하지만 처음엔 낯설어도 자꾸 보면 익숙해지고 사랑스러워지는 존재가 있듯이, 배달의 민족에서는 브랜딩을 같은 관점에서 바라보았습니다. 처음부터 아름다운 것으로 이길 수 없을 바에야 친근함과 중독성을 선택했고, 그것을 ‘꾸준히' 어필한 결과 예쁘지는 않지만 사랑스러움과 정감을 느낄 수 있는 독보적인 브랜딩으로 완성해나간 것이지요.
마무리하며...
강연을 듣고 나서 배달의 민족은 다름을 위한 다름이 아닌, 철학이 있는 다름을 추구하는 기업이라는 생각이 들었습니다. 어쩌면 UX 디자이너로서 평소 퍼소나에 대해 가지고 있던 생각들, 예컨대 '모두를 위한 디자인을 하면 모두가 만족하지 못하지만, 단 한 사람을 만족하게 하면 80%의 사용자를 만족하게 할 수 있다’ 가 떠오르며 실사례를 보는 느낌이 들어 짜릿한 느낌도 들었습니다. 그만큼 사용자를 ‘제대로' 아는 것이 중요하다는 기본을 되새길 수 있었습니다.
또한, 브랜드가 지닐 수 있는 인성의 스펙트럼을 넓혔다는 것이 가장 인상적이었습니다. (어쩌면 현업에 있을수록 더욱더 획일화되어간다고 느껴지는) 어떤 서비스를 대하든 브랜딩 혹은 디자인은 덜어낸 것만이 정답이고, 디자이너들이 인정한 서체만 써야 하고, 익숙한 디자인이 가장 안전한 것이라는 관념에 스스로 갇힌 것은 아니었는지 되돌아보게 한 시간이었습니다.
디자인은 정말 예뻐야'만' 할까? 에 대한 한 디자이너의 명확하고 공감되는 대답을 들을 수 있는 시간이었습니다.
배달의 민족 브랜딩 스토리가 더 궁금하시다면 <배민다움>을 읽어보시는 것을 권해드립니다.
[참고##HCI학회##]