brunch

매거진 디자인 스토리

라이킷 106 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by chel Sep 14. 2019

회원가입 폼 유효성 검증의 중요성

실제 서비스들 회원가입 입력 폼 Validation UX 리서치

2017년 이후로 삶이 바쁘다는 핑계로 글을 쓰지 못했습니다.

2019년 절반이 지나고 나서야 2017년부터 쓰려고 에버노트에 저장해두었던 제 글을 오랜만에 꺼내어 브런치에 끄적끄적하게 되었습니다.

해당 UX 리서치는 한 때 회원가입 화면을 디자인하고 있었던 시기였고, 입력값 유효성 검증에 관심이 많아 리서치를 하게 되었습니다.

입력 폼 검증의 중요성

사용자가 입력한 데이터에 대한 검증은 앞으로 일어날 수 있는 오류 및 불확실성을 방지하기 위한 가이드 역할을 해주기 때문에 입력 폼 검증은 특히 회원가입에 있어 매우 중요하다고 생각된다.

사용자가 낼 수 있는 에러를 미리 파악해서 옳은 방향으로 안내해준다는 것은 정말 좋은 일이나...

입력 폼 검증을 제대로 서비스 측에서 해주지 못한다면 오히려 입력하는 데 있어 사용자에게 큰 혼란을 가져다줄 수 있고 이로 인해 이전보다 더 많은 에러나 이탈률이 생길 수 있어 매우 조심스럽게 접근을 해야 된다.

제대로 된 입력 폼 검증을 하기 위해서는 아래 크게 3가지 질문들을 던지면서 설계를 해야 한다.

1. 옳은 시간과 적합한 장소에서 에러에 대해 알려주고 있는가?

에러는 어느 시점부터 보여주는가?

- 입력 폼을 누른 순간부터 항상 에러가 떠있다.

- 입력하는 도중 실시간으로 에러가 뜬다.

- 입력하는 도중에는 노출 안되고 입력을 잠깐 멈췄을 경우 에러가 뜬다.

- 입력 후 다음 폼으로 넘어갔을 때 에러가 뜬다.

입력된 데이터 검증은 어느 시점부터 하는가?

- 입력 폼을 누른 순간부터 데이터 검증을 한다.

- 입력하는 도중에 검증을 한다.

- 입력 후 다음 폼으로 넘어갔을 때 검증을 한다.

2. 메지시를 전달하기 위해 올바른 컬러를 사용하고 있는가?

에러 텍스트 컬러는 명확한가?

도움말 텍스트 컬러는 명확한가?

3. 명확하고 쉽게 메시지를 전달하고 있는가?

무엇이 잘못되었고 어떻게 수정해야 되는지 명확하게 알려주는가?

옳은 정보를 입력했을 때도 옳다고 알려주는가?

위의 질문들을 바탕으로 내가 자주 쓰는 서비스들의 회원가입 폼 입력값 유효성 검증에 대한 평가를 실시하였고 좋았던 혹은 불편한 UX가 있는지 확인해보기로 하였다. (2017.1월 기준의 회원가입 화면을 바탕으로 테스트하였고, 다소 시간이 지났기에 화면 플로우나 GUI가 변경되었을 가능성도 있음. 최근 화면 업데이트된 서비스가 있다면 따로 명시하거나 업데이트해서 올림)

국내 커머스

11번가

(2017년 기준 화면 / 최근에는 통합 T아이디로 화면 변경됨)

2017년 version 11번가

Q1: 옳은 시간과 적합한 공간에서 에러 및 입력값 검증에 대해 알려주고 있는가?

에러 메시지는 폼 입력하는 도중에 노출된다.

입력한 데이터 값에 대한 검증 또한 입력 도중 검증한다.

=> 실시간으로 에러와 입력한 데이터 값을 동시에 검증한다.

이메일, 전화번호 같은 경우 다 완성하기 전까지 유효하지 않다는 빨간 에러 메시지가 계속 떠 있어 심리적으로 불안했다.

하지만 비밀번호 같은 경우 실시간 입력 폼 검증이 나름 큰 도움이 되었다.

Q2: 메시지를 전달하기 위해 올바른 컬러를 사용하고 있는가?

에러는 붉은색.

도움말 텍스트 컬러 및 옳은 정보에 대한 검증 컬러는 푸른색을 쓰고 있기는 하나 혼돈돼서 사용되고 있었다.

아래 아이디 입력 폼에서 입력하기도 전에 붉은 에러 메시지를 보여주는데 내가 뭔가 잘못했나 느끼게 해 준다. 사실 해당 케이스는 에러가 아니라 가이드 메시지가 노출되어야 한다. 해당 서비스는 도움말 메시지 색상이 제대로 구분이 되어 있지 않았다. 에러, 도움말 메시지, 검증된 메시지 셋다 올바른 컬러 사용을 했다면 덜 헷갈렸을지도 모른다.

입력 시작할 경우 붉은색으로 나와 에러 메시지 같아 보인다. 입력 하기 전은 검증된 메시지로 사용되던 푸른색이 노출된다.

Q3: 명확하고 쉽게 메시지를 딜리버 하는가?

무엇이 잘못됐고 고쳐야 되는지 명확하게 알려주었고 옳은 정보를 입력했을 경우 옳다고 알려주어서 명확성에 대해서는 좋았다. 입력하는 도중 검증을 하기 때문에 키보드 타이핑을 할 때마다 실시간으로 에러의 원인을 알려주었고 이로 인해 옳은 정보를 입력하고 다음 질문으로 넘어갈 수 있어 좋았다.

11번가 정리:

실시간으로 입력 도중 데이터를 검증해서 에러를 최소화하려는 의도는 좋았으나, 사용자가 입력하고 있는 상태에서 에러가 아닌데 에러로 인지하여 붉은 에러 메시지를 실시간으로 보여주니 매우 부담스럽고 가끔 혼란스러웠다. 입력 하나하나 신경 쓰다 보니 회원가입 완료까지 도달하는데 시간이 생각보다 꽤 오래 걸리는 편이었다.

쿠팡

(2019년 기준 화면)

Q1: 옳은 시간과 적합한 공간에서 에러 및 입력값 검증에 대해 알려주고 있는가?

입력한 데이터 값에 대한 에러 및 데이터 검증은 입력 후 다음 폼으로 넘어갔을 때 검증을 한다. 이런 방법을 선택하는 서비스들에서 공통적으로 볼 수 있는 단점:

한 번이라도 입력 폼이 focus가 되었다면 그 항목을 채우지 않은 상태에서 다른 항목으로 이동할 경우 에러로 인지한다.

에러 에러

Q2: 메시지를 전달하기 위해 올바른 컬러를 사용하고 있는가?

에러는 붉은색으로 명확하게 노출되고 있으며 도움말 텍스트는 따로 노출해주고 있지 않다.

검증된 데이터 값은 체크 마크로 노출해주고 있어 직관적이다.

Q3: 명확하고 쉽게 메시지를 딜리버 하는가?

무엇이 잘못됐는지 에러 메시지를 명확하게 알려주지만 어떻게 고쳐야 할지 자세히 알려주지는 않는다.

다음 폼으로 넘어갔을 때 이전 항목이 올바르게 작성됐을 경우 그때 입력 폼 오른쪽에 파란색 체크표시로 명확하게 명시를 해준다.

쿠팡 정리:

입력 후 다음 폼으로 넘어갔을 때 데이터를 검증해서 오히려 사용자 에러가 뒤늦게 많이 나타나는 단점이 있었다. 비밀번호 입력 폼이 조금 아쉬웠다. 처음 입력하기 전에는 비번 규칙 가이드 메시지가 명확하게 하단에 노출되었으나, 한 번이라도 에러가 뜰 경우 가이드 메시지가 사라져서 비밀번호 규칙이 뭔지 생각이 안나는 단점 또한 있었다. 비밀번호 입력 폼이라도 실시간 검증이 되었다면 훨씬 편리했을 것 같다.

비밀번호 에러 또한 다음 입력 폼으로 넘어간 후 검증해주는 단점이 있다.

티몬

(2019년 기준 화면)

Q1: 옳은 시간과 적합한 공간에서 에러 및 입력값 검증에 대해 알려주고 있는가?

비밀번호 폼처럼 입력하는 도중에 검증을 하는 항목도 있고 아이디, 이메일 같은 폼은 다음 항목으로 넘어갔을 때 데이터 검증을 한다.

입력 도중 데이터를 검증하는 비밀번호 같은 경우, 비밀번호 확인란에 비밀번호를 재입력하는 도중 계속 '설정하신 비밀번호와 다릅니다'라는 에러 메시지가 비밀번호 입력을 모두 마무리할 때까지 노출되고 있어 데이터 검증하는 데 있어 다소 아쉬운 부분이 있었다.

설정하신 비밀번호와 다릅니다.

Q2: 메시지를 전달하기 위해 올바른 컬러를 사용하고 있는가?

도움말 메시지, 에러 메시지, 검증된 데이터 값에 대한 메시지의 색상 차이가 없고 다 에러 표시할 때 사용되는 붉은색이 노출되고 있어 혼란을 주었다.

아래 이미지를 보면 모두 에러 메시지처럼 보이는데 자세히 보면 역할이 다르다.

도움말 메시지: 아이디는 4자 이상이어야 합니다.

검증된 데이터 값 메시지: 사용 가능한 아이디입니다.

에러 메시지: 비밀번호를 입력해주세요. (입력 폼 한번 focus 되었다 다른 폼 이동했을 경우 채워달라는 에러)

Q3: 명확하고 쉽게 메시지를 딜리버 하는가?

에러 메시지는 명확하게 보여주고 있으나 올바른 정보 입력에 대한 검증이 특정 폼들은 실시간으로 일어나지 못하고 다음 폼으로 넘어간 후 검증되는 부분에 있어 다소 아쉬웠다.

비밀번호 입력 같은 경우 실시간 검증을 하고 있었으나, 사용자가 어떤 부분에서 비밀번호 규칙을 충족시키지 못했는지 내가 직접 확인할 수 없어 아쉬웠고 비밀번호 규칙을 충족시켜 데이터 값이 올바를 경우 따로 체크마크 라던지 검증되었다는 메시지가 노출되지 않아 이 정보 값이 맞나 한 번쯤 의심을 해보게 되었다.

티몬 정리:

각종 컬러 사용 및 메시지 전달에 대한 명확성이 떨어져서 다소 아쉬웠다. 에러 메시지, 도움말 메시지에 대한 색상 차이가 없어 모두 에러처럼 보여 부담스러웠고, 검증된 데이터 값에 대한 명확한 표시가 없거나 있더라도 색상이 붉은색이라 에러 메시지로 보이는 부분이 아쉬웠다. 해당 정보가 정상 값인지 확인하기가 힘들었고 이런 부분에 있어서는 쿠팡의 '체크마크' 표시가 매우 직관적인 것 같다.

소셜

밴드

(2019년 기준 화면)

Q1: 옳은 시간과 적합한 공간에서 에러 및 입력값 검증에 대해 알려주고 있는가?

입력한 값에 대한 에러 및 데이터 검증은 입력 후 다음 폼으로 넘어갔을 때 검증을 한다.

위에서 언급했던 것처럼 쿠팡도 이와 같은 방식으로 검증을 하는데, 쿠팡 외 다수의 서비스들은 한 번이라도 입력 폼이 포커스가 되었다면 그 항목을 채우지 않은 상태에서 다른 항목으로 이동할 경우 에러로 처리하는 경우가 비교적 많은 편이다.

이에 반면, 밴드는 이런 입력 폼 포커스 이슈를 잘 해결한 듯하다. 한 번이라도 포커스 되었던 폼에 사용자가 데이터를 인풋 하지 않았더라면, 에러로 인지하지 않는다.

Left: 쿠팡 / Right: 밴드 (비번 입력 필드를 눌렀다가 이메일 필드로 다시 cursor을 옮김)

Q2: 메시지를 전달하기 위해 올바른 컬러를 사용하고 있는가?

비밀번호 입력할 때 도움말 메시지는 회색, 에러일 경우 붉은색으로 각 상황에 맞는 컬러로 인지가 쉬웠다.

Q3: 명확하고 쉽게 메시지를 딜리버 하는가?

무엇이 잘못되었는지 에러를 명확하게 알려주고 있지만, 옳은 정보 입력에 대한 검증은 따로 해주지 않았던 점이 살짝 아쉬웠다. 데이터 값에 대한 유효성을 검증을 하는 상황이라면 옳은 정보를 입력했을 때도 옳다고 알려주는 게 좋은 UX라고 생각을 한다.

Left: 각 메시지에 따른 옳은 컬러 사용법 / Right: 데이터 검증 후 별다른 표시가 없음.

밴드 정리:

입력한 값에 대한 데이터 검증을 다음 폼으로 넘어갔을 때 검증을 하는 서비스 중, 한 번이라도 포커스 되었던 폼에 사용자가 데이터를 인풋 하지 않았더라면, 에러로 인지하지 않는 부분이 참 마음에 들었다. (리서치했던 타 서비스들은 다 붉은색 에러로 인식해서 다소 아쉬웠다)

트위터

(2019년 기준 화면)

Q1: 옳은 시간과 적합한 공간에서 에러 및 입력값 검증에 대해 알려주고 있는가?

입력하는 도중에 실시간으로 에러 및 데이터 유효성을 검증한다.

실시간으로 검증해주는 트위터

입력하는 도중에 검증하는 방법을 사용하는 서비스 중 트위터가 제일 잘 만들었다고 생각이 들었고 쓰면서 다른 서비스보다 덜 부담스럽게 가입할 수 있다는 장점이 있다고 생각하였다. 트위터는 화면 당 집중할 수 있는 입력 폼이 정해져 있기 때문에 입력 도중에 검증을 실시간으로 해도 부담감이 일단 적었다.

Q2: 메시지를 전달하기 위해 올바른 컬러를 사용하고 있는가?

에러일 경우 명확하게 붉은색 +! 표시로 수정사항을 알려주고 있고, 옳은 정보를 입력했을 경우 초록색 체크 마크로 명확한 표시를 해주고 있다.

Q3: 명확하고 쉽게 메시지를 딜리버 하는가?

입력하는 도중 실시간 검증을 하기 때문에 키보드 타이핑을 할 때마다 에러의 원인을 알려준다. 옳은 정보를 입력하고 다음 질문으로 쉽게 넘어갈 수 있어 좋았다. 옳은 정보에 대한 검증도 초록색 체크 마크로 에러와 다른 형태 및 색상으로 노출해주고 있어 직관적이다.

트위터 정리:

입력 도중 에러 및 데이터 검증을 하는 서비스들 중 제일 잘 표현해주는 대표적인 사례인 것 같다. 각 입력 폼에 따라 데이터 검증 시기가 조금씩 다르다. 이름 같은 경우 제약이 없다 보니 입력하는 순간 데이터가 실시간으로 검증되고, 전화번호나 이메일 같은 경우 특정 자릿수 이상 입력하면 그때부터 데이터 검증을 해준다. 메시지를 전달하기 위해 올바른 컬러를 사용하여 에러인지 성공인지 직관적으로 보여주어 부담 없이 회원 가입하기에 좋았다.

이 외 더 많은 리서치들이 있었지만... 너무 길어지는 것 같아 나중에 기회가 되면 추가적으로 글을 쓸 예정이다.

마치며

Chel의 생각...

그럼 언제쯤 에러 및 데이터 검증하는 게 맞을까?

어느 정도의 실시간 Validation은 필요하다고 생각하지만, 입력하지도 않았는데 포커스 되는 순간 입력 폼에 에러가 뜨는 건 너무 강압적인 것 같다는 생각이 들었다. 유저가 어느 정도 interact 한 후 자연스럽게 값에 대한 데이터 유효성을 확인해줄 수 있다면 얼마나 좋을까?

1) 유저들에게 정보를 입력할수 있는 충분한 시간을 주고 난뒤에 에러 메시지를 보여주는게 중요하다.

2) 에러가 혹시나 생겼을 경우, 유저가 잘못된 정보를 수정했을 때 실시간으로 에러 메시지는 업데이트가 되면서 옳은 타이밍에 에러 메시지를 더이상 보여주지 말아야 한다. (여기서 키포인트: 키보드 입력하는 매순간을 측정하여 에러가 수정되었을 경우 즉각반응이 있어야함)

데이터 검증에 있어서는 입력하는 중이든 그 후든 타이밍 이슈가 항상 생길 수도 있다고 생각한다.

입력 중 그리고 입력 후에 대한 데이터 검증은 직접 서비스들 리서치하면서 많이 찾았지만, 둘이 하이브리드(hybrid)로 합치는 방법에 대해서 제대로 활용하는 곳을 아직 못 본 것 같다.

그래서 리서치하면서 찾게 된 아티클 중, “Reward early, Punish late”이라는 글을 보게 되었다. (원문 블로그 링크)

올바른 값을 입력했을 경우 미리 보상을 해주고, 잘못된 값을 입력했을 경우 후에 벌하는 개념이다.

- 이미 유효한 상태에서 데이터 입력할 경우, 데이터 입력을 다 한 후 막바로 유효성을 체크한다.

- 이미 유효하지 않는 상태에서 데이터 값을 입력할 경우, 데이터 입력하는 도중에 유효성을 체크한다. (ex. 이미 에러가 난 입력 폼에 있는 데이터를 수정할 경우 그때 실시간으로 유효성을 체크한다)

실시간 데이터 검증은 제대로 된 검증 타이밍을 잡지 못할 경우 오히려 사용자들에게 혼란을 가져다줄 수 있어 참 어려운 부분인것 같다.

Reference

Inline validation in forms - designing the experience

Inline Validation in Web Forms