이 튜토리얼에서는 친숙하고 재미있는 MacBook 설정 경험을 재현하는 고충실도 프로토타입을 만드는 과정을 안내합니다. 이 프로젝트는 ProtoPie의 가장 강력한 기능들 몇 가지를 하나로 일관되고 상호작용적인 방식으로 보여주도록 설계되었습니다.
실시간 입력 검증이 있는 인터랙티브 프로필 편집기를 만드는 것부터 텍스트 음성 변환과 음성 명령 같은 고급 접근성 기능을 구축하는 것까지 모두 다룹니다.
시작해 봅시다.
파트 1: 인터랙티브 프로필 편집기
이 첫 번째 섹션은 사용자가 정보를 입력하고 프로필 이미지를 개인화할 수 있는 "Create Computer Account" 화면을 만드는 데 중점을 둡니다.
단계 1: 입력 검증 구현
먼저, 실시간 검사와 폼 제출 시 검증을 모두 포함해 사용자 입력을 검증하는 시스템을 구축합니다.
검증 트리거:
Validation_Type 변수를 포함한 메시지를 보내는 "Validation" 트리거를 만듭니다. 이 변수는 폼 제출 시에는 "Continue"로, 실시간 검증 시에는 "Real-Time"으로 설정됩니다.
이 메시지는 "continue" 버튼을 탭할 때 또는 입력 필드가 포커스를 잃을 때 전송되어야 합니다.
검증을 트리거할 때는 먼저 Error_Exists라는 변수를 1로 초기화합니다.
Validation_Type가 "Continue"이면 "Continue Validation" 메시지를 보내고, "Real-Time"이면 "Real-Time Validation" 메시지를 보냅니다.
검증 메시지 처리:
프로토타입이 "Continue Validation"을 받으면:
필수 입력 필드(계정 이름, 사용자 이름, 비밀번호, 비밀번호 확인)가 비어 있지 않은지 확인합니다.
입력 필드 텍스트의 길이가 0이면(length(input field layer name.text) = 0), 해당 필드의 오류 메시지를 표시합니다.
프로토타입이 "Real-Time Validation"을 받으면:
비밀번호와 비밀번호 확인 필드가 일치하는지 확인합니다.
일치하지 않으면(password input.text = password confirmation input.text), 오류 메시지를 표시합니다.
오류 표시 및 진행:
검증 결과에 따라 관련 오류 메시지를 표시합니다.
모든 검사가 통과하면 Error_Exists 변수를 0으로 설정합니다.
"continue" 버튼을 누르면 모든 입력 필드가 포커스를 잃도록 하여 검증 검사를 실행합니다.
Error_Exists가 0이면 다음 씬으로 이동합니다.
단계 2: 프로필 팝업 만들기
이 단계에서는 프로필 편집 팝업 창의 로직을 다룹니다.
팝업 전환: 사용자가 편집, 취소 또는 저장 버튼을 클릭할 때 팝업과 편집 버튼의 표시 여부를 전환합니다.
저장 버튼 로직:
편집 버튼을 클릭하면 Current_Profile 변수를 확인합니다. 값이 "None"이면 저장 버튼을 비활성화합니다.
사용자가 저장을 클릭하면 Current_Profile 변수를 Selected_Profile 값으로 업데이트합니다.
취소 버튼 로직:
사용자가 취소를 클릭하면 Previews 컴포넌트로 "Reset Profile" 메시지를 보내 프로필을 원래 Current_Profile로 되돌립니다.
또한 Profile 컴포넌트로 "Reset Selection" 메시지를 보내 현재 선택을 지웁니다.
목록 전환: "Emoji" 또는 "Monogram" 버튼을 클릭하면 각 목록과 선택된 효과의 표시 여부를 전환합니다.
단계 3: 프로필 이미지 저장 및 크기 조정
여기서는 프로필 이미지의 선택, 표시 및 크기 조정을 처리합니다.
프로필 선택: 프로필 이미지를 탭하면 Selected_ID를 포함한 "Select Profile" 메시지를 보냅니다. 또한 새 항목을 표시하기 전에 이전 선택을 모두 지우기 위해 "Reset Selection" 메시지를 보냅니다.
프리뷰 업데이트: Previews 컴포넌트에서 Reorder_ID 변수를 사용해 어떤 이미지가 맨 위에 표시될지 관리합니다.
저장 활성화: 메인 씬이 "Select Profile" 메시지를 받으면 저장 버튼을 활성화합니다.
초기 텍스트 표시: 선택한 프로필이 "Monogram"이면 이니셜 텍스트를 표시합니다.
이미지 크기 조정: 크기 조절용 "Knob"를 가로로 드래그할 수 있게 만듭니다. Chain 트리거를 사용해 Knob의 x 위치를 Indicator, Preview 이미지, 그리고 이니셜 텍스트의 크기와 연결합니다.
단계 4: 이름 입력으로 모노그램 만들기
파트 1의 마지막 단계에서는 사용자의 입력 이름으로부터 모노그램 이니셜을 동적으로 생성하는 방법을 설명합니다.
이름 입력 추적: 실시간으로 Full name 입력 필드의 텍스트를 추적하는 Your_Name라는 변수를 만듭니다.
이니셜 추출: Your_Name가 변경될 때마다 활성화되는 Detect 트리거를 사용합니다.
공백이 없으면 (이름만 있는 경우): 입력값을 First_Name에 할당하고 첫 글자를 Initial 변수에 할당합니다.
공백이 있으면: 공백 앞의 텍스트를 First_Name에, 뒤의 텍스트를 Last_Name에 할당합니다. 그런 다음 First_Name의 첫 글자와 Last_Name의 첫 글자를 더해 Initial 변수에 할당합니다.
모노그램 업데이트: Initial 값을 메시지로 Profile 컴포넌트에 보내 모노그램 텍스트를 업데이트합니다. 이니셜도 이미지 크기 조정 로직에 맞춰 비례적으로 크기가 조정되도록 합니다.
파트 2: 접근성 기능
이 섹션은 macOS에서 볼 수 있는 기능을 본떠 만든 네 가지 개별 접근성 기능의 구현을 다룹니다.
단계 1: 선택 항목 읽어주기 (Vision)
이 기능은 화면 컨트롤러와 함께 선택한 텍스트를 음성으로 읽어 줍니다.
설정: 텍스트 크기, 줄 수, 하이라이트 크기, 발화 지속 시간(Slow_Duration, Normal_Duration 등)과 같은 항목을 위해 컴포넌트에 오버라이드 가능한 변수를 미리 정의합니다.
트리거: 사용자가 문장을 더블탭하면 선택된 텍스트와 지속 시간 값을 메인 씬으로 보냅니다. 화면 컨트롤러를 표시하고 이전 하이라이트를 모두 초기화합니다.
컨트롤러: 컨트롤러를 드래그할 수 있게 합니다. 버튼에는 마우스오버 효과를 추가합니다. 재생/정지 버튼은 IsSpeaking 변수를 전환합니다.
재생 로직: 재생을 클릭하면 선택된 속도(보통, 빠름, 느림)를 확인하고 Speak 응답을 사용해 해당 지속 시간으로 Selected_Text를 읽어 줍니다.
초기화: 발화를 중지하고, 하이라이트를 지우며, 컨트롤러를 숨기는 "Reset all" 메시지를 만듭니다.
단계 2: 음성 지원 - "Hey Pie" 설정 (Motor)
이 기능은 다양한 명령에 반응하는 음성 비서를 구현합니다.
타이핑 효과: 카운터 변수(Answer_Char_Counter)와 Receive 트리거를 사용해 비서의 답변을 한 글자씩 써 내려가 타이핑 효과를 만듭니다.
음성 명령: 서로 다른 문구에 대한 별도의 Voice Commands를 만듭니다(예: "Hello," "Play some chill music").
동적 응답: Response_Num 변수를 사용해 서로 다른 Answer_Text 값을 트리거합니다. 예를 들어 사용자가 "hello"라고 말하면 Response_Num을 1로 설정하고 비서가 "Hello, how can I help you?"라고 답하게 합니다. 이를 통해 음악 재생이나 볼륨 변경 같은 다른 응답도 트리거할 수 있습니다.
타임아웃 로직: 보이지 않는 타이머 박스를 사용해 사용자가 일정 시간(예: 10초) 동안 말하지 않았는지 감지합니다. 타임아웃이 발생하면 비서가 "Sorry, I couldn't understand,"라고 말하고 사용자에게 다시 시도해 달라고 요청합니다.
단계 3: 실시간 자막 (Hearing)
이 기능은 말한 오디오를 실시간으로 전사해 표시합니다.
설정: 씬이 시작되면 즉시 연속 청취를 시작합니다.
전사 표시: 내장된 $voiceTranscript 변수를 사용하고, 업데이트될 때마다 그 값을 텍스트 필드에 할당합니다.
자동 스크롤: 텍스트 컨테이너의 높이를 Text_Height 변수로 추적합니다. Detect 트리거를 사용해 Text_Height가 스크롤 가능한 컨테이너의 높이를 초과했는지 확인합니다. 초과했다면 컨테이너를 자동으로 아래로 스크롤해 가장 최근 텍스트가 보이도록 합니다.
종료: 사용자가 씬을 떠나기 전에 반드시 Stop Listening 동작을 사용합니다.
단계 4: 입력하여 말하기 (Speech)
이 기능을 사용하면 사용자가 텍스트를 필드에 입력하고 시스템이 그것을 소리 내어 읽습니다.
설정: 씬이 로드되면 start 트리거를 사용해 텍스트 입력 필드에 자동 포커스를 맞춥니다.
재생: 사용자가 재생을 누르거나 Enter를 누르면 입력 필드의 텍스트를 포함한 Speak 응답을 트리거합니다.
재생 타이머: 발화 지속 시간(예: length(Input_Speaking) * 0.1)을 계산합니다. 보이지 않는 타이머 박스를 사용해 이 지속 시간만큼 이동시킵니다.
재생 종료: 타이머가 끝나면 "End Timer" 메시지를 보냅니다. 이렇게 하면 UI가 재설정되고, 재생/정지 버튼이 다시 전환되며, 오디오가 재생되는 동안 사용자가 입력했을 경우 텍스트 대체를 처리합니다.
그리고 이렇게, 멋진 인터랙티브 프로토타입을 만드는 기술을 마스터했습니다! 이제 나아가 멋진 무언가를 만들어 보세요.
ProtoPie를 시작하는 방법에 대한 더 많은 팁 & 요령이 궁금하신가요?
바로 사용할 수 있는 예제 Pie를 포함한 다양한 학습 자료를 우리의 ProtoPie School 섹션에서 찾을 수 있습니다!
