이 가이드에서는 현재 Blockly에 구현되어 있는 기본 키보드 탐색을 사용하는 방법을 중점적으로 설명합니다.
키보드 탐색 사용
키보드 탐색을 성공적으로 수행하려면 사용자가 다음 작업을 완료할 수 있어야 합니다.
- 작업공간에서 이동
- 작업공간에서 블록 연결
- 작업공간에 블록 추가
- 블록 분리
- 도구 상자 탐색
- 플라이아웃 탐색
- 플라이아웃에서 블록 삽입
아래에서는 Blockly의 기본 키보드 탐색으로 이러한 작업을 실행하는 방법을 설명합니다.
키보드 탐색 사용 설정
사용자는 Shift + Ctrl + k를 눌러 키보드 탐색을 사용 설정 또는 사용 중지할 수 있습니다.
키보드 탐색이 처음 사용 설정되면 작업공간에 빨간색 선이 깜박입니다. 이것이 커서입니다. 사용자가 작업공간을 탐색할 때 사용자의 현재 위치와 업데이트가 표시됩니다.
Enter를 누르면 현재 위치에 사용자의 마커를 나타내는 파란색 선이 표시됩니다. 마커에 차단 삽입을 위한 대상 위치가 표시됩니다. 작업공간에서 커서를 이동해도 업데이트되지 않습니다.
기본 커서 사용
작업공간은 입력, 필드, 연결, 블록, 작업공간 좌표로 구성됩니다. 기본 커서는 모든 구성요소를 여러 수준으로 나눠 작업공간에서 이동합니다.
층 간에 이동하려면 A와 D 키를 사용하세요. 레벨 내에서 이동하려면 W와 S 키를 사용하세요.
작업공간 수준
Shift + Ctrl + k를 눌러 키보드 탐색 모드를 시작합니다. 그러면 커서가 작업공간 또는 작업공간의 첫 번째 블록에 배치됩니다. 커서가 블록 위에 있으면 A를 두 번 눌러 작업공간 수준으로 이동합니다.
작업공간에서 커서를 이동하려면 Shift + WASD를 사용합니다. 스택 수준으로 이동하려면 D 키를 사용하세요.
스택 수준
스택 수준에서는 W와 S 키를 사용하여 작업공간의 블록 스택 간에 이동할 수 있습니다. 이 수준에서는 스택에 있는 모든 블록 주위에 빨간색 실선 직사각형으로 커서가 표시됩니다. 선택한 스택의 첫 번째 블록으로 이동하려면 D 키를 사용하세요.
차단 및 연결 수준
이 레벨에는 블록 하나와 블록의 모든 외부 연결이 포함됩니다. 기본 커서는 이전 연결 또는 출력 연결이 있는 경우 블록을 건너뛰도록 설정됩니다. 둘 다 없으면 아래와 같이 커서가 블록으로 이동합니다.
가능한 외부 연결 세 가지는 다음과 같습니다.
블록 및 연결 수준에서 W와 S 키를 사용하여 외부 연결을 탐색할 수 있습니다. 이 수준에서 커서는 현재 연결의 깜박이는 빨간색 윤곽선으로 표시됩니다. 첫 번째 필드로 이동하거나 블록에 입력하려면 D를 누릅니다.
필드 및 입력 수준
이 레벨에는 블록에 있는 모든 필드와 입력이 포함됩니다. 필드와 입력의 예는 아래와 같습니다.
이 수준에서는 W와 S를 사용하여 현재 블록의 수정 가능한 필드와 입력을 탐색할 수 있습니다. 필드의 경우 커서가 빨간색 단색 직사각형입니다. 입력의 경우 커서는 깜박이는 빨간색 퍼즐 조각입니다. 커서가 입력에 있을 때 D를 눌러 연결된 블록으로 이동합니다.
커서가 필드에 있으면 Enter를 눌러 수정할 수 있습니다.
작업공간에서 블록 연결하기
- WASD 키를 사용하여 대상 연결로 이동
- Enter 키를 사용하여 연결을 표시합니다.
- WASD 키를 사용하여 유효한 연결 지점으로 이동
- I 키를 사용하여 두 블록을 연결합니다 (삽입용).
작업공간에서 블록 이동
일반적으로 Blockly에서는 블록을 선택하여 원하는 위치로 드래그한 다음 놓습니다. 단축키를 사용하여 대상 위치를 표시하고 이동하려는 블록으로 이동한 다음 이동하라고 지시할 수 있습니다.
- Shift + WASD 키를 사용하여 작업공간에서 한 위치로 이동
- Enter 키를 사용하여 작업공간에 해당 위치를 표시합니다.
- WASD 키를 사용해 이동하려는 블록으로 이동합니다.
- I 키를 사용하여 블록을 표시된 위치로 이동합니다.
블록 분리
일반적으로 Blockly에서는 열등한 블록을 선택하고 상위 블록에서 드래그하여 두 블록의 연결을 해제합니다. 단축키를 사용하면 중단하려는 연결에서 커서로 X를 눌러 블록을 연결 해제할 수 있습니다.
- WASD 키를 사용하여 중단하려는 연결로 이동합니다.
- X를 사용하여 연결을 끊습니다.
도구 상자에서 블록 삽입
- T 키를 눌러 도구 상자를 엽니다.
- W 및 S 키를 사용하여 카테고리 간에 이동합니다.
- D 키를 눌러 플라이아웃의 블록으로 이동합니다.
- W와 S 키를 사용하여 블록을 탐색합니다.
- Enter 키를 눌러 플라이아웃에서 블록을 삽입합니다.
실험
사람들이 실험하면 도움이 되는 네 가지 주요 영역이 있습니다.
- 키 매핑: 어떤 키를 어떤 작업에 매핑해야 하는지 설명합니다.
- 스크린 리더/로깅/경고용 텍스트: 스크린 리더가 커서 위치 및 오류나 경고를 읽어야 하는 방식을 나타냅니다.
- 작업공간 탐색: 사용자가 작업공간의 여러 블록, 필드, 입력, 연결을 탐색하는 방법입니다.
- 커서 모양: 커서와 마커의 모양입니다.
이러한 API를 사용하는 방법에 관한 자세한 내용은 블록 키보드 탐색 Codelab을 참고하세요.
Google에서 도움을 받을 수 있는 실험하고 싶은 다른 영역이 있다면 양식을 작성해 주세요.
FAQ
Q: 키보드 탐색에 화살표 키를 사용하지 않은 이유는 무엇인가요?
A: 스크린 리더는 일반적으로 화살표 키를 사용합니다. 이를 방해하고 싶지 않아 WASD 키를 사용하기로 결정했습니다.
하지만 사람마다 요구사항이 다르므로 키 매핑을 쉽게 변경할 수 있는 방법을 만드는 것이 좋습니다.
Q: 꽤 복잡해 보이는데 다른 레이어가 필요한 이유는 무엇인가요?
A: 키보드 탐색을 고려할 때는 다양한 블록, 연결, 필드, 입력, 작업공간 좌표를 오가는 구조화된 방법이 필요했습니다.
내부적으로는 추상 구문 트리 (AST)로 이를 표현합니다. 기본 커서 구현은 이 모델에서 크게 벗어나지 않습니다.이는 개발자가 기본 아키텍처를 더 잘 이해할 수 있도록 하기 위한 것입니다. 최종 사용자가 더 쉽게 이해할 수 있는 다른 cursors가 있습니다.
제한사항
블록이 아닌 구성요소 (예: 휴지통, 확대/축소 버튼, 플라이아웃 버튼)로의 이동은 아직 지원되지 않습니다. 제한사항에 관한 자세한 내용은 열려 있는 키보드 탐색 bugs 목록을 참고하세요.