AI로 첫 앱 만들기: 키보드만으로 버튼과 입력칸 확인하기

메모 앱 화면이 완성됐다면 마우스를 잠시 놓고 Tab 키로 이동해 보세요. 사용자가 지금 어느 버튼에 있는지, 키보드로 저장할 수 있는지 확인하는 간단한 방법입니다. 처음 만드는 앱에서도 사용자 흐름을 구체적으로 살펴볼 수 있습니다.

시작은 세 요소의 역할 구분입니다

다른 페이지로 이동하는 것은 링크, 현재 화면에서 저장 같은 동작을 실행하는 것은 버튼, 값을 받는 것은 입력칸으로 표현합니다. MDN은 의미에 맞는 HTML 요소와 입력칸의 이름표를 사용하는 방법을 설명합니다. 기본 버튼 요소에는 키보드 동작도 포함됩니다. MDN HTML 접근성 안내

AI에게 이렇게 요청해 보세요

메모 앱의 키보드 사용 흐름을 점검해 주세요. 이동은 링크, 저장과 삭제는 기본 버튼 요소를 사용해 주세요. 모든 입력칸에 보이는 이름표를 연결하고, Tab으로 이동할 때 현재 위치가 표시되게 해주세요. 화면의 읽기 순서와 이동 순서가 자연스럽게 이어지도록 해주세요. 수정한 요소와 직접 확인할 절차를 알려 주세요.

‘보기 좋게’라는 요청에 이 문장을 덧붙이면 동작 기준이 생깁니다. 아이콘만 있는 버튼에는 ‘메모 삭제’처럼 목적을 알 수 있는 이름도 요청해 주세요.

5분 확인 순서

1. 페이지를 새로 열고 Tab을 눌러 첫 조작 요소로 이동합니다.
2. 제목 입력칸에 연습용 메모를 적습니다.
3. 다음 칸과 저장 버튼까지 이동하며 현재 위치를 확인합니다.
4. 버튼에서 Enter 또는 Space로 동작을 실행합니다.
5. 저장 결과를 읽고 Shift+Tab으로 역방향 이동도 확인합니다.

확인 장면	기대하는 결과
입력칸으로 이동	어떤 내용을 적는 칸인지 알 수 있음
버튼으로 이동	테두리 등으로 현재 위치를 알 수 있음
저장 실행	결과가 표시되고 다음 행동이 가능함
역방향 이동	이전 요소로 순서 있게 돌아감

확인한 범위를 기록합니다

이 절차를 통과해도 모든 접근성 확인이 끝나는 것은 아닙니다. 화면 읽기 프로그램, 확대, 대비, 작은 화면 등은 각각 살펴볼 항목입니다. 오늘은 “어떤 브라우저에서 어떤 경로를 키보드로 실행했는지”를 적어 두세요.

가장 가까운 시작점은 첫 화면에서 입력하고 저장하는 한 경로입니다. 그 경로를 직접 해본 뒤 관측한 내용을 AI에게 전달하면 수정 요청도 분명해집니다. 이 글은 점검 방법 안내이며 독자의 앱에 대한 인증 결과는 아닙니다.

영문판: Read in English.