Tutorial : 감성적 인터페이스 디자인을 위한 리서치 방법 – 최은영 (SK 텔레콤)

 

‘감성적 인터페이스 디자인을 위한..’ 세션은 사용자에게 감성적 경험을 전하기 위한 업무 프로세스 방식에 대해 소개하는 시간이었습니다. SK 텔레콤에서 업무를 진행하는 방식과 그에 따른 사례들을 함께 소개해 주어 흥미롭게 들을 수 있었습니다. 강의는 아래와 같은 순서로 진행되었습니다.

BRAND EXPERIENCE WORKSHOP
브랜드가 사용자에게 주고 싶어하는 감성이 무엇인지 확실히 정의를 해야합니다.
이 때 브랜드에서 고객에게 전하고 싶은 감성과 경험이 무엇인지 말할 수 있도록 툴을 주어야 합니다.

USER CONTEXT
사용자들이 제품이나 서비스를 사용할 때 필요한 감성적 맥락을 사용자의 관점에서 확인해 봅니다.
좋은 인터페이스 디자인은 사용자의 경험을 올바르게 합니다. 사용자의 목표를 고려하지 않은 디자인은 외면을 받게 됩니다.

INTERFACE DESIGN EVALUATION
인터페이스의 요소를 통해 사용자와의 감성적 연결이 어디서 일어나는지 알아야 합니다.
인터페이스 디자인의 7가지 평가 요소는 다음과 같습니다.
Visibility  /  Motion  /  Color  /  Harmony & Balance  /  Consistency  /  Identity  /  Brevity

특히 Color와 Motion은 사용자의 감성적 영향도가 가장 높음

SK_1

STATISTICAL ANALYSIS
사용자가 이용하는 서비스와 상품들을 통해 감성적 연결이 잘 이루어 지고 있는지 살펴봐야 합니다.
인터페이스에서 사용자의 이용 흐름을 통해 감성적 연결을 찾아낼 수 있습니다.
또한 채널간의 이용 목적과 흐름을 분석하여 목적에 맞는 감성적 커뮤니케이션을 제공합니다.

INTEGRATION RESEARCH
연동하는 탐색 : 하나의 방법론에 서로 다른 구성원들의 참여
연계하는 발견 : 다른 방법론에 이어서 스토리를 이어가는 발견
연합하는 분석 : 하나의 감성을 만들어내기 위한 분석

강의를 들으면서 인상깊었던 부분은 리서치는 고객 감성의 주체가 될 수 없다는 말이었습니다. 리서치 통합을 통해 감성적 니즈를 자극하는 사용자 경험이 필요한데 이 때, 리서치가 제품의 방향성을 만들어주는 나침반이 될 수 있다고 하였습니다. UX디자이너로서 창의적인 작업을 할 때 근거 있는 리서치가 아이디어에 힘을 실어줄 수 있을 거라는 생각을 해보았습니다.

“People don’t buy better products, they buy better versions of themselves”

강의 마지막에 나온 위 문구를 통해 사용자의 감성적 경험이 얼마나 중요한지 새삼 느끼며 강의를 마무리하였습니다.

 

 

 

Case study : 2016 네이버 스퀘어 UI – 김승언 (네이버)

 

‘네이버 스퀘어 UI’는 네이버의 새로운 브랜드 아이덴티티인 ‘네이버 스퀘어’를 개발하게 된 과정과 그것이 품고 있는 가치와 의미에 대해 소개하는 시간이었습니다. 네이버가 처음 설립된 시점에서부터 현재의 자리를 잡기까지 히스토리를 듣고나서 네이버 스퀘어 UI에 대해 설명을 들으니 왜 이런 결과물이 나왔는지 설득력이 있었습니다. 그래서 인상깊었던 부분을 정리해 보았습니다.

먼저 김승언 디자인센터장은 스퀘어 UI를 만들게 된 이유에 대해 설명해 주었습니다.

이유1. 사용자들이 일관되고 끊임 없는 경험으로 네이버 서비스를 이용할 수 있도록
이유2. 디자인 가이드나 방향성이 정해지지 않아서 내부직원들도 혼란스러워하는 부분이 있었음. 즉, 효율과 속도를 올리기 위해서

위와 같은 이유에 의해 GNB 디자인의 통일, 컬러 스와치 정리 등 현재 서비스들을 재정비할 수 있는 규칙들을 세웠습니다. 또한 버튼, 이미지 등의 디자인 요소에 대한 규칙을 상세하게 정립하여 각 요소들이 어떤 식으로 확장 가능한지 보여주었습니다. 그러다 보니 각각의 기준들이 서비스에 어떻게 적용될 수 있을지 궁금해졌습니다.

스퀘어 UX 그리드

UX_2

디자인 요소 가이드라인

UX_3_

네이버캐스트/블로그/주소록/영화 서비스에 적용된 사례들을 살펴보니, 네이버 스퀘어 UI가 적용되면서 그리드가 확실히 보여 깔끔한 느낌도 들었지만 약간 아쉬운 부분도 보였습니다. 개인적으로는 3단 그리드를 사용하면서 텍스트의 너비가 작아서 문장의 흐름이 끊기는 점, 그리드 시스템에 맞추다보니 서비스의 특성이 한눈에 보이지 않는 점이 다소 아쉬웠습니다.

네이버 스퀘어 UI가 서비스에 적용된 사례

UX_4

그래서 네이버 블로그와 주소록의 현재 디자인 화면과 스퀘어 UI가 적용된 화면을 함께 비교해 보았습니다. 좌측이 예전 화면이고 우측이 네이버 스퀘어 UI가 적용된 화면입니다. 블로그의 경우, 스퀘어UI에 맞추면서 적용 이미지가 작아져 기존 화면에 비해 시인성이 떨어질 수는 있지만, 반대로 한 페이지에서 많은 정보의 양을 볼 수 있다는 점은 장점일 수 있습니다. 그리고 주소록의 경우에는 기존에 비해 서비스의 목적이 상당히 달라진 것으로 보입니다. 예전 백업이 주기능 이었던 것을 기대하며 주소록에 진입하면 혼란스러울 수 있지만, 주소록에서 검색이 목적이라면 작은 모듈로 다양한 정보를 보여주는 스퀘어 UI가 적합한 구조로 보여집니다.

블로그와 주소록 서비스 BEFORE & AFTER

UX_5

이제 시작하는 단계인만큼 스퀘어 UI의 가이드라인이 지속적으로 의미있기 위해서는 위와 같이 적용하는 과정에서 서비스의 특성을 잘 표현할 수 있는 방법이 무엇일지 끊임없이 연구해야 할 것입니다. 그렇다면 다른 브랜드에서는 어떤 방식으로 디자인 가이드라인을 제시하고 있는지 알아보기 위해 구글 가이드라인을 조사해 보았습니다.

https://www.google.com/design/spec/material-design/introduction.html

google_1

웹사이트를 살펴보면 구글 가이드라인은 애니메이션 / 스타일 / 레이아웃 / 컴퍼넌트 / 패턴 / 리소스 등 세세하게 분류되어 있습니다. 그 중 레이아웃 카테고리를 보면 비율에 따라 사용 가능한 높이는 몇인지, 요소들을 몇 배로 리사이징해야 하는지 자세한 부분까지 정의하면서 다양한 레이아웃의 가능성을 보여줍니다. 물론 TABLET, PC 에 대한 가이드도 아래와 같이 따로 정의되어 있습니다. 이렇게 구글의 가이드라인은 기준이 세세하면서도 비율로 정의하기 때문에, 자유롭게 디자인할 수 있는 가능성을 열어두고 있는 것이 특징이며, 다양한 플랫폼에서도 유연한 대응이 가능하다는 점이 장점이라 할 수 있습니다.

google_2
google_3
google_5

구글에 대해 조사를 하다 보니, 다양한 플랫폼에 대한 가이드라인이 필요하다면 구글 가이드라인이 좋은 방향성이 될 수 있을 것이라는 생각이 들었습니다. 그리고 이와 같은 디자인 가이드라인이 모바일이나 웹에서 일관성있는 브랜드 경험을 주는 중요한 툴이 될 수 있기에 서비스를 만드는 디자이너로서 가이드라인이 얼마나 중요한지 새삼 깨닫는 계기가 되었습니다. 네이버는 이제 막 첫단추를 끼웠고, 여기에서 스퀘어 UI를 어떻게 더 발전시켜 나갈지 기대해 봅니다.