2020~2021
퍼플은 파티 플레이를 하는 게이머들의 니즈를 이해하고,
NC 자사 모바일 게임을 언제 어디서나 할 수 있도록 하는 크로스플레이 플랫폼입니다.
톡, 에뮬레이터, 라이브 스트리밍 등 게임에 필요한 도구를 제공합니다.
Overview
게이머들의 자사 RPG게임 플레이
스타일에 맞는 자체 런처의 필요
모바일 MMORPG 시장이 성장하면서 유저들은 그래픽 저하 없이 고화질 화면으로 게임을 즐기고 싶어 하거나, 이동 중에는 모바일로, 집에서는 PC로 플레이하는 크로스 플레이를 원하고 있었습니다. 또한 게임에 접속하지 않은 순간에도 혈맹원(파티원)들과 실시간으로 소통하고, 약속된 플레이를 해야 하거나 위급한 상황이 생겼을 때 즉시 대응하고 싶어 하는 핵심 니즈를 가지고 있습니다. 이러한 니즈를 해결하기 위한 플랫폼을 제공하자는 솔루션에 맞추어, 게임에 필요한 도구들의 디자인을 진행하게 되었습니다.
역할과 책임
퍼플톡, 퍼플라이브, 퍼플 런처 등 다양한 인터페이스 디자인을 주도했습니다. 실무 리드로서 팀 내 디자인 툴 전환 교육을 담당하고 디자인시스템 구축을 리딩했습니다. 특히 프로젝트 구축 프로세스에 디자인시스템을 도입하여 디자인, 개발팀이 유기적으로 협업할 수 있는 기반을 마련했으며, 이를 안정적이고 확장성 높은 구조로 지속 개선했습니다.
퍼플톡은 엔씨소프트의 게임 이용자들이 모바일게임을 PC에서 스트리밍하면서 게임에 필요한 부가 기능을 사용할 수 있는 메신저 플랫폼입니다. 텍스트 채팅, 보이스 채팅, 보스타이머, 퍼플 Live등의 큰 기능을 가지고 있으며, 게임 이용자들이 퍼플톡을 통해 혈맹원들과 함께 편리하게 파티 플레이를 할 수 있어야 합니다. 저는 디자인시스템 구축과 퍼플톡 UI디자인을 동시에 진행했습니다. 사용자 플로우에서 의미와 규칙에 맞는 UI Type을 반영하여 게임 유저들이 일관된 사용자 경험을 가질 수 있도록 인터페이스 디자인을 개편하였습니다.
퍼플의 런처는 NC의 모바일 게임을 데스크탑에서 컨트롤할 수 있는 플랫폼입니다. 퍼플에 입점한 게임은 PC에서 플레이할 수 있으며, 게임 실행 전에 사용자가 육성하는 캐릭터 및 게임정보를 파악할 수 있습니다. 런처 진입 시 무거운 캐릭터 리소스를 제거하고 사용자에게 필요한 정보들을 모듈형으로 제공하여, 중요도에 따라 사이즈와 위치를 커스텀할 수 있도록 설계했습니다. 게임IP마다 희망하는 컨텐츠가 다르기 때문에 다양한 형태의 모듈을 배치하여 사용할 수 있도록 개선하였습니다.
디자인시스템 - UI Context 정의 리드
UI Context 정의를 통한 컴포넌트 표준화 및 설계 원칙 수립
디자인시스템 구축 과정에서 단순한 컴포넌트 제작을 넘어, 각 요소가 사용되는 맥락을 명확히 규정하고자 'UI Context'를 정의하는 역할을 주도했습니다. Background, Container, Modal, Toast 등 파편화되어 있던 인터페이스 요소를 한데 모아 공통 요소를 분석하고 컴포넌트화했습니다.
특히 각 컴포넌트가 화면에 배치될 때의 목적과 우선순위를 체계화했습니다. 예를 들어 심도가 깊어지거나 화면 전환 및 동선 제어가 필요한 맥락(Layer popup, Modal), 일시적인 정보 전달(Toast), 화면 내 고정(Sticky menu) 등 사용자의 행동 흐름과 인터페이스의 의미에 맞춰 UI 타입을 정밀하게 매칭했습니다. 또한, 각 요소의 노출 우선순위(1~2 Depth)와 이에 대응하는 그림자 값(Elevation Values) 및 테두리(Stroke) 규칙을 명확한 수치로 데이터화하여 가이드라인을 수립했습니다.
이처럼 모호했던 디자인 공통 요소를 시각적·기능적 규칙으로 정립함으로써, 디자인팀과 유관부서의 컴포넌트의 네이밍과 사용 규칙을 명확하게 이해하고 소통할 수 있는 기반을 마련했습니다. 결과적으로 제품 전체에 일관된 사용자 경험을 구현하는 동시에 협업 효율을 대폭 향상시켰습니다.
가이드 없이 파편화되어 있던 기존 인터페이스와 리소스를 취합하여 공통 요소를 분석하고 UI 컴포넌트화했습니다. 이 과정에서 컴포넌트의 규칙과 네이밍을 정의하여 소통의 기준을 마련했고, Foundation 및 라이브러리 구축을 거쳐 웹용 컴포넌트 개발에 최종 적용했습니다. 특히 디자이너가 컴포넌트의 필요 케이스를 분석해 UI 타입을 정의하면, 개발팀과 '구조 개선 및 동작 구현' 가능 여부를 실시간으로 논의하는 유기적인 협업 루프를 만들었습니다. 이를 통해 스크린 디자인 적용부터 버전 히스토리 관리까지 양 팀이 싱크를 맞추며 기존보다 더 빠르고 긴밀하게 소통하는 환경을 구축했습니다.
1. 파편화된 리소스, 가이드 없는 인터페이스 취합
2. 공통 요소 분석으로 UI컴포넌트화
3. 컴포넌트 규칙, 네이밍 소통
4. Foundation, 컴포넌트 라이브러리 구축
5. 웹용 컴포넌트 개발 적용
(해당 과정에 대한 이미지는 PC버전에서 확인해 주세요!)
디자인 프로세스를 실시간 협업 방식으로 과감히 전환하며, 이를 발판 삼아 디자인시스템을 구축할 수 있었습니다. 툴 전환과 커뮤니케이션 방식의 지속적인 개선은 디자이너와 유관부서간의 장벽을 넘어 유기적으로 협업하는 긍정적인 변화를 이끌어냈습니다. 비록 초기 정량 데이터 측정의 아쉬움은 남았지만, 이는 다음 프로젝트에서 데이터 기반 설계 능력을 한층 더 고도화할 수 있는 강력한 성장 동력이 되었습니다.
이러한 협업 기반 위에 8px Grid System을 명확히 정의하여 화면의 일관된 스케일을 확보하고, 파편화되던 디자인 요소를 규칙화했습니다. UI 환경에 맞춘 최적의 Color Palette와 계층 구조가 뚜렷한 Typography 시스템을 설계했으며, Context에 맞는 Elevation 체계와 Iconography 규칙을 정밀하게 가이드화하여 웹용 컴포넌트 개발에 적용했습니다. 직관적인 시각적 가이드라인을 먼저 정립함으로써 팀 전체의 작업 속도를 높이고 완결성 높은 UI를 구현할 수 있었습니다.
성과 및 회고
협업 구조 개선을 통한 팀의 성장
디자인시스템 구축과 실시간 협업 프로세스로의 전환을 리드하며, 구조화된 시스템이 팀 전체의 생산성을 얼마나 극대화할 수 있는지 깊이 체감했습니다. 직군 간의 장벽을 허물고 커뮤니케이션 비용을 줄이는 과정에서, 초기 레거시 제거와 리팩토링으로 인한 시간적 비용이 발생하기도 했습니다. 하지만 이를 끈기 있게 해결해 나가며 제품의 안정성을 확보하는 동시에 디자인 리더십을 한 단계 발전시킬 수 있었습니다.
이번 프로젝트에서는 완결성 높은 시스템을 정립하는 데 집중하느라 정량적 성과 지표를 세밀하게 기록하지 못한 아쉬움이 남습니다. 하지만 이 경험을 발판 삼아, 다음 프로젝트에서는 기획 단계부터 데이터 트래킹 계획을 함께 수립하여 디자인이 비즈니스 지표에 미치는 영향을 숫자로 증명하는 데이터 기반의 UX 디자이너로 성장하겠습니다.