ProtoPie 크리에이티브 테크놀로지스트 인턴 Joy에게 큰 과제를 맡겼습니다. ProtoPie의 가장 독특하고 강력한 기능 몇 가지를 보여주는 하나의 고충실도 프로토타입을 만드는 일이었습니다. 그 결과, 익숙한 MacBook 설정 경험을 인터랙티브하고 유쾌하게 재현한 작품이 탄생했고, 그녀는 이를 처음부터 직접 구축했습니다.
저희는 너무 인상 깊어서 그녀에게 제작 과정에서 무엇을 배웠는지 공유해 달라고 부탁했습니다. ProtoPie를 사용하며 느낀 경험에 대해 그녀가 들려준 이야기는 다음과 같습니다.
"프로젝트를 처음 맡았을 때 가장 큰 과제는 프로토타입이 기능들의 어수선한 모음처럼 느껴지지 않도록 하는 방법을 찾는 것이었습니다. 영감은 MacBook 설정 과정 자체가 통합 개념이 될 수 있고, 각 단계가 ProtoPie의 특정 기능에 매핑될 수 있다는 점을 깨달았을 때 떠올랐습니다.
이 프로젝트는 놀라운 학습 경험이었습니다. 전체 튜토리얼은 매우 방대하지만, 제가 배운 가장 흥미로운 기술적 트릭 다섯 가지와 함께, 프로토타이핑의 힘에 대한 더 큰 교훈 하나를 공유하고 싶었습니다."
[여기를 클릭하세요 자세한 단계별 튜토리얼을 통해 이 pie를 직접 만드는 방법을 확인해 보세요!]
하이라이트 1: 실시간 텍스트 입력으로 모노그램 생성하기
이 부분은 알아내는 재미가 가장 컸던 부분 중 하나였습니다. 사용자가 이름을 입력하는 즉시 모노그램이 실시간으로 업데이트되도록 하고 싶었습니다.
핵심은 "전체 이름" 입력 필드를 실시간으로 감시하는 Detect trigger를 사용하는 것이었습니다. 수식을 사용해 텍스트에 공백이 포함되어 있는지 확인하는 로직을 만들었습니다.
공백이 없으면 입력값을 First_Name 변수에 넣고, 첫 글자를 Initial로 사용했습니다.
공백이 있으면 텍스트를 First_Name과 Last_Name 변수로 나눈 뒤, 각 이름의 첫 글자를 결합해 두 글자 모노그램을 만들었습니다.
하이라이트 2: 음성 속도를 동적으로 변경하기
"Speak Selection" 기능에서는 텍스트 음성 변환이 한 가지 속도만 가지는 것을 원하지 않았습니다. 사용자가 보통, 빠름, 느림 중에서 재생 속도를 선택할 수 있기를 바랐습니다.
이 기능은 재생 버튼이 클릭될 때마다 "속도 확인" 메시지를 보내 구현했습니다. 이 메시지는 사용자의 선택을 확인하고 해당 지속 시간(Normal/Fast/Slow)을 말하기 응답에 할당해 Selected_Text가 선택한 속도로 읽히도록 합니다. 이후 지연 시간을 둔 "재생 시작"과 "재생 종료" 메시지를 사용해 재생 상태를 관리하고 UI를 그에 맞게 업데이트했습니다.
하이라이트 3: 맞춤형 음성 명령 타임아웃 만들기
음성 비서는 사용자가 아무 말도 하지 않을 때 어떻게 해야 하는지 알아야 합니다. 상호작용이 그냥 멈추는 대신, 저는 맞춤형 타임아웃 처리기를 만들었습니다.
해결 방법은 작고 보이지 않는 박스를 만든 뒤, "타이머 시작" 메시지를 사용해 10초에 걸쳐 화면을 가로질러 이동하게 하는 것이었습니다. Detect trigger가 박스가 목적지에 도달했는지 계속 확인했습니다. 도달했다면 사용자가 타임아웃되었다는 뜻입니다. 그러면 프로토타입은 듣기를 멈추고, "죄송합니다, 이해하지 못했습니다"라고 말한 뒤, 현재 흐름의 위치에 따라 다음에 무엇을 말해야 하는지 사용자에게 안내했습니다.
하이라이트 4: 자동 스크롤 실시간 자막 만들기
"실시간 자막" 기능이 제대로 작동하려면 새 단어가 나타날 때마다 텍스트 컨테이너가 자동으로 스크롤되어 최신 전사가 보이게 유지되어야 합니다.
이를 위해 저는 텍스트 컨테이너가 커질 때마다 높이를 계속 추적하는 Text_Height 변수를 만들었습니다. 그런 다음 Detect trigger를 사용해 이 높이가 보이는 스크롤 컨테이너의 높이를 초과하는지 확인했습니다. 초과하면 Scroll response가 자동으로 실행되어 컨테이너가 새 텍스트 줄이 보일 만큼만 아래로 이동했습니다.
하이라이트 5: 재생 중 미리 입력된 텍스트 처리하기
"입력해서 말하기" 기능에서는 프로토타입이 이미 말하고 있는 도중에 사용자가 새 텍스트를 입력할 수 있습니다. 저는 이 "버퍼링된" 입력을 자연스럽게 처리해야 했습니다.
해결책은 재생에 "타이머 종료" 처리를 사용하는 것이었습니다. 프로토타입이 말하기를 마치면 Preparing_Input 변수를 확인했습니다.
그 변수에 내용이 있으면(즉, 사용자가 새 텍스트를 입력했다는 뜻) 이전 텍스트를 새로 준비된 텍스트로 대체했습니다.
변수가 비어 있으면 입력 필드를 그냥 비웠습니다. 이를 통해 사용자의 입력이 절대 사라지지 않도록 하고 상호작용이 매끄럽게 느껴지도록 했습니다.
[여기를 클릭하세요*** 자세한 단계별 튜토리얼을 통해 이 pie를 직접 만드는 방법을 확인해 보세요!]***
더 큰 교훈: 맥락이 전부다
기술적 트릭을 넘어, 이 프로젝트는 사용자 경험과 프로토타이핑 자체의 역할에 대해 몇 가지 중요한 교훈을 가르쳐 주었습니다.
프로토타입은 콘텐츠가 될 수 있다: 저는 예전에는 프로토타입을 기능 테스트를 위한 마지막 단계 정도로만 생각했지만, 이 프로젝트를 통해 인터랙티브한 프로토타입 자체가 그 자체로 강력한 학습 도구가 될 수 있다는 것을 알게 되었습니다. 사용자가 제품을 직접 경험하고 그 가능성을 손으로 느껴볼 수 있게 해줍니다.
친숙함은 강력한 힘이다: 사람들은 항상 완전히 새로운 것을 필요로 하지는 않습니다. 익숙한 MacBook 설정 경험을 중심으로 프로토타입을 구성함으로써, 특히 처음 사용하는 사람들에게 ProtoPie의 고급 기능이 더 친근하고 직관적으로 느껴지게 할 수 있었습니다. 공통의 मानसिक 모델을 바탕으로 디자인하는 것은 매우 효과적입니다.
하나로 묶는 개념이 핵심이다: 처음 시도한 버전은 기능을 억지로 많이 넣기만 해서 서로 단절된 데모처럼 느껴졌습니다. "설정"이라는 개념을 중심으로 프로젝트를 다시 구성하고 나서야 모든 것이 제자리를 찾았습니다. 그 경험을 통해 저는 맥락과 스토리가 콘텐츠 자체만큼이나 중요하다는 것을 배웠습니다. 기능을 어떻게 제시하느냐가 전체 경험을 좌우합니다.
ProtoPie를 시작하는 방법에 대한 더 많은 팁과 요령이 궁금하신가요?
바로 사용할 수 있는 예제 Pies를 포함한 다양한 학습 자료를 저희 ProtoPie School 섹션에서 확인하실 수 있습니다!
