VueJS 가이드 14 - 유저 테스트 (2/3)

VueJS를 통한 애플리케이션 개발에 대해 알아봅니다.

작성자

조덕기

조덕기

DanielCho

본 포스팅은 Matthias HagerVue.js Application Tutorial - Step 14 - User Testing를 저자의 허락하에 번역한 글입니다. 오탈자, 오역 등이 있다면 연락부탁드립니다.

사용자는 해당 예산에 속하지 않는 카테고리를 선택하려고 한다.

우리는 가장 큰 시스템 관점의 문제를 먼저 해결하려고 한다. 한 달 예산을 설정할 때 사용자는 예산을 카테고리에 넣는다. 그러고 트랜잭션을 추가할 때 사용자는 예산 (날짜를 통해서) 그리고 카테고리, 둘 다 트랜잭션에 연결한다. 지금 애플리케이션의 상태에서는 선택한 예산에 연결되지 않은 카테고리를 선택할 수 있다. 이러면 콘솔 오류가 생기지만 사용자에게는 어떤 오류도 표시되지 않는다. 사실상 아무것도 뜨지 않는 것이다.

이걸 어떻게 해결해야 할까? 필자는 4가지의 가능한 해결책을 생각해냈다.

  1. 사용자가 선택한 예산 날짜를 기준으로 카테고리 목록을 필터한다.
  2. 트랜잭션이 추가되면 카테고리를 예산에 동적으로 추가한다.
  3. 모든 카테고리를 모든 예산에 자동으로 추가하여 사용자가 매달 직접하지 않아도 되게 한다.
  4. 사용자가 잘못된 카테고리를 선택했다고 간단히 오류로 표시한다.

처음 두 옵션은 비교적으로 사소한 버그 수정이다. 세 번째 옵션은 애플리케이션 실행 방식을 크게 바꿀 것이며 기능 변경이나 리팩터링으로 분류해야 할 것이다. 이 사용자 워크플로가 현재 워크플로보다 더 좋을지, 그리고 우리의 애플리케이션이 쓰고 있는 방식에 맞는지 진지하게 고려해보고 계획을 짜는 게 좋을 것이다. 마지막 옵션은 그런 대로 괜찮은 임시방편일수도 있지만 사용자 경험을 개선시키는 건 아니기 때문에 영구적인 해결책은 아니다.

일단은 2번째 옵션으로 가겠다. 우리의 목표인 간단하고 이해하기 쉬운 사용자 경험과 잘 맞다. 또한 때로는 예상치 못하고 계획하지 못한 지출이 발생하는 실제 세계 모델하고도 잘 맞는다. 3번째 옵션은 나중에 더 알아보기 위해 백로그에 추가하자.

사용자 스토리:

사용자가 예산에 존재하지 않는 예산 카테고리에 트랜잭션을 추가하면 $0의 예산으로 예산 카테고리가 추가되어야 한다.

높은 우선순위

사용자는 존재하지 않는 예산에 트랜잭션을 저장하려고할 수도 있다

이건 근본적으로 이전 버그와 똑같은 문제이다. 자세하게는 얘기 안하겠지만 우리는 비슷한 해결책을 쓸 것이다.

사용자 스토리:

사용자가 존재하지 않는 예산에 트랜잭션을 날짜에 추가하려고하면 예산과 예산 카테고리가 자동으로 추가되어야 한다.

높은 우선순위

예산을 추가하면 사용자가 다시 예산 목록으로 리디렉션된다

예산을 추가 할 때 거의 항상 바로 편집하고 싶을 것이다. 현재 워크플로는 다시 클릭하게 만들며 이 과정에 대해 불만을 가지게 한다.

사용자 스토리:

새 예산을 추가하면 사용자가 새로 생성된 예산으로 리디렉션 되어야 한다.

낮은 우선순위

한 달의 예산을 나타내는데, 월에 속한 하루를 선택하는 것은 혼란스럽다

여기서는 그다지 할 말이 없다. 당시에도 이 문제에 대해 알고 있었지만 그대로 두었었다. 차후 튜토리얼에서 우리만의 월 선택기를 만들 것이다.

사용자 스토리:

새로운 월 선택기 컴포넌트 만들기. 중간 우선순위

중간 우선순위

추가 된 계정이 사이드 바에 즉시 표시되지 않는다

새 계정이 사이드 바에 추가되려면 사용자가 애플케이션을 새로 고침 해야 한다. 이것은 초반에 Vue.js를 제대로 쓰지 못해서 생긴 쉬운 (그러나 위험한) 실수며 쉽게 고칠 수 있다.

사용자 스토리:

새 계정이 추가되면 자동으로 사이드 바에 나와야 한다.

중간 우선순위

때로는"사용자 스토리" 모델이 제한적인 경우가 있는데 지금이 그 중 하나이다. 필자는 이 버그를 고친 후 코드에 다른 곳에 아직 찾지 못한 비슷한 버그가 없는지 확인하고 싶다. 이것은 사용자 스토리로 잘 해석되지 않지만 중요한 작업으로 목록에 올라가 있어야 한다.

라인 아이템을 추가할 때 '추가' 또는 '저장'을 클릭하려면 마우스를 써야 한다.

사소한 골칫거리처럼 보일 수 있는 것도 애플리케이션을 장기간 사용하게 되면 심각한 문제가 된다. 기대한 사용자 기능을 손상시키지않는 것은 중요하다.

사용자 스토리:

양식에서 엔터를 누르면 양식이 제출되어야 한다.

중간 우선순위

트랜잭션을 업데이트해도 해당 값이 모두 업데이트 되지않는다

이것은 트랜잭션 모듈을 만들 때 나중에 하려고 남겨두었던 일이다. 이제 완료해야 할 시간이다.

사용자 스토리:

사용자가 트랜잭션을 업데이트 하면 해당 값도 모두 업데이트되어야 한다. 예:트랜잭션 날짜를 다른 달로 이동하면 두 예산이 모두 변경되어야 한다. 트랜잭션 금액을편집하면 예산과 계정 잔액, 둘 다 업데이트 되어야 한다.

높은 우선순위

사용자가 트랜잭션을 삭제할 수 있어야 한다

사용자 스토리:

사용자가 트랜잭션을 삭제할 수 있으며 해당 값은 모두 업데이트된다.

중간 우선순위

예산 카테고리에 소득을 추가하면 지출 항목에 양수 값을 보여줄 수 있다.

여기서 기술적으로 잘못된 것은 전혀 없지만 우리의 시스템은 완전히 망가질 수 있다. 시행하고자 하는 해결책은 소득을 오프-예산으로 로그 하는 것이다.

사용자 스토리:

사용자는 매월 소득을 보고 할 수 있다. 이것은 그 달의 예산 금액에 영향을 주지않는다. '이번 달의 소득으로 기록하기'가 예산 카테고리 드롭다운에 나타난다.

낮은 우선순위

애플리케이션에서 리포팅 하는 게 없다

이것은 당연히 이거 자체로 매우 큰 프로젝트가 된다. 테스팅하면서 필자가 간단한 리포트들을 원했으므로 완전성을 위해 여기 추가한다.

사용자 스토리:

사용자는 자신의 지출 습관 및 예산에 대한 보고서를 볼 수 있다.

낮은 우선순위

Tags : vue javascript 

comments powered by Disqus