교육 앱

전 세계의 교육자, 부모 및 학생들이 교육에 기술을 사용하고 있습니다. 이 항목의 시나리오를 검토하고 Microsoft 디자인 스타일을 앱에서 적용하는 방법을 배우면 교육 앱 디자인에 대한 아이디어를 얻을 수 있습니다. Windows 8.1에는 학생, 교사, 직원 및 관리자를 위한 몰입형 앱 환경을 빌드하는 데 사용할 수 있는 개발자 도구와 새로운 디자인 선택 항목이 있습니다.

교육 앱의 경우 콘텐츠, 교실 오케스트레이션 및 계정 관리, 공동 작업, 관리 및 테스트, 참여, 접근성 등을 고려해야 합니다.

콘텐츠

교육 앱을 디자인할 경우 사용자에게 제공할 콘텐츠 유형과 사용자가 콘텐츠를 소비하는지 만드는지 여부를 고려하세요. 교육 앱에 일반적인 콘텐츠 시나리오는 다음과 같습니다.

  • 교육 콘텐츠 및 표준, 교재, 라이브러리, 자습서
  • 교실 관리
  • 평가—테스트하고 퀴즈를 풉니다.
  • 지침 도구 및 교실 오케스트레이션
  • 학생을 위해 디자인된 생산성 도구(작성, 발표, 구성)

Kno TextbooksKhan Academy는 소비를 위한 관련 교육 텍스트 및 동영상을 제공할 때 유용한 교육 콘텐츠 앱입니다.

Kno Textbooks을 보여 주는 스크린샷

Kno Textbooks

Khan Academy를 보여 주는 스크린샷

Khan Academy

OakReFactory의 Record Voice and Pen은 콘텐츠 만드는 데 유용한 앱입니다. 교사는 음성 녹음과 메모를 동시에 수행한 다음 해당 내용을 저장하고, 내보내고, 공유할 수 있습니다.

Record Voice and Pen 내보내기 마법사

동영상 녹화를 중지한 후 모달 상자에서 내보내기 기본 설정을 선택할 수 있습니다.

공유 참 메뉴가 있는 Record Voice and Pen

그런 다음 공유 참 메뉴를 통해 콘텐츠를 공유할 수 있습니다.

콘텐츠 만드는 데 유용한 다른 앱으로는 Educ8 Teacher가 있습니다. 교사는 Educ8 Teacher에서 교실 세션을 시작하고 가상 칠판에 쓸 수 있습니다. 그런 다음 만든 콘텐츠를 저장하고 나중에 다시 연결할 수 있습니다. 이 앱은 교사가 교실에서 대형 스크린에 프로젝트를 영사하는 시나리오에 적합합니다.

Educ8 Teacher 수학 및 기하 도형

Educ8 Teacher 1학년 수학

Educ8 Teacher 실제 수학

클래스 오케스트레이션 및 관리

앱을 디자인할 때 앱에서 실시간 비동기 통신, 콘텐츠 만들기 및 소비, 컨트롤 또는 사용 권한을 통해 교육자와 학습자를 지원하는 방법을 고려하세요. 교실 오케스트레이션 및 관리의 측면에서 앱 디자인에 대해 고려할 항목은 다음과 같습니다.

  • 교실 오케스트레이션

    교실 오케스트레이션은 교실 활동의 실시간 관리를 말합니다. 앱을 사용하는 대상이 로컬 사용자, 원격 사용자 또는 둘 모두인지를 고려하세요. 실시간 요구 사항과 사용자의 실제 위치에 따라 교실 오케스트레이션을 위한 디자인 시나리오를 안내할 수 있습니다. 예를 들어 교실에 가득 찬 학생을 교육하는 교육자는 전 세계에서 원격으로 학습하는 학생 클래스를 교육하는 교육자와 앱 요구 사항이 다를 수 있습니다. 교실 오케스트레이션 요구 사항에 대한 일반적인 시나리오로는 테스트 시나리오가 있습니다. 자세한 내용은 평가: 관리 및 과제, 퀴즈, 테스트를 참조하세요. 고려할 다른 시나리오로는 학생, 도우미 및 교육자에게 실시간으로 질문과 대답을 제공하는 라이브 웹 또는 화상 채팅 세션이 있습니다.

  • 계정 관리

    앱(예: 교사, 관리자, 부모 및 학생)에 액세스해야 하는 많은 사용자를 수용하는 여러 계정 유형과 각 계정 유형에서 사용할 다양한 인터페이스 요소 및 콘텐츠를 고려하세요. 예를 들어 앱에서 교육자 계정을 위한 콘텐츠 만들기 기능과 학생 계정을 위한 읽기 전용 접근 권한 값을 제공할 수 있습니다. 로그인 환경에 따라 결정되고 학생에게는 제공되지 않은 교사 접근 권한 값을 제공하여 UI로 나타낼 수 있습니다.

  • 연령별 등급 및 자녀 보호

    많은 교육 앱은 18세 미만의 사용자를 대상으로 하므로 앱에서 연령 제한이 있는 데이터를 결정할 때 주의하시기 바랍니다. Microsoft는 이러한 용도로 연령별 등급을 제공합니다. 스토어에 앱을 업로드하기 전에 연령 등급이 관련 연령 그룹을 반영하고 연령별 등급 차트의 기준을 충족하는지 확인하세요. 또한 앱 내에 필요한 자녀 보호 설정을 제공해야 합니다.

    GuruCool Preschool Puzzles

    "부모 설정"은 GuruCool Preschool Puzzles의 앱 바와 왼쪽 위에 있습니다.

공동 작업

사용자가 공동 작업을 수행하고 앱에서 원하는 공동 작업을 유도할 수 있도록 해주는 사용자 흐름을 디자인할 수 있습니다. 공동 작업이 실시간으로 수행되거나 학생에게 다양한 시점의 정보가 표시됩니까?

Promethean ActiveEngage2는 학생이 질문에 응답하고 교실 토론에 실시간으로 참여하는 가상 학생 응답 시스템입니다. 인터페이스 디자인을 통해 교사 또는 학급과 정보를 공유할 수 있습니다.

Promethean ActiveEngage2

Promethean ActiveEngage2실시간으로 공동 작업을 유도합니다.

Microsoft OneNote, Skitch 및 Evernote는 사용자들이 메모를 공유 및 편집하도록 허용하여 공동 작업을 가능하게 해주는 앱입니다. 이러한 경우 앱에서는 공유 계약을 사용하여 사용자가 파일 위치, 문서 또는 요약을 보낼 수 있도록 도와줍니다.

평가: 관리 및 과제, 퀴즈, 테스트

앱에 테스트 및 퀴즈 시나리오가 포함되어 있는 경우 교육자는 학생 테스트를 제약하거나 시간 제한을 적용하거나, 학생이 테스트를 수행하는 동안 앱 내의 다른 콘텐츠(예: 강의 동영상)에 대한 액세스를 제한할 수 있습니다. 예를 들어 앱에 학습 계획이 있는 경우 학생이 앱에서 테스트를 수행하는 동안 학습 계획을 사용하지 못하도록 할 수 있습니다. BrainPOP은 사용자가 퀴즈를 푸는 동안 동영상 콘텐츠에 액세스할 수 없도록 디자인되었습니다. 또한 사용자가 퀴즈를 완료하여 등급을 받지 않고 종료한 경우 대답을 저장하였다가 해당 위치로 돌아와서 퀴즈를 다시 풀 수 없습니다. 즉, 퀴즈를 완료하지 않고 종료한 경우 퀴즈를 처음부터 다시 시작해야 합니다.

BrainPOP 퀴즈

BrainPOP 퀴즈 대화

BrainPOP퀴즈를 완료하지 않고 종료할 경우 메시지 대화 상자를 표시하여 사용자에게 경고합니다. 이 경우 대답을 저장할 수 없습니다.

ABC School은 만화를 표시하고 배경 음악을 재생하는 독자용 앱입니다. 소리와 애니메이션을 통해 사용자의 대답이 맞는지 여부에 대한 피드백을 제공합니다. 사용자가 활동에 몰입할 수 있도록 이러한 사용자 피드백 기능을 구현하는 것이 좋습니다.

ABC School

참여

Windows에서는 타일 및 알림을 통해 더 많은 사용자 참여를 유도할 수 있는 기회를 제공합니다. 교육 앱을 디자인할 때 이러한 참여 기회를 고려하세요.

  • 타일

    라이브 타일은 앱을 통한 참여와 재참여를 높일 수 있는 유용한 방법입니다. 교육 앱에서 라이브 타일을 사용하는 다음 시나리오를 고려하세요.

    • 학생이 잘 이해가 되지 않는 항목을 다시 공부하도록 유도합니다.
    • 학생들에게 예정된 과제, 퀴즈 및 테스트에 대해 알립니다.
    • 교육자에게 등급 평가를 완료하거나 학생들에게 최근에 제출된 과제에 대한 피드백을 제공하도록 알립니다.

    앱이 콘텐츠를 기반으로 하는 경우 BrainPOP처럼 라이브 타일을 사용하여 학생들에게 오늘의 주제를 알려줄 수 있습니다.

    BrainPOP 타일

    BrainPOP라이브 타일을 사용하여 사용자에게 오늘의 주제를 알려줄 수 있습니다.

    게시 앱(예: NOOK)인 경우 업데이트를 푸시하여 사용자가 읽었거나 현재 읽고 있는 내용을 알려주거나, 현재 학습 중이거나 관심 있는 항목에 관한 새로운 전자책에 대해 알려줄 수 있습니다.

    NOOK 타일

    NOOK사용자에게 라이브 타일에서 최근에 읽은 내용을 알려 줍니다.

    큰 타일은 한 번에 여러 라이브 업데이트를 추가하거나 사용자의 진행 상황을 그래픽으로 표시하는 데 충분한 공간을 제공합니다. 예를 들어 GuruCool Preschool Puzzles은 큰 타일에서 자녀와 부모에게 항목을 완료하도록 유도하는 진행률 차트의 작은 버전을 구현할 수 있습니다.

    GuruCool Preschool Puzzles 진행률 차트

    Preschool Puzzles큰 타일에서 위의 진행률 차트 버전을 구현하여 사용자에게 항목을 완료하도록 유도할 수 있습니다.

    보조 타일은 관심 있는 앱 섹션에 대한 유용한 진입점이 됩니다. 보조 타일은 섹션으로 이동하는 단계 수를 줄여 줍니다. 예를 들어 학생이 수업 시간표를 확인하려는 경우 수업 시간표 페이지를 연결하는 보조 타일을 한 번 클릭하거나 탭하여 수업 시간표를 위로 당길 수 있습니다.

  • 알림

    예정된 테스트 또는 과제 기한과 같이 시간이 중요한 콘텐츠를 포함하는 시나리오에서는 알림을 통해 라이브 타일을 보완하는 것이 좋습니다. 알림은 라이브 타일보다 더 많은 주의를 끌 수 있으므로 기한이 임박한 테스트 또는 과제와 같은 중요한 시나리오에 대해 알림을 사용하여 앱이 "스팸"으로 여겨지는 것을 방지하세요. 사용자가 앱에서 알림을 사용하는 방법을 제어할 수 있도록 수신할 앱에 대한 옵션을 제공하는 것이 좋습니다.

접근성

디자인 프로세스의 초기에 모든 학습자가 콘텐츠를 조작하는 방법과 앱에서 제공할 시청각 요구 사항을 고려하세요. 앱 개발의 디자인 결정 단계 중에 고려할 수 있는 몇 가지 접근성 시나리오가 있습니다. 교육에 가장 중요한 접근성 요구 사항은 다음과 같습니다.

  • 청각적 요구

    Windows에는 화면에 표시되는 텍스트를 큰 소리로 읽어주고 이벤트를 설명하는 화면 읽기 프로그램인 Microsoft 내레이터가 제공됩니다. Microsoft 내레이터 및 기타 화면 읽기 프로그램용 앱을 최적화하면 시력이 나쁘거나 시각 장애가 있는 사용자도 앱에 액세스할 수 있습니다. 앱을 테스트하여 XAML 또는 HTML에서 접근성을 지원하도록 최적화되었는지 확인하세요. 화면 읽기 프로그램이 작동하려면 앱 내의 모든 UI 요소에 이름, 역할, 설명, 상태, 위치 및 기타 관련 정보를 사용하여 적절한 레이블을 지정해야 합니다. 화면 읽기 프로그램에서 기본 UI 요소를 결정할 수 있도록 XAML 또는 HTML을 최적화하면 개발 시간을 단축할 수 있을 뿐만 아니라 모든 사용자의 사용자 환경을 크게 개선할 수 있습니다.

  • 시각적 요구

    모든 사용자가 액세스 가능한 향상된 시각적 환경을 구축하려면 앱 내의 이미지 및 동영상에 대한 선택 캡션과 자막을 포함하세요. 앱에서 텍스트를 개선하려면 XAML과 HTML 모두에 대해 텍스트와 배경의 대비를 높게 설정하는 것이 좋습니다. 배경에 대한 최소 광도 대비율이 4.5:1이 되어야 앱이 액세스 가능한 것으로 간주됩니다. 색맹인 사용자도 수용하려면 색을 사용하여 정보를 전달하는 위치에서 텍스트, 도형, 아이콘 등과 같은 색 대체 방법을 사용합니다.

  • 키보드 조작 및 대체 입력

    다양한 방법으로 앱을 조작할 수 있습니다. 가장 일반적인 방법은 터치, 키보드, 마우스 및 펜을 사용하여 조작합니다. 앱이 게임과 유사한 경우 컨트롤러 또는 3D 제스처가 인식될 수 있습니다.

    앱에 키보드 접근성 기능을 많을수록 더 많은 학생이 앱의 콘텐츠를 요약하고 과제를 쉽게 완료할 수 있습니다. 바로 가기 키를 사용하도록 설정하고, Enter 키 또는 스페이스바로 요소를 활성화하고, 화살표 및/또는 탭을 통해 탐색하도록 허용하여 키보드 조작을 지원합니다. XAML 또는 HTML의 탭 인덱스 속성을 설정하여 기본 탭 순서를 재정의할 수 있습니다.

    액세스 가능한 앱을 디자인한 후 Windows 스토어에 제출할 때 앱이 액세스 가능한 것으로 표시되는지 확인하세요.

관련 항목

연령별 등급 및 등급 위원회

앱 타일 샘플

접근성을 위한 검사 목록

비전 정의

접근성에 대한 지침

앱 바에 대한 지침

로그인 컨트롤에 대한 지침

콘텐츠 공유에 대한 지침

타일에 대한 지침

알림 메시지에 대한 지침

HTML AppBar 컨트롤 샘플

Windows 스토어 앱 만나보기

Microsoft 내레이터

콘텐츠 소스 공유 앱 샘플

콘텐츠 공유 대상 앱 샘플

앱의 접근성 테스트(HTML)

앱의 접근성 테스트(XAML)

알림 메시지 샘플

도구

Windows 스토어 앱용 UX 지침

UX/UI

XAML AppBar 컨트롤 샘플