Home데브기어 새소식기술자료[UX Summit 요약] 멀티플랫폼 앱에 가장 효과적인 UX 디자인

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

 

 

 

멀티플랫폼 앱에 가장 효과적인 UX 디자인 (Effective UX Design for Multiplatform Apps)을 요약했습니다.

  • 델파이 개발자가 데스크톱 앱을 개발할 때 유용한 UX 구현 가이드라인을 제시합니다.
  • 모바일 UX와 데스트톱 UX가 어떻게 달라야 하는지 알 수 있습니다.
  • UX와 UI를 더이상 혼동하지 않을 수 있습니다.
  • 발표자 (Miguel Angel Moreno)는 매우 넗고 풍부한 경험을 가진 엠바카데로 MVP입니다

 

목차

 

  • 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의 정의:

 

 

  • “사용자 경험 (UX, User Experience)는 최종 사용자가 회사와 그 회사의 서비스와 제품과 상호작용하는 모든 요소를 아우른다.” – Don Norman
  • “인간 접점(Human interface)이나 사용성(Usability)은 너무 편협해서 나는 UX라는 용어를 생각해냈다: 나는 사람이 시스템과 경험하는 모든 요소를 커버하는 용어를 원했다. 이것은 산업 디자인, 그래픽, 접점(Interface), 물리적 상호작용, 설명서 등 모든 요소를 포함한다.” – Don Norman

 

 

UX라는 용어가 생기기 전부터 UX는 있었다.

 

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

 

 

 

 

내 UI는 이미 좋다. 그런데 왜 UX를 고려해야 하나?

 

 

UI

UX

대상

UI는 최종 사용자가 제품과 상호작용하는 성질을 대상으로 한다

UX는 제품의 목적과 기능을 대상으로 한다.

작업

UI 디자인은 제품의 디자인과 인터페이스와 연결된 미적인 구성 요소를 다룬다. 그 결과 최종 사용자가 보고, 듣고, 느끼는 것에 영향을 준다.

UX는 시장 조사, 고객 니즈 파악을 위한 고객과의 커뮤니케이션 등 사외적인 구성 요소를 다룬다.

초점

UI는 최종 제품에 집중한다. (디자인 구성요소를 이루는 기술 구성 요소를 주로 다룬다)

UX는 관리와 분석에 집중한다. (아이디어 창출, 개발, 전달까지 모든 프로젝트 단계를 다룬다)

 

 

 

 

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

 

 

“모바일 우선” 접근 방식이 “데스트톱에는 최악”이 되는 경우 1 – 구글앱스는 사용자 경험이 좋든 나쁘든 단일화된 UI만을 추구한다

  • (구글의 결정에 따라 구글앱스는 ) 햄버거 아이콘을 거쳐야 서랍 메뉴를 열고 무엇이든 시작할 수 있다.
  • (그 결과 데스크톱에서도 2번 이상 클릭을 해야 한다) 메뉴와 기능이 항상 보인다면 클릭을 한번만 하는게 더 UX가 아닐까?
  • 구글 CEO 에릭 슈미트의 모바일 퍼스트 철학: “ 모든 것에서 모바일 우선, 애플리케이션에서도 모바일 우선, 사람들이 사물을 사용하는 방식도 모바일 우선”

 

“모바일 우선” 접근 방식이 “데스트톱에는 최악”이 되는 경우 2 – 윈도우 8

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

 

“모바일 우선” 접근 방식이 “데스트톱에는 최악”이 되는 경우 3 – 웹사이트의 미니멀리즘

  • 웹사이트가 점점 “모바일 미니멀리즘”에 맞추기 위해 새로 디자인된다. 그 결과 데스크톱의 장점을 희생한다.
  • 데스크톱에서는 더 많은 내용을 한번에 표현할 수 있는데도 미니멀리즘을 추구하느라 (아이콘 안에 요소와 메뉴 숨기기, 내용 앞부분만 표시하기 등) 많은 내용을 숨긴다.
  • 미니멀리즘이 모바일 디자인의 근간인 이유는 모바일을 위한 실용적인 필요성이다. (데스트톱에는 굳이 그 필요가 없을 수도 있다)

 

데스트톱은 리소스가 풍부하다 (모바일에서 하기 어려운 것들을 실현할 수 있다)

데스크톱 컴퓨터는 모바일 장비보다 리소스가 풍부하다

  • 공간이 충분한 고해상도 스크린: 많은 그래픽 요소를 한번에 표현할 수 있다.
  • 메모리와 저장공간이 크다: 방대한 데이터 덩어리를 빠르고 효율적으로 다룰 수 있다.

 

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

 

데스크톱 UX 향상2: 애플리케이션 구동
  • 데스크톱 애플리케이션 UX에서 누구나 가장 성가진 것 중 하나이다.
  • FormCreate 프로시저의 코드가 시간을 많이 잡아먹는 경우 대체로 모레시계를 표시한다.
  • 최종 사용자는 (앱이 데이터 로딩 중인지, 초기화 작업 중인지 등 도대체 무슨 작업을 하는 지 모드로 모레시계만 보이므로)
혼란한 마음에 앱을 수차례 기동하고, 이 경우 데이터가 꼬이기도 한다
  • 위 문제를 해소하는 몇가지 코딩 패턴
    • 스플레쉬 화면을 애플리케이션에 추가하기 (적어도 프로그램이 시작되는 중이라는 것을 알 수 있다)
    • 초기화 코드를 별도의 프로시저로 옮기고, 기본 폼이 표시된 다음에 한번만 호출하기, 그리고 (데이터 로딩 중 등) 각 초기화 작업을 화면에 표시하고 기다리라고 알리기
    • 폼이 여러개 있을 때 폼을 늦게 생성하기 (폼이 많다면 기본 폼 이외에는 실제 사용 시 생성하도록 설정하자)
참고로 RAD스튜디오의 기본 설정은 구동 시 일단 모든 폼을 미리 생성하므로 폼이 많은 경우 구동 시간이 지연된다.
    • (깃허브에 예제 코드 제공 예정)

 

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

 

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

 

데스크톱 UX 향상5: 데이터 확보
  • 데스크톱 앱은 모바일 앱에 비해 훨씬 큰 메모리를 사용할 수 있다.
  • 필요한 모든 기준 데이터를 앱 구동 시 처음 한번에 로딩해두자. (사용자가 데이터를 읽거나 계층형으로 관련 데이터를 파악할 때, 이미 메모리에 가지고 있는 것은 지연되지 않기 때문에 네비게이션이 자연스럽고 즉각 반응한다. 이것이 좋은 UX이다)
  • 반면에 모바일 앱에서는 데이터를 보관할 메모리가 충분하지 않으므로, 필요할 때 필요한 것만 가져오고 다 사용하면 나중에 다시 가져오더라도 일단 바로 버리는 방식이다. 모바일 앱에서는 SQL 클라이언트가 없기 때문에 대체로 SOA(Service Oriented Architecture) 서비스 서버에서 REST 클라이언트가 데이터를 받아오는 방식과 같이 데이터를 다루게 된다.
  • RAD 스튜디오의 (강력한 데이터 엔진 클라이언트 라이브러리인) FireDAC을 이용하여 로컬과 원격 데이터 모두 빠르게 그리고 효율적으로 로드하자.
  • 데이터 집약적인 상황에서는 FireDAC을 이용하여 사용자가 네비게이션하는 레코드에 따라 데이터를 순차적으로 로드하도록 코딩하자. FireDAC은 데이터를 필요한 것부터 로드한다. 그리고 한번 로드한 데이터는 버리지 않고 계속 새 데이터를 증분 방식으로 읽어들일 수 있다. 그 결과 모바일 앱보다 훨씬 부드러운 UX를 제공하게 된다.
  • (깃허브에 예제 코드 제공 예정)

 

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

 

요약: 좋은 UX의 기본 요소

  • 사용자를 이해하자
    • 목표 사용자, 그들이 원하는 것과 필요로 하는 것을 이해하는 것이 목표
    • 공감 능력이 UX에 가장 필요한 능력이다.
    • 그래야 UX 디자이너가 최종 사용자들이 필요로 하는 것들과 그들의 감정을 이해할 수 있다.
  • 디자인 전략을 수립하자
    • 디자인 전략에는 제품의 목적을 이해하고 논리적인 사용 흐름의 맵을 만드는 과정이 들어가야 한다.
  • 상호작용 설계를 분석하자
    • 사용자들이 제품을 어떻게 사용하는가
    • 사용 습관, 개인적 선호도, UI와 상호작용하는 중에 사용하는 바로가기
  • 와이어프레임이나 프로토타입을 작성하자
    • 디자인 팀에게 아이디어와 그 목적을 전달하기 위해 UX 디자이너는 와이어 프레임이나 프로토타입을 작성한다.
    • 델파이가 프로토타입을 빠르게 만들 수 있다는 점은 델파이 개발자라면 이미 알고 있을 것이다.

 

추가 자료

 

 

 

 

 

Post Views: 323