#
서비스 기획
2022-12-21

텍스트 박스의 유효성체크검사(vaildation) 메세지

앱 또는 웹사이트를 이용하다보면 text input box에 글자를 입력하는 경우가 다수 발생합니다.

이 때 유효성 체크 메세지를 통해서 고객에게 행동에 가이드를 제공하게 됩니다.

즉, 유효성체크 메세지는 고객이 액션을 취할 떄 필요한 정보들을 제공하는 서비스 정책이라고 할 수 있죠.

그럼 유효성 체크 메세지에 포함되는 요소들과 유효성 체크 메세지에 대해 설명드리겠습니다.

1. Text input box

텍스트를 입력하는 박스로, 키보드로 글씨를 입력하는 영역입니다.

빨간색 체크표시가 있는 곳이 바로 text input box입니다.

텍스트 인풋 박스 안에 '아이디(이메일)'이라는 텍스트가 입력되어있죠? 이 내용은 보통 박스를 클릭하면

커서가 생기면서 텍스트가 사라집니다. 이 글은 placeholder라고 명칭합니다.

2. 유효성 체크 메세지

유효성체크 메세지는 크게 2가지 종류로 구분할 수 있습니다.

1) 실시간 유효성 체크 : 서버와 통신할 필요 없이 바로 유효성 체크를 하는 것입니다.

대표적으로 비밀번호 설정의 경우, 별도의 조회가 필요없이 규칙에 맞는지를 '체크'만 하면 되기 때문에 서버와의 통신이 불필요합니다.

예시와 함께 보시면 더 이해가 쉬울거에요.

https://postfiles.pstatic.net/MjAyMjExMDlfMTg4/MDAxNjY3OTUyNTI1NDUz.f67tDVlH3ZQHKRBIJ2Pbm2rNUGkdkax3EMlWr9yel-Eg.ObUQ_wxDnAZ9v_SNhMzhif08oR0MBjv7TLQec7Tv3Q8g.GIF.valuelabskr/%EC%9C%A0%ED%9A%A8%EC%84%B1%EC%B2%B4%ED%81%AC%EB%A9%94%EC%84%B8%EC%A7%80.GIF?type=w966

위 이미지는 쿠팡의  로그인페이지입니다.

아이디(이메일)을 입력했을 때 올바르지 않은 형태일 경우에는 로그인을 클릭하지 않아도

하단 스낵바를 통해 유효성체크 메세지를 바로 표출하는 것을 볼 수 있습니다.

2) 액션을 통한 유효성 체크 :  버튼 클릭 등의 액션이 발생했을 때 유효성 체크를 하는 방식을 말합니다.

https://postfiles.pstatic.net/MjAyMjExMDlfMTYy/MDAxNjY3OTUyMzYzNTQx.8OjSOINz5fpepLLp4v-HYUo5aCAl2Lt33FYr6B6GBf4g.OwbHDtF4oKMo5ZhWia3WiT52J4s3y2_7-NMqK1JUKnEg.GIF.valuelabskr/ebs%EC%9C%A0%ED%9A%A8%EC%84%B1%EC%B2%B4%ED%81%AC%EB%A9%94%EC%84%B8%EC%A7%80.GIF?type=w966

위 이미지는 EBS 오디오 어학당 로그인 페이지입니다.

로그인정보를 입력하고 '로그인' 버튼을 눌렀을 때 유효성 검사를 실행하고, 팝업을 통해 안내문구를

표출하는 것을 볼 수 있습니다.

3.  서비스 기획 시 유효성체크 메세지 작성

서비스 구조 기획, 화면기획이 마무리되어가면 기능정의를 하는 과정을 거치게 됩니다.

유효성체크 메세지의 경우 다양한 경우의 수를 고려하여 상황에 맞는 유효성 체크 메세지를 표출할 수 있도록 정의할 필요가 있습니다.

적확한 유효성 체크 메세지를 통해 유저의 사용성을 높일 수 있기 때문입니다.

유익했다면! 이어서 읽어보기:)
TTS AI 목소리 더빙 사이트

TTS AI 목소리 더빙 사이트

기능 정의시 화면 전환 설명을 알기 쉽게 하기 위해서

화면 전환 설명을 어떻게 알기 쉽게 할까요?

지금 바로 밸류랩스와
성공적인 협력을 시작해보세요.
Subscribe to our newsletter.
Thank you! Your submission has been received!
Oops!! Something went wrong while submitting the form.