폼 필드 검증은 모든 앱이나 웹 UX 디자인의 핵심입니다. 이는 사용자의 오류를 방지하고, 온라인 양식을 작성할 때 든든한 동반자처럼 매끄러운 경험으로 안내해 줍니다. 디자인 단계에서 폼 검증을 위한 프로토타입을 만들면 디자이너가 사용자 흐름에 대한 귀중한 피드백을 수집하고, 올바른 정보가 입력되도록 보장하며, 결과적으로 시간과 자원을 절약할 수 있습니다.
이를 위해서는 조건 논리를 디자인에 완벽하게 적용할 수 있는 도구가 필요합니다. 이 글에서는 ProtoPie로 입력 필드를 프로토타이핑하는 방법을 안내합니다. 더 좋은 점은? 자신의 기기 기본 키보드로 실제 텍스트 입력을 사용해 프로토타입을 쉽게 테스트할 수 있다는 것입니다.
개요
필수 입력 필드 검증이란?
ProtoPie에서 필수 입력 필드 검증을 프로토타이핑하는 방법
범위 검사가란?
ProtoPie에서 범위 검사를 프로토타이핑하는 방법
일관성 검증이란?
ProtoPie에서 일관성 검증을 프로토타이핑하는 방법
데이터 형식 검증이란?
ProtoPie에서 데이터 형식 검증을 프로토타이핑하는 방법
패턴 매칭이란?
ProtoPie에서 패턴 매칭을 프로토타이핑하는 방법
ProtoPie로 더 나은 사용자 경험을 설계하세요
시작하기 전에
이 튜토리얼에 직접 참여하려면 아래의 샘플 .pie를 다운로드하고 장면을 전환해 보세요. 먼저 빈 프로젝트부터 시작하는 것을 권장합니다. 재미있게 연습한 다음, 완성본을 살펴보며 얼마나 잘하고 있는지 확인해 보세요. 프로토타이핑을 즐겨 보세요!
필수 입력 필드 검증이란?
필수 입력 필드 검증은 폼이 제출되기 전에 입력 필드가 반드시 채워져 있어야 함을 보장하는 폼 검증 기법입니다. 사용자가 필요한 데이터를 제공하도록 하는 방법이죠. 이 검증은 일반적으로 빨간색 별표 (``*``)로 표시되며, 필수 필드를 나타내는 일반적인 방법입니다.
이 기능은 텍스트, 검색, URL, 전화번호, 이메일, 비밀번호, 날짜 선택기, 숫자, 체크박스, 라디오, 파일 등 다양한 입력 유형에서 사용됩니다. 이 검증은 불완전한 폼 제출을 방지하여 사용자 경험을 개선하는 데 도움이 됩니다. ProtoPie의 입력 레이어 기능을 사용하면 이 과정이 아주 쉽습니다.
ProtoPie에서 필수 입력 필드 검증을 프로토타이핑하는 방법
이제 필수적인 이름 입력을 요청하는 텍스트 필드 예제를 살펴보겠습니다. 초기 프로젝트에는 이미 일부 디자인과 인터랙션이 준비되어 있습니다.
필수 입력 필드 검증
디자인 측면에서는 화면에 오류 메시지가 표시됩니다. 이는 나중에 애니메이션으로 사용자 입력에 따라 나타나거나 숨겨지도록 할 것입니다.
인터랙션 측면에서는 "Focus" 트리거를 사용해 "Text Field"의 기본 상태와 포커스 상태를 설정해 두었습니다.
먼저 오류 메시지를 숨겨 봅시다. 불투명도를 0으로 설정하면 됩니다.
오류 메시지의 불투명도를 0으로 설정합니다.
무언가를 입력한 뒤에는 텍스트 필드 바깥을 클릭하거나 키보드의 Enter 키를 누르세요. 이 시점에서 텍스트 필드가 여전히 비어 있는지 확인합니다. 텍스트 필드가 비어 있다면, 텍스트 필드에 오류 상태를 표시하고 아래에 오류 메시지를 보여줍니다.
“Focus Out” 트리거 아래에 조건을 추가해 봅시다. 조건은
Text of Text Field = "NONE"으로 설정합니다. 이 조건은 텍스트 필드가 비어 있는지 확인합니다.
텍스트 필드가 비어 있는지 확인하는 조건.
조건이 충족되면 이제 오류 상태를 애니메이션으로 표현할 차례입니다.
"Error Message" 레이어에 "Opacity" 응답을 추가하고, 불투명도를 100으로 설정합니다.
추가로 "Text Field" 레이어에 "Border" 응답을 포함하고, 테두리 색상을 빨간색으로 지정합니다.
오류 상태를 애니메이션으로 표현합니다.
다음으로, 텍스트 필드에 내용이 입력되면 오류 메시지가 사라지도록 추가 인터랙션을 넣어 봅시다. 이를 위해 “Detect” 트리거를 활용하겠습니다. Detect 트리거는 대상 객체의 변경 사항을 지속적으로 감시합니다.
"Text Field" 레이어에 "Detect" 트리거를 추가하고, 그 "Text" 속성을 감지해 봅시다. (입력 레이어에서 Text 속성은 필드 안의 내용을 의미합니다)
다음으로 텍스트 필드가 채워졌는지 확인하는 조건을 만듭니다.
Text of Text Field ≠ "NONE"조건을 사용하세요.이 조건 아래에서 오류 메시지에 “Opacity” 응답을 적용하고 0으로 설정해 사라지게 합니다.
텍스트 필드의 내용을 감지합니다.
범위 검사가란?
범위 검사는 입력 데이터가 미리 정의된 범위 안에 들어오는지 확인하는 입력 검증의 한 유형입니다. 범위 검사의 몇 가지 예는 다음과 같습니다.
나이: 예를 들어, 중학생은 보통 11세에서 16세 사이입니다. 컴퓨터는 11세에서 16세 사이의 숫자만 받도록 설정할 수 있습니다.
지리 데이터: 위도와 경도는 지리 데이터에서 흔히 사용됩니다. 위도 값은 -90에서 90 사이여야 하고, 경도 값은 -180에서 180 사이여야 합니다. 이 범위를 벗어난 값은 모두 잘못된 값입니다.
문자열: 문자열의 최소 및 최대 길이를 확인합니다. 예를 들어 비밀번호가 8자에서 16자 사이인지 확인합니다.
ProtoPie에서 범위 검사를 프로토타이핑하는 방법
예제 프로젝트에서 “Range Checking” 장면으로 이동해 봅시다.
중학생이 자신의 나이를 입력해야 하며, 그 값이 11세에서 16세 범위에 들어가야 하는 예제를 살펴보겠습니다.
범위 검사
이 인터랙션은 첫 번째 예제를 바탕으로 사용자의 입력 요구 사항을 확인합니다. 이 시나리오의 사전 설정된 인터랙션은 인터랙션 패널의 "Age" 그룹 안에서 찾을 수 있습니다.
이 텍스트 필드에서 사용자가 포커스를 벗어날 때 입력값을 ProtoPie가 검증하도록 해 봅시다.
“Focus Out” 트리거 아래에 조건을 하나 더 추가합니다. 사용자가 11보다 작은 나이를 입력하는 경우를 처리하도록
Text of Text Field - Age < 11로 조건을 설정하세요. 다음 응답을 구현합니다.
값이 11보다 작은지 확인하는 조건.
"Error Message - Age" 레이어에 "Opacity" 응답을 추가하고, 불투명도를 100으로 설정합니다.
"Text Field - Age" 레이어에 "Border" 응답을 포함하고, 테두리 색상을 빨간색으로 지정합니다.
11세 미만이면 오류 상태가 트리거됩니다.
Text of Text Field - Age > 16를 사용해 16세보다 큰 나이를 확인하는 또 다른 조건을 만듭니다. 앞선 조건과 동일한 인터랙션을 복사하여 붙여넣어 구현하세요. 이렇게 하면 사용자가 16세보다 큰 나이를 입력했을 때 오류 메시지가 표시됩니다.
나이가 16세를 초과해도 동일한 오류 상태가 트리거됩니다.
두 번째 예제로 넘어가서 비밀번호 길이를 검증해 봅시다. 요구 사항은 비밀번호가 8자에서 16자 사이여야 한다는 것입니다.
비밀번호는 일정한 길이를 충족해야 합니다.
인터랙션 패널의 “Password” 그룹에서 미리 만들어진 인터랙션을 찾을 수 있습니다.
이제 “Focus Out”에 대한 오류 상태를 설정해 봅시다.
첫 번째 조건은 비밀번호가 너무 짧은지 확인하는 데 사용됩니다. 따라서
length(Text Field - Password.text) < 8를 사용합니다.length()는 문자열의 길이를 확인하는 ProtoPie의 함수입니다.
비밀번호가 너무 짧은지 확인하는 조건.
두 번째 조건은 비밀번호가 너무 긴지 확인하는 것입니다:
length(Text Field - Password.text) > 16
비밀번호 길이가 너무 짧거나 너무 긴지 확인하는 조건.
일관성 검증이란?
일관성 검증은 입력된 데이터가 논리적으로 일관적인지 보장하는 데이터 검증 유형입니다. 데이터 내부의 충돌을 확인하며, 특히 데이터에 대해 작성된 규칙이 서로 모순되는지 검토합니다. 예를 들면 다음과 같습니다.
비밀번호 확인: 다시 입력하는 비밀번호 필드는 이전에 입력한 비밀번호와 일치하는지 확인할 수 있습니다.
주문 및 배송 날짜: 배송 날짜가 발송 날짜 이후인지 확인합니다. 마찬가지로 패키지의 발송 날짜는 주문 날짜보다 이전일 수 없습니다.
ProtoPie에서 일관성 검증을 프로토타이핑하는 방법
사용자가 확인을 위해 비밀번호를 다시 입력해야 하는 예제를 살펴보겠습니다.
일관성 검증
예제 프로젝트에서 “Consistency Checking” 장면으로 이동합니다. 비밀번호 필드에 대한 인터랙션은 이미 준비되어 있습니다. 이제 “Confirm Password” 필드에 집중해 봅시다.
인터랙션 패널의 “Confirm Password” 그룹에서 “Mouse Out” 트리거를 찾습니다.
Text of Text Field - Confirm Password ≠ Text of Text Field - Password일 때를 확인하는 조건을 추가합니다. 이 조건은 두 비밀번호가 일치하지 않음을 의미합니다.
두 비밀번호 필드의 내용을 비교하는 조건.
이 조건 아래에서 이제 텍스트 필드의 테두리를 빨간색으로 바꾸고 오류 메시지를 표시하여 오류 상태를 설정할 수 있습니다.
두 필드에 입력한 비밀번호가 일치하지 않을 때의 오류 상태를 추가합니다.
데이터 형식 검증이란?
데이터 형식 검사는 입력된 데이터가 예상되는 데이터 형식과 일치하는지 보장하는 입력 검증의 한 형태입니다. 예를 들어,
나이: 나이 입력 필드는 보통 숫자만 허용합니다. 예를 들어 온라인 양식을 작성할 때 나이 필드는 숫자가 아닌 모든 입력을 거부합니다.
신용카드 번호: 신용카드 번호를 입력할 때는 숫자만 허용됩니다. 문자나 특수 문자는 모두 거부됩니다.
도시 이름: 일부 애플리케이션에서는 도시 이름 필드가 문자만 허용합니다. 예를 들어 “Toronto123” 같은 입력은 거부하고, “Toronto”와 같은 알파벳 입력만 허용합니다.
ProtoPie에서 데이터 형식 검증을 프로토타이핑하는 방법
이번에는 입력 필드가 정수 수량을 요청하는 실용적인 시나리오를 살펴보겠습니다.
데이터 형식 검증
이 예제는 샘플 프로젝트 내의 "Data Type Validation" 장면에 있습니다.
"Mouse Out" 트리거 아래에 사용자의 입력을 검증하는 조건을 만듭니다.
이 조건에서는 숫자가 아닌 입력을 엄격하게 거부해야 합니다. 다음 조건을 사용하세요: `regexextract(Text Field``.text,"[0-9]+") ≠ Text of Text Field```
값이 숫자인지 확인하는 조건.
regexextract(): 지정된 정규 표현식 패턴과 일치하는 첫 번째 부분 문자열을 추출하는 데 사용되는 함수입니다.``Text Field
.text: "Text Field" 입력의 텍스트 내용을 의미합니다."[0-9]+": 정규 표현식 패턴입니다. 의미는 다음과 같습니다.
[0-9]: 0부터 9까지의 숫자 중 하나와 일치합니다.+: 앞선 패턴(이 경우[0-9])이 연속해서 한 번 이상 나타나야 함을 지정합니다.
식의 왼쪽(regexextract(Text Field.text,"[0-9]+"))은 입력된 텍스트에서 숫자로 이루어진 첫 번째 하위 문자열을 추출합니다. 예를 들면 다음과 같습니다.
"123abc"를 입력하면 "123"을 반환합니다.
"def456"를 입력하면 "456"을 반환합니다.
이 조건은 추출된 숫자 하위 문자열이 "Text Field"의 원래 텍스트와 일치하지 않는지 확인합니다. 일치하지 않으면 입력에 숫자가 아닌 문자가 포함되어 있음을 의미합니다.
이 조건 아래에서는 텍스트 필드의 테두리 색상을 빨간색으로 바꾸고 오류 메시지를 표시하여 지정된 조건에 대한 오류 상태를 설정할 수 있습니다.
*상자 색상을 조정하여 오류 메시지를 표시합니다. *
패턴 매칭이란?
패턴 매칭은 입력 검증에서 특정 패턴이나 형식을 정의한 뒤, 입력 데이터가 이 패턴을 따르는지 확인하는 것입니다. 일반적으로 소프트웨어 개발에서는 정규 표현식(regex)을 이 목적에 사용합니다.
정규 표현식은 일반적으로 regex로 알려져 있으며, 문자열 내에서 특정 문자나 단어를 검색하는 데 사용할 수 있는 패턴을 지정하는 방식으로 작동합니다. 코드를 깊이 파고드는 것이 취향이 아니라면, 언제든 AI를 활용해 필요한 코드를 생성할 수 있습니다.
패턴 매칭을 보여 주는 몇 가지 예는 다음과 같습니다.
이메일 검증: 이메일 주소의 유효성을 확인하려면 입력이 일반적인 이메일 패턴을 따르는지 검토해야 합니다. 여기에는 "@" 기호 앞의 문자들, 그 뒤를 잇는 추가 문자들, 그리고 마침표로 끝나는 구성이 포함될 수 있습니다. 마침표 뒤에는 a부터 z까지의 글자가 최소 두 개 이상 있어야 합니다.
비밀번호 검증: 비밀번호를 검증할 때는 특정 패턴을 따라야 하는 경우가 많습니다. 예를 들어, 비밀번호에는 최소 하나의 숫자, 하나의 대문자, 하나의 소문자가 포함되어야 하며 길이는 최소 8자여야 할 수 있습니다.
정규 표현식에 대해 더 자세히 알고 싶다면 이 빠른 가이드를 참고하세요. 코딩이 익숙하지 않더라도, 필요한 코드를 생성하도록 AI에게 도움을 요청해 보세요!
ProtoPie에서 패턴 매칭을 프로토타이핑하는 방법
샘플 프로젝트의 "Pattern Matching" 장면에서 비밀번호 패턴 검사를 살펴보겠습니다. 이 예제에서는 비밀번호에 최소 1개의 대문자와 3개의 숫자를 포함해야 합니다.
패턴 매칭
"Mouse Out" 트리거 아래에 첫 번째 조건을 만들어 비밀번호가 대문자 요구 사항을 충족하는지 확인합니다. 조건은 다음과 같이 설정합니다:
regexextract(Text Field - Password`.text,"[A-Z]") = "NONE”```
대문자가 최소 하나 있는지 확인하는 조건.
[A-Z]패턴만으로 문자열에서 첫 번째 대문자를 성공적으로 찾습니다. 예를 들어 "abcDE"를 입력하면 "D"를 반환합니다. 이 함수는 첫 번째 결과를 찾으면 검사를 중단하지만, 무엇이든 반환한다면 입력에 적어도 하나의 대문자가 포함되어 있다는 뜻입니다."NONE"을 반환하면 조건이 충족되지 않은 것이며, 실패를 의미합니다. 이 조건 아래에서는 필드의 오류 상태를 애니메이션으로 표현할 수 있습니다.
두 번째 조건에서는 다음 요구 사항을 사용해 비밀번호에 최소 3개의 숫자가 포함되어 있는지 확인합니다:
regexextract(Text Field - Password`.text,"^(.?[0-9]){3,}.$")= "NONE”```
숫자가 최소 세 개 있는지 확인하는 조건.
^: 문자열의 시작을 나타냅니다.(.*?[0-9]): 숫자가 뒤따르는 임의의 문자 시퀀스(비탐욕적)를 나타냅니다.{3,}: 앞선 패턴(.*?[0-9])이 최소 세 번 나타나야 함을 지정합니다..*: 남아 있는 모든 문자를 나타냅니다.$: 문자열의 끝을 나타냅니다.
이 함수를 통해 ProtoPie는 지정된 요구 사항을 충족하는 문자열을 엄격하게 검사하고 반환하도록 지시받습니다. 만약 "NONE"을 반환하면 조건이 충족되지 않은 것이므로 실패를 의미합니다. 이런 경우 비밀번호 필드에 대한 오류 상태를 애니메이션으로 표현해야 합니다.
ProtoPie로 더 나은 사용자 경험을 설계하세요
폼 필드는 ProtoPie가 제품 디자인을 훨씬 더 효율적으로 만들어 주는 수많은 요소 중 하나일 뿐입니다. 필수 입력 검증, 범위 검증, 일관성 검증, 데이터 형식 검증, 패턴 매칭 같은 검증 패턴을 적용하는 일은 매우 쉽습니다.
오늘 ProtoPie의 고품질 프로토타이핑 기능을 활용하여 디자인의 전반적인 효과를 높여 보세요!
