Source는 야심 찬 목표에 의해 움직이는 제품 디자인 및 개발 에이전시입니다: 환경이 아무리 복잡하더라도 고객을 위해 동급 최고 수준의 디지털 제품과 경험을 만들어내는 것. 이러한 포부는 Pathé Cinemas를 비롯해 유럽 대륙 최초의 영화관 체인과 같은 유럽의 가장 권위 있는 브랜드들과 파트너십을 맺는 계기가 되었습니다.
Pathé가 경쟁이 치열한 시장에서 우위를 더욱 확대하려 하자, 회사는 앱 UX의 감성적 측면을 다듬기 위해 Source에 도움을 요청했습니다. Source에게 이는 이해관계자들의 승인을 얻기 위해 모바일 앱 프로토타입을 빠르게 개발해야 한다는 뜻이었습니다.
이 모든 것을 가능하게 한 도구는? ProtoPie였습니다.
개요
Pathé Cinemas의 과제: 정적인 모바일 앱 디자인
디자인에서의 “감성” 개념
Source의 제품 디자인 워크플로에서 프로토타이핑의 역할
디자인 에이전시를 위한 이상적인 프로토타이핑 도구
Source가 ProtoPie로 감성을 프로토타이핑한 방법
모바일 앱 프로토타입을 개발한 네 단계
프로토타입으로 이해관계자의 동의를 확보하기
Pathé Cinemas의 과제: 정적인 모바일 앱 디자인
탁월한 영화 경험으로 유명한 Pathé Cinemas는 모바일 앱의 사용자 경험을 한 단계 끌어올릴 기회를 포착했습니다.
경영진은 선도적인 스트리밍 플랫폼과 경쟁하기 위해 Pathé 앱에 “와우” 요소를 더할 잠재력을 확인했습니다. 앱은 기능적이었지만, 그들은 탐색, 전환, 마이크로 인터랙션을 강화하는 역동적이고 유연한 디자인을 구상했습니다.
이 피드백은 영화관 경험과 Pathé 브랜드 자체가 지닌 짜릿함을 닮은 감성적 매력을 앱에 불어넣을 흥미로운 기회를 보여주었습니다.
당연히 Source 팀은 이 도전에 큰 기대를 품었고, 완전히 준비된 상태였습니다.
디자인에서의 “감성” 개념
Source에서는 앱이 단순히 기능적 목적만 수행하는 것이 아니라 사용자를 즐겁게 해야 한다고 굳게 믿습니다. 이러한 접근이 비즈니스 성과를 저해하는 것은 아닙니다. 오히려 디지털 접점에서 즐거움과 만족을 제공하는 것은 브랜드 선호도, 고객 만족도, 충성도를 높입니다.
Source의 시니어 프로덕트 디자이너 Théo Grandin은 “이 프로젝트의 맥락에서 '감성'의 개념은 Pathé Cinemas와 연관된 프리미엄 포지셔닝과 몰입감 있는 엔터테인먼트 경험을 담아내는 것을 목표로 한다”고 설명합니다.
하지만 모바일 앱에서의 “감성” 개념은 직접 경험해 보기 전까지는 종종 추상적으로 남아 있을 수 있습니다. 따라서 프로토타이핑은 앱 디자인 과정에서 매우 중요한 단계입니다. 디자이너가 감성적 요소가 개발자에게 인계되기 전에 어떻게 작동할지 시각화하고 테스트할 수 있게 해주기 때문입니다.
Source의 제품 디자인 워크플로에서 프로토타이핑의 역할
Source의 Théo Grandin은 디자이너와 개발자로 구성된 팀이 “최종 사용자는 디자인 도구가 아니라 코드로 구현된 인터페이스와 상호작용하기 때문”이라며 코드를 진실의 원천으로 삼는다고 설명합니다.
그들의 제품 디자인 프로세스에서는 디자인에서 개발로의 인계가 최대한 매끄럽게 이루어지도록 다음과 같이 노력합니다.
공통 언어를 확립하고;
이미 코드화된 에셋을 전달하며;
포괄적인 문서를 제공합니다.
프로토타이핑은 Source의 인계 문서화에 포함되어, 설계된 목업과 실제 제품 간의 높은 충실도와 일관성을 보장합니다.
Pathé 앱 UX 프로젝트에서 그들은 실제 스마트폰에서 감성적 디자인 원칙을 보여 주어 이해관계자들을 설득하기 위해 프로토타이핑을 사용했습니다.
Source 같은 디자인 에이전시에게 ProtoPie가 이상적인 프로토타이핑 도구인 이유
ProtoPie의 기능과 역량을 이미 잘 알고 있던 Source 팀은, 이 프로젝트에 ProtoPie가 이상적인 프로토타이핑 도구라고 판단했습니다. 그 이유는 다음과 같습니다.
실제 모바일 기기에서 프로토타입을 테스트할 수 있기 때문입니다. 디자인 에이전시는 프로토타입이 실제 모바일 기기에서 매끄럽게 작동하는지 확인해야 했습니다. 결과는 기능적일 뿐만 아니라 유려하고 반응성도 좋아야 했습니다.
iOS 기본 기능을 그대로 구현할 수 있기 때문입니다. 이 프로젝트에는 롱 프레스, 드래그, 핀치, 가속도계 사용, picture-in-picture 구현과 같은 iOS 특유의 제스처와 기능을 사실적으로 시뮬레이션하는 것이 필요했습니다. ProtoPie는 이러한 기능을 “기본 제공”하므로, Source 팀이 사용자 경험을 한층 높일 수 있는 복잡한 상호작용을 통합할 수 있었습니다.
전환과 모션을 더 세밀하게 다듬을 수 있기 때문입니다. ProtoPie는 애니메이션 타이밍과 이징 옵션을 정밀하게 제어할 수 있어, 디자이너들이 원하는 감성적 효과를 얻을 때까지 이 부분을 세밀하게 다듬을 수 있었습니다.
자, 이제 ProtoPie로 모바일 앱 프로토타입을 어떻게 설계했는지 살펴보겠습니다.
Source가 ProtoPie로 감성을 프로토타이핑한 방법
프로토타입을 제작할 때 Source 팀은 세 가지 핵심 축에 집중했습니다.
몰입감. 이는 피드형 스크롤을 통해 구현되었으며, 영상과 더 큰 포스터를 포함해 사용자를 시각적으로 풍부한 환경으로 끌어들였습니다.
탐색의 유연성. 앱 디자인에는 닫기 위해 드래그하기, 평점을 위해 길게 누르기 같은 직관적인 전환과 제스처가 포함되어 있어, 앱이 기능적이면서도 즐겁게 느껴지도록 했습니다.
시그니처 순간. 사용자에게 더 기억에 남는 경험을 제공하기 위해, 제품 디자이너들은 예약 확인 시 나타나는 세련된 애니메이션과 같은 핵심 상호작용에 집중했습니다.
모바일 앱 프로토타입을 개발한 네 단계
프로토타이핑 과정에서 Source 팀은 Pathé의 프로덕트 매니저와 마케팅 디렉터와 긴밀히 협업한 세 명의 디자이너로 구성되어 있었습니다.
다음은 Source 팀이 개발을 단계별로 체계적으로 접근한 방식입니다.
1. 첫 번째 엔드투엔드 흐름 만들기
디자인 에이전시 팀은 기본 애니메이션을 포함해 ProtoPie에서 첫 번째 엔드투엔드 흐름을 만드는 것부터 시작했습니다.
2. 적절한 타이밍과 이징을 찾기 위한 테스트
전체 흐름을 프로토타이핑한 후, 팀은 각 애니메이션 유형에 최적의 타이밍과 이징을 찾기 위해 광범위한 테스트를 진행했습니다.
3. 프로토타입 조화시키기
최적의 설정을 찾아낸 후, 팀은 모든 요소에서 일관된 사용자 경험을 제공하도록 프로토타입을 조화시키는 데 집중했습니다.
4. 개발자 인계를 위한 사양 문서화
마지막으로, 슬라이드를 사용해 Figma에서 개발자 인계를 위한 사양을 문서화했습니다.
이 과정 전반에 걸쳐 Source 팀은 고객을 위해 모든 애니메이션 원칙을 꼼꼼히 문서화했으며, 그 결과 향후 프로젝트에서 활용할 수 있는 새로운 사양 템플릿도 만들었습니다.
프로토타입으로 이해관계자의 동의를 확보하기
프로토타입이 완성되자, 다음 단계는 이를 Pathé의 이해관계자들에게 제시하는 것이었습니다.
Source 팀은 구체적인 지침이나 시나리오를 제공하는 대신, 프로토타입이 탑재된 기기를 그대로 전달했습니다.
프로토타입은 실제 앱처럼 보이도록 설계되어 모든 화면과 주요 기능이 구현되어 있었습니다. 이해관계자들이 영화 탐색, 예고편 시청, 티켓 구매 시뮬레이션 등을 자유롭게 살펴보고 상호작용할 수 있게 함으로써, Source 팀은 그들의 자연스러운 반응을 관찰할 수 있었습니다.
Théo Grandin은 “ProtoPie를 사용하는 가장 큰 장점은 수많은 목업보다 살아 있는 고충실도 프로토타입이 훨씬 더 강한 인상을 준다는 점입니다. 모두가 슬라이드에 지루해할 거라는 걸 알고 있었습니다”라고 말합니다.
결국 Pathé의 이해관계자들은 큰 감명을 받았고, 이 새로운 기능들을 앱에 통합하기 위한 일정에 대해 곧바로 논의를 시작했습니다. 이들의 강한 지지는 제안된 여러 개선 사항을 앱의 다음 업데이트에 통합할 준비가 되어 있음을 분명히 보여주었으며, 프로토타입이 사용자 경험을 향상시키고 브랜드의 혁신적인 정신과도 부합할 수 있음을 강조했습니다.
Source가 항상 프로토타이핑에서 그렇게까지 나아가지는 않지만, Théo Grandin은 이번 프로젝트가 특정 맥락에서 고급 프로토타이핑 도구의 유용성과 효과를 보여 주는 구체적인 사례를 제공했다고 말합니다.
Théo Grandin은 또한 ProtoPie를 사용하지 않았다면 “2주라는 짧은 시간 안에 높은 품질의 결과를 얻을 수 없었을 것”이라고 덧붙입니다.
ProtoPie로 모바일 앱 디자인의 수준을 한 단계 높이세요
ProtoPie는 15,000개 이상의 기업에서 디자이너와 개발자가 최종 빌드 이전에도 정교하고 고충실도의 프로토타입을 만들 수 있도록 지원합니다. 당신과 팀이 모바일 앱의 비전을 현실로 만들 준비가 되었다면, 오늘 무료로 ProtoPie를 시작해 보세요!
