[프로젝트 일지] 211206(월) - UX 개선

목차

• UX 개선

  • 이름 입력창 공백 제한

  • 이름 입력창 글자 수 최대 5자로 제한

  • 천 단위 구분 기호 추가

  • 금액 인풋창에서 숫자 맨 앞자리에 0이 사라지도록

UX 개선

이름 입력창 공백 제한

현재 이름 입력창에 공백이 들어올 수 있어, 결과 부분에서 금액을 보내는 사람과 받는 사람을 식별할 수 없기 때문에 정규 표현식을 사용해서 공백을 제한했다. 이름 입력창이 공백으로 구성된 경우만 제한할까 생각했는데, a(공백)(공백)과 a(공백)(공백)(공백)이 결과 부분에서 동일하게 보이기 때문에 /\s/g를 사용하여 문자열 전체에 대해서 공백을 확인하도록 했다.

이름 입력창 글자 수 최대 5자로 제한

현재 이름 입력창의 글자 수에 제한이 없다. 자유도가 높다는 장점이 있지만, 이름의 글자 수를 막지 않을 경우 결과 부분에 영향을 주어 사용성을 해칠 수 있었다. 그래서 이름 입력창의 글자 수를 제한했다. 글자 수의 기준을 어떻게 할지 찾아보다가 우리 나라 출생신고 관련 법률에서 근거를 찾을 수 있었다.

4. 이름의 기재문자수의 제한

가. 이름은 그 사람을 특정하여 주는 공적인 호칭으로서 다른 사람과의 관계에서도 상당한 이해관계를 가지게 되므로 난해(난해)하거나 사용하기에 현저히 불편을 일으키는 것은 쓸 수 없다고 판단되므로 이름자가 5자(성은 포함되지 않는다)를 초과하는 문자를 기재한 출생신고는 이를 수리하지 아니한다.

[가족관계등록예규 제509호, 시행 2017. 6. 29.]

현재 가족관계등록예규에 따르면 출생신고를 할 때, 성을 제외한 이름이 5자를 초과하면 등록이 되지 않는다. 이를 우리 애플리케이션에서도 적용하여, 이름 입력창의 글자 수를 최대 5자로 제한했다.

천 단위 구분 기호 추가

금액의 단위가 큰 경우, 더치페이 결과를 쉽게 이해할 수 없다는 의견이 있었다. 이를 해결하기 위해서 결과 부분에 천 단위 구분 기호를 추가하면서 내장 toLocaleString() API를 사용했다. 사용자의 지역 설정에 따라 유동적으로 활용하기 위해서 다른 옵션 값은 따로 추가하지 않았다.

금액 인풋창에서 숫자 맨 앞자리에 0이 사라지도록

위 사진처럼 숫자를 입력했을 때, 0이 남아있는 문제가 있었다. 사실 이 부분은 인지하고 있었지만, 애플리케이션을 이용하는데 큰 문제가 아니라고 판단하여 괜찮다고 생각했다. 하지만, UT를 진행하면서 이 부분에 대한 의견이 여러 개 나와 개선 작업을 진행했다. 금액 인풋창에 onFocus 속성을 추가하여 정규 표현식을 사용해 인풋창이 0으로 시작하면 그 값을 빈 문자열로 초기화하도록 했다.