작업 과정을 남겨보자. 다시 보면 300% 이때 왜 그랬지,의 흔적이지만 기록해두면 적어도 같은 과정은 피할 수 있으니까. 이하 진행 순서 및 북마크.

<aside> 🚧 다시 재직하면서 플젝 보느라고 홀딩 상태🥲

</aside>

📌*로비 컨셉

📌*콘텐츠 📌*아이콘

러프하게 로비와 HUD를 구성해보자.

※ 카툰과 실사, 캐주얼 사이에서 고민하다가 첫 번째 시작은 무난하게 반실사와 함께 방향성을 찾아보기로.

디폴트 폰트 1종과, 데코레이션 폰트 1종(영문, 숫자, 기본 기호의 ASCII 한정)를 가정. 폰트패밀리는 논외.

240122_layout.png

구성해보면서, Top HUD의 재화의 비중은 식별 가능한 범주 내 최소 크기로 줄였다.

로비의 Top HUD에 옵셔널한 버튼을 유지할 것인가? 고민의 발단은 아래와 같다.

이는 상위 UX 그룹핑 분할과도 맞물리는데, ’사용자의 시선이 화면 중앙부 콘텐츠 —> 필요 정보로 이동’을 1전제로 가정하고…

좌측 영역: 정보, 상품 배너(숏컷) / 우측 영역: 기능, 편의

240124_layout.png

2024LobbyLayoutConcept1.png

로 분할하여 대략적인 레이아웃을 잡아보았다.

스크린샷 2024-03-01 오후 4.51.54.png

스크린샷 2024-03-01 오후 5.09.33.png

스크린샷 2024-03-01 오후 4.55.55.png

스크린샷 2024-03-01 오후 5.10.00.png

시선의 흐름이 0)중앙의 아트 콘텐츠—> 1)우하단 상품 배너—> 2)좌측 메인 버튼—> 3)좌하단 옵셔널한 버튼 그룹,으로 이동하게끔. 그리고 버튼 그룹에 확장성의 여지를 두고, Top HUD는 사용자의 계정 정보와 재화를.

레퍼런스 캐릭터의 이미지가 짙은 명도에 컨트라스트가 높다 보니 덩달아 GUI 화면이 무거워졌으나, 엔진에 올리면서 폴리싱해보기로. ※ 아래에서 계속.

2024UnitList_Emblem_Ex_noHUD2.png

중간쯤에서 페이지 무드를 정돈 중…