[Tip] 동영상 플레이어 프로토타입 만들기

2024. 10. 2.

디지털 시대의 영향이 커지면서 음악과 동영상은 우리의 주요 오락 수단으로 확고히 자리 잡았습니다. 오디오 및 비디오 경험을 중심으로 한 앱을 설계할 때 가장 중요한 요소 중 하나는 고급 프로토타이핑입니다.

우리가 매일 사용하는 넷플릭스, 스포티파이, 틱톡, 페이스북 같은 앱들을 생각해보세요. 이들 앱의 핵심에는 신뢰할 수 있는 미디어 플레이어가 자리하고 있으며, 재생, 일시 정지, 매끄러운 진행 제어, 정확한 볼륨 조절과 같은 기본 기능을 제공합니다.

특히 ProtoPie와 같은 도구를 사용하면, 고급 프로토타이핑이 생각보다 훨씬 접근 가능해집니다. 이번 튜토리얼에서는 선도적인 앱 디자이너의 입장에서 멀티미디어 경험을 설계하는 방법을 보여드리겠습니다. 초보 디자이너들도 매력적이고 실현 가능한 멀티미디어 경험을 쉽게 만들 수 있다는 것을 경험해보세요.

미디어 플레이어 프로토타입 작동법

이 튜토리얼은 비디오 플레이어를 중심으로 진행되지만, 오디오 플레이어에도 동일하게 적용할 수 있습니다. 우리가 만들 인터랙션 기능을 간단히 살펴보면 다음과 같습니다:

  1. 기본 재생/일시 정지 제어 — 재생/일시 정지 버튼을 클릭하면 재생이 시작되거나 중지됩니다. 또는 비디오 어디를 클릭하든지 같은 기능을 수행할 수 있습니다.

  2. 비디오 진행 상태 추적 — 진행 막대의 아무 지점을 클릭하거나 직접 드래그하여 비디오의 진행 상태를 탐색할 수 있습니다.

  3. 볼륨 조절 — 볼륨 슬라이더를 드래그하면 볼륨을 조절할 수 있습니다. 볼륨 수준에 따라 볼륨 아이콘이 자동으로 바뀝니다. 또한 볼륨 버튼을 클릭하여 음소거할 수도 있습니다.

이러한 인터랙션은 사용자가 비디오나 오디오를 더욱 직관적으로 제어할 수 있도록 설계되었습니다.

시작하기 앞서

시작하기 전에 ProtoPie Player를 꼭 다운로드 받아주세요. 이 어플을 통해 앞으로 만들게 될 놀라운 미디어 플레이어를 검증하고 테스트할 수 있습니다.

아래의 “미완성 파이 다운로드"를 클릭하시고 ProtoPie Studio에서 미디어 플레이어 프로토타입을 열어주세요.

미완성 파이 다운로드

완성된 파이 다운로드

ProtoPie를 통해 인터랙티브한 비디오 플레이어 만들기

  1. 프로토타입에 비디오 사용하기

ProtoPie에 내장되어있는 미디어 레이어를 통해 비디오와 오디오를 결합하여 프로토타입을 손쉽게 강화할 수 있습니다. ProtoPie는 다양한 타입의 미디어 파일을 지원합니다

  • .mp4 (H.264) 100MB 까지

  • .wav, .mp3, .m4a

  • Lottie JSON

  1. 호버 효과로 시작하기

다운로드 받은 파이 파일을 열면 템플릿 안에 미리 만들어진 인터랙션을 볼 수 있습니다. 이러한 인터랙션에는 오버레이, 버튼 및 다양한 기능에 대한 호버 효과가 포함되며, 마우스 오버 및 마우스 아웃 트리거를 통해 이루어집니다.

이러한 기능을 처음 사용하는 경우 프로토파이 스쿨에서 편리한 퀵 스타트 레슨을 통해 연습하실 수 있습니다.

미리보기 창을 열고 원하는 항목을 자세히 살펴보겠습니다:

  • 비디오 플레이어 위로 호버링하면 다양한 기능을 보여주는 오버레이가 트리거됩니다.

  • 재생/일시 중지 및 앞으로 건너뛰기와 같은 각 기능에는 자체 호버 효과가 있습니다.

  • 커서를 비디오 플레이어에서 멀리 옮기면 3초만 기다리면 오버레이가 사라집니다.

  1. 기본적인 재생/멈춤 컨트롤 추가하기

물론 비디오가 로드되는 즉시 자동으로 재생이 시작되도록 프로토타입을 구성하는 것부터 시작하겠습니다. 비디오 레이어를 한 번만 설정하면 이 작업을 수행할 수 있습니다.

  • 비디오 레이어를 선택한 다음 해당 속성 패널로 이동합니다. 여기에서 “Play automatically” 옵션을 활성화합니다.

  • 미리 보기를 열면 비디오가 로드되면 비디오가 자동으로 재생됩니다.

💡 팁!  프로토파이는 업데이트를 편리하게 확인할 수 있도록 수정할 때마다 미리보기 창을 새로 고칩니다. 하지만 미디어 레이어로 작업할 때는 자주 새로고침하고 사운드 재생이 반복될 수 있습니다. 더 통제된 환경을 선호하는 경우 미리보기 창 설정에서 자동 재시작 옵션을 비활성화할 수 있습니다.

이 예시에는 동영상을 재생하거나 일시 정지하는 두 가지 방법이 있습니다. 첫 번째는 전용 재생/일시 정지 버튼을 사용하는 것이며, 두 번째는 동영상의 아무 곳이나 클릭하여 동일한 작업을 수행할 수 있습니다.

먼저 재생/일시 정지 버튼을 사용해보겠습니다.

인터랙션 프로세스를 간소화하려면 오버레이가 표시되는지 확인합니다. 오버레이 기능 하단 그룹을 찾아 불투명도를 100으로 설정합니다. 이렇게 하면 필요한 레이어를 더 쉽게 찾을 수 있습니다.

레이어 패널에서 재생/일시 정지라는 그룹을 찾습니다. 이 그룹에는 재생 아이콘과 일시 정지 아이콘이라는 두 개의 아이콘이 있습니다. 현재 재생 아이콘은 투명하게 구성되어 있으므로 미리 보기 창에는 일시 정지 아이콘만 표시됩니다(Opacity = 0).

  • 먼저 재생/일시 정지 그룹에 탭 트리거를 추가합니다. 그런 다음 Play 아이콘의 불투명도가 0과 같음을 기준으로 조건을 생성합니다. 이 조건 아래에서는 동영상 레이어에 Playback 리스폰스를 추가하여 일시 정지합니다. 

  • 동시에 아이콘도 전환해야 합니다. Play 아이콘의 경우 불투명도를 100으로 설정하고 Pause 아이콘의 경우 불투명도를 0으로 설정합니다.

  • 마찬가지로 Play 아이콘의 불투명도가 이미 100인 경우를 위한 두 번째 조건이 필요합니다. 프로세스를 간소화하려면 첫 번째 조건을 복제하고 필요한 사항을 조정하기만 하면 됩니다. 첫 번째 조건을 선택하고 키보드에서 ⌘ + D(Windows의 경우 ctrl + D)를 누릅니다.

  • 두 번째 조건에서는 Play의 불투명도를 100으로 설정합니다. 후속 리스폰스는 동영상을 재생하면서 재생 아이콘의 불투명도를 0으로 변경하고, Pause 아이콘의 불투명도를 100으로 변경하는 것입니다.

  • 이제 미리보기 창을 살펴보겠습니다. 재생/일시 정지 컨트롤이 완벽하게 작동하는 것을 볼 수 있습니다.

두 번째 방법인 동영상의 아무 곳이나 클릭하면 방금 구성한 첫 번째 방법과 인터랙션이 매우 유사해집니다.

  • 트리거 포인트는 비디오의 모든 위치를 탭할 때입니다. 이제 Video 레이어에 탭 트리거를 추가합니다. 그 다음, 재생/일시 정지 버튼의 인터랙션을 복사하여 여기에 붙여넣기만 하면 됩니다.

  • 몇 가지 마무리 작업을 추가합니다. 레이어 패널에 Large Play Button이라는 그룹이 표시됩니다. 동영상이 일시 정지된 후 동영상이 재생 중일 때 숨길 수 있도록 합니다. Opacity 리스폰스를 활용하여 동영상이 표시될 때와 숨길 때를 제어할 수 있습니다.

  • 마지막으로, 해결해야 할 세부 사항이 하나 더 있습니다. 동영상의 어느 곳이든 클릭한다고 언급했지만, 엄밀히 말하면 상단 및 하단 기능 영역은 제외를 시켜야 합니다.

  • 그렇게 하려면 두 그룹 Overlay Function Top 및 Overlay Function Bottom을 모두 선택하고 속성 패널에서 Make Lower Layers Touchable 옵션을 비활성화합니다.

끝입니다! 완벽하게 작동하는 재생/일시 정지 제어 시스템을 만들었습니다. 전용 버튼을 클릭하거나 화면의 어느 곳에서든 동영상 재생을 원활하게 제어할 수 있습니다.

  1. 비디오 진행 상황 확인하기

이제 진행 표시줄에 대한 인터랙션 설정에 대해 살펴보겠습니다. 이를 설정하기 위해서는 다음과 같은 작업들이 필요합니다.

  1. 동영상을 기준으로 현재 재생 시간과 총 시간을 표시합니다.

  2. 동영상이 재생 중일 때 현재 시간을 반영하여 진행 표시줄이 동기화되어 이동하는지 확인합니다.

  3. 사용자가 진행 표시줄을 드래그하여 동영상 내에서 탐색할 수 있습니다.

  4. 동영상의 아무 곳이나 탭하여 탐색할 수 있는 다른 옵션을 제공합니다.

하나씩 작업해 보겠습니다.

비디오 시간 표시

  • 먼저 Detect 트리거를 추가합니다. 트리거의 경우 Video 레이어의 Time 속성을 선택합니다. 이 설정은 비디오의 현재 재생 시간의 변경 사항을 지속적으로 모니터링하고 변경 사항이 발생하면 그에 따라 인터랙션을 트리거합니다.

  • 다음으로 Play Time 레이어에 텍스트 리스폰스를 할당합니다. 이 리스폰스에는 Formula를 사용합니다. 사용할 공식은 'Video'.currentTime입니다. 이렇게 하면 레이어가 동영상의 현재 재생 시간을 정확하게 반영할 수 있습니다.

  • 미리 보기를 하면 소수점 두 개로 표시되는 시간을 몇 초 단위로 확인할 수 있습니다. 이 형식은 사용자의 요구에 적합하지 않을 수 있습니다. 사용자 친화적인 형식으로 시간을 표시하려면 그에 따라 형식을 지정합니다.

  • 원하는 시간 형식을 얻으려면 특별히 이 장면(scene)에 대한 두 가지 베리어블을 생성합니다. 한 베리어블인 min은 형식화된 시간의 분 단위를 나타내며, 다른 베리어블인 sec는 초 단위로 표시됩니다.

  • 그런 다음 두 베리어블 모두에서 Use Formula 옵션을 확인합니다. 그리고 formula를 다음과 같이 설정합니다.

  • min 베리어블의 경우 floor('Video'.currentTime/60)를 사용합니다. 이 formula는 동영상의 현재 재생 시간을 60으로 나눈 다음 반올림하여 분 단위를 계산합니다.

  • sec 베리어블의 경우 floor('Video'.currentTime-min*60)를 사용합니다. 이 formula는 동영상의 현재 재생 시간에서 분(이전에 최소 변수로 계산)에 60을 곱한 값을 빼고 반올림하여 초 단위 자리를 계산합니다.

  • 베리어블이 올바르게 구성되어 있으면 간단한 디버깅 확인을 수행하겠습니다. 무당벌레 아이콘을 클릭하여 화면에 베리어블을 표시할 수 있습니다. 미리보기 창에서 녹색 상자에 베리어블이 표시되는 것을 볼 수 있습니다.

  • 마지막으로 텍스트 리스폰스로 돌아가 사용된 formula를 조정합니다. Formula를 lpad(min,2,"0")+":"+lpad(sec,2,"0")로 수정합니다. 이 formula는 일관성을 위해 필요한 경우 시간을 원하는 형식으로 표시하고 선행되는 0을 표시합니다.

  • 총 시간을 표시하려면 Video 레이어를 클릭하고 속성 패널에서 총 시간을 찾아 쉽게 액세스할 수 있습니다. 이 정보를 사용하면 원하는 형식으로 총 시간을 포함하도록 디자인을 조정할 수 있습니다.

  • 시간 표시를 위한 설정을 완료했습니다. 이제 지금까지 달성한 성과를 미리 살펴보고 이 모든 것이 어떻게 작동하는지 알아보겠습니다.

진행 표시줄과 인터랙션

진행 표시줄로 이동하겠습니다. 먼저 진행 표시줄에 현재 동영상 진행률이 반영되었으면 합니다.

  • 비디오의 시간을 진행 표시줄과 연결하려면 비디오 레이어에 Chain 트리거를 추가합니다. 트리거 속성의 경우 Time을 선택합니다.

  • 이제 비디오에서 진행 표시줄을 제어할 시간을 원합니다. 진행 표시줄을 드래그하는 데 사용되는 작은 점인 노브 레이어에 Move 리스폰스를 추가합니다(이는 튜토리얼의 후반부에서 소개하겠습니다).

비디오 범위의 경우 시작부터 끝까지 다양한 시간이 존재합니다. 노브의 X 위치는 왼쪽 끝에서 오른쪽 끝으로 이동해야 하므로 이 경우 0px에서 1200px 범위가 됩니다. 이 설정은 진행 표시줄과 동영상 재생 시간을 동기화합니다.

  • 또한 Active Fill Layer가 노브의 움직임에 따라 스케일되기를 원합니다. 이 경우 의 X 위치에 대해 다른 Chain을 수행합니다. 그런 다음 Active Fill에 Scale 리스폰스를 제공합니다.

이 설정을 사용하면 노브가 진행 표시줄을 따라 이동할 때 Active Fill 레이어가 그에 따라 확장됩니다.

  • 미리보기 창에서 살펴보겠습니다.

이제 진행 표시줄을 드래그 가능하게 만듭니다. 드래그 인터랙션이 진행 표시줄의 노브에 적용되어 동영상의 진행 상황을 살펴볼 수 있습니다. 동시에 동영상의 재생 위치가 조정되고 Active Fill 레이어가 그에 따라 진행 표시줄을 채웁니다.

  • Knob 레이어에 Drag 트리거를 추가합니다.

  • Drag 인터랙션 아래에서 노브에 대한 Move 동작을 구성합니다. 이 Move 동작의 경우 노브의 이동을 수평 방향으로만 제한합니다. 또한 노브가 진행 표시줄 밖으로 나가지 않도록 제한을 설정합니다. 특히 제한은 0px에서 1200px까지이며, 진행 표시줄의 범위 내에 유지됩니다.

  • Drag 동작을 완료하고 마우스를 놓으면 노브가 드래그된 현재 지점까지 동영상의 진행 상황을 확인할 수 있습니다. 이제 Knob 레이어에 Touch Up 트리거를 추가합니다.

  • Touch Up 동작의 경우 Video 레이어에 대한 Playback 리스폰스를 설정합니다. Playback 리스폰스에서 Seek 옵션을 선택하면 formula를 사용할 수 있습니다:

    • `Knob`.x / 1200 * Video.totalTime

이 공식에는 약간의 수학적 계산이 포함됩니다. 기본적으로 진행률 막대 내 노브의 현재 위치를 나타내는 Knob.x / 1200'의 비율을 취한 다음 비디오의 총 시간에 곱하여 현재 진행률을 계산합니다.

  • 지금 프리뷰를 하면 진행 표시줄의 작은 노브를 드래그하여 동영상의 진행 상황을 정확하게 제어할 수 있습니다.

또한 진행 표시줄에서 동영상의 진행 상황을 해당 지점으로 직접 설정할 수 있는 옵션을 원합니다.

  • 진행 표시줄 그룹에 Tap 트리거를 추가한 다음 Video 레이어에 재생 응답을 추가합니다.

  • Playback의 경우 Seek와 formula를 다시 사용합니다. 공식은 다음과 같습니다

    • toLayerX(Progress bar,$touchX,$touchY) / 1200 * Video.totalTime

이 공식에서 $touchX 와 $touchX는 전체 장면에 대한 터치 위치를 얻습니다. toLayerX()로 X 위치를 프로그레스 바 컨테이너에 대한 상대 위치로 변환합니다.

  • 지금까지 달성한 성과를 미리 살펴봅시다. 보시다시피 진행률 표시줄의 아무 곳이나 탭하면 동영상의 진행 상황을 쉽게 찾을 수 있습니다.

  • 프로그레스 바 인터랙션은 여기까지입니다. 이제 다른 미디어 플레이어와 마찬가지로 기능적인 프로그레스 바가 생겼습니다.

  1. 비디오 볼륨 조절하기

경험을 완성하기 위해 볼륨 컨트롤을 추가하는 작업을 진행하겠습니다. 앞서 설명한 것과 유사한 상호 작용이 포함되므로 간단한 작업을 위해 튜토리얼의 이 부분에 대한 간소화된 접근 방식을 따를 것입니다.

  • 볼륨 슬라이더 드래그 - 이 기능은 진행 표시줄에 대해 설정한 드래그 동작과 유사하게 작동합니다. 시작 프로토타입에서 Drag Volume Slider라는 이름의 그룹에서 이 기능을 찾을 수 있습니다.

  • 볼륨 슬라이더 탭 - 이 작업은 진행 표시줄에 대해 프로토타입으로 작성한 탭 작업과 유사하게 작동합니다. 시작 프로토타입에서 Tap Volume Slider라는 그룹 내에서 이 기능을 찾을 수 있습니다.

  • 볼륨 레벨에 따라 다른 볼륨 아이콘 표시 - 범위 트리거를 사용하여 볼륨 레벨을 감지하고 그에 따라 다른 아이콘을 표시합니다. 이 기능을 더 잘 이해하려면 범위 트리거에 대한 퀵 스타트 레슨을 확인하세요.

이 경우 원활한 음소거 및 음소거 해제 환경을 만드는 데 중점을 둘 것입니다.

  • Volume Button 그룹에 Tap 트리거를 추가합니다.

  • 재생/일시 정지 버튼을 사용한 것과 마찬가지로 Volume Button 그룹에서 음소거 및 음소거되지 않은 그룹을 볼 수 있습니다. 여기에는 서로 다른 상태를 나타내는 아이콘이 포함되어 있습니다.

  • 음소거된 그룹의 불투명도가 0일 때 비디오에 사운드가 있음을 나타내는 조건을 설정합니다. 이 조건이 충족되면 볼륨 레벨 레이어의 너비(Width)를 0으로 구성합니다.

  • 시작 파이에서는 비디오 볼륨이 볼륨 레벨의 너비에 묶여 있는 것을 볼 수 있으므로 볼륨이 0으로 낮아집니다.

  • Muted 그룹의 불투명도가 100인 경우에 대한 추가 조건을 생성하여 동영상이 음소거되었음을 나타냅니다. 이 조건에서는 Volume Leve 레이어의 너비가 동영상이 음소거되기 전의 이전 상태로 돌아가도록 구성합니다.

  • 이를 위해서는 볼륨 레벨의 너비가 0으로 낮아지기 전에 ProtoPie가 볼륨 레벨의 너비를 기억할 수 있는 방법을 찾아야 합니다. 변수가 도움이 될 수 있습니다. volumeResumeLevel이라는 변수를 생성해 보겠습니다.

  • 첫 번째 조건(Opacity of Muted = 0)에서 새로 생성된 변수에 볼륨 레벨의 너비를 할당합니다.

이 단계에서는 볼륨 버튼을 탭하여 동영상을 음소거하면 탭하는 순간 볼륨 레벨이 volumeResumeLevel 변수로 기억됩니다.

  • 두 번째 조건(Opacity of Muted = 100)에 이어 이제 볼륨 레벨 레이어에 스케일 동작을 구현할 수 있습니다. 이 동작은 레이어를 volumeResumeLevel에 저장된 값으로 확장하여 볼륨이 음소거되기 전의 원래 레벨로 효과적으로 복원합니다.

  • 음소거/음소거 해제 환경에 대한 마지막 리뷰를 해보겠습니다. 여기에서 볼 수 있듯이 동영상의 음소거를 해제하면 볼륨 레벨이 음소거되기 전의 원래 수준으로 돌아갑니다.

ProtoPie에서 미디어 플레이어를 위한 인터랙션을 성공적으로 구현하셨습니다! 사용자가 쉽게 플레이, 일시 중지, 진행 상황 조정, 볼륨 조절, 음소거/음 해제를 할 수 있도록 하는 방법을 배웠습니다. 이러한 기술은 다양한 디자인 프로젝트에 적용되어 어플리케이션의 인터랙션과 기능을 향상시킬 수 있습니다.

프로토파이는 복잡한 인터랙션을 생성할 수 있는 강력한 플랫폼을 제공하며, 더 많은 것들을 탐구하실 수 있습니다. 지식과 기술을 더욱 심화하고 싶다면 프로토파이 스쿨에 참여하여 프로토타이핑 전문가가 되어 인터랙티브 디자인을 한 단계 발전시키고 싶은 최소 10,000명의 학생이 등록한 종합 프로토파이 101 과정을 수강하세요.

대중적인 수요에 따라 마침내 TV 프로토타이핑 및 비디오 스트리밍 앱의 UX 마스터클래스를 출시했습니다. 아래에 가입하여 프로토파이 스쿨에서 학습을 시작하고 최신 영화, TV 및 프로덕션 관련 기능을 추가해보세요.

강의 시작하기