소개
프로토타입에서 사용자가 입력한 내용이 올바른지 확인할 수 있는 텍스트 필드를 만드는 방법이 궁금하신가요? 이를 도와드릴 아주 간단한 튜토리얼이 있습니다.
시작하기 전에 입력 유효성이 무엇인지, 그리고 어떻게 작동하는지 알아야 합니다. 그렇다면 입력 유효성이 정확히 무엇일까요?
입력 유효성 검사는 현대 앱과 웹 애플리케이션에서 흔히 볼 수 있는 기능입니다. 이 기능은 사용자를 안내하는 데만 쓰이는 것이 아니라, 사용자가 폼 필드에 입력한 내용이 올바른지 확인하는 데도 도움이 됩니다. 예를 들어 많은 웹사이트의 이메일 필드에 잘못된 이메일 형식으로 입력하면, 입력한 이메일 형식이 올바르지 않다는 메시지를 보게 됩니다. 즉, 폼이 입력을 검사해 올바르지 않다고 감지한 것입니다.
ProtoPie에서는 두 가지 주요 트리거인 Input과 Detect가 있어, 유효성 검사가 포함된 폼 필드의 동작을 완벽하게 흉내 낼 수 있기 때문에 이러한 유형의 폼을 쉽게 만들 수 있습니다. Input 기능은 텍스트 필드에 입력할 수 있게 해 주고, Detect 기능은 입력 필드에 입력한 내용을 검사합니다.
ProtoPie에서 이 두 트리거를 효과적으로 조합하면, 유효성 검사가 포함된 폼 필드를 만들기 시작할 수 있습니다. 이 레슨에서는 두 트리거를 모두 사용합니다.
배우게 될 내용
입력 유효성 검사가 있는 텍스트 필드를 만드는 일반적인 구조
필수 입력 필드를 만드는 방법
입력 값이 올바르지 않은지 또는 올바른지 확인하는 방법
입력의 텍스트 또는 숫자 문자의 길이를 확인하는 방법
입력 필드 안에서 문자를 지정하는 방법
입력 필드의 텍스트 유효성 검사를 위한 일반 구조부터 시작해 보겠습니다
일반적으로 ProtoPie에서 텍스트 필드에 입력된 텍스트를 검증하는 방법은 두 가지 주요 트리거인 Focus와 Detect를 사용하는 비슷한 구조를 따릅니다.
Focus(Focus out)은 텍스트가 요구 사항을 충족하지 않을 때 오류 메시지를 트리거하는 데 사용됩니다.
Detect는 텍스트가 요구 사항을 충족하는지 확인/검증하여 오류 메시지가 사라지도록 하는 데 사용됩니다.
각 트리거에서는 Condition을 사용해 텍스트가 요구 사항을 충족하는지 확인합니다.
다양한 유형의 유효성 검사를 만들려면 각 트리거 아래의 조건만 변경하면 됩니다. 다음 사용 사례를 통해 이 구조를 다른 유효성 검사 사례에 재사용하는 방법을 보여드리겠습니다.
필수 Input 필드를 만드는 방법
input의 required 속성은 폼 필드를 제출하기 전에 반드시 채워야 하는지 여부를 지정합니다.
1. 입력 레이어 Input - First Name.에 Focus 트리거를 추가합니다. 속성 패널에서 **Focus Out **을 선택합니다.
Focus 트리거는 입력 레이어에서 포커스가 들어오거나 나갈 때 응답을 활성화합니다. 이 경우에는 사용자가 입력을 마쳤을 때 유효성 검사를 트리거해야 하므로 Focus Out을 사용합니다.
2. Focus 트리거 아래에서 입력 레이어 Input - First Name.에 Condition을 추가합니다. 기본적으로 X가 표시되는 두 번째 드롭다운만 Text.로 변경합니다.
이제 조건은 Text of Input - First Name = "NONE"으로 표시되어야 합니다. 이 조건은 입력이 채워졌는지 여부를 지정하는 데 사용됩니다. 입력이 채워지지 않으면 이 조건 아래의 응답이 실행됩니다.
💡 왜 값을 비워 두었을까요?
값을 비워 두거나 none으로 설정한 이유는 이 트리거에서 만들고 싶은 응답이 입력 필드가 비어 있고 사용자가 텍스트 필드에 아무것도 입력하지 않았을 때 표시되는 응답이기 때문입니다. 따라서 식은 (Text of Input - First Name = "NONE")가 됩니다.
3. 방금 만든 조건 아래에 입력에 대한 Border 응답을 추가합니다. 그런 다음 아래와 같이 속성을 설정합니다. 이렇게 하면 입력 필드가 비어 있을 때 테두리가 강조 표시됩니다.
4. 레이어 패널에서 오류 메시지 (이름을 입력해 주세요.)를 선택한 다음 + 아이콘을 탭하고 오류 메시지에 Opacity 응답을 추가합니다. 이제 불투명도를 100으로 설정합니다. 이렇게 하면 입력 필드가 비어 있을 때 오류 메시지가 표시됩니다.
5. 이제 새 트리거인 Detect를 Input - First Name.에 추가해 보겠습니다. 그러려면 입력 필드를 선택하고 트리거 추가를 탭한 다음 Detect 트리거를 선택합니다. Detect는 입력 텍스트가 변경될 때 응답을 트리거합니다.
6. detect 트리거 바로 아래에 Text of Input - First Name ≠ "NONE"에 대한 Condition을 추가합니다. 그러려면 2단계의 단계를 반복합니다. 변경해야 할 유일한 부분은 =를 ≠로 바꾸는 것입니다. 입력이 채워지면 이 조건 아래의 응답이 실행됩니다.
7. 조건 아래에 입력에 대한 Border 응답을 추가합니다. 그런 다음 아래와 같이 속성을 설정합니다. 이 조건에서는 테두리가 사라집니다.
8. 또한 오류 메시지 텍스트 (이름을 입력해 주세요.)에 Opacity 응답을 추가합니다. 불투명도를 0으로 설정합니다. 이렇게 하면 이 조건에서 오류 메시지가 사라집니다.
9. 멋집니다! 이제 필수 입력 필드를 만들었습니다. Preview Window에서 상호작용을 확인해 보세요.
입력 값의 유효성을 검사하는 방법
input의 value 속성은 숫자 입력 유형의 값을 지정합니다.
위 시나리오에서는 텍스트 값이 18보다 크거나 같아야 합니다.
조건에서 formula도 사용해야 합니다.
1. 조건이 있는 서로 다른 두 개의 트리거를 만듭니다. 하나는 Focus 트리거이고, 다른 하나는 Detect 트리거입니다.
2. 조건을 만든 후 formula로 전환하려면 드롭다운 선택을 input component에서 Formula로 변경합니다.
3. formula를 선택한 후, formula 필드 바로 아래에 다음 공식을 복사하여 붙여넣습니다 - number('Input - Age'.text). 이 공식은 텍스트를 숫자로 변환할 수 있습니다.
** 4. Focus** 트리거 아래에서 조건은 number('Input - Age'.text) < "18"로 설정됩니다. 이는 공식을 붙여넣은 후 조건 기호가 <가 되고 값은 18이 된다는 뜻입니다.
5. Detect 트리거 아래에서 조건은 number('Input - Age'.text) ≥ "18"로 설정됩니다. 이는 공식을 붙여넣은 후 조건 기호가 ≥가 되고 값은 18이 된다는 뜻입니다.
아래 이미지를 참고하세요.
입력 길이를 검증하는 방법
length 속성은 텍스트 데이터(문자열)의 길이를 지정합니다.
위 경우에는 텍스트 길이가 고정되어 있습니다. 그렇지 않으면 오류 메시지가 표시됩니다.
이전 예제와 마찬가지로 조건에서 formula를 사용합니다. 여기서 사용하는 공식은 length('Input - Card number'.text)입니다. 이 공식은 텍스트의 문자 수를 셉니다.
Focus 트리거 아래에서는 조건이 length('Input - Card number'.text) ≠ "22"로 설정됩니다.
Detect 트리거 아래에서는 조건이 length('Input - Card number'.text) = "22"로 설정됩니다.
위 경우에서 자동 서식이 적용되는 입력 필드를 프로토타이핑하는 방법이 궁금하신가요? 자세한 내용은 이 튜토리얼을 확인하세요.
이 방법은 더 많은 경우에도 적용할 수 있습니다
비밀번호(최소 8자)
여러 줄 입력용 문자 수 카운터 만들기
이 데모를 확인하려면 완료된 pie 파일을 다운로드하세요.
입력 필드 안에서 문자를 지정하는 방법
데이터가 숫자, 이메일 주소 또는 다른 특정 사전 설정 유형이어야 하는지 지정합니다.
위 경우에는 입력이 이메일 주소여야 합니다. 그렇지 않으면 오류 메시지가 표시됩니다. ProtoPie에서 이메일을 검증하는 방법은 입력 텍스트에 "."와 "@"가 모두 포함되어 있는지 확인하는 것입니다.
각 트리거에는 2개의 조건이 필요합니다. 여기서 사용하는 공식은 indexOf('Input - Email'.text,".")와 indexOf('Input - Email'.text,"@")입니다.
💡 **indexOf(): **텍스트에서 키워드의 시작 위치를 찾습니다. 키워드가 텍스트에 없으면 반환값은 -1입니다.
indexOf(source:TEXT,searchValue:TEXT)→ NUMBER
1. Focus 트리거 아래에서 조건은 다음과 같이 설정됩니다: indexOf('Input - Email'.text,".") = "-1" 및 indexOf'(Input - Email'.text,"@") = "-1". 이 두 공식을 2개의 조건에 넣어야 합니다.
첫 번째 조건인 indexOf('Input - Email'.text,".") = "-1"은 사용자의 입력에 마침표가 있는지 확인합니다. 그런 다음 indexOf('Input - Email'.text,"@") = "-1" 공식을 사용하는 다음 조건으로 넘어가 입력에 at 기호가 있는지 확인합니다.
at 기호와 dot은 사용자의 이메일 주소 접두사이자 두 조건의 일부인 'Email'.text 뒤에 와야 합니다. 따라서 이메일 주소가 michaelajah@example.com이라면 @와 dot은 반드시 michaelajah 뒤에 와야 합니다.
2. Detect 트리거 아래에서 조건은 다음과 같이 설정됩니다: indexOf('Input - Email'.text,".") ≠ "-1" 및 indexOf('Input - Email'.text,"@") ≠ "-1". 이 공식을 1개의 조건에 넣을 수 있습니다. 포커스 트리거에서는 두 조건이 모두 참일 때 입력 값이 -1이 되도록 설정했습니다. 이 detect 트리거의 조건은 입력 값을 확인하여 값 중 어느 하나라도 -1과 같지 않은지 검사합니다.
💡 왜 Focus 트리거 아래에 2개의 별도 조건을 사용했을까요?
이는 이러한 조건 중 어느 하나라도 충족되면 오류 메시지가 표시되기를 원하기 때문입니다.
💡 왜 Detect 트리거 아래에는 조건을 1개만 사용했을까요?
이는 이러한 조건 모두가 충족되면 오류 메시지가 사라지기를 원하기 때문입니다.
이 방법은 더 많은 경우에도 적용할 수 있습니다
URL 유효성 검사
사용자 이름(공백 허용 안 함)
이 데모를 확인하려면 완료된 pie 파일을 다운로드하세요.
마무리입니다
잘하셨습니다! 이제 사용자가 입력한 내용이 올바른지 검증하는 텍스트 필드를 만드는 방법을 배웠습니다. 또한 조건과 공식을 사용하여 입력 필드를 감지하고 검증하는 방법도 배웠습니다!
이 튜토리얼을 더 많이 활용해 보세요. 금방 ProtoPie 전문가가 될 수 있습니다. 여러분의 멋진 실험을 꼭 보고 싶습니다. 직접 프로토타입을 만들어 Twitter 또는 Instagram에 #MadeWithProtoPie와 함께 공유해 주세요.
