메이플스토리 - UI 개편

# 학습 과정 소개 월드를 제작할 때 User Interface(UI)는 필수 요소입니다. UI는 유저에게 플레이 관련 정보를 명확하고 간결하게 제공해야 합니다. 점수, 체력, 남은 시간, 각종 버튼 같은 UI 요소가 잘 디자인되어 있다면 유저는 직관적으로 월드를 이해하고 재미있게 플레이할 수 있을 것입니다. 유저는 메이플스토리 월드를 PC 및 모바일 환경에서 두루 플레이할 수 있습니다. 그러므로 크리에이터는 다양한 환경에서 불편함이 없도록 UI를 디자인해야 합니다. 물론 월드 콘셉트에도 맞고, 시각적으로 눈길을 사로잡는 디자인을 통해 매력을 발산하는 것도 중요합니다. 이번 시간에는 메이플스토리 월드 UI를 디자인할 때 고려할 사항과 유용한 팁 몇 가지를 소개하겠습니다. # 상호 작용성 ##### 다양한 디바이스를 고려한 레이아웃 UX만 고려한다면 PC와 모바일에 각각 최적화된 UI를 만드는 것이 최선일 것입니다. 하지만 월드를 제작할 때는 다양한 요소에 공을 들여야 하므로 모든 기기 별 UI를 만들기는 어렵습니다. UI 대부분은 공용으로 만들되, 사용성을 위해 반드시 달라져야 하는 부분만 기기 별 UI를 제작하는 것이 좋습니다. <광부 시뮬레이터> 예시를 살펴봅시다. <광부 시뮬레이터> UI 대부분은 PC와 모바일에서 동일하고, 몇 가지 조작 버튼의 위치만 다릅니다. 공용 UI 텍스트나 버튼 크기는 화면 크기가 작은 모바일을 기준으로 불편함이 없도록 제작되었습니다. PC에 맞춘다면 모바일 화면에서 너무 작아져서 사용하기 어렵기 때문입니다. | 기기 | 설명 | | --- | --- | | 모바일 | <br> <ol> <li>모바일에서 아이템을 편하게 사용할 수 있는 위치에 슬롯을 보여줍니다</li> <li>대시, 점프, E 키 조작이 필수적이기에 항상 화면에 보여줍니다.</li> <li>조이스틱을 보여줍니다..</li> </ol> | | PC | <br> <ol> <li>아이템 슬롯이 왼쪽 하단에 나옵니다. 단축키가 함께 보여 편하게 사용할 수 있습니다.</li> <li>대시는 이 게임에서 유용한 키이므로 단축키 shift와 함께 보여줍니다.</li> </ol>그 밖에 PC에서 점프는 모든 메이플스토리 월드에서 공통된 조작이기에 굳이 버튼을 보여주지 않습니다. | ##### 기본 UI를 가리지 않는 레이아웃 모든 월드의 화면 우측 상단에는 메이플스토리 월드 기본 UI가 있습니다. 기본 UI는 위치를 이동하거나 숨길 수 없습니다. 그러므로 기본 UI를 가리지 않도록 월드 UI를 디자인해야 합니다. | O | X | | :---: | :---: | | <br> |  | ##### 터치를 고려한 설계 버튼은 모바일 사용자가 터치할 때 불편하지 않은 크기로 설정해야 합니다. 영역이 너무 작으면 사용자가 터치하기 어렵기 때문입니다. 필수적인 것은 아니나, 일반적으로는 버튼 크기를 <span style="color: #dc9656">**80 X 80px**</span> 이상으로 설정하기를 권장합니다. 디자인 과정에서 권장 크기보다 작은 버튼을 제작했다면 미리 모바일 환경에서 불편하지 않은지 확인해 봅시다. 또한 버튼 간격도 중요합니다. 버튼 간격이 적당히 떨어져 있어야 다른 버튼을 터치할 때 간섭이 없습니다. 손가락 터치를 고려하여 터치 영역 및 여백을 조절해 봅시다. > <span style="color: #585858">**더 알아보기** >  > 월드 우측 상단의 기본 UI 버튼 크기가 80 X 80px입니다. UI 디자인할 때 참고 바랍니다.</span> # 가독성 ##### 폰트 크기 모바일 환경을 고려했을 때 일반적인 폰트 크기는 <span style="color: #dc9656">**24pt**</span> 이상으로 설정하기를 권장합니다. 물론 RPG처럼 유저에게 보여줄 정보량이 많은 월드라면 더 작은 크기를 사용하기도 합니다. 하지만 글씨가 너무 작으면 가독성이 떨어진다는 점을 고려해야 합니다. 그러므로 폰트 크기를 줄여야 하는 상황일지라도 <span style="color: #dc9656">**최소 18pt**</span> 이상으로 설정하는 것이 좋습니다. 월드를 제작할 때 PC나 모바일 환경에서 가독성을 확인하며 만들기를 권장합니다. > <span style="color: #585858">**더 알아보기** >  > <광부 시뮬레이터>의 상점 카테고리 설명 폰트 크기가 24pt입니다. 폰트 설정할 때 참고 바랍니다.</span> ##### 대비 텍스트와 배경 색상의 대비를 명확하게 하여 텍스트가 선명하게 보이도록 합니다. | O | X | | :---: | :---: | |  |  | # 일관성 일관성 있는 UI 디자인은 유저가 월드 플레이 방식을 보다 빠르게 이해하고 즐길 수 있도록 도와줍니다. 이러한 UI 디자인을 위해 아래 사항을 참고해 봅시다. ##### 색상 팔레트 UI에서 사용할 색상 팔레트를 결정하고 일관되게 사용해 봅시다. 너무 많은 색상을 사용하면 UI가 지저분해지고 해당 색상이 무엇을 의미하는지도 알 수 없게 됩니다. 해당 월드 UI에서 사용할 몇 가지 색상을 정하고, 비슷한 기능을 하는 요소는 같은 색상을 사용하여 일관성을 유지하는 것이 좋습니다. 예를 들어, [예] 또는 [확인] 버튼에 파란색을 사용하기로 했다면 해당 월드 내에서는 계속 해당 버튼을 파란색으로 설정하도록 합니다. ##### 아이콘 일관된 아이콘을 사용하여 유저가 버튼이나 메뉴 같은 UI 요소를 쉽게 인지하고 사용하도록 합니다. ##### 텍스트 서식 UI에서 사용하는 텍스트 요소의 크기, 폰트, 굵기 같은 서식을 일관되게 사용하는 것이 좋습니다. 중요도 단계를 나눈 뒤, 단계별 텍스트 사이즈를 정하고, 같은 중요도를 가진 텍스트의 크기 및 서식을 통일합니다. ##### 이미지 서식 텍스트 서식을 통일하는 것과 유사한 개념입니다. 정보의 종류 및 중요도에 따라 이미지 크기, 테두리, 그림자 같은 서식을 통일하는 것이 좋습니다. ##### 버튼 같은 비중을 가진 버튼은 같은 크기를 사용하는 것이 좋습니다. 또한 비슷한 기능을 하는 버튼은 같은 방향에 배치합니다. "예", "확인" 같은 긍정적 버튼을 오른쪽에, "아니오", "취소" 같은 부정적 버튼을 왼쪽에 두기로 했다면 방향 일관성을 유지해야 합니다. ##### 애니메이션 애니메이션 효과를 일관되게 사용하여 UI 내에서 전환 및 상호작용 경험을 일관성 있게 만듭니다. # 그 밖의 디자인 팁 ### 기준 해상도 1920 X 1080 해상도 기준으로 작업하기를 권장합니다. ### 유저 리소스 크리에이터는 자신이 제작한 UI 리소스를 Resource Storage에 등록하여 사용할 수 있습니다. UI 리소스를 등록할 때 아래 내용을 참고하기 바랍니다. ##### 리소스 최적화 Resource Storage에 등록할 스프라이트의 가로, 세로 길이를 4의 배수로 맞추면 업로드할 때 자동 최적화되어 용량이 작아집니다. 예를 들어 가로 2000px, 세로 2000px인 스프라이트는 가로, 세로 길이가 모두 4의 배수이므로 업로드할 때 자동으로 최적화됩니다. ##### 필터 모드 설정 크리에이터가 등록한 리소스 세부 정보에서 필터 모드를 변경할 수 있습니다. UI 리소스는 주로 아래 2개 필터 중 적절한 것을 선택해 사용합니다. | 필터 모드 | 설명 | | --- | --- | | Point | 색을 선명하게 유지합니다. 스프라이트를 확대했을 때 색의 경계가 또렷하게 보입니다. <br>도트 이미지처럼 이미지 가장자리가 깔끔하게 떨어지는 리소스에서 주로 사용합니다. | | Bilinear | 특정 색과 주변 색을 섞어 부드럽게 표현합니다. <br>스프라이트를 확대했을 때 본래 스프라이트보다 색의 경계가 흐릿하게 보일 수 있습니다. | ### 폰트 메이플스토리 월드에서는 네 가지 폰트를 사용할 수 있습니다. | 폰트 | 예 | | --- | --- | | Default (Noto Sans) |  | | Maple |  | | Bazzi |  | | Football |  | Noto Sans 폰트는 언어별 호환성이 좋습니다. 글로벌 서비스를 위해 다양한 언어로 번역하는 상황을 고려한다면 Noto Sans를 사용하는 것이 좋습니다. Maple, Bazzi, Football 폰트는 한글 및 영어 사용에는 무리가 없으나 그 외 언어는 대응하지 못하므로 숫자나 영어로 보여줄 부분에만 사용하기를 권장합니다. ### 섬네일 이미지 사이즈를 16:9 비율로 제작합니다. 960 X 540px 사이즈로 제작하는 것을 권장합니다. ![thumbnail](https://mod-file.dn.nexoncdn.co.kr/bbs/168138308206981ffaf18bdae47138a452f4ff430dd64.png{"width":"600px"} "thumbnail") ### UI로 화면 전체 덮기 UI로 화면 전체를 덮을 때는 보통 **UITransformComponent**에서 UI가 화면 전체로 늘어나도록 설정하고 좌표를 (0, 0, 0, 0)으로 설정합니다.  하지만 이렇게 설정하면 일부 모바일 기기에서는 Safe Area에 밀려 여백이 생길 수 있습니다.  그러므로 좌표를 (-300, -300, -300, -300) 정도로 확장하면 불필요한 여백을 방지할 수 있습니다.