빠르게 변화하는 게임 개발 세계에서 사용자 경험(UX)과 사용자 인터페이스(UI)를 신속하게 프로토타이핑하고 반복 개선할 수 있는 능력은 매우 중요합니다. 게임 업계의 저명한 선도 기업인 Riot Games는 자사의 유명한 게임 디자인 프로세스를 개선하기 위해 고급 프로토타이핑 도구인 ProtoPie를 도입했습니다.
이 사례 연구는 ProtoPie가 어떻게 Riot Games의 디자인 툴킷에 핵심적인 부분이 되었는지, 그리고 어떻게 혁신적인 UX/UI 솔루션을 지원하여 플레이어의 몰입도와 만족도를 높이는지 살펴봅니다.
개요
게임 UX/UI 프로토타이핑이란?
Riot Games의 인터랙션 디자인
Riot Games의 워크플로에 ProtoPie 통합
Riot Games에서 ProtoPie의 주요 기능과 이점
Robert Ignasiak과의 Q&A
게임 UX/UI 프로토타이핑이란?
게임 UX/UI 프로토타이핑은 플레이어가 게임의 인터페이스와 어떻게 상호작용하는지에 대한 초기 모델을 만드는 작업으로, 메뉴, 게임 내 조작, 피드백 시스템 등이 포함됩니다. 이러한 초기 모델링은 최종 개발로 넘어가기 전에 게임의 사용자 경험과 인터페이스를 테스트하고 개선할 수 있게 해주기 때문에 중요합니다.
효과적인 프로토타이핑은 사용성 문제를 식별하고, 게임이 접근하기 쉽고 재미있도록 보장하며, 개발 후반부에 발생할 수 있는 비용이 큰 변경의 위험을 크게 줄여줍니다. 다양한 디자인을 초기에 테스트함으로써 개발자는 최종 결과물이 플레이어의 기대와 선호에 더 가깝게 맞춰지도록 할 수 있습니다.
Riot Games의 인터랙션 디자인
Riot Games: 플레이어 중심의 접근 방식
Riot Games의 세계 최고 플레이어 중심 게임 회사가 되겠다는 미션은 몰입감 있고 사랑받는 게임을 만드는 데 대한 헌신을 이끕니다. "League of Legends"와 "Valorant" 같은 히트작으로 잘 알려진 Riot Games는 고품질 게임 경험에 열정을 가진 전 세계 플레이어에게 서비스를 제공합니다.
이 회사의 헌신은 게임 개발을 넘어 e스포츠 분야의 선구자 역할과 Netflix 시리즈 "Arcane" 같은 인기 미디어 제작으로도 이어집니다.
Riot Games의 대표 게임 타이틀.
Riot Games에서 인터랙션 디자인이란?
Riot Games에서 인터랙션 디자인은 게임 내 경험을 넘어, 플레이어가 게임에 이르기까지 거치는 모든 접점을 포괄합니다. 여기에는 계정 관리와 채팅 같은 소셜 기능부터 게임을 홍보하는 웹사이트, 그리고 Riot Mobile과 같은 다양한 클라이언트 인터페이스까지 모두 포함됩니다.
인터랙션 디자인은 시각 디자인, 사운드, 사용자 경험이 매끄럽게 결합되는 "마법 같은 순간"입니다.
Riot Games는 인터랙션 디자인을 시각 디자인, 사운드, 사용자 경험이 자연스럽게 하나로 어우러지는 "마법 같은 순간"을 만드는 것으로 봅니다. 이 순간은 브랜드의 가치를 구현하고 전반적인 플레이어 경험을 향상시키는 데 매우 중요합니다. 이는 세심하게, 그리고 종종 보이지 않는 곳에서 진행되는 과정으로, 게임의 맥락적 모션과 미학을 형성합니다. 그 결과 기능적인 디자인은 플레이어에게 공감되는 매력적이고 촉각적인 상호작용으로 바뀝니다.
Riot Games에서 인터랙션 디자이너의 역할은 무엇인가요?
Riot Games에서 인터랙션 디자이너의 역할은 다면적이며 게임 개발 과정에서 매우 중요합니다. 주로 이들은 다음 세 가지 주요 책임을 맡습니다:
1. 확장 가능한 인터랙션 및 컴포넌트 라이브러리 개발과 기여
Riot의 인터랙션 디자이너들은 "Play"라는 디자인 시스템을 만들고 유지합니다. 이 시스템에는 애니메이션, 사운드, 전환 효과와 같은 미리 정의된 컴포넌트 저장소가 포함되어 있어 운영 효율성을 높이고 게임 전반의 일관성을 보장합니다. 이 시스템을 통해 개발자는 이러한 요소에 쉽게 접근하고 적용할 수 있어 개발 과정이 한층 간소화됩니다.
2. UX/UI 프로토타이핑에 참여
UX/UI 프로토타이핑 단계에서 인터랙션 디자이너는 조직의 목표에 부합하고 의사결정을 돕는 기능을 구축하고 테스트합니다.
3. 사용자 테스트를 통한 연구와 개선에 집중
마지막으로, 리서치 팀과 협업하면서 플레이어 피드백을 지속적으로 수집하고 분석해 디자인을 다듬고, 최종 결과물이 사용자 기대에 더 가깝게 맞춰지며 전반적인 플레이어 경험이 향상되도록 합니다.
Riot Games 인터랙션 디자이너의 주요 집중 영역.
Riot Games의 워크플로에 ProtoPie 통합
ProtoPie 이전: 분절된 워크플로, 오래 걸리는 렌더링 및 미리보기 시간
ProtoPie를 도입하기 전, Riot Games의 프로토타이핑 과정은 많은 기업에서 흔히 볼 수 있는 워크플로를 따랐습니다. Figma에서 시작해 AEUX 같은 프로그램을 통해 옮긴 뒤 After Effects에서 마무리하는 방식이었습니다. 이 워크플로는 렌더링과 미리보기 시간이 오래 걸려 여러 가지 어려움을 낳았습니다:
여러 도구의 사용: 여러 애플리케이션을 사용해야 해서 과정이 느려졌고 실시간 협업과 반복 개선이 어려웠습니다.
재사용 가능한 라이브러리의 부재: 분절된 워크플로로 인해 컴포넌트를 재사용할 수 없었고, 이로 인해 개발 인계가 복잡해졌으며 오해가 자주 발생하고 품질 보증 과정이 길어졌습니다.
상호작용성의 부재: 정적인 프로토타입은 이해관계자들이 디자인을 충분히 체험하지 못하게 해 프레젠테이션의 임팩트를 낮췄습니다.
어려운 개발 인계: 최종 결과물은 Google Sheets를 연상시키는 그리드 형태로 정리된, 용량이 큰 MP4 파일이었고, 상호작용성이 없었으며 즉각적인 피드백도 제공하지 못했습니다. 이 설정은 개발자들이 디자인 의도를 정확히 이해하고 실행하기 어렵게 만들었습니다.
ProtoPie 도입 이전 Riot Games의 디자인 프로세스에서 있었던 문제점들.
이러한 어려움을 인식한 Riot Games는 기존 워크플로에 자연스럽게 맞고, 협업을 지원하며, 팀 간에 쉽게 공유하고 이해할 수 있는 고충실도 프로토타입을 만들 수 있는 도구를 찾기 시작했습니다.
도구 평가 단계에서 고려된 몇 가지 수용 기준.
ProtoPie 이후: 간소화된 프로토타이핑, 더 빠른 반복 개선 및 쉬운 인수인계
ProtoPie는 Riot Games의 게임 디자인 접근 방식을 혁신했습니다. ProtoPie가 디자인 프로세스에 가져온 주요 개선 사항은 다음과 같습니다:
1. 간소화된 디자인과 개발
ProtoPie를 사용하면 복잡한 애니메이션과 인터랙티브 요소를 프로토타입에 직접 통합할 수 있어, 디자이너가 역동적이고 몰입감 있는 게임 인터페이스를 고충실도로 시뮬레이션할 수 있습니다.
2. 더 빠른 반복과 일관성 있는 디자인
ProtoPie 도입 이후 Riot Games는 더 빠르고 더 높은 품질의 디자인 반복을 경험했으며, 그 결과 더 일관되고 매력적인 플레이어 경험을 제공하게 되었습니다.
3. 향상된 협업과 테스트
ProtoPie의 협업 기능은 Riot에 큰 변화를 가져왔습니다. 이 도구를 사용하면 디자이너가 간단한 링크로 인터랙티브 프로토타입을 공유할 수 있어 즉각적인 피드백과 팀 간 반복 디자인이 가능해집니다. 비밀번호로 보호된 링크를 사용하는 기능도 매우 가치 있는 기능으로 자리 잡았습니다.
4. 매끄러운 개발 인계
Robert는 이렇게 말합니다. “한 번의 인터랙션을 위해 600MB 파일을 다운로드하는 것보다 링크를 보내는 게 백 번은 더 쉽습니다. 다운로드도 필요 없고 렌더링 시간도 없습니다. 삶이 훨씬 쉬워졌어요.” 이러한 접근성 덕분에 개발팀으로의 인계 과정이 크게 간소화됩니다.
ProtoPie 도입 후 개선된 Riot Games의 디자인 프로세스.
Riot Games에서 ProtoPie의 주요 기능과 이점
이어서 Robert는 자신과 팀이 사용하는 ProtoPie의 핵심 기능을 소개하며, ProtoPie가 팀에 가져다준 이점을 강조했습니다.
멀티 디바이스 통합
ProtoPie Connect는 Riot Games에 큰 변화를 가져왔습니다. 이 도구를 통해 게임패드, 모바일 폰, 데스크톱 컴퓨터 등 여러 기기를 디자인 워크플로 안에서 손쉽게 연결할 수 있게 되었습니다. 이러한 매끄러운 통합은 다양한 플랫폼에서 일관된 사용자 경험을 제공하는 데 핵심이며, 특히 다중 인증 같은 기능에서 매우 중요합니다.
실제 활용 사례로는 게임 "2 XKO"가 있습니다. 디자이너들은 ProtoPie를 사용해 Xbox 컨트롤러 상호작용을 세밀하게 조정하여 메뉴 탐색이 정확하게 이루어지도록 했습니다.
ProtoPie Connect를 사용하면 게임패드, 모바일 폰, 데스크톱 컴퓨터와 같은 여러 기기를 디자인 워크플로에 통합할 수 있습니다.
Lottie 애니메이션 지원
ProtoPie의 Lottie 애니메이션 지원은 세밀한 마이크로 애니메이션을 정밀하게 제어할 수 있게 해주어 Riot Games의 인터페이스를 크게 향상시켰습니다. 이 기능을 통해 디자이너는 미묘한 아이콘 움직임부터 복잡한 애니메이션까지 모두 커스터마이즈할 수 있으며, 각 게임 인터페이스에 독특한 깊이를 더합니다.
재사용 가능한 컴포넌트 라이브러리
ProtoPie의 두드러진 기능 중 하나는 인터랙션 라이브러리로, Riot Games의 디자인 프로세스를 크게 간소화했습니다. 디자이너는 종합적인 인터랙션 라이브러리에서 소셜 내비게이션 바와 카드 같은 요소를 쉽게 드래그 앤 드롭할 수 있습니다. 이 기능은 디자인 속도를 높이고 다양한 게임 전반에서 일관된 외형과 기능을 유지하는 데 도움을 줍니다.
ProtoPie의 컴포넌트 라이브러리를 사용하면서 Riot Games 디자이너들의 시간이 크게 절약되었습니다.
공유 가능한 비밀번호 보호 링크
“저는 공유 링크에 대해 여러 번 언급했지만, 이것이 얼마나 큰 변화를 가져왔는지는 정말 아무리 강조해도 지나치지 않습니다.”라고 Robert는 말합니다.
예전에는 Slack에서 인터랙션을 공유하는 것이 번거로웠습니다. 파일이 너무 커서 제대로 미리 보기가 어려웠고, 전체 검토를 위해 다운로드가 필요했기 때문입니다. 이제 그는 그냥 비밀번호로 보호된 링크를 보냅니다. 팀원들은 안전한 환경 안에서 즉시 콘텐츠에 접근하고, 상호작용하며, 피드백을 제공할 수 있습니다.
지원 및 커뮤니티
ProtoPie의 신속한 지원 팀과 활발한 커뮤니티는 Riot의 프로토타이핑 성공에 필수적이었습니다. 기능에 대한 직접적인 지원과 피드백을 받을 수 있었기에 Riot는 ProtoPie를 자사의 구체적인 요구에 맞게 조정할 수 있었고, 그 결과 이 도구는 디자인 프로세스에 더욱 깊이 자리 잡게 되었습니다.
ProtoPie가 Riot Games 디자인 팀에 도움을 준 방식.
Robert Ignasiak과의 Q&A
Q: 비디오 게임 개발 경험이 전혀 없는 UX 디자이너로서, 이 업계에 막 들어오는 사람에게 어떤 조언을 해주시겠습니까?
Robert: 다양한 것들을 폭넓게 경험할 수 있는 곳에서 일하는 것을 권합니다. Unreal Engine 같은 도구를 배우고, 대기업의 인하우스 포지션으로 곧장 가기보다 에이전시에서 시작하는 것도 고려해 보세요. 그러면 나중에 전문 분야를 정할 때 도움이 되는 폭넓은 경험을 쌓을 수 있습니다.
Q: 엔지니어에게 처음 인계할 때, 특히 그들이 프로토타입 링크를 처음 접했을 때 초기 경험은 어땠나요?
Robert: 첫 인계는 매우 순조로웠습니다. 엔지니어들은 단순한 링크로 모든 것에 접근할 수 있다는 점에 깊은 인상을 받았고, ProtoPie의 직관적인 특성 덕분에 프로토타입을 바로 이해하고 사용할 수 있었습니다.
Q: 새로운 기능을 만들거나 고객 여정을 더 향상시키기 위한 검증 기법에는 어떤 것들이 있나요?
Robert: 저희는 표준 사용자 테스트 기법을 사용해 사용자가 프로토타입과 상호작용하는 모습을 관찰하고 피드백을 수집합니다. 여기에는 긍정적 반응과 부정적 반응 모두에 대한 상세한 문서화가 포함되며, 이것이 저희의 조정과 개발 방향을 결정하는 데 도움이 됩니다.
Q: 마이크로 인터랙션, 특히 애니메이션은 어떻게 제품에 들어가게 되나요? 그 파이프라인은 어떻게 되나요?
Robert: 표현력이 필요한 애니메이션의 경우, After Effects에서 UI 위에 프레임 단위로 그려 넣는 작업으로 시작해 Bodymovin을 통해 JSON 파일로 내보낼 수 있습니다. 그런 다음 이를 프로토타입에 통합하고, 전체 애니메이션에 어떤 영향을 주는지에 따라 조정합니다.
Q: 2년 전 ProtoPie를 사용하기 시작했을 때, 특히 실시간 프로젝트를 진행하면서 학습 곡선을 어떻게 관리하셨나요?
Robert: Riot은 제가 새로운 도구를 배우는 것을 지원해 주었습니다. 저는 ProtoPie 101 코스를 수강했는데, 큰 도움이 되었습니다. 디자인에서는 새로운 도구를 배우는 일이 흔하기 때문에 ProtoPie에 적응하는 것도 그런 지속적인 학습 과정의 일부였습니다.
Q: 워크플로와, 서로 다른 반복 과정에서 Figma와 ProtoPie를 어떻게 결합하는지 더 말씀해 주실 수 있나요? 디자인이 항상 최신 상태로 동기화되도록 어떻게 보장하시나요?
Robert: Figma와 ProtoPie 사이의 전환은 같은 이름의 컴포넌트를 ProtoPie가 인식하고 교체할 수 있기 때문에 효율적입니다. 이렇게 하면 워크플로가 매끄럽게 유지되고, 상호작용에 대해 설정한 규칙이 시각적 업데이트 전반에 폭넓게 적용되므로 많은 재작업 없이도 프로토타입을 최신 상태로 유지할 수 있습니다.
게임 개발에서 ProtoPie의 필수적인 이점.
지금 바로 게임 UX/UI 프로토타이핑 수준을 높여보세요
ProtoPie는 멀티 디바이스 통합, 팀 협업, 더 빠른 디자인 반복, 개발 인계와 같은 기능으로 Riot Games의 디자인 접근 방식을 혁신했으며, 전체 프로토타이핑 프로세스를 간소화했습니다. Riot Games처럼 오늘 바로 ProtoPie와 함께 프로토타이핑 여정을 시작해 보세요.
