창이 닫힌 뒤에도 사용자의 과업은 이어집니다

옵션 안내를 읽거나 구성을 선택하기 위해 대화상자를 열 수 있습니다. 화면에서는 상자를 닫으면 원래 페이지가 다시 보이지만 키보드 초점은 다른 곳에 남아 있을 수 있습니다. 사용자는 방금 눌렀던 버튼이나 다음 입력란을 다시 찾아야 합니다. 대화상자 검수는 상자가 나타나는 모습뿐 아니라 들어가는 위치, 상자 안의 이동, 닫는 방법, 닫힌 뒤의 연결까지 포함해야 합니다.

가상의 구성 안내 창을 열고 닫는 흐름을 설계합니다. 실제 구현 코드를 제공하는 글은 아니며, 시작 초점·배경 처리·닫기 사유·복귀 위치의 관계를 정리합니다.

열렸을 때 어디에서 시작할지 정합니다

대화상자가 열리면 초점이 내부의 적절한 요소로 이동하는지 확인합니다. 처음부터 마지막 확인 버튼으로 초점을 보냈는데 위에 중요한 구성 조건이 길게 있다면 사용자는 내용을 놓칠 수 있습니다. 반대로 짧은 안내 창에서 불필요하게 여러 요소를 지나야 한다면 과업이 복잡해질 수 있습니다. 콘텐츠의 성격과 길이에 맞춰 시작 위치를 검토합니다.

긴 목록이나 표, 여러 문단이 들어 있는 안내에는 내용의 시작을 알 수 있는 제목이나 정적인 요소가 적합한 출발점일 수 있습니다. 시작 요소에 초점이 있다는 사실과 전체 내용을 읽을 수 있다는 사실을 구분해야 합니다. 실제로 제목과 내용의 관계가 이해되는지, 초점 이동 때문에 상단 안내가 화면 밖으로 나가지 않는지 확인합니다.

설명용 창시작 위치 검토확인할 질문
짧은 추가 안내과업에 맞는 내부 요소내용과 닫기 방법을 알 수 있는가
긴 구성 목록내용의 시작이나 제목상단 조건이 가려지지 않는가
여러 입력 항목현재 입력할 적절한 요소제목·도움말·입력 관계가 남는가
되돌리기 어려운 행동행동의 위험과 선택을 고려의도하지 않은 실행을 유도하지 않는가

표는 특정 구현의 합격 결과가 아니라 검수 질문의 예시입니다. 모든 창의 시작을 동일한 버튼으로 고정하지 않습니다. 실제 내용이 바뀌거나 입력 항목이 추가되면 처음 정한 초점 위치가 여전히 적절한지 다시 확인해야 합니다.

상자 안의 이동과 배경의 동작을 함께 봅니다

모달 안에서 Tab과 Shift+Tab으로 제공된 요소를 이동할 때 상자 밖으로 빠지지 않는지 확인합니다. 마지막 요소와 첫 요소 사이의 연결도 봅니다. 이것은 단순히 키를 막는 작업과 다릅니다. 내부의 필요한 내용과 기능을 사용할 수 있어야 하며, 대화상자를 닫아 원래 과업으로 돌아갈 방법도 있어야 합니다.

동적으로 항목이 추가되는 구성 선택 창에서는 처음 열었을 때의 이동 목록과 이후 목록이 달라질 수 있습니다. 옵션을 바꾼 뒤 새 요소에 접근할 수 있는지, 제거된 요소에 초점이 남지 않는지 확인합니다. 처음 한 번의 이동만 검사하고 다른 표시 상태까지 완료로 표시하지 않습니다.

배경 페이지의 스크롤과 버튼 동작도 확인합니다. 상자가 열려 있는데 뒤의 구매 버튼이 실행되거나 페이지가 움직여 닫힌 뒤 위치를 잃을 수 있습니다. 다만 스크롤 제한을 적용하는 과정에서 상자 안의 긴 내용까지 읽을 수 없게 만들지 않습니다. 배경과 대화상자의 읽기·이동 범위를 나누어 봐야 합니다.

대화상자 바깥 본문의 이동 구조는 본문 바로가기와 영역 구분에서 이어서 확인할 수 있습니다.

닫기·취소·확인을 같은 행동으로 처리하지 않습니다

안내만 읽는 창에서는 닫기가 원래 페이지로 돌아가는 행동일 수 있습니다. 선택을 바꾸는 창에서는 취소와 확인이 다른 결과를 가질 수 있습니다. 가상의 구성 A를 임시로 선택했다가 취소한 경우와 확인해 적용한 경우를 나누어 기록하면 상태 변화와 초점 복귀를 함께 검토하기 쉽습니다. 실제 옵션이 어떻게 적용되는지는 구현과 정책에서 정해야 합니다.

닫는 경로상태 검수복귀 검수
닫기 버튼안내 창의 상태를 끝내는가원래 문맥을 찾을 수 있는가
취소임시 변경과 적용 상태를 구분하는가다시 선택할 위치가 명확한가
확인정한 조건대로 선택이 적용되는가적용 결과와 다음 과업이 연결되는가
Escape해당 창의 닫기 정책과 같은가닫힌 뒤 초점이 사라지지 않는가

APG의 모달 패턴은 Escape로 닫는 키보드 동작과 눈에 보이는 닫기 컨트롤을 안내합니다. 실제 서비스에서는 닫기 경로별로 어떤 값이 유지되고 어떤 값이 취소되는지 별도 검토해야 합니다. 배경을 눌러 닫는 기능을 제공한다면 실수로 선택 상태가 바뀌지 않는지도 확인합니다. 어떤 경로를 사용했는지 기록 없이 상자가 사라졌다는 사실만으로 검수를 끝내지 않습니다.

닫힌 뒤의 초점은 과업의 관계로 정합니다

대체로 창을 열었던 요소로 돌아가는 흐름을 생각할 수 있지만 항상 같은 요소가 남아 있는 것은 아닙니다. 선택이 적용되면서 원래 버튼이 제거되거나 다음 단계가 더 논리적인 위치일 수 있습니다. APG는 열었던 요소가 사라진 경우와 과업 흐름에 맞는 대체 위치를 설명합니다. 복귀 위치를 페이지 맨 위로 임의로 정하는 대신 실제 과업의 연결을 검토합니다.

구성 안내 버튼이 남아 있다면 그 버튼으로 돌아가 선택 결과를 확인하게 합니다. 버튼이 요약 영역으로 바뀌었다면 변경 결과와 다음 과업을 읽을 수 있는 위치를 복귀 대상으로 정합니다.

복귀 대상이 DOM에 있어도 화면 밖이나 고정 헤더 뒤에 가려질 수 있습니다. 실제 초점 테두리와 가시 위치를 확인하고 창을 다시 열어 같은 경로를 반복합니다.

창 안에서 입력 오류가 발생하는 흐름이라면 오류 요약과 입력 필드 연결도 함께 설계해야 합니다. 닫기와 오류 수정은 서로 다른 초점 이동입니다.

창의 이름과 긴 설명을 나눕니다

대화상자에는 무엇을 하는 창인지 알 수 있는 이름이 필요합니다. 제목과 연결된 이름을 제공하고 버튼 이름도 닫기·취소·확인의 결과를 설명하게 합니다. 모양만 있는 닫기 아이콘을 넣었다면 접근 가능한 이름과 실제 동작이 같은지 확인합니다. 제목이 시각적으로 보인다는 사실과 프로그램적으로 관계가 남는다는 사실을 구분합니다.

긴 표와 여러 문단을 하나의 설명 문자열로 묶으면 구조를 읽기 어려울 수 있습니다. 제목·목록·표의 관계를 유지하고 사용하는 보조기술에서 시작 위치와 탐색 순서를 확인합니다.

aria-modal을 선언한 창은 실제로 배경 조작도 제한해야 합니다. 배경을 숨기는 과정에서 창 자체를 숨기지 않았는지 확인하세요.

기본 요소를 사용해도 실제 표시 상태는 검수합니다

HTML dialog 요소에는 대화상자를 위한 기본 기능이 있습니다. 모달로 여는 방식과 일반 표시 방식의 차이, 콘텐츠와 닫기 동작을 구현할 때의 고려사항은 MDN dialog 문서에서 확인할 수 있습니다. 기본 요소를 사용했다는 사실이 실제 페이지의 내용·스타일·상태 처리까지 검증됐다는 뜻은 아닙니다.

기존 사이트의 창을 기본 요소로 바꿀 때는 열기와 닫기 함수뿐 아니라 이름, 시작 초점, 선택 상태, 배경 처리, 복귀 대상을 함께 확인합니다. 다른 구현과 섞여 닫기 이벤트가 중복 실행되거나, 창 안의 콘텐츠가 나중에 바뀌며 초점 위치가 사라지는지도 봅니다. 문제가 생기면 한 가지 속성을 추가해 숨기기보다 실제 흐름을 구분해 다시 검수합니다.

작은 화면과 확대에서는 닫기 방법이 남아야 합니다

대화상자가 화면보다 커지면 상단 제목이나 하단 확인 버튼이 처음에 안 보일 수 있습니다. 내용의 시작을 알 수 있는지, 내부를 이동해 끝까지 읽을 수 있는지, 닫기 방법을 찾을 수 있는지 확인합니다. 창의 높이를 무조건 작게 고정하거나 내용을 잘라내는 방식으로 해결하지 않습니다.

글자를 확대해 줄 수가 늘어난 상태에서도 닫기 버튼과 확인 버튼까지 이동해 봅니다. 버튼 겹침과 잘린 초점 테두리가 있는지 확인합니다.

열기부터 복귀까지 한 기록으로 검수합니다

단계기록할 내용핵심 질문
열기시작 버튼·초기 상태적절한 내부 위치로 들어가는가
내부 이동Tab·Shift+Tab·내용 변화필요한 요소와 내용에 접근하는가
닫기버튼·취소·확인·Escape정한 상태 변화와 같은가
복귀초점 대상·위치·다음 과업실제 문맥이 이어지는가
환경 변경화면 폭·확대·입력 방식이름·내용·닫기 방법이 남는가

페이지 주소, 브라우저, 입력 방식과 사용한 보조기술을 기록하고 닫기 버튼·취소·확인·Escape를 각각 시험합니다. 옵션이 삭제되거나 버튼이 바뀌면 기존 복귀 대상이 사라질 수 있으므로 변경 뒤 초점 위치를 다시 확인하세요.

열기 버튼이 사라진 뒤의 복귀 경로를 정하는 예시

이 표는 가상의 옵션 편집 화면 설계 기록입니다. 구현 코드나 실행 시험 결과를 제공하는 표는 아닙니다.

닫힘 상황현재 문서 상태복귀 후보와 확인
취소·열기 버튼 option-A 유지기존 선택은 그대로 남음option-A로 복귀하고 다음 Tab 경로 확인
확인·새 선택 행이 추가됨다음 과업은 추가된 행 검토새 행의 필요한 조작 요소로 이어지는지 검토
작업 중 option-A가 삭제됨원래 요소로 초점을 줄 수 없음관련 목록의 유효한 다음 요소를 지정하고 가시성 확인

복귀 대상이 사라지는 경우를 별도로 설계합니다. 취소·확인 각각의 선택 결과와 남아 있는 다음 과업을 기준으로 초점 대상을 정해야 body로 초점이 유실되는 일을 막을 수 있습니다.

참고 자료와 예제의 범위