brunch

You can make anything
by writing

C.S.Lewis

by 기획하는 창업가 Nov 30. 2020

[웹기획]5단계 유효성 검사

유효성 검사(validation)란?

정의를 정리한 사전(?)을 찾을 수 없어 내가 생각하는 정의를 정리하였다.

유효성 검사는 동작시 필요한 서비스 정책이라고 할 수 있다. (무슨 뜻이지 이해가 안 되니 예를 들어보겠다.)


유효성 검사(validation) 사용 예시

웹 서비스에서 가장 기본적으로 포함되는 요소 중 하나인 가입 페이지다.

이미지. 질링스 가입 페이지

입력 창(input box) 3개, 버튼 2개, 페이지 이동 3개 정도로 단순하다고 할 수 있는 페이지다.

하지만 보는 것과 별개로 이 안에서는 많은 서비스 정책이 존재하는데 이것이 체크하는 작업이 유효성 검사이다.


이미지의 이메일 입력 창(input box)으로 설명을 이어가겠다.

이메일을 입력하는 창이기 때문에 이메일만 입력해야 한다. 하지만 모든 사용자가 기획자의 의도대로 이메일 입력 창(input box)에 이메일을 입력하지는 않는다.

사용자가 타이틀을 인지하지 못하고 이메일이 아닌 정보를 입력하는 경우가 있을 것이다. 이럴 경우 어떻게 대처해야 할까? 사용자가 서비스를 바로 사용할 수 있도록 바로 잡아줘야 한다.

즉, 잘못된 정보 입력에 따른 안내 메시지나 액션을 해야 한다.

이 같은 경우를 대비하여 기획자는 상황에 따라 1) 어떤 메시지2) 어디3) 어떻게(ex: 시간) 표시할 것인지 미리 정해야 한다.


유효성 검사(validation) 양식

1. 표로 정리하기

메시지만 표시하는 경우에 적합하다. 필자인 경우 조영수님의 블로그를 참고하여 표를 만들어서 사용 중이다.


이미지. 질링스 유효성 검사 양식


1) 상황

상황을 꼼꼼히 체크해야 한다. 복잡한 프로세스인 경우 플로우차트의 완성도에 따라서 누락되는 경우가 적어진다. 하지만 완벽한 것은 없기 때문에 기본적인 상황만 체크하고 점차 보완해가는 것도 초기에는 좋은 방법이라고 생각한다.


2) 문구

안내 문구를 정해야 한다. 안내 메시지는 간단하게 적는 걸 추천한다. 간단하게 적다 보면 사용자가 이해하지 못하는 경우도 발생할 수 있기 때문에 이점도 함께 고려해야 한다.

서비스 글쓰기의 모든 거라는 책이 있는데 이 책을 읽지는 않았지만 블로그에 일부만 정리된 내용을 보았는데 많은 도움이 되었다. 기회가 된다면 책을 구매해서 정독할 예정이다.(때문에 책에 대한 추천은 하기 이르다.)

그밖에도 인터넷에 웹 기획 글쓰기로 검색하면 관련된 좋은 포스트를 찾을 수 있다.


의외로 안 나온 내용 중에 내가 중요하다고 생각하는 점은 사용자에게 잘못된 상황만 전달하는 것이 아니라 이후에 어떤 행동을 해야 하는 정확하게 전달해야 한다.


잘못된 예시) 입력이 잘못되었습니다.

좋은 예시) 입력이 잘못되었습니다. 이메일을 입력해주세요.


3) 시나리오

메시지를 화면 어디에? 어떻게 표시할 것인지 정해야 한다. 표시하는 방법도 중요도에 따라 여러 방법으로 표시할 수 있다.


경험이 많지 않은 나는 완벽한 유효성 검사표를 작성하기 어렵기 때문에 사용자 반응을 모니터링한 후에 개선하는 방법을 채택하고 있다.

그래서 사용자가 정보를 잘못 입력하면 사내 슬랙에 메시지가 표시되도록 설정하였다. 같은 이벤트가 반복적으로 표시되면 메시지를 바꾸거나 시나리오를 변경하여 정보를 잘못 입력하는 횟수를 줄이려고 노력하고 있다.


2. 와이어프레임에 정리하기

표시 시나리오가 복합적으로 사용되고 순서가 필요한 경우 사용하는 방법이다. (프론트 비중이 높은 경우)

이미지. 와이어프레임에 정리


와이어프레임의 단점은 정보가 복잡하기 때문에 문서를 받는 사람 입장에서 복잡할 수 있고 이로 인해 누락되는 경우가 발생된다. 때문에 이렇게 정리할 경우 기획서 브리핑은 필수로 해야 한다.


레벨 업하는 방법

경험이 부족한 기획자인 경우는 레퍼런스 조사를 많이 할 것이다. 나 역시 이전에 만들어본 경험이 없는 새로운 기능일 경우 레퍼런스 조사에 많은 시간을 투자한다.

하지만 기획 단계에서 레퍼런스를 조사할 경우 한정된 시간에 레퍼런스를 조사하기 때문에 기능을 상세히 체크하지 못하거나 예전에 본 기능(서비스)을 찾기 위해 많은 시간을 소모한다.


기획서 작성에 많은 시간을 소모하게 될 경우 팀 전체의 시간을 소모하기 때문에 주의해야 한다고 생각한다.

때문에 평소에 관련된 서비스 기능을 정리해서 스크립 하는 방법을 추천한다.

나 역시 스크립을 정리한 지 3개월뿐이 안되었지만 결과에 매우 만족하고 있다.


이미지. 레퍼런스 정리


잘 정리한 레퍼런스가 중복적으로 사용될 수 있기 때문에 미리 정리하게 되면 레퍼런스 조사 시간을 많이 줄일 수 있게 된다. 기록한 내용만큼 레벨 업할 수 있는 방법이라고 생각한다.

작가의 이전글 [웹기획]4단계 와이어프레임(UI/UX)

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari