웹사이트나 앱에 가입하거나 로그인할 때 대부분의 사이트는 엿보는 눈으로부터 비밀번호를 숨기기 위해 비밀번호를 마스킹(또는 숨김)합니다. 하지만 오타를 방지하기 위해, 비밀번호 필드의 좋은 UX 관행은 표시/숨김 버튼을 두는 것입니다 — 그래서 사용자가 자신이 입력하는 내용을 볼 수 있습니다.
이 튜토리얼에서는 디자인에서 비밀번호를 표시하고 숨기는 버튼을 만드는 방법을 알아봅니다. ProtoPie는 Input 필드와 Detect 트리거를 사용해 이를 쉽게 만들어 줍니다.
개요
배울 내용
시작하기 전에
프로토타입에서 비밀번호를 표시하고 숨기는 방법
1. 입력 필드 준비하기
2. 숨김/표시를 눌렀을 때 입력 필드 순서 바꾸기
3. 서로 다른 입력 필드 간 텍스트 동기화하기
끝입니다! 이제 비밀번호를 표시하고 숨길 수 있습니다
ProtoPie로 디자이너로서 한 단계 성장하기
배울 내용
이 레슨에서는 다음을 배우게 됩니다
Input 필드 준비하기
숨김/표시를 눌렀을 때 입력 필드 순서 바꾸기
서로 다른 입력 필드의 텍스트 동기화하기
마지막에는 이런 것들을 만들 수 있게 됩니다!
시작하기 전에
시작을 돕기 위해, 이미 표시/숨김 버튼이 포함된 Pie 파일을 준비해 두었습니다. 이는 Conditions.를 사용해 작동합니다.
Conditions를 사용하여 토글 버튼 만드는 방법을 배우세요.
프로토타입에서 비밀번호를 표시하고 숨기는 방법
1. 입력 필드 준비하기
1. 이 단계에서는 마스킹된 Text Password 필드와 일반 Text 필드를 만들어 준비합니다.
우리는 두 개의 텍스트** Input** 필드를 사용합니다 — 하나에는 마스킹된 비밀번호 텍스트가 들어가고, 다른 하나에는 보이는 텍스트가 들어갑니다.
2. Hide Input 필드를 선택한 다음, properties panel에서 Keyboard Options를 찾습니다. Type을 Text Password.로 변경하세요. 그러면 Hide 필드에 입력되는 모든 텍스트가 자동으로 마스킹됩니다.
3. 계속해서 프로토타입을 미리보기해 보세요. 마스킹된 텍스트와 함께 Hide Input 필드가 작동하는 것을 볼 수 있을 것입니다.
2. 숨김/표시를 눌렀을 때 입력 필드 순서 바꾸기
이 단계에서는 Reorder 응답을 사용해 숨김/표시 버튼이 Hide와 Show Input 레이어 사이를 전환하도록 만들 것입니다.
1. Show Input 레이어를 선택합니다. 기존 Tap 상호작용에서 +를 클릭하고 Reorder 응답을 추가하세요. Reorder 응답은 레이어의 순서를 바꿀 수 있습니다. 여기서는 Show를 Hide 앞에 배치해 보이도록 만들고 싶습니다.
2. Reorder 응답이 Bring Forward로 설정되어 있는지 확인하세요. 이 속성은 Show 레이어를 한 레이어 앞으로 이동시킵니다. 즉, 바로 Hide 앞에 오게 됩니다.
3. Reorder 응답을 첫 번째 Condition, 즉 "Tap Show button"이라는 제목의 항목 아래로 옮기세요. 이제 표시 버튼을 탭하면 Reorder 응답이 Show 레이어를 Hide 레이어 위로 이동시킵니다.
4. 이제 Hide 레이어에도 같은 단계를 반복해 보겠습니다. 먼저 Hide 입력 레이어를 선택하고 Reorder 응답을 추가하세요. 다시 한 번 Reorder가 Bring Forward로 설정되어 있는지 확인합니다. 이번에는 Reorder 응답이 두 번째 Condition, 즉 "Tap Hide Button"에 적용되어야 합니다. 따라서 두 번째 Condition 아래에 있어야 합니다.
이제 숨김 버튼을 탭하면 Reorder 응답이 Hide 레이어를 Show 레이어 위로 이동시킵니다.
💡 왜 Reorder 응답을 사용했을까요? 그냥 Opacity를 사용해 "Hide"와 "Show" 레이어를 숨길 수는 없었을까요?
물론 가능합니다! 하지만 이 방법이 더 빠릅니다. 매번 두 레이어에 Opacity 값을 설정하는 대신, 레이어당 하나의 응답만 있으면 됩니다.
5. 계속해서 Preview해 보세요. 처음에는 비밀번호 필드가 마스킹되어 있다는 것을 알 수 있을 것입니다. 숨김/표시 버튼을 누르면 마스킹된 필드는 사라지지만, 비어 있는 Show 필드가 나타나는 것처럼 보입니다. 입력한 텍스트가 보여야 하므로, 다음 단계에서 이를 해결해 봅시다.
3. 서로 다른 입력 필드 간 텍스트 동기화하기
이 단계에서는 Detect 트리거를 사용해 Hide와 Show 입력 레이어 간의 텍스트를 동기화합니다.
트리거에 대해 더 알아보기.
1. Hide 입력 레이어를 선택합니다. Add Trigger 버튼을 누르고 Detect 트리거를 추가하세요. Detect value를 Text로 변경합니다. Detect 트리거는 선택한 value를 기준으로 지정된 레이어에서 변경 사항이 있는지 확인합니다.
여기서는 Text를 선택했으므로, 이 트리거는 입력 텍스트가 변경될 때마다 활성화됩니다.
2. 이 Detect 트리거에 Text 응답을 추가하세요. 이 Text 응답이 Show 레이어에 적용되어 있는지 확인합니다.
3. Content를 다시 한 번 Formula로 변경하세요. 다음 formula를 사용합니다: ``Hide.text. 이 formula는 Text 응답이 Hide 레이어에 입력되는 텍스트를 그대로 반영하도록 지시합니다.
이제 Hide 레이어에 텍스트가 입력될 때마다 같은 텍스트가 자동으로 Show 레이어에 복사됩니다. 하지만 반대로도 작동해야 하므로…
4. 이제 Show 레이어에도 같은 작업을 반복해 봅시다. 먼저 Show 레이어를 선택하고 Detect 트리거를 추가하세요. Detect value를 Text.로 변경합니다.
5. 이 Detect 트리거에 Text 응답을 추가하고, 그것이 Hide 레이어에 적용되도록 하세요.
6. Content를 다시 한 번 Formula로 변경하세요. 이번에는 ``Show.text`` 공식을 사용합니다. 이제 이 공식을 통해 Text 응답이 Show 레이어에 입력되는 텍스트를 그대로 반영하게 됩니다.
이제 Hide 또는 Show 레이어 어느 쪽에 텍스트가 입력되더라도, 텍스트는 각각 Show와 Hide 레이어로 복사됩니다.
끝입니다! 이제 비밀번호를 표시하고 숨길 수 있습니다
잘하셨습니다! Password Text 필드를 마스킹하여 만드는 방법과, Detect 트리거, Text 응답, 그리고 아주 쉬운 내장 formula를 사용해 다른 레이어에 텍스트를 그대로 반영하는 방법을 배웠습니다. 또한 Reorder 응답을 사용해 두 레이어의 표시 여부를 전환하는 방법도 배웠습니다.
ProtoPie로 디자이너로서 한 단계 성장하기
ProtoPie는 개발 없이도 이해관계자와의 명확한 커뮤니케이션과 간소화된 테스트를 가능하게 하는, 상호작용적이고 실제와 같은 프로토타입을 만들 수 있도록 디자이너를 지원합니다.
디자인을 다음 단계로 끌어올리는 방법을 알려드리겠습니다!
