로비 컨셉 초안을 바탕 삼아 콘텐츠 페이지를 이어서…

GUI는 콘텐츠와 아트를 따라가기에, 없는 것이 아쉽지만 레퍼런스 에셋으로 작년 말에 써 본 Karlo를.

시선의 이동을 확인할 겸, 명도 체크를 하면서 진행.

(현재 이 페이지 전면 수정 중ㅜㅜ)

로비에서 이어지는 Primary button과 Secondary button의 컬러를 잡고, 명도의 배분은 사용성의 우선 순위를 따라가도록 잡는데 아직 확정은 못 지었다. 무드는 계속 폴리싱 중.

최근 트렌드 중 하나인지 각종 어플 뿐만 아니라 포스터, 광고에서도 많이 보여서 오랜만에 다시 찾아봤다. 개인적으로 면적과 여백 디자인을 좋아하고.

레퍼런스나 트렌드 무드 참조 시에 한 번씩 훑어보는 사이트

 우선 러프하게 추려본 컴포넌트들을 가지고서…

• 수집형 RPG라고 가정했을 때, 영웅의 상세 정보에서 사용성 순위가 높은 것은

등급, 속성, 타입 이하 세부 능력치의 **상세 정보(좌측 영역)**와, 스킬과 성장 **진척도(우측 영역)**인데, 아무래도 실제 콘텐츠의 방향성을 따라가므로…

컨셉안에서는 중앙의 유닛을 기점으로, 좌측 영역: 고정 성격 정보 / 우측 영역: 사용자 가변 정보(ex. 레벨 상승)로 그룹핑해두었다.

• 팝업 및 툴팁 구성 시 Modal view를, 이 dimmed back 직전 화면을 시각적으로는 블러 처리하고 싶은데, UGUI에서는 몇 가지 문제가 있었다.

근래 피그마를 활용한 일반 앱에서는 비교적 쉽게 지원하지만 (피그마 써보니 너무 쉽게 되길래 부럽(?)더라.) 게임 프로덕트는 환경이 워낙 다르고, 많은 씬과 객체를 다루다 보니…

팝업과 툴팁이 출력되는 GUI 규칙은 공통성을 가져야 하는데 실시간 블러를 지원하던지, 화면을 구워서 블러를 그리던지 어떤 방법을 써도 모든 경우의 상황에서 출력이 용이한 게 아니라는 점. 백그라운드에 어떤 씬이 로딩되어 있느냐에 따라 메모리 이슈도 있고. 그러니까 짧게 말해서 코스트 낭비와 최적화 이슈가 항시 발생하던 것.

그래서 시안에서는 블러 없이 리소스의 투명도와 중첩으로만

제한적 사용을 염두하던지, 단순하게 dimmed back만 깔거나, 일부러 뭉개뜨려 블러 분위기가 나는 공용 리소스를 만들거나 등으로 대체하여 유사한 시각 효과를 찾아야만 했다.

UMG에서 제공하는 블러는 어떨지 궁금… 문서 링크) 백그라운드 블러 위젯 UGUI보다 가볍게 쓸 수 있다고 들었기 때문.

위 내역은 추후 에셋화해서 엔진에 넣을 때 다시 보기로 하고, 전체적인 진행을 위해 영웅과 연관된 몇몇 요소를 추가해보는 중. 식별 기준을 개체—> 속성—> (타입—>) 레벨… 추후, 등급은 중요도가 높은 만큼 전면 프레임에 보강을 염두.

타원 도형과 선의 중첩, 플랫함을 중점 요소로 두고서 활용을.

속성 요소는 미니멈한 크기에서도 각각이 헷갈리지 않는 형태를 가지길 바랬고, 컬러는 각기 다른 리소스에 적용하여도 무난하게 섞이도록 중간값을 선정하였다.