인터랙티브 필름 선택 화면의 포커스 순서와 위치를 명확하게 설계하는 법

선택 화면의 포커스는 현재 어디인지, 다음에 어디로 이동하는지, 확인 후 무엇이 일어났는지 답해야 합니다. 보이는 테두리뿐 아니라 순서, 가림, 복귀 위치를 장면과 분기 상태에 맞춥니다.

인터랙티브 필름 접근성은 공개 직전에 자막만 확인한다고 끝나지 않습니다. 선택 화면, 재생 제어, 분기 상태, 영상과 음향이 하나의 경험을 이룹니다. 어느 한 층이라도 인지하거나 조작하거나 이해할 수 없으면 시청자는 이야기를 계속할 방법을 잃습니다. WCAG 2.2는 웹 콘텐츠를 인식 가능하고, 운용 가능하고, 이해 가능하고, 견고하게 만드는 원칙을 제시합니다. 이 글은 관련 지침을 인터랙티브 필름 제작 방법으로 옮긴 것입니다. 글 하나를 따랐다고 적합성이 증명되는 것은 아니며, 배포 플랫폼과 대상 시장, 장애인 사용자 테스트 요구를 별도로 확인해야 합니다.

H02 선택이 인물 클로즈업 위에 나오고 자막 위치에 따라 두 컨트롤이 움직입니다. 일시 정지 후 돌아왔을 때 페이지 맨 위로 가거나 리모컨 오른쪽이 음량으로 이동하면 컨트롤은 보여도 경로를 예측할 수 없습니다.

예시는 가상의 단편 영화 《안개 항구에서 온 편지》를 사용합니다. 시청자는 밤의 항구에서 바뀐 편지를 조사하고 창고, 대합실, 등대 중 어디로 갈지 선택합니다. 인물, 경로, 테스트 기록, 자산 ID는 모두 교육용 창작물입니다. 실제 사용자 사례나 완료된 테스트 결과가 아니며 DramaFork가 자동으로 제공하는 기능도 아닙니다.

먼저 경험 약속과 실패 조건을 한 문장씩 씁니다. 약속에는 누가 어떤 기기와 상황에서 어떤 일을 완료해야 하는지 포함합니다. 실패 조건은 출시를 멈출 지점입니다. “키보드만으로 모든 선택을 완료할 수 있다”는 검증할 수 있지만 “키보드 친화적이다”는 검증하기 어렵습니다. 진입 시 첫 항목이나 마지막으로 명시한 항목에 포커스를 둡니다. 시각·의미 순서를 따르고 자막, 대화상자, 화면 가장자리에 가리지 않게 합니다. 확인 피드백 후 닫고 취소하면 레이어를 연 컨트롤로 돌아갑니다.

H02는 왼쪽 다음 오른쪽 순서를 고정하고 일시 정지를 별도 포커스 영역으로 둡니다. 재개하면 원래 선택으로 돌아갑니다. 상태 변화로 비활성화되면 가까운 사용 가능 항목으로 옮기고 변화를 알립니다.

네 항목은 같은 버전을 참조해야 합니다. 화면 시안만 바꾸면 이전 결함이 해결됐는지 알 수 없고, 코드만 바꾸면 “컨트롤이 반응한다”를 “시청자가 이해했다”로 잘못 해석할 수 있습니다. 편집, 상호작용 설계, 개발, QA가 인수하는 것은 정지 화면이 아니라 반복해서 재현할 수 있는 경험입니다.

첫째, 주요 경로, 짧은 경로, 되돌아가는 경로, 무입력 경로를 목록화하고 모든 선택과 재생 제어, 필수 정보를 표시합니다. 둘째, 각 과업에 기본 방식과 대체 방식을 지정하고 같은 서사 결과에 도달하게 합니다. 셋째, 규칙을 안정적인 장면 ID, 자산 ID, 상태 필드에 연결해 문구 수정으로 추적성이 깨지지 않게 합니다.

넷째, 마무리 작업 전에 저비용 검사를 합니다. 키보드만 사용하기, 글자 확대하기, 움직임 줄이기, 일시 정지 후 돌아오기를 각각 실행합니다. 다섯째, 여러 기기와 보조 기술로 확인하면서 단계, 예상 결과, 실제 결과, 증거 위치를 남깁니다. 모든 레이어의 진입, 이동, 종료 경로를 그리고 노드 ID에 연결합니다. 키보드, 리모컨, 화면 확대 상태에서 자막, 설정, 오류를 차례로 열어 포커스가 보이고 숨은 컨트롤에 가지 않는지 확인합니다.

좋은 기록은 “문제없어 보임”이라고 쓰지 않습니다. “H02로 진입해 대체 설정을 켜고 왼쪽 행동을 선택한 뒤 clue_letter=true가 기록되고 H03 첫 대사가 이를 반영하는지 확인한다”라고 씁니다. 진입, 행동, 피드백, 종료를 함께 다루므로 실패가 입력, 표현, 이야기 상태 중 어디에 있는지 찾을 수 있습니다.

마우스 호버에만 스타일을 주거나 우연한 DOM 순서를 쓰거나 대화상자 닫은 뒤 포커스를 잃는 문제가 흔합니다. 색 변화만 쓰지 말고 움직이는 배경에서도 구분되는 테두리나 형태 변화를 더합니다.

접근성 설정이 깊은 메뉴에 숨겨져 있으면 필요한 시청자가 그곳까지 도달하지 못할 수 있습니다. 시작 화면, 첫 선택, 일시 정지 메뉴에 발견하기 쉬운 진입점을 둡니다. 설정을 바꾸면 즉시 인지 가능한 피드백을 주고 다음 노드에서도 유지합니다. 다시 불러올 때 사라진다면 공개 전에 고치거나 제한을 분명히 알립니다.

자동 검사는 이름 누락, 일부 대비 문제, 일부 포커스 결함을 찾을 수 있습니다. 그러나 선택 문구가 이해하기 쉬운지, 음성 해설이 다른 분기의 비밀을 누설하는지, 일시 정지가 서사 이해를 해치는지는 판단할 수 없습니다. 경로 단위 수동 검사와 장애인 사용자의 참여가 필요합니다. 콘텐츠 문제는 편집, 미디어 문제는 음향이나 후반 작업, 상태 문제는 개발, 범위 충돌은 책임자에게 돌려보냅니다.

플레이어에서 선택으로 이동하고 일시 정지를 열고 닫으며 자막을 바꾸고 돌아와 확인하는 동안 항상 하나의 포커스만 보입니다. 순서는 화면과 맞고 가리지 않으며 확인과 취소 후 위치를 예측할 수 있어야 합니다.

최소 출시 자료에는 기능 범위, 경로 목록, 설정 기본값, 다섯 언어의 인터페이스 문구, 검사한 기기와 입력 방식, 알려진 제한, 결함 담당자, 시작부터 결말까지의 전체 기록을 포함합니다. W3C 자료는 표준과 해설을 제공합니다. 이 글의 표와 노드 이름, 가상 사례는 편집 방법이며 W3C가 요구하는 고정 양식이 아닙니다.

플레이어, 브라우저, TV WebView는 포커스를 다르게 처리합니다. 시안만 보지 말고 스크롤, 확대, 전체 화면, 시스템 포커스를 실제 실행 환경에서 검사합니다.

마지막으로 제작에 참여하지 않은 사람이 기록만 보고 경험을 재현하게 합니다. 무엇을 눌러야 하는지, 시간이 얼마나 남았는지, 신호가 무엇을 뜻하는지, 재개하면 어디서 시작하는지 다시 물어야 한다면 인수인계가 끝나지 않은 것입니다. 답을 규칙과 증거에 반영한 뒤 공개합니다.

참고 자료: W3C Understanding SC 2.4.7: Focus Visible, W3C Understanding SC 2.1.1: Keyboard.