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