디지털 시대의 영향력이 날로 커지면서 음악과 비디오는 우리의 주요 엔터테인먼트 원천으로 확고히 자리 잡았습니다. 오디오와 비디오 경험을 중심으로 한 앱을 설계해야 할 때, 핵심적으로 떠오르는 한 가지가 있습니다. 바로 고급 프로토타이핑입니다.
우리가 매일 화면에서 보는 대표적인 앱들을 떠올려 보세요. Netflix, Spotify, TikTok, 그리고 Facebook입니다. 그 핵심에는 재생, 일시정지, 끊김 없는 진행 제어, 정교한 볼륨 조절 같은 기본 기능을 갖춘 안정적인 미디어 플레이어가 있습니다.
특히 든든한 동반자인 ProtoPie와 함께라면, 고급 프로토타이핑은 생각보다 훨씬 더 쉽게 다가옵니다. 이 튜토리얼에서는 여러분이 선도적인 앱 디자이너가 된 듯한 관점으로 따라가 보도록 안내합니다. 시작하는 디자이너도 매력적이면서 실현 가능한 멀티미디어 경험을 얼마나 쉽게 만들 수 있는지 보여드리겠습니다.
개요
미디어 플레이어는 어떻게 작동하나요
시작하기 전에
ProtoPie를 사용해 인터랙티브 미디어 플레이어 만들기
프로토타입에 비디오 사용하기
호버 효과부터 시작하기
기본 재생 및 일시정지 컨트롤 추가하기
비디오 진행 상태 추적하기
비디오 볼륨 조절하기
완료! 프로토타입이 완성되었습니다
TV 및 비디오 스트리밍 마스터클래스에 참여하세요
미디어 플레이어 프로토타입은 어떻게 작동하나요
이번 데모는 비디오 플레이어에 초점을 맞추지만, 여기서 다루는 단계는 오디오 플레이어에도 동일하게 적용됩니다. 세부 내용으로 들어가기 전에, 어떤 인터랙션을 만들 수 있는지 먼저 간단히 살펴보겠습니다:
기본 재생 / 일시정지 컨트롤 — 재생/일시정지 버튼을 클릭하기만 하면 재생을 시작하거나 멈출 수 있습니다. 또는 비디오의 아무 곳이나 클릭해도 동일하게 재생/일시정지 동작을 수행할 수 있습니다.
비디오 진행 상태 추적 — 비디오의 진행 상태를 이동하려면 진행 막대의 원하는 지점을 클릭하거나 막대 자체를 드래그하면 됩니다.
볼륨 컨트롤 — 볼륨 슬라이더를 드래그하는 것만으로 볼륨을 쉽게 조절할 수 있습니다. 또한 볼륨 아이콘은 볼륨 수준에 따라 모양이 달라집니다. 또는 볼륨 버튼을 직접 클릭해 음소거할 수도 있습니다.
시작하기 전에
배우게 될 내용을 미리 살펴보겠습니다. 하지만 본격적으로 시작하기 전에, 흥분을 조금 더 끌어올려 봅시다. 스마트폰에 ProtoPie Player 앱이 설치되어 있는지 꼭 확인하세요. 이 앱은 곧 구현할 멋진 미디어 플레이어 컨트롤을 테스트하고 검증하는 데 핵심이 됩니다!
아래에서 시작용 Pie 파일을 다운로드한 뒤, ProtoPie Studio에서 미디어 플레이어 프로토타입을 열어 주세요.
미디어 플레이어 프로토타입 미리보기
준비되셨나요? 이제 배움을 시작해 봅시다!
ProtoPie를 사용해 인터랙티브 비디오 플레이어 만들기
1. 프로토타입에 비디오 사용하기
ProtoPie에 내장된 미디어 레이어를 사용하면 매끄러운 비디오 및 오디오 통합으로 프로토타입을 손쉽게 강화할 수 있습니다. ProtoPie는 다음과 같은 다양한 미디어 파일 형식을 지원합니다:
.mp4(H.264) 최대 100 MB..wav,.mp3및.m4aLottie
JSON
2. 호버 효과부터 시작하기
시작용 pie 파일을 열면 템플릿 안에 미리 만들어진 인터랙션 세트가 있는 것을 볼 수 있습니다. 이 인터랙션은 Mouse Over와 Mouse Out 트리거를 통해 오버레이, 버튼 및 다양한 기능에 대한 호버 효과를 구현한 것입니다.
이 기능이 처음이라면, ProtoPie School에서 제공하는 편리한 Quick Start lesson으로 더 익숙해질 수 있습니다.
미리보기 창을 열고 사용할 수 있는 기능을 좀 더 자세히 살펴봅시다:
비디오 플레이어 위에 마우스를 올리면 여러 기능을 보여 주는 오버레이가 나타납니다.
Play/Pause, Skip Forward 같은 각 기능에는 고유한 호버 효과가 적용되어 있습니다.
비디오 플레이어에서 커서를 다른 곳으로 옮기면 3초만 기다리세요. 그러면 오버레이가 자연스럽게 사라집니다.
'Starting Pie' 파일 미리보기
3. 기본 재생 및 일시정지 컨트롤 추가하기
물론입니다. 먼저 프로토타입이 로드되자마자 자동으로 비디오 재생을 시작하도록 설정해 봅시다. 비디오 레이어의 설정을 한 가지만 조정하면 됩니다.
비디오 레이어를 선택한 다음 속성 패널로 이동합니다. 여기에서 Play Automatically 옵션을 활성화하세요.
Play automatically 옵션
이제 Preview를 열면 비디오가 로드되는 즉시 자동으로 재생되기 시작하는 것을 볼 수 있습니다.
💡 꿀팁! ProtoPie는 편집할 때마다 미리보기 창을 새로 고치도록 되어 있어 업데이트를 편리하게 확인할 수 있습니다. 하지만 미디어 레이어를 다룰 때는 자주 새로 고침되면서 소리가 반복 재생될 수 있습니다. 더 통제된 환경을 원한다면 미리보기 창 설정에서 Auto Restart 옵션을 끌 수 있습니다.
미리보기 창 설정의 'Auto Restart' 옵션.
이번 예제에는 비디오를 재생하거나 일시정지하는 두 가지 방법이 있습니다. 첫 번째는 전용 Play/Pause 버튼을 사용하는 방법이고, 두 번째는 비디오의 아무 곳이나 클릭해서 동일한 동작을 실행하는 방법입니다.
먼저 첫 번째 방법인 Play/Pause 버튼부터 시작해 봅시다.
상호작용 과정을 단순하게 만들기 위해 오버레이가 보이도록 설정해 보겠습니다. Overlay Functions Bottom 그룹을 찾아 불투명도를 100으로 설정하세요. 그러면 필요한 레이어를 더 쉽게 찾을 수 있습니다.
오버레이 기능.
레이어 패널에서 Play/Pause라는 그룹을 찾으세요. 이 그룹 안에는 Play 아이콘과 Pause 아이콘 두 개가 있습니다. 현재 Play 아이콘은 투명하게 설정되어 있습니다(Opacity = 0). 따라서 미리보기 창에서는 Pause 아이콘만 보입니다.
Play / pause 아이콘의 불투명도.
먼저 Play/Pause 그룹에 Tap 트리거를 추가합니다. 다음으로 Play 아이콘의 불투명도가 0과 같다는 조건을 만듭니다. 이 조건 아래에는 Video 레이어를 Pause 하도록 하는 Playback 응답을 추가합니다.
동시에 아이콘도 바꿔 줘야 합니다. Play 아이콘의 불투명도는 100으로, Pause 아이콘의 불투명도는 0으로 설정하세요.
Play / pause 버튼 아이콘의 불투명도.
마찬가지로 Play 아이콘의 불투명도가 이미 100일 때를 위한 두 번째 조건이 필요합니다. 과정을 간단하게 하기 위해 첫 번째 조건을 복제한 다음 필요한 부분만 수정하면 됩니다. 첫 번째 조건을 선택하고 키보드에서 ⌘ + D (Windows에서는 ctrl + D)를 누르세요.
두 번째 조건에서는 Play의 불투명도를 100으로 설정합니다. 이후 응답으로는 비디오를 재생하고, Play 아이콘의 불투명도를 0으로, Pause 아이콘의 불투명도를 100으로 바꿉니다.
Play 아이콘의 불투명도를 0으로, Pause 아이콘의 불투명도를 100으로 바꿉니다.
이제 미리보기 창에서 확인해 봅시다. Play/Pause 컨트롤이 완벽하게 작동하는 것을 볼 수 있습니다.
두 번째 방법인 비디오의 아무 곳이나 클릭하는 방식도, 방금 구성한 첫 번째 방법과 매우 비슷합니다.
트리거 지점은 비디오의 아무 곳이나 탭할 때입니다. 그러니 Video 레이어에 Tap 트리거를 추가해 봅시다. 그런 다음 아주 쉽게, Play/Pause 버튼의 인터랙션을 복사해서 여기 붙여넣으면 됩니다.
Play/Pause 버튼의 인터랙션을 복사해 붙여넣습니다.
마무리 작업을 몇 가지 더 해봅시다. 레이어 패널에서 Large Play Button이라는 그룹을 볼 수 있습니다. 이 버튼은 비디오가 일시정지 상태일 때는 보이고, 재생 중일 때는 숨겨지도록 해야 합니다. 이를 위해 Opacity 응답을 사용해 표시와 숨김을 제어할 수 있습니다.
Large Play 버튼.
마지막으로 한 가지 더 살펴보겠습니다. 비디오의 아무 곳이나 클릭한다고 했지만, 엄밀히 말하면 상단과 하단 기능 영역은 피하고 싶습니다.
상단과 하단 기능 영역은 피합니다.
이를 위해 Overlay Functions Top과 Overlay Functions Bottom 두 그룹을 선택한 뒤, 속성 패널에서 Make Lower Layers Touchable 옵션을 비활성화하세요.
Make Lower Layers Touchable 옵션을 비활성화합니다.
축하합니다! 완전하게 동작하는 Play/Pause 컨트롤 시스템을 성공적으로 구현했습니다. 전용 버튼을 클릭하든 화면의 아무 곳이나 클릭하든, 이제 비디오 재생을 매끄럽게 제어할 준비가 되었습니다. 잘하셨습니다!
4. 비디오 진행 상태 추적하기
이제 진행 막대에 대한 인터랙션 설정으로 들어가 보겠습니다. 이는 다음과 같은 일련의 작업으로 이루어집니다:
비디오를 기준으로 현재 재생 시간과 총 시간을 표시하기.
비디오가 재생 중일 때 진행 막대가 현재 시간에 맞춰 함께 움직이도록 하기.
사용자가 진행 막대를 드래그해 비디오 안에서 탐색할 수 있게 하기.
대안으로 비디오의 아무 곳이나 탭해 이동할 수 있는 방법을 제공하기.
하나씩 작업해 봅시다.
비디오 시간 표시하기
먼저 Detect 트리거를 추가해 보겠습니다. 트리거로는 Video 레이어의 Time 속성을 선택합니다. 이렇게 설정하면 비디오의 현재 재생 시간이 바뀔 때마다 이를 계속 감지하고, 변경이 발생하면 그에 따라 인터랙션이 실행됩니다.
Detect 트리거를 추가합니다.
다음으로 Play Time 레이어에 Text 응답을 지정합니다. 이 응답에는 Formula를 사용합니다. 사용할 공식은 ``Video
.currentTime.입니다. 이렇게 하면 레이어가 비디오의 현재 재생 시간을 정확하게 반영하게 됩니다.
Play Time 레이어에 Text 응답을 지정합니다.
미리보기에서 보면 시간이 초 단위로 두 자리 소수점까지 표시되는 것을 볼 가능성이 큽니다. 이 형식은 필요에 따라 적합하지 않을 수 있습니다. 더 사용자 친화적인 형식으로 보여 주기 위해 시간을 원하는 방식으로 포맷하겠습니다.
시간이 초 단위로 두 자리 소수점까지 표시됩니다.
원하는 시간 형식을 만들기 위해 For This Scene에만 적용되는 변수를 두 개 생성합니다. min 변수는 포맷된 시간의 분을 나타내고, 다른 sec 변수는 초를 나타냅니다.
그다음 두 변수 모두에서 Use Formula 옵션을 체크합니다. 그리고 아래와 같이 공식을 설정합니다.
두 변수 모두에서 'Use Formula' 옵션을 체크합니다.
min 변수에는
floor(Video.currentTime/60)를 사용합니다. 이 공식은 비디오의 현재 재생 시간을 60으로 나눈 뒤 내림하여 분 단위를 계산합니다.
min에 대한 공식 설정.
sec 변수에는
floor(Video.currentTime-min*60)를 사용합니다. 이 공식은 비디오의 현재 재생 시간에서 분(앞서 min 변수에서 계산한 값)에 60을 곱한 값을 뺀 뒤 내림하여 초를 계산합니다.
sec에 대한 공식 설정.
변수를 제대로 설정했으니, 간단한 디버깅 확인을 해봅시다. ladybug 아이콘을 클릭하면 변수가 화면에 표시됩니다. 미리보기 창에서는 변수가 초록색 박스 안에 나타나는 것을 볼 수 있습니다.
간단한 디버깅 확인을 해봅시다.
마지막으로 Text 응답으로 돌아가 그 안에서 사용하는 공식을 조정하겠습니다. 공식을
lpad(min,2,"0")+":"+lpad(sec,2,"0")로 수정합니다. 이렇게 하면 필요할 경우 앞에 0을 채워 넣어, 시간을 원하는 형식으로 일관되게 표시할 수 있습니다.
공식을 수정합니다.
총 시간을 표시하려면 비디오 레이어를 클릭한 다음 속성 패널에서 총 시간을 확인하면 됩니다. 이 정보를 바탕으로 원하는 형식에 맞게 총 시간이 포함되도록 디자인을 조정할 수 있습니다.
원하는 형식에 맞게 총 시간이 포함되도록 디자인을 조정할 수 있습니다.
잘하셨습니다! 시간 표시 설정을 완료했습니다. 이제 지금까지 만든 결과가 어떻게 함께 작동하는지 미리 살펴봅시다.
진행 막대와 상호작용하기
이제 진행 막대로 넘어가 보겠습니다. 먼저 진행 막대가 현재 비디오 진행 상태를 반영하도록 하고 싶습니다.
비디오의 시간과 진행 막대를 연결하기 위해 Video 레이어에 **Chain **트리거를 추가해 봅시다. 트리거 속성으로는 Time을 선택합니다.
Video 레이어에 Chain 트리거를 추가합니다.
이제 비디오의 시간이 진행 막대를 제어하도록 만들겠습니다. 진행 막대를 드래그할 때 사용하는 작은 점인 Knob 레이어에 Move 응답을 추가합니다(이 부분은 튜토리얼의 다음 단계에서 소개합니다).
Knob 레이어에 Move 응답을 추가합니다.
비디오의 Range는 시작 시간부터 종료 시간까지입니다. Knob의 X 위치는 왼쪽 끝에서 오른쪽 끝으로 이동해야 하므로, 이 경우 0px에서 1200px 범위가 됩니다. 이렇게 설정하면 진행 막대가 비디오의 재생 시간과 동기화됩니다.
Knob의 움직임에 따라 Active Fill 레이어도 함께 확대되도록 하고 싶습니다. 이 경우 X position에 대해 또 다른 Chain을 적용해 봅시다. 그리고 Active Fill에는 Scale 응답을 추가합니다.
Knob의 X position에 대해 또 다른 Chain을 추가하고 Active Fill에 Scale 응답을 적용합니다.
이 설정은 Knob이 진행 막대를 따라 움직일 때 Active Fill 레이어도 그에 맞게 확대되도록 해줍니다.
미리보기 창에서 확인해 봅시다.
재생 시간 표시 미리보기.
이제 진행 막대를 드래그할 수 있게 만들어 봅시다. 드래그 인터랙션은 진행 막대의 Knob에 적용되며, 이를 통해 비디오의 진행 위치를 이동할 수 있습니다. 동시에 비디오는 재생 위치를 조정하고, Active Fill 레이어는 그에 맞춰 진행 막대를 채웁니다.
Knob 레이어에 Drag 트리거를 추가합니다.
Drag 인터랙션 아래에서 Knob에 대한 Move 동작을 설정합니다. 이 Move 동작에서는 Knob의 이동을 수평 방향으로만 제한하고 싶습니다. 또한 Knob이 진행 막대 밖으로 나가지 않도록 범위를 지정합니다. 구체적으로 범위는 0px to 1200px로 설정해 진행 막대의 경계 안에 머물도록 합니다.
Knob에 대한 Move 동작을 설정합니다.
드래그 동작을 마치고 마우스를 놓으면, 비디오가 Knob이 드래그된 지점으로 진행 상태를 이동하기를 원합니다. 그러니 Knob 레이어에 Touch Up 트리거를 추가해 봅시다.
Knob 레이어에 Touch Up 트리거를 추가합니다.
Touch Up 동작에서는 Video 레이어에 대한 Playback 응답을 설정합니다. Playback 응답 안에서는 Seek 옵션을 선택하고, 이를 위해 다음 공식을 사용합니다:
Knob`.x / 1200 * Video.totalTime`
Video 레이어에 대한 Playback 응답을 설정합니다.
이 공식은 약간의 수학 계산을 포함합니다. 핵심적으로는 진행 막대 안에서 현재 Knob 위치를 나타내는 Knob.x / 1200`의 비율을 사용해 현재 진행 상태를 계산한 뒤, 여기에 비디오의 총 시간을 곱합니다.
이제 미리보기해 봅시다. 보시다시피 진행 막대의 작은 Knob를 드래그해 비디오의 진행 상태를 정확하게 제어할 수 있습니다.
진행 막대 드래그 동작 미리보기.
진행 막대 안에서는 아무 곳이나 탭해서 그 지점으로 바로 비디오 진행 상태를 설정할 수 있는 옵션도 원합니다.
Progress Bar 그룹에 Tap 트리거를 추가한 뒤 Video 레이어에 Playback 응답을 추가합니다.
Playback에서는 다시 Seek와 공식을 사용합니다. 공식은 다음과 같습니다
toLayerX(Progress bar,$touchX,$touchY) / 1200 *Video`.totalTime```
Progress Bar 그룹에 Tap 트리거를 추가한 뒤 Video 레이어에 Playback 응답을 추가합니다.
이 공식에서 $touchX와 $touchX는 전체 씬을 기준으로 한 터치 위치를 가져옵니다. toLayerX()를 사용하면 X 위치를 Progress Bar 컨테이너를 기준으로 변환할 수 있습니다.
지금까지 만든 결과를 미리보기해 봅시다. 보시다시피 진행 막대의 아무 곳이나 탭하면 비디오의 진행 상태를 쉽게 이동할 수 있습니다.
진행 막대 탭 동작 미리보기.
이렇게 진행 막대 인터랙션은 마무리되었습니다. 잘하셨습니다! 이제 다른 미디어 플레이어처럼 제대로 작동하는 진행 막대를 갖게 되었습니다.
5. 비디오 볼륨 조절하기
경험을 완성하기 위해 볼륨 컨트롤도 추가해 봅시다. 앞서 다뤘던 인터랙션과 비슷한 부분이 많기 때문에, 이 튜토리얼의 이 부분은 간결하게 진행하겠습니다.
볼륨 슬라이더 드래그 — 이 기능은 진행 막대에 설정한 드래그 동작과 유사하게 작동합니다. 시작 프로토타입에서는 Drag Volume Slider. 그룹에서 이 기능을 찾을 수 있습니다.
볼륨 슬라이더 탭 — 이 동작은 진행 막대에 대해 프로토타입에서 구현했던 탭 동작과 유사합니다. 시작 프로토타입에서는 Tap Volume Slider.라는 그룹에서 이 기능을 찾을 수 있습니다.
볼륨 수준에 따라 다른 볼륨 아이콘 표시 — Range 트리거를 사용해 볼륨 수준을 감지하고, 그에 따라 다른 아이콘을 표시합니다. 이 기능을 더 잘 이해하려면 Range 트리거에 대한 이 Quick Start lesson을 참고해 보세요.
볼륨 슬라이더 인터랙션 미리보기.
이번에는 자연스러운 음소거 및 음소거 해제 경험을 만드는 데 집중하겠습니다.
Volume Button 그룹에 Tap 트리거를 추가해 봅시다.
Play/Pause 버튼을 다룰 때와 마찬가지로, Volume Button Group 안에는 Muted와 Unmuted 그룹이 있습니다. 여기에는 서로 다른 상태를 나타내는 아이콘이 들어 있습니다.
Muted 및 Unmuted 그룹.
Muted 그룹의 불투명도가 0일 때를 위한 조건을 설정해 봅시다. 이는 비디오에 이제 소리가 있다는 뜻입니다. 이 조건이 충족되면 Volume Level 레이어의 너비를 0으로 설정합니다.
조건을 설정합니다.
시작 pie 파일에서는 Video 볼륨이 Volume Level의 너비와 Chain되어 있으므로, 결과적으로 볼륨이 0까지 내려가게 됩니다.
또한 Muted 그룹의 Opacity가 100일 때를 위한 추가 조건도 만들겠습니다. 이는 비디오가 음소거되었다는 뜻입니다. 이 조건에서는 Volume Level 레이어의 너비가 비디오가 음소거되기 전의 이전 상태로 되돌아가도록 설정합니다.
추가 조건을 만듭니다.
이를 위해 ProtoPie가 볼륨을 0으로 낮추기 전의 Volume Level 너비를 기억하게 할 방법이 필요합니다. 변수 하나가 도움이 됩니다.
volumeResumeLevel이라는 변수를 만들어 봅시다.첫 번째 조건(
Opacity of Muted = 0) 아래에서 Volume Level의 Width를 새로 만든 변수에 할당합니다.
Volume Level의 Width를 새로 만든 변수에 할당합니다.
이 단계를 통해 비디오를 음소거하기 위해 Volume Button을 탭하는 순간, 우리가 만든 volumeResumeLevel 변수가 그 시점의 Volume Level을 기억하게 됩니다.
두 번째 조건(
Opacity of Muted = 100) 다음에는 이제 Volume Level 레이어에 Scale 동작을 적용할 수 있습니다. 이 동작은 레이어를volumeResumeLevel에 저장된 값으로 스케일링하여, 음소거되기 전의 원래 볼륨 수준으로 효과적으로 복원합니다.
Volume Level 레이어에 Scale 동작을 적용합니다.
이제 음소거 / 음소거 해제 경험을 최종 점검해 봅시다. 보시다시피 비디오의 음소거를 해제하면 볼륨 수준이 음소거되기 전의 원래 수준으로 돌아갑니다.
음소거 / 음소거 해제 경험 최종 점검.
완료! 기능하는 비디오 플레이어를 프로토타입했습니다
ProtoPie에서 미디어 플레이어의 인터랙티브 컨트롤을 성공적으로 구현한 것을 축하합니다! 이제 사용자가 재생, 일시정지, 진행 상태 조절, 볼륨 제어, 음소거 / 음소거 해제를 손쉽게 할 수 있도록 매끄러운 사용자 경험을 만드는 방법을 배웠습니다. 이러한 기술은 다양한 디자인 프로젝트에 적용되어 앱의 인터랙티브함과 기능성을 한층 높여 줍니다.
고급 프로토타이핑 역량을 한 단계 높이기
ProtoPie는 정교한 인터랙션을 만들 수 있는 강력한 플랫폼이며, 더 탐구할 수 있는 내용도 무궁무진합니다. 지식과 기술을 더 깊이 쌓고 싶다면 ProtoPie School에 참여해, 프로토타이핑 전문가가 되고 인터랙티브 디자인을 한 단계 끌어올리고 싶은 10,000명 이상의 수강생과 함께하는 종합 ProtoPie 101 course를 들어보세요.
TV 및 비디오 스트리밍 마스터클래스에 참여하세요
여러분의 많은 요청에 힘입어 마침내 UX Masterclass in TV Prototyping and Video Streaming Apps를 공개했습니다. 아래에서 신청하고 ProtoPie School에서 학습을 시작하세요. 또한 Film, TV, Production 관련 최신 기능 소식을 계속 받아보실 수 있습니다.
즐거운 디자인과 프로토타이핑 되세요!
