HUB SOLUTION · EDITORIAL
토토솔루션 초점 검수, 대화상자 위에 확인창이 열리면
토토솔루션 샘플에서 설정 창 하나가 정상 작동해도, 그 위에 확인창이 열리는 흐름은 따로 살펴야 한다. 카지노솔루션 관리자 비교에서도 편집 취소를 눌렀다가 계속 작성으로 돌아오는 경로가 좋은 검수 대상이다. 이번 글은 겹친 대화상자 사이의 조작 권한과 편집 상태 보존에 초점을 둔다. 아래 절차는 W3C 공식 자료를 응용한 편집 제안이며 특정 제품을 시험한 결과가 아니다.
24초 핵심 요약
글의 핵심을 자막과 도식으로 정리한 자체 제작 설명 영상입니다. 음성은 포함하지 않습니다.
영상 대본 보기
창의 순서를 먼저 정한다 메뉴에서 편집창과 취소 확인창을 차례로 여는 경로를 정하고, 각 단계의 조작 범위를 표시한다.
위쪽 창에 초점을 유지한다 Tab과 Shift+Tab으로 확인창을 순회한다. 배경 터치가 아래 편집 버튼을 실행하는지도 따로 살핀다.
Escape 한 번의 결과를 본다 확인창만 닫히는지 관찰하고, 계속 작성 버튼으로 돌아온 경우와 남은 창 및 입력 내용을 비교한다.
복귀 결과를 나누어 판정한다 초점 위치, 편집 내용, 열린 창을 별도로 기록한다. 모바일과 키보드, 두 테마의 결과도 구분한다.
겹치는 창을 하나의 검수 경로로 정하기
허브솔루션 샘플안내는 이미지와 부연설명을 제공하며 직접 접속은 별도 문의로 안내한다. 따라서 구매자는 실제 조작 가능한 환경에서 중첩 대화상자 지원 여부부터 물어야 한다. 가상의 경로는 모바일 전체 메뉴에서 공지 편집을 열고, 내용을 바꾼 뒤 취소를 눌러 변경 폐기 확인창을 여는 순서로 잡자. 이런 구성이 없다면 기능이 있다고 전제하지 말고 실제 제공되는 취소 흐름을 대상으로 삼는다.
W3C 모달 패턴은 다른 대화상자 위에 창이 놓이는 경우도 다루며 활성 창 아래의 내용은 조작할 수 없는 상태로 설명한다. 이를 적용해 검수표에는 본문, 전체 메뉴, 편집창, 확인창을 각각 적도록 제안한다. 확인창이 열린 순간 어느 영역만 조작 가능해야 하는지 공급자와 합의하자. 아래 창이 보이는지와 아래 창을 사용할 수 있는지는 별도 항목이다. 메뉴가 먼저 닫히는 설계라면 그 전환도 시작 조건에 포함한다.
위쪽 창으로 초점이 넘어가는 순간 확인하기
W3C는 모달이 열릴 때 초점을 내부로 옮기고 Tab과 Shift+Tab의 이동을 그 안에 유지하도록 설명한다. 구매 검수에서는 편집창의 취소 버튼에서 확인창으로 넘어간 직후를 별도 관찰 지점으로 잡자. 확인창에 계속 작성과 변경 폐기 버튼이 있다면 처음 초점을 둘 위치도 미리 정한다. 이 예시에서는 입력을 유지하는 계속 작성을 후보로 제안하되, 실제 업무에 맞게 공급자와 결정한다.
확인창을 연 뒤 Tab으로 두 버튼을 순회하고 Shift+Tab으로 반대 방향도 확인하자. 아래 편집창의 제목 입력란이나 메뉴 링크로 초점이 이동하는지 기록한다. 이어 모바일에서는 확인창 바깥에 보이는 편집 영역을 터치해 입력이나 버튼 실행이 가능한지 따로 살핀다. 배경 터치로 확인창을 닫는 설계라면 닫히기만 하는지, 같은 터치가 아래 버튼까지 실행하는지도 확인 대상으로 넣자. 어두운 배경만으로 조작 차단을 판정하지 않는다.
참고: [1]
한 번 닫을 때 한 단계만 이동하는지 살피기
W3C 모달 패턴은 Escape로 창을 닫는 동작과 눈에 보이는 닫기 수단을 안내한다. 이를 중첩 상황에 적용한 이번 제안은 한 번의 Escape가 어떤 창을 닫는지 명시하는 것이다. 변경 폐기 확인창에서는 해당 창만 닫히고 편집이 이어지는 결과를 기대값으로 정할 수 있다. 아래 편집창과 전체 메뉴까지 한꺼번에 사라진다면 단순한 닫기 성공으로 처리하지 말고 합의한 단계와 대조해야 한다.
가상 공지 제목에 확인용 문구를 입력하고 확인창에서 Escape를 한 번만 누르자. 남은 창, 초점 위치, 입력 문구를 각각 기록한다. 같은 초기 상태를 다시 준비해 계속 작성 버튼을 터치한 결과와 키보드로 실행한 결과를 비교한다. 확인창이 사라진 다음 다른 키를 누르기 전 상태를 먼저 남기는 것이 좋다. 그 뒤 편집창에서 다시 취소를 실행했을 때 확인 절차가 정상적으로 시작되는지도 살피면 취소 후 작업 재개까지 확인할 수 있다.
참고: [1]
터치와 키보드를 섞어도 현재 위치가 보이는가
W3C 초점 가시성 설명은 키보드 사용자가 현재 위치를 알아볼 수 있어야 하며 표시가 시간 경과로 사라져서는 안 된다고 안내한다. 이 원칙을 적용해 처음부터 키보드만 쓰는 경로 외에 터치로 메뉴와 편집창을 연 다음 외장 키보드로 확인창을 조작하는 경로를 추가하자. 터치 직후 표시가 없다는 관찰만으로 실패를 확정하지 말고, 키보드 조작 시 현재 위치를 확인할 수 있는지 구분해 기록한다.
휴대전화와 태블릿에서는 기기, 브라우저, 화면 방향, 키보드 탐색 설정을 남기고 데스크톱에서도 같은 순서를 비교하자. 확인창이 열린 채 화면을 회전하거나 화면 키보드를 표시한 조건에서는 초점 표시와 두 선택 버튼을 볼 수 있는지 살핀다. 블랙·화이트 테마를 제공한다면 각각의 시작 조건으로 반복하고 선택 유지도 확인한다. 현재 버튼의 테두리, 버튼 글자, 뒤에 비치는 편집창을 구별할 수 있는지와 가로 넘침 여부는 별도 관찰란에 적도록 제안한다.
참고: [2]
닫힘과 입력 폐기를 서로 다른 결과로 기록하기
모달 패턴이 정하는 초점 동작만으로 편집 내용의 보존 정책까지 결정되지는 않는다. 구매 요구사항에는 계속 작성, Escape, 변경 폐기를 서로 다른 행으로 두자. 앞의 두 경로에서는 입력을 유지하고 편집을 이어가며, 변경 폐기에서는 합의한 범위만 버리는 기준을 제안한다. 제목만 바꾼 조건과 본문까지 바꾼 조건을 준비하면 어느 입력을 폐기했는지 대조하기 쉽다. 저장된 원문과 현재 미저장 입력도 구분해서 적는다.
최종 인수표에는 시작 상태, 열린 창의 순서, 입력 수단, 한 번의 조작, 남은 창, 초점 대상, 입력 보존 결과를 연결하자. 예를 들어 계속 작성을 선택했는데 편집창은 남고 본문만 비었다면 초점 복귀와 내용 보존을 각각 판정한다. 공개 샘플 이미지로는 확인하지 못하는 부분이므로 공급자에게 해당 경로의 시연과 기록을 요청하고, 재현하지 않은 조건은 미확인으로 남긴다. 수정 후에는 문제 지점뿐 아니라 메뉴 진입부터 편집 재개까지 같은 경로를 다시 확인하도록 합의하자.
참고자료 및 출처
아래 공식 문서와 사이트 안내를 참고해 작성한 설명입니다. 검수 시나리오와 체크리스트는 이를 적용한 제안이며, 실제 제품 테스트 결과를 뜻하지 않습니다.
- Dialog (Modal) Pattern | APG | WAI | W3C자료 확인: 2026-10-03
- Understanding Success Criterion 2.4.7: Focus Visible | WAI | W3C자료 확인: 2026-10-03
- 샘플안내 | 토토솔루션자료 확인: 2026-10-03