[UIUX] 아이돌마스터 Side M GROWING STARS 한계돌파 UIUX 개선

분류	UIUX
목적	개인작
주제	게임 내 UIUX 개선 기획
소재	아이돌마스터 Side M GROWING STARS 한계돌파 UIUX
제작	포토샵 (예시 이미지)
	2021년 10월

개인적으로 게임하면서 가장 마음에 안 든 부분 (...)

이렇게 개선해주면 좋겠다~ 하는 점을 모아서

트위터에 썼던 내용을 바탕으로 UI를 재구성해봤습니다.

제가 하는 다른 가챠 게임들로 레퍼런스를 약간 첨부했습니다.

레퍼런스로 첨부한 요소들은 여러 게임에서 공통적으로 보이는 요소라 넣은 거고

이걸 베껴라! 같은 의미로 넣은 것은 아니지만, 그럼에도 문제가 된다면 제거하겠습니다.

아무래도 저 혼자 한 거라 주관적일 수는 있겠지만? 그래도 다들 불편했을 거라고 생각해

나중에 진짜 이렇게 개선해주면 글 쓰는 의미가 없으니까

일단 공식보다 선수 쳐야겠다!! 는 생각으로 빠르게 썼습니다.

기획서 양식도 아니고, 말투도 가볍습니다.

수정 기록

2021-10-18

04시 28분: 만능 파편 UI 예시 이미지 작성
04시 46분: 아이돌 포토 좌우 이동 기능 UI 예시 이미지 작성
16시 43분: 레퍼런스 추가
18시 05분: 한계돌파 정렬 관련 UI 예시 이미지 작성
18시 54분: 목차, 책갈피 추가

2021-10-21

00시 04분: 마무리에 내용 추가

Ⅰ. 아이돌 포토 아이콘

1. 한계돌파 가능 여부 표시

개인적으로 가장 불편했던 점.

나는 한계돌파를 하러 온 프로듀서. 그러나 누구를 한계돌파할 수 있을지 모른다! 같은 상황이 되어버려서 아까 중복이 누구였지? 얘였나.. 얘였나.. 하면서 한 명 한 명 붙잡고 확인해야 하는 거죠. 이건 Ⅲ-1에서 언급하는 비효율의 문제와도 직결되어, 매우 매우 효율이 떨어지게 됩니다.

가챠 결과를 플레이어가 기억하거나 소지 아이템 리스트를 보면 벗어날 수 있는 문제라지만, 굳이 플레이어에게 그 역할을 떠넘겨야 했을까요? 반다이남코?? 심지어 아이템에서 파편 선택하고 사용하기 누르면 바로 그 포토로 이동시켜주는 것도 아니면서...

그러니 제발 표시해줘! 아이돌 포토 아이콘 정중앙에 큼지막하게 써줘! 가능! 가능이라고! (페이드 인아웃도 넣어줘!)

킹스레이드의 강화 가능 표시(왼쪽)와 블레이블루:얼터너티브 다크 워의 한계돌파 가능 표시(오른쪽)

그래서 만들어본 UI예시 이미지.

페이드 인아웃을 상정하고 만들어서 투명도를 좀 줬습니다. 글자 색깔은 사이스타의 포인트 색상으로.

캐릭터 얼굴 가리는 게 마음 아파서 위쪽으로 좀 올렸는데 페이드 인아웃이 있다면 가운데에 둬도 상관없을 것 같긴 하죠.

Ⅱ. 정렬

1. 한계돌파 가능한 아이돌 포토 우선 표시

체인지는 가능 불가능을 딱히 표시해주진 않지만 체인지가 가능한 아이돌을 우선해서 표시해주긴 하더라고요.

심지어 단순히 아이템이 모였다 or 체인지 포인트가 꽉 찼다가 아니라 이 두 개가 and로 성립되어야만 우선으로 표시해주는 게, 진짜로 '지금 당장 체인지 가능!'을 보여준단 말이죠. (이게 무슨 일이란 말이냐 한계돌파는 왜 안 보여줘)

한계돌파에도 한계돌파가 가능한 캐릭터를 우선해서 표시해주면 좋겠네요. 플레이어가 원한다면 "우선 표시할 것인지, 아닌지"에 대해 선택해도 되고요. (이 경우 정렬/필터 조건에 하나가 추가되는 셈이겠죠)

체인지에서는 체인지 가능한 포토가 우선 표시된다. (레어리티순 정렬이지만 SSR 포토가 R 포토보다 하단에 존재)

SR 슈의 한계돌파가 가능하지만 다른 SR 포토와 별 다를 것 없이 정렬되어있다.

아래는 Ⅰ-1에 더해 우선 정렬을 했을 때의 예시 이미지를 제작한 것입니다.

정렬 상 동일한 조건의 캐릭터가 있을 때는 캐릭터 ID순으로 배치하는 것 같더라고요. 그래서 슈를 먼저 두고 모모히토를 뒤에 뒀습니다. 그 뒤는 레어리티 정렬에 맞게.

2. 정렬 기본값, 초기값의 불일치 조정

한계돌파 화면 (게임 시작 후 얼마 안 돼 찍은 스크린샷. 제가 설정한 적 없으나 한계돌파순으로 정렬되어있었습니다.)

서비스 시작 이래로 아무것도 건드리지 않았는데 한계돌파 정렬은 기본적으로 한계돌파 내림차순으로 되어있었거든요. 그런데 레어리티 정렬로 바꿔놓고 다시 들어가서 보니까, 정렬 리셋 버튼이 활성화가 안 되는 거예요. 알고 보니 리셋 버튼을 눌렀을 때의 정렬이 레어리티 정렬이었어요. 이럴 거면 왜 초기값은 한계돌파 내림차순인 걸까? 프로그래머의 실수?

이건 약간 버그에 더 가까울지도 모르겠는데 여하튼 조정할 필요는 있어 보입니다.

3. 정렬 표시값의 중복 정보 조정

한계돌파순으로 정렬하면 오름차순이든 내림차순이든 아이돌 포토 아이콘 아래쪽에 한계돌파 값이 표시됩니다. 그런데 이미 아이돌 포토 아이콘에 한계돌파 수치가 표시되는 상황에서 이걸 굳이 더 보여줘야 했을까요? 딱히 어느 쪽이 더 잘 보이거나 하는 것도 아니라, 차이를 별로 못 느끼겠지만... 제가 아닌 사람들은 차이를 느낄 수도 있어서 이건 그냥 그렇구나 하고 넘어갈 수 있는 수준이라고 생각해요.

아이콘에 이미 표시되어있는 값을 다시 보여줄 거라면 차라리 다른 값을 보여주는 게 나을 것 같습니다. 예를 들어 해당 아이돌 포토의 소지 파편 수라든가. 이 문제는 Ⅰ-1이나 Ⅱ-1 기능을 추가하게 된다면 자연스럽게 해결되기도 할 겁니다.

오히려 Ⅰ-1의 한계돌파 가능 여부를 표시하게 될 경우 아무래도 아이돌 포토 아이콘에 있는 한계돌파 수치를 가리거나 시선이 가지 않을 것 같으니, 이 문제는 자연스레 해결되겠죠.

Ⅲ. 아이돌 포토 선택

1. 아이돌 포토 선택 창에서 좌우 이동 추가

막말로 10연 가챠에 서로 다른 아이돌 포토 10명의 중복이 나올 수도 있는 거잖아요? 10명을 한계돌파하러 왔다고 쳐봅시다. 그런데 한계돌파 가능한 아이돌이 누군지 기억한다고 해도, 아이돌 포토 선택 - 한계돌파 버튼 - 뒤로 가기 버튼의 과정을 반복해서, 모든 아이돌 포토를 한계돌파하기까지 최소 29번의 버튼 누르기가 필요한데요...

만약.. 한계돌파 가능한 아이돌을 모른다면? 그런데 내 아이돌 포토는 이제 100장이다 이러면... 최악의 경우 300번 정도 버튼을 눌러야 한다는 것.

어떤 포토를 클릭해서 이 화면으로 들어오면, 다른 포토로 이동하는 법은 오로지 뒤로가기-재선택 뿐.

이 문제는 Ⅰ-1과 가장 가깝게 연결되어있는 문제라고도 생각합니다. Ⅰ-1기능이 추가되면 이 문제의 비효율은 자연스럽게 사라질 거예요.

그러나 여전히 포토 당 버튼 세 번의 귀찮음이 남아있으므로, 아이돌 포토 선택 시 나타나는 화면에서 좌우 이동이 가능하게 한다... 는 기능이 추가되면 좋겠죠.

이렇게 되면 Ⅰ-1이 해결되지 않았을 때(부들부들)도 하나의 포토를 선택한 채로 계속 한쪽으로 움직이다 보면 한 바퀴를 생각보다 금방 돌겠죠? 이 편이 적어도 버튼을 300번 누르는 것 보다야 낫죠 플레이어가 해야 하는 조작은 슬라이드 100번 + 한계돌파 10번으로 대략 3분의 1쯤으로 줄어들 테니까요.

메기도72의 캐릭터 강화 창(왼쪽), 테일즈 오브 더 레이즈의 강화 창(오른쪽)은 좌우 이동이 가능.

아래는 제가 간단히 제작해본 예시 UI 이미지입니다.

좌우로 이동이 가능한 버튼을 추가. 슬라이드 이동만 가능할 경우 버튼이 아니라 기능 알림 UI쯤 되겠다.

좌우 이동이 가능한 버튼을 추가한 예시입니다. 이동 순서는 이 화면에 진입하기 전 정렬되어있던 그 순서대로.

좌우 이동 기능 자체는 버튼이 아니라 슬라이드로 추가해도 문제는 없을 것 같은데, 그래도 좌우 이동이 가능하다는 걸 UI로서 보여줘야 하지 않나~ 싶어서 버튼을 넣었습니다. 두 가지 모두 구현될 경우 슬라이드와 버튼 중 뭘 선택할지는 플레이어의 몫이 되겠죠.

버튼이 눈에 잘 띄게 녹색을 가져와서 제작했는데 솔직히 좀 고민이네요... 이 화면에서 가장 눈에 띄는 건 한계돌파 버튼이어야 하니깐... (머쓱) 그런데 흰색으로 하자니 배경이 흰색 계열이라 구별이 갈 것 같지 않았어요 어쨌든 뭔가 더 나은 걸 생각해봐야겠군

버튼 포지션 애니메이션 있으면 좋겠다... 양쪽으로 쭉쭉

Ⅳ. 추가 문제 및 개선 - 만능 파편

Ⅰ-1을 보면 한계돌파 가능 여부를 표시하는 기능을 언급했습니다. Ⅱ-1을 보면 한계돌파가 가능한 아이돌 포토를 우선적으로 표시해주는 정렬방법도 가능하지 않을까 하며 적은 바 있고요.

그런데 이때, 만능 파편으로 인한 한계돌파 가능은 어떻게 되는 걸까?

일단 당장 떠오르는 문제는 이 정도였습니다. 나중에 또 제가 적은 개선의 문제가 떠오르면 적으러 오겠습니다. 그전에 진짜로 고쳐주면 좀 좋겠지만...

1. 색상 구별

이 기능을 위해선 Ⅰ-1이 필수적 추가되어야 합니다.

한계돌파 가능을 알리는 텍스트 UI의 색상을 구별해서 표시합니다. 아래 이미지는 거기에 더해 Ⅱ-1을 추가로 구현하는 것을 전제로 하는 예시 이미지입니다.

SSR 파편 하나가 있을 때의 예시로 제작했습니다.

하지만 이 경우 구별법이 색상에 지나지 않으므로, 플레이어에 따라 정보전달 정도가 떨어질 수 있습니다. 텍스트를 바꾸는 것도 좋겠지만, 동일한 레어리티의 카드가 많이 표시될 경우 과도하게 많은 UI를 표시하게 되어 오히려 역효과가 일어날 수도 있습니다. 벌써 위 이미지만 봐도 SR 만능 파편이 추가로 존재할 경우엔 아래쪽의 모든 아이콘에 글씨가 들어가게 될 테니까요.

2. 필터 추가

한계돌파 가능한 아이돌 포토를 우선 정렬할 때 만능 파편으로 가능한 한계돌파를 포함할 건지 여부를 플레이어에게 선택하게 합니다. 필터 기능으로 작용하므로, 언제나 변경할 수 있습니다.

하지만 개인적으로 깔끔한 방법은 아니라고 생각합니다. 어쨌거나 저쨌거나 플레이어 손이 좀 가는 방법이라.

3. 만능 파편 소지 수 표시

만능 파편의 소지 수를 레어도별로 보여줍니다.

아이돌 포토 선택 화면엔 해당 등급의 만능 파편이 몇 개 있는지 지금도 알 수 있으므로, 아이돌 포토 선택 전의 한계돌파 화면에서만 표시합니다. 마찬가지로, 체인지와 스킬 강화는 만능 파편과는 무관한 시스템이므로, 해당 UI는 한계돌파 화면에서만 노출하도록 합니다.

아래는 제가 간단히 제작해본 예시 UI 이미지입니다.

상단 UI 추가 전후 비교. 위쪽이 전, 아래쪽이 후. 필터~정렬 버튼 간격이 줄어들고, 각 파편 소지 수를 알리는 UI가 들어왔다.

예시에서는 상단 UI에 만능 파편의 소지 수를 각각 등급별로 알리는 상자가 총 세 칸 추가되면서, 상대적으로 터치 영역이 넓은 필터~정렬 버튼 사이의 간격을 줄였습니다.

이렇게 될 경우 비슷한 기본 구조를 공유하는 UI그룹인 체인지와 스킬 강화 창의 공간도 같이 줄어야겠죠. 필터와 정렬을 한 버튼으로 합치는 방법도 있기야 합니다.

4. 한계돌파 가능 표시의 구체화

Ⅳ-3의 기능을 구현한다는 전제 하에, 더 나아가는 기능입니다.

한계돌파 가능! 을 표시할 때, 오로지 해당 아이돌 포토 파편으로만 가능 여부를 표시합니다. 그리고 그 상태에서 그저 가능! 만 표시하는 게 아니라 해당 파편이 몇 개 있는지, 전체 한계돌파까지 얼마나 남았는지를 표시해주는 겁니다.

예를 들면 이런 식: 해당 포토 파편 소지 수 / 남은 한계 돌파 수

포토 파편 소지 수는 그대로 표시하고, 남은 한계 돌파 수는 최대 4에서 최소 1.

아래는 이에 맞춰 제작한 예시 이미지입니다.

이때 만능 파편으로 한계돌파가 가능한 포토는 우선 정렬에 포함하지 않으므로, SR과 R 만능 파편이 있지만 레어리티 내림차순에 맞춰 SSR 포토를 우선해서 정렬하게 됩니다.

이렇게 하면 Ⅳ-3의 기능과 더불어 봤을 때, 어느 아이돌 포토는 그 파편이 있고, 만능 파편은 이만큼 있으니 굳이 Ⅳ-1이나 Ⅳ-2의 기능을 구현하지 않아도 각각에 대한 정보를 동시에 얻을 수 있습니다.

여기서 Ⅱ-3과 조금 합쳐보자면, 정렬이나 표시값을 파편 소지 수 등으로 하는 방법도 있습니다. 그게 곧 한계돌파 가능한 아이돌 포토를 우선으로 표시하는 것과 크게 다르지 않기야 하겠지만.

Ⅴ. 마무리

저도 아직 배우는 입장이지만, 지금껏 해 온 게임들이 있어서 그런가 이건 너무 불편하잖아~! 싶은 마음을 참을 수가 없어서 이왕 이렇게 된 거 길게 글을 써봤습니다. 더 좋은 의견 있으시면 언제든지 댓글로 부탁드립니다. (남의 지식에서 배우게 해주십시오)

Ⅳ-4에서 보여드렸던 이 예시 이미지가 제가 생각하는 최상의 개선안입니다... 사실 여기서 Ⅳ-4 자체는 빠지고 그냥 "한계돌파 가능!"만 있어도 지금에 비하면 충분하겠지만요.

요즘 한계돌파 시스템을 사용하는 게임은 대부분 가챠를 돌렸을 때 자동으로 해당 카드가 한계돌파 되도록 만들어두는데, 사이스타는 왜 수동 한계돌파를 하게 했는지 잘 모르겠습니다. 나중에 파편 깨부순 가루로 뭐 교환소라도 열 생각인가? 어쨌든 지금까진 딱히 해당 포토에 사용한다 외의 용도가 없으니, 이 정도 수정은 해줬으면 좋겠네요. 사실 제 의견이 게임에 먹히든 말든 그저 제 생각을 정리해보고 싶었습니다.

이 와중에 파편 여러 개 있으면 자동으로 한계돌파 복수 단계 선택되는 거 좋은 것 같아요 그런데 이 기능을 만들어주고 다른 걸 신경 안 쓰다니? 싶어서 괘씸해짐 (?)

해당 포토의 파편 소지 수에 따라서 자동으로 한계돌파 정도가 선택되어있다.

아직 이것 좀 고쳐줘~ 싶은 UIUX는 많습니다 예를 들어 동료 신청 알림 안 오는 거.. 이건 적어도 메뉴에서 동료 아이콘에 표시해줘야 되는 거 아니야? 내 친구가 나한테 동료 신청 넣은 것도 모르고 영영 무시할 뻔했어 (이 자리를 빌려 사죄의 말씀드립니다)

그리고 마지막으로 대통령님 적폐 수직 노트를 없애주세요

사실 이것도 어느 단계에서 있었던 실패가 아닐까 싶은 게... 요즘 모바일 리겜이 위쪽 화살표로 표시되는 노트를 좀 내놓잖아요. 일반 노트, 롱노트, 좌우 슬라이드 노트에 이어 리겜에 추가된 하나의 암묵적인 고정 노트랄까. 그런데 이게 편의상 위쪽 화살표를 하고 있지만 사실 360도 노트인데 사이스타에서는 오로지! 위쪽으로만 슬라이드 해야 해서 (판정 범위도 엄청 좁음 나쁜 놈들) 약간 다른 리겜에 이게 있어서 가져오긴 했지만 이 노트가 실질적으로 무슨 역할을 하는지는 모른 채로, 생긴 것만 보고 수직 노트로 만들어둔 거 아니야? 하는 의심이 되기 시작한단 말이에요? (이랬는데 진짜 수직으로 작용하는 리겜에서 따온 거면 할 말 없긴 하겠지만) 진짜 콤보치기 너무 힘들어요

어쨌든 이제라도 늦지 않았다 360도 노트로 바꿔줘 (모르는 척 원래 360도였던 척해줄 수 있단 말이야!

아르고나비스 from BangDream! AAside의 360도 노트. 위쪽 화살표로 표시된다.

다시 말하지만, 이건 그냥 제 생각을 정리해보고 싶었던 것이므로 그것 외의 별 다른 목적은 없습니다. 그럼에도 바라는 게 있다면 이렇게가 아니어도 좋으니 플레이어 편의성을 좀 고려해줬으면 좋겠어요... 반남이 이 글을 읽진 못하겠지만.

어쨌든 다들 행복한 프로듀서 생활되시고, 글이 마음에 드셨으면 하트를 찍어주시거나 이상하리만치 UIUX에 집착하는 프로듀서에게 동료 신청 해주시면 감사하겠습니다. 이건 제 명합입니다. (슬쩍 AH5RUC95 코드를 내민다) (?)

사이스타 한계돌파 UIUX 개편이 일어나는 날 이 글은 성지가 될지도 모릅니다 (joke)

2021/10/21 추가

한계돌파에서 한계돌파 가능한 아이돌 포토에 "한계돌파 가능"이 표시됩니다.

한계돌파에서 한계돌파 가능한 아이돌 포토 중, 전용 파편을 소지하고 있는 것만 필터하는 기능을 추가했습니다.

한계돌파에서 각종 파편의 소지수가 확인할 수 있게 됩니다.

하느님 맙소사 감사합니다

오늘 사실 다른 버그때문에 공지 어슬렁거리고 있다가 뜨자마자 됐나!? 하면서 들어갔는데 그건 안 됐지만 이건 됐음 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 버그도 고쳐줘요 ㅠㅠ

기능 추가 안내로 미루어보아 만능 파편에도 똑같이 한계돌파 가능!을 표시해두고, 전용 파편을 갖고 있는 아이돌 포토만 필터링하는 것으로 전용 파편을 소지한 아이돌 포토를 먼저 보여주도록 했네요. 우선 정렬은 없지만 필터 기능이 생겼으니 어느정도 정렬 정리의 역할을 하는 것 같습니다. 그리고 만능 파편 소지 수! 역시 이걸 안 보여주는게 이상했어!

선수치길 잘했네요 사실 이 기능은 진짜 여러번 말하지만 왜 이걸 개발단계에서 생각하지 못했지? 싶을 수준의 간단한 것들이라 1.1.0 버전 업 떴을때 이번엔.. 해주겠지? 이랬는데 진짜 해주네 감동적입니다.

자 빨리 하트를 눌러 성지에 흔적을 남기십시오 (joke)

↓