자동 서식 입력 필드 프로토타이핑

소개

입력 필드는 다양한 유형의 정보를 수집하는 필수 요소입니다—각기 다른 형식과 문자 제한이 필요합니다(예: 전화번호, 이름, 검색어 등)

ProtoPie는 사용자의 입력이 특정 조건을 충족하는지 자동으로 감지하고, 간단한 맞춤 수식을 통해 형식 요구 사항을 적용하는 입력 필드를 손쉽게 프로토타이핑할 수 있게 해줍니다. 원한다면 사용자 입력을 변수에 저장하는 방법까지 익혀 워크플로를 더 간단하게 만들어 볼 수도 있습니다.

배울 내용

1. 입력 텍스트 길이를 저장할 변수를 만듭니다(권장 단계)

2. detect와 condition을 사용하여 입력 텍스트 형식을 지정합니다

3. 수식을 사용하여 텍스트 길이를 제한합니다

4. detect와 condition을 사용하여 삭제 로직을 수정합니다

마지막에는 이와 비슷한 것을 만들 수 있게 됩니다!

[시작 Pie 파일] [완료 Pie 파일]

단계별 안내

1. 입력 텍스트 길이를 저장할 변수를 만듭니다(권장 단계)

ProtoPie에서 이 입력 필드를 자동으로 형식화하려면, 항상 입력 텍스트 길이를 알아야 합니다. 이 워크플로를 빠르게 정리하는 방법은 입력 텍스트 길이 값을 감지하는 맞춤 변수를 만드는 것입니다.

💡 변수는 어떻게 워크플로를 더 쉽게 만들어 줄 수 있을까요?

변수는 프로토타입에서 반복해서 참조하는 값이나 수식을 저장할 수 있습니다. 같은 내용을 계속 다시 입력하는 대신, 목표를 달성하기 위해 변수 이름만 입력하면 됩니다.

　1. 왼쪽 아래 패널에서 '+' 아이콘을 클릭하여 새로운 변수 For This Scene를 만듭니다. 정리된 구성을 위해 변수 이름을 length로 바꾸세요.

　2. 속성 패널에서 Use Formula를 체크합니다. (이 기능은 Variables For This Scene에서만 사용할 수 있습니다)

　3. 이 변수에 저장할 수식은 length('Input'.text)입니다. 그러면 입력 레이어 안의 문자 수를 계속 반환합니다.

💡 length(): 이것은 ProtoPie에게 텍스트 문자열에서 감지된 문자 수를 세도록 알려 주는 미리 정의된 텍스트 함수입니다.

• length(source:TEXT) → NUMBER

　4. 새 변수에 대해 디버그 기능을 켭니다. 미리보기 창에서 확인해 봅시다.

2. detect와 condition을 사용하여 입력 텍스트를 형식화하기

　1. 입력에 Detect 트리거를 추가합니다. 속성 패널에서 감지할 Text를 선택합니다.

　2. Detect 트리거 안에 Condition을 추가합니다. 속성 패널에서 Formula를 선택합니다. 여기서 사용할 수식은 length('Input'.text)이며, 또는 단순히 length.라고 입력해도 됩니다. 이는 입력의 문자 수를 반환합니다.

이 조건에서는 length('Input'.text) = 4로 설정하거나, 간단히 length = 4라고 입력합니다.

　3. Input 레이어에 Text 응답을 추가하고 텍스트 필드에 수식을 사용합니다.

여기서 사용하는 수식은 'Input'.text + " ‍"입니다.

이렇게 하면 텍스트 뒤에 공백과 Zero Width Non-Joiner(ZWNJ)가 추가됩니다. 이 수식은 그대로 스튜디오에 복사할 수 있습니다(ZWNJ가 포함되어 있습니다). 또는 ZWNJ를 여기서 복사할 수도 있습니다.

💡 왜 다른 공백 문자 대신 ZWNJ를 추가하나요?

ZWNJ는 겉으로 보이는 추가 공백 없이 문자 수만 하나 더 늘려 줍니다. 이 카드 번호 형식에서는 숫자 4개 문자열 사이에 시각적으로는 공백 1개만 있으면 됩니다. 이 형식 요구 사항을 유지하고 나중 단계에서 다룰 삭제 로직이 제대로 작동하게 하려면, 화면상 공백을 추가하지 않는 보조 문자가 필요합니다.

　4. 아래에 표시된 지정 조건 아래에도 동일한 Text 응답을 추가해야 합니다. ProtoPie가 텍스트 길이를 올바르게 감지하는지 확인하려면, 디버그 기능을 사용하여 미리보기 창에 변수 값을 표시할 수 있습니다.

이전 단계를 반복하고, 각 조건의 Text 응답에 동일한 수식('Input'.text + " ‍")을 사용합니다. 그러면 ProtoPie가 입력 텍스트 길이가 4**, 10, and 1****6** 바로 뒤에 공백을 삽입하게 됩니다.

3. 수식을 사용하여 텍스트 길이를 제한하기

이 사용 사례 예시에서는 텍스트의 최대 길이가 22여야 합니다. 텍스트 길이가 22에 도달하면 더 이상 문자를 입력할 수 없어야 합니다. 이를 위해 수식을 사용해야 합니다.

　1. Input 레이어의 텍스트 길이(또는 'length')가 ≥ 22일 때 또 다른 조건을 추가합니다.

　2. 마찬가지로 이 조건 아래에서도 Input 레이어에 Text 응답을 추가하고 수식을 사용합니다. 여기서 사용할 수식은 left('Input'.text,22)입니다.

💡 left(): left()는 ProtoPie가 특정 문자 수를 기준으로 텍스트의 왼쪽부터 일부를 추출하도록 알려 주는 미리 정의된 텍스트 함수입니다. 이 경우 ProtoPie는 Input 텍스트 레이어의 왼쪽부터 처음 22자를 추출합니다.

• left(source:TEXT,count:NUMBER) → TEXT

　3. 미리보기 창에서 확인해 봅시다. 길이가 22에 도달하면 더 이상 문자를 입력할 수 없습니다.

4. detect와 condition을 사용하여 삭제 로직 수정하기

이 시점에서 마지막 네 글자를 삭제해 보세요. 마지막 네 글자보다 더 앞쪽을 삭제하려고 하면 길이 값이 17까지 내려갔다가 다시 18로 올라가는 것을 볼 수 있습니다.

이는 먼저 텍스트 길이가 16일 때 'Input'.text + " ‍" 수식 응답을 설정했기 때문입니다. 문자 수가 16에 도달하면 공백과 ZWNJ가 즉시 추가되어 텍스트 길이가 바로 다시 18이 됩니다.

삭제 로직이 다시 제대로 작동하도록 하려면, 이전에 설정한 형식 지정 조건을 우회하는 또 다른 삭제 중심 조건 세트를 만들어야 합니다.

먼저 텍스트 길이가 17일 때의 조건을 추가합니다. 이 조건에서는 텍스트 길이를 15로 줄여 봅시다.

길이가 17이 되었을 때 이 새 조건을 추가하면 프로토타입이 문자를 15까지 삭제할 수 있음을 보여 주는 사진입니다.

　1. 입력에 다시 새로운 Detect 트리거를 추가합니다.

💡 왜 새로운 'Detect' 트리거를 만들어야 하나요?

두 가지 다른 목적(입력과 삭제)에 대해 별도의 트리거를 사용하면 계층 구조가 더 명확해집니다. 이 단계를 건너뛰고 이전과 같은 detect 트리거를 계속 사용할 수도 있지만, 다소 복잡해질 수 있습니다.

　2. 첫 번째 조건을 텍스트 길이 = 17로 설정합니다.

💡 왜 텍스트 길이가 17일 때 조건을 설정하나요?

이미 텍스트 길이가 16에 도달하면 두 문자를 삽입하는 조건이 있으므로, 삽입 응답이 트리거되지 않도록 하려면 길이가 17이 되었을 때 두 문자를 추가로 삭제해야 합니다. 즉, 누군가 삭제를 진행해 17자에 도달하면 프로토타입은 텍스트를 15자까지 삭제하게 됩니다.

이렇게 하면 입력 형식 지정에 사용된 공백 문자와 ZWNJ가 삭제됩니다.

　3. 이 조건 안에서 Input 레이어에 대한 Text 응답을 추가합니다.

이 텍스트 응답에는 다른 수식을 사용합니다. 여기서 사용할 수식은 left('Input'.text,15)입니다.

💡 이 수식의 결과는 무엇이라고 예상해야 하나요?

이 새 수식은 문자 제한이 17에 도달하면 왼쪽에서부터 시작하여 "Input" 텍스트 레이어의 처음 15자를 추출하도록 ProtoPie에 알려 줍니다. 이렇게 하면 문자 수가 16을 넘어서게 되어 입력 트리거를 피하고 텍스트를 더 삭제할 수 있습니다. 프로토타입을 미리보기로 실행해 17자까지 삭제했을 때 어떻게 반응하는지 확인해 보세요.

　4. 텍스트 길이가 11일 때의 조건을 추가합니다. 이 조건에서는 텍스트 길이를 9로 줄여 봅시다.

이 단계는 이전 단계와 비슷합니다.

• 조건: length('Input'.text) = 11

• 텍스트: left'Input'.text,9)

　5. 텍스트 길이가 5일 때 또 다른 조건을 추가합니다. 이 조건에서는 텍스트 길이를 3으로 줄여 봅시다.

다음 값으로 이전 단계를 다시 반복합니다.

• 조건: length('Input'.text) = 5

• 텍스트: left('Input'.text,3)

　6. 미리보기 창에서 확인해 봅시다.

해냈습니다!

정말 멋진 작업입니다! 형식이 지정된 입력 필드 요소를 만들고, 문자 제한을 구현했으며, 삭제 로직이 제대로 작동하도록 만들어 사용자가 입력 텍스트를 변경할 수 있게 했습니다. 또한 워크플로를 더 간단하게 만들기 위해 변수를 사용하는 것도 직접 실험해 보았을 수 있습니다.

한 번에 배우고 해내야 할 내용이 많았으니, 스스로의 작업을 자랑스럽게 생각하세요!

ProtoPie에서 이 방법들을 계속 실험해 보고, 더욱 현실감 있는 경험을 만들어 보세요. 여러분의 멋진 실험을 꼭 보고 싶습니다. 직접 만든 프로토타입을 만들어 Twitter 또는 Instagram에 #MadeWithProtoPie와 함께 공유해 주세요.

[도움이 되었나요? 알려 주세요!]