VibeAZ찾고, 직접 해보고, 경험을 나누는 바이브코딩 A to Z

직접 실행 · 자체 예제

그림 버튼에 이름 붙이기: 키보드로 확인하기

VibeAZ가 만든 연습 파일을 Codex 앱과 Chromium에서 확인했습니다. 그림 버튼에 이름을 붙이고 키보드로 메뉴를 열고 닫았습니다.

VibeAZ 편집실 · 확인일 2026-11-09

VibeAZ가 만든 연습 파일을 Codex 앱과 Chromium에서 확인했습니다. 그림 버튼에 이름을 붙이고 키보드로 메뉴를 열고 닫았습니다.

1. 예제 화면에는 메뉴를 여닫는 그림 버튼이 있습니다. 내 화면에 쓸 때는 해당 파일이나 화면을 연 코딩 에이전트 대화에서 시작합니다. 2. 아래 요청문을 보내고 완성된 HTML을 엽니다. 다른 입력칸을 누르지 말고 Tab으로 메뉴 버튼까지 이동합니다. 3. Enter로 열고 Space로 닫습니다. 화면 읽기 도구가 있다면 실제 버튼 이름도 읽어보세요. 이번 예제는 음성 검사는 하지 않았습니다.

그림만 있는 연습용 메뉴 버튼을 키보드와 화면 읽기 도구로도 알아볼 수 있게 고쳐줘. 버튼에 기능을 설명하는 이름을 주고 Tab으로 이동한 뒤 Enter나 Space로 작동하는지 확인해줘. 원래 버튼의 기능과 위치는 그대로 유지하고, 실제로 확인하지 못한 것은 따로 적어줘. 나는 코딩을 처음 해. 어려운 말은 짧게 풀어 설명하고, 먼저 현재 상황을 확인한 뒤 요청한 범위만 진행해줘. 확인할 수 없는 내용은 추측하지 말고 알려줘. 내 실제 데이터나 비밀값을 사용하지 말고, 새 유료 서비스나 외부 API를 추가하지 마. 작업을 마치면 내가 직접 확인할 순서와 실행하지 못한 부분을 나누어 알려줘.

이름 없던 그림 버튼에 브라우저가 읽을 수 있는 메뉴 열기라는 이름이 생겼습니다. Tab으로 버튼에 이동한 뒤 Enter를 누르자 메뉴가 열리고 이름이 메뉴 닫기로 바뀌었습니다. Space를 누르면 닫혔습니다. 390px에서 문서 폭과 스크롤 폭이 같았습니다. 화면 읽기 프로그램의 실제 음성 출력은 검사하지 않았습니다.

키보드에서 버튼 이름과 동작이 확인되는지 다시 살펴보고, 확인하지 못한 도구는 명시해줘.

요청 조건을 읽고 제작·검사한 예제입니다. 문장만 넣은 독립적인 1회 생성 실험은 아닙니다. VibeAZ 자체 제작 · 확인한 예제 파일과 환경에서의 결과입니다. VibeAZ가 만든 연습 파일을 Codex 앱과 Chromium에서 확인했습니다. 다른 모델·브라우저의 같은 결과나 요금제는 확인하지 않았습니다. 추가 유료 서비스와 외부 API는 사용하지 않았습니다. 코딩 에이전트 이용료는 각자의 계정 조건에 따릅니다. 접근성 이름과 키보드 동작만 확인했습니다. 화면 읽기 프로그램의 음성 출력과 전체 접근성 인증은 확인하지 않았습니다.

그림 버튼에 이름 붙이기 프롬프트 초보자 따라하기