Visual Studio 코드에서 Microsoft 포함 디자인의 영향

만능인, 또는 포괄적 인 디자인 마이크로 소프트가 최근 소프트웨어 개발에 대해 진지하게 생각하는 새로운 디자인 철학. 포괄적 인 디자인 훨씬 더 넓은 관점에서 접근성을 보면서 접근성있는 디자인을 다음 단계로 끌어들입니다. Microsoft의 새로운 소스 코드 편집기 인 Visual Studio Code를 테스트 할 때 그들이 실제로 어떻게 이론을 구현했는지 자연스럽게 내 마음 속에 나타났다..

이 게시물은 Visual Studio Code의 접근성 기능에 대한 설명 일뿐 공식적인 문서에서는 큰 요점을 찾을 수 있지만 원하는 경우주의 할 점에 대한 사례 연구를 목표로합니다. 포괄적 인 앱 디자인 미래에.

물론 이질적인 이유로 소프트웨어와 웹 디자인 모두에서 포괄 성이 곧 요구된다는 것을 확신 할 수 있기 때문에 많은 새로운 사용자가이 테이블에 올 것으로 예상됩니다.

포괄적 인 디자인의 Microsoft 4 원칙

Windows Dev Center는 액세스 가능한 소프트웨어 디자인을 사용합니다. 사용 편의성 범주, 또한이 주제에 대한 많은 훌륭한 기사를 게재했습니다. 마이크로 소프트 포괄적 인 디자인의 네 가지 원칙 (아래에 간단히 열거 됨)이이 기사에서 논의됩니다.

생각한다 만능인.
그것을 만드십시오. 개인적인.
보관해라 단순한.
몹시 떠들어 대다 기쁨.

원본 기사를 읽은 경우 원칙을 테스트하기가 항상 쉬운 것은 아니라는 식으로 표현됩니다. "감정적 인 연결", "경이를 불러 일으킨다", 과 "마법 같은". 따라서 저는 차분하게 생각하고, 주관적인 의미를 제거하고, 원칙을 객관적인 기준으로 바꾸고 싶습니다..

Visual Studio 코드에서 어떻게 구현되는지 분석 할 때 다음과 같은 의미로 사용합니다.

생각한다 만능인: 접근성
그것을 만드십시오. 개인적인: 사용자 정의 가능성, 확장 성
보관해라 단순한: 산만하고 논리적 인 사용자 인터페이스
몹시 떠들어 대다 기쁨: 기능 검색 가능성

물론 이것은 단지 하나의 가능한 분류 일 뿐이며 많은 겹침, 예를 들어 맞춤 설정 기능은 “즐거움을 창조하십시오.” 원칙이지만, 우리가 유형이 필요한 것을 필요로 할 때, 지금이 해석을 고집합시다..

Windows Dev Center에서는 이러한 포괄적 인 디자인 원칙을 Windows 10 응용 프로그램에 적용 할 것을 권장하지만 Microsoft는 Microsoft Design 사이트도 포괄적 인 디자인에 전념했습니다.

Visual Studio 코드는 Windows 10만의 것이 아니지만 교차 플랫폼 소프트웨어, 앞서 언급 한 원칙에 따라 기능을 안전하게 테스트 할 수 있습니다. Microsoft는 포괄적 인 디자인을 향후 수행 할 소프트웨어 디자인 경로로 명확하게 처리합니다..

유니버설을 생각하십시오

아래의 “유니버설을 생각하십시오” 원칙, 우리는 접근 가능한 비주얼 스튜디오 코드가 얼마나 다양한 사용자 그룹을위한, 장애인이나 선호도에 상관없이 보조 기술 사용자 (사용자), 제한된 기술을 가진 사람들, 영어가 모국어가 아닌 사람들 등.

1. 확대 / 축소

확대 / 축소는 Ctrl + = / Cmd + = (맥) 에 대한 키보드 단축키 확대, 및 Ctrl + - / Cmd + - (맥) 바로 가기 축소, 상단 메뉴 표시 줄을 통해 확대 / 축소 기능에 액세스 할 수도 있습니다..

버전 1.1.1에서 Windows 키보드의 오른쪽 및 숫자는 오른쪽의 숫자 키패드에서 작동하지 않습니다. 입력 (영숫자) 키패드에서만 가능하며 이는 포괄성에 적합하지 않습니다..

Persisted Zoom Level 기능을 사용하면이 문제를 다소 보완 할 수 있습니다. 지속적 확대 / 축소 수준 사용자 설정 (이 작업을 수행하는 방법에 대한 내 이전 게시물 읽기).

2. 고 대비 테마

높은 콘트라스트 테마로 시각 정보 처리 시각 장애가있는 사용자의 경우, 따라서 액세스 가능성의 중요한 요소입니다.

거기에 기본 고 대비 테마 비주얼 스튜디오 코드에서, 클릭하여 설정할 수 있습니다. 파일> 환경 설정> 색상 테마 메뉴가 있지만 Visual Studio 코드 마켓 플레이스에서도 다른 버전을 다운로드 할 수 있습니다.

Microsoft는 Windows 7에서 고 대비 테마를 선보였습니다..

3. 키보드 내비게이션

시각 장애 또는 이동 장애로 인해 마우스를 사용할 수없는 사람들에게는 키보드 탐색 기능이 필수적입니다. 키보드를 효과적으로 탐색하려면 사용자가 모든 기능을 제어 할 수있다. 소프트웨어 키보드 만 사용하여.

Visual Studio 코드는이 기능을 훌륭하게 구현하며, 미리 설정된 키 바인딩 (전체 목록 참조) 사용자는 JSON 형식 구성 파일을 사용하여 키보드 단축키를 사용자 정의 할 수도 있습니다.

4. 탭 탐색

탭 탐색 기능으로 다른 지역으로 뛰어 다니다 Visual Studio 코드.

현재 버전 1.1.1에서 VS 코드는 모든 영역에 대해 탭 탐색을 지원하지 않습니다. 예를 들어 상단 메뉴 표시 줄은이 방법으로 사용할 수 없습니다. 좋은 소식은 Microsoft가 문서의 현재 알려진 문제점에서이 기능이 없음을 인정하는 것입니다..

테스트하는 동안 나는 편집자, 그만큼 사이드 바, 그만큼 전망 막대기 (VS 코드 영역 이름 지정 참조), Tab 키를 사용하여 해당 동작 및 항목에 액세스 할 수 있습니다. 탭 사용자는 키보드로 최상위 메뉴 모음의 기능에 액세스 할 수 없습니다. 명령 팔레트 F1은이를 대체 할 수 있습니다. 최상위 메뉴에서 찾을 수있는 모든 명령에 액세스 할 수 있기 때문입니다.

탭 내비게이션의 중요한 접근성 기능은 Tab 키의 두 기능 간을 전환 할 수있는 탭 트래핑입니다. 트랩 된 Tab 키를 사용하여 VS 코드의 다른 부분으로 이동, 일반적으로 Tab 키 텍스트 파일에 탭 문자 추가 편집기 영역에서 엽니 다. 사용자는 Ctrl + M 키 바인딩을 눌러 두 기능간에 전환 할 수 있습니다..

5. 스크린 리더

물론 액세스 가능한 소프트웨어는 화면 판독기 사용자에게도 충분히 사용할 수 있어야합니다. 문서에서는 VS Code 개발 팀이 NVDA 화면 판독기를 사용하여 스크린 리더 가용성을 테스트 한 사실을 언급합니다..

테스트를 위해 필자는 두 가지 다른 스크린 리더 인 JAWS를 사용했습니다. JAWS는 가장 널리 사용되는 스크린 읽기 응용 프로그램 중 하나이며 Microsoft Narrator는 Windows 10의 내장 스크린 리더입니다.

입 부분 내레이터는 모든 영역, 명령 및 메뉴를 부지런히 읽었지만 내레이터는 작업에 약간의 문제가있었습니다. 예를 들어, 마우스를 사용하여 이동할 때만 최상위 메뉴 항목을 올바르게 읽었지만 내 키보드에서는 아래쪽 화살표를 사용하지 않았습니다. 그러나 이것은 Visual Studio Code가 아닌 Narrator의 단점이므로 시각 장애가있는 사용자가보다 고급 스크린 리더 앱을 사용하여 모든 VS 코드 기능에 액세스 할 수 있다고 가정 할 수 있습니다.

6. 디버거 접근성

앱을 완벽하게 액세스하고 포괄적으로 만들려면 처음에는 마음에 들지 않는 부분도 고려해야합니다. Visual Studio 코드의 경우 디버거가 이에 대한 좋은 예입니다. 개발 팀은 포괄적으로 만들기 위해주의를 기울 였으므로 Tab 및 키보드 탐색도 지원하며 화면 판독기에 액세스 할 수 있습니다..

7. 현지화

이제 우리는 문서에서 접근성 기능 VS 코드 목록을 토론 할 준비가되었지만 다른 중요한 것들도 있습니다. “유니버설을 생각하십시오” 포괄적 인 디자인 원리. 이 중 하나는 현지화 또는 다른 단어입니다. 외국어 지원 디스플레이 언어로, 세계의 많은 사람들이 영어가 모국어가 아닌 사람들입니다..

Visual Studio 코드가 현재 현지화되어 있습니다. 10 가지 다른 언어 표시 (영어, 중국어 간체, 중국어 번체, 프랑스어, 독일어, 이탈리아어, 일본어, 한국어, 러시아어, 스페인어).

이 언어에서 오는 사용자는 표시 언어를 구성 할 필요가 없습니다. VS 코드 기본적으로 운영 체제의 표시 언어를 선택합니다.. 다른 언어를 표시 언어로 설정하려는 경우 해당 언어를 쉽게 구성 할 수 있습니다. locale.json 파일.

아마도 10 개의 디스플레이 언어가 그다지 많지는 않지만 VS 코드가 새로운 소프트웨어임을 고려하면 Microsoft는 앞으로도 더 많은 것을 지원할 가능성이 높습니다. 현재 지원되는 언어가 아닌 언어를 사용하는 사용자는 VS 코드를 영어로 설치합니다..

8. 접근 가능한 크기

현대의 소스 코드 편집기는 실제로 크지 않으며 Visual Studio 코드는 100MB 미만 다운로드 및 디스크 풋 프린트가 200MB 미만인 경우.

9. 크로스 플랫폼 개발

포괄적 인 소프트웨어를 원한다면 다른 플랫폼에서 실행해야한다는 크로스 플랫폼이 필요합니다. VS 코드는이 요구 사항을 충족합니다. Windows, OS X 및 Linux 게다가.

개인적으로 만들어라.

“개인적으로 만들어라.” 포괄적 인 디자인이라는 마이크로 소프트의 두 번째 원칙입니다. 사용자 정의 가능성 과 확장 성 내가이 약속을하기 전에이 기준에 따라 Visual Studio 코드는 두 가지 요구 사항을 모두 충족하므로 두 가지 모두에 개별 게시물을, 여기에 사용자 정의 가능성을, 그리고 여기에 확장 성을 썼습니다..

요컨대, 사용자 정의 가능성은 다음과 같이 구현됩니다. 맞춤 테마 과 모듈화 된 JSON 형식 구성 설정, 확장 성은 맞춤 확장 사용자는 Visual Studio Code Marketplace에서 다운로드하거나 TypeScript 또는 JavaScript로 자신을 만들 수 있습니다..

Visual Studio Code의 확장성에 대한 기술적 배경에 대한 자세한 내용은 여기를 참조하십시오..

사용자 정의 기능은 소스 코드 편집기의 일반적인 사용자 인 기술에 능통 한 사람들에게 이상적인 방법으로 해결됩니다. 모듈화 된 JSON 형식 구성 파일.

구성 옵션이 보이지 않는 거대한 메뉴 계층 구조 뒤에 숨겨져 있지 않기 때문에 이것은 훌륭한 솔루션입니다. 코딩 전문가가 아니더라도 사용자는 사용자 정의를 쉽게 편집 할 수 있습니다. .json 파일들, Visual Studio Code는 기본 편집기와 사용자 정의 설정을 바로 옆에있는 두 개의 편집기 창에서 열어 사용자가 쉽게 실험 할 수 있도록합니다..

구성 파일은 모듈화되어 있으며 논리적으로 구조화 된 계층 구조로되어 있습니다. .json 파일들, 가장 중요한 것들의 목록은 다음과 같습니다 :

settings.json ...에 대한 사용자 정의 사용자 설정, 를 통해 액세스 할 수 파일> 환경 설정> 사용자 설정 메뉴
.vscode / settings.json ...에 대한 사용자 지정 작업 영역 설정, 를 통해 액세스 할 수 파일> 환경 설정> 작업 환경 설정 메뉴
keybindings.json ...에 대한 사용자 정의 키 바인딩, 를 통해 액세스 할 수 파일> 환경 설정> 키보드 단축키 메뉴
javascript.json, php.json, css.json, c.json, 그리고 다른 무리 .json 설정을위한 다른 프로그래밍 언어 용 파일 맞춤 사용자 스 니펫, 를 통해 액세스 할 수 파일> 환경 설정> 사용자 스 니펫 메뉴
launch.json ...에 대한 사용자 정의 디버거 설정, 디버그보기의 톱 바 (편집기 왼쪽에 있음)의 톱니 바퀴 아이콘을 클릭하여 액세스 할 수 있습니다.
.vscode / locale.json ...에 대한 맞춤 디스플레이 언어 설정, 를 입력하여 액세스 할 수 있습니다. 언어 설정 명령을 명령 팔레트 (F1)
.vscode / tasks.json ...에 대한 사용자 지정 작업 실행기 설정, 를 입력하여 액세스 할 수 있습니다. 작업 러너 구성 명령을 명령 팔레트 (F1)

VS 코드 사용자는 사용자 지정 가능성에 대해 거의 불평 할 수 없다고 생각합니다. 옵션을 나열하는 것조차도 철저한 작업이었습니다..

구성 옵션이 모듈화되어 있기 때문에 사용자는 그들은 정말로 필요하다., 수행하려는 작업에 집중할 수 있습니다. 따라서, 그들은보다 직관적 인 워크 플로우로 남을 것입니다..

단순하게 유지하십시오.

Microsoft의 단순하게 유지하십시오. 프로그래밍 및 디자인의 다른 많은 장소에서 포괄적 인 디자인 원칙을 구현하기 위해서는 KISS (Keep It Simple, Stupid) 디자인 원칙과 DRY (Do not Repeat Yourself) 소프트웨어 개발 원칙에 대해 생각하십시오. 이 실행 컨텍스트에서 우리는 사용자 인터페이스의 단순성.

접근성의 측면에서 볼 때,인지 적 및 지적 장애가있는 사용자 때문에 사용하기 쉽고 간단한 사용자 인터페이스가 일반적으로 권장됩니다. Visual Studio 코드는 소스 코드 편집기이므로 이러한 종류의 손상을 가진 사람들이 자주 사용하는 소프트웨어는 아니지만 일부 회색 영역도있을 수 있습니다.

단순함은 잘 설계되고 논리적 인 인터페이스가 학습 곡선을 낮추십시오., 과 작업 속도를 높이다., 일반 대중에게 소프트웨어를 더욱 매력적으로 만들어줍니다..

Visual Studio 코드 잘 알려진 psyhological 현상을 활용, 단순 노출 효과 (또는 친숙 현상), Atom과 같은 잘 알려진 다른 소스 코드 편집기와 비슷한 기본 레이아웃을 사용하기 때문에.

Microsoft는 문서를 통해 Microsoft가 큰 노력을 기울 였음을 알 수 있습니다.

또한 VS 코드는 다른 소스 코드 편집기에서 볼 수있는 Side by Side 편집 기능을 사용자에게 제공하며, 우연이 아닙니다. 코딩 프로세스를 훨씬 단순하게 만듭니다., 물론 “단순하게 유지하십시오.” 포괄적 디자인 원칙.

기본 UI 위에 Visual Studio 코드에는 다음과 같은 포괄적 인 디자인에 대한 기사에서 언급 할 가치가있는 멋진 기능이 있습니다.

Intellisense 컨텍스트 (인공 지능을 사용하는 백엔드 파트도 좋은 솔루션 임)를 기반으로 사용자에게 제안을 제공합니다.
몰래 엿보다 (Shift + F12) 인라인 창에서 전체 함수 정의를 표시합니다.
명령 팔레트 (F1) 모든 명령을 동일한 위치에서 액세스 가능하게합니다..

즐거움 만들기

Google에서 검토 할 수있는 유형 기준을 찾는 것이 특히 쉽지는 않습니다. “즐거움 만들기” 포괄적 인 디자인 원칙을 바탕으로 기능 검색 가능성, Microsoft는이 원칙을 다음과 같이 정의했습니다.

이 말씨는 Google의 최신 큰 것 중 하나 인 마이크로 순간을 상기 시켜줄 수 있습니다. 따라서 업계를 앞당기는 방법에 대해 생각할 때 선도적 인 기술 기업이 유사한 결론을 내릴 수있는 방법을 보여줄 수 있습니다.

포괄적 인 디자인에서는 사용자 참여 유도, 과 그들의 호기심을 불러 일으킨다., 아마 우리가 달성 할 수있는 최선의 방법은 그들이 앞으로 나아갈 수 있도록 돕는다. 사용자가 여행 할 때 특정 시점에 도달했을 때 다만 올바른 순간에, 전후가 아니라 전후.

우리가 이야기 할 때 기능 검색 가능성, 기쁨을 창출 해내는 세상적인 표현은 잘 설계된 유틸리티 탐색, 스마트 문서 및 적절한 순간에 팝업으로 나타나는 정보를 통해 증가시킬 수 있습니다.

Visual Studio 코드에서 이러한 모든 기능에 대한 예제를 찾을 수 있습니다. IntelliSense 과 명령 팔레트, 그러나 구문 강조 과 맞춤 코드 스 니펫 또한 사용자가 소프트웨어를 최대한 활용할 수 있도록 도와줍니다. Visual Studio Code를 사용하여 즐거움을 느끼는지 여부를 판단해야합니다..

나 자신을 위해, 나는 다소 경험을 좋아했다 : 체계적인 온라인 문서, 그만큼 쉬운 Visual Studio 코드 마켓 플레이스 탐색, 그리고 사용자 정의 색 테마 드롭 다운 목록을 스크롤하면서 실시간으로 미리 볼 수 있습니다 ( 파일> 환경 설정> 색상 테마 메뉴).

최종 단어

포괄적 인 디자인이 새로운 분야이므로 기술 산업은 아직 실험 단계에 있습니다. 나는 마이크로 소프트가 다음과 같은 중요한 이정표를 세웠다고 생각한다. 포괄적 인 디자인의 네 가지 원칙 정의.

우리가 볼 수 있듯이 전체적인 Tab 지원과 전역 검색 및 바꾸기 기능을 제공하는 것과 같이 개선해야 할 부분이 아직 있지만 Visual Studio 코드의 새로운 소스 코드 편집기에서 실제로 이론을 성공적으로 구현할 수있었습니다.

접근성과 포괄 성 모두가 사용자 경험의 일부, 최신 업계 트렌드를 따라 가고 싶다면 더 많은 것을 배우는 것이 좋습니다. 도움이 될만한 자료는 다음과 같습니다.

Windows 개발자 센터의 접근성 관련 기사
Microsoft Design의 포괄적 인 디자인 툴킷 설명서 (PDF) (다운로드 가능)
Hongkiat.com 접근성 태그