일본 인터넷 기업 ABEMA가 운영하는 동영상 배급 플랫폼 CyberAgent, Inc를 만나보세요.
텔레비전을 혁신하고 “텔레비전의 새로운 미래”를 만들겠다는 목표를 가진 ABEMA는 일본에서 유일한 24시간 뉴스 채널을 보유하고 있습니다. 그뿐만 아니라, 이 플랫폼은 다양한 장르의 약 25개 채널도 제공합니다. 자사 드라마, 로맨스 프로그램, 애니메이션, 스포츠 중계까지 모두 시청자에게 무료로, 그리고 회원가입 없이 제공됩니다.
2022년 11월부터 12월까지 ABEMA는 전 세계적으로 큰 주목을 받은 어느 축구 이벤트를 스트리밍했습니다(무슨 이벤트인지 알고 계실 수도, 모를 수도 있습니다). 이 이벤트를 설계할 때 디자인 팀은 시청 경험을 향상하기 위해 몇 가지 과제에 직면했지만, ProtoPie에서 해결책을 찾았습니다.
여기에서는 ABEMA의 프로덕트 디자이너인 Matsumoto가 팀이 스트리밍 비디오 디자인 프로세스에서 ProtoPie를 어떻게 활용하는지 설명합니다.
프로토타이핑이 ABEMA 디자인 팀에서 중요한 이유
ABEMA의 디자인 팀은 2017년부터 ProtoPie를 가장 선호하는 프로토타이핑 도구로 사용해 왔습니다. 다시 말해, 꼬박 6년 동안 사용해 온 셈입니다.
프로토타이핑의 주된 목적은 스트리밍 UI 디자인을 평가하고 결정하는 것입니다.
하지만 비디오 스트리밍 서비스 프로토타입에는 다음과 같은 점도 중요합니다:
프로토타이핑 시 비디오 파일을 다룰 수 있어야 합니다.
버퍼링 중인 비디오를 재현할 수 있어야 합니다.
비디오를 시청할 때 UI를 평가할 수 있어야 합니다.
이를 위해 팀은 고충실도 프로토타입이 필요했습니다. 운 좋게도 ProtoPie는 이들의 모든 요구사항을 충족했습니다.
ABEMA가 비디오 스트리밍 시스템 설계에서 프로토타이핑을 사용하는 방법
2023년 기준 ABEMA의 프로덕트 디자인 팀은 6명으로, 매년 새로운 멤버가 합류합니다. 이제는 모든 팀원이 ProtoPie에 익숙해야 합니다.
“Figma를 익히는 것이 UI 디자이너에게 필수인 것처럼, ProtoPie도 팀원들이 매일 훈련받는 도구로 자리 잡고 있습니다.”라고 Matsumoto는 말합니다.
다음은 팀이 라이브 스트리밍 시스템 설계에서 ProtoPie를 적용하는 몇 가지 예시입니다.
1. 멀티 앵글
축구 시청 경험을 개발할 때 ABEMA의 시행착오 과정은 일본의 방송 텔레비전에서는 불가능한 경험을 만드는 데 초점을 맞췄습니다. 적어도 아직은 그렇습니다.
떠오른 아이디어 중 하나가 멀티 앵글 기능이었습니다.
ABEMA에는 원래 멀티 앵글 기능이 있었지만, 제한된 운영에서만 사용되었고 UI도 아직 초기 단계였습니다. 아직 핵심 기능으로 자리 잡지는 못한 상태였습니다.
그래서 팀은 스스로에게 물어야 했습니다. ABEMA의 멀티 앵글 기능은 각도 전환 요구사항을 충족하면서도, 시청 경험을 방해하지 않고 다양한 앵글을 확인하고 전환할 수 있도록 어떻게 설계해야 할까요?
팀은 사용자 조사와 논의를 진행하면서 여러 디자인 패턴을 만들었습니다.
결국 그들은 다음과 같은 디자인을 선택했습니다.
기존 패턴을 검토한 결과, 팀은 앵글을 전환할 때 비디오 로딩이 발생한다는 점을 파악했습니다. 이 동작을 고려한 프로토타입을 만들었습니다.
이를 통해 더 현실적인 상황을 재현하고 UI 평가의 정확도를 높이는 데 성공했습니다.
이 프로토타입 제작에는 개발팀뿐 아니라 비즈니스 팀, 동영상 배급 팀, 프로모션 팀 등 회사 내 많은 이해관계자가 참여했습니다. 이는 조직 전체가 최종 프로토타입에 대한 공통된 비전을 공유할 수 있도록 하기 위함이었습니다.
2. 경기 데이터
“경기 데이터” 기능은 사용자가 시청 중에도 경기 상태를 확인할 수 있게 해줍니다. 디자인 팀은 라이브 스트리밍 시스템 설계 개발을 고려하며 이 기능을 프로토타이핑했습니다.
그들은 경기 데이터를 알아보기 쉽게 해 주는 애니메이션을 만들 수 있는지 확인하기 위해 다음과 같은 프로토타입을 제작했습니다.
아쉽게도 애니메이션은 실제로 구현되지는 않았지만, 프로젝트 팀 내 프로모션 논의에서 여전히 유용하게 활용되었습니다.
3. 사용자 통신 환경에 대한 알림
인터넷을 통한 비디오 배급은 사용자의 통신 환경과 서비스 제공업체의 서버 등 여러 요인으로 인해 불안정할 수 있습니다.
많은 시청자가 이런 대규모 축구 이벤트에 접속할 것으로 예상됩니다. 따라서 화질을 제어하고 전송이 원활하게 이어지도록 특별히 주의를 기울였습니다.
예를 들어, ABEMA 디자인 팀은 통신 환경이 불안정해 화질이 떨어질 때 사용자용 라이브 스트리밍 UI에 알림을 추가했습니다.
화질이 낮아진 여러 비디오 파일 패턴을 준비하고, 각 비디오별로 여러 형태의 알림 UI를 표시할 수 있는 ProtoPie 파일을 만들어 프로젝트 멤버들과 실제 경험이 어떤 모습일지 분명하게 공유할 수 있었습니다.
ProtoPie의 장점 중 하나는 에셋과 UI 전환을 활용해 하나의 프로토타입으로 다양한 상황을 재현할 수 있다는 점입니다.
팀은 또한 다음과 같은 작업도 할 수 있었습니다:
사용자 조사를 수행합니다.
시청 경험의 부담을 최소화하면서 알림을 정확하게 전달하는 디자인이 무엇인지 평가합니다.
안 A는 비디오 위에 작은 영역만 덮어 시청 경험을 방해하지 않으면서 시청자에게 알림을 줄 수 있는 아이디어로 여겨졌습니다.
조사 결과, 비디오 티커처럼 보이는 안 A의 알림을 36%의 사용자가 알아차리지 못했습니다. 안 B가 앱의 메시지를 전달하는 데 더 정확한 것으로 나타났습니다.
애플리케이션을 구현하는 편이 더 빠르지 않을까요?
이런 종류의 고충실도 프로토타이핑을 생각할 때 떠오르는 질문 중 하나는, 창의적인 도구로 굳이 프로토타이핑하는 수고를 들일 필요가 정말 있느냐는 것입니다. 애플리케이션을 구현해서 실행하는 편이 더 확실하지 않을까요?
그럴 수도 있고 아닐 수도 있습니다. 여기에는 몇 가지 고려할 기준이 있습니다:
1. 프로토타이핑에 걸리는 시간
지금까지 소개한 ProtoPie 파일은 작업하는 데 1시간 정도면 충분합니다. 더 단순한 비디오 프로토타입이라면 단 10분 만에 만들 수 있습니다. 하루 이상 시간을 투자해야 하는 복잡한 프로토타이핑이라면 다른 방식을 고려해 보는 것이 좋을 수 있습니다.
얼마나 쉽게 만들 수 있는지 직접 확인해 보세요. TV 리모컨 프로토타입.
2. 데이터의 복잡성
ProtoPie는 현재 이미지, 비디오, 텍스트와 같은 에셋을 파일 안에 직접 포함해 만드는 방식에 기반하고 있습니다.
프로토타입에 방대한 양의 스크롤과 콘텐츠를 포함하고 싶다면, 데이터를 동적으로 처리할 수 있도록 애플리케이션을 구현하고 실행하는 편이 좋을 수 있습니다.
디자이너와 개발자의 협업을 돕는 프로토타입
ABEMA 팀은 엔지니어에게 상세한 UI 전환을 전달하는 데도 ProtoPie를 사용합니다. Interaction Recordings를 활용해 전환 타임라인과 흐름을 만들었고, 이를 통해 엔지니어가 코딩하기 쉬운 형태로 정리했습니다.
다음은 ProtoPie를 사용한 라이브 스트리밍 시스템 설계 방식이 잘 드러나는 ABEMA UI의 몇 가지 예시입니다.
예시 1: 홈 화면 미리보기 영역에서 TV 시청 화면으로의 전환
전환을 모달 및 푸시 전환이 겹쳐진 화면으로 표현하는 방법도 있었습니다. 하지만 팀은 전환 전후를 명확하게 연결하고 인지 가능하게 만들어 몰입감을 주고 싶었습니다.
그들은 과거 iOS 사진 앱인 ForYou의 구조를 참고했습니다.
예시 2: 시작 시퀀스
앱 실행부터 홈 화면 표시까지의 순서를 확인하는 데도 프로토타입이 유용했습니다.
로딩 UI와 소요 시간이 사용자 경험에 미치는 영향을 확인하기 위해, ABEMA 디자인 팀은 각 화면의 로딩 시간을 초 단위로 지정할 수 있는 프로토타입을 만들었습니다.
보시다시피 ProtoPie를 활용한 고충실도 프로토타이핑은 ABEMA 팀의 디자인 워크플로 전반에 걸쳐 많은 도움을 주었습니다. 예를 들면 다음과 같습니다:
식별 이슈에 대한 조사;
사용성 평가;
구현 과정에서 세부 이미지를 공유.
식은 죽 먹기죠.
ProtoPie로 라이브 스트리밍 UI를 혁신하세요
수많은 디자이너와 기업이 ProtoPie를 사용해 비디오 스트리밍 UI의 미래를 설계하고 있습니다. 다음 주인공은 바로 당신일 수 있습니다. 지금 바로 ProtoPie를 무료로 사용해 보세요!
이 글의 일본어 버전은 여기에서 읽어보세요.
