Pogl UI 2.0을 소개합니다

Pogl을 열면 아무것도 누르지 않아도 게임이 바로 실행됩니다. 표지를 보고 [플레이]를 누르는 방식이 아니라, 열자마자 플레이하는 방식이에요. 저희가 가장 중요하게 여기는 점입니다.

그런데 화면을 하나씩 확인해 보니, 게임 주변에는 여전히 플랫폼 요소가 많았습니다. 왼쪽의 세로 메뉴, 게임 아래의 검은 단추 줄, 게임과 상관없이 정해 둔 색들입니다. 게임이 중심인 서비스인데 게임보다 플랫폼 화면이 먼저 눈에 들어왔습니다.

2.0에서는 게임 주변의 플랫폼 요소를 줄였습니다.

베타의 첫 화면은 격자 목록이었습니다

8월 13일 첫 경험이 만들어졌고, 9월까지의 베타에서는 격자 목록이 첫 화면이었습니다. 인기 급상승, 새로운 경험, 많이 한 경험 목록이 차례로 이어지는 구성이었어요. 넘기면서 바로 플레이하는 피드는 «탐색» 탭 안에 있었습니다.

링크로 처음 온 분들은 목록을 둘러보기보다 바로 플레이하고 싶어 했습니다. 10월 초, 첫 화면을 넘기는 피드로 바꾸고 줄 목록은 탐색으로 옮겼습니다. 이 화면을 1.0이라고 부릅니다.

나중에 처음 온 분들을 반으로 나눠 확인했습니다. 피드로 시작한 쪽은 바로 떠나는 비율이 26.5%, 탐색으로 시작한 쪽은 30.9%였고, 10초 안에 플레이를 시작한 비율도 72%와 66%로 피드가 앞섰습니다. 게임을 첫 화면에 두는 쪽이 더 나았습니다.

원칙 하나, 게임 위에는 단추를 두지 않습니다

2.0의 첫 시안은 지금과 달랐습니다. 게임이 화면을 꽉 채우고, 좋아요와 댓글 단추가 게임 위 오른쪽에 반투명한 원 모양으로 있었어요. 제목과 만든 사람은 왼쪽 아래에 표시했고요. 숏폼 앱에서 익숙한 모양이라 시안으로 볼 때는 가장 보기 좋았고, 저도 그 안을 골랐습니다.

실제 게임들에 적용해 보니 바로 문제가 보였습니다. 영상과 달리 게임은 화면 가장자리에 자체 단추를 둡니다. 오른쪽 끝에 단추를 둔 게임에서는 사용자가 게임 단추 대신 저희 단추를 눌렀어요. 원을 더 투명하게 해도 터치는 여전히 저희 단추로 들어갔습니다.

그래서 원칙을 하나 세웠습니다. 게임 위에는 단추도, 제목도 두지 않습니다. 폰에서는 단추를 게임 바로 아래의 띠로, PC에서는 게임 바깥 오른쪽 칸으로 옮겼습니다. 게임 정보는 ⋯를 누르면 나오는 정보 창에서 봅니다.

원칙 둘, 게임 주변의 색은 게임 화면에서 가져옵니다

단추를 게임 아래로 옮기니 띠의 색을 정해야 했습니다. 처음에는 그라디언트를 넣었는데, 게임이 로딩 중이라 화면이 검을 때도 띠에는 색이 있어 어색했습니다. 다음에는 게임 화면을 흐리게 처리해 띠에 비치게 했더니 조이스틱 같은 요소가 흐릿하게 번져 보였고, 그다음에는 띠 전체를 같은 정도로 어둡게 했더니 게임과 띠 사이에 경계선이 생겼습니다.

그래서 띠에 따로 색을 정하지 않기로 했습니다. 지금 띠는 게임 화면 아래쪽 가장자리의 색을 읽어 그대로 쓰고, 맨 위는 어둡게 하지 않다가 아래로 갈수록 조금씩 어두워집니다. 게임이 밝으면 띠도 밝고, 로딩 중이라 화면이 검으면 띠도 검습니다. PC에서는 오른쪽 단추 칸과 위쪽 메뉴 뒤에도 게임 가장자리의 색을 씁니다.

원칙 셋, 반투명 효과는 떠 있는 메뉴에만 씁니다

2.0의 메뉴는 화면 내용 위에 떠 있는 형태입니다. PC의 왼쪽 세로 메뉴는 화면 위쪽의 반투명 메뉴로 바꿨고, 폰의 탭바는 화면 아래에 떠 있는 반투명한 알약 모양 메뉴로 바꿨습니다. 내용이 메뉴 아래로 지나가므로 화면 폭을 전부 쓸 수 있고, 위 메뉴의 양 끝은 821px부터 1920px까지 어느 폭에서든 아래 내용의 양 끝과 맞춥니다.

모든 요소를 반투명하게 만들지는 않았습니다. 반투명 효과는 다른 내용 위에 떠 있는 메뉴에만 씁니다. 목록이나 글처럼 읽는 화면이 비쳐 보이면 읽기 어렵기 때문입니다. 그런 화면은 불투명한 색으로 둡니다.

탐색 화면은 큰 판 하나와 칩 한 줄로 바꿨습니다

1.0의 탐색은 오늘의 경험 아래로 여러 줄이 길게 이어졌습니다. 2.0에서는 맨 위에 화면 양 끝까지 닿는 큰 판을 하나 두었습니다. 이 판에는 오늘의 경험, 지금 사람이 많은 경험, 인기 급상승 경험이 차례로 표시되고, 그 아래는 칩 한 줄과 목록 하나입니다.

큰 판에는 문제가 하나 있었습니다. 저희 표지는 세로로 긴 그림이라 가로로 늘리면 흐려집니다. 그래서 같은 표지를 흐리게 처리해 배경으로 깔고, 선명한 표지 카드는 오른쪽에 따로 두었습니다.

편집 화면에서는 사이트 메뉴를 숨겼습니다

게임을 만드는 화면에도 같은 원칙을 적용했습니다. 스튜디오 편집 화면은 사이트 메뉴와 편집 메뉴가 두 줄로 있어 게임이 보이는 영역을 줄이고 있었습니다. 편집 단추를 사이트 메뉴 양옆에 넣어 보기도 하고 코인과 알림까지 한 줄에 넣어 보기도 했는데, 둘 다 너무 복잡했습니다.

그래서 편집 화면에서는 사이트 메뉴를 숨겼습니다. 위쪽에는 표지와 이름, 화면 바꾸기와 판 고르기, 초대와 공개만 한 줄로 남겼어요. 위쪽 메뉴 높이가 136px에서 60px로 줄어든 만큼 게임이 보이는 영역이 넓어졌습니다.

속도도 함께 개선했습니다

디자인이 좋아도 화면이 늦게 뜨면 쓰기 불편합니다. 2.0을 준비하면서 화면을 하나씩 열어 보며 오래 기다려야 하는 곳들을 함께 찾아 고쳤습니다.

가장 크게 개선된 곳은 탐색입니다. 추천 목록을 만들 때 칸 하나를 채울 때마다 남은 후보 전체를 처음부터 다시 계산하고 있었어요. 공개 경험이 5,000개쯤 되자 이 계산만 2.9초가 걸렸습니다. 앞쪽 칸만 기존 방식대로 하나씩 고르고 나머지는 한 번에 섞도록 바꿨더니 0.2초로 줄었습니다. 앞쪽에 표시되는 경험의 순서는 바뀌지 않았습니다.

팔로워가 많은 계정의 팔로워 목록은 열 때마다 팔로워 전부를 정렬한 뒤 앞의 60명만 잘라 보여 주고 있었습니다. 필요한 만큼만 최신순으로 읽도록 바꿔 2.1초에서 0.14초로 줄였습니다. 커뮤니티의 추천, 팔로잉, 경험별 칩도 이제 누를 때마다 페이지 전체를 다시 불러오지 않고, 한 번 본 탭은 바로 보여 줍니다.

게임이 실행되기까지의 시간도 줄였습니다. 게임 그래픽을 처음 준비할 때 개발용 오류 검사가 플레이어 화면에서도 실행되어 첫 플레이가 늦어지고 있었습니다. 이 검사는 저희 배포 검사에서만 실행하도록 바꿨고, 느린 4G 환경을 재현해 측정해 보니 어떤 게임은 그래픽 준비가 2초 넘게 걸리던 것이 1초 안팎으로 줄었습니다.

앱을 처음 열 때의 화면도 바꿨습니다. 앱이 표시한 로고를 웹이 같은 위치, 같은 크기로 이어서 표시하다가 화면이 준비되면 작아지며 사라집니다. 이 애니메이션 때문에 기다리는 시간이 늘어나지는 않습니다. 화면이 준비되는 즉시 로고가 사라집니다.

마지막으로 화면마다 다른 모양을 맞췄습니다

전체 구성이 정해진 뒤에는 PC와 폰, 다크 모드와 라이트 모드에서 화면 199장을 다시 캡처해 하나씩 확인했습니다. 서로 맞지 않는 곳이 82군데 나왔습니다. ⋯를 누르면 나오는 메뉴만 해도 여섯 가지 모양이 섞여 있었고, 페이지 제목 크기도 화면마다 달랐습니다. 메뉴는 반투명 메뉴 한 가지로, 고르기 칩은 한 모양으로, 페이지 제목은 같은 크기로 맞췄습니다.

플랫폼 화면은 게임을 가리지 않아야 합니다

게임 플랫폼의 화면 요소는 게임을 가리거나 조작을 방해하면 안 됩니다. 영상 앱에서 널리 쓰이는 배치도 게임 위에서는 조작을 방해했습니다. 영상은 보기만 하지만 게임은 화면 전체를 눌러서 조작하기 때문입니다.

게임 주변의 색은 저희가 정하는 것보다 게임 화면에서 가져오는 편이 자연스러웠습니다. 저희가 고른 색은 어떤 게임과는 늘 어울리지 않았고, 게임 화면에서 색을 가져오자 게임마다 따로 조정하지 않아도 경계선이 보이지 않게 되었습니다.

화면을 단순하게 만드는 작업은 어느 화면에서 어떤 요소를 숨길지 정하는 일이었습니다. 편집 화면에서 단추를 줄이는 안은 여러 번 만들어도 복잡했고, 그 화면에서 사이트 메뉴를 숨기자 문제가 해결되었습니다.

새 화면에서 어색한 곳이 보이면 커뮤니티나 앱 안 고객센터로 알려 주세요. 하나씩 고쳐 나가겠습니다.

새 화면으로 Pogl 열어 보기 →