모바일 게임에서 가상키보드는 닉네임 입력, 채팅, 검색 등 다양한 상황에서 필수적이며, 가로모드 설정은 액션·레이싱 장르에서 몰입감을 높이는 핵심 요소입니다. 작성 시점 기준 대부분의 캐주얼 게임은 세로 고정 방식을 채택하지만, 일부 장르에서는 가로모드 전환 시 UI 재배치와 입력 인터페이스 최적화가 필수입니다. 이번 글에서는 Unity와 Unreal Engine 환경에서 가상키보드와 가로모드를 구현하는 구체적인 방법과 플레이어 경험을 개선하는 실무 노하우를 다룹니다.
가상키보드 활성화 기본 원리
모바일 OS는 터치 입력을 감지해 자동으로 가상키보드를 표시하지만, 게임 엔진에서는 명시적으로 키보드를 호출해야 합니다. Unity의 경우 TouchScreenKeyboard API를 사용하며, Unreal Engine은 UMG 위젯과 Platform Input을 조합합니다. 일반적으로 InputField 또는 TextBox 위젯을 터치하면 OnClick 이벤트가 발생하고, 이때 시스템 키보드를 활성화하는 함수를 호출합니다. 중요한 점은 iOS와 Android가 키보드 높이와 레이아웃을 다르게 처리하므로, 화면 하단 여백을 동적으로 계산해 UI가 키보드에 가려지지 않도록 조정해야 합니다.
Unity에서는 TouchScreenKeyboard.Open() 메서드에 초기 텍스트, 키보드 타입(기본·숫자·이메일 등), 자동 대문자 활성화 여부를 파라미터로 전달합니다. 예를 들어 닉네임 입력창에서는 TouchScreenKeyboard.Open("", TouchScreenKeyboardType.Default, false, false, false)로 호출하고, 키보드가 활성화되는 동안 TouchScreenKeyboard.area.height 값을 읽어 UI Canvas의 Y 오프셋을 조정합니다. Unreal Engine은 UWidgetBlueprintLibrary::SetInputMode_UIOnlyEx()로 입력 모드를 전환한 뒤, IVirtualKeyboardEntry 인터페이스를 구현한 위젯에서 SetKeyboardFocus()를 호출합니다.
실무에서 자주 발생하는 문제는 키보드 표시 지연과 화면 영역 계산 오차입니다. iOS는 키보드 애니메이션이 0.25초 소요되므로, UI 재배치 로직을 코루틴이나 Delay 노드로 감싸 애니메이션 완료 후 실행해야 깜빡임 없이 자연스럽게 전환됩니다. Android는 기기별로 네비게이션 바 높이가 달라 Screen.safeArea 값을 참조해 실제 사용 가능한 화면 영역을 계산해야 합니다. 아래 표는 주요 엔진별 키보드 활성화 API를 정리한 것입니다.
| 엔진 | API 함수 | 키보드 타입 설정 | 높이 감지 방법 |
|---|---|---|---|
| Unity | TouchScreenKeyboard.Open() | TouchScreenKeyboardType 열거형 | TouchScreenKeyboard.area.height |
| Unreal Engine | SetKeyboardFocus() | IVirtualKeyboardEntry 인터페이스 | FSlateApplication::Get().GetVirtualKeyboardGeometry() |
| Cocos2d-x | TextFieldTTF::attachWithIME() | TextInputMode 플래그 | Director::getInstance()->getOpenGLView()->getFrameSize() |
가로모드 방향 전환 구현
가로모드는 게임 설정에서 Orientation을 LandscapeLeft 또는 LandscapeRight로 지정하거나, 센서 기반 자동 회전을 활성화해 구현합니다. Unity는 Player Settings → Resolution and Presentation → Orientation에서 AutoRotation을 체크하고 Landscape Left/Right를 허용하면, 기기를 회전할 때 자동으로 화면이 전환됩니다. Unreal Engine은 Project Settings → Platforms → iOS/Android → Orientation에서 Sensor Landscape를 선택하면 동일한 효과를 얻습니다. 중요한 점은 가로모드 전환 시 UI 앵커(Anchor)와 피벗(Pivot)을 재설정해야 버튼과 텍스트가 화면 모서리에 올바르게 정렬된다는 점입니다.
실무에서는 세로·가로 겸용 게임의 경우 Screen.orientation 이벤트를 구독해 방향 변경 시점을 감지하고, UI 레이아웃을 즉시 재계산합니다. 예를 들어 세로 모드에서 상단에 배치된 HP 바를 가로 모드에서는 좌측 상단으로 이동하고, 스킬 버튼은 우측 하단에 재배치하는 식입니다. Unity UI는 Canvas Scaler의 Reference Resolution을 기준으로 비율을 유지하므로, 세로(1080x1920)와 가로(1920x1080) 두 가지 프리셋을 준비하고 방향 전환 시 프리셋을 교체하는 방식이 효율적입니다. Unreal Engine은 OnOrientationChanged 델리게이트를 바인딩해 동일한 로직을 구현합니다.
가로모드에서 흔히 발생하는 문제는 노치(Notch)와 카메라 홀 영역 침범입니다. 작성 시점 기준 대부분의 플래그십 스마트폰은 전면 카메라 주변에 비표시 영역을 두므로, Screen.cutouts 또는 DisplayCutout API로 해당 영역 좌표를 읽어 UI가 가려지지 않도록 패딩을 추가해야 합니다. iOS는 safeAreaInsets를 사용하며, Android는 API 28 이상에서 WindowInsets.getDisplayCutout()을 호출합니다. Unity에서는 Screen.safeArea.xMin과 xMax 값을 RectTransform의 Left/Right 오프셋에 적용하면 자동으로 안전 영역 내부에 UI가 배치됩니다.
해상도 대응 전략
모바일 기기는 4:3부터 21:9까지 다양한 화면 비율을 사용하므로, UI가 모든 해상도에서 정상 작동하도록 Anchor Preset을 활용해야 합니다. Unity UI에서는 버튼을 화면 중앙에 고정할 때 Anchor를 Center로 설정하고, 상단 메뉴는 Top Stretch로 지정해 가로 길이가 자동 확장되도록 합니다. Unreal Engine은 UMG의 Canvas Panel에서 Anchors 속성을 조정하며, Desired on Screen 옵션을 활성화하면 디자이너가 지정한 픽셀 크기를 유지하면서도 비율에 따라 여백이 자동 조정됩니다.
실무에서는 Reference Resolution을 1080x1920으로 설정하고, Canvas Scaler의 Match를 0.5로 두어 가로·세로 비율 변화에 균형 있게 대응합니다. 극단적인 와이드 화면(예: 20:9)에서는 좌우 여백이 과도하게 늘어나므로, Max Width 제한을 두거나 배경 이미지를 Tiled 방식으로 반복 배치해 빈 공간을 채웁니다. 태블릿처럼 화면이 큰 기기에서는 폰트 크기와 버튼 간격을 동적으로 증가시켜 가독성을 높이는 것이 좋습니다. 아래 표는 주요 해상도별 권장 UI 스케일 설정입니다.
| 해상도 | 화면 비율 | Reference Match | 버튼 최소 크기(dp) |
|---|---|---|---|
| 1080x1920 | 9:16 | 0.5 | 48 |
| 1440x2960 | 9:18.5 | 0.6 | 52 |
| 1080x2340 | 9:19.5 | 0.55 | 50 |
| 1200x1920 | 10:16 | 0.4 | 56 |
가상키보드 UI 충돌 방지
가상키보드가 활성화되면 화면 하단 30~50%를 차지하므로, 입력 필드와 버튼이 가려지지 않도록 UI를 위로 이동해야 합니다. Unity에서는 TouchScreenKeyboard.area.height를 읽어 Canvas의 Y Position을 키보드 높이만큼 증가시키고, 키보드가 닫힐 때 원래 위치로 복원합니다. Unreal Engine은 FSlateApplication::Get().GetVirtualKeyboardGeometry()로 키보드 영역을 구한 뒤, Widget의 RenderTransform을 변경해 동일한 효과를 냅니다. 중요한 점은 키보드 표시 애니메이션과 UI 이동 애니메이션을 동기화해 부드럽게 전환되도록 Tween 라이브러리를 사용하는 것입니다.
실무에서는 ScrollView 내부에 입력 필드를 배치하고, 키보드 활성화 시 해당 필드가 화면 중앙에 오도록 자동 스크롤하는 방식을 많이 사용합니다. Unity의 ScrollRect는 ScrollTo() 메서드로 특정 RectTransform 위치로 이동할 수 있으며, Unreal Engine의 ScrollBox는 ScrollWidgetIntoView()를 호출합니다. 추가로 키보드 외부 영역을 터치하면 키보드를 자동으로 닫는 기능을 구현하면 사용자 편의성이 크게 향상됩니다. 이는 전체 화면을 덮는 투명 패널을 배치하고, OnClick 이벤트에서 TouchScreenKeyboard.hideInput = true를 호출하는 방식으로 구현합니다.
플랫폼별 차이점 대응
iOS와 Android는 가상키보드 동작 방식이 다릅니다. iOS는 키보드가 화면 위에 오버레이되며, UIKeyboardWillShowNotification을 통해 키보드 높이와 애니메이션 시간을 미리 알 수 있습니다. Unity iOS Native Plugin이나 직접 Objective-C 코드를 작성해 이 이벤트를 구독하고, 키보드 높이를 C# 스크립트로 전달하면 정확한 UI 조정이 가능합니다. Android는 adjustResize 또는 adjustPan 모드를 AndroidManifest.xml에 설정하며, adjustResize는 화면 크기를 줄이고 adjustPan은 화면을 위로 이동시킵니다. 게임에서는 일반적으로 adjustPan을 사용해 게임 뷰포트를 유지하면서 UI만 이동합니다.
플랫폼별 테스트에서 자주 발견되는 문제는 Android의 소프트 네비게이션 바 처리입니다. 일부 기기는 네비게이션 바를 숨길 수 있고, 일부는 항상 표시되므로 View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY 플래그로 전체 화면 모드를 강제하거나, 네비게이션 바 높이를 감지해 UI 하단 패딩을 추가해야 합니다. iOS는 홈 인디케이터가 하단에 고정되어 있으므로 safeAreaInsets.bottom 값만큼 여백을 두면 됩니다. 아래는 플랫폼별 권장 설정을 정리한 표입니다.
| 플랫폼 | 키보드 감지 API | 화면 조정 방식 | 안전 영역 처리 |
|---|---|---|---|
| iOS | UIKeyboardWillShowNotification | 오버레이(높이 동적) | safeAreaInsets |
| Android | OnGlobalLayoutListener | adjustPan/adjustResize | WindowInsets |
| Unity 공통 | TouchScreenKeyboard.area | Canvas 오프셋 | Screen.safeArea |
사용자 경험 최적화 팁
가상키보드와 가로모드 설정은 기술적 구현 외에도 사용자 경험 측면에서 최적화가 필요합니다. 첫째, 입력 필드에 포커스가 이동할 때 즉시 키보드를 표시하되, 게임 플레이 중에는 의도하지 않은 키보드 활성화를 방지하도록 InputField의 interactable 속성을 상황에 따라 제어합니다. 둘째, 가로모드 전환 시 화면 회전 애니메이션을 부드럽게 처리하기 위해 ScreenOrientation.AutoRotation과 함께 Screen.autorotateToLandscapeLeft/Right를 모두 활성화하고, 회전 중 로딩 인디케이터를 표시해 사용자에게 상태를 알립니다.
실무에서는 키보드 타입을 상황에 맞게 지정하는 것도 중요합니다. 닉네임 입력은 기본 키보드, 레벨 검색은 숫자 키보드, 친구 초대는 이메일 키보드를 사용하면 입력 단계를 줄여 편의성을 높입니다. 또한 키보드 상단에 완료·취소 버튼을 추가해 모바일 웹처럼 직관적인 인터페이스를 제공하면 좋습니다. 가로모드에서는 좌우 엄지손가락 영역에 주요 버튼을 배치하고, 화면 중앙은 콘텐츠 표시에 집중하는 레이아웃이 몰입도를 높입니다. 마지막으로 방향 전환 시 게임 일시정지 여부를 설정으로 제공하면, 사용자가 플레이 스타일에 맞게 조정할 수 있습니다.
자주 묻는 질문
❓ Unity에서 가상키보드 높이를 실시간으로 감지하는 방법은 무엇인가요?
TouchScreenKeyboard.area.height 속성을 Update() 함수에서 매 프레임 확인하고, 값이 변경되면 Canvas의 Y Position을 키보드 높이만큼 조정합니다. iOS는 0.25초 딜레이 후 최종 높이가 확정되므로 코루틴으로 애니메이션을 처리하는 것이 좋습니다.
❓ 가로모드 전환 시 UI가 늘어나거나 잘리는 현상을 해결하려면 어떻게 해야 하나요?
Canvas Scaler의 Reference Resolution을 가로·세로 두 가지로 준비하고, Screen.orientation 이벤트에서 방향에 맞는 프리셋을 적용합니다. 각 UI 요소는 Anchor Preset을 Center, Top Stretch 등으로 명확히 지정해 비율 변화에 대응하도록 설정합니다.
❓ Android에서 소프트 네비게이션 바 때문에 UI가 가려지는데 해결 방법이 있나요?
AndroidManifest.xml에 android:windowSoftInputMode를 adjustPan으로 설정하고, Screen.safeArea 값을 읽어 UI 하단 패딩을 추가합니다. 또는 SYSTEM_UI_FLAG_IMMERSIVE_STICKY 플래그로 전체 화면 모드를 강제해 네비게이션 바를 숨길 수 있습니다.
❓ 키보드가 닫힐 때 UI를 원래 위치로 복원하려면 어떤 이벤트를 사용하나요?
TouchScreenKeyboard.visible 속성이 false로 변경되는 시점을 Update()에서 감지하거나, iOS는 UIKeyboardWillHideNotification을 구독해 키보드 닫힘 이벤트를 받습니다. 이때 Canvas Position을 0으로 되돌리는 Tween 애니메이션을 실행합니다.
❓ 가로모드 전용 게임에서 세로 방향 회전을 완전히 막으려면 어떻게 설정하나요?
Unity Player Settings에서 AutoRotation을 해제하고 Orientation을 LandscapeLeft만 선택하거나, 코드에서 Screen.orientation = ScreenOrientation.LandscapeLeft로 고정합니다. Unreal Engine은 Project Settings의 Orientation을 Landscape로 지정하면 세로 회전이 비활성화됩니다.
가상키보드와 가로모드 설정은 모바일 게임의 입력 환경을 결정하는 핵심 요소이며, 플랫폼별 차이와 해상도 다양성을 고려한 세심한 구현이 필수입니다. Unity와 Unreal Engine 모두 기본 API를 제공하지만, 실무에서는 키보드 높이 감지, UI 재배치, 안전 영역 처리 등 추가 로직을 구현해야 모든 기기에서 일관된 사용자 경험을 제공할 수 있습니다. 방향 전환 시 UI 앵커 설정과 해상도 대응 전략을 미리 수립하고, 실제 기기에서 충분히 테스트하면 출시 후 발생할 수 있는 UI 오류를 최소화할 수 있습니다.