게임아카데미게임·웹툰·AI 진로 상담
UX는 화면의 생김새보다 플레이어가 겪는 흐름을 다룹니다. 처음 접속한 사람이 무엇을 눌러야 할지 헤매지 않는지, 원하는 메뉴까지 몇 번 만에 갈 수 있는지를…
등급 표시가 해결해야 하는 세 가지 문제
첫째는 속도입니다. 유저는 보상 화면이나 인벤토리를 보는 순간, 좋은 아이템이 있는지 바로 알고 싶어 합니다. 아이템 이름이나 능력치를 읽기 전에 등급이 먼저 눈에 들어와야 합니다.
둘째는 크기입니다. 모바일 게임의 인벤토리 슬롯은 손가락 하나 크기 정도로 작습니다. 이 안에 아이콘, 강화 수치, 개수, 잠금 표시까지 들어가므로, 등급 표시는 아이콘을 가리지 않으면서도 분명해야 합니다.
셋째는 접근성입니다. 색 구분이 어려운 유저에게는 초록과 빨강, 파랑과 보라처럼 색만 다른 등급이 같아 보일 수 있습니다. 밝은 야외에서 화면을 보거나 화면 밝기를 낮춘 상황에서도 비슷한 문제가 생깁니다. 그래서 색 외에 모양으로도 구분되는 장치가 필요합니다.
등급을 구분하는 여러 겹의 표현 수단
| 표현 수단 | 역할 | 설계할 때 주의점 |
|---|---|---|
| 테두리 색 | 가장 빠른 1차 구분 | 등급 간 명도 차이도 함께 둘 것 |
| 테두리 두께·장식 | 색 없이도 높낮이 전달 | 높은 등급일수록 장식을 하나씩 추가 |
| 슬롯 배경 | 넓은 면적으로 등급 분위기 전달 | 아이콘과 대비가 무너지지 않게 |
| 빛·반짝임 효과 | 최상위 등급 강조 | 남발하면 화면이 산만해짐 |
| 등급 글자·기호 | 확실한 정보 전달 | 상세 창이나 툴팁에 함께 표기 |
이 수단들은 등급이 올라갈수록 하나씩 더해지는 방식이 효과적입니다. 낮은 등급은 단순한 얇은 테두리만, 중간 등급은 색이 들어간 테두리와 배경, 높은 등급은 장식이 붙은 테두리, 최상위 등급은 여기에 은은한 빛 효과까지 더하는 식입니다. 이렇게 하면 흑백으로 봐도 정보량의 차이로 등급의 높낮이가 읽힙니다.
색 체계를 정하는 순서
- 게임에 필요한 등급 수를 기획과 확정합니다. 등급이 많을수록 구분이 어려워집니다.
- 장르에서 유저가 익숙한 색 관례가 있는지 조사합니다.
- 등급마다 색상을 정하되, 낮은 등급에서 높은 등급으로 갈수록 채도나 명도가 점점 올라가게 배열합니다.
- 게임 배경과 UI 기본 색 위에 올려 보고 묻히는 색이 없는지 확인합니다.
- 흑백 변환과 색각 시뮬레이션으로 인접 등급이 구분되는지 점검합니다.
많은 게임에서 회색이나 흰색을 일반 등급, 초록과 파랑을 중간 등급, 보라와 주황·금색을 높은 등급에 쓰는 관례가 있습니다. 이 관례를 따르면 유저가 따로 배우지 않아도 등급을 짐작할 수 있다는 장점이 있습니다. 다만 게임의 세계관이나 기존 UI 색과 충돌한다면 그대로 따를 필요는 없고, 대신 튜토리얼이나 도감에서 등급 순서를 분명히 보여 줘야 합니다.
주의할 점은 UI의 다른 의미와 겹치지 않게 하는 것입니다. 빨간색을 최상위 등급에 쓰면서 동시에 경고나 오류 표시에도 쓰면, 유저는 좋은 아이템을 보고도 무언가 잘못됐다고 느낄 수 있습니다.
화면마다 등급 표시를 일관되게 유지하기
등급 표시는 인벤토리 한 곳에서만 쓰이지 않습니다. 보상 팝업, 상점, 우편함, 채팅의 아이템 링크, 장비 상세 창, 뽑기 연출까지 아이템이 등장하는 모든 곳에서 같은 규칙이 지켜져야 합니다. 상점에서는 보라색이던 등급이 우편함에서는 파란 테두리로 보이면 유저는 혼란을 느낍니다.
그래서 등급 테두리와 배경은 크기별로 세트를 만들어 두는 것이 좋습니다. 큰 상세 창용, 기본 슬롯용, 채팅이나 목록에 쓰는 아주 작은 아이콘용으로 나누고, 작은 크기에서는 장식을 줄이고 색과 두께만 남기는 식으로 단순화 규칙을 정합니다. 글자로 아이템 이름을 표시할 때도 이름 글자색을 등급색과 맞추면 목록에서 구분이 쉬워집니다.
뽑기나 보상 연출에서는 등급이 공개되는 순간의 효과도 설계 대상입니다. 높은 등급일수록 빛이 강해지거나 연출이 길어지는 구조가 흔한데, 이때도 슬롯 테두리 규칙과 색이 일치해야 연출이 끝난 뒤 인벤토리로 넘어갔을 때 자연스럽습니다.
등급 UI에서 자주 보이는 실수
첫 번째는 높은 등급 테두리가 아이콘을 덮는 경우입니다. 장식을 화려하게 넣다 보면 테두리가 슬롯 안쪽까지 파고들어 정작 아이템 그림이 작아집니다. 장식은 슬롯 바깥쪽이나 모서리에만 두고, 아이콘이 들어가는 안쪽 영역은 등급과 상관없이 같은 크기로 유지하세요.
두 번째는 모든 등급에 효과를 넣는 경우입니다. 중간 등급부터 반짝임이 들어가면 인벤토리 전체가 번쩍거려 오히려 최상위 등급이 묻힙니다. 움직이는 효과는 가장 높은 한두 등급에만 아껴 쓰는 편이 강조 효과가 큽니다.
세 번째는 배경 색을 너무 진하게 쓰는 경우입니다. 슬롯 배경이 진한 보라나 주황이면 비슷한 색의 아이콘이 배경에 녹아 버립니다. 배경은 등급 분위기만 살짝 전하는 정도로 채도를 낮추고, 아이콘과의 명도 대비를 먼저 확보하는 것이 안전합니다.
포트폴리오에서 등급 UI를 보여 주는 법
등급 UI는 작은 요소지만 설계 의도를 보여 주기 좋은 주제입니다. 같은 아이콘 하나를 놓고 등급별 슬롯을 나란히 배치한 표, 흑백 변환 버전, 크기별 단순화 버전을 한 장에 정리하면 접근성과 일관성까지 고민했다는 것이 드러납니다.
- 등급별 슬롯을 같은 아이콘으로 나란히 비교한 시트
- 흑백과 색각 시뮬레이션 결과로 구분이 유지되는지 보여 주는 이미지
- 인벤토리, 보상 팝업, 상점에 같은 규칙을 적용한 화면 예시
- 왜 이 색과 장식 순서를 골랐는지 짧은 설명
기존 게임의 등급 UI를 분석해 장단점을 적고, 자신의 창작 UI에서 어떻게 개선했는지 연결하면 더 설득력이 생깁니다. 지금 만든 슬롯 디자인이 작은 화면에서도 잘 구분되는지 객관적인 의견이 필요하다면, SBS아카데미게임학원 게임UIUX 과정 상담에서 실제 모바일 크기로 띄워 보며 점검받을 수 있습니다.
자주 묻는 질문
등급은 몇 단계가 적당한가요?
게임의 성장 구조에 따라 다르지만, 단계가 많아질수록 색만으로 구분하기 어려워집니다. 단계가 많다면 테두리 장식이나 숫자·기호 같은 보조 표시를 반드시 함께 설계하세요.
같은 등급 안에서도 강화 단계를 표시해야 할 때는 어떻게 하나요?
등급은 테두리와 색으로, 강화 단계는 슬롯 모서리의 숫자나 작은 별 표시처럼 다른 수단으로 나누면 두 정보가 섞이지 않습니다.
가까운 캠퍼스에서 게임 UI·UX 알아보기
사는 곳과 가까운 캠퍼스를 고르면 수업 내용, 오시는 길, 상담 신청을 한 번에 볼 수 있습니다.