이 튜토리얼에서는 이메일 주소와 비밀번호가 입력되었는지 확인하고, 이메일 주소 형식이 맞는지 체크함과 동시에, 비밀번호 길이 등을 확인하는 단계를 거치는 가입등록 양식을 만드는 방법을 보여줍니다. 이 튜토리얼에서는 모든 단계를 밟거나 원하는 부분까지만 작성하여도 무관합니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity/c6b35e5c-7a63-4e23-8e7b-754fd8696c89_0_forms_preview3invalid-wc.mp4

→ 이 튜토리얼에서 설명하는 디자인을 .uxp 파일로 다운받아 참고하실 수 있습니다.

디자인의 설정

1. 헤더와 두 개의 입력 항목(이메일 및 비밀번호), 가입버튼이 있는 입력양식을 만듭니다.
2. 그런 다음 상자를 사용하여 **확인화면 (Confirmation Screen)**을 만들고 모든 요소를 그룹화합니다. 확인화면을 입력양식 위에 놓고 양식을 완전히 덮습니다.
3. 레이어 패널의 눈 아이콘을 클릭하여 확인화면은 숨깁니다.

<aside> 💡 힌트 입력양식의 입력항목을 탭으로 이동할 때 레이어 패널의 레이어 순서(위에서 아래로)를 따르게 됩니다. 즉, 레이어 패널의 레이어 순서가 아래에서 위로 올라가면 미리보기 중에 입력양식의 오른쪽 탭에 포커스가 맞습니다.

</aside>

https://uxpincommunity.cdn.prismic.io/uxpincommunity/24f8b376-6ed0-4cd2-b13e-2d8248ad3c4c_1_forms-preparethedesign.mp4

메일 및 비밀번호 입력 스테이트

여기에서는 메일 및 비밀번호 입력 항목에 대해 States 1 (Base)과 Empty 스테이트를 만듭니다.

1. 입력 및 텍스트 라벨을 선택하고 상단 표시줄의 Add State (스테이트 추가)를 클릭합니다. States 1 (Base)이 자동으로 생성됩니다.
2. Empty를 입력하고 Enter 키를 눌러 새로운 스테이트를 생성합니다.
3. Empty 스테이트의 그룹에 텍스트 요소를 추가합니다.
4. Empty 스테이트의 모든 요소를 빨간색으로 변경합니다. 이렇게하여 입력오류를 나타내게 됩니다.
5. 위의 단계를 Password input (비밀번호 입력)에도 반복합니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity/ba944703-49db-4b1c-9c1b-63b8592bb351_2_forms_createemptystate.mp4