손으로 만든 창 열 개, 접근성은 어디서 맞출까?

리블에는 화면 위로 떠오르는 창이 많아요. 컬럼 편집, 필터, 로그인, 내비로 보내기처럼 각자 필요할 때 손으로 만든 창들이었어요.

창마다 지키는 약속이 조금씩 달랐어요

창이 열리면 키보드 초점은 창 안에 머물러야 하고, Esc를 누르면 닫히고, 닫히면 연 버튼으로 초점이 돌아와야 해요. 뒤의 페이지는 스크롤되지 않아야 하고요. 손으로 만든 창은 이 중 일부만 지키고 있었어요.

옮기면서 하나씩 열어 보니, 차트 설정·컬럼 편집·지표 편집·유형 고르기 시트에는 초점 가두기와 되돌리기가 없었어요. Tab을 몇 번 누르면 초점이 창 뒤의 페이지로 빠져나갔어요. 눈으로 쓰면 티가 나지 않아서 오래 남아 있던 빈틈이에요.

열 곳을 고치는 대신 부품 두 개를 만들었어요

공용 부품은 아래 시트(Sheet)와 대화상자(Dialog) 두 개예요. 둘 다 같은 바탕 층을 쓰고, 그 층이 접근성과 잠금, 움직임을 맡아요.

규칙을 끄는 옵션은 일부러 불편한 이름을 붙였어요. 이름만 봐도 “안전하지 않은 선택”이라는 게 드러나게 해서, 필요할 때만 쓰게 했어요.

화면은 그대로 두고 약속만 바꿨어요

2026년 11월 13일 하루에 네 번에 나눠 옮겼어요. 바꾸기 전후를 폰(402px)·PC(1440px)에서 찍어 겹쳐 보니, 내비로 보내기와 로그인 창은 픽셀 차이가 없었어요. 단지 추가 창은 초점 테두리가 몇 픽셀 달랐어요.

43개 항목을 브라우저가 매번 확인해요

부품 하나로 모아도, 누군가 고치다 약속을 깨면 다시 열 곳이 함께 깨져요. 그래서 디자인 시스템 문서에 올린 실제 부품을 브라우저로 열어, 사람이 키보드로 하던 확인을 그대로 시켜요.

• 열면 초점이 창 안에 있는지, Tab과 Shift+Tab을 여러 번 눌러도 밖으로 새지 않는지
• 창에 이름이 있는지, 대화상자는 설명까지 읽히는지
• Esc와 바깥 누르기로 닫히는지, 닫히면 연 버튼으로 초점이 돌아오는지
• 열려 있는 동안 스크롤이 잠기고 닫히면 풀리는지
• 바깥 누르기를 끈 창은 열려 있고, Esc로는 닫히는지
• 동작 줄이기 설정에서는 기다림 없이 닫히는지

시트와 대화상자 문서에는 이 동작을 키보드 표로 적어 뒀어요. 문서가 말하는 동작과 검사가 확인하는 동작이 같은 부품에서 나와요.

폰에서는 뒤로 가기로도 닫혀요

폰에서 창을 연 채 뒤로 가기를 누르면 페이지를 떠나지 않고 창만 닫혀야 해요. 그래서 옮긴 10곳 모두 1024px 미만에서는 뒤로 가기로 닫히게 했고, PC에서는 끄고 두었어요. 창을 열 때 이동 기록을 하나 더하고, 어떤 방법으로 닫든 그 기록을 지워요.

창을 연 채 다른 페이지로 이동하는 경우가 하나 남아 있어요. 한 가지 경우를 마저 막는 중이에요. 이 동작도 접근성 검사 22개 항목에 들어 있어요.

다음에 잴 것

1. 공용 부품 밖에 새로 생기는 손수 만든 창의 수
2. 창을 연 채 페이지를 옮길 때 이동 기록이 남지 않는지
3. 배포 뒤 창 안 버튼을 키보드로 누른 비율(계획, 아직 계측 없음)

숫자 출처