원본 출처 : http://jp.gamesindustry.biz/article/1808/18082801/

「프린세스 커넥트！Re:Dive」제작 사례를 통해 배우는, 고속&고품질 UI를 만들기 위한 프로토타입 개발

 카나가와 현의 퍼시피코 요코하마에서 개최된 게임개발자를 대상으로 한 컨퍼런스 「CEDEC 2018」의 3일차가 되는 2018년 8월 24일에는 

애니메이션 RPG를 표방하며 전개 중인 스마트폰용 RPG「프린세스 커넥트！Re:Dive」(이하 프리코네R)를 주제로 한 강연이 열렸다.

 강단에 선 것은 프리코네R의 애니메이션 디자인 및 UI/UX의 디렉션을 담당한 사사키 타쿠무(佐々木拓夢) 씨와, UI팀 리더로서 개발 공정의

정비 및 그래픽을 제작한 사이토 유리코(斎藤友梨子) 씨로, 게임 UI를 고속&고품질로 만들기 위한 작업 공정에 관해 해설하였다.

 우선 사이토 씨가 「프리코네R」의 개요와 콘셉트인 「애니메이션RPG」에 대해서 해설한 뒤, 사사키 씨가 이어서 애니메이션RPG에 걸맞는

캐릭터의 매력이나 세계관을 전달하기 위한 디자인 및 게임에 몰입할 수 있도록 하기 위한 UI설계를 위한 요점을 나열했다. 그 내용은 다음과 같다.

1) 지연시간이 없는 화면 전환

2) 헤메지 않는 설계

3) 매력적인 그래픽스

다음부터는 각 항목을 상세하게 알아보기로 한다.

'지연시간이 없는 화면 전환'이란,

사이토 씨는 "「프리코네R」은 특정한 인터페이스를 반복해서 거치는 형태의 게임임을 전제로 두고, UI디자인으로 뭘 할 수 있을까를 고민했다."

고 한다. 이어서 "반복통과식 게임은 같은 화면을 여러번 통과하므로 반복 조작이 많으며, 다양한 기능으로 옮겨다니면서 플레이하게 된다. 따라서 유저가

쾌적하게 게임을 즐기기 위해서는 화면 전환 시에 지연시간이 없어야 하며, 이를 달성하기 위해서 로딩 시간의 고속화를 달성하고자 했다." 고 말했다.

로딩의 고속화란 기본적으로 엔지니어의 담당 업무지만, UI디자이너로서 어떤 식으로 작업에 착수했느냐 하면, 우선 그래픽스 소재의 공통화를 들 수 있다.

캐릭터 일러스트나 이펙트, 밝은 배경, 어두운 배경 등 다양한 화면에 모두 대응할 수 있는 디자인을 작성함으로써 UI소재의 비대화를 막고, 화면 전환 시에

읽어들이는 데이터의 양을 줄인 것이다.

이에 더해, 메뉴의 계층이 심화될수록 UI소재의 공유비율을 높여나갔다. 이렇게 함으로써 재활용감을 줄이면서도 디자인 면에서 통일성을

유지할 수 있게 됐다.

(샘플로 소개된 '마이페이지'와 '퀘스트 상세내용'의 화면. 헤더나 푸터 등은 같은 디자인을 쓰고 있지만,

배경의 밝고 어두움에 상관없이 성립하며, 이에 더해 퀘스트 정보나 버튼 등을 직관적으로 파악할 수 있게끔 연구했다.)

[계층이 심화될 수록 공통소재율을 높인다 : 

제1계층(메뉴화면/캐릭터 목록) → 제2계층(탐색/던전 진입 전) → 제3계층 이후의 페이지(각 세부 항목 진입 후)]

[제1계층은 공통소재(붉은 영역)가 적으며, 전용소재(파란 영역)로 애니메이션도 활용한 화려한 구성]

[제2계층은 공통소재 비율이 약 60%]

[제3계층은 거의 100% 공통소재로 구성]

(계층 별 공통소재(붉은 영역)와 전용소재(파란 영역)의 비율. 제1계층은 유저의 눈에 자주 띄는 부분이므로 전용소재의 비율을 높이고,

제2, 제3으로 계층이 심화될수록 공통소재의 비율을 높여나갔다.)

'헤메지 않는 설계'란,

게임에 몰입하기 위해서 필요한 「헤메지 않는 설계」란, 유저가 목적을 잊지 않고 '무엇을 해야할지' 알아내기 쉬움과 동시에 막히는 느낌이 

들지 않게끔 만든다는 것을 의미한다.

이를 위해서 UI디자인 팀은 유저의 상정 이동경로를 검증하고, 도중에 막힐 법한 장소나 다음에 무엇을 해야할지 알기 어려워 보이는 장소에

유도선을 도입해서, 어떤 상황일지라도 게임 사이클이 멈추지 않게끔 설계하는 걸 의식했다고 한다.

로딩 시간의 고속화와 함께, 짜투리 시간에도 플레이 가능한 디자인을 지향한 것이다.

불필요한 화면전환을 없애기 위해 파생기능을 팝업으로 표시하는 디자인을 채용함으로써 유저가 직전의 화면을 잊지 않게 되었다. 또한,

유도선에 해당하는 버튼의 색을 통일하거나, 빨간 마름모 모양 마크로 유저가 아직 클리어하지 않은 컨텐츠를 알리는 등 여러가지 궁리가 더해졌다.

(「프리코네R」의 캐릭터 강화 사이클. 루프 중에 반복용 유도선을 더함으로써, 플레이어가 막힘 없이 하고 싶은 것을 할 수 있도록 했다.)

(베이스가 되는 메뉴에 필요한 기능을 팝업으로 첨가했다. 이 방식은 복수의 화면에서 같은 팝업을 재활용할 수 있다는 장점이 있다.)

'매력적인 그래픽스'란,

「프리코네R」은 애니메이션 파트와 게임 파트로 구성되어 있으며, 이 2가지 요소 간에 괴리감이 없도록 하기 위한 UI설계 및 비쥬얼 조정을

「매력적인 그래픽스」라고 한다. 우선, 한 눈에 「프리코네R」임을 알 수 있도록 게임 파트에도 애니메이션을 사용하여 두 파트의 경계를

흐릿하게 만들었다.

 그 다음은 게임 파트에서도 캐릭터를 접할 수 있는 기회를 늘림으로써, 기능적일 뿐만 아니라 캐릭터의 매력을 유저에게 충분히 어필할 수 있도록

주의를 기울였다. UI디자인 역시 애니메이션 파트의 배색이나 선, 채색 등을 참고해서 비쥬얼 면의 통일화를 도모했다.

[Before - 캐릭터 그림이 작아서 매력이 충분하게 전해지지 않는다]

[After - 캐릭터가 매력적으로 보인다]

(윗쪽은 효율적으로 캐릭터 확인이 가능하지만 아랫쪽이 의상이나 들고 있는 무기 등 캐릭터의 매력을 전달하기 쉽다.

이 캐릭터 일람 화면을 「유저가 히로인과 만나는 장소」라고 생각했기에, 단순한 디자인 대신 캐릭터의 매력을 최대한 끌어내는 UI로 만들었다.)

[Before - 화면에 움직임이 없어 '애니메이션RPG'다움이 없음]

[After - 애니메이션을 UI에 도입함으로써 '애니메이션RPG'스러움이 생김]

(캐릭터의 스탠딩CG를 애니메이션으로 변경. UI 밑에도 애니메이션을 넣음으로써 애니메이션 파트와 게임 파트의 이미지를 접근시켰다.)

[Before - 눈에 거슬리는 UI → 눈에 거슬리지 않는 UI]

[애니메이션의 배색과 단일 캐릭터의 외곽선에 어울리는 장식으로 변경함]

(애니메이션과의 친화성을 높이기 위해서 UI도 금속 질감이나 정교한 디테일을 피하고, 애니메이션의 배색에 가깝게끔 만들었다.

입체감 역시 빛과 그림자로 만들지 않고 애니메이션과 유사하도록 디자인했다.)

[세계관에 맞는 UI디자인을 만들기 위해서 캐릭터의 색감이나 게임 내 배경의 그림자 넣는 방식 등을 참고로 해서 UI의 색감과 장식을 정함

- 옷 색은 #ffffff가 아니라 살짝 색감이 들어가있음.

- 페코린느 에게서 추출한 색

- UI소재에 실제로 사용한 색

- UI의 백색 역시 #ffffff가 아니라 살짝 색감이 들어가 있음.

]

(UI의 색감 및 가공은 메인 캐릭터 중 한 명인 페코린느를 참고했다. 해당 히로인에게 사용된 색을 채도/명도 등을 조절해서 다이얼로그에 사용하거나,

캐릭터에 맞춰서 색감을 더하는 등의 시도를 했다고 한다.)

=====================================================

1. 

https://blog.naver.com/mssixx/221349176662

블로그 기사 내용이 번역기 돌리고 은(는) 이(가) 정도만 손 본 수준이라 '시발 차라리 손 번역을 하고 말지'라는 생각에 번역해봄.

2.

다 하기엔 이미지 첨부 한계도 있고 내용도 길어져서 나눠서 하기로 함.

3.

관심 있으면 일본어 가능한 갤럼은 제일 위에 원서 기사 있으니 한 번 읽어보자.

4.

오타 지적 및 번역 개선 건의 있으면 댓글 부탁해.