선택 버튼, 자막, 카운트다운이 장면을 가리지 않게 하는 법: 가로·세로 화면 인터랙션 가이드
인터랙티브 영상 게임의 인터페이스는 영상 위에 덧씌우는 겉치장이 아니라 숏 구도의 일부다. 선택지, 자막, 카운트다운, 시스템 알림은 안전 영역과 우선순위를 공유해야 하며, 가로 화면, 세로 화면, TV 원거리 시청, 모바일 터치 조작을 각각 검증해야 한다. 목표는 UI를 최대한 눈에 띄지 않게 만드는 것이 아니라, 플레이어가 이야기와 조작 사이에서 주의를 빼앗기지 않게 하는 것이다.

들어가며
인터랙티브 영상 게임의 인터페이스는 영상 위에 덧씌우는 겉치장이 아니라 숏 구도의 일부다. 선택지, 자막, 카운트다운, 시스템 알림은 안전 영역과 우선순위를 공유해야 하며, 가로 화면, 세로 화면, TV 원거리 시청, 모바일 터치 조작을 각각 검증해야 한다. 목표는 UI를 최대한 눈에 띄지 않게 만드는 것이 아니라, 플레이어가 이야기와 조작 사이에서 주의를 빼앗기지 않게 하는 것이다.
먼저 정보의 우선순위를 정한다
중요한 이야기 자막은 장식보다, 현재 선택지는 부차적인 알림보다, 긴급한 시스템 오류는 카운트다운 애니메이션보다 우선한다. 한 시점에 어떤 레이어까지 함께 표시할 수 있는지 정한다. 중요한 대사 한 줄, 버튼 네 개, 타이머 링, 튜토리얼이 동시에 나타난다면 모든 글자를 줄이는 대신 진행 속도를 조정한다.
선택지가 나타나기 전에 앞선 자막을 끝까지 읽을 시간을 준다. 선택을 제출한 뒤에는 선택된 상태를 잠시 유지해 조작을 확인해 주되, 인물의 첫 반응을 가리지 않는다.
안전 영역은 실제 화면에서 나온다
감독과 촬영감독이 스토리보드 단계에서 얼굴, 입, 손, 핵심 소품, 동작 영역을 표시하고, UI는 그다음에 사용할 수 있는 영역을 정의한다. 고정된 하단 바가 반드시 안전한 것은 아니다. 휴대전화, 증거, 자막이 화면 아래쪽에 놓이는 경우가 많다. 숏에 따라 상하좌우 배치를 선택할 수 있지만, 변화에는 일관된 규칙이 있어야 하며 플레이어가 매번 버튼을 찾아야 해서는 안 된다.
가로 화면과 세로 화면은 단순한 크롭 관계가 아니다. 세로 화면에서는 구도를 다시 잡고, 버튼을 쌓는 방식과 자막의 줄 너비를 조정해야 할 수 있다. 핵심 화면을 두 형식에 모두 맞출 수 없다면, 알아보기 어려울 정도로 자동 축소하는 대신 별도로 구도를 잡은 버전을 출력해야 한다.
선택지 문구와 터치 대상을 함께 설계한다
각 버튼은 하나의 명확한 의도를 표현하며, 길이와 줄바꿈을 관리한다. 언어에 따라 텍스트가 길어지므로, 컨테이너는 글자 크기를 줄이지 않고도 두세 줄을 수용해야 한다. 터치 대상에는 충분한 크기와 간격을 확보하고, 위험하거나 되돌릴 수 없는 선택지는 시스템 뒤로 가기 영역에 바짝 붙이지 않는다.
키보드·마우스, 컨트롤러, 터치스크린에 맞는 안내를 표시한다. 포커스 순서는 예측할 수 있어야 하며, 현재 포커스를 색상만으로 표시해서는 안 된다. TV 환경에서는 시청 거리에 맞춰 글자 크기를 확인하고, 모바일에서는 한 손 조작, 가로로 잡는 자세, 노치나 시스템 제스처 영역이 있는 기기에서 테스트한다.
자막은 스티커가 아니라 접근성 기능이다
자막에는 화자 구분, 충분한 대비, 조절 가능한 글자 크기와 배경이 필요하며, 지나치게 긴 줄이나 너무 빠른 전환을 피해야 한다. 필요한 경우 중요한 비언어적 소리를 설명하되, 관련 없는 세부 사항이 공간을 차지하지 않게 한다. 자막 켜기·끄기를 제공했다고 접근성이 완성되는 것은 아니다. 읽는 시간, 가림 현상, 인물 식별도 검증해야 한다.
Xbox 접근성 가이드라인은 자막 크기, 대비, 배경, 화자 등에 대해 실행 가능한 방향을 제시한다. 이를 테스트 참고 자료로 삼고, 대상 플랫폼의 요구사항과 함께 프로젝트의 기준을 정할 수 있다. Xbox 자막 가이드라인
카운트다운은 잘 보여야 하고 조절할 수 있어야 한다
타이머가 남은 시간을 표시할 때 색상에만 의존해서는 안 되며, 숫자, 형태, 진행 상태를 함께 사용할 수 있다. 마지막 몇 초의 소리와 애니메이션이 광과민성이나 청각적 부담을 유발해서는 안 된다. 선택지가 처음 나타났을 때 읽는 데 필요한 시간을 곧바로 차감하지 않도록 한다.
설정에서 시간 연장, 타이머 끄기, 일시정지 방안을 제공하고, 이것이 이야기의 규칙을 바꾸는지 설명한다. 시간제한 관련 설계는 모든 플레이어의 반응 속도가 같다고 여기기보다 읽기, 인지, 운동 능력의 차이를 고려해야 한다. Xbox 시간제한 가이드라인
시스템 상태를 이야기처럼 보이게 해서는 안 된다
로딩, 연결 끊김, 리소스 손상, 저장 실패에는 명확한 시스템 피드백이 필요하다. 플레이어가 검은 화면을 감독의 연출로 오해하게 해서는 안 된다. 알림은 무슨 일이 일어났는지, 자동으로 재시도하는지, 플레이어가 무엇을 할 수 있는지 설명하고 현재 선택이 사라지지 않게 보호해야 한다.
선택 화면에서 일시정지 메뉴, 음량, 자막 설정으로 안전하게 들어갈 수 있어야 하며, 돌아왔을 때 타이머 재개 규칙은 일관되어야 한다. 일시정지로 시간제한 선택을 멈출 수 없다면, 시작 전에 이를 설명하고 보조 대안을 제공해야 한다.
반응형 컴포넌트 규격을 만든다
선택지 그룹, 자막, 타이머, 알림, 튜토리얼의 최소·최대 너비, 줄 수, 여백, 안전 영역, 애니메이션 시간, 입력 상태, 접근성 시맨틱을 정의한다. 각 노드에서 좌표를 수동으로 배치하는 대신 컴포넌트를 사용하고, 특수한 숏은 통제된 변형으로 처리한다.
의사 현지화로 긴 텍스트, 혼합 문자, 오른쪽에서 왼쪽으로 쓰는 언어의 잠재적 요구사항을 테스트한다. 시스템 배율, 색각 시뮬레이션, 낮은 밝기, 화면 읽기 기능으로 점검한다. 최종적으로는 실제 사람이 대상 기기에서 테스트해야 한다.
시각적 검토에 그치지 말고 주의력 테스트를 한다
처음 플레이하는 사람에게 실제 영상을 보여 주고, 마지막으로 본 인물의 동작, 읽은 자막, 이해한 선택지를 묻는다. 시선 추적 장비는 필수가 아니다. 녹화와 구두 설명만으로도 버튼이 나타난 뒤 아무도 연기를 보지 않거나, 자막과 선택지가 서로 읽을 주의를 빼앗는 등의 문제를 발견할 수 있다. 즉시 선택하기, 망설이기, 설정에 들어가기의 세 가지 행동을 테스트한다.
컴포넌트에는 리모컨, 컨트롤러, 키보드의 포커스 경로도 기록해야 한다. 반응형 레이아웃에서 버튼 위치가 바뀌더라도 의미상 순서까지 혼란스러워져서는 안 된다. 뒤로 가기, 확인, 일시정지는 모든 페이지에서 일관되게 유지한다. 터치스크린의 스와이프나 길게 누르기가 핵심 동작이 아니라면, 명확한 안내와 대체 입력을 제공해야 한다.
숏이나 자막 시간을 조정할 때마다 선택지가 나타나는 프레임을 자동으로 캡처해 시각적 회귀 검사를 하고, 이후 사람이 주요 얼굴과 소품을 확인한다. 이렇게 하면 마지막 편집 후 UI가 모르는 사이 증거를 가리는 일을 막을 수 있다.
다음 단계: 실제 숏 중 가장 복잡한 열 개를 캡처하고, 자막, 가장 긴 선택지, 카운트다운을 가로 화면, 세로 화면, TV 템플릿에 동시에 넣는다. 읽기 어려울 정도로 줄여야만 들어가는 장면은 편집 속도나 구도로 돌아가 해결한다.


