UI 디자인 시안에서 자주 놓치는 가독성 문제

이 글과 연결된 과정게임 UI·UX 과정 알아보기

게임 UI는 플레이어가 게임과 대화하는 창구입니다. 체력 바, 인벤토리, 상점 화면처럼 매 순간 보는 요소들이 한눈에 읽히지 않으면 아무리 재미있는 게임도 불…

단색 배경에서만 확인해 대비가 무너지는 문제

UI 시안을 단색 배경 위에서 만들면 글자와 배경의 대비가 충분해 보입니다. 하지만 게임에서는 HUD가 밝은 하늘, 어두운 동굴, 이펙트가 터지는 전투 장면 위에 계속 겹쳐 나옵니다. 흰 글자는 눈 덮인 맵에서 사라지고, 얇은 테두리는 화려한 스킬 이펙트 사이에서 보이지 않습니다.

고치는 법은 시안 단계에서 실제 게임 스크린샷이나 비슷한 분위기의 배경 이미지를 여러 장 깔아 두고 확인하는 것입니다. 가장 밝은 장면과 가장 어두운 장면, 가장 복잡한 장면 세 가지 위에서 모두 읽히는지 보세요. 부족하다면 글자에 외곽선이나 그림자를 넣거나, 글자 뒤에 반투명 바탕을 깔아 배경과 분리합니다. 이때 효과가 너무 두꺼우면 글자가 뭉개 보이니 크기를 줄여 가며 적당한 지점을 찾습니다.

큰 모니터에서만 보고 글자 크기를 정하는 문제

디자인 툴에서 화면을 확대해 작업하면 작은 글자도 또렷하게 보입니다. 그런데 모바일 게임은 손바닥만 한 화면에서, 그것도 팔을 뻗은 거리에서 봅니다. 시안에서 적당해 보이던 설명 문구와 수치가 실제 기기에서는 눈을 찡그려야 읽힐 정도로 작아지는 경우가 많습니다.

시안을 실제 기기로 옮겨 원래 크기로 보는 것이 가장 정확합니다. 가능하면 화면 크기가 다른 기기 두세 대에서 확인하세요. 화면이 작은 기기와 가로로 긴 기기에서 UI 배치가 함께 버티는지 봐야 합니다. 휴대폰 미리보기 기능을 쓰거나, 이미지를 기기로 보내 전체 화면으로 띄워 보세요. PC나 콘솔 게임이라면 실제 모니터 해상도와 앉는 거리를 생각해야 합니다. 거실 TV로 하는 콘솔 게임은 멀리서 보기 때문에 PC보다 글자를 크게 잡아야 합니다. 화면 가장자리의 노치나 둥근 모서리에 UI가 가려지지 않는지도 함께 확인합니다.

모든 것을 강조해 아무것도 눈에 띄지 않는 문제

중요해 보이는 정보마다 큰 글자, 강한 색, 반짝이는 효과를 넣으면 화면 전체가 소리를 지르는 상태가 됩니다. 유저는 어디부터 봐야 할지 몰라 정작 중요한 정보를 놓칩니다. 가독성은 글자 하나하나를 읽을 수 있느냐만이 아니라, 정보의 순서가 한눈에 읽히느냐의 문제이기도 합니다.

• 화면마다 가장 먼저 봐야 할 정보 하나를 정하고 그것만 가장 강하게
• 두 번째, 세 번째 정보는 크기와 밝기를 단계적으로 낮추기
• 강조 색은 몇 가지로 제한하고 의미를 정해 일관되게 쓰기
• 장식용 테두리와 그라데이션은 정보 구분에 도움이 될 때만

점검할 때는 시안을 흐릿하게 만들거나 멀리서 봐 보세요. 흐려진 상태에서 가장 먼저 눈에 들어오는 덩어리가 내가 의도한 정보인지 확인하면 위계가 맞게 잡혔는지 알 수 있습니다.

색만으로 상태를 구분하는 문제

아이템 등급, 버튼의 활성과 비활성, 아군과 적군을 색으로만 구분하면 색을 구분하기 어려운 유저는 정보를 잃습니다. 특히 빨강과 초록을 함께 쓰는 구분은 헷갈리는 경우가 많습니다.색각 이상이 아니더라도 화면이 어둡거나 밝은 환경에서 게임을 하면 비슷한 색은 쉽게 헷갈립니다.

색과 함께 모양, 아이콘, 테두리 두께, 글자 표시를 함께 쓰세요. 예를 들어 비활성 버튼은 색을 흐리게 하는 동시에 잠금 아이콘을 넣고, 등급은 색과 함께 테두리 장식이나 등급 글자를 다르게 합니다. 시안을 흑백으로 바꿔 보면 색에만 의존한 구분이 바로 드러납니다. 흑백에서도 상태가 구분된다면 대부분의 상황에서 안전합니다. 게임 옵션에 색 보정 기능을 넣는 경우도 있지만, 기본 화면에서 구분되게 만드는 것이 먼저입니다.

가짜 데이터로 만들어 실제 텍스트를 버티지 못하는 문제

시안에 '아이템 이름', '100' 같은 짧은 예시 텍스트만 넣으면 모든 칸이 깔끔해 보입니다. 하지만 실제 게임에는 긴 아이템 이름, 여러 자리 수의 재화, 긴 닉네임, 그리고 다른 언어로 번역된 문구가 들어갑니다. 글자가 칸을 넘어 잘리거나 줄이 바뀌면서 레이아웃이 무너집니다. 시안 단계에서는 문제가 보이지 않다가 개발 막바지에 실제 데이터가 들어가면서 한꺼번에 터지는 경우가 많습니다. 그때는 이미 다른 화면과 연결되어 있어 고치기 어렵습니다. 처음부터 기획자에게 실제로 들어갈 이름 목록이나 수치 범위를 받아 시안에 넣어 보는 것이 가장 확실합니다.

1. 가장 긴 이름과 가장 짧은 이름을 넣어 두 경우 모두 확인
2. 재화와 데미지 숫자는 자릿수가 크게 늘어난 경우까지 넣어 보기
3. 큰 숫자는 자릿수 구분 기호나 단위 축약 규칙을 정해 두기
4. 번역을 고려한다면 문구가 길어질 여유 공간 남기기
5. 넘칠 때 줄임표로 자를지, 글자를 줄일지 규칙 정하기

가독성 점검을 작업 순서에 넣기

가독성 문제는 시안이 거의 완성된 뒤에 발견하면 고치는 비용이 큽니다. 처음 레이아웃을 잡을 때부터 실제 배경, 실제 기기, 실제 데이터, 흑백 확인을 짧게라도 반복하면 마지막에 크게 뜯어고칠 일이 줄어듭니다. 포트폴리오에 UI 작업을 넣을 때도 이런 점검 과정을 함께 보여 주면, 보기 좋은 화면을 넘어 쓰기 좋은 화면을 고민하는 디자이너라는 점이 전달됩니다.

내 시안이 실제 게임에서 어떻게 보일지 판단이 서지 않는다면, SBS아카데미게임학원 게임 UI/UX 과정 상담에서 지금 만든 화면을 함께 보며 가독성과 정보 위계를 점검하는 방법을 이야기해 보세요.

자주 묻는 질문

가까운 캠퍼스에서 게임 UI·UX 알아보기

사는 곳과 가까운 캠퍼스를 고르면 수업 내용, 오시는 길, 상담 신청을 한 번에 볼 수 있습니다.

함께 읽으면 좋은 글