[📜일지] 피그말리온 #23 : UI 변경

[team_ca..(teamcandle)]

작년, 피그말리온을 시연할 기회가 있을 때 UI / UX 적인 피드백을 많이 받았다.

UI / UX나 디자인은 우티 팀도 부족한 점을 인지하고 있었다.

항상 열려있는 캔들답게 이번에도 우리는 피드백을 수용하기로했다.

기존 메인 화면

기존 그래픽 해상도의 경우 320 * 180 픽셀 규격으로 제작하고 있었다.

픽셀 느낌을 살리기 위해 했던 선택이었지만 기존 해상도에선 표현의 한계도 있었고, 다양한 해상도에 적용하기에 어려운 점이 있었다.

또 전체적인 UI에서 버튼을 마름모꼴로 통일했는데, 버튼이 버튼처럼 보이지 않는다는 직관성 측면의 피드백이 종종 있었다.

이런 점들을 해결하기 위해 우선 전체적인 해상도를 업스케일링하는 동시에 버튼 디자인과 가시성 부분을 손보는 대작업이 들어갔다.

사실 이건 내부에서도 의견이 갈리는 부분이었다.

업스케일링을 하게 될 경우 이미 만든 대부분의 리소스를 다시 만들어야 한다는 의미였으니까.

하지만 나중에 출시할 때의 퀄리티를 생각하면 돌아가더라도 좀 더 확실하게 하는 편이 좋을 것 같다는 생각에 결단을 내렸다.

메인 화면

그렇게 만든 새로운 메인 화면.

비포 / 애프터 비교 사진

해상도는 320 * 180 픽셀에서 480 *270 픽셀 규격으로 바꿔서 제작을 진행했다.

이를 통해 다양한 언어, 크기의 픽셀 폰트 적용이 가능해졌다.

글씨는 직접 만들었다 (분홍색은 어색한 폰트 표시용)

메인 화면 배경에 들어가는 오브젝트

해상도 변경에 따라 뒷 배경에 들어가는 오브젝트도 새로 찍었다.

기본적으로 화면이 전환되는 버튼은 모두 모서리에 배치했다.

이 버튼 구성의 경우 레터박스가 있으면 예쁘지 않기 때문에 최대한 화면 해상도에 대응해 버튼이 구석으로 갈 수 있도록 만들었다.

이걸 구현하려고 절대 좌표, 상대좌표 둘 다 사용하면서 머리 빠지도록 고민했는데... 아무튼 복잡한 과정이 있었지만, 결과적으로 잘 구현됐다.

지적을 받았던 버튼 인식 역시 좀 더 구분될 수 있도록 뒤쪽에 그림자를 줬다.

모바일 화면에서 화면 기울기에 따른 그림자

그림자는 모바일에선 디바이스 기울기에 따라 더 보이고, PC나 콘솔은 포인터가 가는 방향에 생길 수 있도록 만들었다.

모바일 기기 설정창 역시 기기 기울기에 따라 이렇게 그림자가 보인다.

메인 화면에선 사람의 시선이 가장 먼저 가는 왼쪽 위에 가장 중요한 게임 시작 버튼을 넣었다

그리고 화면이 이동할 때도 좀 더 직관성을 줄 수 있도록 화면 이동 연출을 변경했다.

기존 UI 는 버튼을 눌렀을 때 화면이 어디로 이동하는지 직관성이 떨어졌다.

기존 화면은 버튼의 위치나 방향 아이콘과는 상관없이 이동했다.

UI를 새로 변경하면서 버튼 위치와 방향대로 화면이 이동되도록 구성과 연출을 다시 짜봤다.

버튼의 위치에 맞게 화살표 방향으로 화면이 전환된다.

결과적으로 보면 이렇게 이동하는 연출이 완성

만들어보니 버튼을 눌렀을 때 이동하는 건 좀 더 직관적으로 된 것 같다.

해상도에서부터 화면 구성까지 거의 리메이크에 가까운 작업이다 보니 시간도 오래 들었지만 대체로 만족하는 편이다.

이 일지를 보는 입장에서 어쩌면 큰 차이가 안 난다고 느낄 수 있지만, 만든 입장에선 구버전과 비교했을 떄 퀄리티 부분에서 역 체감이 느껴진다.

사실 인 게임도 그렇고 아직 적지 못한, 자잘하지만 많은 수정 사항이 있다. 언제 일지로 다 쓰지...

이제는 피드백을 받아도 이번 처럼 완전 갈아엎는 작업은 어렵겠지만... 앞으로도 문제점이 있다면 최대한 반영할 예정이니 피드백은 언제나 환영이다.

다음 편에 계속…(캔들은 항상 열려있습니다.)

[익명(218.144)]

너무 좋으다!

[익명(49.164)]

[핫케익(godotisgod)]

마지막에 약간 길치 같은 사람은 메인으로 가는 길을 어려워할 수 있겠는데..? 메인으로 가는 길을 가이드 해주면 좋을거같음 그런 의미에서 모서리 버튼들이 가시성이 좀 떨어지는거 같아요 모서리 버튼 색을 조절 한다던지 먼가 중심 내용을 해치지 않는 선에서 하이라이팅?강조?가 필요 할거같아요

[핫케익(godotisgod)]

그레이 계열도 괜찮을듯,, 아니면 그냥 투명도 있는 검정색으로 해도 좋을거같긴해요

[자블(indipia)]

[카퍠인(happys96)]

[oo(218.156)]

연출 멋지네 마지막 결과연출 보고있으면 비슷한 방들 모아논 방탈출게임처럼 내가 현재 어디있는지 헷갈릴거같네, 실제 플레이해보면 다르겠지

[도기(ygakim1027)]

[익명(121.164)]

바뀐거 되게 좋네

[익명(kishin4510471)]

내가 존나 좋아하는 UI스타일이네 - dc App

[약중독고앵이(sobatman)]

섹스;