프로토타입을 만들 때 꽤 자주 하게 되는 일 중 하나는 사용자가 텍스트 필드에 입력할 수 있도록 허용하는 것입니다. ProtoPie 를 사용하면 이 작업을 정말 쉽게 할 수 있습니다. 이 튜토리얼에서는 사용자들이 텍스트를 입력하고 그 텍스트로 무언가를 하는 것을 얼마나 쉽게 허용할 수 있는지 살펴볼 것입니다.
개요
준비물
배울 내용
인터랙티브 텍스트 필드를 프로토타입하는 방법
1단계: 텍스트 입력 상자 추가
2단계: 입력 상자 사용자 지정
3단계: 기기에서 미리보기
4단계: 상호작용 추가
5단계: 다시 미리보기!
이제 끝입니다! 바나나 크림 파이만큼 쉬워요!
인터랙티브 텍스트 입력 필드에 대해 더 알아보기
더 많은 프로토타이핑 레슨 살펴보기
준비물
이 튜토리얼을 따라 하려면 이 샘플 Pie를 다운로드해서 Studio에서 열어 보세요.
또한 진행하면서 기기에서 바로 경험을 미리 볼 것입니다. 이를 위해 휴대폰이나 태블릿에 ProtoPie Player 앱을 설치해야 합니다. ProtoPie Player는 강력하고 무료인 앱으로, 여러분이나 Pie를 공유한 사람이 자신의 기기에서 마치 기본 모바일 경험처럼 프로토타입을 실행할 수 있게 해 줍니다.
배울 내용
이 튜토리얼을 끝내면 다음을 배웠다는 것을 알게 됩니다:
Pie(프로토타입)에 텍스트 입력 상자 추가하기
텍스트 입력 상자 사용자 지정하기
사용자가 입력을 끝냈다는 것을 나타내기 위해 키보드의 Return 키를 누를 때 반응하기
웹 URL을 만들고 호출하기 - 이는 다음 기사에서 더 자세히 다룰 고급 ProtoPie 기능인 Formulas를 살짝 미리 보는 것입니다.
기기에서 경험 미리 보기
소요 시간: ≤15분
인터랙티브 텍스트 필드를 프로토타입하는 방법
동적인 텍스트 입력 필드를 만드는 방법을 배우려면 비디오 튜토리얼을 확인하거나 아래의 자세한 단계별 가이드를 따라 해 보세요.
1단계: 텍스트 입력 상자 추가
예제 Pie 파일을 여세요. Google의 이미지 검색 UI처럼 보이는 단일 배경 이미지 레이어가 있습니다.
검색 필드를 작동하게 만들어 봅시다!
왼쪽 위 아이콘 세트에서 Text 메뉴 항목을 찾으세요. 클릭한 다음 Input을 선택하세요.****
무대 위 원하는 곳에 입력 필드를 드래그하여 그리세요.
완벽하게 맞추려고 걱정하지 마세요. 다음 단계에서 정확하게 배치할 거예요.
배경의 알약 모양 안에 입력 상자가 정확히 들어가도록 크기를 맞추고 싶습니다.
컨트롤을 드래그해서 조정할 수도 있고, 아니면 이 값을 그대로 사용해도 됩니다.
텍스트 상자 이름을 좀 더 의미 있게 바꿔 봅시다. 레이어를 더블클릭한 다음 Search라고 이름을 지정하세요. 나중에 이 이름이 정확히
Search(대소문자 구분)이어야 하므로, 만약search처럼 소문자 s를 쓰거나Search가 아닌 다른 이름으로 지정했다면 지금 수정하세요.
2단계: 입력 상자 사용자 지정
입력 상자가 배경과 자연스럽게 어우러지도록 하고 싶습니다. 속성 패널에서 Fill 옆 체크박스를 해제하여 텍스트 상자의 회색 배경색을 제거하세요.
현재 텍스트 상자의 자리표시자 텍스트는 "placeholder"입니다. 속성 패널의 PlaceHolder 섹션에서 변경할 수 있습니다.
search for images로 바꾸세요.
💡 프로 팁: 여기서 자리표시자 텍스트의 색상과 불투명도도 바꿀 수 있습니다.
더 많은 사용자 지정 옵션도 있습니다. 예를 들어, 필드에 포커스했을 때 어떤 종류의 키보드가 나타날지, 그리고 입력 상자를 비밀번호 필드로 만들지 등을 선택할 수 있습니다.
아래로 스크롤하여 Keyboard Options로 가고, Type 옆의 드롭다운을 찾으세요.
**Text**, URL, Email, Number 중 하나를 선택하면 입력받고 싶은 정보 유형에 맞게 키보드가 조정됩니다. 예를 들어 Number를 선택하면 필드에 포커스할 때 숫자 키패드가 나타납니다. 비밀번호 옵션을 선택하면 입력한 문자를 그대로 표시하는 대신 가려서 보여 줍니다.
왼쪽부터 오른쪽으로: Type에 Text, Number, Password를 선택한 모습입니다.
이 경우에는 검색어를 입력받으려는 것이므로 Type에는 Text를 선택합시다.
Keyboard Options 아래의 두 번째 옵션은 화면 키보드에서 Return 키에 표시되는 레이블입니다.
검색 상호작용을 만들고 있으니 Search를 선택합시다.
마지막으로, iOS용으로 디자인하는 경우 라이트 테마와 다크 테마 중 원하는 것을 선택할 수 있습니다.
원하는 것을 선택하세요.
3단계: 기기에서 미리보기
Studio 미리보기에서 텍스트 상자를 클릭하세요. 화면 키보드가 나타나는 것을 볼 수 있을 것입니다. 처음에는 키보드 키를 클릭해서 입력하려고 할 수 있습니다. 그렇게 해 보면 작동하지 않는다는 것을 알게 될 것입니다. 그저 텍스트 상자의 포커스가 해제되어 키보드가 숨겨질 뿐입니다.
데스크톱 컴퓨터의 Studio에서 텍스트 입력을 미리 볼 때는 물리적인 키보드로 입력해야 합니다. 화면 키보드는 Studio에서 단지 자리 표시용 이미지일 뿐입니다.
대신 기기에서 직접 실행해 키보드에 바로 입력해 봅시다. 이를 위해 기기에서 ProtoPie Player 앱을 사용할 것입니다. 아직 설치하지 않았다면, 위의 준비물 섹션에서 찾을 수 있는 링크를 사용해 기기에 ProtoPie Player를 설치하세요.
Studio에서 오른쪽 위 아이콘 세트의 Device를 클릭하세요. 그러면 QR 코드가 나타납니다. 잠시 후 필요하므로 이 화면을 그대로 두세요.
기기에서 ProtoPie Player 앱을 시작하세요. 다음 화면이 나타날 것입니다:
Scan QR Code를 클릭하고 위에서 표시한 코드를 스캔하세요. 이제 기기에서 Pie가 시작될 것입니다.
💡 **참고: **이 기능이 작동하려면 기기가 Studio를 실행 중인 컴퓨터와 같은 WiFi에 연결되어 있거나, USB 케이블로 Studio를 실행 중인 컴퓨터에 연결되어 있어야 합니다. 기기에서 Pie가 시작되지 않으면, 휴대폰이 이 두 가지 방법 중 하나로 연결되어 있는지 다시 확인하세요.
기기에서 텍스트 상자를 탭하세요. 실제 키보드가 표시되고 그 위에서 입력할 수 있습니다. 사용 중인 기기에 따라 기본 iOS 또는 Android 키보드가 보일 것입니다.
4단계: 상호작용 추가
사용자가 키보드에서 Search 키를 탭하여 입력을 끝냈음을 나타내면 경험이 동작하기를 바랍니다(2단계에서 Return 키의 레이블을 Search로 변경한 것을 기억하세요). 이때 동작을 수행하도록 Return Trigger를 사용할 것입니다.
Studio에서 Return Trigger를 추가하세요. 속성 패널에서 이를
Search입력 레이어와 연결되도록 설정하세요.
이 Trigger 아래에 추가한 모든 Response는 Input Layer에 포커스가 있을 때 사용자가 Return(즉, Search) 버튼을 탭하면 실행됩니다.
이 다음 내용은 조금 난해하게 느껴질 수 있습니다. ProtoPie의 고급 기능 중 하나인 Formulas를 사용해 URL을 만들고 이를 브라우저로 보내려는 것입니다. 이것이 완전히 생소하게 느껴져도 걱정하지 마세요. 다음 기사에서 Formulas에 대해 훨씬 더 자세히 다룰 것입니다. 지금은 단계별로 그대로 따라오세요.
Link Response를 추가하세요. Link Response는 웹 브라우저 탭을 특정 URL로 여는 데 사용할 수 있습니다.
사용자가 입력한 내용을 이용해 동적인 URL을 만들어 Google 이미지 검색을 실행하고자 합니다. 사용자가 Return을 누르기 전까지는 무엇을 입력했는지 알 수 없으므로, 그때그때 만들어야 합니다. 이를 위해 Formula를 사용할 것입니다. Link 아래 목록에서 Formula를 선택하세요.
이 드롭다운 아래 상자를 클릭하면 작은
∫x아이콘이 보일 것입니다. 이는 링크의 URL에 대한 formula를 만들 수 있다는 뜻입니다!∫x아이콘을 클릭하세요. 입력할 공간이 더 넓어지도록 필드가 확장됩니다.
formula 필드에 아래 텍스트를 정확히 입력하거나(따옴표 포함) 복사하여 붙여넣으세요:
"https://www.google.com/search?q=" +Search.text+"&tbm=isch"
확인을 클릭하세요.
다음으로 넘어가기 전에 방금 한 일에 대해 조금 더 설명하겠습니다. 입력 상자에 무언가를 입력할 때마다, 입력한 값은 해당 레이어의 text라는 속성에 저장됩니다. 우리는 세 부분의 텍스트를 이어 붙여 formula를 만들었습니다:
알려진 텍스트의 일부 — 이 부분은 항상 같습니다:
"https://www.google.com/search?q="알려지지 않은 텍스트의 일부 — Search 입력 상자의 text 속성: ``Search
.text또 다른 알려진 텍스트의 일부 — 역시 항상 같습니다:
"&tbm=isch"
💡 참고: 첫 번째 단계에서 입력 레이어 이름을 정확히 Search라고 지은 것을 기억하세요? formula에서는 Search 레이어를 이름으로 직접 참조했습니다. 이런 방식으로 사용할 때 레이어 이름은 대소문자 구분됩니다.
다시 말하지만, 이것이 복잡해 보여도 걱정하지 마세요. 다음 기사에서 Formulas를 더 깊이 있게 다룰 것입니다. 여기서 중요한 점은 사용자가 입력 상자에 입력한 내용이 해당 레이어의 속성으로 저장되어 Pie에서 사용할 수 있다는 것입니다.
5단계: 다시 미리보기!
기기를 최신 변경 사항으로 업데이트하려면 오른쪽 위 아이콘 그룹에서 Run을 클릭하세요.
이제 이미지 검색을 실행할 수 있어야 합니다. 검색하고 싶은 내용을 입력한 다음 Search를 탭하세요.****
검색을 실행하면 결과를 표시하기 위해 기기가 브라우저 앱으로 전환된 것을 볼 수 있을 것입니다. iOS를 사용 중이라면 한 가지 더 조정할 수 있습니다.
Return Trigger 아래의 Link Response를 클릭하세요.
속성 패널에서 Open In-app Browser를 체크하세요.
Run을 한 번 더 클릭하여 기기를 최신 변경 사항으로 다시 로드하세요. 검색을 실행하면 브라우저 탭이 ProtoPie Player 앱 안에서 열리고, Done을 탭하여 Search 상자로 돌아갈 수 있습니다.
이제 끝입니다! 바나나 크림 Pie만큼 쉬워요!
이 튜토리얼에서는 텍스트 입력 필드와 이를 어떻게 구성할 수 있는지에 대해 모두 배웠습니다. 또한 Input Layer의 text 속성에 접근하면 사용자가 입력한 내용을 사용할 수 있다는 것도 배웠습니다. 마지막으로 ProtoPie의 고급 기능 중 하나인 Formulas의 힘을 살짝 맛보았습니다. 다음 기사에서 Formulas를 바로 자세히 살펴볼 것입니다!
인터랙티브 텍스트 필드에 대해 더 알아보기
** **
더 많은 프로토타이핑 레슨 살펴보기
이 시리즈를 계속 따라오셨다면, 이전 글에서 음성과 말하기에 대해 다뤘던 것을 기억하실 것입니다. 이 두 기능은 모바일 기기에서 아주 잘 작동합니다. 프로토타이핑 실력을 높이기 위해 모든 레슨을 살펴보세요.
레슨 6: 타이핑 상호작용을 만드는 방법
더 알고 싶으신가요? ProtoPie School에 가입하면 프로토타이핑 전문가가 되고 무료로 인증서도 받을 수 있습니다!
ProtoPie로 인터랙티브 텍스트 필드 만들기
프로토타이핑을 시작할 준비가 되셨나요? 그렇다면 ProtoPie를 무료로 다운로드하고 인터랙티브 텍스트 입력이 있는 프로토타입을 만들어 보세요.
