PUBG.OP.GG – 디자인 접근 방법 (2024)

작년 11월에 OP.GG에서 배틀그라운드 ì„ì 서비스인 PUBG.OP.GG를 출시했습니다. 서비스 시작 이후로 지금까지 꾸준히 사용자 수가 ëŠ˜ê³ ìžˆì£. 이번 글에서는 PUBG.OP.GG 서비스 디자인의 ì‘ê·¼ 방법과 현재까지의 진행 ê³¼ì•ì— 관해 이야기하ê³ìž 합니다.

OP.GG는 한국을 기ììœ¼ë¡œ 글로벌로 나아간 서비스입니다. 게임에 대한 한국인의 열ì•ì€ 대단하ì£. 그래서인지 PUBG.OP.GG도 한국 시장을 ë¨¼ì€ ììœí•´ì•¼ 한다는 생각이 강했습니다. 안타깝게도 PUBG.OP.GG는 배틀그라운드 출시보다 다소 늦게 프로ìíŠ¸ê°€ 시작됐습니다. 이미 많은 ì„ì 서비스들이 나와 있었ì£. 그래서 ìš°ì„ ì¶œì‹œëœ 다른 서비스들을 통해 ìœì€ë“¤ì˜ 니즈를 파악하기로 했습니다.

리서치

1. A사이트

A사이트는 한국에서 ììœìœ¨ì´ 높은 배틀그라운드 ì„ì 서비스입니다. 핵심 페이지인 플ëˆì´ì–´ 페이지에 카드 UI를 활용하여 ëª¨ë“ ê²Œìž„ 모드에 대한 스탯을 한 번에 보기 쉽게 배치했습니다. ê·¸ë¦¬ê³ ì‚¬ëžŒë“¤ì´ 많이 보는 스탯인 ‘K/D’와 â€˜í‰ê· ë”œëŸ‰â€™ 수치에 색상을 넣어 시각ììœ¼ë¡œ 강조한 게 특징이ì£.

2. B사이트

B사이트는 어두운 테마의 ì„ì 서비스입니다. 색상 활용이 돋보이는 사이트로 SNS로 ì„ìì„ ê³µìœí•˜ê¸°ê°€ 쉽게 되어있습니다. 사이트 내에 무기 또는 플ëˆì´ì–´ë¥¼ 서로 비교하는 기능이 있는데요. 스탯 비교를 톤 다운된 색상을 통해 ê¹”ë”í•˜ê³ ì•ˆì•ìì¸ 느낌으로 ì„ë‹¬í•˜ê³ 있ì£. 스탯 텍스트 ëŒ€ì‹ ëˆì´ë¸”에 색상을 넣은 것이 특징입니다.

ê·¸ 이외에도 여러 가지 서비스들을 살펴보았습니다. 리서치를 통해 많은 서비스가 플ëˆì´ì–´ 페이지에 많은 공을 들이는 것을 알 수 있었습니다. 해당 페이지의 데이터 종류는 ì•ë§ 많ì£. 놀랍게도 ìœì€ë“¤ì€ 더 많은 데이터를 원했습니다. 이 많은 데이터를 어떻게 보기 ì‰½ê³ ì´í•´í•˜ê¸° 편하도록 배치í•ì§€ê°€ 우리의 ê³¼ìœê°€ 되었습니다.

디자인 ì‘ê·¼ 방법

ëˆì´ì•„웃

PUBG.OP.GG는 OP.GG의 패밀리 사이트입니다. 기존 OP.GG의 패밀리 사이트에는 롤 ì„ì 서비스인 op.gg, 오버워치 ì„ì 서비스인 overwatch.op.gg, 롤 esports 서비스인 best.gg가 있ì£. 해당 서비스들의 ì„ì 페이지를 ë³´ë©´ 화면 좌측에는 플ëˆì´ì–´ì˜ ì„ë°˜ìì¸ 게임 성향 및 동향을 ë³¼ 수 있는 데이터가 요약본으로 들어가ê³, 우측에는 매 게임에 대한 자세한 데이터가 들어가는 ëˆì´ì•„웃으로 구성되어 있습니다.

여기서 우리는 서비스를 ì‚¬ìš©í• ìœì€ë“¤ì„ 예상해봤습니다. 롤 커뮤니티를 ë³´ë©´ 배틀그라운드에 대한 흥미가 상당히 높았습니다. ê·¸ë¦¬ê³ ë°°í‹€ê·¸ë¼ìš´ë“œëŠ” 오버워치와 같은(플ëˆì´ 면에서는 다른 ìì´ 있긴 하지만…) FPS 장르의 게임이ì£. 그래서 OP.GG의 서비스를 사용하던 ìœì€ë“¤ì´ 배틀그라운드로 많이 ìœìž…ë 것으로 가ì•í•˜ê³, UI 친숙도를 높이기 위해 통일된 ëˆì´ì•„웃을 가ì¸ê°”습니다.

좌측에는 배틀그라운드의 게임 모드인 솔로, 듀오, 스쿼드에 대한 스탯을 세로로 배치했습니다. 모드별 게임 스탯은 플ëˆì´ì–´ì˜ 게임 트ëŒë“œë¥¼ 보여주는 가장 기본이 되는 지표이기 때문이ì£. 어떤 모드를 더 많이 플ëˆì´í–ˆëŠ”지에 따라 플ëˆì´ 성향을 알 수 있ê³, 디테일한 스탯을 통해 어떤 모드에서 개인ìì¸ 능ë¥ì´ 뛰어난지 알 수 있습니다.

데이터

기존 배틀그라운드 ì„ì 서비스들은 API에서 주는 데이터를 텍스트 형식 그대로 보여줬습니다. 처음 사용하는 ìœì€ë“¤ì€ ì„ìì„ 펼쳐보았을 때 수 많은 데이터 중 어떤 것을 ë¨¼ì€ ë´ì•¼ 하는지 알기 어ëµê²ì£. 배틀그라운드처럼 출시한 지 얼마 안 된 게임이라면 더욱 í˜¼ëž€ìŠ¤ëŸ¬ì›Œí• ê²ƒìž…ë‹ˆë‹¤.

그래서 우리는 ìœì€ë“¤ì´ 원하는 데이터를 보기 쉽게 ì•ë¦¬í–ˆìŠµë‹ˆë‹¤. 커뮤니티 혹은 인게임에서 많이 회자 되는 키워드를 중심으로 중요한 데이터를 추ë¤ë‚´ì–´ 게임 모드별로 보여주었습니다. ê·¸ë¦¬ê³ ì¶”ë¤ë‚¸ 핵심 데이터의 텍스트에 붉은색(매우 잘하는) – 주황색(잘하는) – 회색(보통) 순의 3단계의 기준을 두어 어느 능ë¥ì¹˜ê°€ 뛰어난지 쉽게 êµ¬ë³„í• ìˆ˜ 있도록 했습니다.

등급

ì„ì 서비스를 사용하는 ìœì€ë“¤ì€ 자ì‹ì˜ 실ë¥ì´ 어느 ì•ë„ 되는지, 실ë¥ì„ 향상하ë¤ë©´ 어떻게 해야 하는지 항상 궁금해합니다. ê´€ë¨ ì»¤ë®¤ë‹ˆí‹°ì— 자주 올라오는 단골 주ìœì£. 우리는 이러한 ìœì€ë“¤ì˜ 니즈를 충족시키기 위해 PUBG.OP.GG만의 ‘티어(등급)’를 만들었습니다.

배틀그라운드의 기본 ëˆì´íŒ…은 ‘ììˆ˜â€™ì™€ 같은 개념으로 플ëˆì´ì–´ë“¤ì˜ 실ë¥ì„ ì–˜ê¸°í• ë•Œ 자주 언급되는 지표이긴 하나 숫자보다는 좀 더 와닿는 무언가가 í•„ìš”í•˜ë‹¤ê³ ìƒê°í–ˆìŠµë‹ˆë‹¤. 그래서 ì„±ì ê°œë…ì¸ S,A,B,C… 의 알파벳 등급을 활용하여 PUBG.OP.GG만의 티어를 만들었습니다. 글로벌 ìœì€ë“¤ì„ ê³ë¤í•˜ë©´ ì„ ì„¸ê³„ììœ¼ë¡œ 통하는 개념이 필요했ê³, ì„±ì ë“±ê¸‰ì´ 가장 ìí•©í•˜ë‹¤ê³ 생각했습니다.

배틀그라운드의 기본 ëˆì´íŒ…과는 달리 PUBG.OP.GG의 티어에는 여러 데이터가 함축되어 있습니다. 최소 10경기를 플ëˆì´í•˜ë©´ ëˆì´íŒ… 및 게임 내 퍼포먼스를 측ì•í• 수 있는 데이터를 산출하여 종합 등급으로 ë³´ì—¬ì£¼ê³ ìžˆì£. 배틀그라운드의 ëˆì´íŒ…은 게임을 플ëˆì´í• 때마다 웬만하면 ììˆ˜ê°€ 떨어지지 않는 구조로 되어있어 ‘실륒 지표로서는 다소 부족한 부분이 있었습니다. 이 부분에 대한 ìœì€ì˜ 니즈를 충족시키ê³ìž 독자ìì¸ 티어를 만들게 되었습니다.

색상

배틀그라운드 ì„ì 서비스는 다른 게임 서비스들보다 숫자와 텍스트가 많습니다. 게임 한 판에 100명이 들어갈 수 있으니까요…! 아이디만 ìì–´ë„ 100줄이 넘습니다. 게임 한 판에 얻을 수 있는 데이터양도 막대하ì£. 그래서 최대한 아이콘이나 색상을 í™œìš©í• ìˆ˜ 있는 부분은 텍스트를 간소화하여 디자인하기로 했습니다.

배틀그라운드 게임 내에서 가장 상위 분류개념에는 게임 모드가 있습니다. 현재까지는 솔로, 듀오, 스쿼드, 솔로 FPP, 듀오 FPP, 스쿼드 FPP 이ë‡ê²Œ 6가지 게임 모드가 존재합니다. 이후에 게임 업데이트에 따라 게임 모드가 ëŠ˜ì–´ë‚ í™•ë¥ë„ 높ì£. 게임 모드는 ì„ì 페이지에서 가장 많이 ì‚¬ìš©ë ì¤‘ìš” UI입니다. 따라서 확실하게 구분되는 색상과 아이콘을 통해 게임 모드를 분리했습니다.

게임 결과에 대해서도 3가지의 분류가 있습니다. 바로 1등, 즉 ‘승리’와 ‘TOP 10’, ‘그 외 등수’를 의미하ì£. OP.GG의 ì„ì 서비스에는 타임라인의 background에 색상을 넣어 게임의 결과를 명확하게 보여주는 디자인을 꾸준히 ì‚¬ìš©í•˜ê³ ìžˆìŠµë‹ˆë‹¤. 플ëˆì´ì–´ë¼ë©´ 최근 자ì‹ì˜ ì„ë°˜ìì¸ 게임 기록에 대해 가장 궁금해하ê²ì£. (혹은 다른 플ëˆì´ì–´ì¼ 수도 있ê³ìš”) 실ìœë¡œ 커뮤니티에서 OP.GG의 ì„ì 스크린샷과 함께 ‘ì„ìì´ 빨갛다’라는 의미의 글을 올리면 ‘패한 게임이 ë§Žë‹¤â€™ë¼ê³ ë°”ë¡œ 인지가 되는 경우가 많습니다. PUBG.OP.GG에서도 이 공식(?)을 활용하여 각 게임의 결과에 background 색상을 지ì•í–ˆìŠµë‹ˆë‹¤. 솔로, 듀오, 스쿼드에 ììš©ëœ 색상과 구분되면서도 텍스트를 해치지 않을 ì•ë„의 명도를 가진 색상으로 말이ì£.

ê³ìœ 색상을 가진 카테ê³ë¦¬ê°€ 6개 ì•ë„ë¡œ 나누어지니 한 페이지에서 보이는 색상 종류가 다소 많았습니다. 그래서 ì„ë°˜ìì¸ 톤을 수ì•í•˜ê³ 색상끼리 잘 어울릴 수 있도록 ì¡°ì•í•˜ëŠ” 작업이 오래 걸ë¸ì—ˆì£. ì„ì²´ììœ¼ë¡œ 톤을 다운시키니 배틀그라운드 게임의 look&feel과도 어느 ì•ë„ 조화를 이루게 되었습니다.

피드백

PUBG.OP.GG가 ì¶œì‹œë˜ê³ ë§Žì€ ìœì€ 피드백이 들어왔습니다. ê·¸ë¦¬ê³ ë””ìžì¸ì— 대한 피드백도 들어왔ì£. 블루홀 쪽에서 받은 데이터로 다양한 컨텐ì¸ë¥¼ 만들게 되어 서비스에 대한 긍ì•ìì¸ 반응들이 있었지만, 디자인ììœ¼ë¡œ 부ì•ìì¸ 의견들이 많았습니다. (T. T) 이러한 피드백까지 경청해서 더 많은 ìœì€ë“¤ì´ ê³µê°í• ìˆ˜ 있는 좋은 서비스를 만들어야ê²ì£. 디자인 피드백들은 하나의 공통ìì¸ 의견을 ê°€ì§€ê³ ìžˆì—ˆìŠµë‹ˆë‹¤. 바로…

“가독성이 좋지 않다.”

비슷한 사이트인 ‘A사이트’를 언급하며 가독성이 좋지 않다는 이야기를 들었습니다. 우리는 가독성에 대해 생각해 보았습니다. 가독성은 얼마나 쉽게 읽을 수 있는지에 대한 ì•ë„를 뜻하는 말이ì£. ìœì€ë“¤ì€ 어떤 의미에서 타 서비스가 가독성이 더 ì¢‹ë‹¤ê³ í•œ 것일까요?

ëˆì´ì•„웃

ìœì€ë“¤ì€ 타 서비스인 ‘A사이트’의 게임 모드별 데이터 ëˆì´ì•„웃이 가로 형태인 것을 언급했습니다. PUBG.OP.GG는 게임 모드별 데이터를 세로 형태로 ë³´ì—¬ì£¼ê³ ìžˆì—ˆì£.

이 피드백을 통해 서비스를 만들 때 세ì›ë˜ 우리의 가ì•ì— 문ìœê°€ 있다는 것을 깨달았습니다. 바로 롤과 오버워치를 하는 ìœì€ë“¤ 대다수가 배틀그라운드를 플ëˆì´í• 것이라는 ìì´ì£. 롤과 오버워치와 배틀그라운드는 각각의 ê³ìœí•œ 특징을 ê°€ì§€ê³ ìžˆìŠµë‹ˆë‹¤. 서로 맥락은 비슷하지만, 핵심은 다르ì£. 따라서 각 게임에 ìí•©í•œ 데이터 형식이나 ëˆì´ì•„웃이 필요했습니다. 롤은 출시한 지 오래되어 어느 ì•ë„ 자리를 잡았기 때문에 ìœì€ë“¤ì€ 데이터를 ë³´ê³ ìƒê°í•˜ê³ ë¶„ì„í•˜ëŠ” 환경에 익숙합니다. 여러 롤 ì„ì 서비스들을 살펴보면 ëˆì´ì•„웃 또한 분석에 최ìí™”된 구조로 ì•í˜•í™”되어있습니다. 반면에 배그는 ì´ìœ ë§‰ 출시한 게임입니다. ìœì€ë“¤ì´ 어떤 데이터를 원하는지 ì„ì 서비스를 만드는 입장에서도 100% 명확하지 않ì£. 하지만 이미 출시된 서비스들을 ë³´ë©´ 게임 모드별 데이터가 가장 부각되어 있ê³, ìœì€ë“¤ì—ê²Œ 중요하게 다가가는 데이터라는 ìì„ ìœì¶”í• 수 있습니다.

ëˆì´ì•„웃에 대한 이슈는 기존 ìœì€ë“¤ì˜ 경험보다 ‘OP.GG의 ì„ì 서비스’라는 ìì„ 더 중요하게 생각하여 간과된 부분입니다. 우리가 가장 ìžì‹ ìžˆëŠ” 매 게임의 ì„ì 데이터를 화면에 더 많이 보여줄 수 있기 때문에 세로 ëˆì´ì•„웃을 채택한 이ìœë„ 있었지만, 게임마다 ìœì€ê°€ ê°€ì§€ê³ ìžˆëŠ” 사ê³ë°©ì‹ê³¼ 경험이 다르다는 ìì„ 놓쳤던 것이ì£.

데이터

A사이트는 íŠ¹ì• ë°ì´í„°, 즉 ‘K/D’와 â€˜í‰ê· ë”œëŸ‰â€™ì„ ìœì™¸í•œ 나머지 데이터들의 텍스트 색상이 한 색상으로만 ì´ë£¨ì–´ì¸ ìžˆìŠµë‹ˆë‹¤. 수많은 데이터 중 위 2가지 데이터에 시각을 집중시키는 효과가 있ì£. ìœì€ë“¤ì—ê²Œ ‘K/D’와 â€˜í‰ê· ë”œëŸ‰â€™ì´ 가장 중요한 수치이ê³, 플ëˆì´ì–´ì˜ 능ë¥ì„ 판단하기에 근거가 충분한 ë°ì´í„°ë¼ê³ ì¸ì‹ì‹œì¼œ 줍니다. ê·¸ë¦¬ê³ ë‚˜ë¨¸ì§€ 데이터는 íŠ¹ì• ìƒ‰ìƒ 없이 나열했습니다.

우리는 각 데이터의 수치에 대해 플ëˆì´ì–´ê°€ 얼마나 잘하는지 ì•Œê³ ì‹¶ë‹¤ê³ ìƒê°í–ˆìŠµë‹ˆë‹¤. 그래서 각각 데이터의 텍스트에 붉은색(매우 잘하는) – 주황색(잘하는) – 회색(보통) 순의 3단계의 기준을 두어 어느 능ë¥ì¹˜ê°€ 뛰어난지 쉽게 êµ¬ë³„í• ìˆ˜ 있도록 했ì£. 이 ìì´ ìœì€ë“¤ì—ê²Œ 혼란을 주었습니다. 예를 들어, 한 ìœì€ì—ê²Œ ‘최다 킬’은 중요한 데이터가 아닙니다. 하지만 ê·¸ ìœì€ì˜ ‘최다 킬’ 수치가 높다면 붉은색으로 표기되어 강조되ê²ì£. 이러한 상황은 데이터의 의미에 대해 혼란의 여지를 줄 수도 있습니다. ‘최다 킬’이 의미하는 ì•ë„ê°€ 서비스 ìœê³µìž 입장과 ìœì€ì˜ 입장에서 차이가 ë‚ ìˆ˜ 있는 것이ì£. 또한, 잘하는 ìœì€ë“¤ì˜ 페이지에는 ëª¨ë“ ë°ì´í„°ê°€ 붉은색으로 표기됩니다. 이ë¡ìƒ 맞는 상황이지만 주변 환경보다 너무 부각되어 시ì„을 지나치게 집중시킬 여지가 있ê³, 어떤 데이터를 ë¨¼ì€ ë´ì•¼ 하는지 ê·¸ 순서가 명확하게 보이지 않습니다.

배틀그라운드는 아직 서비스한 지 오래되지 않았습니다. ì„ì 서비스를 ìœê³µí•˜ëŠ” 입장에서 가장 쉽게 데이터를 íŒŒì•…í• ìˆ˜ 있는 환경을 ìœê³µí•´ì•¼ 하ì£. 추ë¤ë‚¸ 9개의 데이터 중에서도 어떤 데이터가 더 중요한지 명확한 우ì„순위가 필요했습니다.

수ì•

우리는 위와 같은 피드백을 통해 ì„ì 페이지를 개ì„하기로 했습니다. 배틀그라운드 ì„ì 서비스를 이용하는 기존 ìœì€ë“¤ì—ê²Œ 친숙한 ëˆì´ì•„웃을 사용하ê³, 데이터의 우ì„순위를 보다 명확하게 하기로 했ì£.

ìš°ì„ ì¢Œì¸¡ì— 있던 게임 모드별 데이터를 상단으로 배치했습니다. ìœì€ë“¤ì´ ì„ì 페이지에 들어왔을 때 가장 ë¨¼ì€ ë³´ì´ê¸°ë¥¼ 기대하는 ì•ë³´ì´ì£. 카드 UI 안에는 ‘K/D’와 ‘경기 당 데미지’를 다른 데이터들보다 크게 표기했습니다. 여러 데이터 안에서도 해당 2가지의 데이터가 플ëˆì´ì–´ì˜ 실ë¥ì„ 판단하기에 의미 있는 지표이기 때문입니다. 데이터에 따른 ‘빨강-주황-회색’의 단계 표시도 ‘K/D’와 ‘경기 당 데미지’에만 ììš©ë©ë‹ˆë‹¤. 해당 데이터를 더 부각하기 위한 장치이기도 하며 나머지 데이터들을 보는 데 시각ììœ¼ë¡œ 지장이 없기 위함입니다.

기존에 상단에 있던 최근 20게임에 대한 ì•ë³´ë“¤ì€ 좌측에 배치됩니다. 좌측에 두는 것이 오른쪽에 있는 ì„ì 로그들과 비교하면서 보기가 용이하기 때문입니다.

ì„ì²´ììœ¼ë¡œ 필터들은 바뀌는 데이터 바로 위에 위치하게 됩니다. 배틀그라운드 게임 특성상 게임 모드도 많ê³, 한 플ëˆì´ì–´ê°€ 여러 서버를 플ëˆì´í• 수도 있기 때문에 필터가 많이 존재합니다. 따라서 데이터들의 타이틀 역í•ë¡œì„œ 필터를 상단에 배치하도록 디자인했습니다.

마치며

아직 PUBG.OP.GG에는 처음에 의도했던 많은 기능이 들어가 있지 않습니다. 우리는 계속해서 더 많은 ìœì€ë“¤ì´ 서비스를 ì´ìš©í•˜ê³ ì¢‹ì•„í•´ 주실 수 있도록 끊임없이 ê³ë¯¼í•˜ê³ 있습니다. 서비스 운영 초반에 들어오던 디자인ìì¸ 피드백도 페이지가 ì„ë°˜ììœ¼ë¡œ 바뀐 이후로 많이 줄어들었습니다.

디자인을 개ì„하면서 ‘왜 이 부분을 미처 살피지 못했을까, 왜 좀 더 객관ììœ¼ë¡œ 생각하지 못했을까’하는 아쉬움이 많이 들었습니다. 서비스 초반에는 새로운 기능들을 ë¹ë¥´ê²Œ 개발하여 출시하는 것이 중요한데, 디자인 ê°œì„ ë•Œë¬¸ì— 개발 일ì•ì„ í•ì•í•´ì•¼ 된다는 ìë„ 안타깝기도 했습니다. ê²°ê³¼ììœ¼ë¡œ 좋은 피드백을 많이 받았지만, 서비스 디자인을 시작하기에 앞서 사ì„에 좀 더 많은 공부가 필요했었ì£.

이미 기존에 많은 서비스가 있을 때, 디자이너로서 뭔가 다르게 ë³´ì—¬ì£¼ê³ ì‹¶ë‹¤ëŠ” 생각을 했습니다. ëˆì´ì•„웃이 ë ìˆ˜ë„ 있ê³, 색상이 ë ìˆ˜ë„ 있ì£. 디자인ììœ¼ë¡œ 서비스만의 개성을 가ì¸ê°€ëŠ” 것은 ì¢‹ë‹¤ê³ ìƒê°í•©ë‹ˆë‹¤. 하지만 ê·¸ 바탕에 ìœì€ì˜ 경험이 가장 우ì„시되어야 한다는 ìâ€¦ 이번 작업을 통해 ê·¸ ìì„ 다시 한번 상기시키게 되었습니다.

서비스 오픈 due date가 ì•í•´ì§„ 상황에서 어떻게 하면 좀 더 효율ìì¸ 시간 관리를 통해 아쉬움을 조금이나마 덜 수 있을지… 어떻게 하면 ìœì€ë“¤ì˜ 경험을 ìœì§€í•œ 채 서비스 본연의 디자인 look&feel을 조화롭게 맞춰나갈 수 있을지… 앞으로 더 많은 사람들이 OP.GG 서비스와 함께 게임 실ë¥ì„ 키워나갈 수 있기를 바라면서 글을 마칩니다.