컴팩트한 게임 인터페이스에서 펫 컨트롤과 캐릭터를 가리지 않고 배치하는 방법

플레이어가 메인 플레이 루프 동안 필요로 하는 정보와 액션을 나열해 보세요. 1차적으로 펫, 먹이 주기나 놀아주기 같은 하나의 기본 액션, 그리고 해당 액션이 가능한지 명확히 알려주는 컴팩트한 표시기 정도를 포함하는 것이 유용할 수 있습니다. 설정, 도감(컬렉션), 덜 자주 사용하는 액션은 보조 메뉴나 간결한 컨텍스트 패널로 옮기세요. 이는 디자인 방식일 뿐 절대적인 규칙은 아닙니다. 여러 액션 중에서 선택하는 것이 핵심 과제인 게임이라면 한 번에 더 많은 컨트롤이 보여야 할 수도 있습니다.

컨트롤을 배치하기 전에 먼저 캐릭터를 위한 시각적 영역을 명확히 확보하세요. 실루엣과 표정 등 필수적인 부분은 가려지지 않게 유지하고, 그 위에 버튼이나 레이블을 올려두지 마세요. 액션을 위해 펫을 직접 터치해야 한다면 해당 인터랙션 영역을 가리지 않은 상태로 두어야 합니다. 컨트롤이 게임 화면 위에 얹히는 형태라면 플레이어가 보아야 하는 캐릭터의 일부를 덮지 않도록 하세요. Apple의 게임 컨트롤 가이드라인에서는 게임 오브젝트와의 직접적인 상호작용으로 대체할 수 있는 경우 가상 컨트롤을 줄일 것을 권장합니다(Game controls).

자주 사용하는 액션은 손이 닿기 쉬운 곳에 모아두고, 보조 액션은 더 멀리 두거나 메뉴 안으로 숨기세요. 터치스크린에서는 플레이어의 손이 펫을 가리는 위치에 버튼이 밀집되지 않도록 주의해야 합니다. Apple은 자주 사용하는 터치 컨트롤은 엄지손가락 근처에, 보조 컨트롤은 화면 상단 근처에 배치할 것을 권장하며, 편안한 터치 반경과 기기 경계선을 고려해야 한다고 명시합니다. 이를 모든 게임을 위한 고정된 레이아웃이 아니라, 대상 기기와 화면 방향에서 테스트해 보기 위한 출발점으로 활용하세요.

실제 터치 타깃 영역까지 함께 줄이지 않으면서도 표시되는 아이콘은 작고 간결하게 만드세요. Apple은 자사 플랫폼에서 자주 사용하는 컨트롤은 최소 44x44 pt, 덜 중요한 컨트롤은 28x28 pt를 권장합니다. Android는 상호작용 가능한 터치 타깃으로 최소 48x48 dp를 권장합니다. 이는 플랫폼별 측정 단위이므로 숫자를 상호 호환되는 것으로 취급하지 말고 해당 플랫폼의 단위와 가이드라인을 따르세요(Apple 게임 컨트롤, Android 접근성 가이드라인). 특히 두 액션의 결과가 서로 다를 때는 잘못된 탭을 방지할 수 있도록 충분한 간격을 두세요.

펫이 기술적으로는 화면에 나와 있더라도 컨트롤, 레이블 또는 장식용 패널과 시각적으로 경쟁하게 되면 눈에 잘 띄지 않을 수 있습니다. 작은 아이콘, 짧은 레이블, 필요한 공간만 차지하는 패널 등 보조 인터페이스 요소의 시각적 비중을 절제하여 사용하세요. 가장 중요한 액션이 진행되는 동안에는 캐릭터의 얼굴과 기타 중요한 디테일이 선명하게 보이도록 유지해야 합니다. 텍스트나 아이콘 뒤의 게임 배경이 바뀌는 경우, 불투명한 큰 패널을 덧대지 않고도 인터페이스를 읽을 수 있도록 은은한 배경 깔기나 외곽선 처리를 고려해 보세요.

장면의 밝은 부분과 어두운 부분 모두에서 텍스트와 아이콘을 확인하세요. 한 가지 배경에서 잘 작동하던 대비가 펫이 움직이거나 장면이 전환되면서 사라질 수 있습니다. 텍스트의 경우, W3C의 WCAG 가이드라인은 일반 크기 텍스트에 4.5:1, 큰 텍스트에 3:1의 명도 대비 비율을 설정하고 있습니다. WCAG는 게임 전용 규칙이라기보다는 웹 콘텐츠 가이드라인이지만, 가변적인 배경 위에서 인터페이스 텍스트를 검토할 때 유용한 기준이 될 수 있습니다(W3C 대비 가이드라인). 이용할 수 없는 액션을 알릴 때 색상에만 의존하지 말고 레이블, 모양 또는 상태도 시각적으로 변경하세요.

상시 노출되는 컨트롤이 공간을 너무 많이 차지한다면, 플레이어가 메뉴를 열거나 펫을 선택했을 때 선택적 액션이 나타나도록 하세요. 현재 상태에서 사용할 수 없는 액션은 숨기고, 컨트롤을 눌렀을 때는 명확한 상태 변화를 보여주어야 합니다. Apple은 특히 관련 없는 컨트롤을 숨기고 활성 컨트롤을 더 눈에 띄게 만드는 등, 게임플레이 맥락에 맞추어 표시되는 가상 컨트롤을 조정할 것을 권장합니다. 기본 액션은 그대로 유지하고, 선택 후 닫히는 작은 메뉴를 통해 관련 선택지를 표시하는 것이 실용적인 패턴입니다.

상태 변화는 예측 가능하도록 유지하세요. 플레이어가 컨트롤을 사용하려던 순간 사라져 버리면 혼란을 초래할 수 있으므로, 숨기기/표시 동작은 현재 상태를 통해 이용 가능 여부가 명확한 액션에만 적용하세요. 버튼이 비활성화되면 해당 상태를 표시하고, 필요한 경우 무엇이 변경되었는지 간단히 설명해 주세요. 확장되는 메뉴가 펫의 얼굴이나 플레이어가 다음에 탭해야 하는 영역을 가리지 않도록 하세요.

단순히 화면의 외부 직사각형뿐만 아니라 실제 사용 가능한 영역을 기준으로 디자인하세요. 노치, 카메라 컷아웃, 시스템 바, 제스처 영역은 가장자리 근처의 중요한 컨트롤과 겹칠 수 있습니다. Apple의 레이아웃 가이드라인은 안전 영역(Safe Area)을 인터페이스 요소 및 기기 특성으로부터 콘텐츠를 보호하는 데 도움이 되는 영역으로 정의합니다. Android 역시 시스템 바, 제스처 및 디스플레이 컷아웃 인셋을 준수하고 중요한 컨트롤은 컷아웃에서 멀리 떨어뜨릴 것을 권장합니다(Apple 레이아웃 가이드라인, Android 전체 화면(edge-to-edge) 가이드라인). 대화형 요소는 인셋 안쪽에 유지하면서 배경 아트는 가장자리까지 확장할 수 있습니다.

하나의 컴팩트한 배치가 모든 화면 비율에 들어맞을 것이라고 가정하지 마세요. 컨트롤을 사용 가능한 영역에 고정하고, 사용 가능한 너비가 변경될 때 간격이나 그룹화가 이에 맞춰 조정되도록 하세요. Unity용 Android 게임 가이드라인에서는 안전 영역 API를 사용하고 다양한 디스플레이 크기와 화면 비율을 지원할 것을 권장합니다. 세로 또는 가로 레이아웃은 게임이 지원하는 경우에만 테스트하고, 지원 범위에 포함된다면 화면 회전, 창 크기 조정 또는 기기를 접는 동작 후에도 다시 확인하세요(대형 화면 Unity 게임을 위한 Android 가이드라인).

정적인 목업으로는 실제 사용할 때 플레이어의 손가락이 어느 영역을 가리는지 확인할 수 없습니다. 의도한 실제 화면 크기에서 인터페이스를 검토한 다음, 캐릭터의 디테일이 가려지는지, 탭 실수가 발생하는지, 컨트롤이 시스템 기능과 겹치는지 살펴보면서 주요 액션을 시험해 보세요. 지원하는 가장 작은 디스플레이와 더 넓거나 긴 화면 비율에서도 확인 작업을 반복하세요. 가능하다면 해당 레이아웃에 익숙하지 않은 사람에게 주요 작업을 수행해 보도록 요청하고, 어디를 탭하는지, 망설이는지, 펫을 시야에서 놓치는지 관찰해 보세요.

지원하는 각 레이아웃에 대해 간단한 합격/불합격 체크리스트를 활용해 보세요:

• 메인 액션 중에도 펫의 얼굴이나 기타 필수적인 디테일을 포함해 펫이 잘 보이는가?

• 기본 액션에 손이 쉽게 닿고, 명확한 눌림 상태가 제공되며, 다른 타깃과 겹치지 않는가?

• 시시각각 변하는 장면 배경 속에서도 레이블과 중요한 상태 신호가 잘 읽히는가?

• 컷아웃, 시스템 바 또는 제스처 영역 아래에 놓인 필수 컨트롤이 없는가?

• 보조 컨트롤을 열었을 때 다음 단계에 필요한 캐릭터의 일부나 플레이 영역을 가리지 않는가?

체크 항목 중 통과하지 못한 것이 있다면 한 번에 하나씩 변경해 보세요. 우선순위가 낮은 요소를 제거하거나, 안전 인셋을 지키면서 컨트롤을 플레이 영역 가장자리로 옮기거나, 보조 액션은 필요할 때만 표시하도록 합니다. 그런 다음 동일한 인터랙션을 다시 테스트해 보세요. 이렇게 하면 수정 사항이 시인성 문제를 실제로 해결했는지, 아니면 단순히 문제를 다른 곳으로 옮겨 놓기만 했는지 쉽게 파악할 수 있습니다.

• Apple Developer, Game controls

• Apple Developer, Layout

• Android Developers, 앱의 접근성 향상

• Android Developers, 전체 화면 디자인

• Android Developers, 모든 폼 팩터에서 멋진 Unity 게임 제작하기

• W3C Web Accessibility Initiative, Understanding Success Criterion 1.4.3: Contrast (Minimum)