UI 개발툴 사용성 개선 이야기
[넥사크로플랫폼] 진화하는 UI 개발 도구의 UX 개선
UI 개발툴의 사용성 개선에 대해 생각해보기
오래 전부터 투비소프트는 사용자의 불편함을 해소하고자 노력해왔다. 사용자 경험(User eXperience)이 대두되는 시대의 흐름에 발맞춰 서울대학교 UX랩과 함께 방법론을 제작했고, 수 년간 현장에서 다듬어진 방법론을 기반으로 넥사크로 스튜디오의 사용성을 개선하는 프로젝트를 진행하고 있다.
nexacro 17의 사용성을 개선하는 프로젝트는 어떻게 진행되는지 알아보고, 그 결과로 개선된 일부 기능들을 소개하겠다.
nexacro 17 사용성 개선 프로세스
1. Understanding
우선, 사용성 분석을 통해 전반적인 오류를 점검한다. 수 많은 비즈니스 시스템의 사용자 경험을 컨설팅 해온 전문가들이 HCI 기반의 ‘TOBESOFT 사용성 모델 가이드’를 활용해서 사용성 오류를 점검한다.
다음으로 벤치마킹을 통해 사용자에게 익숙한 외부의 경험패턴을 발굴한다.
2. Research
사용자로부터 직접 문제점을 발굴하는 중요한 과정이다. Nexacro17 사용성 개선 프로젝트에서는 인터뷰와 설문조사, 관찰조사를 진행한다.
특히 관찰조사는 nexacro17 Studio로 과업을 수행하는 사용자가 겪는 모든 문제점을 직접 바라볼 수 있는 매우 중요한 구성요소이다. 영상데이터를 깊이 있게 분석하고 요구사항을 발굴한다.
사용 방식에 따라 명확하게 구분되는 작업시간 데이터는 어떤 기능을 강조해야 할지 판단하는 중요한 기준으로 활용 된다.
3. Idea
현장에서는 다양하고 유연한 아이데이션이 진행되지만, 오랜 사용자들의 관성이 생산성과 직결되는 개발도구의 특성상 방안회의를 거쳐 (현장에 비해 보수적인) 해결방안을 도출하고 이를 구체화 하는데 주력한다.
수집되는 요구사항이 제법 많은데, 2017년에 진행한 프로젝트에서는 220여 건의 이슈를 바탕으로 60여 요구사항을 발굴하고 해결방안을 수립했다.
4. View & IA
앞서 수립한 해결방안 중 UI로 방안을 제안해야 하는 경우에는 Prototyping을 통해 구체화 한다. 이 과정은 구현 가능여부와 상관 없이 자유롭고 유연하게 진행되는 것이 일반적이다.
이 과정을 통해 2018년의 nexacro17은 크고 작은 요소들이 다수 개선됐다. 쉽게 접근할 수 있는 몇 가지를 사례를 소개하겠다.
넥사크로 17의 개선된 UI 소개
1. New Project Wizard
New Project Wizard는 프로젝트를 만드는 도구이다. 프로젝트를 생성하고 구조를 설정하는 과정을 통해 자연스럽게 nexacro17에서 멀티 디바이스를 다루는 방식을 이해할 수 있다.
변경 전*문제점
→ 초기 버전에서는 제공되는 모든 기능이 그대로 노출되고 있었다 (Desktop, Mobile small/Medium/Large로 구분)
사용자들이 Mobile Small, Medium, Large 기준을 어려워하는 등, 정확한 사용 방법을 알기 위해 매뉴얼을 확인 해야만 했었다.
→ 여러 디바이스를 중복 선택할 수 있다는 힌트가 없었다.
설명을 듣거나 클릭해보기 전까지 중복 선택할 수 있다는 것을 인지하지 못했다.
→ 편집할 수 없는 정보인 mobile의 width, height가 편집을 할 수 있을 것이라 생각했다.
사용자들은 mobile 화면 크기를 수정하기 위해 width, height 영역을 수 회 클릭했다.
변경 후*개선
→ 수정된 버전에서는 스크린 표기를 Desktop, Tablet, Phone으로 변경했다.
→ mobile 화면 크기를 ‘Flexible size’로 변경했다.
→ 체크박스를 배치해서 다중 선택이 가능함을 인지할 수 있도록 수정했다.
2차 테스트 결과, 기존의 오류가 발생하지 않는 것을 확인할 수 있었다.
변경 전*문제점
→ 초기 버전의 nexacro17은 어떤 스크린에 어떤 프레임이 적용되는지 인지하기 어려웠다.
프레임 설정을 무시하거나, 과정이 매끄럽지 않았다.
→ 신규 프로젝트 생성시 사용자의 선택이 프로젝트에 어떻게 반영되는지 보여주지 않았다.
사용자들은 프로젝트를 생성한 후 구조를 쉽게 인지하지 못했다.
변경 후*개선
→ 수정된 버전에서는 선택된 스크린을 명확하게 인지할 수 있도록 수정했다.
→ 설정에 따라 프로젝트가 어떻게 변하는지를 확인시켜주는 Project Preview를 제공한다. 이 정보가 Project Explorer로 그대로 이어진다.
프로젝트의 구조를 보다 쉽게 이해했다.
2. Layout, Step 추가하기
nexacro 컴포넌트는 레이아웃 별로 속성을 갖는다. 이를 활용하여 스크린 별로 화면 배치를 바꿀 수 있다.
동시에, 하나의 폼을 여러 단계로 나누어 보여주는 스텝 기능을 제공한다. PC 화면을 스마트폰 화면으로 옮긴다고 가정할 때, PC의 큰 화면을 여러 개의 스텝으로 나누어 보여줄 수 있다.
변경 전*문제점
→ 초기 버전의 nexacro17은 폼에 레이아웃을 추가하는 버튼이 우측으로 멀리 떨어져 있고 작고 알아보기 어려운 아이콘으로 되어 있었다.
→ 스텝을 추가하는 방법은 초보자가 쉽게 찾기 어려운 방법(Property 직접입력 등)으로 제공하고 있었다.
관찰조사를 통해 확인한 결과, 레이아웃과 스텝을 추가하는 과정에서 대부분의 사용자가 방법을 찾는데 오랜 시간이 걸렸다.
변경 후*개선
→ 수정된 버전에서는 레이아웃 추가 버튼이 레이아웃 탭 옆에 배치됐다.
→ 우측에는 스텝을 추가하는 UI가 배치됐다.
최근 진행된 관찰조사를 통해 확인한 결과, 모든 사용자가 쉽게 사용했다.
3. 컴포넌트 간격 고정하기 (Arrangement)
변경 전
*문제점
→ 초기 버전의 nexacro17은 컴포넌트를 그린 후 컴포넌트 간격을 고정하기 위해 ‘Arrange Components’라는 모드에 진입 해야 했다.
관찰조사를 통해 확인한 결과, 모드 진입 자체를 하지 못하는 사용자들이 대부분이었다.
변경 후*개선
→ 수정된 버전에서는 모드 진입 없이 바로 간격을 고정하는 UI로 변경됐다.
처음 이 기능을 접하는 사용자도 짧은 시간 내에 원하는 기능을 사용할 수 있었다.
이외에도 수 많은 요소들이 개선이 완료됐거나 지속적으로 진행되고 있다.
앞으로
우리가 하는 것은 20년 가까이 이어져 온 UI개발 도구의 사용성을 개선하는 것이다. 오랜 시간 사용자의 경험 속에서 관성이 자리잡은 저작도구의 경우에는 큰 틀을 바꾸는데 대한 위험요인이 크기 때문에, 완전히 새로운, 혁신적인 변화를 한 번에 제공하는 것은 어려울 수 밖에 없다.
사용자의 생산성을 저하시키는 요소들을 지속적으로 발굴하고 개선해나가는 과정을 통해 어느 순간 ‘불편한 점이 없는 넥사크로’가 될 것이라고 믿는다.
