form 값 체크하기

UX,사용성 이야기 2009/05/29 16:24
프론트엔드쪽을 개발시는 분이시라면 form을 submit하기전에 javascript로 검증하는 소스를 많이 개발해 보셨을텐데요. 할때마다 귀찮기도 하고 손이 많이 가는 부분이지요
물론 공개되어 있는 '폼 벨리데이터 (Form Validator)' 라이브러리가 무수히 많기에 그중에 한넘 골라 쓰면 편하고 쉽게 처리할수도 있습니다

언젠가부터 외국의 서비스들은 javascript로 폼값 체크를 잘 하지 않더군요

facebook 로그인 폼

일단은 form을 submit시키고 서버사이드에서 검증후에 위와 같은 메세지를 뿌려줍니다
javascript로는 주로 alert 형태로 폼값 에러 메세지를 뿌리곤 하는데 어떤게 좀더 좋은 사용자 경험을 줄까요? (물론 javascript도 저런식 이쁘게 으로 뿌려줄순 있습니다)

  js 체크
  서버사이드 체크
 속도  빠르다  클라이언트 보다 느리다
 폼값 체크 회피  가능  불가능
 필요 여부
 선택사항
  반드시 필요
 서버 리소스 사용
 없음
  있음

표로 나누어서 js와 서버사이드에서 폼값을 체크할때를 비교해 봤습니다
일장일단이 있겠습니다만 전 서버사이드에서만 체크를 하는게 더 효율적이라는 생각이 드는군요

제가 생각하는 그 이유로는
  • 클라이언트에서 하게되면 서버사이드체크도 반드시 필요한데 중복되는 업무가 될수 있고
  • javascript로 체크할때 여러가지 브라우저나 디바이스에 대응하려면 소스가 길어지고 복잡해 집니다
  • javascirpt로 체크를 하면 폼값 체크로직이 보입니다
지금 생각나는건 이정도네요. 물론 클라이언트단에서 체크하는게 무조건 불편하다거나 빼야한다는건 아닙니다.필요하면 써야지요.
그리고 javascript체크여부 상관없이 서버사이드에서는 반드시 체크를 해야겠구요

개발적인 부분만 정리해봤습니다만 어쨌든 서비스를 만들면서 항상 생각해 봐야하는게 사용자의 입장이기에 각 상황에 맞게 잘 선택해야겠죠~

++
 http://channy.tistory.com/359

'UX,사용성 이야기' 카테고리의 다른 글

'윈도우 라이브 라이터'를 이용한 블로그 글쓰기  (1) 2009/06/22
위지윅에디터의 사용성  (2) 2009/06/17
form 값 체크하기  (2) 2009/05/29
Posted by 아지:)
TAG , ,
트랙백 0개, 댓글 2개가 달렸습니다

트랙백 주소 :: http://blog.uix.kr/trackback/13 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://jjeong.tistory.com jjeong 2009/05/29 18:32  댓글주소  수정/삭제  댓글쓰기

    사용자 중심의 UX 라는게 참 어려운 것 같습니다.
    QA 를 진행 하시는 테스터 분들도 성향에 따라서 서로 다른 logic 처리를 요구 하시기 때문에.. 입맛에 맞는 validation logic 을 넣는다는게 참 어협내요.. ^^;

    저는 개인적으로 client 에서는 logic 이 아닌 정말 input validation (값의 유효성)만 처리 하고.. server 에서는 logic 과 중복 일 수는 있겠으나 input validation 을 둘다 처리 하는게 좋은 방법이 아닐까 생각해 봅니다...

    사실 저는 그렇게 개발을 하거든요.. ^^*

    깔끔하게 정리된 글 잘 보고 갑니다.. :)