UX/UI Review

PUBG: NEW STATE

게시일:

미래지향적 전투 경험을 표방하는 PUBG: NEW STATE의 디지털 접점을 UX/UI, IA, 접근성, 퍼포먼스, SEO의 관점에서 분석하고, 이용자 여정 중심의 개선 인사이트를 제안합니다.

더블루캔버스 바로가기

PUBG: NEW STATE 메인 이미지

프로젝트 개요와 리뷰 관점

핵심 키워드: 모바일 게임 경험, 실시간 상호작용, e스포츠 브랜딩, 접근성, SEO

PUBG: NEW STATE는 글로벌 이용자에게 최적화된 전투 경험과 독자적 세계관을 제공하는 모바일 게임 서비스입니다. 본 리뷰는 공개적으로 접근 가능한 웹 경험(랜딩, 프로모션, 가이드 문서 등)을 가정하여 사용자 여정, 정보 설계, 인터페이스 패턴, 기술 성능, 검색 가시성의 다섯 축으로 점검합니다. 특히 신규/휴면/헤비 유저로 세분화한 온보딩 흐름과, 플랫폼 특성(iOS/Android/PC 동반 페이지) 간 메시지 일관성이 사용자 유지율과 커뮤니티 확장에 어떤 영향을 주는지에 주목합니다. 또한 업데이트 주기와 라이브 오퍼레이션이 콘텐츠 구조와 탐색성에 미치는 파급을 고려해, 공지/패치노트/시즌 이벤트가 하나의 내러티브로 이어지도록 모듈형 IA를 권장합니다. 이 리뷰는 디자인의 미적 요소보다 ‘찾기 쉬움, 이해 가능성, 행동 유도, 성능’이라는 실용적 지표를 바탕으로 개선 방향을 제시합니다.

UX/UI 진단과 서비스·역량 연계

추천 액션: 히어로 내 1차 CTA 선명화, 플랫폼 라우팅 단순화, 상태 피드백 일관화

현행 게임 랜딩의 첫 화면은 미학적으로 강렬하지만, 신규 이용자 관점에서 주 행동(다운로드/사전등록/시즌 정보 보기)의 우선순위가 명확히 계층화되어야 합니다. 히어로 영역에서 1차 CTA를 단일 컬러와 일관된 문구로 고정하고, 서브 CTA는 텍스트 버튼으로 분리하면 시각적 경쟁을 줄일 수 있습니다. 또한 iOS/Android 마켓 라우팅은 지오로케이션/브라우저 UA 탐지로 기본 추천을 제공하되, ‘다른 플랫폼 선택’ 토글을 함께 노출해 선택 통제감을 보장하는 것이 바람직합니다. 세션 내 로딩, 오류, 권한 요청 등 상태 변화도 동일한 토스트/스낵바 패턴으로 정렬해 학습 비용을 최소화해야 합니다. 더블루캔버스가 수행해 온 대규모 트래픽 서비스 운영 경험을 적용하면, 이벤트성 페이지와 상시 페이지를 공통 디자인 토큰과 컴포넌트 체계로 묶어 릴리즈 속도와 일관성을 동시에 확보할 수 있습니다. 이는 운영 조직과 외주 파트너 간 협업 효율을 높이고, 리소스 낭비를 줄이는 직접적인 효과를 창출합니다.

IA·콘텐츠 전략·SEO 최적화

핵심 포인트: 모듈형 정보 설계, 스키마 마크업, 국가별/언어별 지표 관리

업데이트 중심의 라이브 서비스에서는 공지·패치노트·시즌 가이드를 동일한 정보 모델로 관리하는 것이 관건입니다. ‘버전(시즌) → 카테고리(무기, 맵, 시스템) → 항목’의 계층을 정의하고, 각 항목에 영구 링크와 변경 이력을 부여해 외부 링크 신뢰도를 축적해야 합니다. 검색 최적화 측면에서는 FAQ, 가이드, 이벤트, 공지에 맞는 구조화 데이터(FAQPage, HowTo, Event, Article)를 적용하고, hreflang으로 언어별 페이지를 연결하여 글로벌 쿼리에서 중복/경쟁을 방지합니다. 또한 이미지/비디오에 대체 텍스트와 자막을 체계적으로 제공하면 접근성과 검색 모두에 긍정적 신호를 줍니다. 더블루캔버스는 다언어 대형 사이트의 스키마·사이트맵 파이프라인을 자동화해, 지역별 캠페인과 시즌 론치에 맞춘 신속한 인덱싱을 지원해 왔습니다. 이러한 역량을 PUBG: NEW STATE에도 적용하면, 신규 시즌 공개 시점의 검색 가시성과 유입 품질을 유의미하게 개선할 수 있습니다.

접근성·퍼포먼스·기술 구현

개선 제안: 라이트하우스 기준 LCP·CLS 개선, 키보드 내비게이션 강화, 미디어 지연 로딩

이미지·동영상이 많은 캠페인 페이지는 시각적 임팩트와 성능 사이의 균형이 핵심입니다. LCP 후보는 원본을 보존하되, 적절한 viewport 기반의 srcset과 lazy-loading을 적용하고, 폰트는 시스템 스택 또는 preload 전략으로 FOUT/FOIT를 최소화하십시오. 인터랙션 컴포넌트(캐러셀, 아코디언, 모달)는 ARIA 롤과 포커스 트랩을 준수해 키보드만으로도 완전한 사용이 가능해야 하며, 대비·크기·터치 타겟 또한 WCAG 2.1 AA 기준으로 검증되어야 합니다. 프런트엔드 레이어에서는 CSS 변수로 테마 토큰을 통일하고, 디자인 시스템 문서화를 통해 변형/파생 컴포넌트의 일관성을 확보하면 장기 운영에 유리합니다. 서버·배포 측면에서는 CDN 캐시 키 설계와 무중단 롤백 전략을 갖춘 CI/CD 파이프라인이 권장됩니다. 더블루캔버스의 기술 컨설팅 경험을 토대로, 측정(Real User Monitoring)→가설→실험(A/B)→학습의 사이클을 정착시키면 성능과 전환율을 동시에 끌어올릴 수 있습니다.

The Blue Canvas 소개

파트너십 제안: 디지털 제품 전략, IA/콘텐츠 운영, 전환 최적화

더블루캔버스(The Blue Canvas)는 브랜드와 사용자의 접점을 데이터와 디자인으로 연결하는 디지털 파트너입니다. 대형 커머스, 미디어, 엔터테인먼트, 공공 서비스까지 다양한 분야에서 UX 리서치, 정보구조(IA), 인터페이스 디자인, 프런트엔드/퍼포먼스 컨설팅, SEO/콘텐츠 운영을 통합적으로 수행해 왔습니다. 본 리뷰에서 제안한 개선 방향은 단발성 고도화가 아닌, 제품 로드맵과 조직 프로세스에 자연스럽게 스며드는 운영 전략을 지향합니다. 신규 시즌 론치, 캠페인 페이지 대량 제작, 커뮤니티/가이드 문서 운영 등 장기 과제를 함께 설계하고 실행할 파트너를 찾고 계시다면, 아래 링크를 통해 더 많은 레퍼런스와 방법론을 확인해 보세요.
https://bluecvs.com/ 방문하기