brunch

You can make anything
by writing

C.S.Lewis

by ProtoPie Jul 19. 2022

ProtoPie로 인터랙티브 뮤직 플레이어 구축하기

ProtoPie로 인터랙티브 뮤직 플레이어를 구축한 사례를 살펴보세요.

*Brunch 내 오류로 인해 몇몇 gif는 사진으로 대체되었음을 알려드립니다.


불과 수십년 전만 해도, 음악 애호가들은 앨범을 선택하기 전,신중하게 여러 앨범을 둘러봤던 것 같습니다. 하지만 기술적인 발전으로 인해, 기존의 아날로그적인 음악적 경험으로부터 점점 멀어지게 되었는데요. 이제 어떤 노래든 클릭 한 번이면 들을 수 있기 때문에, 앨범을 하나의 예술 작품으로써 생각하는 경우가 많지 않은 것 같습니다.

Tiles(영문)는 터치 스크린 그리고 이목을 끄는 비주얼과 음악 스트리밍 앱을 통합함으로서, 기존에 중요하게 여겨졌던 음악 고유의 예술성을 현 시대에 맞게 재구현 하였습니다. 

Tiles 팀의 아이디어를 현실화하기 위해서는 매끄러운 사용성을 위한 기술과 매력적인 디자인 사이의 완벽한 균형을 이룰 수 있는 최고의 래피드 포로토타이핑 툴이 필요했는데요. 이를 위해 그들은 ProtoPie로 눈을 돌렸습니다.

이번 케이스 스터디에서는 네덜란드의 테크놀로지스트이자 Umea Institute of Design의 대학원생인 Kay van Der Aker(영문)가 참여한 Tiles 프로젝트에 대한 더 자세한 내용과 ProtoPie를 사용하여 어떻게 팀의 hi-fi 프로토타이핑 필요를 충족했는지 알아보았습니다. 





Hi-Fi 프로토타이핑의 중요성


프로토타이핑은 저의 제품 디자인 프로세스에서 필수적인 부분입니다. 프로토타이핑을 통해 컨셉의 탐색, 검증 및 반복하며 아이디어의 잠재력을 직접 확인할 수 있기 때문이지요. 
저는 하드웨어와 소프트웨어를 하나로 묶고 무엇이 효과가 있는지 확인하는, 아날로그와 디지털을 융합하는 것을 좋아하는데요. 이를 위해서는 hi-fi 인터랙션을 시연할 수 있는 래피드 프로토타이핑 툴이 반드시 필요합니다. 

커리어의 대부분에서 저는 아두이노(영문)와 Processing(영문)을 사용했습니다. 하지만 이 조합을 사용했을 때, 애니매이션의 케이스 처리 시간이 지연되는 문제가 계속적으로 발생하였습니다. 가끔 Figma(영문)를 사용하긴 했지만, 스마트 애니메이션에 대한 컨트롤이 만족스럽지 못했던 것 같습니다. 

ProtoPie는 BMW Group(영문)에 근무하면서 처음 접하게 되었는데, 그 이후로 지금까지 프로토타이핑 구현을 위해 계속 사용하고 있습니다. 그동안 ProtoPie의 다양한 기능을 통해 상상 속의 아이디어를 현실로 나타낼 수 있었을 뿐만 아니라 인터랙션 디자인의 무한한 가능성을 탐색할 수 있었습니다. 




ProtoPie를 선택한 이유


Tiles 프로젝트의 경우, 아두이노와 같은 하드웨어와 원활하게 연결할 수 있는 hi-fi 프로토타이핑 소프트웨어가 필요했습니다.완전히 코딩이 가능한 툴은 아니더라도, Figma보다는 조금 더 기능적으로 고도화되고 복합적이면서도 빠르게 작업할 수 있는 툴이 필요했습니다. 최적의 프로토타이핑 툴을 사용하면 신속한 프로토타이핑이 가능하고 애니메이션과 인터랙션을 세부적으로 제어할 수 있어, 단순 개발보다 더 자유롭게 프로토타입을 탐색하고 디자인하는 데 집중할 수 있습니다.

이번 프로젝트에서는 ProtoPie를 사용했는데요ProtoPie에서는 코딩을 사용하지 않고도 trigger와 정밀도 높은 애니매이션 컨트롤이 탑재된 환경과 아두이노 같은 하드웨어를 연결할 수 있을 뿐만 아니라, 협업을 위한 최고의 환경을 누릴 수 있었습니다. 

여기(영문)를 클릭하여 ProtoPie에서 하드웨어 및 소프트웨어 연결에 대해 자세히 알아보세요.



기본적으로 ProtoPie는 코드 없이도 디자이너가 variables, trigger, 그리고 response를 사용하여 고차원적인 구조를 만들 수 있는 자유를 제공합니다. 따라서, 99%의 프로토타이핑 니즈는 ProtoPie 하나만으로도 충분히 해결할 수 있습니다. 뿐만 아니라, 협업에 이상적인 확장성과 넓은 디바이스 지원 범위로 시간과 비용을 대폭 절약할 수 있습니다. 즉, ProtoPie는 디자인과 기술간의 완벽한 균형을 이룹니다. 

 ProtoPie는 사용자 친화적이면서도 훌륭한  래피드 프로토타이핑 툴입니다. ProtoPie의 무한한 인터랙션 잠재력에 대해 더 알아보고 싶다면, trigger, response, formula 및 variables에 대한 문서를 확인해 보세요. 




프로젝트에서 ProtoPie의 역할


요즘은 클릭 한 번으로 전 세계의 모든 음악을 접할 수 있기 때문에, 현대 사회에서 음악을 감상할 때 과거에 느꼈던 감정이나 가치를 느끼지 못하는 것 같습니다. 이런 예술적인 가치를 복구하고자 Tiles를 시작했는데요. 이번 연구 프로젝트를 통해 사용자가 앨범을 선택하고, 앨범 아트워크를 스크롤하고, 볼륨을 조절하는 등의 작업을 할 수 있는 멀티 스크린 디바이스를 만들었습니다.

ProtoPie는 아두이노와 원활하게 작동하여, 이틀 만에 사용 가능한 프로토타입을 만들 수 있었습니다. 아두이노를 통해 ProtoPie에 내장된 사용자 인터페이스에 여러 센서를 연결할 수 있었기 때문에, 실제 하드웨어에서 인터페이스를 빠르게 변경할 수 있었습니다.



ProtoPie는 매우 직관적이고 빠르며 사용이 용이하여, 많은 시간을 제품 자체의 동작을 형성하는 데 집중할 수 있었습니다. 비록 목업이라도, 빠르고 반응적이며, 다른 기능을 빠르고 정확하게 시연할 수 있었습니다. 또한 ProtoPie에서는 인터랙션 사운드를 trigger response로 재생할 수 있어, 프로토타입의 현실성은 한층 업그레이드할 수 있다는 것입니다. 이런 점들은 타 프로토타이핑 툴에서는 쉽게 찾아볼 수 없는, ProtoPie만의 큰 강점이라고 할 수 있겠네요.

현재 15,000개 이상의 기업에서 ProtoPie를 통해 프로토타입을 구현하고 있습니다. 데모를 신청하여 ProtoPie가 팀의 성공을 도울 수 있는 방법에 대해 알아보세요!



ProtoPie 평생 무료로 사용하기






브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari