세미나 [UX Summit 2020 요약] 멀티플랫폼 앱에 가장 효과적인 UX 디자인

<< UX Summit 2020 목록으로 이동
 

UX Summit 의 2020 시리즈 중, Effective UX Design for Multiplatform Apps - Miguel Angel Moreno 의 한글 요약본입니다.  

• 발표자 (Miguel Angel Moreno)는 매우 넓고 풍부한 경험을 가진 엠바카데로 MVP 입니다.
• 이 요약에 미처 담지 못한 좋은 내용은 원본을 보세요: YouTube 비디오 (24 min) 보기
   

이 세션은 델파이 개발자가 데스크탑 앱을 개발할 때 유용한 UX 구현 가이드라인을 제시합니다.
이 세션을 통해 우리는, 모바일 UX와 데스크탑 UX가 어떻게 달라야 하는지 알 수 있고, UX와 UI를 더 이상 혼동하지 않을 수 있습니다.

목차

• UI vs UX: 역설
• 내 UI는 이미 좋다. 그런데 왜 UX를 고려해야 하나?
• “모바일 우선” 접근 방식이 “데스크탑에는 최악”이 되는 경우
• 데스크탑은 리소스가 더 많다
• 데스크탑 UX 향상하기 1: 애플리케이션 설치 경험을 향상
• 데스크탑 UX 향상하기 2: 애플리케이션 시작 경험을 향상
• 데스크탑 UX 향상하기 3: 애플리케이션 안에서 화면 이동 경험을 향상
• 데스크탑 UX 향상하기 4: 다중 작업 능력을 활용
• 데스크탑 UX 향상하기 5: 데이터 확보 능력을 활용
• 데스크탑 UX 향상하기 6: 사용자 지원 능력을 향상
• 요약: 좋은 UX의 기본 요소
• 관련 추천 자료
   

UI vs UX: 역설

• 많은 개발자들이 UI와 UX를 바꿔쓰거나 부정확하게 사용한다.
• UX는 사용성(usability)이 아니다. 사용성은 UX의 일부일 뿐이다.
  사용성은 UI의 성질 중의 하나로서 시스템이 배우기 쉬운지, 효율적으로 사용할 수 있는지, 사용할 때 즐거운지 등을 커버하는 UX의 한 부분이다.
• 소프트웨어 UX란 사용자가 소프트웨어를 고르고, 확보하고, 설치하고, 사용하고, 고객 지원을 받는 전 과정의 모든 것을 의미한다.
   

UX란? UX(User eXperience) 라는 용어를 만든 Don Norman의 정의
(비디오 2분 08초부터의 내용)

“사용자 경험 (UX, User Experience)는 최종 사용자가 "회사", "그 회사의 서비스", "그 회사의 제품"과 상호작용하는 모든 요소를 아우른다.” - Don Norman

그림1. Don Norman이 UX라는 용어를 만든 계기 - 그는 산업 디자인, 그래픽, 접점(Interface), 물리적 상호작용, 설명서 등 사람이 어느 시스템을 대하면서
경험하게 되는 모든 요소를 커버하는 용어를 원했는데 인간 접점(Human interface)이나 사용성(Usability)는 너무 좁은 의미만 담을 수 있었다.  

UX는 그 용어가 생기기 전부터 이미 있었다.
(비디오 2분 30초부터의 내용)

그림2.  UX는 그 용어가 생기기 전부터 이미 있었다.

• “디즈니 월드는 언제나 사람의 생활을 향상시킬 수 있는 최신 기술들이 모여있는 곳” - 월트 디즈니
• 명심할 점: 사용자들이 당신의 제품을 사용하면서 어떻게 느끼는가에 관한 것이 바로 UX이다.
   

내 UI는 이미 좋다. 그런데 왜 UX를 고려해야 하나?
(비디오 3분 00초 부터의 내용)

그림3.  (완성된 제품인) 숟가락이 UI라면, (식사를 즐긴다는 과정, 즉) 숟가락을 사용하는 것은 UX 프로세스의 일부이다. 

그림4.  더 좋은 UX를 제공하면 더 많은 고객이 관심을 가진다. (똑같은 케찹이지만, 사용 방식이 다르면 UX가 달라진다.)

그림5.  공사해서 만든 보도가 UI라면, 실제로 지나다니는 사람들이 만든 지름길은 UX이다.
(보도가 지름길보다 보기에 더 멋지다. 즉, UI가 더 좋다. 하지만, 사용자에게 최고의 UX는 아니었기 때문에 사람들은 자신들의 UX를 만들었다.)

스마트폰이 널리 보급됨에 따라, “모바일 우선”현상이 심해지고 데스크탑의 UX는 지금 나쁘게 변해가고 있다.

사례 1: “모바일 우선” 접근 방식이 “데스크탑에는 최악”이 되는 경우 - 구글앱스 (단일화된 UI만 추구)
(비디오 5분 23초부터의 내용)

그림6. 구글앱스의 데스크탑 UX는 "모바일 우선"이라는 원칙을 지키기 위해 데스크탑이 제공할 수 있는 장점을 희생했다. 

• (구글의 결정에 따라) 구글앱스에서 작업을 시작하려면, 일단 "햄버거 아이콘"을 사용하여 서랍 메뉴를 열어야 한다.
• (그 결과 데스크탑에서도 클릭을 2회 이상 해야한다.) 메뉴와 기능이 항상 보인다면 클릭을 1회만 하는게 더 좋은 UX가 아닐까?

참고. 구글 CEO 에릭 슈미트의 모바일 퍼스트 철학: “모든 것에서 모바일 우선, 애플리케이션도 모바일 우선, 사람들이 사물을 사용하는 방식도 모바일 우선” 
 

사례 2: “모바일 우선” 접근 방식이 “데스크탑에는 최악”이 되는 경우 - 윈도우 8
(비디오 6분 51초부터의 내용)

그림7. 윈도우 8 데스크탑 UX는 "터치 장비 사용자를 고려"했는데, 키보드와 마우스 사용자에게는 어색했다.

• 윈도우 8은 데스크탑의 커서 방식과 태블릿의 터치 방식을 모두 지원하도록 UI를 구현하였다.
• The Verge의 평가: “윈도우 8을 되돌아보면, 마이크로소프트가 당시에 잘못된 길을 선택했음을 쉽게 알 수 있다.
  터치 기반 컴퓨팅에 크게 배팅했지만 결국 PC의 키보드와 마우스 사용이 어색하고, 불편하고 혼란스럽게 만들어버렸다.”
   

사례 3: “모바일 우선” 접근 방식이 “데스크탑에는 최악”이 되는 경우 - 웹사이트의 미니멀리즘
(비디오 7분 35초부터의 내용)

그림8. 미니멀리즘은 화면이 작은 모바일에서는 실용적이지만, 화면이 큰 데스크탑에서는 효율적이지 않다. 

• 웹사이트가 점점 “모바일 미니멀리즘”에 맞추기 위해 새로 디자인된다. 그 결과 데스크탑의 장점을 희생한다.
• 데스크탑에서는 더 많은 내용을 한번에 표현할 수 있는데도 미니멀리즘을 추구하느라 많은 내용을 숨긴다.
  (예, 요소와 메뉴를 아이콘 안에 숨기기, 내용의 앞부분만 보여주기)
• 모바일 디자인이 미니멀리즘에 기초하는 이유는 모바일에서 잘 사용하기 위해 꼭 필요하기 때문이다.
  (데스크탑에서 사용할 때는 굳이 필요하지 않을 수도 있다.)

데스크탑은 모바일과 달리 리소스가 더 풍부하기 때문에, 더 수준 높은 것들을 해낼 능력이 있다.

• 데스크탑 컴퓨터는 모바일 장비보다 리소스가 풍부하다.
  • 스크린의 면적이 넓고 해상도가 높다: 많은 그래픽 요소를 한번에 표현할 수 있다.
  • 메모리와 저장공간이 크다: 방대한 데이터 덩어리를 빠르고 효율적으로 다룰 수 있다.

데스크탑 UX 향상하기 1: 애플리케이션 설치 경험을 향상

• “앱스토어”를 사용하자.
  • 앱스토어는 모바일 앱 배포 방식에서 성공했고, 이제 데스크탑 소프트웨어에서도 제공된다.
  • 최종 사용자는 앱스토어에서 매우 편하고 효과적으로 애플리케이션을 찾아서 설치한다.
  • 설치 미디어 제공과 관련된 불필요한 부담이 없어진다.
  • (강력하고 안전한 디지털 서명은 악성 프로그램이나 앱 변조를 제거하므로) 앱스토어에서 앱을 획득하는 것이 더 안전하다.
• RAD 스튜디오는 (윈도우 스토어와 맥 앱스토어) 데스크탑용 양대 앱스토어 배포를 지원한다.
  • (깃허브에 예제 코드 제공 예정)
     

데스크탑 UX 향상하기 2: 애플리케이션 시작 경험을 향상

• 애플리케이션을 작동시키는 경험은 누구나 가장 성가시게 느끼는 데스크탑 UX이다.
  • 시간이 많이 걸리는 FormCreate 프로시저의 코드가 있으면, 시작되기 전에 대체로 모래시계를 표시한다.
  • 최종 사용자는 혼란한 마음에 앱을 수차례 기동하고, 이로 인해 데이터가 꼬이기도 한다.
    (모래시계만 보이면, 데이터 로딩 중인지, 초기화 작업 중인지 등 앱이 실제로 무슨 작업을 하는 지 알 수 없기 때문이다.)

• 이 문제를 해소하는 몇가지 코딩 패턴
  • 스플래쉬 화면을 애플리케이션에 추가하기 (적어도 프로그램이 시작되고 있다는 것을 사용자가 알 수 있다.)
  • 초기화 코드를 별도의 프로시저 안으로 옮기고, 기본 화면이 표시된 다음에 호출되도록 하기
  • 그리고 화면에서 각 초기화 작업의 내용을 알려주기 (예: 데이터 로딩 현황 등을 표시하여 기다릴 수 있도록 안내한다.)
  • 폼 생성 처리를 최소화하기 (폼이 많다면 기본 폼을 제외한 나머지 폼은 실제 사용될 때 생성하도록 한다.) 

    • RAD스튜디오의 기본 설정(구동 시 모든 폼 생성)을 그대로 사용하면 폼이 많은 경우 구동 시간이 지연된다.
• (깃허브에 예제 코드 제공 예정)

데스크탑 UX 향상하기 3: 애플리케이션 안에서 화면 이동 경험을 향상

• 화면 이동은 데스크탑 앱에서 가장 중요한 UX 특성 중 하나이다.
• 가능하면 관련된 개체들을 한 화면에서 모두 볼 수 있도록, 화면 공간을 활용하자. (그리드, 리스트, 트리 등)
  • 주의: 많은 것을 한번에 보여주려면 그만큼 화면 구성을 잘 해야 한다. 잘못하면 오히려 혼란에 빠지는 역효과가 날 수 있다.
  • 정보를 파악하기 쉽도록, 서로 관련된 개체들은 페이지나 탭에 모아두고, 각 페이지와 탭은 명확히 분리하자.
• 이동 버튼과 이동 보조 기능이 언제나 제공되어야 한다.
  • 버튼 뿐만 아니라 키보드로도 쉽게 이동할 수도 있도록 하자. (모바일 UX에는 없는 데스크탑 UX 만의 장점이다.)
• VCL과 FMX 모두 폼 디자이너와 컴포넌트를 통해 좋은 화면을 구성할 수 있다.
• (깃허브에 예제 코드 제공 예정)
   

데스크탑 UX 향상하기 4: 다중 작업 능력을 활용

• 데스크탑 앱은 멀티-코어 CPU와 풍부한 메모리를 사용한다.
• 대용량 데이터 로딩이나 집약된 수학 계산 등이 백그라운드에서 실행되도록 멀티 쓰레드와 병렬 처리 사용하자.
  • UX를 훨씬 자연스럽게 해준다.
• RAD스튜디오의 기능 활용
  • 작업 진행과 종료에 대한 명확한 시각적 표현과 공지를 제공할 수 있도록 다양한 시각적 컴포넌트가 제공된다.
    (데스크탑이기 때문에 제공할 수 있는 좋은 UX이다.)
  • 멀티태스킹과 병렬 처리를 위한 라이브러리가 제공된다.
  • 익명 메소드(Anonymous method)를 사용하면 멀티 태스킹 프로시저를 더 쉽게 작성하고 관리할 수 있다.
• (깃허브에 예제 코드 제공 예정)
   

데스크탑 UX 향상하기 5: 데이터 확보 능력을 활용

• 데스크탑 앱은 모바일 앱에 비해 훨씬 큰 메모리를 사용할 수 있다.
• 사용자가 데이터를 읽거나 계층형으로 관련 데이터를 파악할 때 화면 이동이 자연스럽고 즉각 반응하는 것이 좋은 UX이다.
  • 데스크탑에서는,
    • 필요한 기준 데이터를 앱 구동 시 한번에 모두 로딩해 둘 수 있기 때문에 느리게 반응하는 문제를 해소할 수 있다.
  • 반면에 모바일 앱의 경우, 
    • 데이터를 보관할 메모리가 충분하지 않으므로, 필요할 때 필요한 것만 가져오고 다 사용하면 버리는 방식이다.
      (데이터 가져오기는 시간이 많이 걸리는 작업인데 필요할 때마다 가져와야 한다.) 
    • SQL 클라이언트가 없기 때문에 대체로 REST 클라이언트가 SOA(Service Oriented Architecture) 서비스 서버에서
      데이터를 받아오는 방식 등 제한된 방식으로 데이터를 다루게 된다.
• RAD 스튜디오의 FireDAC (데이터 엔진 클라이언트 라이브러리) 활용
  • 로컬과 원격 데이터를 모두 빠르고 효율적으로 로드할 수 있다.
  • 데이터 집약적인 상황에서는, 사용자가 이동하는 레코드에 따라 데이터가 순차적으로 로딩할 수 있다.
    • FireDAC은 데이터를 필요한 것부터 로드한다.
    • 한번 로드한 데이터는 버리지 않고 증분 방식으로 계속 새 데이터를 읽어들일 수 있다.
    • 모바일 앱보다 훨씬 부드러운 UX를 제공하기에 적합하다.
• (깃허브에 예제 코드 제공 예정)
   

데스크탑 UX 향상 6: 사용자 지원 능력을 향상

• 데스크탑 앱은 화면 공간이 충분하므로 메시지 창을 제공하여도 주요 화면을 가리지 않는다.
  • 슬랙 등 원하는 메시징 플랫폼을 사용하여 고객이 원할 때 즉시, 실시간 고객 지원을 하도록 구현한다.
  • 필요시 원격 데스크탑 기능 등을 연결하면 사용자의 화면을 직접 보면서 사용자의 문제를 바로 해결하도록 구현한다.
    • 사용자가 전화하고, 기다릴 필요가 없다. 이메일이나 화면 스크린샷 등도 필요없다.
    • 이와 같은 불필요한 과정을 제거하면 현격하게 훌륭한 UX를 제공한다.
  • “온라인 지원” 요청 버튼을 언제든 쉽게 찾을 수 있도록 애플리케이션 안에 구현한다.
    • 그러면 사용자들은 쉽게 그 자리에서 서비스를 받을 수 있다.
• RAD 스튜디오의 기능 활용
  • TCP 또는 UDP 프로토콜을 직접 사용하는 간단한 메시징 솔루션을 구현할 수 있도록 컴포넌트가 제공된다.
  • 슬랙 등 널리 사용되는 메시징 플랫폼의 REST API에 쉽게 연결할 수 있도록 REST 클라이언트 컴포넌트가 제공된다.
• (깃허브에 예제 코드 제공 예정)
   

요약: 좋은 UX의 기본 요소

• 사용자를 이해하자
  • 사업의 타겟 고객을 명확히하고, 그들이 원하는 것과 필요로 하는 것을 이해하는 것이 목표이다.
  • UX에 가장 필요한 능력은 공감 능력이다.
    • UX 디자이너는 최종 사용자들이 필요로 하는 것과 그들의 감정을 이해하는 능력이 뛰어나야 한다.
       
• 디자인 전략을 수립하자
  • 디자인 전략 안에는 제품의 목적을 이해하고 논리적인 사용 흐름의 맵을 만드는 과정이 들어가야 한다.
     
• 상호작용 설계를 분석하자
  • 사용자들이 제품을 어떻게 사용하는 지 분석
  • 사용 습관, 개인적 선호도 분석
  • UI와 상호작용하면서 어떤 지름길(바로가기)를 사용하는지 분석
     
• 와이어 프레임이나 프로토타입을 작성하자
  • UX 디자이너는 디자인 팀에게 아이디어와 그 목적을 전달하기 위해 와이어 프레임이나 프로토타입을 작성한다.
  • 델파이는 프로토타입을 빠르게 만들 수 있다. (델파이 사용자라면 누구나 아는 사실)
     

관련 추천 자료

• “UX” 용어 이해 - Don Norman (영문 비디오, 2min)
• The Design of Everyday Things - Don Norman (도서)
• 비전부터 UX 디자인까지 (From Vision to UX Design) with RAD Studio - S.듀폰트, C.자브로키스 (영문 비디오, 23min)
• (훌륭한 UX를 갖춘) 훌륭한 UI를 디자인 하는 방법 - D.밀링턴 (영문 아티클, 3부작)
• 코드 예제 (추후 업로드 예정)
• UX라는 용어가 생기기 전의 역사 (짧은 블로그와 비디오, 역자 추천)

<< UX Summit 2020 목록으로 이동