2012 ~ 2014
FC매니저 모바일은 PC연동의 축구 매니징 온라인 게임에서 독립한 모바일 축구 시뮬레이션 게임 도입의 필요성을 인지하고, 모바일의 사용성과 차별화된 게임 비주얼 아이덴티티 확립을 목표로 진행한 프로젝트입니다.
FC매니저 모바일은 PC연동의 축구 매니징 온라인 게임에서 독립한 모바일 축구 시뮬레이션 게임 도입의 필요성을 인지하고, 모바일의 사용성과 차별화된 게임 비주얼 아이덴티티 확립을 목표로 진행한 프로젝트입니다.

역할 : 모바일 축구 매니지먼트 게임 UX+GUI 디자인

역할 : 모바일 축구 매니지먼트 게임 UX+GUI 디자인

Overview

모바일 축구매니지먼트 게임의 신규 구축에 합류

모바일 축구매니지먼트 게임의
신규 구축에 합류

FCMM 프로젝트는 기존 PC 연동 버전의 축구 매니징 온라인 게임인 'FC매니저(FCM)'에서 출발하였습니다. 모바일 플랫폼의 급성장에 발맞추어 독립적인 모바일 축구 시뮬레이션 게임을 신규 개발하고, FCM만의 차별화된 비주얼 아이덴티티를 구축할 필요성이 제기되었습니다.

당시 게임 포털에서 플랫폼 UX/UI 디자이너로 재직 중이던 저는 이러한 서비스 확장 흐름 속에서 프로젝트 팀의 합류 제안을 받아 참여하게 되었습니다. 약 5인치 디스플레이 환경과 모바일 기기 특유의 사용성을 고려하여, 복잡하고 방대한 축구 매니지먼트 데이터를 작은 화면 내에 효율적이고 직관적으로 배치하는 UI/UX 기획 및 디자인을 진행했습니다.

역할과 책임

축구 전략 모바일게임 GUI/UX 디자인

축구 전략 모바일게임 GUI/UX 디자인

플랫폼 UX/UI 디자이너로서 프로젝트 팀에 합류하여, PC 기반 FCM을 독립된 모바일 게임으로 전환하는 핵심 인터페이스 설계를 리드했습니다. 축구 매니지먼트 특유의 방대한 데이터 구조와 게임 정책을 분석하여 초기 UI 구조를 정의하고, 3040 타겟 유저층의 특성에 맞춘 방송 중계 모티브와 선수 카드 형태의 비주얼 콘셉트를 수립했습니다.

  • 모바일 축구 전략 게임 UI/UX 설계 및 GUI 디자인 리드

  • 기간 : 6개월

  • 작업인원 : 9명 (기획 3명, 디자인 3명, 개발 3명)

  • 참여도 : 정책수립 및 UI 기획 30%, GUI 디자인 70%

상세 디자인 과정

게임 UI 기획과 디자인 방향성 수립

게임 UI 기획과 디자인 방향성 수립

축구 매니지먼트 데이터의 정보 구조화 및 UI기획

축구 매니지먼트 데이터의
정보 구조화 및 UI기획

축구 전략 시뮬레이션 게임은 경기 규칙, 선수 영입, 라인업 구성, 전략 설정 등 수많은 전문 데이터가 복잡하게 얽혀 있습니다. 유저가 정보의 과부하 없이 직관적으로 게임을 운용할 수 있도록, 각 정보의 우선순위와 중요도를 다각도로 분석하여 정보 구조(IA) 및 화면 레이아웃을 정의하는 정책 기획 단계부터 참여했습니다. 이후 GUI 단계에서는 기획자와의 긴밀한 협업을 통해 3040 핵심 타겟 유저의 플레이 패턴에 맞춘 모바일 UX 최적화를 진행했습니다.

브랜드 아이덴티티를 담은 비주얼 콘셉트 정의

브랜드 아이덴티티를 담은
비주얼 콘셉트 정의

핵심 모티브로 모서리가 둥근 사각형 형태의 '선수 카드' 개념을 도입했습니다. 스포츠 중계방송의 인터페이스 요소를 게임 전반에 접목하여 actual 경기 중계 화면을 보는 듯한 직관적이고 생동감 넘치는 비주얼 톤앤매너를 수립했습니다. 당시 평균 5인치 수준이었던 모바일 화면의 물리적 제약을 극복하기 위해, 선수 카드에 앞·뒷면 전환 방식을 적용했습니다.

카드 앞면에는 선수 몸값, 레벨, 핵심 프로필 등 한눈에 파악해야 하는 대표 정보가 노출되고, 카드 뒷면 회전(Flip) 시 상세 능력치, 포지션 적합도, 전략·전술 세부 정보가 노출됩니다. 플레이어의 다양한 데이터를 효율적으로 분산하고, 필요한 시점에만 인터랙션을 통해 확장 제공함으로써, 한정된 화면에서도 가독성과 전략적 조작성을 동시에 확보하고자 했습니다.

축구 비전문가에서 데이터 기반의 게임 UX/UI 디자이너로

축구 전문 지식이 부족했던 상태에서 프로젝트에 참여했기 때문에, 감에 의존하기보다 객관적인 데이터 분석과 경쟁사 리서치를 디자인의 핵심 근거로 삼았습니다. 구조를 파악하고 타겟 유저의 시선에서 게임을 이해하기 위해 다각도로 접근하였으며, 게임 개발 언어와 인터랙션 구현 제약을 극복하기 위해 PM, 개발팀과 지속적인 미팅을 진행했습니다. 인터랙션 방식, UI 가이드라인, 리소스 배포 구조를 세밀하게 정의하여 개발 효율성을 극대화했고, 비전문가로서 시작했음에도 데이터와 리서치를 기반으로 유저와 개발자 모두를 만족시키는 인터페이스 디자인을 완성했습니다.

기존 PC 버전 FCM 유저들의 플레이 데이터와 주요 이용 패턴을 분석하여, 모바일 환경에서 반드시 유지해야 할 핵심 정보와 간소화해야 할 데이터를 분류했습니다. 시장 내 주요 축구 매니지먼트 게임들의 그래픽 인터페이스(GUI) 및 스포츠 중계 방송의 화면 구성을 심층 분석했습니다. 이를 통해 축구를 좋아하는 3040 남성 타겟층에게 직관적이고 친숙하게 다가갈 수 있는 '스포츠 중계' 톤앤매너를 게임 GUI의 메인 정체성으로 정립했습니다.

일반 모바일 앱과 달리 게임 엔진 구조와 개발 방식이 다른 점을 고려하여, OS의 기본 UI 가이드를 준수하면서도 축구 게임 특유의 시각적 몰입감을 살리는 표현에 집중했습니다. 기획 초기 단계부터 해외 축구경기에서 촬영한 실제 선수 사진 리소스를 직접 가공 및 제작하고, 시각적 계층 구조를 고려한 UI 가이드를 수립하여 게임 컨셉에 맞춘 그래픽 인터페이스를 구현했습니다.

  • 경쟁사 GUI 및 시장 분석: 축구 매니지먼트 게임 특성 분석을 통한 디자인 제약 요소 및 기회 요소 도출

  • 유저 데이터 분석 기반 IA 정의: PC 버전 기존 유저의 플레이 패턴 데이터를 기반으로 모바일 필수 핵심 정보 선별 및 정보 구조화

  • 타겟 맞춤형 비주얼 컨셉 수립: 3040 남성 유저 타겟 분석을 바탕으로 '스포츠 중계' 톤앤매너 및 카드 모티브 GUI 정의

  • 실제 리소스 가공 및 비주얼 구현: 기획 초기부터 실제 선수 사진 리소스를 가공·제작하여 게임 컨셉에 최적화된 그래픽 인터페이스 구축

  • 개발 효율성을 고려한 UX/UI 협업: 모바일 엔진 및 개발 구조 특성을 고려한 UI 가이드라인 및 인터랙션 정의로 개발팀 협업 최적화

디자인 과정

감독 광장(홈 화면) 디자인

감독 광장은 유저가 본격적인 경기 플레이에 앞서 팀 운영에 필요한 모든 핵심 데이터를 한눈에 확인하고 대조할 수 있는 메인 대시보드 화면입니다. 상단 영역에는 캐시, 게임 머니, 포인트, 샐러리 캡 등 게임 운용에 직관적으로 영향을 주는 재화 및 리그 상태 정보를 배치하여, 유저가 현재 자신의 관리 상태를 빠르게 파악할 수 있도록 설계했습니다.

화면 우측 중앙에는 팀의 대표 선수를 모서리가 둥근 사각형 형태의 '선수 카드' 모티브로 강조하여 노출했습니다. 실제 축구 중계방송의 'MAN OF MATCH' 또는 'TOP SCORER' 인터페이스 요소를 적극적으로 접목하여, 3040 남성 타겟층에게 마치 실제 스포츠 방송을 시청하는 듯한 생동감과 시각적 몰입감을 제공합니다. 화면 좌측 및 중앙 영역에는 종류별 리그의 팀 랭킹과 내 팀, 그리고 상대 팀의 정보를 대조할 수 있도록 배치했습니다. 감독은 수시로 순위를 확인하고 매칭 대상 팀을 선택하여 즉시 경기를 진행할 수 있으며, 하단의 크고 직관적인 'START' 버튼을 통해 빠르고 끊김 없는 경기 진입 흐름을 구현했습니다.

경기 진행과 종료

스포츠 방송의 생동감을 구현하면서도 모바일 기기의 제약 내에서 원활하게 구동되도록 2D 기반의 시뮬레이션 중계 화면을 디자인했습니다. 축구 매니지먼트 게임의 핵심은 감독으로서의 전략적 판단에 있으므로, 복잡한 3D 그래픽 대신 유니폼과 기호 형태의 그래픽 요소를 활용해 대치 중인 플레이어와 전술 대형이 직관적으로 구분되도록 UI를 최적화했습니다. 경기 입장 시에는 선수 카드가 순차적으로 표출되어 출전 선수의 포지션, 주요 능력치, 컨디션 상태를 한눈에 파악할 수 있으며, 이를 바탕으로 상대 감독은 실시간 전술 변경이나 선수 교체 타이밍을 전략적으로 결정할 수 있습니다.

경기가 종료되면 실제 축구 방송의 중계 리포트 화면을 연상시키는 비주얼 톤앤매너로 경기 결과를 표출합니다. 단순 승패 결과뿐만 아니라 슈팅 수, 유효 슈팅, 점유율, 오프사이드, 반칙, 경고 및 퇴장 수 등 세부 경기 통계 데이터를 중앙에 직관적인 대조 레이아웃으로 배치했습니다. 또한 시간대별 득점 선수 정보와 승점/보상 영역을 명확히 구별하여, 감독이 자신이 수립한 전술의 성과를 수치로 빠르게 복기하고 다음 경기를 준비할 수 있도록 설계했습니다.

경기 결과 및 일정 리스트 화면에서는 정규 리그의 대진표와 진행 상태(PLAY, READY, RESULT 등)를 한눈에 확인하도록 구성했습니다. 자동 또는 수동 매칭을 통해 대기 상대 팀을 빠르게 검색하고, 준비 완료 즉시 다음 경기로 진입하는 연계 버튼 구조를 도입해 최소한의 인터랙션으로 연속적인 경기 플레이를 이어갈 수 있도록 사용자 경험(UX)을 극대화했습니다.

선수카드 디자인

선수 카드는 게임 내에서 유저가 가장 자주 접하고 몰입감을 느끼는 핵심 비주얼 요쇼이기에, 초기 기획 단계에서 수많은 비주얼 시안 후보를 비교 및 검토한 끝에 완성도가 가장 높고 직관적인 시스템을 최종 선별해 구축했습니다. 신규 감독으로 데뷔한 유저에게는 초기 선수 카드와 패키지 카드가 제공되어 본격적인 팀 관리와 경기를 시작하게 됩니다. 소형 화면의 제약을 극복하기 위해 도입한 카드 플립 구조는 앞면과 뒷면의 역할 분담이 키포인트입니다. 카드 앞면에는 선수의 실사 이미지와 함께 몸값, 레벨, 핵심 능력치 다이어그램 등 필수 정보를 한눈에 파악할 수 있도록 배치하여 시각적 몰입감을 극대화했으며, 카드를 회전시킨 뒷면에는 국적, 신체 조건, 상세 능력치 지표와 포지션 적합도 등 전략 수립에 필요한 세부 데이터를 체계적으로 구조화해 노출했습니다.

단순한 데이터 조회를 넘어, 선수 카드를 매개로 전략적인 선수단 관리와 성장 인터랙션을 구현하는 데 집중했습니다. 유저는 포인트를 활용해 선수의 주요 능력치를 포지션에 맞게 집중 강화하거나 컨디션을 관리할 수 있습니다. 경기 중 컨디션이 저하되거나 능력치가 낮은 선수는 벤치로 이동시켜 휴식을 취하게 하고, 회복되는 동안 대체 선수를 기용하는 등 감독으로서 실제 축구 팀을 운용하는 듯한 전략적 플레이를 유도했습니다. 이처럼 치열한 리서치와 수많은 후보 검토를 거쳐 완성된 선수 카드 시스템은, 고밀도 데이터를 화면에 과부하 없이 직관적으로 녹여냄으로써 사용성과 시각적 완성도를 동시에 확보한 디자인 결과물입니다.

성과 및 회고
2014년 모바일 게임 1위 달성 (스포츠 게임 분야 1위, 2014년 2월 구글플레이스토어 무료게임 1위)

플랫폼 UX/UI 디자이너로서 생소했던 게임 도메인과, 전문 영역인 축구 매니지먼트 분야는 저에게 큰 챌린지였습니다. 축구 비전문가라는 한계가 있었지만, 객관적인 유저 데이터와 시장 분석을 기반으로 접근하여 타겟층에 최적화된 솔루션을 도출해낼 수 있었습니다. 특히 모바일 화면의 제약 속에서 카드 플립 인터랙션을 통해 방대한 데이터를 효과적으로 분리하고, 기획, 개발팀과의 밀접한 협업으로 개발 효율성까지 확보했던 경험은 디자이너로서 성장의 큰 발판이 되었습니다. 데이터 기반의 문제 해결 능력과 데이터 기반 협업의 중요성을 깊이 체감한 계기였습니다.