[ProtoPie School] 타이핑 인터랙션 만들기
ProtoPie의 다이나믹한 타이핑 인터랙션을 구현해 봅시다.
▶ 이전 학습내용이 궁금하다면? 여기를 클릭!
▶ 어떤 내용을 배울지 한눈에 보고 싶다면? 여기를 클릭!
프로토타입 구현 시 사용자가 텍스트 필드에 입력할 수 있는 기능을 자주 구현하는데요. ProtoPie를 사용하면 이 기능을 정말 쉽게 구현할 수 있습니다. 이번 아티클에서는 텍스트 입력 및 관련 다른 기능을 사용하는 방법 대해 알아보겠습니다.
필요한 사항
이번 튜토리얼을 따라가기 위해서는, 아래 샘플 Pie 파일을 다운로드하고 Studio에서 파일을 엽니다.
또한 디바이스에서 직접 타이핑 인터랙션을 경험해볼 텐데요. 이를 위해서는휴대폰이나 태블릿에 ProtoPie Player 앱이 설치되어야 합니다. ProtoPie Player는 강력한 무료 앱으로, 사용자 또는 Pie를 공유하는 모든 유저가 네이티브 모바일과 동일한 환경에서 프로토타입을 실행할 수 있도록 합니다.
▶ iOS
▶ Android
학습할 내용
학습 목표
▶ Pie에 텍스트 입력 상자 추가
▶ 입력 상자 사용자 지정
▶ Return 키를 누를 때 입력 여부 확인
▶ 웹 URL 구축 및 이동 - 고급 ProtoPie 기능인 Formula에 대해 미리 학습합니다. 더 자세한 내용은 다음 기사에서 다룰 것입니다.
▶ 디바이스에서 경험 미리 보기
소요 예정 시간: ≤15분
1. 텍스트 입력 상자 추가
예제 Pie 파일을 엽니다. Google의 이미지 검색 UI처럼 보이는 단일 배경 이미지 레이어가 있습니다.
검색 기능을 추가해 봅시다.▶ 왼쪽 상단 아이콘 세트에서 Text 메뉴 항목을 찾습니다. 해당 아이콘을 클릭하고 Input을 선택하세요.
▶ 스테이지에서 원하는 위치에 드래그하여 입력창을 추가할 수 있습니다.
이 단계에서는 우선 기본적인 기능 구현에 집중하고 다음 단계에서 구체적인 부분에 대한 작업을 진행하겠습니다.▶ 이 단계에서는 우선 기본적인 기능 구현에 집중하고 다음 단계에서 구체적인 부분에 대한 작업을 진행하겠습니다.
▶ 배경의 알약 모양 안에서 입력 상자의 크기를 완벽하게 조정해 보겠습니다.
컨트롤을 끌어서 놓거나 값을 이용하여 조정이 가능합니다.▶ 텍스트 상자의 이름을 좀 더 의미있게 변경해 봅시다. 레이어를 두 번 클릭하고 이름을 Search로 지정합니다. 나중에 이름이 정확히 Search (대소문자 구분) 로 지정되는 것이 중요하므로, Search 이외의 다른 이름 혹은 search(소문자)로 이름을 지정한 경우 지금 수정하세요.
2. 입력 상자 사용자 지정
▶ 입력 상자가 배경에 매끄럽게 보이도록 설정해 봅시다. 속성 패널에서 Fill 옆 상자의 선택을 취소하여 텍스트 상자의 회색 배경색을 제거합니다.
▶ 현재 텍스트 상자에는 자리 표시자 텍스트로 “placeholder”라는 문구가 있을 텐데요. PlaceHolder 섹션의 속성 패널에서 변경할 수 있습니다. 'search for images'를 인식하도록 변경합니다.
▶ 프로 팁: Placeholder 텍스트의 색상과 불투명도 등 다양한 사용자 지정 옵션이 가능합니다.
예를 들어, 필드에 포커스를 맞출 때 표시할 키보드 종류나 입력 상자의 암호 필드 설정 여부를 선택할 수 있습니다.
Keyboard Options까지 아래로 스크롤하고 Type 옆의 드롭다운을 찾습니다.▶ Text, URL, Email, 또는 Number를 선택하면 캡처하려는 특정 유형의 정보에 맞게 키보드가 조정됩니다. 예를 들어 Number를 선택하면 필드에 포커스를 맞출 때 숫자 키패드가 나타납니다. 암호 옵션 중 하나를 선택하면 문자를 입력한 대로 표시하는 대신 마스킹하여 표시합니다.
왼쪽에서 오른쪽으로 Type에서 선택한 Text, Number and Password입니다.▶ 여기서는 검색어를 캡처하고 있습니다. 이제 Type에서 Text를 선택해 보겠습니다.
▶ 키보드 옵션 아래에 있는 두 번째 옵션은 온 스크린 키보드의 Return key 레이블입니다.
검색 인터랙션을 구현하고 있으니 Search를 선택해 봅시다.▶ 마지막으로 iOS용으로 디자인하는 경우, 밝은 테마와 어두운 테마 중 원하는 테마를 선택할 수 있습니다.
원하는 옵션을 선택하세요.3단계: 디바이스에서 미리 보기
Studio Preview에서 텍스트 상자를 클릭하면 화면 키보드가 나타납니다. 이 화면을 보았을 때, 본능적으로 입력을 위해 키보드 키를 클릭할 수도 있을 텐데요. 하지만, 시도해 보면 작동하지 않는 것을 확인할 수 있습니다. 키보드 키를 클릭하면 텍스트 상자의 포커스가 사라지고 키보드가 숨겨집니다.
데스크탑 컴퓨터의 Studio에서 텍스트 입력을 미리 볼 때는 실제 키보드로 입력해야 합니다. 온스크린 키보드는 Studio의 placeholder 이미지입니다.
대신 키보드로 직접 입력할 수 있도록 디바이스에서 이 기능을 실행해 보겠습니다. 우선 기기에서 ProtoPie Player 앱을 열어 봅시다. 아직 설치되지 않은 경우, 상단의 필요한 사항 섹션에서 찾을 수 있는 링크를 사용하여 ProtoPie Player를 설치하세요.
▶ Studio의 오른쪽 상단 아이콘 세트에서 Device를 클릭하면 QR 코드가 표시됩니다. 곧 필요하니 그대로 두세요.
▶ 디바이스에서 ProtoPie Player 앱을 시작하면 아래와 같은 화면이 표시됩니다.
▶ QR 코드 스캔을 클릭 후 위에 표시한 코드를 스캔하면 디바이스에서 Pie 실행이 시작됩니다.
▶ 참고: 위와 같이 진행되기 위해서는, Studio를 실행하는 컴퓨터와 디바이스가 동일한 WiFi에 있거나 USB 케이블을 사용하여 서로 연결되어 있어야 합니다. 기기에서 Pie가 시작되지 않으면, 다음 두 가지 방법 중 하나로 휴대폰이 연결되어 있는지 다시 한 번 확인하세요.
디바이스의 텍스트 상자를 누릅니다. 입력할 수 있는 실제 키보드가 표시됩니다. 사용 중인 기기에 따라 기본 iOS 또는 Android 키보드가 표시됩니다.
4.인터랙션 추가
유저가 키보드에서 Search 키를 탭하면 입력이 완료되었음을 확인할 수 있도록 설정하려고 합니다. (2단계에서 Return 키의 레이블을 Search로 변경했음을 기억하세요). 이를 구현하기 위해 Return Trigger를 사용할 텐데요.
▶ Studio에서 Return Trigger를 추가합니다. 속성 패널에서 Search 입력 레이어와 연결되도록 구성합니다.
이 Trigger 아래에 추가한 모든 응답은 입력 레이어에 포커스가 있을 때 사용자가 Return (즉, Search) 버튼을 탭하면 실행됩니다.
다음 ProtoPie의 고급 기능 중 하나인 Formula를 사용하여 URL을 빌드하고 브라우저로 보낼 것입니다. 다음 아티클에서 Formula에 대해 더 자세히 설명할 예정이니, 이 부분이 지금 낯설게 느껴지더라도 걱정하지 마세요.
지금은 단계에 따라 진행하는 것에 집중하면 됩니다.
▶ Link response를 추가합니다. Link response를 사용하여 특정 URL에 대한 웹 브라우저 탭을 열 수 있습니다.
▶ Google 이미지 검색을 실행하기 위해 사용자가 입력한 내용을 사용하여 동적 URL을 작성하려고 합니다. Return을 누르기 전까지는 사용자가 무엇을 입력했는지 알 수 없으므로 그 자리에서 구현해야 하는데, 이를 위해 우리는 Formula를 사용할 것입니다. 링크 아래의 목록에서 Formula를 선택합니다.
▶ 이 드롭다운 아래의 상자를 클릭하면 작은 x아이콘이 표시됩니다. 즉, 링크 URL에 대한 Formula를 만들 수 있습니다!
▶ x아이콘을 클릭합니다. 필드가 확장되어 입력할 공간이 더 늘어날 것입니다.
▶ 다음 텍스트를 복사하여 Formula 필드에 붙여 넣습니다.
"https://www.google.com/search?q=" + `Search`.text + "&tbm=isch"
OK를 클릭하세요.계속 진행하기 전에 방금 한 일에 대해 좀 더 설명하자면, 입력 상자에 입력할 때마다 입력한 값이 text 레이어의 속성에 저장되는데, 여기서는 세 종류의 텍스트를 결합한 Formula를 만들었습니다.
▶ 알려진 텍스트(1) — 이 부분은 항상 동일합니다. "https://www.google.com/search?q=”
▶ 변동될 텍스트 — Search 입력 상자의 text 속성: `Search`.text
▶ 알려진 텍스트(2) — 역시 항상 동일한 부분입니다. “&tbm=isch”
참고: 입력 레이어의 이름을 Search로 정확히 지정한 첫 번째 단계, 기억나시나요? 수식에서는 이름으로 Search 레이어에 직접 액세스했습니다. 이러한 방식으로 사용할 경우 레이어 이름은 대소문자를 구분합니다.
다시 말하지만, 다음 아티클에서 Formula에 대해 더 자세히 다룰 것이니, 지금 복잡해 보이더라도 걱정하지 마세요.
여기서 중요한 점은 입력 상자에 입력한 내용이 해당 레이어의 속성으로 저장되어 Pie에서 사용할 수 있다는 것입니다.
5.미리보기
최신 변경 사항으로 기기를 업데이트하려면 오른쪽 상단 아이콘 그룹에서 Run을 클릭합니다.
이제 이미지 검색을 실행할 수 있습니다. 검색하려는 내용을 입력한 다음 Search를 클릭하세요.
검색을 실행하면 결과를 표시하기 위해 장치가 브라우저 앱으로 전환되었음을 알 수 있습니다. iOS를 사용하는 경우 한 가지 더 조정할 수 있습니다.
▶ Return trigger 하단의 Link Response를 클릭합니다.
▶ 속성 패널에서 Open In-app Browser를 선택합니다.
Run을 한 번 더 클릭하여 최신 변경 사항으로 디바이스를 다시 로드하고 업데이트합니다. 검색을 실행하면 브라우저 탭이 ProtoPie Player 앱 내에서 열리고 Done을 눌러 검색창으로 돌아갈 수 있습니다.
누구든지 쉽게 생성할 수 있는 타이핑 인터랙션
이번 아티클에서는 텍스트 입력 필드를 구현하는 방법에 대해 배워보았습니다. 또한 Input Layer의 text 속성에 액세스하여 사용자가 입력한 모든 것을 사용할 수 있다는 것도 배웠습니다. 마지막으로 ProtoPie의 고급 기능 중 하나인 Formula의 강력함을 경험해 보았습니다.
다음 아티클에서는 Formula에 대해 자세히 알아보도록 하겠습니다.
